fix: various small fixes

diced · diced · commit 523219273a38 · 2024-11-14T15:34:32.000-08:00
diff --git a/src/components/file/DashboardFile/FileModal.tsx b/src/components/file/DashboardFile/FileModal.tsx
@@ -48,7 +48,7 @@ import {
   IconUpload,
 } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
-import useSWR from 'swr';
+import useSWR, { mutate } from 'swr';
 import DashboardFileType from '../DashboardFileType';
 import {
   addToFolder,
@@ -157,6 +157,7 @@ export default function FileModal({
     }
 
     mutateFiles();
+    mutate('/api/user/tags');
   };
 
   const triggerSave = async () => {
diff --git a/src/components/pages/files/PendingFilesButton.tsx b/src/components/pages/files/PendingFilesButton.tsx
@@ -1,7 +1,19 @@
 import { Response } from '@/lib/api/response';
 import { IncompleteFile } from '@/lib/db/models/incompleteFile';
 import { fetchApi } from '@/lib/fetchApi';
-import { ActionIcon, Badge, Button, Card, Group, Modal, Stack, Text, Title, Tooltip } from '@mantine/core';
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Card,
+  Group,
+  Modal,
+  Paper,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { IncompleteFileStatus } from '@prisma/client';
 import { IconFileDots, IconTrashFilled } from '@tabler/icons-react';
@@ -118,7 +130,11 @@ export default function PendingFilesButton() {
             </Card>
           ))}
 
-          {incompleteFiles?.length === 0 && <Text>Nothing here!</Text>}
+          {incompleteFiles?.length === 0 && (
+            <Paper withBorder px='sm' py='xs'>
+              No pending files
+            </Paper>
+          )}
         </Stack>
       </Modal>
 
diff --git a/src/components/pages/files/tags/CreateTagModal.tsx b/src/components/pages/files/tags/CreateTagModal.tsx
@@ -2,7 +2,7 @@ import { Response } from '@/lib/api/response';
 import { Tag } from '@/lib/db/models/tag';
 import { fetchApi } from '@/lib/fetchApi';
 import { colorHash } from '@/lib/theme/color';
-import { ActionIcon, Button, ColorInput, Modal, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Button, ColorInput, Modal, Stack, TextInput, Title, Tooltip } from '@mantine/core';
 import { hasLength, useForm } from '@mantine/form';
 import { showNotification } from '@mantine/notifications';
 import { IconTag, IconTagOff, IconTextRecognition } from '@tabler/icons-react';
@@ -61,10 +61,6 @@ export default function CreateTagModal({ open, onClose }: { open: boolean; onClo
 
   return (
     <Modal opened={open} onClose={onClose} title={<Title>Create new tag</Title>} zIndex={3000}>
-      <Text size='sm' c='dimmed'>
-        Create a new tag that can be applied to files
-      </Text>
-
       <form onSubmit={form.onSubmit(onSubmit)}>
         <Stack gap='sm'>
           <TextInput label='Name' placeholder='Enter a name...' {...form.getInputProps('name')} />
diff --git a/src/components/pages/files/tags/TagsButton.tsx b/src/components/pages/files/tags/TagsButton.tsx
@@ -1,6 +1,6 @@
 import { Response } from '@/lib/api/response';
 import { Tag } from '@/lib/db/models/tag';
-import { ActionIcon, Group, Modal, Stack, Text, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Group, Modal, Paper, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { IconPencil, IconPlus, IconTagOff, IconTags, IconTrashFilled } from '@tabler/icons-react';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -10,6 +10,7 @@ import { fetchApi } from '@/lib/fetchApi';
 import { showNotification } from '@mantine/notifications';
 import CreateTagModal from './CreateTagModal';
 import EditTagModal from './EditTagModal';
+import { mutateFiles } from '@/components/file/actions';
 
 export default function TagsButton() {
   const router = useRouter();
@@ -40,6 +41,7 @@ export default function TagsButton() {
     }
 
     mutate();
+    mutateFiles();
   };
 
   useEffect(() => {
@@ -77,21 +79,31 @@ export default function TagsButton() {
                   <TagPill tag={tag} />
 
                   <Text size='sm' c='dimmed'>
-                    {tag.files!.length} files
+                    {tag.files!.length} file{tag.files!.length === 1 ? '' : 's'}
                   </Text>
                 </Group>
 
                 <Group>
-                  <ActionIcon variant='outline' onClick={() => setSelectedTag(tag)}>
-                    <IconPencil size='1rem' />
-                  </ActionIcon>
+                  <Tooltip label='Edit tag'>
+                    <ActionIcon variant='outline' onClick={() => setSelectedTag(tag)}>
+                      <IconPencil size='1rem' />
+                    </ActionIcon>
+                  </Tooltip>
 
-                  <ActionIcon variant='outline' color='red' onClick={() => handleDelete(tag)}>
-                    <IconTrashFilled size='1rem' />
-                  </ActionIcon>
+                  <Tooltip label='Delete tag'>
+                    <ActionIcon variant='outline' color='red' onClick={() => handleDelete(tag)}>
+                      <IconTrashFilled size='1rem' />
+                    </ActionIcon>
+                  </Tooltip>
                 </Group>
               </Group>
             ))}
+
+          {tags?.length === 0 && (
+            <Paper withBorder px='sm' py='xs'>
+              No tags. Create one by clicking the plus icon.
+            </Paper>
+          )}
         </Stack>
       </Modal>
 
diff --git a/src/components/pages/files/views/FileTable.tsx b/src/components/pages/files/views/FileTable.tsx
@@ -430,9 +430,8 @@ export default function FileTable({ id }: { id?: string }) {
             {
               accessor: 'actions',
               textAlign: 'right',
-              width: 45 * 4,
               render: (file) => (
-                <Group gap='sm'>
+                <Group gap='sm' justify='right' wrap='nowrap'>
                   <Tooltip label='More details'>
                     <ActionIcon>
                       <IconFile size='1rem' />
@@ -491,6 +490,7 @@ export default function FileTable({ id }: { id?: string }) {
           onCellClick={({ record }) => setSelectedFile(record)}
           selectedRecords={selectedFiles}
           onSelectedRecordsChange={setSelectedFiles}
+          paginationText={({ from, to, totalRecords }) => `${from} - ${to} / ${totalRecords} files`}
         />
       </Box>
     </>
diff --git a/src/components/pages/folders/views/FolderTableView.tsx b/src/components/pages/folders/views/FolderTableView.tsx
@@ -86,9 +86,9 @@ export default function FolderTableView() {
             },
             {
               accessor: 'actions',
-              width: 45 * 4,
+              textAlign: 'right',
               render: (folder) => (
-                <Group gap='sm'>
+                <Group gap='sm' justify='right' wrap='nowrap'>
                   <Tooltip label='View files'>
                     <ActionIcon
                       onClick={(e) => {
diff --git a/src/components/pages/invites/views/InviteTableView.tsx b/src/components/pages/invites/views/InviteTableView.tsx
@@ -87,9 +87,9 @@ export default function InviteTableView() {
             },
             {
               accessor: 'actions',
-              width: 45 * 2,
+              textAlign: 'right',
               render: (invite) => (
-                <Group gap='sm'>
+                <Group gap='sm' justify='right' wrap='nowrap'>
                   <Tooltip label='Copy invite link'>
                     <ActionIcon
                       onClick={(e) => {
diff --git a/src/components/pages/settings/parts/SettingsDashboard.tsx b/src/components/pages/settings/parts/SettingsDashboard.tsx
@@ -22,6 +22,12 @@ export default function SettingsDashboard() {
   const [settings, update] = useSettingsStore((state) => [state.settings, state.update]);
   const themes = useThemes();
 
+  const sortedThemes = themes.sort((a, b) => {
+    if (a.colorScheme === 'light' && b.colorScheme === 'dark') return -1;
+    if (a.colorScheme === 'dark' && b.colorScheme === 'light') return 1;
+    return 0;
+  });
+
   return (
     <Paper withBorder p='sm'>
       <Title order={2}>Dashboard Settings</Title>
@@ -62,7 +68,7 @@ export default function SettingsDashboard() {
           description='The theme to use for the dashboard. This is only a visual change on your browser and does not change the theme for other users.'
           data={[
             { value: 'system', label: 'System' },
-            ...themes.map((theme) => ({ value: theme.id, label: theme.name })),
+            ...sortedThemes.map((theme) => ({ value: theme.id, label: theme.name })),
           ]}
           value={settings.theme}
           onChange={(value) => update('theme', value ?? 'builtin:dark_gray')}
diff --git a/src/components/pages/urls/views/UrlTableView.tsx b/src/components/pages/urls/views/UrlTableView.tsx
@@ -255,9 +255,9 @@ export default function UrlTableView() {
             },
             {
               accessor: 'actions',
-              width: 45 * 3,
+              textAlign: 'right',
               render: (url) => (
-                <Group gap='sm'>
+                <Group gap='sm' justify='right' wrap='nowrap'>
                   <Tooltip label='Copy URL'>
                     <ActionIcon
                       onClick={(e) => {
diff --git a/src/components/pages/users/views/UserTableView.tsx b/src/components/pages/users/views/UserTableView.tsx
@@ -81,9 +81,9 @@ export default function UserTableView() {
             },
             {
               accessor: 'actions',
-              width: 45 * 3,
+              textAlign: 'right',
               render: (user) => (
-                <Group gap='sm'>
+                <Group gap='sm' justify='right' wrap='nowrap'>
                   <Tooltip label="View user's files">
                     <ActionIcon
                       component={Link}
