UI fixes

synculous-client/src/app/dashboard/routines/new/page.tsx

@@ -2,8 +2,9 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import api from '@/lib/api';
-import { ArrowLeftIcon, PlusIcon, TrashIcon, GripVerticalIcon } from '@/components/ui/Icons';
+import { ArrowLeftIcon, PlusIcon, TrashIcon, GripVerticalIcon, CopyIcon } from '@/components/ui/Icons';
 
 interface Step {
   id: string;
@@ -12,7 +13,7 @@ interface Step {
   position: number;
 }
 
-const ICONS = ['✨', '🌅', '🌙', '☀️', '💪', '🧘', '📚', '🍳', '🏃', '💼', '🎯', '⭐', '🔥', '💤', '🧠'];
+const ICONS = ['✨', '🌅', '🌙', '☀️', '💪', '🧘', '📚', '🍳', '🏃', '💼', '🎯', '⭐', '🔥', '💤', '🧠', '☕', '🍎', '💧', '🍀', '🎵', '📝', '🚴', '🏋️', '🚶', '👀', '🛡️', '😊', '😔'];
 
 const STEP_TYPES = [
   { value: 'generic', label: 'Generic' },
@@ -22,6 +23,16 @@ const STEP_TYPES = [
   { value: 'exercise', label: 'Exercise' },
 ];
 
+const DAY_OPTIONS = [
+  { value: 'mon', label: 'Mon' },
+  { value: 'tue', label: 'Tue' },
+  { value: 'wed', label: 'Wed' },
+  { value: 'thu', label: 'Thu' },
+  { value: 'fri', label: 'Fri' },
+  { value: 'sat', label: 'Sat' },
+  { value: 'sun', label: 'Sun' },
+];
+
 export default function NewRoutinePage() {
   const router = useRouter();
   const [name, setName] = useState('');
@@ -31,6 +42,17 @@ export default function NewRoutinePage() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
 
+  // Schedule
+  const [scheduleDays, setScheduleDays] = useState<string[]>(['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']);
+  const [scheduleTime, setScheduleTime] = useState('08:00');
+  const [scheduleRemind, setScheduleRemind] = useState(true);
+
+  const toggleDay = (day: string) => {
+    setScheduleDays(prev =>
+      prev.includes(day) ? prev.filter(d => d !== day) : [...prev, day]
+    );
+  };
+
   const handleAddStep = () => {
     const newStep: Step = {
       id: `temp-${Date.now()}`,
@@ -69,7 +91,7 @@ export default function NewRoutinePage() {
 
     try {
       const routine = await api.routines.create({ name, description, icon });
-      
+
       for (const step of validSteps) {
         await api.routines.addStep(routine.id, {
           name: step.name,
@@ -77,7 +99,15 @@ export default function NewRoutinePage() {
         });
       }
 
-      router.push('/dashboard/routines');
+      if (scheduleDays.length > 0) {
+        await api.routines.setSchedule(routine.id, {
+          days: scheduleDays,
+          time: scheduleTime,
+          remind: scheduleRemind,
+        });
+      }
+
+      router.push(`/dashboard/routines/${routine.id}?new=1`);
     } catch (err) {
       setError((err as Error).message || 'Failed to create routine');
     } finally {
@@ -96,6 +126,22 @@ export default function NewRoutinePage() {
         </div>
       </header>
 
+      <Link
+        href="/dashboard/templates"
+        className="mx-4 mt-4 flex items-center gap-3 bg-gradient-to-r from-indigo-50 to-purple-50 border-2 border-indigo-200 rounded-xl p-4 hover:border-indigo-400 transition-colors"
+      >
+        <div className="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
+          <CopyIcon size={24} className="text-indigo-600" />
+        </div>
+        <div className="flex-1">
+          <p className="font-semibold text-gray-900">Start from a template</p>
+          <p className="text-sm text-gray-500">Browse pre-made routines</p>
+        </div>
+        <div className="bg-indigo-600 text-white text-xs font-medium px-2 py-1 rounded-full">
+          Recommended
+        </div>
+      </Link>
+
       <form onSubmit={handleSubmit} className="p-4 space-y-6">
         {error && (
           <div className="bg-red-50 text-red-600 px-4 py-3 rounded-lg text-sm">
@@ -114,8 +160,8 @@ export default function NewRoutinePage() {
                   type="button"
                   onClick={() => setIcon(i)}
                   className={`w-10 h-10 rounded-lg text-xl flex items-center justify-center transition ${
-                    icon === i 
-                      ? 'bg-indigo-100 ring-2 ring-indigo-600' 
+                    icon === i
+                      ? 'bg-indigo-100 ring-2 ring-indigo-600'
                       : 'bg-gray-100 hover:bg-gray-200'
                   }`}
                 >
@@ -148,6 +194,90 @@ export default function NewRoutinePage() {
           </div>
         </div>
 
+        {/* Schedule */}
+        <div className="bg-white rounded-xl p-4 shadow-sm space-y-4">
+          <h2 className="text-lg font-semibold text-gray-900">Schedule <span className="text-sm font-normal text-gray-400">(optional)</span></h2>
+          
+          {/* Quick select buttons */}
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => setScheduleDays(['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'])}
+              className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors ${
+                scheduleDays.length === 7 ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-700 border-gray-300'
+              }`}
+            >
+              Every day
+            </button>
+            <button
+              type="button"
+              onClick={() => setScheduleDays(['mon', 'tue', 'wed', 'thu', 'fri'])}
+              className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors ${
+                scheduleDays.length === 5 && !scheduleDays.includes('sat') && !scheduleDays.includes('sun') ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-700 border-gray-300'
+              }`}
+            >
+              Weekdays
+            </button>
+            <button
+              type="button"
+              onClick={() => setScheduleDays(['sat', 'sun'])}
+              className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors ${
+                scheduleDays.length === 2 && scheduleDays.includes('sat') && scheduleDays.includes('sun') ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-700 border-gray-300'
+              }`}
+            >
+              Weekends
+            </button>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">Days</label>
+            <div className="flex gap-2 flex-wrap">
+              {DAY_OPTIONS.map((day) => (
+                <button
+                  key={day.value}
+                  type="button"
+                  onClick={() => toggleDay(day.value)}
+                  className={`px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${
+                    scheduleDays.includes(day.value)
+                      ? 'bg-indigo-600 text-white border-indigo-600'
+                      : 'bg-white text-gray-700 border-gray-300'
+                  }`}
+                >
+                  {day.label}
+                </button>
+              ))}
+            </div>
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Time</label>
+            <input
+              type="time"
+              value={scheduleTime}
+              onChange={(e) => setScheduleTime(e.target.value)}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+            />
+          </div>
+          
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-gray-900">Send reminder</p>
+              <p className="text-sm text-gray-500">Get notified when it's time</p>
+            </div>
+            <button
+              type="button"
+              onClick={() => setScheduleRemind(!scheduleRemind)}
+              className={`w-12 h-7 rounded-full transition-colors ${
+                scheduleRemind ? 'bg-indigo-500' : 'bg-gray-300'
+              }`}
+            >
+              <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ml-1 ${
+                scheduleRemind ? 'translate-x-5' : ''
+              }`} />
+            </button>
+          </div>
+        </div>
+
         {/* Steps */}
         <div>
           <div className="flex items-center justify-between mb-3">