Merge branch 'main' into update-documents-avatar

apps/web/src/components/(dashboard)/avatar/avatar-with-recipient.tsx

@@ -6,6 +6,7 @@ import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { StackAvatar } from './stack-avatar';
@@ -19,6 +20,10 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
   const { toast } = useToast();
 
   const onRecipientClick = () => {
+    if (!recipient.token) {
+      return;
+    }
+
     void copy(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${recipient.token}`).then(() => {
       toast({
         title: 'Copied to clipboard',
@@ -28,19 +33,22 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
   };
 
   return (
-    <div className="my-1 flex cursor-pointer items-center gap-2" onClick={onRecipientClick}>
+    <div
+      className={cn('my-1 flex items-center gap-2', {
+        'cursor-pointer hover:underline': recipient.token,
+      })}
+      role={recipient.token ? 'button' : undefined}
+      title={recipient.token && 'Click to copy signing link for sending to recipient'}
+      onClick={onRecipientClick}
+    >
       <StackAvatar
         first={true}
         key={recipient.id}
         type={getRecipientType(recipient)}
         fallbackText={recipientAbbreviation(recipient)}
       />
-      <span
-        className="text-muted-foreground text-sm hover:underline"
-        title="Click to copy signing link for sending to recipient"
-      >
-        {recipient.email}
-      </span>
+
+      <span className="text-muted-foreground text-sm">{recipient.email}</span>
     </div>
   );
 }

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

@@ -5,6 +5,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 
 import { Loader, Monitor, Moon, Sun } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 import { useTheme } from 'next-themes';
 import { useHotkeys } from 'react-hotkeys-hook';
 
@@ -13,6 +14,7 @@ import {
   SETTINGS_PAGE_SHORTCUT,
   TEMPLATES_PAGE_SHORTCUT,
 } from '@documenso/lib/constants/keyboard-shortcuts';
+import type { Document, Recipient } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
   CommandDialog,
@@ -65,6 +67,8 @@ export type CommandMenuProps = {
 
 export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   const { setTheme } = useTheme();
+  const { data: session } = useSession();
+
   const router = useRouter();
 
   const [isOpen, setIsOpen] = useState(() => open ?? false);
@@ -81,6 +85,17 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
       },
     );
 
+  const isOwner = useCallback(
+    (document: Document) => document.userId === session?.user.id,
+    [session?.user.id],
+  );
+
+  const getSigningLink = useCallback(
+    (recipients: Recipient[]) =>
+      `/sign/${recipients.find((r) => r.email === session?.user.email)?.token}`,
+    [session?.user.email],
+  );
+
   const searchResults = useMemo(() => {
     if (!searchDocumentsData) {
       return [];
@@ -88,15 +103,14 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
 
     return searchDocumentsData.map((document) => ({
       label: document.title,
-      path: `/documents/${document.id}`,
+      path: isOwner(document) ? `/documents/${document.id}` : getSigningLink(document.Recipient),
       value: [document.id, document.title, ...document.Recipient.map((r) => r.email)].join(' '),
     }));
-  }, [searchDocumentsData]);
+  }, [searchDocumentsData, isOwner, getSigningLink]);
 
   const currentPage = pages[pages.length - 1];
 
-  const toggleOpen = (e: KeyboardEvent) => {
-    e.preventDefault();
+  const toggleOpen = () => {
     setIsOpen((isOpen) => !isOpen);
     onOpenChange?.(!isOpen);
 
@@ -136,7 +150,7 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   const goToDocuments = useCallback(() => push(DOCUMENTS_PAGES[0].path), [push]);
   const goToTemplates = useCallback(() => push(TEMPLATES_PAGES[0].path), [push]);
 
-  useHotkeys(['ctrl+k', 'meta+k'], toggleOpen);
+  useHotkeys(['ctrl+k', 'meta+k'], toggleOpen, { preventDefault: true });
   useHotkeys(SETTINGS_PAGE_SHORTCUT, goToSettings);
   useHotkeys(DOCUMENTS_PAGE_SHORTCUT, goToDocuments);
   useHotkeys(TEMPLATES_PAGE_SHORTCUT, goToTemplates);
@@ -238,7 +252,11 @@ const ThemeCommands = ({ setTheme }: { setTheme: (_theme: string) => void }) =>
   );
 
   return THEMES.map((theme) => (
-    <CommandItem key={theme.theme} onSelect={() => setTheme(theme.theme)}>
+    <CommandItem
+      key={theme.theme}
+      onSelect={() => setTheme(theme.theme)}
+      className="mx-2 first:mt-2 last:mb-2"
+    >
       <theme.icon className="mr-2" />
       {theme.label}
     </CommandItem>

apps/web/src/components/(dashboard)/layout/header.tsx

@@ -33,7 +33,7 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
   return (
     <header
       className={cn(
-        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[50] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
         scrollY > 5 && 'border-b-border',
         className,
       )}

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

@@ -68,7 +68,7 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
         </Button>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="w-56" align="end" forceMount>
+      <DropdownMenuContent className="z-[60] w-56" align="end" forceMount>
         <DropdownMenuLabel>Account</DropdownMenuLabel>
 
         {isUserAdmin && (
@@ -122,7 +122,7 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
             Themes
           </DropdownMenuSubTrigger>
           <DropdownMenuPortal>
-            <DropdownMenuSubContent>
+            <DropdownMenuSubContent className="z-[60]">
               <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
                 <DropdownMenuRadioItem value="light">
                   <Sun className="mr-2 h-4 w-4" /> Light
@@ -141,7 +141,11 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
         </DropdownMenuSub>
         <DropdownMenuSeparator />
         <DropdownMenuItem asChild>
-          <Link href="https://github.com/documenso/documenso" className="cursor-pointer">
+          <Link
+            href="https://github.com/documenso/documenso"
+            className="cursor-pointer"
+            target="_blank"
+          >
             <LuGithub className="mr-2 h-4 w-4" />
             Star on Github
           </Link>

apps/web/src/components/(dashboard)/layout/verify-email-banner.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 
 import { AlertTriangle } from 'lucide-react';
 
-import { ONE_SECOND } from '@documenso/lib/constants/time';
+import { ONE_DAY, ONE_SECOND } from '@documenso/lib/constants/time';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -65,7 +65,7 @@ export const VerifyEmailBanner = ({ email }: VerifyEmailBannerProps) => {
     if (emailVerificationDialogLastShown) {
       const lastShownTimestamp = parseInt(emailVerificationDialogLastShown);
 
-      if (Date.now() - lastShownTimestamp < 24 * 60 * 60 * 1000) {
+      if (Date.now() - lastShownTimestamp < ONE_DAY) {
         return;
       }
     }