Merge branch 'master' into connection-status-integration

app/src/main/helpers/cursorSettings.ts

@@ -41,6 +41,106 @@ const hideSystemCursorCss = `
   *:focus:not(:focus-visible) {
     cursor: none !important;
   }
+
+  .react-player-hide-cursor {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-panel {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-play-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-volume-slider-container {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-volume-slider {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-mute-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-timeline {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-current-time-display {
+    cursor: none !important;
+  }
+
+  video::-webkit-full-page-media::-webkit-media-controls-panel {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-panel {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-start-playback-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-overlay-play-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-toggle-closed-captions-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-status-display {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-mouse-display {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-timeline-container {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-time-remaining-display {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-seek-back-button {
+    cursor: none !important;
+  }
+
+  video {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-seek-forward-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-fullscreen-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-enclosure {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-rewind-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-return-to-realtime-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-toggle-closed-captions-button {
+    cursor: none !important;
+  }
 `;
 
 const showSystemCursorCss = `

app/src/main/windows.ts

@@ -136,14 +136,20 @@ export const createMouseOverlayWindow = (parentWindow: BrowserWindow) => {
     const newBounds = parentWindow.getBounds();
 
     newMouseWindow.setBounds(newBounds);
-    parentWindow.webContents.send('set-dimensions', newBounds);
+    parentWindow.webContents.send('set-dimensions', {
+      width: newBounds.width,
+      height: newBounds.height - (isArm64Mac ? 40 : 0),
+    });
   });
 
   parentWindow.on('move', () => {
-    const newDimension = parentWindow.getBounds();
+    const newBounds = parentWindow.getBounds();
 
-    newMouseWindow.setBounds(newDimension);
-    parentWindow.webContents.send('set-dimensions', newDimension);
+    newMouseWindow.setBounds(newBounds);
+    parentWindow.webContents.send('set-dimensions', {
+      width: newBounds.width,
+      height: newBounds.height - (isArm64Mac ? 40 : 0),
+    });
   });
 
   return newMouseWindow;
@@ -181,5 +187,11 @@ export const createStandaloneChatWindow = () => {
     newStandaloneChatWindow.show();
   });
 
+  // Open standalone URLs in the user's default browser.
+  newStandaloneChatWindow.webContents.setWindowOpenHandler((edata) => {
+    shell.openExternal(edata.url);
+    return { action: 'deny' };
+  });
+
   return newStandaloneChatWindow;
 };

app/src/os/services/ship/chat/chat.db.ts

@@ -737,6 +737,22 @@ export class ChatDB extends AbstractDataAccess<ChatRow, ChatUpdateTypes> {
     return Math.max(result[0]?.lastTimestamp - 1, 0) || 0;
   }
 
+  findChatDM(peer: string, our: string) {
+    if (!this.db?.open) return;
+    const query = this.db.prepare(`
+      SELECT DISTINCT path
+      FROM ${CHAT_TABLES.PEERS}
+      WHERE ship = '${peer}'
+      AND path NOT IN (
+        SELECT path
+        FROM ${CHAT_TABLES.PEERS}
+        WHERE ship NOT IN ('${peer}', '${our}')
+      )
+      `);
+    const result = query.all();
+    return result;
+  }
+
   getChatPeers(path: string) {
     if (!this.db?.open) return;
     const query = this.db.prepare(`

app/src/os/services/ship/ship.service.ts

@@ -304,7 +304,6 @@ export class ShipService extends AbstractService<any> {
           let fileContent, fileName, fileExtension;
           if (args.source === 'file' && typeof args.content === 'string') {
             fileContent = fs.readFileSync(args.content);
-            // console.log(fileContent);
             const fileParts = args.content.split('.');
             fileName = fileParts.slice(0, -1);
             // only take the filename, not the path

app/src/renderer/App.tsx

@@ -2,6 +2,8 @@ import { useEffect, useMemo, useState } from 'react';
 import { MotionConfig } from 'framer-motion';
 import { observer } from 'mobx-react';
 
+import { PassportMenuProvider } from 'renderer/components/People/usePassportMenu';
+
 import { GlobalStyle, RealmBackground } from './App.styles';
 import { AppContent } from './AppContent';
 import { AppLoading } from './AppLoading';
@@ -78,12 +80,14 @@ const AppPresenter = () => {
         {background}
         <SelectionProvider>
           <ContextMenuProvider>
-            <ErrorBoundary>
-              {titlebar}
-              {content}
-              {contextMenu}
-              <div id="portal-root" />
-            </ErrorBoundary>
+            <PassportMenuProvider>
+              <ErrorBoundary>
+                {titlebar}
+                {content}
+                {contextMenu}
+                <div id="portal-root" />
+              </ErrorBoundary>
+            </PassportMenuProvider>
           </ContextMenuProvider>
         </SelectionProvider>
       </AppStateProvider>

app/src/renderer/apps/Courier/components/ChatMessage.tsx

@@ -8,6 +8,7 @@ import {
   MenuItemProps,
   OnReactionPayload,
 } from '@holium/design-system';
+import { useToggle } from '@holium/design-system/util';
 
 import { useContextMenu } from 'renderer/components';
 import { useAppState } from 'renderer/stores/app.store';
@@ -39,6 +40,8 @@ export const ChatMessagePresenter = ({
   const isOur = message.sender === ourShip;
   const { getOptions, setOptions, defaultOptions } = useContextMenu();
 
+  const deleting = useToggle(false);
+
   const messageRowId = useMemo(() => `message-row-${message.id}`, [message.id]);
   const isPinned = selectedChat?.isMessagePinned(message.id);
   const { color: authorColor, nickname: authorNickname } = useMemo(() => {
@@ -233,9 +236,11 @@ export const ChatMessagePresenter = ({
         icon: 'Trash',
         iconColor: '#ff6240',
         labelColor: '#ff6240',
-        onClick: (evt: React.MouseEvent<HTMLDivElement>) => {
+        onClick: async (evt: React.MouseEvent<HTMLDivElement>) => {
           evt.stopPropagation();
-          selectedChat.deleteMessage(message.id);
+          deleting.toggleOn();
+          await selectedChat.deleteMessage(message.id);
+          deleting.toggleOff();
         },
       });
     }
@@ -312,6 +317,7 @@ export const ChatMessagePresenter = ({
       ourShip={ourShip}
       ourColor={ourColor}
       isEditing={selectedChat?.isEditing(message.id)}
+      isDeleting={deleting.isOn}
       updatedAt={message.updatedAt}
       isEdited={hasEdited}
       author={message.sender}

app/src/renderer/apps/Courier/views/ChatInfo/PeerRow.tsx

@@ -1,10 +1,11 @@
-import { useEffect } from 'react';
-import { observer } from 'mobx-react-lite';
+import { useEffect, useRef } from 'react';
 
 import { Avatar, Box, Flex, Row, Text } from '@holium/design-system/general';
 import { MenuItemProps } from '@holium/design-system/navigation';
+import { useToggle } from '@holium/design-system/util';
 
 import { useContextMenu } from 'renderer/components';
+import { usePassportMenu } from 'renderer/components/People/usePassportMenu';
 import { useShipStore } from 'renderer/stores/ship.store';
 
 type Props = {
@@ -19,20 +20,51 @@ const LabelMap = {
   admin: 'admin',
 };
 
-const PeerRowPresenter = ({ id, peer, options, role }: Props) => {
+export const PeerRow = ({ id, peer, options, role }: Props) => {
+  const rowRef = useRef<HTMLDivElement>(null);
   const { getOptions, setOptions } = useContextMenu();
+  const { getMenuConfig, setMenuConfig } = usePassportMenu();
+  const selected = useToggle(false);
 
   const { friends } = useShipStore();
 
+  const contact = friends.getContactAvatarMetadata(peer);
+
+  useEffect(() => {
+    if (getMenuConfig()?.id === id) {
+      selected.toggleOn();
+    } else {
+      selected.toggleOff();
+    }
+  }, [getMenuConfig, setMenuConfig]);
+
   useEffect(() => {
     if (options && options.length && options !== getOptions(id)) {
       setOptions(id, options);
     }
   }, [options, getOptions, id, setOptions]);
 
-  const metadata = friends.getContactAvatarMetadata(peer);
   return (
-    <Row id={id}>
+    <Row
+      id={id}
+      ref={rowRef}
+      selected={selected.isOn}
+      onClick={(evt) => {
+        evt.stopPropagation();
+        if (selected.isOn) {
+          setMenuConfig(null);
+        } else {
+          setMenuConfig({
+            id,
+            contact,
+            anchorPoint: {
+              x: rowRef.current?.getBoundingClientRect().left || 0,
+              y: rowRef.current?.getBoundingClientRect().top || 0,
+            },
+          });
+        }
+      }}
+    >
       <Flex
         gap={10}
         flexDirection="row"
@@ -45,9 +77,9 @@ const PeerRowPresenter = ({ id, peer, options, role }: Props) => {
           <Avatar
             simple
             size={22}
-            avatar={metadata.avatar}
-            patp={metadata.patp}
-            sigilColor={[metadata.color || '#000000', 'white']}
+            avatar={contact.avatar}
+            patp={contact.patp}
+            sigilColor={[contact.color || '#000000', 'white']}
           />
         </Box>
         <Flex flex={1} height="22px" overflow="hidden" alignItems="center">
@@ -59,7 +91,7 @@ const PeerRowPresenter = ({ id, peer, options, role }: Props) => {
               whiteSpace: 'nowrap',
             }}
           >
-            {metadata.nickname ? metadata.nickname : metadata.patp}
+            {contact.nickname ? contact.nickname : contact.patp}
           </Text.Custom>
         </Flex>
         {(role === 'host' || role === 'admin') && (
@@ -71,4 +103,4 @@ const PeerRowPresenter = ({ id, peer, options, role }: Props) => {
     </Row>
   );
 };
-export const PeerRow = observer(PeerRowPresenter);
+// export const PeerRow = observer(PeerRowPresenter);

app/src/renderer/apps/Courier/views/ChatLog/ChatLog.tsx

@@ -14,7 +14,6 @@ import { useTrayApps } from 'renderer/apps/store';
 import { trackEvent } from 'renderer/lib/track';
 import { useStorage } from 'renderer/lib/useStorage';
 import { useAppState } from 'renderer/stores/app.store';
-import { ChatMessageType } from 'renderer/stores/models/chat.model';
 import { useShipStore } from 'renderer/stores/ship.store';
 
 import { ChatLogBody } from './ChatLogBody';
@@ -102,7 +101,7 @@ export const ChatLogPresenter = ({ isStandaloneChat = false }: Props) => {
   const showPin =
     selectedChat.pinnedMessageId !== null && !selectedChat.hidePinned;
 
-  const containerWidth = dimensions.width - 24;
+  const containerWidth = isStandaloneChat ? 434 : dimensions.width - 24;
 
   const onMessageSend = async (fragments: any[]) => {
     if (!selectedChat) return;
@@ -173,7 +172,7 @@ export const ChatLogPresenter = ({ isStandaloneChat = false }: Props) => {
       storage={storage}
       isMuted={selectedChat.muted}
       showPin={showPin}
-      pinnedChatMessage={selectedChat.pinnedChatMessage as ChatMessageType}
+      pinnedChatMessage={selectedChat.pinnedChatMessage}
       ourColor={ourColor}
       themeMode={theme.mode as 'light' | 'dark'}
       listRef={listRef}