feat: new view file showing options

diced · diced · commit 8f12621315ba · 2025-05-20T20:55:52.000-07:00
diff --git a/src/components/pages/files/tags/TagPill.tsx b/src/components/pages/files/tags/TagPill.tsx
@@ -1,11 +1,10 @@
-import { Tag } from '@/lib/db/models/tag';
 import { Pill, isLightColor } from '@mantine/core';
 
 export default function TagPill({
   tag,
   ...other
 }: {
-  tag: Tag | null;
+  tag: { color: string; name: string } | null;
   withRemoveButton?: boolean;
   onRemove?: () => void;
 }) {
diff --git a/src/components/pages/settings/parts/SettingsFileView.tsx b/src/components/pages/settings/parts/SettingsFileView.tsx
@@ -49,6 +49,8 @@ export default function SettingsFileView() {
       embedColor: user?.view.embedColor ?? '',
       align: user?.view.align ?? 'left',
       showMimetype: user?.view.showMimetype ?? false,
+      showTags: user?.view.showTags ?? false,
+      showFolder: user?.view.showFolder ?? false,
     },
   });
 
@@ -63,6 +65,8 @@ export default function SettingsFileView() {
       embedColor: values.embedColor.trim() || null,
       align: values.align,
       showMimetype: values.showMimetype,
+      showTags: values.showTags,
+      showFolder: values.showFolder,
     };
 
     const { data, error } = await fetchApi<Response['/api/user']>('/api/user', 'PATCH', {
@@ -110,6 +114,20 @@ export default function SettingsFileView() {
               disabled={!form.values.enabled}
               {...form.getInputProps('showMimetype', { type: 'checkbox' })}
             />
+
+            <Switch
+              label='Show tags'
+              description="Show the file's tags in the view-route"
+              disabled={!form.values.enabled}
+              {...form.getInputProps('showTags', { type: 'checkbox' })}
+            />
+
+            <Switch
+              label='Show folder'
+              description='Show the name/link of the folder if possible in the view-route'
+              disabled={!form.values.enabled}
+              {...form.getInputProps('showFolder', { type: 'checkbox' })}
+            />
           </SimpleGrid>
 
           <Textarea
diff --git a/src/lib/db/models/user.ts b/src/lib/db/models/user.ts
@@ -43,6 +43,8 @@ export const userViewSchema = z
     enabled: z.boolean().nullish(),
     align: z.enum(['left', 'center', 'right']).nullish(),
     showMimetype: z.boolean().nullish(),
+    showTags: z.boolean().nullish(),
+    showFolder: z.boolean().nullish(),
     content: z.string().nullish(),
     embed: z.boolean().nullish(),
     embedTitle: z.string().nullish(),
diff --git a/src/pages/view/[id].tsx b/src/pages/view/[id].tsx
@@ -1,4 +1,5 @@
 import DashboardFileType from '@/components/file/DashboardFileType';
+import TagPill from '@/components/pages/files/tags/TagPill';
 import { isCode } from '@/lib/code';
 import { config as zConfig } from '@/lib/config';
 import { verifyPassword } from '@/lib/crypto';
@@ -13,6 +14,7 @@ import { readThemes } from '@/lib/theme/file';
 import { formatRootUrl } from '@/lib/url';
 import {
   ActionIcon,
+  Anchor,
   Box,
   Button,
   Center,
@@ -22,9 +24,10 @@ import {
   Paper,
   PasswordInput,
   Text,
+  Tooltip,
   TypographyStylesProvider,
 } from '@mantine/core';
-import { IconDownload, IconInfoCircleFilled } from '@tabler/icons-react';
+import { IconDownload, IconExternalLink, IconInfoCircleFilled } from '@tabler/icons-react';
 import { sanitize } from 'isomorphic-dompurify';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import Head from 'next/head';
@@ -76,32 +79,47 @@ export default function ViewFileId({
         <meta
           property='og:title'
           content={
-            parseString(user.view.embedTitle, { file: file as File, user: user as User, ...metrics }) ?? ''
+            parseString(user.view.embedTitle, {
+              file: file as unknown as File,
+              user: user as User,
+              ...metrics,
+            }) ?? ''
           }
         />
       )}
       {user?.view!.embedDescription && user?.view.embed && (
         <meta
           property='og:description'
           content={
-            parseString(user.view.embedDescription, { file: file as File, user: user as User, ...metrics }) ??
-            ''
+            parseString(user.view.embedDescription, {
+              file: file as unknown as File,
+              user: user as User,
+              ...metrics,
+            }) ?? ''
           }
         />
       )}
       {user?.view!.embedSiteName && user?.view.embed && (
         <meta
           property='og:site_name'
           content={
-            parseString(user.view.embedSiteName, { file: file as File, user: user as User, ...metrics }) ?? ''
+            parseString(user.view.embedSiteName, {
+              file: file as unknown as File,
+              user: user as User,
+              ...metrics,
+            }) ?? ''
           }
         />
       )}
       {user?.view!.embedColor && user?.view.embed && (
         <meta
           property='theme-color'
           content={
-            parseString(user.view.embedColor, { file: file as File, user: user as User, ...metrics }) ?? ''
+            parseString(user.view.embedColor, {
+              file: file as unknown as File,
+              user: user as User,
+              ...metrics,
+            }) ?? ''
           }
         />
       )}
@@ -212,7 +230,7 @@ export default function ViewFileId({
                 dangerouslySetInnerHTML={{
                   __html: sanitize(
                     parseString(user.view.content, {
-                      file: file as File,
+                      file: file as unknown as File,
                       link: {
                         returned: `${host}${formatRootUrl(filesRoute ?? '/u', file.name!)}`,
                         raw: `${host}/raw/${file.name}`,
@@ -233,49 +251,74 @@ export default function ViewFileId({
 
       {file.name!.endsWith('.md') || file.name!.endsWith('.tex') ? (
         <Paper m='md' p='md' withBorder>
-          <DashboardFileType file={file as File} password={pw} show code={code} />
+          <DashboardFileType file={file as unknown as File} password={pw} show code={code} />
         </Paper>
       ) : (
         <Box m='sm'>
-          <DashboardFileType file={file as File} password={pw} show code={code} />
+          <DashboardFileType file={file as unknown as File} password={pw} show code={code} />
         </Box>
       )}
     </>
   ) : (
     <>
       {meta}
       <Center h='100%'>
-        <Paper
-          m='md'
-          p='md'
-          shadow='md'
-          radius='md'
-          withBorder
-        >
+        <Paper m='md' p='md' shadow='md' radius='md' withBorder>
           <Group justify='space-between' mb='sm'>
             <Group>
               <Text size='lg' fw={700} display='flex'>
-                {file.name}
+                {file.name}{' '}
               </Text>
+              {user?.view!.showTags && (
+                <Group gap={4}>{file.tags?.map((tag) => <TagPill key={tag.id} tag={tag} />)}</Group>
+              )}
+              {user?.view!.showFolder &&
+                file.Folder &&
+                (file.Folder.public ? (
+                  <Tooltip label='View folder'>
+                    <Anchor component={Link} ml='sm' href={`/folder/${file.Folder.id}`}>
+                      {file.Folder.name}
+                    </Anchor>
+                  </Tooltip>
+                ) : (
+                  <Text ml='sm' size='sm' c='dimmed'>
+                    {file.Folder.name}
+                  </Text>
+                ))}
               {user?.view!.showMimetype && (
                 <Text size='sm' c='dimmed' ml='sm' style={{ alignSelf: 'center' }}>
                   {file.type}
                 </Text>
               )}
             </Group>
 
-            <ActionIcon
-              size='md'
-              variant='outline'
-              component={Link}
-              href={`/raw/${file.name}?download=true${pw ? `&pw=${pw}` : ''}`}
-              target='_blank'
-            >
-              <IconDownload size='1rem' />
-            </ActionIcon>
+            <ActionIcon.Group>
+              <Tooltip label='View raw file'>
+                <ActionIcon
+                  size='md'
+                  variant='outline'
+                  component={Link}
+                  href={`/raw/${file.name}${pw ? `?pw=${pw}` : ''}`}
+                  target='_blank'
+                >
+                  <IconExternalLink size='1rem' />
+                </ActionIcon>
+              </Tooltip>
+              <Tooltip label='Download file'>
+                <ActionIcon
+                  size='md'
+                  variant='outline'
+                  component={Link}
+                  href={`/raw/${file.name}?download=true${pw ? `&pw=${pw}` : ''}`}
+                  target='_blank'
+                >
+                  <IconDownload size='1rem' />
+                </ActionIcon>
+              </Tooltip>
+            </ActionIcon.Group>
           </Group>
 
-          <DashboardFileType allowZoom file={file as File} password={pw} show />
+          <DashboardFileType allowZoom file={file as unknown as File} password={pw} show />
 
           {mounted && user?.view!.content && (
             <TypographyStylesProvider>
@@ -285,7 +328,7 @@ export default function ViewFileId({
                 dangerouslySetInnerHTML={{
                   __html: sanitize(
                     parseString(user?.view.content, {
-                      file: file as File,
+                      file: file as unknown as File,
                       link: {
                         returned: `${host}${formatRootUrl(filesRoute ?? '/u', file.name!)}`,
                         raw: `${host}/raw/${file.name}`,
@@ -308,8 +351,40 @@ export default function ViewFileId({
   );
 }
 
+const getFile = async (id: string) =>
+  prisma.file.findFirst({
+    where: {
+      name: id as string,
+    },
+    select: {
+      ...fileSelect,
+      password: true,
+      userId: true,
+      thumbnail: {
+        select: {
+          path: true,
+        },
+      },
+      tags: {
+        select: {
+          id: true,
+          name: true,
+          color: true,
+        },
+      },
+
+      Folder: {
+        select: {
+          id: true,
+          public: true,
+          name: true,
+        },
+      },
+    },
+  });
+
 export const getServerSideProps: GetServerSideProps<{
-  file: Partial<File>;
+  file: Partial<NonNullable<Awaited<ReturnType<typeof getFile>>>>;
   password?: boolean;
   pw?: string;
   code: boolean;
@@ -325,22 +400,7 @@ export const getServerSideProps: GetServerSideProps<{
   const { config: libConfig, reloadSettings } = await import('@/lib/config');
   if (!libConfig) await reloadSettings();
 
-  const file = await prisma.file.findFirst({
-    where: {
-      name: id as string,
-    },
-    select: {
-      ...fileSelect,
-      password: true,
-      userId: true,
-      tags: false,
-      thumbnail: {
-        select: {
-          path: true,
-        },
-      },
-    },
-  });
+  const file = await getFile(id as string);
   if (!file || !file.userId) return { notFound: true };
 
   if (file.maxViews && file.views >= file.maxViews) return { notFound: true };
diff --git a/src/server/routes/api/user/index.ts b/src/server/routes/api/user/index.ts
@@ -24,6 +24,8 @@ type Body = {
     enabled?: boolean;
     align?: 'left' | 'center' | 'right';
     showMimetype?: boolean;
+    showTags?: boolean;
+    showFolder?: boolean;
   };
 };
 
@@ -73,6 +75,10 @@ export default fastifyPlugin(
               ...(req.body.view.showMimetype !== undefined && {
                 showMimetype: req.body.view.showMimetype || false,
               }),
+              ...(req.body.view.showTags !== undefined && { showTags: req.body.view.showTags || false }),
+              ...(req.body.view.showFolder !== undefined && {
+                showFolder: req.body.view.showFolder || false,
+              }),
             },
           }),
         },
