Merge pull request #324 from CloudHub-Social/sync/upstream-dev-into-integration

sync: pull upstream dev (de71434)

Author: Just-Insane

.changeset/feat_add_allow_arbitrary_animal.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Change animal identity to allow arbitrary animals

.changeset/feat_add_search_keybind_and_combine_sidebar.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add search message keybind and combine sidebar items.

.changeset/feat_add_sticker_shortcut.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add CTRL+E shortcut to editor to bring sticker menu up

src/app/components/GlobalKeyboardShortcuts.tsx

@@ -18,14 +18,18 @@ import { roomToUnreadAtom } from '$state/room/roomToUnread';
 import { useKeyDown } from '$hooks/useKeyDown';
 import { getDirectRoomPath, getHomeRoomPath, getSpaceRoomPath } from '$pages/pathUtils';
 import { HOME_ROOM_PATH, DIRECT_ROOM_PATH, SPACE_ROOM_PATH } from '$pages/paths';
-import { getCanonicalAliasOrRoomId } from '$utils/matrix';
+import { getCanonicalAliasOrRoomId, getCanonicalAliasRoomId } from '$utils/matrix';
 import { announce } from '$utils/announce';
 import {
   roomIdToReplyDraftAtomFamily,
   roomIdToEditNavRequestAtomFamily,
   type IEditNavRequest,
 } from '$state/room/roomInputDrafts';
 import type { Room } from '$types/matrix-sdk';
+import {
+  getMessageSearchShortcutPath,
+  getSelectedSpaceIdOrAliasFromPath,
+} from '$features/search/searchShortcut';
 
 // Stable fallback atom used when no room is active — prevents atomFamily from
 // creating a spurious entry under the empty-string key ''.
@@ -41,19 +45,26 @@ export function GlobalKeyboardShortcuts() {
   const unreadIndexRef = useRef(0);
 
   // Derive the current room ID from the URL so we know which room is active.
-  const roomMatch =
-    matchPath(HOME_ROOM_PATH, location.pathname) ??
-    matchPath(DIRECT_ROOM_PATH, location.pathname) ??
-    matchPath(SPACE_ROOM_PATH, location.pathname);
+  const homeRoomMatch = matchPath(HOME_ROOM_PATH, location.pathname);
+  const directRoomMatch = matchPath(DIRECT_ROOM_PATH, location.pathname);
+  const spaceRoomMatch = matchPath(SPACE_ROOM_PATH, location.pathname);
+  const roomMatch = homeRoomMatch ?? directRoomMatch ?? spaceRoomMatch;
   const roomIdOrAlias = roomMatch?.params.roomIdOrAlias
     ? decodeURIComponent(roomMatch.params.roomIdOrAlias)
     : undefined;
+  const selectedSpaceIdOrAlias = getSelectedSpaceIdOrAliasFromPath(location.pathname);
+  const selectedSpaceId =
+    selectedSpaceIdOrAlias && !selectedSpaceIdOrAlias.startsWith('!')
+      ? mx.getRooms().find((r) => r.getCanonicalAlias() === selectedSpaceIdOrAlias)?.roomId
+      : selectedSpaceIdOrAlias;
   let currentRoom: Room | null = null;
+
   if (roomIdOrAlias) {
     if (roomIdOrAlias.startsWith('!')) {
       currentRoom = mx.getRoom(roomIdOrAlias);
     } else {
-      currentRoom = mx.getRooms().find((r) => r.getCanonicalAlias() === roomIdOrAlias) ?? null;
+      const aliasedRoomId = getCanonicalAliasRoomId(mx, roomIdOrAlias);
+      currentRoom = aliasedRoomId ? mx.getRoom(aliasedRoomId) : null;
     }
   }
   const replyDraftAtomFamily = roomIdToReplyDraftAtomFamily(currentRoom?.roomId ?? '');
@@ -178,10 +189,37 @@ export function GlobalKeyboardShortcuts() {
     [currentRoom, setEditNavRequest]
   );
 
+  /** Ctrl+F: Search for messages */
+  const handleSearchMessageInRoom = useCallback(
+    (evt: KeyboardEvent) => {
+      if (!isKeyHotkey('mod+f', evt)) return;
+
+      const path = getMessageSearchShortcutPath({
+        pathname: location.pathname,
+        currentSearch: location.search,
+        selectedSpaceId: selectedSpaceId ?? undefined,
+        currentRoomId: currentRoom?.roomId,
+      });
+      if (!path) return;
+
+      const portalContainer = document.getElementById('portalContainer');
+      if (portalContainer && portalContainer.children.length > 0) {
+        return;
+      }
+
+      evt.preventDefault();
+      const roomName = mx.getRoom(currentRoom?.roomId)?.name;
+      navigate(path);
+      announce(`Start Searching messages ${roomName ? `in ${roomName}` : ''}`);
+    },
+    [mx, currentRoom, navigate, location.pathname, location.search, selectedSpaceId]
+  );
+
   useKeyDown(window, handleNextUnreadKeyDown);
   useKeyDown(window, handleUnreadNavKeyDown);
   useKeyDown(window, handleReplyKeyDown);
   useKeyDown(window, handleEditKeyDown);
+  useKeyDown(window, handleSearchMessageInRoom);
 
   return null;
 }

src/app/components/icons/phosphor.tsx

@@ -5,6 +5,7 @@ import {
   ArrowBendUpRightIcon,
   ArrowDownIcon,
   ArrowLeftIcon,
+  ArrowsLeftRightIcon,
   ArrowRightIcon,
   ArrowSquareOutIcon,
   ArrowUpIcon,
@@ -315,6 +316,7 @@ export {
   ArrowBendUpRightIcon,
   ArrowDownIcon as ArrowDown,
   ArrowLeftIcon as ArrowLeft,
+  ArrowsLeftRightIcon as ArrowsLeftRight,
   ArrowRightIcon as ArrowRight,
   ArrowSquareOutIcon as ArrowSquareOut,
   ArrowUpIcon as ArrowUp,

src/app/components/sidebar/Sidebar.css.ts

@@ -27,6 +27,7 @@ export const SidebarStack = style([
     alignItems: 'center',
     gap: config.space.S300,
     padding: `${config.space.S300} 0`,
+    paddingBottom: config.space.S200,
   },
 ]);
 
@@ -116,6 +117,59 @@ export const SidebarItem = recipe({
     },
   },
 });
+
+const PUSH_Y = 0;
+export const SidebarItemBottom = recipe({
+  base: [
+    DefaultReset,
+    {
+      minHeight: toRem(30),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
+
+      selectors: {
+        '&:hover': {
+          transform: `translateY(${toRem(PUSH_Y)})`,
+        },
+        '&::before': {
+          content: '',
+          display: 'none',
+          position: 'absolute',
+          bottom: toRem(-11.5 - PUSH_Y),
+          height: toRem(3 + PUSH_Y),
+          width: toRem(16),
+          borderRadius: `${toRem(4)} ${toRem(4)} 0 0`,
+          background: 'CurrentColor',
+          transition: 'height 200ms linear',
+        },
+        '&:hover::before': {
+          display: 'block',
+          height: toRem(3),
+        },
+      },
+    },
+    Disabled,
+    DropTarget,
+  ],
+  variants: {
+    active: {
+      true: {
+        selectors: {
+          '&::before': {
+            display: 'block',
+            width: toRem(24),
+          },
+          '&:hover::before': {
+            height: toRem(3 + PUSH_Y),
+          },
+        },
+      },
+    },
+  },
+});
 export type SidebarItemVariants = RecipeVariants<typeof SidebarItem>;
 
 export const SidebarItemBadge = recipe({

src/app/components/sidebar/SidebarItem.tsx

@@ -1,9 +1,20 @@
 import classNames from 'classnames';
+import type { Position } from 'folds';
 import { as, Avatar, Text, Tooltip, TooltipProvider, toRem } from 'folds';
 import type { ComponentProps, ReactNode, RefCallback } from 'react';
 import * as css from './Sidebar.css';
 
-export const SidebarItem = as<'div', css.SidebarItemVariants>(
+export const SidebarItemBottom = as<'div', css.SidebarItemVariants>(
+  ({ as: AsSidebarAvatarBox = 'div', className, active, ...props }, ref) => (
+    <AsSidebarAvatarBox
+      className={classNames(css.SidebarItemBottom({ active }), className)}
+      {...props}
+      ref={ref}
+    />
+  )
+);
+
+export const SidebarItemLeft = as<'div', css.SidebarItemVariants>(
   ({ as: AsSidebarAvatarBox = 'div', className, active, ...props }, ref) => (
     <AsSidebarAvatarBox
       className={classNames(css.SidebarItem({ active }), className)}
@@ -13,6 +24,32 @@ export const SidebarItem = as<'div', css.SidebarItemVariants>(
   )
 );
 
+export const SidebarItem = ({
+  className,
+  active,
+  isBottom,
+  children,
+  ...props
+}: {
+  className?: string;
+  active?: boolean;
+  isBottom?: boolean;
+  children: ReactNode;
+}) => {
+  if (isBottom)
+    return (
+      <SidebarItemBottom className={className} active={active} {...props}>
+        {children}
+      </SidebarItemBottom>
+    );
+  else
+    return (
+      <SidebarItemLeft className={className} active={active} {...props}>
+        {children}
+      </SidebarItemLeft>
+    );
+};
+
 export const SidebarItemBadge = as<'div', css.SidebarItemBadgeVariants>(
   ({ as: AsSidebarBadgeBox = 'div', className, mode, ...props }, ref) => (
     <AsSidebarBadgeBox
@@ -26,9 +63,11 @@ export const SidebarItemBadge = as<'div', css.SidebarItemBadgeVariants>(
 export function SidebarItemTooltip({
   tooltip,
   children,
+  position,
 }: {
   tooltip?: ReactNode | string;
   children: (triggerRef: RefCallback<HTMLElement | SVGElement>) => ReactNode;
+  position?: Position;
 }) {
   if (!tooltip) {
     return children(() => undefined);
@@ -37,7 +76,7 @@ export function SidebarItemTooltip({
   return (
     <TooltipProvider
       delay={400}
-      position="Right"
+      position={position ?? 'Right'}
       tooltip={
         <Tooltip style={{ maxWidth: toRem(280) }}>
           <Text size="H5">{tooltip}</Text>

src/app/components/user-profile/UserRoomProfile.tsx

@@ -108,14 +108,17 @@ function UserExtendedSection({
   const [renderAnimals] = useSetting(settingsAtom, 'renderAnimals');
   const isCat = profile.isCat === true;
   const hasCats = profile.hasCats === true;
+  const isAnimal = profile.isAnimal ?? (isCat && 'cat');
+  const hasAnimal = profile.hasAnimal ?? (hasCats && 'cats');
+  const animalNeed = profile.animalNeed ?? 'headpats';
 
   const catStatusText = useMemo(() => {
     if (!renderAnimals) return null;
-    if (isCat && hasCats) return 'Cat with cats—needs pets & love!';
-    if (isCat) return 'Is a cat—give pets & love!';
-    if (hasCats) return 'Has cats—send love!';
+    if (isAnimal && hasAnimal) return `${isAnimal} with ${hasAnimal}, give ${animalNeed}!`;
+    if (isAnimal) return `Is ${isAnimal}, give ${animalNeed}!`;
+    if (hasAnimal) return `Has ${hasAnimal}, give ${animalNeed}!`;
     return null;
-  }, [renderAnimals, isCat, hasCats]);
+  }, [renderAnimals, isAnimal, hasAnimal, animalNeed]);
 
   const languageFilterEnabled = getSettings().filterPronounsBasedOnLanguage ?? false;
   const languagesToFilterFor = getSettings().filterPronounsLanguages ?? ['en'];

src/app/features/room/RoomInput.tsx

@@ -1698,6 +1698,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           }
           setReplyDraft(undefined);
         }
+
+        if (isKeyHotkey('mod+e', evt)) {
+          evt.preventDefault();
+          setEmojiBoardTab(EmojiBoardTab.Sticker);
+        }
       },
       [
         submit,
@@ -1712,6 +1717,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         editDraft,
         setEditDraft,
         structuredMarkdownAssist,
+        setEmojiBoardTab,
       ]
     );