Merge branch 'main' of https://github.com/ashrafchowdury/documenso into update-documents-avatar

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

@@ -11,6 +11,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import {
   DOCUMENTS_PAGE_SHORTCUT,
   SETTINGS_PAGE_SHORTCUT,
+  TEMPLATES_PAGE_SHORTCUT,
 } from '@documenso/lib/constants/keyboard-shortcuts';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
@@ -22,6 +23,7 @@ import {
   CommandList,
   CommandShortcut,
 } from '@documenso/ui/primitives/command';
+import { THEMES_TYPE } from '@documenso/ui/primitives/constants';
 
 const DOCUMENTS_PAGES = [
   {
@@ -38,6 +40,14 @@ const DOCUMENTS_PAGES = [
   { label: 'Inbox documents', path: '/documents?status=INBOX' },
 ];
 
+const TEMPLATES_PAGES = [
+  {
+    label: 'All templates',
+    path: '/templates',
+    shortcut: TEMPLATES_PAGE_SHORTCUT.replace('+', ''),
+  },
+];
+
 const SETTINGS_PAGES = [
   {
     label: 'Settings',
@@ -85,7 +95,8 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
 
   const currentPage = pages[pages.length - 1];
 
-  const toggleOpen = () => {
+  const toggleOpen = (e: KeyboardEvent) => {
+    e.preventDefault();
     setIsOpen((isOpen) => !isOpen);
     onOpenChange?.(!isOpen);
 
@@ -123,10 +134,12 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
 
   const goToSettings = useCallback(() => push(SETTINGS_PAGES[0].path), [push]);
   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(SETTINGS_PAGE_SHORTCUT, goToSettings);
   useHotkeys(DOCUMENTS_PAGE_SHORTCUT, goToDocuments);
+  useHotkeys(TEMPLATES_PAGE_SHORTCUT, goToTemplates);
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     // Escape goes to previous page
@@ -173,6 +186,9 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
             <CommandGroup heading="Documents">
               <Commands push={push} pages={DOCUMENTS_PAGES} />
             </CommandGroup>
+            <CommandGroup heading="Templates">
+              <Commands push={push} pages={TEMPLATES_PAGES} />
+            </CommandGroup>
             <CommandGroup heading="Settings">
               <Commands push={push} pages={SETTINGS_PAGES} />
             </CommandGroup>
@@ -214,9 +230,9 @@ const Commands = ({
 const ThemeCommands = ({ setTheme }: { setTheme: (_theme: string) => void }) => {
   const THEMES = useMemo(
     () => [
-      { label: 'Light Mode', theme: 'light', icon: Sun },
-      { label: 'Dark Mode', theme: 'dark', icon: Moon },
-      { label: 'System Theme', theme: 'system', icon: Monitor },
+      { label: 'Light Mode', theme: THEMES_TYPE.LIGHT, icon: Sun },
+      { label: 'Dark Mode', theme: THEMES_TYPE.DARK, icon: Moon },
+      { label: 'System Theme', theme: THEMES_TYPE.SYSTEM, icon: Monitor },
     ],
     [],
   );

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

@@ -3,6 +3,9 @@
 import type { HTMLAttributes } from 'react';
 import { useEffect, useState } from 'react';
 
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
 import { Search } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
@@ -10,10 +13,22 @@ import { Button } from '@documenso/ui/primitives/button';
 
 import { CommandMenu } from '../common/command-menu';
 
+const navigationLinks = [
+  {
+    href: '/documents',
+    label: 'Documents',
+  },
+  {
+    href: '/templates',
+    label: 'Templates',
+  },
+];
+
 export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
 
 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
-  // const pathname = usePathname();
+  const pathname = usePathname();
+
   const [open, setOpen] = useState(false);
   const [modifierKey, setModifierKey] = useState(() => 'Ctrl');
 
@@ -26,9 +41,29 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
 
   return (
     <div
-      className={cn('ml-8 hidden flex-1 gap-x-6 md:flex md:justify-center', className)}
+      className={cn(
+        'ml-8 hidden flex-1 items-center gap-x-12 md:flex md:justify-between',
+        className,
+      )}
       {...props}
     >
+      <div className="flex items-baseline gap-x-6">
+        {navigationLinks.map(({ href, label }) => (
+          <Link
+            key={href}
+            href={href}
+            className={cn(
+              'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+              {
+                'text-foreground dark:text-muted-foreground': pathname?.startsWith(href),
+              },
+            )}
+          >
+            {label}
+          </Link>
+        ))}
+      </div>
+
       <CommandMenu open={open} onOpenChange={setOpen} />
 
       <Button
@@ -47,19 +82,6 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
           </div>
         </div>
       </Button>
-
-      {/* We have no other subpaths rn */}
-      {/* <Link
-        href="/documents"
-        className={cn(
-          'text-muted-foreground focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
-          {
-            'text-foreground': pathname?.startsWith('/documents'),
-          },
-        )}
-      >
-        Documents
-      </Link> */}
     </div>
   );
 };

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-[1000] 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-[50] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
         scrollY > 5 && 'border-b-border',
         className,
       )}
@@ -49,7 +49,7 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
 
         <DesktopNav />
 
-        <div className="flex gap-x-4">
+        <div className="flex gap-x-4 md:ml-8">
           <ProfileDropdown user={user} />
 
           {/* <Button variant="outline" size="sm" className="h-10 w-10 p-0.5 md:hidden">

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

@@ -4,6 +4,7 @@ import Link from 'next/link';
 
 import {
   CreditCard,
+  FileSpreadsheet,
   Lock,
   LogOut,
   User as LucideUser,
@@ -106,6 +107,13 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
           </DropdownMenuItem>
         )}
 
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/templates" className="cursor-pointer">
+            <FileSpreadsheet className="mr-2 h-4 w-4" />
+            Templates
+          </Link>
+        </DropdownMenuItem>
         <DropdownMenuSeparator />
 
         <DropdownMenuSub>