chore: fix conflicts

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._index.tsx

@@ -10,6 +10,7 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import { logDocumentAccess } from '@documenso/lib/utils/logger';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Badge } from '@documenso/ui/primitives/badge';
@@ -83,6 +84,12 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(documentRootPath);
   }
 
+  logDocumentAccess({
+    request,
+    documentId,
+    userId: user.id,
+  });
+
   return superLoaderJson({
     document,
     documentRootPath,

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.edit.tsx

@@ -9,6 +9,7 @@ import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
+import { logDocumentAccess } from '@documenso/lib/utils/logger';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
 import { DocumentEditForm } from '~/components/general/document/document-edit-form';
@@ -78,6 +79,12 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     throw redirect(`${documentRootPath}/${documentId}`);
   }
 
+  logDocumentAccess({
+    request,
+    documentId,
+    userId: user.id,
+  });
+
   return superLoaderJson({
     document: {
       ...document,

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.logs.tsx

@@ -11,6 +11,7 @@ import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { logDocumentAccess } from '@documenso/lib/utils/logger';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { Card } from '@documenso/ui/primitives/card';
 
@@ -59,6 +60,12 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     teamId: team?.id,
   });
 
+  logDocumentAccess({
+    request,
+    documentId,
+    userId: user.id,
+  });
+
   return {
     document,
     documentRootPath,
@@ -170,7 +177,7 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
             <ul className="text-muted-foreground list-inside list-disc">
               {recipients.map((recipient) => (
                 <li key={`recipient-${recipient.id}`}>
-                  <span className="-ml-2">{formatRecipientText(recipient)}</span>
+                  <span>{formatRecipientText(recipient)}</span>
                 </li>
               ))}
             </ul>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings._layout.tsx

@@ -1,15 +1,23 @@
 import { msg } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { Link, Outlet, redirect } from 'react-router';
+import { Trans, useLingui } from '@lingui/react/macro';
+import {
+  BracesIcon,
+  Globe2Icon,
+  GroupIcon,
+  Settings2Icon,
+  SettingsIcon,
+  Users2Icon,
+  WebhookIcon,
+} from 'lucide-react';
+import { Link, NavLink, Outlet, redirect } from 'react-router';
 
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
-import { TeamSettingsNavDesktop } from '~/components/general/teams/team-settings-nav-desktop';
-import { TeamSettingsNavMobile } from '~/components/general/teams/team-settings-nav-mobile';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
 
@@ -37,8 +45,64 @@ export async function clientLoader() {
 }
 
 export default function TeamsSettingsLayout() {
+  const { t } = useLingui();
+
   const team = useCurrentTeam();
 
+  const teamSettingRoutes = [
+    {
+      path: `/t/${team.url}/settings`,
+      label: t`General`,
+      icon: SettingsIcon,
+    },
+    {
+      path: `/t/${team.url}/settings/document`,
+      label: t`Preferences`,
+      icon: Settings2Icon,
+      isSubNavParent: true,
+    },
+    {
+      path: `/t/${team.url}/settings/document`,
+      label: t`Document`,
+      isSubNav: true,
+    },
+    {
+      path: `/t/${team.url}/settings/branding`,
+      label: t`Branding`,
+      isSubNav: true,
+    },
+    {
+      path: `/t/${team.url}/settings/email`,
+      label: t`Email`,
+      isSubNav: true,
+    },
+    {
+      path: `/t/${team.url}/settings/public-profile`,
+      label: t`Public Profile`,
+      icon: Globe2Icon,
+    },
+    {
+      path: `/t/${team.url}/settings/members`,
+      label: t`Members`,
+      icon: Users2Icon,
+    },
+    {
+      path: `/t/${team.url}/settings/groups`,
+      label: t`Groups`,
+      icon: GroupIcon,
+    },
+    {
+      path: `/t/${team.url}/settings/tokens`,
+      label: t`API Tokens`,
+      icon: BracesIcon,
+    },
+    {
+      path: `/t/${team.url}/settings/webhooks`,
+      label: t`Webhooks`,
+      icon: WebhookIcon,
+    },
+  ];
+
   if (!canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole)) {
     return (
       <GenericErrorLayout
@@ -69,8 +133,29 @@ export default function TeamsSettingsLayout() {
       </h1>
 
       <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
-        <TeamSettingsNavDesktop className="hidden md:col-span-3 md:flex" />
-        <TeamSettingsNavMobile className="col-span-12 mb-8 md:hidden" />
+        <div
+          className={cn(
+            'col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2',
+          )}
+        >
+          {teamSettingRoutes.map((route) => (
+            <NavLink
+              to={route.path}
+              className={cn('group w-full justify-start', route.isSubNav && 'pl-8')}
+              key={route.path}
+            >
+              <Button
+                variant="ghost"
+                className={cn('w-full justify-start', {
+                  'group-aria-[current]:bg-secondary': !route.isSubNavParent,
+                })}
+              >
+                {route.icon && <route.icon className="mr-2 h-5 w-5" />}
+                <Trans>{route.label}</Trans>
+              </Button>
+            </NavLink>
+          ))}
+        </div>
 
         <div className="col-span-12 md:col-span-9">
           <Outlet />

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.branding.tsx

@@ -0,0 +1,94 @@
+import { useLingui } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+
+import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { trpc } from '@documenso/trpc/react';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import {
+  BrandingPreferencesForm,
+  type TBrandingPreferencesFormSchema,
+} from '~/components/forms/branding-preferences-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { useCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Branding Preferences');
+}
+
+export default function TeamsSettingsPage() {
+  const team = useCurrentTeam();
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { data: teamWithSettings, isLoading: isLoadingTeam } = trpc.team.get.useQuery({
+    teamReference: team.id,
+  });
+
+  const { mutateAsync: updateTeamSettings } = trpc.team.settings.update.useMutation();
+
+  const onBrandingPreferencesFormSubmit = async (data: TBrandingPreferencesFormSchema) => {
+    try {
+      const { brandingEnabled, brandingLogo, brandingUrl, brandingCompanyDetails } = data;
+
+      let uploadedBrandingLogo = teamWithSettings?.teamSettings?.brandingLogo;
+
+      if (brandingLogo) {
+        uploadedBrandingLogo = JSON.stringify(await putFile(brandingLogo));
+      }
+
+      if (brandingLogo === null) {
+        uploadedBrandingLogo = '';
+      }
+
+      await updateTeamSettings({
+        teamId: team.id,
+        data: {
+          brandingEnabled,
+          brandingLogo: uploadedBrandingLogo || null,
+          brandingUrl: brandingUrl || null,
+          brandingCompanyDetails: brandingCompanyDetails || null,
+        },
+      });
+
+      toast({
+        title: t`Branding preferences updated`,
+        description: t`Your branding preferences have been updated`,
+      });
+    } catch (err) {
+      toast({
+        title: t`Something went wrong`,
+        description: t`We were unable to update your branding preferences at this time, please try again later`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (isLoadingTeam || !teamWithSettings) {
+    return (
+      <div className="flex items-center justify-center rounded-lg py-32">
+        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl">
+      <SettingsHeader
+        title={t`Branding Preferences`}
+        subtitle={t`Here you can set preferences and defaults for branding.`}
+      />
+
+      <section>
+        <BrandingPreferencesForm
+          canInherit={true}
+          context="Team"
+          settings={teamWithSettings.teamSettings}
+          onFormSubmit={onBrandingPreferencesFormSubmit}
+        />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.document.tsx

@@ -2,14 +2,9 @@ import { useLingui } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
 
 import { DocumentSignatureType } from '@documenso/lib/constants/document';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import {
-  BrandingPreferencesForm,
-  type TBrandingPreferencesFormSchema,
-} from '~/components/forms/branding-preferences-form';
 import {
   DocumentPreferencesForm,
   type TDocumentPreferencesFormSchema,
@@ -19,7 +14,7 @@ import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
 
 export function meta() {
-  return appMetaTags('Preferences');
+  return appMetaTags('Document Preferences');
 }
 
 export default function TeamsSettingsPage() {
@@ -39,8 +34,11 @@ export default function TeamsSettingsPage() {
       const {
         documentVisibility,
         documentLanguage,
+        documentTimezone,
+        documentDateFormat,
         includeSenderDetails,
         includeSigningCertificate,
+        includeAuditLog,
         signatureTypes,
       } = data;
 
@@ -49,8 +47,11 @@ export default function TeamsSettingsPage() {
         data: {
           documentVisibility,
           documentLanguage,
+          documentTimezone,
+          documentDateFormat,
           includeSenderDetails,
           includeSigningCertificate,
+          includeAuditLog,
           ...(signatureTypes.length === 0
             ? {
                 typedSignatureEnabled: null,
@@ -78,43 +79,6 @@ export default function TeamsSettingsPage() {
     }
   };
 
-  const onBrandingPreferencesFormSubmit = async (data: TBrandingPreferencesFormSchema) => {
-    try {
-      const { brandingEnabled, brandingLogo, brandingUrl, brandingCompanyDetails } = data;
-
-      let uploadedBrandingLogo = teamWithSettings?.teamSettings?.brandingLogo;
-
-      if (brandingLogo) {
-        uploadedBrandingLogo = JSON.stringify(await putFile(brandingLogo));
-      }
-
-      if (brandingLogo === null) {
-        uploadedBrandingLogo = '';
-      }
-
-      await updateTeamSettings({
-        teamId: team.id,
-        data: {
-          brandingEnabled,
-          brandingLogo: uploadedBrandingLogo || null,
-          brandingUrl: brandingUrl || null,
-          brandingCompanyDetails: brandingCompanyDetails || null,
-        },
-      });
-
-      toast({
-        title: t`Branding preferences updated`,
-        description: t`Your branding preferences have been updated`,
-      });
-    } catch (err) {
-      toast({
-        title: t`Something went wrong`,
-        description: t`We were unable to update your branding preferences at this time, please try again later`,
-        variant: 'destructive',
-      });
-    }
-  };
-
   if (isLoadingTeam || !teamWithSettings) {
     return (
       <div className="flex items-center justify-center rounded-lg py-32">
@@ -126,7 +90,7 @@ export default function TeamsSettingsPage() {
   return (
     <div className="max-w-2xl">
       <SettingsHeader
-        title={t`Team Preferences`}
+        title={t`Document Preferences`}
         subtitle={t`Here you can set preferences and defaults for your team.`}
       />
 
@@ -137,21 +101,6 @@ export default function TeamsSettingsPage() {
           onFormSubmit={onDocumentPreferencesSubmit}
         />
       </section>
-
-      <SettingsHeader
-        title={t`Branding Preferences`}
-        subtitle={t`Here you can set preferences and defaults for branding.`}
-        className="mt-8"
-      />
-
-      <section>
-        <BrandingPreferencesForm
-          canInherit={true}
-          context="Team"
-          settings={teamWithSettings.teamSettings}
-          onFormSubmit={onBrandingPreferencesFormSubmit}
-        />
-      </section>
     </div>
   );
 }

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.email.tsx

@@ -0,0 +1,78 @@
+import { useLingui } from '@lingui/react/macro';
+
+import { trpc } from '@documenso/trpc/react';
+import { SpinnerBox } from '@documenso/ui/primitives/spinner';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import {
+  EmailPreferencesForm,
+  type TEmailPreferencesFormSchema,
+} from '~/components/forms/email-preferences-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { useCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+export function meta() {
+  return appMetaTags('Settings');
+}
+
+export default function TeamEmailSettingsGeneral() {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const team = useCurrentTeam();
+
+  const { data: teamWithSettings, isLoading: isLoadingTeam } = trpc.team.get.useQuery({
+    teamReference: team.url,
+  });
+
+  const { mutateAsync: updateTeamSettings } = trpc.team.settings.update.useMutation();
+
+  const onEmailPreferencesSubmit = async (data: TEmailPreferencesFormSchema) => {
+    try {
+      const { emailId, emailReplyTo, emailDocumentSettings } = data;
+
+      await updateTeamSettings({
+        teamId: team.id,
+        data: {
+          emailId,
+          emailReplyTo,
+          // emailReplyToName,
+          emailDocumentSettings,
+        },
+      });
+
+      toast({
+        title: t`Email preferences updated`,
+        description: t`Your email preferences have been updated`,
+      });
+    } catch (err) {
+      toast({
+        title: t`Something went wrong!`,
+        description: t`We were unable to update your email preferences at this time, please try again later`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  if (isLoadingTeam || !teamWithSettings) {
+    return <SpinnerBox />;
+  }
+
+  return (
+    <div className="max-w-2xl">
+      <SettingsHeader
+        title={t`Email Preferences`}
+        subtitle={t`You can manage your email preferences here`}
+      />
+
+      <section>
+        <EmailPreferencesForm
+          canInherit={true}
+          settings={teamWithSettings.teamSettings}
+          onFormSubmit={onEmailPreferencesSubmit}
+        />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates._index.tsx

@@ -1,23 +1,15 @@
-import { useEffect, useState } from 'react';
-
 import { Trans } from '@lingui/react/macro';
 import { FolderType } from '@prisma/client';
-import { Bird, FolderIcon, HomeIcon, Loader2 } from 'lucide-react';
-import { useNavigate, useParams, useSearchParams } from 'react-router';
+import { Bird } from 'lucide-react';
+import { useParams, useSearchParams } from 'react-router';
 
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
-import type { TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
 
-import { FolderCreateDialog } from '~/components/dialogs/folder-create-dialog';
-import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
-import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
-import { FolderUpdateDialog } from '~/components/dialogs/folder-update-dialog';
-import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
-import { FolderCard } from '~/components/general/folder/folder-card';
+import { FolderGrid } from '~/components/general/folder/folder-grid';
+import { TemplateDropZoneWrapper } from '~/components/general/template/template-drop-zone-wrapper';
 import { TemplatesTable } from '~/components/tables/templates-table';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -29,246 +21,70 @@ export function meta() {
 export default function TemplatesPage() {
   const [searchParams] = useSearchParams();
   const { folderId } = useParams();
-  const navigate = useNavigate();
-
-  const [isMovingFolder, setIsMovingFolder] = useState(false);
-  const [folderToMove, setFolderToMove] = useState<TFolderWithSubfolders | null>(null);
-  const [isDeletingFolder, setIsDeletingFolder] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<TFolderWithSubfolders | null>(null);
-  const [isSettingsFolderOpen, setIsSettingsFolderOpen] = useState(false);
-  const [folderToSettings, setFolderToSettings] = useState<TFolderWithSubfolders | null>(null);
 
   const team = useCurrentTeam();
 
-  const { mutateAsync: pinFolder } = trpc.folder.pinFolder.useMutation();
-  const { mutateAsync: unpinFolder } = trpc.folder.unpinFolder.useMutation();
-
   const page = Number(searchParams.get('page')) || 1;
   const perPage = Number(searchParams.get('perPage')) || 10;
 
   const documentRootPath = formatDocumentsPath(team.url);
   const templateRootPath = formatTemplatesPath(team.url);
 
-  const { data, isLoading, isLoadingError, refetch } = trpc.template.findTemplates.useQuery({
+  const { data, isLoading, isLoadingError } = trpc.template.findTemplates.useQuery({
     page: page,
     perPage: perPage,
     folderId,
   });
 
-  const {
-    data: foldersData,
-    isLoading: isFoldersLoading,
-    refetch: refetchFolders,
-  } = trpc.folder.getFolders.useQuery({
-    parentId: folderId,
-    type: FolderType.TEMPLATE,
-  });
-
-  useEffect(() => {
-    void refetch();
-    void refetchFolders();
-  }, [refetch, refetchFolders]);
-
-  const navigateToFolder = (folderId?: string | null) => {
-    const templatesPath = formatTemplatesPath(team.url);
-
-    if (folderId) {
-      void navigate(`${templatesPath}/f/${folderId}`);
-    } else {
-      void navigate(templatesPath);
-    }
-  };
-
-  const handleMove = (folder: TFolderWithSubfolders) => {
-    setFolderToMove(folder);
-    setIsMovingFolder(true);
-  };
-
-  const handlePin = (folderId: string) => {
-    void pinFolder({ folderId });
-  };
-
-  const handleUnpin = (folderId: string) => {
-    void unpinFolder({ folderId });
-  };
-
-  const handleSettings = (folder: TFolderWithSubfolders) => {
-    setFolderToSettings(folder);
-    setIsSettingsFolderOpen(true);
-  };
-
-  const handleDelete = (folder: TFolderWithSubfolders) => {
-    setFolderToDelete(folder);
-    setIsDeletingFolder(true);
-  };
-
   return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div className="flex flex-1 items-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="flex items-center space-x-2 pl-0 hover:bg-transparent"
-            onClick={() => navigateToFolder()}
-          >
-            <HomeIcon className="h-4 w-4" />
-            <span>Home</span>
-          </Button>
-
-          {foldersData?.breadcrumbs.map((folder) => (
-            <div key={folder.id} className="flex items-center space-x-2">
-              <span>/</span>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="flex items-center space-x-2 pl-1 hover:bg-transparent"
-                onClick={() => navigateToFolder(folder.id)}
-              >
-                <FolderIcon className="h-4 w-4" />
-                <span>{folder.name}</span>
-              </Button>
-            </div>
-          ))}
-        </div>
-
-        <div className="flex gap-4 sm:flex-row sm:justify-end">
-          <FolderCreateDialog type={FolderType.TEMPLATE} />
-          <TemplateCreateDialog folderId={folderId} />
-        </div>
-      </div>
-
-      {isFoldersLoading ? (
-        <div className="mt-6 flex justify-center">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-        </div>
-      ) : (
-        <>
-          {foldersData?.folders && foldersData.folders.some((folder) => folder.pinned) && (
-            <div className="mt-6">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                {foldersData.folders
-                  .filter((folder) => folder.pinned)
-                  .map((folder) => (
-                    <FolderCard
-                      key={folder.id}
-                      folder={folder}
-                      onMove={handleMove}
-                      onPin={handlePin}
-                      onUnpin={handleUnpin}
-                      onSettings={handleSettings}
-                      onDelete={handleDelete}
-                    />
-                  ))}
-              </div>
-            </div>
-          )}
-
-          <div className="mt-6">
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-              {foldersData?.folders
-                .filter((folder) => !folder.pinned)
-                .map((folder) => (
-                  <FolderCard
-                    key={folder.id}
-                    folder={folder}
-                    onMove={handleMove}
-                    onPin={handlePin}
-                    onUnpin={handleUnpin}
-                    onSettings={handleSettings}
-                    onDelete={handleDelete}
-                  />
-                ))}
-            </div>
-          </div>
-        </>
-      )}
-
-      <div className="relative mt-12">
-        <div className="flex flex-row items-center">
-          <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
-            {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-            <AvatarFallback className="text-muted-foreground text-xs">
-              {team.name.slice(0, 1)}
-            </AvatarFallback>
-          </Avatar>
-
-          <h1 className="truncate text-2xl font-semibold md:text-3xl">
-            <Trans>Templates</Trans>
-          </h1>
-        </div>
+    <TemplateDropZoneWrapper>
+      <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+        <FolderGrid type={FolderType.TEMPLATE} parentId={folderId ?? null} />
 
         <div className="mt-8">
-          {data && data.count === 0 ? (
-            <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
-              <Bird className="h-12 w-12" strokeWidth={1.5} />
+          <div className="flex flex-row items-center">
+            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
+              <AvatarFallback className="text-muted-foreground text-xs">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
 
-              <div className="text-center">
-                <h3 className="text-lg font-semibold">
-                  <Trans>We're all empty</Trans>
-                </h3>
+            <h1 className="truncate text-2xl font-semibold md:text-3xl">
+              <Trans>Templates</Trans>
+            </h1>
+          </div>
 
-                <p className="mt-2 max-w-[50ch]">
-                  <Trans>
-                    You have not yet created any templates. To create a template please upload one.
-                  </Trans>
-                </p>
+          <div className="mt-8">
+            {data && data.count === 0 ? (
+              <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
+                <Bird className="h-12 w-12" strokeWidth={1.5} />
+
+                <div className="text-center">
+                  <h3 className="text-lg font-semibold">
+                    <Trans>We're all empty</Trans>
+                  </h3>
+
+                  <p className="mt-2 max-w-[50ch]">
+                    <Trans>
+                      You have not yet created any templates. To create a template please upload
+                      one.
+                    </Trans>
+                  </p>
+                </div>
               </div>
-            </div>
-          ) : (
-            <TemplatesTable
-              data={data}
-              isLoading={isLoading}
-              isLoadingError={isLoadingError}
-              documentRootPath={documentRootPath}
-              templateRootPath={templateRootPath}
-            />
-          )}
+            ) : (
+              <TemplatesTable
+                data={data}
+                isLoading={isLoading}
+                isLoadingError={isLoadingError}
+                documentRootPath={documentRootPath}
+                templateRootPath={templateRootPath}
+              />
+            )}
+          </div>
         </div>
       </div>
-
-      {folderToMove && (
-        <FolderMoveDialog
-          foldersData={foldersData?.folders}
-          folder={folderToMove}
-          isOpen={isMovingFolder}
-          onOpenChange={(open) => {
-            setIsMovingFolder(open);
-
-            if (!open) {
-              setFolderToMove(null);
-            }
-          }}
-        />
-      )}
-
-      {folderToSettings && (
-        <FolderUpdateDialog
-          folder={folderToSettings}
-          isOpen={isSettingsFolderOpen}
-          onOpenChange={(open) => {
-            setIsSettingsFolderOpen(open);
-
-            if (!open) {
-              setFolderToSettings(null);
-            }
-          }}
-        />
-      )}
-
-      {folderToDelete && (
-        <FolderDeleteDialog
-          folder={folderToDelete}
-          isOpen={isDeletingFolder}
-          onOpenChange={(open) => {
-            setIsDeletingFolder(open);
-
-            if (!open) {
-              setFolderToDelete(null);
-            }
-          }}
-        />
-      )}
-    </div>
+    </TemplateDropZoneWrapper>
   );
 }