From 53feae0f8c6995e3ce37ffd3636822caa6c83743 Mon Sep 17 00:00:00 2001
From: FoxxMD <FoxxMD@users.noreply.github.com>
Date: Wed, 18 Mar 2026 19:04:51 +0000
Subject: [PATCH] more imrovements

---
 src/client/components/DateDisplay.tsx | 14 ++++++++++
 src/client/components/List.tsx        | 38 ++++++++++++++++-----------
 src/client/components/TextMuted.tsx   | 11 ++++++++
 src/stories/List.stories.tsx          |  7 +++--
 4 files changed, 53 insertions(+), 17 deletions(-)
 create mode 100644 src/client/components/DateDisplay.tsx
 create mode 100644 src/client/components/TextMuted.tsx

diff --git a/src/client/components/DateDisplay.tsx b/src/client/components/DateDisplay.tsx
new file mode 100644
index 00000000..51072b78
--- /dev/null
+++ b/src/client/components/DateDisplay.tsx
@@ -0,0 +1,14 @@
+import { Text } from "@chakra-ui/react"
+import dayjs, {Dayjs} from 'dayjs';
+import { shortTodayAwareFormat } from "../../core/TimeUtils";
+
+export interface DateDisplayProps {
+    date?: string | Dayjs
+    prefix?: string
+}
+export const ShortDateDisplay = (props: DateDisplayProps) => {
+    if(props.date === undefined) {
+        return <Text textStyle="xs" color="fg.muted">(No Date)</Text>
+    }
+    return <Text textStyle="xs" color="fg.muted">{`${props.prefix !== undefined ? `${props.prefix} ` : ''}${shortTodayAwareFormat(typeof props.date === 'string' ? dayjs(props.date) : props.date)}`}</Text>
+}
\ No newline at end of file
diff --git a/src/client/components/List.tsx b/src/client/components/List.tsx
index fd94ff88..1ce1e981 100644
--- a/src/client/components/List.tsx
+++ b/src/client/components/List.tsx
@@ -1,4 +1,10 @@
-import { Accordion, For, Span, Stack, Text, Box, AbsoluteCenter, Button } from '@chakra-ui/react';
+import { Accordion, For, Span, Stack, Text, Box, AbsoluteCenter, Button, Separator, HStack } from '@chakra-ui/react';
+import { JsonPlayObject } from '../../core/Atomic';
+import { ShortDateDisplay } from './DateDisplay';
+import { truncateStringToLength } from '../../core/StringUtils';
+import { TextMuted } from './TextMuted';
+
+const shortArtist = truncateStringToLength(20);
 
 const items = [
   { value: 'a', title: 'First Item', text: 'Some value 1..' },
@@ -6,23 +12,26 @@ const items = [
   { value: 'c', title: 'Third Item', text: 'Some value 3...' },
 ];
 
+export interface ActivityLogProps {
+  plays: JsonPlayObject[]
+}
+
+// shortArtist(item.data.artists.join(' / '))
 
-export const CList = (props) =>
-(
-  <Stack gap="8">
+export const CList = (props: ActivityLogProps) => {
+  return (
     <Stack gap="2">
       <Text fontWeight="semibold">Today</Text>
-      <Accordion.Root variant="enclosed" collapsible defaultValue={['b']}>
-        {items.map((item, index) => (
-          <Accordion.Item key={index} value={item.value}>
+      <Accordion.Root variant="enclosed" collapsible>
+        {props.plays.map((item, index) => (
+          <Accordion.Item key={index} value={index.toString()}>
             <Box position="relative">
               <Accordion.ItemTrigger>
                 <Accordion.ItemIndicator />
                 <Stack gap="1">
-                  <Span flex="1">{item.title}</Span>
-                  <Text fontSize="sm" color="fg.muted">
-                    Click to expand
-                  </Text>
+                  <Span flex="1">{item.data.track}</Span>
+                  <TextMuted overflow="hidden" textOverflow="ellipsis">{item.data.artists.join(' / ')}</TextMuted>
+                  <HStack gap="1"><ShortDateDisplay date={item.data.playDate} prefix="Played"/><Separator orientation="vertical" height="4" /><TextMuted>{item.meta?.source}</TextMuted></HStack>
                 </Stack>
               </Accordion.ItemTrigger>
               <AbsoluteCenter axis="vertical" insetEnd="0" padding="1em">
@@ -32,12 +41,11 @@ export const CList = (props) =>
               </AbsoluteCenter>
             </Box>
             <Accordion.ItemContent>
-              <Accordion.ItemBody borderTopColor="gray.border" borderTopWidth="1px">{item.text}</Accordion.ItemBody>
+              <Accordion.ItemBody borderTopColor="gray.border" borderTopWidth="1px">{item.data.track}</Accordion.ItemBody>
             </Accordion.ItemContent>
           </Accordion.Item>
         ))}
       </Accordion.Root>
     </Stack>
-  </Stack>
-
-);
\ No newline at end of file
+  );
+}
\ No newline at end of file
diff --git a/src/client/components/TextMuted.tsx b/src/client/components/TextMuted.tsx
new file mode 100644
index 00000000..2812768f
--- /dev/null
+++ b/src/client/components/TextMuted.tsx
@@ -0,0 +1,11 @@
+import { Text as ChakraText } from "@chakra-ui/react"
+import { ComponentProps } from "react"
+
+export const TextMuted = (props: ComponentProps<typeof ChakraText>) => {
+    const {
+        children,
+        ...rest
+    } = props;
+    return <ChakraText textStyle="xs" color="fg.muted" {...rest}>{props.children}
+    </ChakraText>
+}
\ No newline at end of file
diff --git a/src/stories/List.stories.tsx b/src/stories/List.stories.tsx
index d6b8e989..fe983db0 100644
--- a/src/stories/List.stories.tsx
+++ b/src/stories/List.stories.tsx
@@ -4,6 +4,9 @@ import React from 'react';
 import { fn } from 'storybook/test';
 import { CList } from "../client/components/List";
 import {Provider} from "../client/components/Provider";
+import { generateJsonPlays } from "../backend/tests/utils/PlayTestUtils.js";
+
+
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = preview.meta({
@@ -16,8 +19,8 @@ const meta = preview.meta({
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
+  args: {
+     plays: generateJsonPlays(2, undefined, {source: 'Spotify'}),
   },
 decorators: [
     (Story) => (<Provider><Story/></Provider>),
-- 
2.51.2