Improve overview rendering with custom colors and graphical details

src/components/design-system/HabitColorPicker.tsx

@@ -38,7 +38,9 @@ export function isHabitColor(value: string) {
 export function HabitColorPicker({
   value,
   onChange,
+  label = "Habit color",
 }: {
+  label?: string;
   value: string;
   onChange: (color: string) => void;
   mode?: "demo" | "create" | "edit";
@@ -50,11 +52,11 @@ export function HabitColorPicker({
   const showCustom = expanded || !valid;
   return (
     <fieldset className="ds-color-picker" aria-describedby={`${id}-hint`}>
-      <legend>Habit color</legend>
+      <legend>{label}</legend>
       <p id={`${id}-hint`} className="ds-visually-hidden">
         Your color adapts to each theme. Custom colors use six-digit hex values, such as #426582.
       </p>
-      <div className="ds-color-swatches" role="group" aria-label="Habit colors">
+      <div className="ds-color-swatches" role="group" aria-label={`${label}s`}>
         {HABIT_COLOR_CHOICES.map((color) => (
           <button key={color} type="button" aria-label={`Color ${color}`} aria-pressed={value.toLowerCase() === color} title={color} onClick={() => onChange(color)}>
             <span style={{ backgroundColor: habitProgressColor(color, 1, theme), color: theme === "dark" ? "#191e1b" : "#ffffff" }}>

src/components/design-system/ItemActions.tsx

@@ -3,7 +3,7 @@ import { Button } from "./primitives";
 
 export function ItemActions({ name, kind, disabled, onEdit, onDelete }: {
   name: string;
-  kind: "habit" | "task";
+  kind: "habit" | "task" | "overview";
   disabled?: boolean;
   onEdit: () => void;
   onDelete: () => void;