chore: merged main

apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx

@@ -69,15 +69,7 @@ export const StackAvatarsWithTooltip = ({
               <div>
                 <h1 className="text-base font-medium">Waiting</h1>
                 {waitingRecipients.map((recipient: Recipient) => (
-                  <div key={recipient.id} className="my-1 flex items-center gap-2">
-                    <StackAvatar
-                      first={true}
-                      key={recipient.id}
-                      type={getRecipientType(recipient)}
-                      fallbackText={recipientAbbreviation(recipient)}
-                    />
-                    <span className="text-muted-foreground text-sm">{recipient.email}</span>
-                  </div>
+                  <AvatarWithRecipient key={recipient.id} recipient={recipient} />
                 ))}
               </div>
             )}

apps/web/src/components/(dashboard)/common/command-menu.tsx

@@ -4,7 +4,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import { Monitor, Moon, Sun } from 'lucide-react';
+import { Loader, Monitor, Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { useHotkeys } from 'react-hotkeys-hook';
 
@@ -12,6 +12,7 @@ import {
   DOCUMENTS_PAGE_SHORTCUT,
   SETTINGS_PAGE_SHORTCUT,
 } from '@documenso/lib/constants/keyboard-shortcuts';
+import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
   CommandDialog,
   CommandEmpty,
@@ -29,13 +30,20 @@ const DOCUMENTS_PAGES = [
     shortcut: DOCUMENTS_PAGE_SHORTCUT.replace('+', ''),
   },
   { label: 'Draft documents', path: '/documents?status=DRAFT' },
-  { label: 'Completed documents', path: '/documents?status=COMPLETED' },
+  {
+    label: 'Completed documents',
+    path: '/documents?status=COMPLETED',
+  },
   { label: 'Pending documents', path: '/documents?status=PENDING' },
   { label: 'Inbox documents', path: '/documents?status=INBOX' },
 ];
 
 const SETTINGS_PAGES = [
-  { label: 'Settings', path: '/settings', shortcut: SETTINGS_PAGE_SHORTCUT.replace('+', '') },
+  {
+    label: 'Settings',
+    path: '/settings',
+    shortcut: SETTINGS_PAGE_SHORTCUT.replace('+', ''),
+  },
   { label: 'Profile', path: '/settings/profile' },
   { label: 'Password', path: '/settings/password' },
 ];
@@ -53,6 +61,29 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   const [search, setSearch] = useState('');
   const [pages, setPages] = useState<string[]>([]);
 
+  const { data: searchDocumentsData, isLoading: isSearchingDocuments } =
+    trpcReact.document.searchDocuments.useQuery(
+      {
+        query: search,
+      },
+      {
+        keepPreviousData: true,
+      },
+    );
+
+  const searchResults = useMemo(() => {
+    if (!searchDocumentsData) {
+      return [];
+    }
+
+    return searchDocumentsData.map((document) => ({
+      label: document.title,
+      path: `/documents/${document.id}`,
+      value:
+        document.title + ' ' + document.Recipient.map((recipient) => recipient.email).join(' '),
+    }));
+  }, [searchDocumentsData]);
+
   const currentPage = pages[pages.length - 1];
 
   const toggleOpen = () => {
@@ -113,7 +144,13 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   };
 
   return (
-    <CommandDialog commandProps={{ onKeyDown: handleKeyDown }} open={open} onOpenChange={setOpen}>
+    <CommandDialog
+      commandProps={{
+        onKeyDown: handleKeyDown,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
       <CommandInput
         value={search}
         onValueChange={setSearch}
@@ -121,7 +158,17 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
       />
 
       <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
+        {isSearchingDocuments ? (
+          <CommandEmpty>
+            <div className="flex items-center justify-center">
+              <span className="animate-spin">
+                <Loader />
+              </span>
+            </div>
+          </CommandEmpty>
+        ) : (
+          <CommandEmpty>No results found.</CommandEmpty>
+        )}
         {!currentPage && (
           <>
             <CommandGroup heading="Documents">
@@ -133,6 +180,11 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
             <CommandGroup heading="Preferences">
               <CommandItem onSelect={() => addPage('theme')}>Change theme</CommandItem>
             </CommandGroup>
+            {searchResults.length > 0 && (
+              <CommandGroup heading="Your documents">
+                <Commands push={push} pages={searchResults} />
+              </CommandGroup>
+            )}
           </>
         )}
         {currentPage === 'theme' && <ThemeCommands setTheme={setTheme} />}
@@ -146,10 +198,14 @@ const Commands = ({
   pages,
 }: {
   push: (_path: string) => void;
-  pages: { label: string; path: string; shortcut?: string }[];
+  pages: { label: string; path: string; shortcut?: string; value?: string }[];
 }) => {
-  return pages.map((page) => (
-    <CommandItem key={page.path} onSelect={() => push(page.path)}>
+  return pages.map((page, idx) => (
+    <CommandItem
+      key={page.path + idx}
+      value={page.value ?? page.label}
+      onSelect={() => push(page.path)}
+    >
       {page.label}
       {page.shortcut && <CommandShortcut>{page.shortcut}</CommandShortcut>}
     </CommandItem>

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 
 import {
   CreditCard,
-  Key,
+  Lock,
   LogOut,
   User as LucideUser,
   Monitor,
@@ -20,7 +20,7 @@ import { LuGithub } from 'react-icons/lu';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import { recipientInitials } from '@documenso/lib/utils/recipient-formatter';
-import { User } from '@documenso/prisma/client';
+import type { User } from '@documenso/prisma/client';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -56,7 +56,11 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="relative h-10 w-10 rounded-full">
+        <Button
+          variant="ghost"
+          title="Profile Dropdown"
+          className="relative h-10 w-10 rounded-full"
+        >
           <Avatar className="h-10 w-10">
             <AvatarFallback>{avatarFallback}</AvatarFallback>
           </Avatar>
@@ -87,9 +91,9 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
         </DropdownMenuItem>
 
         <DropdownMenuItem asChild>
-          <Link href="/settings/password" className="cursor-pointer">
-            <Key className="mr-2 h-4 w-4" />
-            Password
+          <Link href="/settings/security" className="cursor-pointer">
+            <Lock className="mr-2 h-4 w-4" />
+            Security
           </Link>
         </DropdownMenuItem>
 

apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { Braces, CreditCard, Key, User } from 'lucide-react';
+import { Braces, CreditCard, Lock, User } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -35,16 +35,16 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
-      <Link href="/settings/password">
+      <Link href="/settings/security">
         <Button
           variant="ghost"
           className={cn(
             'w-full justify-start',
-            pathname?.startsWith('/settings/password') && 'bg-secondary',
+            pathname?.startsWith('/settings/security') && 'bg-secondary',
           )}
         >
-          <Key className="mr-2 h-5 w-5" />
-          Password
+          <Lock className="mr-2 h-5 w-5" />
+          Security
         </Button>
       </Link>
 

apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { Braces, CreditCard, Key, User } from 'lucide-react';
+import { Braces, CreditCard, Lock, User } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -38,16 +38,16 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
-      <Link href="/settings/password">
+      <Link href="/settings/security">
         <Button
           variant="ghost"
           className={cn(
             'w-full justify-start',
-            pathname?.startsWith('/settings/password') && 'bg-secondary',
+            pathname?.startsWith('/settings/security') && 'bg-secondary',
           )}
         >
-          <Key className="mr-2 h-5 w-5" />
-          Password
+          <Lock className="mr-2 h-5 w-5" />
+          Security
         </Button>
       </Link>