master plan implemenattion

frontend/src/config/colors.config.ts

@@ -0,0 +1,162 @@
+/**
+ * Module Color Configuration
+ * Single source of truth for module-specific colors throughout the UI
+ * 
+ * These colors should be used consistently across:
+ * - Module icons
+ * - Progress bars
+ * - Metric cards
+ * - Badges
+ * - Chart segments
+ */
+
+export const MODULE_COLORS = {
+  // Planner Module
+  keywords: {
+    bg: 'bg-brand-500',
+    bgLight: 'bg-brand-50',
+    text: 'text-brand-600',
+    textDark: 'text-brand-700',
+    border: 'border-brand-500',
+    gradient: 'from-brand-500 to-brand-600',
+    hex: '#2C7AA1',
+  },
+  clusters: {
+    bg: 'bg-purple-500',
+    bgLight: 'bg-purple-50',
+    text: 'text-purple-600',
+    textDark: 'text-purple-700',
+    border: 'border-purple-500',
+    gradient: 'from-purple-500 to-purple-600',
+    hex: '#7c3aed',
+  },
+  ideas: {
+    bg: 'bg-purple-600',
+    bgLight: 'bg-purple-50',
+    text: 'text-purple-700',
+    textDark: 'text-purple-800',
+    border: 'border-purple-600',
+    gradient: 'from-purple-600 to-purple-700',
+    hex: '#6d28d9',
+  },
+
+  // Writer Module
+  tasks: {
+    bg: 'bg-success-600',
+    bgLight: 'bg-success-50',
+    text: 'text-success-600',
+    textDark: 'text-success-700',
+    border: 'border-success-600',
+    gradient: 'from-success-500 to-success-600',
+    hex: '#059669',
+  },
+  content: {
+    bg: 'bg-success-500',
+    bgLight: 'bg-success-50',
+    text: 'text-success-600',
+    textDark: 'text-success-700',
+    border: 'border-success-500',
+    gradient: 'from-success-500 to-success-600',
+    hex: '#10b981',
+  },
+  images: {
+    bg: 'bg-purple-500',
+    bgLight: 'bg-purple-50',
+    text: 'text-purple-600',
+    textDark: 'text-purple-700',
+    border: 'border-purple-500',
+    gradient: 'from-purple-500 to-purple-600',
+    hex: '#7c3aed',
+  },
+
+  // Automation
+  automation: {
+    bg: 'bg-brand-500',
+    bgLight: 'bg-brand-50',
+    text: 'text-brand-600',
+    textDark: 'text-brand-700',
+    border: 'border-brand-500',
+    gradient: 'from-brand-500 to-brand-600',
+    hex: '#2C7AA1',
+  },
+
+  // Billing / Credits
+  billing: {
+    bg: 'bg-warning-500',
+    bgLight: 'bg-warning-50',
+    text: 'text-warning-600',
+    textDark: 'text-warning-700',
+    border: 'border-warning-500',
+    gradient: 'from-warning-500 to-warning-600',
+    hex: '#D9A12C',
+  },
+  credits: {
+    bg: 'bg-warning-500',
+    bgLight: 'bg-warning-50',
+    text: 'text-warning-600',
+    textDark: 'text-warning-700',
+    border: 'border-warning-500',
+    gradient: 'from-warning-500 to-warning-600',
+    hex: '#D9A12C',
+  },
+
+  // Status Colors
+  success: {
+    bg: 'bg-success-500',
+    bgLight: 'bg-success-50',
+    text: 'text-success-600',
+    textDark: 'text-success-700',
+    border: 'border-success-500',
+    gradient: 'from-success-500 to-success-600',
+    hex: '#10b981',
+  },
+  error: {
+    bg: 'bg-error-500',
+    bgLight: 'bg-error-50',
+    text: 'text-error-600',
+    textDark: 'text-error-700',
+    border: 'border-error-500',
+    gradient: 'from-error-500 to-error-600',
+    hex: '#ef4444',
+  },
+  warning: {
+    bg: 'bg-warning-500',
+    bgLight: 'bg-warning-50',
+    text: 'text-warning-600',
+    textDark: 'text-warning-700',
+    border: 'border-warning-500',
+    gradient: 'from-warning-500 to-warning-600',
+    hex: '#D9A12C',
+  },
+} as const;
+
+/**
+ * Get balanced color sequence for multiple elements
+ * Ensures no more than 2 consecutive items share the same color family
+ */
+export const BALANCED_COLOR_SEQUENCE = [
+  MODULE_COLORS.keywords,    // blue
+  MODULE_COLORS.clusters,    // purple
+  MODULE_COLORS.content,     // green
+  MODULE_COLORS.billing,     // amber
+  MODULE_COLORS.ideas,       // purple (darker)
+  MODULE_COLORS.tasks,       // green (darker)
+] as const;
+
+/**
+ * Get module color by name
+ */
+export function getModuleColor(module: keyof typeof MODULE_COLORS) {
+  return MODULE_COLORS[module];
+}
+
+/**
+ * Get a color from the balanced sequence by index
+ * Cycles through to ensure visual balance
+ */
+export function getBalancedColor(index: number) {
+  return BALANCED_COLOR_SEQUENCE[index % BALANCED_COLOR_SEQUENCE.length];
+}
+
+export type ModuleColorKey = keyof typeof MODULE_COLORS;
+export type ModuleColor = typeof MODULE_COLORS[ModuleColorKey];

frontend/src/index.css

@@ -175,7 +175,7 @@
 }
 
 @utility menu-item {
-  @apply relative flex items-center w-full gap-3 px-3 py-2 font-medium rounded-lg text-theme-sm;
+  @apply relative flex items-center w-full gap-3 px-3.5 py-2.5 font-medium rounded-lg text-theme-sm;
 }
 
 @utility menu-item-active {
@@ -186,6 +186,44 @@
   @apply text-gray-700 hover:bg-gray-100 group-hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-gray-300;
 }
 
+/* Menu icon sizing - consistent across sidebar */
+@utility menu-item-icon-size {
+  @apply w-5 h-5 flex-shrink-0;
+}
+
+@utility menu-item-icon-active {
+  @apply text-brand-500;
+}
+
+@utility menu-item-icon-inactive {
+  @apply text-gray-500 group-hover:text-gray-700;
+}
+
+/* Dropdown menu items - increased spacing */
+@utility menu-dropdown-item {
+  @apply block px-3 py-2 text-theme-sm font-medium rounded-md transition-colors;
+}
+
+@utility menu-dropdown-item-active {
+  @apply text-brand-600 bg-brand-50;
+}
+
+@utility menu-dropdown-item-inactive {
+  @apply text-gray-600 hover:text-gray-900 hover:bg-gray-50;
+}
+
+@utility menu-dropdown-badge {
+  @apply px-1.5 py-0.5 text-xs font-medium rounded;
+}
+
+@utility menu-dropdown-badge-active {
+  @apply bg-brand-100 text-brand-700;
+}
+
+@utility menu-dropdown-badge-inactive {
+  @apply bg-gray-100 text-gray-600;
+}
+
 @layer utilities {
   input[type="date"]::-webkit-inner-spin-button,
   input[type="time"]::-webkit-inner-spin-button,