feat: session tracker themeing

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

@@ -23,8 +23,6 @@ export function CustomColumn({ column, Builder }: CustomColumn) {
       <Builder.SubTrigger>Column {column + 1}</Builder.SubTrigger>
 
       <Builder.SubContent>
-        <Builder.Label>Display</Builder.Label>
-
         <Builder.RadioGroup
           value={customColumn.display}
           onValueChange={(event) =>

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

@@ -1,4 +1,10 @@
 import { ContextMenu, DropdownMenu } from '@radix-ui/themes';
+import {
+  ACCENT_COLORS,
+  AccentColor,
+  GRAY_COLORS,
+  GrayColor,
+} from '../../../../constants/radixColors';
 import { useSession } from '../../../../stores/session';
 import { CustomColumn } from './CustomColumn';
 
@@ -12,6 +18,27 @@ export function Menu({ Builder, reset }: ContextMenuProps) {
 
   return (
     <Builder.Content>
+      <Builder.Sub>
+        <Builder.SubTrigger>Accent color</Builder.SubTrigger>
+
+        <Builder.SubContent>
+          <Builder.RadioGroup
+            value={session.color}
+            onValueChange={(value) =>
+              useSession.setState({ color: value as AccentColor | GrayColor })
+            }
+          >
+            {[...ACCENT_COLORS, ...GRAY_COLORS].map((color) => (
+              <Builder.RadioItem value={color}>{`${color
+                .charAt(0)
+                .toUpperCase()}${color.slice(1)}`}</Builder.RadioItem>
+            ))}
+          </Builder.RadioGroup>
+        </Builder.SubContent>
+      </Builder.Sub>
+
+      <Builder.Separator />
+
       <CustomColumn Builder={Builder} column={0} />
       <CustomColumn Builder={Builder} column={1} />
       <CustomColumn Builder={Builder} column={2} />