basic file sharing

frontend/components/SharesTable.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import { toast } from 'vue-sonner';
+import { deleteShare } from '~/lib/api/shares';
+import type { Share } from '~/shared/types/shares';
+
+const { shares } = defineProps<{
+    shares: Share[];
+}>();
+
+function onCopyClicked(share: Share) {
+    const link = getShareLink(share);
+    if (copyToClipboard(link)) {
+        toast.success('Share', {
+            description: 'Copied the link to the clipboard',
+        });
+    } else {
+        console.log(`Here's the link to ${share.path}: ${link}`);
+        toast.error('Share', {
+            description: `Failed to copy the link to the clipboard. Logged it to the console instead.`,
+        });
+    }
+}
+
+async function onDeleteClicked(share: Share) {
+    const result = await deleteShare(share.warrenId, share.id);
+
+    if (result.success) {
+        refreshNuxtData('current-file-shares');
+        toast.success('Share', {
+            description: `Successfully deleted the share for ${result.share.path}`,
+        });
+    } else {
+        toast.error('Share', {
+            description: 'Failed to delete share',
+        });
+    }
+}
+</script>
+
+<template>
+    <Table>
+        <TableHeader>
+            <TableRow>
+                <TableHead class="w-[100px]">ID</TableHead>
+                <TableHead>Password</TableHead>
+                <TableHead>Expiration</TableHead>
+                <TableHead>Created</TableHead>
+                <TableHead class="w-0 text-right">Actions</TableHead>
+            </TableRow>
+        </TableHeader>
+        <TableBody>
+            <TableRow v-for="share in shares" :key="share.id">
+                <TableCell class="font-medium" :title="share.id">
+                    <span class="hidden sm:block">
+                        {{ share.id }}
+                    </span>
+                    <span class="block sm:hidden"
+                        >{{ share.id.slice(0, 3) }}...{{ share.id.slice(-3) }}
+                    </span>
+                </TableCell>
+                <TableCell>{{ share.password ? 'Yes' : 'No' }}</TableCell>
+                <TableCell>{{
+                    share.expiresAt == null
+                        ? 'Never'
+                        : $dayjs(share.expiresAt).format('MMM D, YYYY HH:mm')
+                }}</TableCell>
+                <TableCell>{{
+                    $dayjs(share.createdAt).format('MMM D, YYYY HH:mm')
+                }}</TableCell>
+                <TableCell>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        @click="() => onCopyClicked(share)"
+                        ><Icon name="lucide:copy"
+                    /></Button>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        @click="() => onDeleteClicked(share)"
+                        ><Icon name="lucide:trash-2"
+                    /></Button>
+                </TableCell>
+            </TableRow>
+        </TableBody>
+    </Table>
+</template>