fix: better icons on file vie2

src/components/File.tsx

@@ -1,4 +1,16 @@
-import { Button, Card, Group, LoadingOverlay, Modal, Stack, Text, Title, Tooltip } from '@mantine/core';
+import {
+  ActionIcon,
+  Card,
+  Group,
+  LoadingOverlay,
+  Modal,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { useFileDelete, useFileFavorite } from 'lib/queries/files';
@@ -10,16 +22,16 @@ import {
   CopyIcon,
   CrossIcon,
   DeleteIcon,
+  DownloadIcon,
   ExternalLinkIcon,
   EyeIcon,
   FileIcon,
   HashIcon,
   ImageIcon,
   StarIcon,
+  InfoIcon,
 } from './icons';
-import Link from './Link';
 import MutedText from './MutedText';
-import Markdown from './render/Markdown';
 import Type from './Type';
 
 export function FileMeta({ Icon, title, subtitle, ...other }) {
@@ -129,7 +141,15 @@ export default function File({ image, disableMediaPreview, exifEnabled }) {
             overrideRender={overrideRender}
             setOverrideRender={setOverrideRender}
           />
-          <Stack>
+          <SimpleGrid
+            my='md'
+            cols={3}
+            breakpoints={[
+              { maxWidth: 600, cols: 1 },
+              { maxWidth: 900, cols: 2 },
+              { maxWidth: 1200, cols: 3 },
+            ]}
+          >
             <FileMeta Icon={FileIcon} title='Name' subtitle={image.file} />
             <FileMeta Icon={ImageIcon} title='Type' subtitle={image.mimetype} />
             <FileMeta Icon={EyeIcon} title='Views' subtitle={image?.views?.toLocaleString()} />
@@ -156,11 +176,66 @@ export default function File({ image, disableMediaPreview, exifEnabled }) {
               />
             )}
             <FileMeta Icon={HashIcon} title='ID' subtitle={image.id} />
-          </Stack>
+          </SimpleGrid>
         </Stack>
 
-        <Group position='right' mt='md'>
-          {exifEnabled && (
+        <Group position='apart' my='md'>
+          <Group position='left'>
+            {exifEnabled && (
+              // <Link href={`/dashboard/metadata/${image.id}`} target='_blank' rel='noopener noreferrer'>
+              //   <Button leftIcon={<ExternalLinkIcon />}>View Metadata</Button>
+              // </Link>
+              <Tooltip label='View Metadata'>
+                <ActionIcon
+                  color='blue'
+                  variant='filled'
+                  onClick={() => window.open(`/dashboard/metadata/${image.id}`, '_blank')}
+                >
+                  <InfoIcon />
+                </ActionIcon>
+              </Tooltip>
+            )}
+          </Group>
+          <Group position='right'>
+            <Tooltip label='Delete file'>
+              <ActionIcon color='red' variant='filled' onClick={handleDelete}>
+                <DeleteIcon />
+              </ActionIcon>
+            </Tooltip>
+
+            <Tooltip label={image.favorite ? 'Unfavorite' : 'Favorite'}>
+              <ActionIcon
+                color={image.favorite ? 'yellow' : 'gray'}
+                variant='filled'
+                onClick={handleFavorite}
+              >
+                <StarIcon />
+              </ActionIcon>
+            </Tooltip>
+
+            <Tooltip label='Open in new tab'>
+              <ActionIcon color='blue' variant='filled' onClick={() => window.open(image.url, '_blank')}>
+                <ExternalLinkIcon />
+              </ActionIcon>
+            </Tooltip>
+
+            <Tooltip label='Copy URL'>
+              <ActionIcon color='blue' variant='filled' onClick={handleCopy}>
+                <CopyIcon />
+              </ActionIcon>
+            </Tooltip>
+
+            <Tooltip label='Download'>
+              <ActionIcon
+                color='blue'
+                variant='filled'
+                onClick={() => window.open(`/r/${image.file}?download=true`, '_blank')}
+              >
+                <DownloadIcon />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+          {/* {exifEnabled && (
             <Link href={`/dashboard/metadata/${image.id}`} target='_blank' rel='noopener noreferrer'>
               <Button leftIcon={<ExternalLinkIcon />}>View Metadata</Button>
             </Link>
@@ -170,7 +245,7 @@ export default function File({ image, disableMediaPreview, exifEnabled }) {
           <Button onClick={handleFavorite}>{image.favorite ? 'Unfavorite' : 'Favorite'}</Button>
           <Link href={image.url} target='_blank'>
             <Button rightIcon={<ExternalLinkIcon />}>Open</Button>
-          </Link>
+          </Link> */}
         </Group>
       </Modal>
       <Card sx={{ maxWidth: '100%', height: '100%' }} shadow='md'>

src/components/Type.tsx

@@ -1,4 +1,15 @@
-import { Alert, Box, Button, Card, Center, Container, Group, Image, Text } from '@mantine/core';
+import {
+  Alert,
+  Box,
+  Button,
+  Card,
+  Center,
+  Container,
+  Group,
+  Image,
+  LoadingOverlay,
+  Text,
+} from '@mantine/core';
 import { Prism } from '@mantine/prism';
 import { useEffect, useState } from 'react';
 import { AudioIcon, FileIcon, ImageIcon, PlayIcon } from './icons';
@@ -35,6 +46,8 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
   const shouldRenderMarkdown = name.endsWith('.md');
   const shouldRenderTex = name.endsWith('.tex');
 
+  const [loading, setLoading] = useState(type === 'text' && popup);
+
   if (type === 'text' && popup) {
     useEffect(() => {
       (async () => {
@@ -42,6 +55,7 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
         const text = await res.text();
 
         setText(text);
+        setLoading(false);
       })();
     }, []);
   }
@@ -90,8 +104,14 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
         audio: <audio autoPlay controls {...props} style={{ width: '100%' }} />,
         text: (
           <>
-            {(shouldRenderMarkdown || shouldRenderTex) && renderRenderAlert()}
-            <PrismCode code={text} ext={name.split('.').pop()} {...props} />
+            {loading ? (
+              <LoadingOverlay visible={loading} />
+            ) : (
+              <>
+                {(shouldRenderMarkdown || shouldRenderTex) && renderRenderAlert()}
+                <PrismCode code={text} ext={name.split('.').pop()} {...props} />
+              </>
+            )}
           </>
         ),
       }[type]

src/components/icons/InfoIcon.tsx

@@ -0,0 +1,5 @@
+import { Info } from 'react-feather';
+
+export default function InfoIcon({ ...props }) {
+  return <Info size={15} {...props} />;
+}

src/components/icons/index.tsx

@@ -34,6 +34,7 @@ import EyeIcon from './EyeIcon';
 import RefreshIcon from './RefreshIcon';
 import KeyIcon from './KeyIcon';
 import DatabaseIcon from './DatabaseIcon';
+import InfoIcon from './InfoIcon';
 
 export {
   ActivityIcon,
@@ -72,4 +73,5 @@ export {
   RefreshIcon,
   KeyIcon,
   DatabaseIcon,
+  InfoIcon,
 };

src/components/pages/Dashboard/StatCards.tsx

@@ -20,7 +20,7 @@ export function StatCards() {
     >
       <StatCard
         stat={{
-          title: 'UPLOADED FILES',
+          title: 'FILES',
           value: stats.isSuccess ? latest.data.count.toLocaleString() : '...',
           desc: 'files have been uploaded',
           icon: <FileIcon />,
@@ -33,7 +33,7 @@ export function StatCards() {
         stat={{
           title: 'STORAGE',
           value: stats.isSuccess ? latest.data.size : '...',
-          desc: 'of storage used',
+          desc: 'used',
           icon: <DatabaseIcon />,
           diff:
             stats.isSuccess && before?.data
@@ -46,7 +46,7 @@ export function StatCards() {
         stat={{
           title: 'VIEWS',
           value: stats.isSuccess ? latest.data.views_count.toLocaleString() : '...',
-          desc: 'total page views',
+          desc: 'total file views',
           icon: <EyeIcon />,
           diff:
             stats.isSuccess && before?.data
@@ -59,7 +59,7 @@ export function StatCards() {
         stat={{
           title: 'USERS',
           value: stats.isSuccess ? latest.data.count_users.toLocaleString() : '...',
-          desc: 'total registered users',
+          desc: 'users',
           icon: <UserIcon />,
         }}
       />