fix: wip

apps/remix/app/components/(dashboard)/period-selector/types.ts

@@ -1,6 +0,0 @@
-import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
-
-export const isPeriodSelectorValue = (value: unknown): value is PeriodSelectorValue => {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  return ['', '7d', '14d', '30d'].includes(value as string);
-};

apps/remix/app/components/(dashboard)/refresh-on-focus/refresh-on-focus.tsx

@@ -1,18 +0,0 @@
-export const RefreshOnFocus = () => {
-  // Todo: Would this still work?
-  // const { refresh } = useRouter();
-
-  // const onFocus = useCallback(() => {
-  //   refresh();
-  // }, [refresh]);
-
-  // useEffect(() => {
-  //   window.addEventListener('focus', onFocus);
-
-  //   return () => {
-  //     window.removeEventListener('focus', onFocus);
-  //   };
-  // }, [onFocus]);
-
-  return null;
-};

apps/remix/app/components/(dashboard)/settings/token/contants.ts

@@ -1,9 +0,0 @@
-import { msg } from '@lingui/macro';
-
-export const EXPIRATION_DATES = {
-  ONE_WEEK: msg`7 days`,
-  ONE_MONTH: msg`1 month`,
-  THREE_MONTHS: msg`3 months`,
-  SIX_MONTHS: msg`6 months`,
-  ONE_YEAR: msg`12 months`,
-} as const;

apps/remix/app/components/dialogs/admin-user-delete-dialog.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import type { User } from '@prisma/client';
+import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
@@ -29,7 +30,7 @@ export type AdminUserDeleteDialogProps = {
 export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-
+  const navigate = useNavigate();
   const [email, setEmail] = useState('');
 
   const { mutateAsync: deleteUser, isPending: isDeletingUser } =
@@ -41,14 +42,13 @@ export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialog
         id: user.id,
       });
 
+      await navigate('/admin/users');
+
       toast({
         title: _(msg`Account deleted`),
         description: _(msg`The account has been deleted successfully.`),
         duration: 5000,
       });
-
-      // todo
-      // router.push('/admin/users');
     } catch (err) {
       const error = AppError.parseError(err);
 

apps/remix/app/components/dialogs/document-delete-dialog.tsx

@@ -24,6 +24,7 @@ type DocumentDeleteDialogProps = {
   id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
+  onDelete?: () => Promise<void> | void;
   status: DocumentStatus;
   documentTitle: string;
   teamId?: number;
@@ -34,6 +35,7 @@ export const DocumentDeleteDialog = ({
   id,
   open,
   onOpenChange,
+  onDelete,
   status,
   documentTitle,
   canManageDocument,
@@ -48,9 +50,7 @@ export const DocumentDeleteDialog = ({
   const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
 
   const { mutateAsync: deleteDocument, isPending } = trpcReact.document.deleteDocument.useMutation({
-    onSuccess: () => {
+    onSuccess: async () => {
-      // todo
-      // router.refresh();
       void refreshLimits();
 
       toast({
@@ -59,8 +59,18 @@ export const DocumentDeleteDialog = ({
         duration: 5000,
       });
 
+      await onDelete?.();
+
       onOpenChange(false);
     },
+    onError: () => {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`This document could not be deleted at this time. Please try again.`),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
   });
 
   useEffect(() => {
@@ -70,19 +80,6 @@ export const DocumentDeleteDialog = ({
     }
   }, [open, status]);
 
-  const onDelete = async () => {
-    try {
-      await deleteDocument({ documentId: id });
-    } catch {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`This document could not be deleted at this time. Please try again.`),
-        variant: 'destructive',
-        duration: 7500,
-      });
-    }
-  };
-
   const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(event.target.value);
     setIsDeleteEnabled(event.target.value === _(deleteMessage));
@@ -191,7 +188,7 @@ export const DocumentDeleteDialog = ({
           <Button
             type="button"
             loading={isPending}
-            onClick={onDelete}
+            onClick={() => void deleteDocument({ documentId: id })}
             disabled={!isDeleteEnabled && canManageDocument}
             variant="destructive"
           >

apps/remix/app/components/dialogs/document-move-dialog.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
@@ -40,14 +40,12 @@ export const DocumentMoveDialog = ({ documentId, open, onOpenChange }: DocumentM
 
   const { mutateAsync: moveDocument, isPending } = trpc.document.moveDocumentToTeam.useMutation({
     onSuccess: () => {
-      // todo
-      // router.refresh();
-
       toast({
         title: _(msg`Document moved`),
         description: _(msg`The document has been successfully moved to the selected team.`),
         duration: 5000,
       });
+
       onOpenChange(false);
     },
     onError: (error) => {
@@ -95,9 +93,7 @@ export const DocumentMoveDialog = ({ documentId, open, onOpenChange }: DocumentM
                   <div className="flex items-center gap-4">
                     <Avatar className="h-8 w-8">
                       {team.avatarImageId && (
-                        <AvatarImage
+                        <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />
-                          src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`}
-                        />
                       )}
 
                       <AvatarFallback className="text-sm text-gray-400">

apps/remix/app/components/dialogs/document-resend-dialog.tsx

@@ -35,9 +35,10 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { StackAvatar } from '~/components/(dashboard)/avatar/stack-avatar';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
+import { StackAvatar } from '../general/stack-avatar';
+
 const FORM_ID = 'resend-email';
 
 export type DocumentResendDialogProps = {

apps/remix/app/components/dialogs/template-delete-dialog.tsx

@@ -17,15 +17,21 @@ type TemplateDeleteDialogProps = {
   id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
+  onDelete?: () => Promise<void> | void;
 };
 
-export const TemplateDeleteDialog = ({ id, open, onOpenChange }: TemplateDeleteDialogProps) => {
+export const TemplateDeleteDialog = ({
+  id,
+  open,
+  onOpenChange,
+  onDelete,
+}: TemplateDeleteDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
   const { mutateAsync: deleteTemplate, isPending } = trpcReact.template.deleteTemplate.useMutation({
-    onSuccess: () => {
+    onSuccess: async () => {
-      // router.refresh(); // Todo
+      await onDelete?.();
 
       toast({
         title: _(msg`Template deleted`),

apps/remix/app/components/dialogs/template-duplicate-dialog.tsx

@@ -30,8 +30,6 @@ export const TemplateDuplicateDialog = ({
   const { mutateAsync: duplicateTemplate, isPending } =
     trpcReact.template.duplicateTemplate.useMutation({
       onSuccess: () => {
-        // router.refresh(); // Todo
-
         toast({
           title: _(msg`Template duplicated`),
           description: _(msg`Your template has been duplicated successfully.`),

apps/remix/app/components/dialogs/template-move-dialog.tsx

@@ -4,8 +4,8 @@ import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { match } from 'ts-pattern';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
@@ -30,23 +30,42 @@ type TemplateMoveDialogProps = {
   templateId: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
+  onMove?: ({
+    templateId,
+    teamUrl,
+  }: {
+    templateId: number;
+    teamUrl: string;
+  }) => Promise<void> | void;
 };
 
-export const TemplateMoveDialog = ({ templateId, open, onOpenChange }: TemplateMoveDialogProps) => {
+export const TemplateMoveDialog = ({
+  templateId,
+  open,
+  onOpenChange,
+  onMove,
+}: TemplateMoveDialogProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
 
   const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
 
   const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
+
   const { mutateAsync: moveTemplate, isPending } = trpc.template.moveTemplateToTeam.useMutation({
-    onSuccess: () => {
+    onSuccess: async () => {
-      // router.refresh(); // Todo
+      const team = teams?.find((team) => team.id === selectedTeamId);
+
+      if (team) {
+        await onMove?.({ templateId, teamUrl: team.url });
+      }
+
       toast({
         title: _(msg`Template moved`),
         description: _(msg`The template has been successfully moved to the selected team.`),
         duration: 5000,
       });
+
       onOpenChange(false);
     },
     onError: (err) => {
@@ -69,7 +88,7 @@ export const TemplateMoveDialog = ({ templateId, open, onOpenChange }: TemplateM
     },
   });
 
-  const onMove = async () => {
+  const handleOnMove = async () => {
     if (!selectedTeamId) {
       return;
     }
@@ -104,9 +123,7 @@ export const TemplateMoveDialog = ({ templateId, open, onOpenChange }: TemplateM
                   <div className="flex items-center gap-4">
                     <Avatar className="h-8 w-8">
                       {team.avatarImageId && (
-                        <AvatarImage
+                        <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />
-                          src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`}
-                        />
                       )}
 
                       <AvatarFallback className="text-sm text-gray-400">
@@ -126,7 +143,11 @@ export const TemplateMoveDialog = ({ templateId, open, onOpenChange }: TemplateM
           <Button variant="secondary" onClick={() => onOpenChange(false)}>
             <Trans>Cancel</Trans>
           </Button>
-          <Button onClick={onMove} loading={isPending} disabled={!selectedTeamId || isPending}>
+          <Button
+            onClick={handleOnMove}
+            loading={isPending}
+            disabled={!selectedTeamId || isPending}
+          >
             {isPending ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
           </Button>
         </DialogFooter>

apps/remix/app/components/dialogs/token-delete-dialog.tsx

@@ -29,19 +29,19 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type DeleteTokenDialogProps = {
+export type TokenDeleteDialogProps = {
   teamId?: number;
   token: Pick<ApiToken, 'id' | 'name'>;
   onDelete?: () => void;
   children?: React.ReactNode;
 };
 
-export default function DeleteTokenDialog({
+export default function TokenDeleteDialog({
   teamId,
   token,
   onDelete,
   children,
-}: DeleteTokenDialogProps) {
+}: TokenDeleteDialogProps) {
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -49,13 +49,13 @@ export default function DeleteTokenDialog({
 
   const deleteMessage = _(msg`delete ${token.name}`);
 
-  const ZDeleteTokenDialogSchema = z.object({
+  const ZTokenDeleteDialogSchema = z.object({
     tokenName: z.literal(deleteMessage, {
       errorMap: () => ({ message: _(msg`You must enter '${deleteMessage}' to proceed`) }),
     }),
   });
 
-  type TDeleteTokenByIdMutationSchema = z.infer<typeof ZDeleteTokenDialogSchema>;
+  type TDeleteTokenByIdMutationSchema = z.infer<typeof ZTokenDeleteDialogSchema>;
 
   const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation({
     onSuccess() {
@@ -64,7 +64,7 @@ export default function DeleteTokenDialog({
   });
 
   const form = useForm<TDeleteTokenByIdMutationSchema>({
-    resolver: zodResolver(ZDeleteTokenDialogSchema),
+    resolver: zodResolver(ZTokenDeleteDialogSchema),
     values: {
       tokenName: '',
     },
@@ -84,8 +84,6 @@ export default function DeleteTokenDialog({
       });
 
       setIsOpen(false);
-
-      // router.refresh(); // Todo
     } catch (error) {
       toast({
         title: _(msg`An unknown error occurred`),

apps/remix/app/components/dialogs/webhook-create-dialog.tsx

@@ -88,8 +88,6 @@ export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogPr
       });
 
       form.reset();
-
-      // router.refresh(); // Todo
     } catch (err) {
       toast({
         title: _(msg`Error`),

apps/remix/app/components/dialogs/webhook-delete-dialog.tsx

@@ -1,5 +1,3 @@
-'use effect';
-
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -77,8 +75,6 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
       });
 
       setOpen(false);
-
-      // router.refresh(); // Todo
     } catch (error) {
       toast({
         title: _(msg`An unknown error occurred`),

apps/remix/app/components/forms/avatar-image.tsx

@@ -5,13 +5,14 @@ import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { ErrorCode, useDropzone } from 'react-dropzone';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { base64 } from '@documenso/lib/universal/base64';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -43,6 +44,7 @@ export const AvatarImageForm = ({ className }: AvatarImageFormProps) => {
   const { user } = useSession();
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const team = useOptionalCurrentTeam();
 
@@ -106,8 +108,7 @@ export const AvatarImageForm = ({ className }: AvatarImageFormProps) => {
         duration: 5000,
       });
 
-      // Todo
+      void revalidate();
-      // router.refresh();
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -144,11 +145,7 @@ export const AvatarImageForm = ({ className }: AvatarImageFormProps) => {
                   <div className="flex items-center gap-8">
                     <div className="relative">
                       <Avatar className="h-16 w-16 border-2 border-solid">
-                        {avatarImageId && (
+                        {avatarImageId && <AvatarImage src={formatAvatarUrl(avatarImageId)} />}
-                          <AvatarImage
-                            src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${avatarImageId}`}
-                          />
-                        )}
                         <AvatarFallback className="text-sm text-gray-400">
                           {initials}
                         </AvatarFallback>

apps/remix/app/components/forms/public-profile-claim-dialog.tsx

@@ -31,7 +31,7 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { UserProfileSkeleton } from '../ui/user-profile-skeleton';
+import { UserProfileSkeleton } from '../general/user-profile-skeleton';
 
 export const ZClaimPublicProfileFormSchema = z.object({
   url: z

apps/remix/app/components/forms/signup.tsx

@@ -32,8 +32,8 @@ import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { UserProfileSkeleton } from '~/components/ui/user-profile-skeleton';
+import { UserProfileSkeleton } from '~/components/general/user-profile-skeleton';
-import { UserProfileTimur } from '~/components/ui/user-profile-timur';
+import { UserProfileTimur } from '~/components/general/user-profile-timur';
 
 const SIGN_UP_REDIRECT_PATH = '/documents';
 
@@ -216,9 +216,8 @@ export const SignUpForm = ({
         <div className="absolute -inset-8 -z-[2] backdrop-blur">
           <img
             src={communityCardsImage}
-            // Todo fill={true}
             alt="community-cards"
-            className="dark:brightness-95 dark:contrast-[70%] dark:invert"
+            className="h-full w-full object-cover dark:brightness-95 dark:contrast-[70%] dark:invert"
           />
         </div>
 

apps/remix/app/components/forms/team-update-form.tsx

@@ -28,20 +28,20 @@ export type UpdateTeamDialogProps = {
   teamUrl: string;
 };
 
-const ZUpdateTeamFormSchema = ZUpdateTeamMutationSchema.shape.data.pick({
+const ZTeamUpdateFormSchema = ZUpdateTeamMutationSchema.shape.data.pick({
   name: true,
   url: true,
 });
 
-type TUpdateTeamFormSchema = z.infer<typeof ZUpdateTeamFormSchema>;
+type TTeamUpdateFormSchema = z.infer<typeof ZTeamUpdateFormSchema>;
 
-export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogProps) => {
+export const TeamUpdateForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogProps) => {
   const navigate = useNavigate();
   const { _ } = useLingui();
   const { toast } = useToast();
 
   const form = useForm({
-    resolver: zodResolver(ZUpdateTeamFormSchema),
+    resolver: zodResolver(ZTeamUpdateFormSchema),
     defaultValues: {
       name: teamName,
       url: teamUrl,
@@ -50,7 +50,7 @@ export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
 
   const { mutateAsync: updateTeam } = trpc.team.updateTeam.useMutation();
 
-  const onFormSubmit = async ({ name, url }: TUpdateTeamFormSchema) => {
+  const onFormSubmit = async ({ name, url }: TTeamUpdateFormSchema) => {
     try {
       await updateTeam({
         data: {

apps/remix/app/components/forms/token.tsx

@@ -37,7 +37,13 @@ import {
 import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { EXPIRATION_DATES } from '../(dashboard)/settings/token/contants';
+export const EXPIRATION_DATES = {
+  ONE_WEEK: msg`7 days`,
+  ONE_MONTH: msg`1 month`,
+  THREE_MONTHS: msg`3 months`,
+  SIX_MONTHS: msg`6 months`,
+  ONE_YEAR: msg`12 months`,
+} as const;
 
 const ZCreateTokenFormSchema = ZCreateTokenMutationSchema.extend({
   enabled: z.boolean(),
@@ -67,13 +73,6 @@ export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) =
   const [newlyCreatedToken, setNewlyCreatedToken] = useState<NewlyCreatedToken | null>();
   const [noExpirationDate, setNoExpirationDate] = useState(false);
 
-  // This lets us hide the token from being copied if it has been deleted without
-  // resorting to a useEffect or any other fanciness. This comes at the cost of it
-  // taking slighly longer to appear since it will need to wait for the router.refresh()
-  // to finish updating.
-  const hasNewlyCreatedToken =
-    tokens?.find((token) => token.id === newlyCreatedToken?.id) !== undefined;
-
   const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation({
     onSuccess(data) {
       setNewlyCreatedToken(data);
@@ -125,9 +124,6 @@ export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) =
       });
 
       form.reset();
-
-      // Todo
-      // startTransition(() => router.refresh());
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -259,34 +255,36 @@ export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) =
         </form>
       </Form>
 
-      <AnimatePresence initial={!hasNewlyCreatedToken}>
+      <AnimatePresence>
-        {newlyCreatedToken && hasNewlyCreatedToken && (
+        {newlyCreatedToken &&
-          <motion.div
+          tokens &&
-            className="mt-8"
+          tokens.find((token) => token.id === newlyCreatedToken.id) && (
-            initial={{ opacity: 0, y: -40 }}
+            <motion.div
-            animate={{ opacity: 1, y: 0 }}
+              className="mt-8"
-            exit={{ opacity: 0, y: 40 }}
+              initial={{ opacity: 0, y: -40 }}
-          >
+              animate={{ opacity: 1, y: 0 }}
-            <Card gradient>
+              exit={{ opacity: 0, y: 40 }}
-              <CardContent className="p-4">
+            >
-                <p className="text-muted-foreground mt-2 text-sm">
+              <Card gradient>
-                  <Trans>
+                <CardContent className="p-4">
-                    Your token was created successfully! Make sure to copy it because you won't be
+                  <p className="text-muted-foreground mt-2 text-sm">
-                    able to see it again!
+                    <Trans>
-                  </Trans>
+                      Your token was created successfully! Make sure to copy it because you won't be
-                </p>
+                      able to see it again!
+                    </Trans>
+                  </p>
 
-                <p className="bg-muted-foreground/10 my-4 rounded-md px-2.5 py-1 font-mono text-sm">
+                  <p className="bg-muted-foreground/10 my-4 rounded-md px-2.5 py-1 font-mono text-sm">
-                  {newlyCreatedToken.token}
+                    {newlyCreatedToken.token}
-                </p>
+                  </p>
 
-                <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken.token)}>
+                  <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken.token)}>
-                  <Trans>Copy token</Trans>
+                    <Trans>Copy token</Trans>
-                </Button>
+                  </Button>
-              </CardContent>
+                </CardContent>
-            </Card>
+              </Card>
-          </motion.div>
+            </motion.div>
-        )}
+          )}
       </AnimatePresence>
     </div>
   );

apps/remix/app/components/general/app-command-menu.tsx

@@ -65,12 +65,12 @@ const SETTINGS_PAGES = [
   { label: msg`Password`, path: '/settings/password' },
 ];
 
-export type CommandMenuProps = {
+export type AppCommandMenuProps = {
   open?: boolean;
   onOpenChange?: (_open: boolean) => void;
 };
 
-export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
+export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
   const { _ } = useLingui();
 
   const navigate = useNavigate();

apps/remix/app/components/general/app-header.tsx

@@ -10,10 +10,10 @@ import { cn } from '@documenso/ui/lib/utils';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
 
-import { CommandMenu } from '../common/command-menu';
+import { AppCommandMenu } from './app-command-menu';
-import { DesktopNav } from './desktop-nav';
+import { AppNavDesktop } from './app-nav-desktop';
+import { AppNavMobile } from './app-nav-mobile';
 import { MenuSwitcher } from './menu-switcher';
-import { MobileNavigation } from './mobile-navigation';
 
 export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
   user: User;
@@ -22,7 +22,7 @@ export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
 
 export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
   const params = useParams();
-  const { pathname } = useLocation(); // Todo: Test
+  const { pathname } = useLocation();
 
   const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
@@ -65,7 +65,7 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
           <BrandingLogo className="h-6 w-auto" />
         </Link>
 
-        <DesktopNav setIsCommandMenuOpen={setIsCommandMenuOpen} />
+        <AppNavDesktop setIsCommandMenuOpen={setIsCommandMenuOpen} />
 
         <div
           className="flex gap-x-4 md:ml-8"
@@ -83,9 +83,9 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
             <MenuIcon className="text-muted-foreground h-6 w-6" />
           </button>
 
-          <CommandMenu open={isCommandMenuOpen} onOpenChange={setIsCommandMenuOpen} />
+          <AppCommandMenu open={isCommandMenuOpen} onOpenChange={setIsCommandMenuOpen} />
 
-          <MobileNavigation
+          <AppNavMobile
             isMenuOpen={isHamburgerMenuOpen}
             onMenuOpenChange={setIsHamburgerMenuOpen}
           />

apps/remix/app/components/general/app-nav-desktop.tsx

@@ -21,11 +21,15 @@ const navigationLinks = [
   },
 ];
 
-export type DesktopNavProps = HTMLAttributes<HTMLDivElement> & {
+export type AppNavDesktopProps = HTMLAttributes<HTMLDivElement> & {
   setIsCommandMenuOpen: (value: boolean) => void;
 };
 
-export const DesktopNav = ({ className, setIsCommandMenuOpen, ...props }: DesktopNavProps) => {
+export const AppNavDesktop = ({
+  className,
+  setIsCommandMenuOpen,
+  ...props
+}: AppNavDesktopProps) => {
   const { _ } = useLingui();
 
   const { pathname } = useLocation();

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -8,12 +8,12 @@ import { getRootHref } from '@documenso/lib/utils/params';
 import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
-export type MobileNavigationProps = {
+export type AppNavMobileProps = {
   isMenuOpen: boolean;
   onMenuOpenChange?: (_value: boolean) => void;
 };
 
-export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
+export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps) => {
   const { _ } = useLingui();
 
   const params = useParams();

apps/remix/app/components/general/document-signing/document-signing-page-view.tsx

@@ -20,7 +20,6 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
-import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
 import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
 import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
@@ -34,6 +33,7 @@ import { DocumentSigningRadioField } from '~/components/general/document-signing
 import { DocumentSigningRejectDialog } from '~/components/general/document-signing/document-signing-reject-dialog';
 import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
 import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
+import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 
 export type SigningPageViewProps = {
   document: DocumentAndSender;

apps/remix/app/components/general/document/document-page-view-dropdown.tsx

@@ -15,6 +15,7 @@ import {
   Trash2,
 } from 'lucide-react';
 import { Link } from 'react-router';
+import { useNavigate } from 'react-router';
 
 import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
@@ -33,7 +34,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
-import { DocumentRecipientLinkCopyDialog } from '~/components/document/document-recipient-link-copy-dialog';
+import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type DocumentPageViewDropdownProps = {
@@ -49,6 +50,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
   const { toast } = useToast();
   const { _ } = useLingui();
 
+  const navigate = useNavigate();
   const team = useOptionalCurrentTeam();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -186,6 +188,9 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
         open={isDeleteDialogOpen}
         canManageDocument={canManageDocument}
         onOpenChange={setDeleteDialogOpen}
+        onDelete={() => {
+          void navigate(documentsPath);
+        }}
       />
 
       {isDuplicateDialogOpen && (

apps/remix/app/components/general/document/document-upload.tsx

@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
@@ -24,18 +25,19 @@ export type DocumentUploadDropzoneProps = {
 };
 
 export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { user } = useSession();
+
   const team = useOptionalCurrentTeam();
+
   const navigate = useNavigate();
+  const analytics = useAnalytics();
 
   const userTimezone =
     TIME_ZONES.find((timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone) ??
     DEFAULT_DOCUMENT_TIME_ZONE;
 
-  const { user } = useSession();
-
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
   const { quota, remaining, refreshLimits } = useLimits();
 
   const [isLoading, setIsLoading] = useState(false);
@@ -94,12 +96,11 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
         duration: 5000,
       });
 
-      // Todo
+      analytics.capture('App: Document Uploaded', {
-      // analytics.capture('App: Document Uploaded', {
+        userId: user.id,
-      //   userId: session?.user.id,
+        documentId: id,
-      //   documentId: id,
+        timestamp: new Date().toISOString(),
-      //   timestamp: new Date().toISOString(),
+      });
-      // });
 
       void navigate(`${formatDocumentsPath(team?.url)}/${id}/edit`);
     } catch (err) {

apps/remix/app/components/general/period-selector.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { Trans } from '@lingui/macro';
 import { useLocation, useNavigate, useSearchParams } from 'react-router';
 
+import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
 import {
   Select,
   SelectContent,
@@ -11,7 +12,10 @@ import {
   SelectValue,
 } from '@documenso/ui/primitives/select';
 
-import { isPeriodSelectorValue } from './types';
+const isPeriodSelectorValue = (value: unknown): value is PeriodSelectorValue => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return ['', '7d', '14d', '30d'].includes(value as string);
+};
 
 export const PeriodSelector = () => {
   const { pathname } = useLocation();

apps/remix/app/components/general/refresh-on-focus.tsx

@@ -0,0 +1,21 @@
+import { useCallback, useEffect } from 'react';
+
+import { useRevalidator } from 'react-router';
+
+export const RefreshOnFocus = () => {
+  const { revalidate } = useRevalidator();
+
+  const onFocus = useCallback(() => {
+    void revalidate();
+  }, [revalidate]);
+
+  useEffect(() => {
+    window.addEventListener('focus', onFocus);
+
+    return () => {
+      window.removeEventListener('focus', onFocus);
+    };
+  }, [onFocus]);
+
+  return null;
+};

apps/remix/app/components/general/settings-nav-desktop.tsx

@@ -5,16 +5,16 @@ import { Braces, CreditCard, Globe2Icon, Lock, User, Users, Webhook } from 'luci
 import { useLocation } from 'react-router';
 import { Link } from 'react-router';
 
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
+export type SettingsDesktopNavProps = HTMLAttributes<HTMLDivElement>;
 
-export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
+export const SettingsDesktopNav = ({ className, ...props }: SettingsDesktopNavProps) => {
   const { pathname } = useLocation();
 
-  const isBillingEnabled = false; // Todo getFlag('app_billing');
+  const isBillingEnabled = IS_BILLING_ENABLED();
-  const isPublicProfileEnabled = true; // Todo getFlag('app_public_profile');
 
   return (
     <div className={cn('flex flex-col gap-y-2', className)} {...props}>
@@ -31,20 +31,18 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
-      {isPublicProfileEnabled && (
+      <Link to="/settings/public-profile">
-        <Link to="/settings/public-profile">
+        <Button
-          <Button
+          variant="ghost"
-            variant="ghost"
+          className={cn(
-            className={cn(
+            'w-full justify-start',
-              'w-full justify-start',
+            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
-              pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+          )}
-            )}
+        >
-          >
+          <Globe2Icon className="mr-2 h-5 w-5" />
-            <Globe2Icon className="mr-2 h-5 w-5" />
+          <Trans>Public Profile</Trans>
-            <Trans>Public Profile</Trans>
+        </Button>
-          </Button>
+      </Link>
-        </Link>
-      )}
 
       <Link to="/settings/teams">
         <Button

apps/remix/app/components/general/settings-nav-mobile.tsx

@@ -4,16 +4,16 @@ import { Trans } from '@lingui/macro';
 import { Braces, CreditCard, Globe2Icon, Lock, User, Users, Webhook } from 'lucide-react';
 import { Link, useLocation } from 'react-router';
 
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-export type MobileNavProps = HTMLAttributes<HTMLDivElement>;
+export type SettingsMobileNavProps = HTMLAttributes<HTMLDivElement>;
 
-export const MobileNav = ({ className, ...props }: MobileNavProps) => {
+export const SettingsMobileNav = ({ className, ...props }: SettingsMobileNavProps) => {
   const { pathname } = useLocation();
 
-  const isBillingEnabled = false; // Todo getFlag('app_billing');
+  const isBillingEnabled = IS_BILLING_ENABLED();
-  const isPublicProfileEnabled = true; // Todo getFlag('app_public_profile');
 
   return (
     <div
@@ -33,20 +33,18 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
-      {isPublicProfileEnabled && (
+      <Link to="/settings/public-profile">
-        <Link to="/settings/public-profile">
+        <Button
-          <Button
+          variant="ghost"
-            variant="ghost"
+          className={cn(
-            className={cn(
+            'w-full justify-start',
-              'w-full justify-start',
+            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
-              pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+          )}
-            )}
+        >
-          >
+          <Globe2Icon className="mr-2 h-5 w-5" />
-            <Globe2Icon className="mr-2 h-5 w-5" />
+          <Trans>Public Profile</Trans>
-            <Trans>Public Profile</Trans>
+        </Button>
-          </Button>
+      </Link>
-        </Link>
-      )}
 
       <Link to="/settings/teams">
         <Button

apps/remix/app/components/general/teams/team-settings-nav-desktop.tsx

@@ -8,9 +8,9 @@ import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-export type TeamSettingsDesktopNavProps = HTMLAttributes<HTMLDivElement>;
+export type TeamSettingsNavDesktopProps = HTMLAttributes<HTMLDivElement>;
 
-export const TeamSettingsDesktopNav = ({ className, ...props }: TeamSettingsDesktopNavProps) => {
+export const TeamSettingsNavDesktop = ({ className, ...props }: TeamSettingsNavDesktopProps) => {
   const { pathname } = useLocation();
   const params = useParams();
 

apps/remix/app/components/general/teams/team-settings-nav-mobile.tsx

@@ -8,9 +8,9 @@ import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-export type TeamSettingsMobileNavProps = HTMLAttributes<HTMLDivElement>;
+export type TeamSettingsNavMobileProps = HTMLAttributes<HTMLDivElement>;
 
-export const TeamSettingsMobileNav = ({ className, ...props }: TeamSettingsMobileNavProps) => {
+export const TeamSettingsNavMobile = ({ className, ...props }: TeamSettingsNavMobileProps) => {
   const { pathname } = useLocation();
   const params = useParams();
 

apps/remix/app/components/general/template/template-page-view-documents-table.tsx

@@ -20,16 +20,17 @@ import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
-import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
-import { DocumentSearch } from '~/components/(dashboard)/document-search/document-search';
-import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
-import { DocumentStatus } from '~/components/formatter/document-status';
 import { SearchParamSelector } from '~/components/forms/search-param-selector';
+import { DocumentSearch } from '~/components/general/document/document-search';
+import { DocumentStatus } from '~/components/general/document/document-status';
+import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { DocumentsTableActionButton } from '~/components/tables/documents-table-action-button';
 import { DocumentsTableActionDropdown } from '~/components/tables/documents-table-action-dropdown';
 import { DataTableTitle } from '~/components/tables/documents-table-title';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
+import { PeriodSelector } from '../period-selector';
+
 const DOCUMENT_SOURCE_LABELS: { [key in DocumentSource]: MessageDescriptor } = {
   DOCUMENT: msg`Document`,
   TEMPLATE: msg`Template`,

apps/remix/app/components/general/verify-email-banner.tsx

@@ -29,6 +29,7 @@ export const VerifyEmailBanner = ({ email }: VerifyEmailBannerProps) => {
 
   const [isButtonDisabled, setIsButtonDisabled] = useState(false);
 
+  // Todo
   const { mutateAsync: sendConfirmationEmail, isPending } =
     trpc.profile.sendConfirmationEmail.useMutation();
 

apps/remix/app/components/tables/documents-table-action-dropdown.tsx

@@ -37,7 +37,7 @@ import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialo
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentMoveDialog } from '~/components/dialogs/document-move-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
-import { DocumentRecipientLinkCopyDialog } from '~/components/document/document-recipient-link-copy-dialog';
+import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type DocumentsTableActionDropdownProps = {

apps/remix/app/components/tables/documents-table.tsx

@@ -18,10 +18,10 @@ import { DataTablePagination } from '@documenso/ui/primitives/data-table-paginat
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 
-import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
+import { DocumentStatus } from '~/components/general/document/document-status';
-import { DocumentStatus } from '~/components/formatter/document-status';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
+import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';
 import { DocumentsTableActionButton } from './documents-table-action-button';
 import { DocumentsTableActionDropdown } from './documents-table-action-dropdown';
 

apps/remix/app/components/tables/team-settings-billing-invoices-table.tsx

@@ -14,11 +14,13 @@ import { DataTablePagination } from '@documenso/ui/primitives/data-table-paginat
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 
-export type TeamBillingInvoicesDataTableProps = {
+export type TeamSettingsBillingInvoicesTableProps = {
   teamId: number;
 };
 
-export const TeamBillingInvoicesDataTable = ({ teamId }: TeamBillingInvoicesDataTableProps) => {
+export const TeamSettingsBillingInvoicesTable = ({
+  teamId,
+}: TeamSettingsBillingInvoicesTableProps) => {
   const { _ } = useLingui();
 
   const { data, isLoading, isLoadingError } = trpc.team.findTeamInvoices.useQuery(

apps/remix/app/components/tables/templates-table-action-dropdown.tsx

@@ -26,12 +26,22 @@ export type TemplatesTableActionDropdownProps = {
   };
   templateRootPath: string;
   teamId?: number;
+  onDelete?: () => Promise<void> | void;
+  onMove?: ({
+    templateId,
+    teamUrl,
+  }: {
+    templateId: number;
+    teamUrl: string;
+  }) => Promise<void> | void;
 };
 
 export const TemplatesTableActionDropdown = ({
   row,
   templateRootPath,
   teamId,
+  onDelete,
+  onMove,
 }: TemplatesTableActionDropdownProps) => {
   const { user } = useSession();
 
@@ -104,12 +114,14 @@ export const TemplatesTableActionDropdown = ({
         templateId={row.id}
         open={isMoveDialogOpen}
         onOpenChange={setMoveDialogOpen}
+        onMove={onMove}
       />
 
       <TemplateDeleteDialog
         id={row.id}
         open={isDeleteDialogOpen}
         onOpenChange={setDeleteDialogOpen}
+        onDelete={onDelete}
       />
     </DropdownMenu>
   );

apps/remix/app/components/tables/templates-table.tsx

@@ -17,7 +17,7 @@ import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
-import { TemplateType } from '~/components/formatter/template-type';
+import { TemplateType } from '~/components/general/template/template-type';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 import { TemplateUseDialog } from '../dialogs/template-use-dialog';

apps/remix/app/components/tables/user-settings-current-teams-table.tsx

@@ -22,7 +22,7 @@ import { TableCell } from '@documenso/ui/primitives/table';
 
 import { TeamLeaveDialog } from '~/components/dialogs/team-leave-dialog';
 
-export const CurrentUserTeamsDataTable = () => {
+export const UserSettingsCurrentTeamsDataTable = () => {
   const { _, i18n } = useLingui();
 
   const [searchParams] = useSearchParams();

apps/remix/app/components/tables/user-settings-pending-teams-table-actions.tsx

@@ -6,17 +6,17 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type PendingUserTeamsDataTableActionsProps = {
+export type UserSettingsPendingTeamsTableActionsProps = {
   className?: string;
   pendingTeamId: number;
   onPayClick: (pendingTeamId: number) => void;
 };
 
-export const PendingUserTeamsDataTableActions = ({
+export const UserSettingsPendingTeamsTableActions = ({
   className,
   pendingTeamId,
   onPayClick,
-}: PendingUserTeamsDataTableActionsProps) => {
+}: UserSettingsPendingTeamsTableActionsProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 

apps/remix/app/components/tables/user-settings-pending-teams-table.tsx

@@ -17,9 +17,9 @@ import { TableCell } from '@documenso/ui/primitives/table';
 
 import { TeamCheckoutCreateDialog } from '~/components/dialogs/team-checkout-create-dialog';
 
-import { PendingUserTeamsDataTableActions } from './pending-user-teams-data-table-actions';
+import { UserSettingsPendingTeamsTableActions } from './user-settings-pending-teams-table-actions';
 
-export const PendingUserTeamsDataTable = () => {
+export const UserSettingsPendingTeamsDataTable = () => {
   const { _, i18n } = useLingui();
 
   const [searchParams] = useSearchParams();
@@ -78,7 +78,7 @@ export const PendingUserTeamsDataTable = () => {
       {
         id: 'actions',
         cell: ({ row }) => (
-          <PendingUserTeamsDataTableActions
+          <UserSettingsPendingTeamsTableActions
             className="justify-end"
             pendingTeamId={row.original.id}
             onPayClick={setCheckoutPendingTeamId}

apps/remix/app/components/tables/user-settings-teams-page-table.tsx

@@ -11,8 +11,8 @@ import { trpc } from '@documenso/trpc/react';
 import { Input } from '@documenso/ui/primitives/input';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
-import { CurrentUserTeamsDataTable } from './current-user-teams-data-table';
+import { UserSettingsCurrentTeamsDataTable } from './user-settings-current-teams-table';
-import { PendingUserTeamsDataTable } from './pending-user-teams-data-table';
+import { UserSettingsPendingTeamsDataTable } from './user-settings-pending-teams-table';
 
 export const UserSettingsTeamsPageDataTable = () => {
   const { _ } = useLingui();
@@ -82,7 +82,11 @@ export const UserSettingsTeamsPageDataTable = () => {
         </Tabs>
       </div>
 
-      {currentTab === 'pending' ? <PendingUserTeamsDataTable /> : <CurrentUserTeamsDataTable />}
+      {currentTab === 'pending' ? (
+        <UserSettingsPendingTeamsDataTable />
+      ) : (
+        <UserSettingsCurrentTeamsDataTable />
+      )}
     </div>
   );
 };

apps/remix/app/root.tsx

@@ -22,6 +22,7 @@ import { TooltipProvider } from '@documenso/ui/primitives/tooltip';
 import type { Route } from './+types/root';
 import stylesheet from './app.css?url';
 import { GenericErrorLayout } from './components/general/generic-error-layout';
+import { RefreshOnFocus } from './components/general/refresh-on-focus';
 import { PostHogPageview } from './providers/posthog';
 import { langCookie } from './storage/lang-cookie.server';
 import { themeSessionResolver } from './storage/theme-session.server';
@@ -130,6 +131,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <ScrollRestoration />
         <Scripts />
 
+        {/* Todo: Do we want this here? */}
+        <RefreshOnFocus />
+
         <script
           dangerouslySetInnerHTML={{
             __html: `window.__ENV__ = ${JSON.stringify(__ENV__)}`,

apps/remix/app/routes/_authenticated+/_layout.tsx

@@ -5,9 +5,9 @@ import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/client
 import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
 import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
 
-import { AppBanner } from '~/components/(dashboard)/layout/app-banner';
+import { AppBanner } from '~/components/general/app-banner';
-import { Header } from '~/components/(dashboard)/layout/header';
+import { Header } from '~/components/general/app-header';
-import { VerifyEmailBanner } from '~/components/(dashboard)/layout/verify-email-banner';
+import { VerifyEmailBanner } from '~/components/general/verify-email-banner';
 
 import type { Route } from './+types/_layout';
 

apps/remix/app/routes/_authenticated+/admin+/_layout.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro';
 import { BarChart3, FileStack, Settings, Trophy, Users, Wallet2 } from 'lucide-react';
 import { Link, Outlet, redirect, useLocation } from 'react-router';
-import { getRequiredLoaderSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderSession } from 'server/utils/get-loader-session';
 
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import { cn } from '@documenso/ui/lib/utils';

apps/remix/app/routes/_authenticated+/admin+/documents.$id.tsx

@@ -23,7 +23,7 @@ import {
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { AdminDocumentDeleteDialog } from '~/components/dialogs/admin-document-delete-dialog';
-import { DocumentStatus } from '~/components/formatter/document-status';
+import { DocumentStatus } from '~/components/general/document/document-status';
 import { AdminDocumentRecipientItemTable } from '~/components/tables/admin-document-recipient-item-table';
 
 import type { Route } from './+types/documents.$id';

apps/remix/app/routes/_authenticated+/admin+/documents.tsx

@@ -17,7 +17,7 @@ import { DataTablePagination } from '@documenso/ui/primitives/data-table-paginat
 import { Input } from '@documenso/ui/primitives/input';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
-import { DocumentStatus } from '~/components/formatter/document-status';
+import { DocumentStatus } from '~/components/general/document/document-status';
 
 export default function AdminDocumentsPage() {
   const { _, i18n } = useLingui();

apps/remix/app/routes/_authenticated+/admin+/site-settings.tsx

@@ -25,7 +25,7 @@ import { Switch } from '@documenso/ui/primitives/switch';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { SettingsHeader } from '~/components/general/settings-header';
 
 import type { Route } from './+types/site-settings';
 

apps/remix/app/routes/_authenticated+/admin+/stats.tsx

@@ -24,9 +24,9 @@ import {
 import { getSignerConversionMonthly } from '@documenso/lib/server-only/user/get-signer-conversion';
 import { env } from '@documenso/lib/utils/env';
 
-import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
 import { AdminStatsSignerConversionChart } from '~/components/general/admin-stats-signer-conversion-chart';
 import { AdminStatsUsersWithDocumentsChart } from '~/components/general/admin-stats-users-with-documents';
+import { CardMetric } from '~/components/general/metric-card';
 
 import type { Route } from './+types/stats';
 

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

@@ -3,7 +3,7 @@ import { useLingui } from '@lingui/react';
 import { DocumentStatus, TeamMemberRole } from '@prisma/client';
 import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
-import { getRequiredLoaderSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderSession } from 'server/utils/get-loader-session';
 import { match } from 'ts-pattern';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
@@ -17,19 +17,19 @@ import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
-import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
+import { DocumentHistorySheet } from '~/components/general/document/document-history-sheet';
-import { DocumentHistorySheet } from '~/components/document/document-history-sheet';
-import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
-import { DocumentRecipientLinkCopyDialog } from '~/components/document/document-recipient-link-copy-dialog';
-import {
-  DocumentStatus as DocumentStatusComponent,
-  FRIENDLY_STATUS_MAP,
-} from '~/components/formatter/document-status';
 import { DocumentPageViewButton } from '~/components/general/document/document-page-view-button';
 import { DocumentPageViewDropdown } from '~/components/general/document/document-page-view-dropdown';
 import { DocumentPageViewInformation } from '~/components/general/document/document-page-view-information';
 import { DocumentPageViewRecentActivity } from '~/components/general/document/document-page-view-recent-activity';
 import { DocumentPageViewRecipients } from '~/components/general/document/document-page-view-recipients';
+import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
+import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
+import {
+  DocumentStatus as DocumentStatusComponent,
+  FRIENDLY_STATUS_MAP,
+} from '~/components/general/document/document-status';
+import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
 import type { Route } from './+types/$id._index';

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

@@ -2,7 +2,7 @@ import { Plural, Trans } from '@lingui/macro';
 import { DocumentStatus as InternalDocumentStatus, TeamMemberRole } from '@prisma/client';
 import { ChevronLeft, Users2 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
-import { getRequiredLoaderSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderSession } from 'server/utils/get-loader-session';
 import { match } from 'ts-pattern';
 
 import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
@@ -10,9 +10,9 @@ import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
-import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
-import { DocumentStatus } from '~/components/formatter/document-status';
 import { DocumentEditForm } from '~/components/general/document/document-edit-form';
+import { DocumentStatus } from '~/components/general/document/document-status';
+import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
 import type { Route } from './+types/$id.edit';

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

@@ -5,19 +5,19 @@ import type { Recipient } from '@prisma/client';
 import { ChevronLeft } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { Link, redirect } from 'react-router';
-import { getRequiredLoaderSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderSession } from 'server/utils/get-loader-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 { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { Card } from '@documenso/ui/primitives/card';
 
+import { DocumentAuditLogDownloadButton } from '~/components/general/document/document-audit-log-download-button';
+import { DocumentCertificateDownloadButton } from '~/components/general/document/document-certificate-download-button';
 import {
   DocumentStatus as DocumentStatusComponent,
   FRIENDLY_STATUS_MAP,
-} from '~/components/formatter/document-status';
+} from '~/components/general/document/document-status';
-import { DocumentAuditLogDownloadButton } from '~/components/general/document/document-audit-log-download-button';
-import { DocumentCertificateDownloadButton } from '~/components/general/document/document-certificate-download-button';
 import { DocumentLogsTable } from '~/components/tables/document-logs-table';
 
 import type { Route } from './+types/$id.logs';

apps/remix/app/routes/_authenticated+/documents+/_index.tsx

@@ -15,10 +15,10 @@ import {
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
-import { DocumentSearch } from '~/components/(dashboard)/document-search/document-search';
+import { DocumentSearch } from '~/components/general/document/document-search';
-import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
+import { DocumentStatus } from '~/components/general/document/document-status';
-import { DocumentUploadDropzone } from '~/components/document/document-upload';
+import { DocumentUploadDropzone } from '~/components/general/document/document-upload';
-import { DocumentStatus } from '~/components/formatter/document-status';
+import { PeriodSelector } from '~/components/general/period-selector';
 import { DocumentsTable } from '~/components/tables/documents-table';
 import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
 import { DocumentsTableSenderFilter } from '~/components/tables/documents-table-sender-filter';
@@ -98,7 +98,7 @@ export default function DocumentsPage() {
         </div>
 
         <div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
-          <Tabs value={findDocumentSearchParams.status} className="overflow-x-auto">
+          <Tabs value={findDocumentSearchParams.status || 'ALL'} className="overflow-x-auto">
             <TabsList>
               {[
                 ExtendedDocumentStatus.INBOX,

apps/remix/app/routes/_authenticated+/settings+/_layout.tsx

@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/macro';
 import { Outlet } from 'react-router';
 
-import { DesktopNav } from '~/components/(dashboard)/settings/layout/desktop-nav';
+import { SettingsDesktopNav } from '~/components/general/settings-nav-desktop';
-import { MobileNav } from '~/components/(dashboard)/settings/layout/mobile-nav';
+import { SettingsMobileNav } from '~/components/general/settings-nav-mobile';
 
 export default function SettingsLayout() {
   return (
@@ -12,8 +12,8 @@ export default function SettingsLayout() {
       </h1>
 
       <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
-        <DesktopNav className="hidden md:col-span-3 md:flex" />
+        <SettingsDesktopNav className="hidden md:col-span-3 md:flex" />
-        <MobileNav className="col-span-12 mb-8 md:hidden" />
+        <SettingsMobileNav className="col-span-12 mb-8 md:hidden" />
 
         <div className="col-span-12 md:col-span-9">
           <Outlet />

apps/remix/app/routes/_authenticated+/settings+/profile.tsx

@@ -1,10 +1,10 @@
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { AccountDeleteDialog } from '~/components/dialogs/account-delete-dialog';
 import { AvatarImageForm } from '~/components/forms/avatar-image';
 import { ProfileForm } from '~/components/forms/profile';
+import { SettingsHeader } from '~/components/general/settings-header';
 
 export function meta() {
   return [{ title: 'Profile' }];

apps/remix/app/routes/_authenticated+/settings+/public-profile+/index.tsx

@@ -4,7 +4,7 @@ import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import type { TemplateDirectLink } from '@prisma/client';
 import { TemplateType } from '@prisma/client';
-import { getRequiredLoaderSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderSession } from 'server/utils/get-loader-session';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { getUserPublicProfile } from '@documenso/lib/server-only/user/get-user-public-profile';
@@ -16,10 +16,10 @@ import { Switch } from '@documenso/ui/primitives/switch';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { ManagePublicTemplateDialog } from '~/components/dialogs/public-profile-template-manage-dialog';
 import type { TPublicProfileFormSchema } from '~/components/forms/public-profile-form';
 import { PublicProfileForm } from '~/components/forms/public-profile-form';
+import { SettingsHeader } from '~/components/general/settings-header';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 import { SettingsPublicProfileTemplatesTable } from '../../../../components/tables/settings-public-profile-templates-table';

apps/remix/app/routes/_authenticated+/settings+/security+/activity+/index.tsx

@@ -1,7 +1,7 @@
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { SettingsHeader } from '~/components/general/settings-header';
 import { SettingsSecurityActivityTable } from '~/components/tables/settings-security-activity-table';
 
 export function meta() {

apps/remix/app/routes/_authenticated+/settings+/security+/index.tsx

@@ -6,11 +6,11 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { DisableAuthenticatorAppDialog } from '~/components/forms/2fa/disable-authenticator-app-dialog';
 import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
 import { ViewRecoveryCodesDialog } from '~/components/forms/2fa/view-recovery-codes-dialog';
 import { PasswordForm } from '~/components/forms/password';
+import { SettingsHeader } from '~/components/general/settings-header';
 
 export function meta() {
   return [{ title: 'Security' }];

apps/remix/app/routes/_authenticated+/settings+/security+/passkeys+/index.tsx

@@ -1,8 +1,8 @@
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { CreatePasskeyDialog } from '~/components/dialogs/create-passkey-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
 import { SettingsSecurityPasskeyTable } from '~/components/tables/settings-security-passkey-table';
 
 import type { Route } from './+types/index';

apps/remix/app/routes/_authenticated+/settings+/teams+/index.tsx

@@ -5,9 +5,9 @@ import { AnimatePresence } from 'framer-motion';
 import { trpc } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-import { UserSettingsTeamsPageDataTable } from '~/components/(teams)/tables/user-settings-teams-page-data-table';
 import { TeamCreateDialog } from '~/components/dialogs/team-create-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { UserSettingsTeamsPageDataTable } from '~/components/tables/user-settings-teams-page-table';
 
 import { TeamEmailUsage } from './team-email-usage';
 import { TeamInvitations } from './team-invitations';

apps/remix/app/routes/_authenticated+/settings+/tokens+/index.tsx

@@ -1,29 +1,17 @@
 import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
-import { getRequiredLoaderSession } from 'server/utils/get-required-session-context';
 
-import { getUserTokens } from '@documenso/lib/server-only/public-api/get-all-user-tokens';
+import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 
-import DeleteTokenDialog from '~/components/(dashboard)/settings/token/delete-token-dialog';
+import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
 import { ApiTokenForm } from '~/components/forms/token';
 
-import type { Route } from './+types/index';
+export default function ApiTokensPage() {
-
-export async function loader({ context }: Route.LoaderArgs) {
-  const { user } = getRequiredLoaderSession(context);
-
-  // Todo: Use TRPC & use table instead
-  const tokens = await getUserTokens({ userId: user.id });
-
-  return { tokens };
-}
-
-export default function ApiTokensPage({ loaderData }: Route.ComponentProps) {
   const { i18n } = useLingui();
 
-  const { tokens } = loaderData;
+  const { data: tokens } = trpc.apiToken.getTokens.useQuery();
 
   return (
     <div>
@@ -56,7 +44,7 @@ export default function ApiTokensPage({ loaderData }: Route.ComponentProps) {
         <Trans>Your existing tokens</Trans>
       </h4>
 
-      {tokens.length === 0 && (
+      {tokens && tokens.length === 0 && (
         <div className="mb-4">
           <p className="text-muted-foreground mt-2 text-sm italic">
             <Trans>Your tokens will be shown here once you create them.</Trans>
@@ -64,7 +52,7 @@ export default function ApiTokensPage({ loaderData }: Route.ComponentProps) {
         </div>
       )}
 
-      {tokens.length > 0 && (
+      {tokens && tokens.length > 0 && (
         <div className="mt-4 flex max-w-xl flex-col gap-y-4">
           {tokens.map((token) => (
             <div key={token.id} className="border-border rounded-lg border p-4">
@@ -87,11 +75,11 @@ export default function ApiTokensPage({ loaderData }: Route.ComponentProps) {
                 </div>
 
                 <div>
-                  <DeleteTokenDialog token={token}>
+                  <TokenDeleteDialog token={token}>
                     <Button variant="destructive">
                       <Trans>Delete</Trans>
                     </Button>
-                  </DeleteTokenDialog>
+                  </TokenDeleteDialog>
                 </div>
               </div>
             </div>

apps/remix/app/routes/_authenticated+/settings+/webhooks+/$id.tsx

@@ -23,7 +23,7 @@ import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { SettingsHeader } from '~/components/general/settings-header';
 import { WebhookMultiSelectCombobox } from '~/components/general/webhook-multiselect-combobox';
 
 const ZEditWebhookFormSchema = ZEditWebhookMutationSchema.omit({ id: true });

apps/remix/app/routes/_authenticated+/settings+/webhooks+/index.tsx

@@ -10,9 +10,9 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { WebhookCreateDialog } from '~/components/dialogs/webhook-create-dialog';
 import { WebhookDeleteDialog } from '~/components/dialogs/webhook-delete-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
 
 export default function WebhookPage() {
   const { _, i18n } = useLingui();

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

@@ -3,7 +3,7 @@ import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { ChevronLeft } from 'lucide-react';
 import { Link, Outlet, isRouteErrorResponse, redirect, useNavigate } from 'react-router';
-import { getRequiredLoaderSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderSession } from 'server/utils/get-loader-session';
 import { match } from 'ts-pattern';
 
 import { AppErrorCode } from '@documenso/lib/errors/app-error';

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

@@ -3,18 +3,18 @@ import { CheckCircle2, Clock } from 'lucide-react';
 import { P, match } from 'ts-pattern';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { isTokenExpired } from '@documenso/lib/utils/token-verification';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-import { UpdateTeamForm } from '~/components/(teams)/forms/update-team-form';
 import { TeamDeleteDialog } from '~/components/dialogs/team-delete-dialog';
 import { TeamEmailAddDialog } from '~/components/dialogs/team-email-add-dialog';
 import { TeamTransferDialog } from '~/components/dialogs/team-transfer-dialog';
 import { AvatarImageForm } from '~/components/forms/avatar-image';
+import { TeamUpdateForm } from '~/components/forms/team-update-form';
+import { SettingsHeader } from '~/components/general/settings-header';
 import { TeamEmailDropdown } from '~/components/general/teams/team-email-dropdown';
 import { TeamTransferStatus } from '~/components/general/teams/team-transfer-status';
 import { useCurrentTeam } from '~/providers/team';
@@ -40,7 +40,7 @@ export default function TeamsSettingsPage() {
 
       <AvatarImageForm className="mb-8" />
 
-      <UpdateTeamForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
+      <TeamUpdateForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
 
       <section className="mt-6 space-y-6">
         {(team.teamEmail || team.emailVerification) && (
@@ -61,7 +61,7 @@ export default function TeamsSettingsPage() {
             <div className="flex flex-row items-center justify-between pt-4">
               <AvatarWithText
                 avatarClass="h-12 w-12"
-                avatarSrc={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`}
+                avatarSrc={formatAvatarUrl(team.avatarImageId)}
                 avatarFallback={extractInitials(
                   (team.teamEmail?.name || team.emailVerification?.name) ?? '',
                 )}

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

@@ -1,11 +1,11 @@
 import { Trans } from '@lingui/macro';
 import { Outlet } from 'react-router';
-import { getRequiredLoaderTeamSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderTeamSession } from 'server/utils/get-loader-session';
 
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
 
-import { TeamSettingsDesktopNav } from '~/components/general/teams/team-settings-desktop-nav';
+import { TeamSettingsNavDesktop } from '~/components/general/teams/team-settings-nav-desktop';
-import { TeamSettingsMobileNav } from '~/components/general/teams/team-settings-mobile-nav';
+import { TeamSettingsNavMobile } from '~/components/general/teams/team-settings-nav-mobile';
 
 import type { Route } from '../+types/_layout';
 
@@ -25,8 +25,8 @@ export default function TeamsSettingsLayout() {
       </h1>
 
       <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
-        <TeamSettingsDesktopNav className="hidden md:col-span-3 md:flex" />
+        <TeamSettingsNavDesktop className="hidden md:col-span-3 md:flex" />
-        <TeamSettingsMobileNav className="col-span-12 mb-8 md:hidden" />
+        <TeamSettingsNavMobile className="col-span-12 mb-8 md:hidden" />
 
         <div className="col-span-12 md:col-span-9">
           <Outlet />

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

@@ -1,7 +1,7 @@
 import { Plural, Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
-import { getRequiredLoaderTeamSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderTeamSession } from 'server/utils/get-loader-session';
 import type Stripe from 'stripe';
 import { match } from 'ts-pattern';
 
@@ -9,9 +9,9 @@ import { stripe } from '@documenso/lib/server-only/stripe';
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { SettingsHeader } from '~/components/general/settings-header';
-import { TeamBillingInvoicesDataTable } from '~/components/(teams)/tables/team-billing-invoices-data-table';
 import { TeamBillingPortalButton } from '~/components/general/teams/team-billing-portal-button';
+import { TeamSettingsBillingInvoicesTable } from '~/components/tables/team-settings-billing-invoices-table';
 
 import type { Route } from './+types/billing';
 
@@ -94,7 +94,7 @@ export default function TeamsSettingBillingPage({ loaderData }: Route.ComponentP
       </Card>
 
       <section className="mt-6">
-        <TeamBillingInvoicesDataTable teamId={team.id} />
+        <TeamSettingsBillingInvoicesTable teamId={team.id} />
       </section>
     </div>
   );

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

@@ -8,8 +8,8 @@ import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounce
 import { Input } from '@documenso/ui/primitives/input';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { TeamMemberInviteDialog } from '~/components/dialogs/team-member-invite-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
 import { TeamSettingsMemberInvitesTable } from '~/components/tables/team-settings-member-invites-table';
 import { TeamSettingsMembersDataTable } from '~/components/tables/team-settings-members-table';
 import { useCurrentTeam } from '~/providers/team';

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

@@ -1,9 +1,9 @@
 import { msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { TeamBrandingPreferencesForm } from '~/components/forms/team-branding-preferences-form';
 import { TeamDocumentPreferencesForm } from '~/components/forms/team-document-preferences-form';
+import { SettingsHeader } from '~/components/general/settings-header';
 import { useCurrentTeam } from '~/providers/team';
 
 export default function TeamsSettingsPage() {

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/public-profile.tsx

@@ -1,4 +1,4 @@
-import { getRequiredLoaderTeamSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderTeamSession } from 'server/utils/get-loader-session';
 
 import { getTeamPublicProfile } from '@documenso/lib/server-only/team/get-team-public-profile';
 

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

@@ -1,13 +1,13 @@
 import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
-import { getRequiredLoaderTeamSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderTeamSession } from 'server/utils/get-loader-session';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getTeamTokens } from '@documenso/lib/server-only/public-api/get-all-team-tokens';
 import { Button } from '@documenso/ui/primitives/button';
 
-import DeleteTokenDialog from '~/components/(dashboard)/settings/token/delete-token-dialog';
+import TokenDeleteDialog from '~/components/dialogs/token-delete-dialog';
 import { ApiTokenForm } from '~/components/forms/token';
 
 import type { Route } from './+types/tokens';
@@ -103,11 +103,11 @@ export default function ApiTokensPage({ loaderData }: Route.ComponentProps) {
                 </div>
 
                 <div>
-                  <DeleteTokenDialog token={token} teamId={team.id}>
+                  <TokenDeleteDialog token={token} teamId={team.id}>
                     <Button variant="destructive">
                       <Trans>Delete</Trans>
                     </Button>
-                  </DeleteTokenDialog>
+                  </TokenDeleteDialog>
                 </div>
               </div>
             </div>

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

@@ -22,7 +22,7 @@ import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { SettingsHeader } from '~/components/general/settings-header';
 import { WebhookMultiSelectCombobox } from '~/components/general/webhook-multiselect-combobox';
 import { useCurrentTeam } from '~/providers/team';
 

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

@@ -10,9 +10,9 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { WebhookCreateDialog } from '~/components/dialogs/webhook-create-dialog';
 import { WebhookDeleteDialog } from '~/components/dialogs/webhook-delete-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
 import { useCurrentTeam } from '~/providers/team';
 
 export default function WebhookPage() {

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

@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/macro';
 import { DocumentSigningOrder, SigningStatus } from '@prisma/client';
 import { ChevronLeft, LucideEdit } from 'lucide-react';
-import { Link, redirect } from 'react-router';
+import { Link, redirect, useNavigate } from 'react-router';
-import { getRequiredLoaderSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderSession } from 'server/utils/get-loader-session';
 
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
@@ -12,13 +12,13 @@ import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
 import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
-import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
+import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
-import { TemplateType } from '~/components/formatter/template-type';
 import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
 import { TemplatePageViewDocumentsTable } from '~/components/general/template/template-page-view-documents-table';
 import { TemplatePageViewInformation } from '~/components/general/template/template-page-view-information';
 import { TemplatePageViewRecentActivity } from '~/components/general/template/template-page-view-recent-activity';
 import { TemplatePageViewRecipients } from '~/components/general/template/template-page-view-recipients';
+import { TemplateType } from '~/components/general/template/template-type';
 import { TemplatesTableActionDropdown } from '~/components/tables/templates-table-action-dropdown';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
@@ -62,6 +62,8 @@ export default function TemplatePage() {
 
   const { templateDocumentData, fields, recipients, templateMeta } = template;
 
+  const navigate = useNavigate();
+
   // Remap to fit the DocumentReadOnlyFields component.
   const readOnlyFields = fields.map((field) => {
     const recipient = recipients.find((recipient) => recipient.id === field.recipientId) || {
@@ -159,6 +161,10 @@ export default function TemplatePage() {
                     row={template}
                     teamId={team?.id}
                     templateRootPath={templateRootPath}
+                    onDelete={async () => navigate(templateRootPath)}
+                    onMove={async ({ teamUrl, templateId }) =>
+                      navigate(`${formatTemplatesPath(teamUrl)}/${templateId}`)
+                    }
                   />
                 </div>
               </div>

apps/remix/app/routes/_authenticated+/templates+/$id.edit.tsx

@@ -1,15 +1,15 @@
 import { Trans } from '@lingui/macro';
 import { ChevronLeft } from 'lucide-react';
 import { Link, redirect } from 'react-router';
-import { getRequiredLoaderSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderSession } from 'server/utils/get-loader-session';
 
 import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 
-import { TemplateType } from '~/components/formatter/template-type';
 import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
 import { TemplateEditForm } from '~/components/general/template/template-edit-form';
+import { TemplateType } from '~/components/general/template/template-type';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
 import { TemplateDirectLinkDialogWrapper } from '../../../components/dialogs/template-direct-link-dialog-wrapper';

apps/remix/app/routes/_authenticated+/templates+/_index.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro';
 import { Bird } from 'lucide-react';
 import { useSearchParams } from 'react-router';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
@@ -37,9 +37,7 @@ export default function TemplatesPage() {
         <div className="flex flex-row items-center">
           {team && (
             <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
-              {team.avatarImageId && (
+              {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-                <AvatarImage src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`} />
-              )}
               <AvatarFallback className="text-xs text-gray-400">
                 {team.name.slice(0, 1)}
               </AvatarFallback>

apps/remix/app/routes/_profile+/_layout.tsx

@@ -9,7 +9,7 @@ import LogoIcon from '@documenso/assets/logo_icon.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
+import { Header as AuthenticatedHeader } from '~/components/general/app-header';
 import { Logo } from '~/components/general/branding-logo';
 
 import type { Route } from './+types/_layout';

apps/remix/app/routes/_profile+/p.$url.tsx

@@ -4,8 +4,8 @@ import { DateTime } from 'luxon';
 import { Link, redirect } from 'react-router';
 
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getPublicProfileByUrl } from '@documenso/lib/server-only/profile/get-public-profile-by-url';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
@@ -66,9 +66,7 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
       <div className="flex flex-col items-center">
         <Avatar className="dark:border-border h-24 w-24 border-2 border-solid">
           {publicProfile.avatarImageId && (
-            <AvatarImage
+            <AvatarImage src={formatAvatarUrl(publicProfile.avatarImageId)} />
-              src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${publicProfile.avatarImageId}`}
-            />
           )}
 
           <AvatarFallback className="text-sm text-gray-400">

apps/remix/app/routes/_recipient+/_layout.tsx

@@ -4,11 +4,11 @@ import { Link, Outlet } from 'react-router';
 
 import { Button } from '@documenso/ui/primitives/button';
 
-import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
+import { Header as AuthenticatedHeader } from '~/components/general/app-header';
 
 import type { Route } from './+types/_layout';
 
-export async function loader({ context }: Route.LoaderArgs) {
+export function loader({ context }: Route.LoaderArgs) {
   return {
     user: context.session?.user,
     teams: context.session?.teams || [],

apps/remix/app/routes/embed+/direct.$url.tsx

@@ -1,5 +1,5 @@
 import { data } from 'react-router';
-import { getRequiredLoaderSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderSession } from 'server/utils/get-loader-session';
 import { match } from 'ts-pattern';
 
 import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';

apps/remix/app/routes/embed+/sign.$url.tsx

@@ -1,5 +1,5 @@
 import { data } from 'react-router';
-import { getRequiredLoaderSession } from 'server/utils/get-required-session-context';
+import { getRequiredLoaderSession } from 'server/utils/get-loader-session';
 import { match } from 'ts-pattern';
 
 import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';

apps/remix/server/trpc/trpc-context.ts

@@ -36,17 +36,7 @@ export const createHonoTrpcContext = async ({
     .catch(() => undefined)
     .parse(rawTeamId);
 
-  if (!session) {
+  if (!session || !user) {
-    return {
-      session: null,
-      user: null,
-      teamId,
-      req,
-      metadata,
-    };
-  }
-
-  if (!user) {
     return {
       session: null,
       user: null,
@@ -58,7 +48,7 @@ export const createHonoTrpcContext = async ({
 
   return {
     session,
-    user, // Todo
+    user,
     teamId,
     req,
     metadata,