feat: color previews

src/app/embeds/session/page.tsx

@@ -209,14 +209,7 @@ export default function SessionPage() {
                 <Breakdown.Row
                   color={session.color}
                   minimized={!session.showCareer}
-                  title={`Since ${since.toLocaleString(undefined, {
-                    hour: 'numeric',
-                    minute: 'numeric',
-                    hour12: true,
-                    month: 'short',
-                    year: 'numeric',
-                    day: 'numeric',
-                  })}`}
+                  title={session.title}
                   stats={session.customColumns.map((customColumn) => {
                     const rowStat = totalRowStats[customColumn.display];
 

src/app/tools/session/components/Menu.tsx

@@ -1,9 +1,12 @@
-import { ContextMenu, DropdownMenu } from '@radix-ui/themes';
+import { ContextMenu, DropdownMenu, Flex } from '@radix-ui/themes';
+import { createColors } from 'bepaint';
+import { useState } from 'react';
 import {
   ACCENT_COLORS,
   AccentColor,
   GRAY_COLORS,
   GrayColor,
+  PALETTES,
 } from '../../../../constants/radixColors';
 import { useSession } from '../../../../stores/session';
 import { CustomColumn } from './CustomColumn';
@@ -15,6 +18,7 @@ interface ContextMenuProps {
 
 export function Menu({ Builder, reset }: ContextMenuProps) {
   const session = useSession();
+  const [showTitleEditor, setShowTitleEditor] = useState(false);
 
   return (
     <Builder.Content>
@@ -29,9 +33,20 @@ export function Menu({ Builder, reset }: ContextMenuProps) {
             }
           >
             {[...ACCENT_COLORS, ...GRAY_COLORS].map((color) => (
-              <Builder.RadioItem value={color}>{`${color
-                .charAt(0)
-                .toUpperCase()}${color.slice(1)}`}</Builder.RadioItem>
+              <Builder.RadioItem value={color} key={color}>
+                <Flex gap="2" align="center">
+                  <div
+                    style={{
+                      backgroundColor: createColors(PALETTES[color])
+                        .solidBackground,
+                      width: 16,
+                      height: 16,
+                      borderRadius: '100%',
+                    }}
+                  />
+                  {`${color.charAt(0).toUpperCase()}${color.slice(1)}`}
+                </Flex>
+              </Builder.RadioItem>
             ))}
           </Builder.RadioGroup>
         </Builder.SubContent>

src/stores/session.ts

@@ -22,6 +22,7 @@ type Session = (
       time: number;
     }
 ) & {
+  title: string;
   resetPrompt: boolean;
   embedPrompt: boolean;
   customColumns: {
@@ -68,6 +69,7 @@ export const useSession = create<Session>()(
   devtools(
     persist(
       (set) => ({
+        title: 'Untitled session',
         isTracking: false,
         resetPrompt: true,
         showTotal: true,