|
1 | 1 | <script lang="ts"> |
2 | 2 | import Plus from '@lucide/svelte/icons/plus'; |
3 | 3 | import RotateCcw from '@lucide/svelte/icons/rotate-ccw'; |
4 | | - import type { SortingState } from '@tanstack/table-core'; |
5 | | - import type { ColumnDef } from '@tanstack/table-core'; |
| 4 | + import Link2 from '@lucide/svelte/icons/link-2'; |
| 5 | + import Clock from '@lucide/svelte/icons/clock'; |
| 6 | + import CircleAlert from '@lucide/svelte/icons/circle-alert'; |
| 7 | + import Infinity_ from '@lucide/svelte/icons/infinity'; |
6 | 8 | import { goto } from '$app/navigation'; |
7 | 9 | import { resolve } from '$app/paths'; |
8 | 10 | import { shareLinksList } from '$lib/api'; |
9 | 11 | import type { OwnPublicShareResponse } from '$lib/api'; |
10 | 12 | import Container from '$lib/components/Container.svelte'; |
11 | | - import { |
12 | | - CreateActionsColumnDef, |
13 | | - CreateSortableColumnDef, |
14 | | - LocaleDateTimeRenderer, |
15 | | - RenderCell, |
16 | | - TimeSinceRelativeOrNeverRenderer, |
17 | | - } from '$lib/components/Table/ColumnUtils'; |
18 | | - import DataTable from '$lib/components/Table/DataTableTemplate.svelte'; |
| 13 | + import CopyInput from '$lib/components/CopyInput.svelte'; |
| 14 | + import LoadingCircle from '$lib/components/svg/LoadingCircle.svelte'; |
19 | 15 | import Button from '$lib/components/ui/button/button.svelte'; |
20 | 16 | import { handleApiError } from '$lib/errorhandling/apiErrorHandling'; |
| 17 | + import { durationBetween, formatDuration, formatElapsed } from '$lib/utils'; |
| 18 | + import { getSiteShortURL } from '$lib/utils/url'; |
21 | 19 | import { onMount } from 'svelte'; |
22 | 20 | import DataTableActions from './data-table-actions.svelte'; |
23 | 21 | import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte'; |
|
26 | 24 |
|
27 | 25 | registerBreadcrumbs(() => [{ label: 'Public Shares' }]); |
28 | 26 |
|
29 | | - const columns: ColumnDef<OwnPublicShareResponse>[] = [ |
30 | | - CreateSortableColumnDef('name', 'Name', RenderCell), |
31 | | - CreateSortableColumnDef('createdOn', 'Created at', LocaleDateTimeRenderer), |
32 | | - CreateSortableColumnDef('expiresOn', 'Expires', TimeSinceRelativeOrNeverRenderer), |
33 | | - CreateActionsColumnDef(DataTableActions, (publicShare) => ({ |
34 | | - publicShare, |
35 | | - onChange: refreshPublicShares, |
36 | | - })), |
37 | | - ]; |
38 | | -
|
39 | 27 | let data = $state<OwnPublicShareResponse[]>([]); |
40 | | - let sorting = $state<SortingState>([]); |
41 | | -
|
| 28 | + let loading = $state(true); |
42 | 29 | let showAddShareModal = $state<boolean>(false); |
43 | 30 |
|
| 31 | + const sortedShares = $derived( |
| 32 | + [...data].sort((a, b) => b.createdOn.epochMilliseconds - a.createdOn.epochMilliseconds) |
| 33 | + ); |
| 34 | +
|
44 | 35 | function refreshPublicShares() { |
| 36 | + loading = true; |
45 | 37 | shareLinksList() |
46 | 38 | .then((publicShares) => { |
47 | 39 | if (publicShares.data === null) { |
|
50 | 42 | } |
51 | 43 | data = publicShares.data; |
52 | 44 | }) |
53 | | - .catch(handleApiError); |
| 45 | + .catch(handleApiError) |
| 46 | + .finally(() => { |
| 47 | + loading = false; |
| 48 | + }); |
| 49 | + } |
| 50 | +
|
| 51 | + const expiryToneClasses = { |
| 52 | + neutral: 'text-muted-foreground ring-border', |
| 53 | + warning: 'text-amber-600 dark:text-amber-400 ring-amber-500/30', |
| 54 | + danger: 'text-red-600 dark:text-red-400 ring-red-500/30', |
| 55 | + } as const; |
| 56 | +
|
| 57 | + function expiryInfo(expiresOn: Temporal.Instant | null | undefined) { |
| 58 | + if (!expiresOn) { |
| 59 | + return { label: 'Never expires', tone: 'neutral' as const }; |
| 60 | + } |
| 61 | + const now = Temporal.Now.instant(); |
| 62 | + const isExpired = expiresOn.epochMilliseconds <= now.epochMilliseconds; |
| 63 | + if (isExpired) { |
| 64 | + return { label: 'Expired', tone: 'danger' as const }; |
| 65 | + } |
| 66 | + return { |
| 67 | + label: 'Expires ' + formatDuration(durationBetween(now, expiresOn)), |
| 68 | + tone: 'warning' as const, |
| 69 | + }; |
54 | 70 | } |
55 | 71 |
|
56 | 72 | onMount(() => { |
|
61 | 77 | <CreatePublicShareDialog bind:open={showAddShareModal} onCreated={refreshPublicShares} /> |
62 | 78 |
|
63 | 79 | <Container> |
64 | | - <PageHeader |
65 | | - title="Public Shares" |
66 | | - subtitle="Think of them like a link that |
67 | | - anyone can access" |
68 | | - > |
| 80 | + <PageHeader title="Public Shares" subtitle="A link anyone can use — no account required."> |
| 81 | + <Button size="icon" variant="outline" onclick={refreshPublicShares} title="Refresh"> |
| 82 | + <RotateCcw /> |
| 83 | + </Button> |
69 | 84 | <Button onclick={() => (showAddShareModal = true)}> |
70 | 85 | <Plus /> |
71 | | - Add Share |
72 | | - </Button> |
73 | | - <Button size="icon" variant="outline" onclick={refreshPublicShares}> |
74 | | - <RotateCcw /> |
| 86 | + New Share |
75 | 87 | </Button> |
76 | 88 | </PageHeader> |
77 | | - <div class="w-full overflow-auto"> |
78 | | - <DataTable |
79 | | - {data} |
80 | | - {columns} |
81 | | - {sorting} |
82 | | - onRowClick={(clicked) => goto(resolve(`/shares/public/${clicked.id}`))} |
83 | | - /> |
84 | | - </div> |
| 89 | + |
| 90 | + {#if loading && data.length === 0} |
| 91 | + <div class="flex h-64 w-full items-center justify-center"> |
| 92 | + <LoadingCircle /> |
| 93 | + </div> |
| 94 | + {:else if sortedShares.length === 0} |
| 95 | + <div |
| 96 | + class="border-border/60 text-muted-foreground flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed py-16" |
| 97 | + > |
| 98 | + <Link2 class="size-10 opacity-50" /> |
| 99 | + <div class="text-center"> |
| 100 | + <p class="text-foreground text-sm font-medium">No public shares yet</p> |
| 101 | + <p class="mt-1 text-xs">Create a link that anyone can use to control your shockers.</p> |
| 102 | + </div> |
| 103 | + <Button onclick={() => (showAddShareModal = true)} size="sm"> |
| 104 | + <Plus /> |
| 105 | + New Share |
| 106 | + </Button> |
| 107 | + </div> |
| 108 | + {:else} |
| 109 | + <div |
| 110 | + class="grid w-full grid-cols-1 gap-4 sm:[grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))]" |
| 111 | + > |
| 112 | + {#each sortedShares as share (share.id)} |
| 113 | + {@const url = getSiteShortURL(`/s/${share.id}`)} |
| 114 | + {@const exp = expiryInfo(share.expiresOn)} |
| 115 | + <div |
| 116 | + role="button" |
| 117 | + tabindex="0" |
| 118 | + onclick={() => goto(resolve(`/shares/public/${share.id}`))} |
| 119 | + onkeydown={(e) => { |
| 120 | + if (e.key === 'Enter' || e.key === ' ') { |
| 121 | + e.preventDefault(); |
| 122 | + goto(resolve(`/shares/public/${share.id}`)); |
| 123 | + } |
| 124 | + }} |
| 125 | + class="border-border/60 bg-card hover:border-primary/40 hover:bg-accent/30 group mx-auto flex w-full max-w-md cursor-pointer flex-col gap-3 rounded-lg border p-4 text-left transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none sm:mx-0 sm:max-w-none" |
| 126 | + > |
| 127 | + <div class="flex items-start justify-between gap-2"> |
| 128 | + <h2 class="min-w-0 flex-1 truncate text-base font-semibold" title={share.name}> |
| 129 | + {share.name} |
| 130 | + </h2> |
| 131 | + <!-- Stop click bubbling so menu items don't trigger row navigate --> |
| 132 | + <div |
| 133 | + role="presentation" |
| 134 | + onclick={(e) => e.stopPropagation()} |
| 135 | + onkeydown={(e) => e.stopPropagation()} |
| 136 | + class="shrink-0" |
| 137 | + > |
| 138 | + <DataTableActions publicShare={share} onChange={refreshPublicShares} /> |
| 139 | + </div> |
| 140 | + </div> |
| 141 | + |
| 142 | + <div role="presentation" onclick={(e) => e.stopPropagation()}> |
| 143 | + <CopyInput value={url.href} displayValue={url.host + url.pathname} /> |
| 144 | + </div> |
| 145 | + |
| 146 | + <div |
| 147 | + class="text-muted-foreground mt-auto flex items-center justify-between gap-2 pt-1 text-xs" |
| 148 | + > |
| 149 | + <span class="flex items-center gap-1.5" title={share.createdOn.toString()}> |
| 150 | + <Clock class="size-3.5" /> |
| 151 | + {formatElapsed(durationBetween(Temporal.Now.instant(), share.createdOn))} |
| 152 | + </span> |
| 153 | + <span |
| 154 | + class="flex items-center gap-1.5 rounded-full px-2 py-0.5 ring-1 ring-inset {expiryToneClasses[ |
| 155 | + exp.tone |
| 156 | + ]}" |
| 157 | + title={share.expiresOn?.toString() ?? 'No expiry'} |
| 158 | + > |
| 159 | + {#if exp.tone === 'neutral'} |
| 160 | + <Infinity_ class="size-3.5" /> |
| 161 | + {:else if exp.tone === 'danger'} |
| 162 | + <CircleAlert class="size-3.5" /> |
| 163 | + {:else} |
| 164 | + <Clock class="size-3.5" /> |
| 165 | + {/if} |
| 166 | + {exp.label} |
| 167 | + </span> |
| 168 | + </div> |
| 169 | + </div> |
| 170 | + {/each} |
| 171 | + </div> |
| 172 | + {/if} |
85 | 173 | </Container> |
0 commit comments