ui update and some backend functionality adding in accordance with research on adhd and ux design

synculous-client/src/app/dashboard/routines/[id]/page.tsx

@@ -20,6 +20,9 @@ interface Routine {
   name: string;
   description?: string;
   icon?: string;
+  location?: string;
+  environment_prompts?: string[];
+  habit_stack_after?: string;
 }
 
 const ICONS = ['✨', '🌅', '🌙', '☀️', '💪', '🧘', '📚', '🍳', '🏃', '💼', '🎯', '⭐', '🔥', '💤', '🧠'];
@@ -36,6 +39,10 @@ export default function RoutineDetailPage() {
   const [editName, setEditName] = useState('');
   const [editDescription, setEditDescription] = useState('');
   const [editIcon, setEditIcon] = useState('✨');
+  const [editLocation, setEditLocation] = useState('');
+  const [editHabitStack, setEditHabitStack] = useState('');
+  const [editEnvPrompts, setEditEnvPrompts] = useState<string[]>([]);
+  const [newEnvPrompt, setNewEnvPrompt] = useState('');
   const [newStepName, setNewStepName] = useState('');
   const [newStepDuration, setNewStepDuration] = useState(5);
 
@@ -48,6 +55,9 @@ export default function RoutineDetailPage() {
         setEditName(data.routine.name);
         setEditDescription(data.routine.description || '');
         setEditIcon(data.routine.icon || '✨');
+        setEditLocation((data.routine as Routine).location || '');
+        setEditHabitStack((data.routine as Routine).habit_stack_after || '');
+        setEditEnvPrompts((data.routine as Routine).environment_prompts || []);
       } catch (err) {
         console.error('Failed to fetch routine:', err);
         router.push('/dashboard/routines');
@@ -58,13 +68,8 @@ export default function RoutineDetailPage() {
     fetchRoutine();
   }, [routineId, router]);
 
-  const handleStart = async () => {
-    try {
-      await api.sessions.start(routineId);
-      router.push(`/dashboard/routines/${routineId}/run`);
-    } catch (err) {
-      console.error('Failed to start routine:', err);
-    }
+  const handleStart = () => {
+    router.push(`/dashboard/routines/${routineId}/launch`);
   };
 
   const handleSaveBasicInfo = async () => {
@@ -73,8 +78,19 @@ export default function RoutineDetailPage() {
         name: editName,
         description: editDescription,
         icon: editIcon,
+        location: editLocation || null,
+        habit_stack_after: editHabitStack || null,
+        environment_prompts: editEnvPrompts,
+      });
+      setRoutine({
+        ...routine!,
+        name: editName,
+        description: editDescription,
+        icon: editIcon,
+        location: editLocation || undefined,
+        habit_stack_after: editHabitStack || undefined,
+        environment_prompts: editEnvPrompts,
       });
-      setRoutine({ ...routine!, name: editName, description: editDescription, icon: editIcon });
       setIsEditing(false);
     } catch (err) {
       console.error('Failed to update routine:', err);
@@ -179,6 +195,69 @@ export default function RoutineDetailPage() {
                 className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
               />
             </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Location</label>
+              <input
+                type="text"
+                value={editLocation}
+                onChange={(e) => setEditLocation(e.target.value)}
+                placeholder="Where do you do this? e.g., bathroom, kitchen"
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Anchor habit</label>
+              <input
+                type="text"
+                value={editHabitStack}
+                onChange={(e) => setEditHabitStack(e.target.value)}
+                placeholder="What do you do right before? e.g., finish breakfast"
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Environment prompts</label>
+              <p className="text-xs text-gray-500 mb-2">Quick checklist shown before starting</p>
+              <div className="space-y-2 mb-2">
+                {editEnvPrompts.map((prompt, i) => (
+                  <div key={i} className="flex items-center gap-2">
+                    <span className="flex-1 text-sm text-gray-700 bg-gray-50 px-3 py-2 rounded-lg">{prompt}</span>
+                    <button
+                      onClick={() => setEditEnvPrompts(editEnvPrompts.filter((_, j) => j !== i))}
+                      className="text-red-500 text-sm px-2"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                ))}
+              </div>
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={newEnvPrompt}
+                  onChange={(e) => setNewEnvPrompt(e.target.value)}
+                  placeholder="e.g., Water bottle nearby?"
+                  className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && newEnvPrompt.trim()) {
+                      setEditEnvPrompts([...editEnvPrompts, newEnvPrompt.trim()]);
+                      setNewEnvPrompt('');
+                    }
+                  }}
+                />
+                <button
+                  onClick={() => {
+                    if (newEnvPrompt.trim()) {
+                      setEditEnvPrompts([...editEnvPrompts, newEnvPrompt.trim()]);
+                      setNewEnvPrompt('');
+                    }
+                  }}
+                  className="px-3 py-2 bg-gray-200 rounded-lg text-sm font-medium"
+                >
+                  Add
+                </button>
+              </div>
+            </div>
             <div className="flex gap-3">
               <button
                 onClick={() => setIsEditing(false)}
@@ -216,9 +295,9 @@ export default function RoutineDetailPage() {
             </div>
             <button
               onClick={handleStart}
-              className="w-full mt-4 bg-indigo-600 text-white font-semibold py-3 rounded-xl flex items-center justify-center gap-2"
+              className="w-full mt-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-2 text-lg shadow-lg shadow-indigo-500/25 active:scale-[0.98] transition-transform"
             >
-              <PlayIcon size={20} />
+              <PlayIcon size={24} />
               Start Routine
             </button>
           </div>
@@ -226,7 +305,17 @@ export default function RoutineDetailPage() {
 
         {/* Steps */}
         <div>
-          <h2 className="text-lg font-semibold text-gray-900 mb-3">Steps</h2>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-lg font-semibold text-gray-900">Steps</h2>
+            {steps.length >= 4 && steps.length <= 7 && (
+              <span className="text-xs text-green-600 bg-green-50 px-2 py-1 rounded-full">Good length</span>
+            )}
+          </div>
+          {steps.length > 7 && (
+            <p className="text-sm text-amber-600 bg-amber-50 px-3 py-2 rounded-lg mb-3">
+              Tip: Routines with 4-7 steps tend to feel more manageable. Consider combining related steps.
+            </p>
+          )}
           
           <div className="bg-white rounded-xl p-4 shadow-sm space-y-3 mb-4">
             <div className="flex gap-2">