feat: better dates in library table

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.4.100",
+	"version": "6.4.101",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.15.5",

src/lib/components/ui/player/options.svelte

@@ -218,11 +218,11 @@
           </Tree.Item>
           <Tree.Item>
             <span slot='trigger'>Playlist</span>
-            <Tree.Sub class='w-auto max-w-96'>
+            <Tree.Sub class='w-auto max-w-xl'>
               {#each videoFiles as file, i (i)}
                 <Tree.Item on:click={() => selectFile(file)}>
                   <Tooltip.Root>
-                    <Tooltip.Trigger class='text-ellipsis text-nowrap overflow-clip w-full' tabindex={-1}>
+                    <Tooltip.Trigger class='text-ellipsis text-nowrap overflow-clip w-full text-xs text-left' tabindex={-1}>
                       {file.name}
                     </Tooltip.Trigger>
                     <Tooltip.Content>

src/lib/components/ui/torrentclient/library/cells/date.svelte

@@ -1,5 +1,28 @@
 <script lang='ts'>
+  import ClockFading from 'lucide-svelte/icons/clock-fading'
+
+  import * as Tooltip from '$lib/components/ui/tooltip'
+  import { cn } from '$lib/utils'
+
   export let value: number
+
+  const day = 24 * 60 * 60 * 1000 // milliseconds in a day
+
+  $: date = new Date(value)
+
+  $: moreThan30Days = date.getTime() < Date.now() - 30 * day
+  $: moreThan21Days = date.getTime() < Date.now() - 21 * day
 </script>
 
-<div class='text-sm'>{new Date(value).toLocaleDateString()}</div>
+{#if moreThan30Days || moreThan21Days}
+  <Tooltip.Root>
+    <Tooltip.Trigger class={cn('text-sm flex items-center gap-1', moreThan30Days && '!text-red-400', moreThan21Days && 'text-yellow-200')}>
+      <ClockFading class='w-4 h-4' />{value ? date.toLocaleDateString() : '?'}
+    </Tooltip.Trigger>
+    <Tooltip.Content class='whitespace-pre-wrap'>
+      {moreThan30Days ? 'Played more than 30 days ago.\nCached metadata might have expired.\nPlay this torrent again to refresh.' : 'Played more than 21 days ago.\nCached metadata might soon expire.'}
+    </Tooltip.Content>
+  </Tooltip.Root>
+{:else}
+  <div class={cn('text-sm', moreThan30Days && '!text-red-400', moreThan21Days && 'text-yellow-200')}>{value ? date.toLocaleDateString() : '?'}</div>
+{/if}

src/lib/components/ui/torrentclient/library/cells/index.ts

@@ -1,3 +1,4 @@
 export { default as StatusCell } from './status.svelte'
 export { default as NameCell } from './name.svelte'
 export { default as MediaCell } from './mediatitle.svelte'
+export { default as DateCell } from './date.svelte'

src/lib/components/ui/torrentclient/library/table.svelte

@@ -4,7 +4,7 @@
 
   import Columnheader from '../columnheader.svelte'
 
-  import { MediaCell, NameCell, StatusCell } from './cells'
+  import { MediaCell, NameCell, StatusCell, DateCell } from './cells'
 
   import type { LibraryEntry } from 'native'
 
@@ -55,7 +55,7 @@
       header: 'Date',
       id: 'date',
       plugins: { sort: { getSortValue: e => e ?? 0 } },
-      cell: ({ value }) => value ? new Date(value).toLocaleDateString() : '?'
+      cell: ({ value }) => value ? createRender(DateCell, { value }) : '?'
     }),
     table.column({
       accessor: e => e?.name ?? e.hash,