fix local and remote inconsistency

src/components/HabitGrid.jsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { getColorIntensity, isToday, formatDate, getWeekdayLabel, getFrozenDays } from '../lib/utils-habit';
-import { toggleCompletion } from '../lib/datastore';
+import { toggleCompletion, getAuthUser } from '../lib/datastore';
 
 const HabitGrid = ({ habit, onUpdate, fullView = false }) => {
   const frozenDays = getFrozenDays(habit.completions);
@@ -38,19 +38,22 @@ const HabitGrid = ({ habit, onUpdate, fullView = false }) => {
     }
   }, []);
 
-  const handleCellClick = (date) => {
+  const handleCellClick = async (date) => {
     const dateStr = formatDate(date);
-    // Optimistic local update
+    // Only do optimistic localStorage write if logged in (remote-first). In local-only mode, let datastore handle it to avoid double-toggle.
-    const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+    const user = await getAuthUser();
-    const idx = habits.findIndex(h => h.id === habit.id);
+    if (user) {
-    if (idx !== -1) {
+      const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
-      const completions = Array.isArray(habits[idx].completions) ? [...habits[idx].completions] : [];
+      const idx = habits.findIndex(h => h.id === habit.id);
-      const cidx = completions.indexOf(dateStr);
+      if (idx !== -1) {
-      if (cidx > -1) completions.splice(cidx, 1); else completions.push(dateStr);
+        const completions = Array.isArray(habits[idx].completions) ? [...habits[idx].completions] : [];
-      habits[idx].completions = completions;
+        const cidx = completions.indexOf(dateStr);
-      localStorage.setItem('habitgrid_data', JSON.stringify(habits));
+        if (cidx > -1) completions.splice(cidx, 1); else completions.push(dateStr);
+        habits[idx].completions = completions;
+        localStorage.setItem('habitgrid_data', JSON.stringify(habits));
+      }
     }
-    toggleCompletion(habit.id, dateStr); // background sync
+    await toggleCompletion(habit.id, dateStr);
     onUpdate();
   };
 

src/components/MiniGrid.jsx

@@ -40,7 +40,7 @@ function getFreezeIcon() {
 import { motion } from 'framer-motion';
 import { getColorIntensity, isToday, formatDate } from '../lib/utils-habit';
 import { getFrozenDays } from '../lib/utils-habit';
-import { toggleCompletion } from '../lib/datastore';
+import { toggleCompletion, getAuthUser } from '../lib/datastore';
 import { toast } from './ui/use-toast';
 
 const MiniGrid = ({ habit, onUpdate }) => {
@@ -69,17 +69,20 @@ const MiniGrid = ({ habit, onUpdate }) => {
     const dateStr = formatDate(date);
     const isTodayCell = isToday(date);
     const wasCompleted = habit.completions.includes(dateStr);
-    // Optimistic local update
+    // Only optimistic write if logged in; in local-only mode, datastore handles it to avoid double-toggle
-    const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+    const user = await getAuthUser();
-    const idx = habits.findIndex(h => h.id === habit.id);
+    if (user) {
-    if (idx !== -1) {
+      const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
-      const completions = Array.isArray(habits[idx].completions) ? [...habits[idx].completions] : [];
+      const idx = habits.findIndex(h => h.id === habit.id);
-      const cidx = completions.indexOf(dateStr);
+      if (idx !== -1) {
-      if (cidx > -1) completions.splice(cidx, 1); else completions.push(dateStr);
+        const completions = Array.isArray(habits[idx].completions) ? [...habits[idx].completions] : [];
-      habits[idx].completions = completions;
+        const cidx = completions.indexOf(dateStr);
-      localStorage.setItem('habitgrid_data', JSON.stringify(habits));
+        if (cidx > -1) completions.splice(cidx, 1); else completions.push(dateStr);
+        habits[idx].completions = completions;
+        localStorage.setItem('habitgrid_data', JSON.stringify(habits));
+      }
     }
-    toggleCompletion(habit.id, dateStr); // background sync
+    await toggleCompletion(habit.id, dateStr);
     onUpdate();
     // Only show encouragement toast if validating (adding) today's dot
     if (isTodayCell && !wasCompleted) {

src/index.css

@@ -1,3 +1,9 @@
+html, body {
+  background-color: #fff;
+}
+html.dark, body.dark {
+  background-color: #020617;
+}
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/lib/datastore.js

@@ -1,3 +1,27 @@
+// UUID v4 generator (browser safe)
+function generateUUID() {
+  if (window.crypto && window.crypto.randomUUID) return window.crypto.randomUUID();
+  // Fallback for older browsers
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+
+// UUID v4 validator
+function isValidUUID(id) {
+  return /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(id);
+}
+
+// Ensure all habits in an array have valid UUIDs (returns new array)
+function ensureUUIDs(habits) {
+  return habits.map(h => {
+    if (!h.id || !isValidUUID(h.id)) {
+      return { ...h, id: generateUUID() };
+    }
+    return h;
+  });
+}
 import { supabase, isSupabaseConfigured } from './supabase';
 import * as local from './storage';
 
@@ -61,7 +85,10 @@ export async function saveHabit(habit) {
   if (!(await isLoggedIn())) return local.saveHabit(habit);
   const now = new Date().toISOString();
   const { data: auth } = await supabase.auth.getUser();
+  // Ensure UUID for new habit
+  const id = habit.id && isValidUUID(habit.id) ? habit.id : generateUUID();
   const insert = {
+    id,
     user_id: auth?.user?.id,
     name: habit.name,
     color: habit.color,
@@ -73,10 +100,14 @@ export async function saveHabit(habit) {
     created_at: now,
     updated_at: now,
   };
-  const { data, error } = await supabase.from('habits').insert(insert).select('*').single();
+  const { data, error } = await supabase
+    .from('habits')
+    .upsert(insert, { onConflict: 'id' })
+    .select('*')
+    .single();
   if (error) {
     console.warn('Supabase saveHabit error, writing local:', error.message);
-    return local.saveHabit(habit);
+    return local.saveHabit({ ...habit, id });
   }
   return {
     id: data.id,
@@ -126,15 +157,42 @@ export async function toggleCompletion(habitId, dateStr) {
   return updateHabit(habitId, { completions });
 }
 
+
 export async function exportData() {
   // Always export from local snapshot for portability
-  const habits = await getHabits();
+  let habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+  habits = ensureUUIDs(habits);
+  // If logged in, merge with remote and upsert remote
+  if (await isLoggedIn()) {
+    const remote = await getHabits();
+    let merged = mergeHabits(habits, remote);
+    merged = ensureUUIDs(merged);
+    await supabase.from('habits').upsert(merged, { onConflict: 'id' });
+    return JSON.stringify(merged, null, 2);
+  }
   return JSON.stringify(habits, null, 2);
 }
 
+
 export async function importData(jsonString) {
-  // Always import to local; remote sync will push on login
+  // Import to local
-  return local.importData(jsonString);
+  let imported = local.importData(jsonString);
+  // Always ensure UUIDs for imported data
+  let importedArr = Array.isArray(imported) ? imported : JSON.parse(jsonString);
+  importedArr = ensureUUIDs(importedArr);
+  // If logged in, merge with remote and upsert
+  if (await isLoggedIn()) {
+    const user = await getAuthUser();
+    const remote = await getHabits();
+    let merged = mergeHabits(importedArr, remote);
+    merged = ensureUUIDs(merged);
+    localStorage.setItem('habitgrid_data', JSON.stringify(merged));
+    await supabase.from('habits').upsert(merged, { onConflict: 'id' });
+    return merged;
+  } else {
+    localStorage.setItem('habitgrid_data', JSON.stringify(importedArr));
+    return importedArr;
+  }
 }
 
 export async function clearAllData() {
@@ -153,10 +211,13 @@ export async function syncLocalToRemoteIfNeeded() {
   if (error) return;
 
   if (!already || (remote || []).length === 0) {
-    const habits = local.getHabits();
+    let habits = local.getHabits();
     if (habits.length === 0) return localStorage.setItem(SYNC_FLAG, new Date().toISOString());
+    habits = ensureUUIDs(habits);
+    // Persist back to local so IDs match remote after upsert
+    localStorage.setItem('habitgrid_data', JSON.stringify(habits));
     const rows = habits.map(h => ({
-      id: h.id && h.id.length > 0 ? h.id : undefined,
+      id: h.id,
       user_id: user.id,
       name: h.name,
       color: h.color,
@@ -173,12 +234,63 @@ export async function syncLocalToRemoteIfNeeded() {
   }
 }
 
+
+// Helper: Download JSON backup of local habits
+function backupLocalHabits() {
+  const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+  if (!habits.length) return;
+  const blob = new Blob([JSON.stringify(habits, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `habitgrid-backup-${new Date().toISOString().split('T')[0]}.json`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+// Helper: Merge two habit arrays by id, prefer latest updatedAt
+function mergeHabits(localHabits, remoteHabits) {
+  const map = new Map();
+  [...localHabits, ...remoteHabits].forEach(h => {
+    if (!map.has(h.id)) {
+      map.set(h.id, h);
+    } else {
+      // Prefer latest updatedAt
+      const existing = map.get(h.id);
+      map.set(h.id, (new Date(h.updatedAt || 0) > new Date(existing.updatedAt || 0)) ? h : existing);
+    }
+  });
+  return Array.from(map.values());
+}
+
+
 export async function syncRemoteToLocal() {
   const user = await getAuthUser();
   if (!user) return;
   const remote = await getHabits();
-  // write to local in the app's expected format
+  const localHabits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
-  localStorage.setItem('habitgrid_data', JSON.stringify(remote));
+
-  // Notify UI to reload if listening
+  // Only backup on first login sync (not every refresh)
+  const backupFlag = 'habitgrid_backup_done';
+  if (!localStorage.getItem(backupFlag)) {
+    backupLocalHabits();
+    localStorage.setItem(backupFlag, '1');
+  }
+
+  // If both local and remote have data, merge and update both
+  if (localHabits.length && remote.length) {
+    let merged = mergeHabits(localHabits, remote);
+    merged = ensureUUIDs(merged);
+    localStorage.setItem('habitgrid_data', JSON.stringify(merged));
+    await supabase.from('habits').upsert(merged, { onConflict: 'id' });
+  } else if (!remote.length && localHabits.length) {
+    let ensured = ensureUUIDs(localHabits);
+    await supabase.from('habits').upsert(ensured, { onConflict: 'id' });
+    localStorage.setItem('habitgrid_data', JSON.stringify(ensured));
+  } else if (remote.length && !localHabits.length) {
+    let ensured = ensureUUIDs(remote);
+    localStorage.setItem('habitgrid_data', JSON.stringify(ensured));
+  }
+
   window.dispatchEvent(new CustomEvent('habitgrid-sync-updated'));
 }

src/lib/storage.js

@@ -2,6 +2,15 @@
 import { supabase } from './supabase';
 const STORAGE_KEY = 'habitgrid_data';
 
+// UUID v4 generator for local/offline usage
+function generateUUID() {
+  if (typeof window !== 'undefined' && window.crypto?.randomUUID) return window.crypto.randomUUID();
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+
 export const getHabits = () => {
   try {
     const data = localStorage.getItem(STORAGE_KEY);
@@ -56,14 +65,21 @@ const remoteMirrorDelete = async (id) => {
 
 export const saveHabit = (habit) => {
   const habits = getHabits();
+  // Respect provided id (e.g., UUID from AddEdit or datastore). Generate only if missing.
+  const id = habit.id || generateUUID();
+  const existingIndex = habits.findIndex(h => h.id === id);
   const newHabit = {
     ...habit,
-    id: Date.now().toString(),
+    id,
-    sortOrder: habits.length,
+    sortOrder: habit.sortOrder ?? habits.length,
-    createdAt: nowIso(),
+    createdAt: habit.createdAt || nowIso(),
     updatedAt: nowIso(),
   };
-  habits.push(newHabit);
+  if (existingIndex >= 0) {
+    habits[existingIndex] = newHabit;
+  } else {
+    habits.push(newHabit);
+  }
   localStorage.setItem(STORAGE_KEY, JSON.stringify(habits));
   remoteMirrorUpsert(newHabit);
   return newHabit;

src/pages/AddEditHabitPage.jsx

@@ -1,3 +1,11 @@
+// UUID v4 generator (browser safe, duplicate of datastore.js for local use)
+function generateUUID() {
+  if (window.crypto && window.crypto.randomUUID) return window.crypto.randomUUID();
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
@@ -9,6 +17,12 @@ import { useToast } from '../components/ui/use-toast';
 import ColorPicker from '../components/ColorPicker';
 import { getHabits, saveHabit, updateHabit } from '../lib/datastore';
 
+// Local helper to get habit by id from localStorage
+function getHabit(id) {
+  const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+  return habits.find(h => h.id === id);
+}
+
 const AddEditHabitPage = () => {
   const { id } = useParams();
   const navigate = useNavigate();
@@ -37,7 +51,7 @@ const AddEditHabitPage = () => {
     }
   }, [id, isEdit, navigate, toast]);
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
 
     if (!name.trim()) {
@@ -64,10 +78,9 @@ const AddEditHabitPage = () => {
         description: "Your habit has been updated successfully.",
       });
     } else {
-      // Add to localStorage for instant UI
+      // Single source of truth: delegate to datastore; it will handle local or remote as needed
-      const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
       const newHabit = {
-        id: Date.now().toString(),
+        id: generateUUID(),
         name: name.trim(),
         color,
         category: category.trim(),
@@ -76,11 +89,8 @@ const AddEditHabitPage = () => {
         longestStreak: 0,
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
-        sortOrder: habits.length,
       };
-      habits.push(newHabit);
+      await saveHabit(newHabit);
-      localStorage.setItem('habitgrid_data', JSON.stringify(habits));
-      saveHabit(newHabit); // background sync
       toast({
         title: "✅ Habit created",
         description: "Your new habit is ready to track!",

src/pages/HomePage.jsx

@@ -15,6 +15,8 @@ const HomePage = () => {
   const navigate = useNavigate();
   const { toast } = useToast();
   const [habits, setHabits] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [loggedIn, setLoggedIn] = useState(false);
   const [collapsedGroups, setCollapsedGroups] = useState({});
   const [gitEnabled, setGitEnabled] = useState(getGitEnabled());
   const [darkMode, setDarkMode] = useState(() => {
@@ -23,13 +25,16 @@ const HomePage = () => {
 
   useEffect(() => {
     (async () => {
+      setLoading(true);
       // On login, pull remote habits into localStorage
       const user = await getAuthUser();
+      setLoggedIn(!!user);
       if (user) {
         await syncRemoteToLocal();
       }
       await loadHabits();
       setGitEnabled(getGitEnabled());
+      setLoading(false);
     })();
     // Background sync every 10s if logged in
     const interval = setInterval(() => {
@@ -326,29 +331,42 @@ const HomePage = () => {
           </div>
         </DragDropContext>
 
-        {/* Empty State */}
+        {/* Empty State or Loading Buffer */}
         {habits.length === 0 && (
-          <motion.div
+          loading && loggedIn ? (
-            initial={{ opacity: 0, scale: 0.95 }}
+            <motion.div
-            animate={{ opacity: 1, scale: 1 }}
+              initial={{ opacity: 0, scale: 0.95 }}
-            className="text-center py-16"
+              animate={{ opacity: 1, scale: 1 }}
-          >
+              className="flex flex-col items-center justify-center py-20"
-            <div className="w-24 h-24 bg-gradient-to-br from-green-100 to-emerald-100 dark:from-green-900/20 dark:to-emerald-900/20 rounded-3xl flex items-center justify-center mx-auto mb-6">
-              <Flame className="w-12 h-12 text-green-600 dark:text-green-400" />
-            </div>
-            <h2 className="text-2xl font-bold mb-2">Create your grid!</h2>
-            <p className="text-muted-foreground mb-8 max-w-md mx-auto">
-              Create your first habit and watch your progress every day as you fill in the squares. Small steps lead to big changes!
-            </p>
-            <Button
-              onClick={handleAddHabit}
-              size="lg"
-              className="rounded-full shadow-lg hover:shadow-xl transition-shadow"
             >
-              <Plus className="w-5 h-5 mr-2" />
+              <div className="w-16 h-16 mb-6 flex items-center justify-center">
-              Create First Habit
+                <span className="inline-block w-12 h-12 border-4 border-emerald-400 border-t-transparent rounded-full animate-spin"></span>
-            </Button>
+              </div>
-          </motion.div>
+              <h2 className="text-xl font-semibold text-muted-foreground">Loading your habits...</h2>
+            </motion.div>
+          ) : (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              className="text-center py-16"
+            >
+              <div className="w-24 h-24 bg-gradient-to-br from-green-100 to-emerald-100 dark:from-green-900/20 dark:to-emerald-900/20 rounded-3xl flex items-center justify-center mx-auto mb-6">
+                <Flame className="w-12 h-12 text-green-600 dark:text-green-400" />
+              </div>
+              <h2 className="text-2xl font-bold mb-2">Create your grid!</h2>
+              <p className="text-muted-foreground mb-8 max-w-md mx-auto">
+                Create your first habit and watch your progress every day as you fill in the squares. Small steps lead to big changes!
+              </p>
+              <Button
+                onClick={handleAddHabit}
+                size="lg"
+                className="rounded-full shadow-lg hover:shadow-xl transition-shadow"
+              >
+                <Plus className="w-5 h-5 mr-2" />
+                Create First Habit
+              </Button>
+            </motion.div>
+          )
         )}
 
         {/* Add Button */}