Fix drag and drop

Removed a dash from the sentence for clarity.

README.md

@@ -19,6 +19,7 @@ A modern, grid-based habit tracker app inspired by GitHub contribution graphs. T
 - [Self-hosted Mirror (Gitea)](https://git.mihajlociric.com/count0/HabitGrid)
 
 
+
 ## Features
 - GitHub-style habit grid (calendar view)
 - Streak tracking and personal bests
@@ -26,10 +27,19 @@ A modern, grid-based habit tracker app inspired by GitHub contribution graphs. T
 - Dark mode and light mode
 - Data export/import (JSON backup)
 - Responsive design (desktop & mobile)
+- **Cross-device sync with Supabase (cloud save)**
+- **Offline-first:** works fully without login, syncs local habits to cloud on login
 - Built with React, Vite, Tailwind CSS, Radix UI, and Framer Motion
 
 ---
 
+
+## How Sync Works
+
+- By default, all habits are stored locally and work offline.
+- When you log in (via the call to action button), your local habits are synced to Supabase and available on all devices.
+- Any changes (including categories, order, completions) are automatically pushed to the cloud when logged in.
+
 ## Getting Started
 
 ### Prerequisites
@@ -69,7 +79,29 @@ src/
   pages/
 ```
 
-## Deployment Tip
+
+## Cloud Sync Setup
+
+To enable cross-device sync, you need a free [Supabase](https://supabase.com/) account:
+
+1. Create a Supabase project and set up a `habits` table with the following schema:
+   ```sql
+   create table habits (
+     id uuid primary key default gen_random_uuid(),
+     user_id uuid not null,
+     name text not null,
+     color text,
+     category text,
+     completions jsonb default '[]'::jsonb,
+     current_streak int default 0,
+     longest_streak int default 0,
+     sort_order int default 0,
+     created_at timestamptz default now(),
+     updated_at timestamptz default now()
+   );
+   ```
+2. Add your Supabase project URL and anon key to the app's environment/config.
+3. Deploy as usual (see below).
 
 You can easily deploy your own instance of HabitGrid using [Cloudflare Pages](https://pages.cloudflare.com/):
 
@@ -86,9 +118,11 @@ You can easily deploy your own instance of HabitGrid using [Cloudflare Pages](ht
    ```
 5. Deploy and enjoy your own habit tracker online!
 
-## License
 
-MIT
+## Offline-First Guarantee
+
+- You can use HabitGrid without ever logging in everything works locally.
+- If you decide to log in later, all your local habits (including categories and order) will be synced to the cloud and available on all devices.
 
 ---
 
@@ -100,6 +134,4 @@ MIT
 
 ---
 
----
-
 *Built with ❤️ by [Mihajlo Ciric](https://mihajlociric.com/)*

index.html

@@ -5,6 +5,41 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Habit Tracker App</title>
     <meta name="description" content="Track your habits and visualize your progress with HabitGrid." />
+    <meta name="keywords" content="habit tracker, productivity, goals, progress, HabitGrid, daily habits, motivation" />
+    <meta name="author" content="Mihajlo Ciric" />
+    <meta name="theme-color" content="#2563eb" />
+    <!-- Open Graph Meta Tags -->
+      <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        "name": "HabitGrid",
+        "url": "https://myhabitgrid.com",
+        "description": "HabitGrid is a habit tracker app that helps users build and maintain daily habits using a GitHub-style contribution grid. Visualize your progress, build streaks, and stay motivated.",
+        "applicationCategory": "Productivity",
+        "operatingSystem": "All",
+        "creator": {
+          "@type": "Person",
+          "name": "Mihajlo Ciric"
+        },
+        "keywords": ["habit tracker", "productivity", "goals", "progress", "daily habits", "motivation", "HabitGrid"],
+        "offers": {
+          "@type": "Offer",
+          "price": "0",
+          "priceCurrency": "USD"
+        }
+      }
+      </script>
+    <meta property="og:title" content="Habit Tracker App" />
+    <meta property="og:description" content="Track your habits and visualize your progress with HabitGrid." />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://myhabitgrid.com" />
+    <meta property="og:image" content="/assets/fav.png" />
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Habit Tracker App" />
+    <meta name="twitter:description" content="Track your habits and visualize your progress with HabitGrid." />
+    <meta name="twitter:image" content="/assets/fav.png" />
     <link rel="icon" type="image/png" href="/assets/fav.png" />
     <link rel="stylesheet" href="/src/index.css" />
   </head>

public/robots.txt

@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /
+Sitemap: https://myhabitgrid.com/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://yourdomain.com/</loc>
+  </url>
+  <url>
+    <loc>https://yourdomain.com/add</loc>
+  </url>
+  <url>
+    <loc>https://yourdomain.com/settings</loc>
+  </url>
+  <url>
+    <loc>https://yourdomain.com/login-providers</loc>
+  </url>
+  <!-- For dynamic routes like /habit/:id and /edit/:id, add actual URLs if you have them -->
+</urlset>

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,20 +38,28 @@ const HabitGrid = ({ habit, onUpdate, fullView = false }) => {
     }
   }, []);
 
-  const handleCellClick = (date) => {
+  const handleCellClick = async (date) => {
     const dateStr = formatDate(date);
-    // Optimistic local update
+    const user = await getAuthUser();
-    const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+    if (user) {
-    const idx = habits.findIndex(h => h.id === habit.id);
+      // Optimistically update completions for instant UI
-    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));
+      }
+      onUpdate();
+      // Sync in background
+      toggleCompletion(habit.id, dateStr);
+    } else {
+      // Local-only: just call toggleCompletion, then update UI
+      await toggleCompletion(habit.id, dateStr);
+      onUpdate();
     }
-    toggleCompletion(habit.id, dateStr); // background sync
-    onUpdate();
   };
 
   return (

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,18 +69,26 @@ const MiniGrid = ({ habit, onUpdate }) => {
     const dateStr = formatDate(date);
     const isTodayCell = isToday(date);
     const wasCompleted = habit.completions.includes(dateStr);
-    // Optimistic local update
+    const user = await getAuthUser();
-    const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+    if (user) {
-    const idx = habits.findIndex(h => h.id === habit.id);
+      // Optimistically update completions for instant UI
-    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));
+      }
+      onUpdate();
+      // Sync in background
+      toggleCompletion(habit.id, dateStr);
+    } else {
+      // Local-only: just call toggleCompletion, then update UI
+      await toggleCompletion(habit.id, dateStr);
+      onUpdate();
     }
-    toggleCompletion(habit.id, dateStr); // background sync
-    onUpdate();
     // Only show encouragement toast if validating (adding) today's dot
     if (isTodayCell && !wasCompleted) {
       try {

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,
@@ -103,6 +134,8 @@ export async function updateHabit(id, updates) {
     console.warn('Supabase updateHabit error, writing local:', error.message);
     return local.updateHabit(id, updates);
   }
+  // After any update, trigger a sync to ensure all local changes (including categories) are pushed to remote
+  await syncLocalToRemoteIfNeeded();
 }
 
 export async function deleteHabit(id) {
@@ -126,15 +159,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() {
@@ -148,37 +208,85 @@ export async function syncLocalToRemoteIfNeeded() {
   const user = await getAuthUser();
   if (!user) return;
 
-  const already = localStorage.getItem(SYNC_FLAG);
+  // Always upsert all local habits to Supabase after login
-  const { data: remote, error } = await supabase.from('habits').select('id').limit(1);
+  let habits = local.getHabits();
-  if (error) return;
+  if (habits.length === 0) return localStorage.setItem(SYNC_FLAG, new Date().toISOString());
-
+  habits = ensureUUIDs(habits);
-  if (!already || (remote || []).length === 0) {
+  localStorage.setItem('habitgrid_data', JSON.stringify(habits));
-    const habits = local.getHabits();
+  const rows = habits.map(h => ({
-    if (habits.length === 0) return localStorage.setItem(SYNC_FLAG, new Date().toISOString());
+    id: h.id,
-    const rows = habits.map(h => ({
+    user_id: user.id,
-      id: h.id && h.id.length > 0 ? h.id : undefined,
+    name: h.name,
-      user_id: user.id,
+    color: h.color,
-      name: h.name,
+    category: h.category || '',
-      color: h.color,
+    completions: h.completions || [],
-      category: h.category || '',
+    current_streak: h.currentStreak ?? 0,
-      completions: h.completions || [],
+    longest_streak: h.longestStreak ?? 0,
-      current_streak: h.currentStreak ?? 0,
+    sort_order: h.sortOrder ?? 0,
-      longest_streak: h.longestStreak ?? 0,
+    created_at: h.createdAt || new Date().toISOString(),
-      sort_order: h.sortOrder ?? 0,
+    updated_at: h.updatedAt || new Date().toISOString(),
-      created_at: h.createdAt || new Date().toISOString(),
+  }));
-      updated_at: h.updatedAt || new Date().toISOString(),
+  await supabase.from('habits').upsert(rows, { onConflict: 'id' });
-    }));
+  localStorage.setItem(SYNC_FLAG, new Date().toISOString());
-    await supabase.from('habits').upsert(rows, { onConflict: 'id' });
-    localStorage.setItem(SYNC_FLAG, new Date().toISOString());
-  }
 }
 
+
+// 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

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
-import { useNavigate } from 'react-router-dom';
+// ...existing code...
 import { motion, AnimatePresence } from 'framer-motion';
-import { Plus, Settings, TrendingUp, Flame, Calendar, Moon, Sun } from 'lucide-react';
+import { Plus, Settings, TrendingUp, Flame, Calendar, Moon, Sun, Star } from 'lucide-react';
 import { Button } from '../components/ui/button';
 import { useToast } from '../components/ui/use-toast';
 import HabitCard from '../components/HabitCard';
@@ -10,11 +10,14 @@ import AnimatedCounter from '../components/AnimatedCounter';
 import GitActivityGrid from '../components/GitActivityGrid';
 import { getGitEnabled } from '../lib/git';
 import { getHabits, updateHabit, syncLocalToRemoteIfNeeded, syncRemoteToLocal, getAuthUser } from '../lib/datastore';
+import { useNavigate } from 'react-router-dom';
 
 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 +26,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(() => {
@@ -79,6 +85,15 @@ const HomePage = () => {
     navigate('/add');
   };
 
+  const handleLoginSync = () => {
+    navigate('/login');
+  };
+
+  const handleManualSync = async () => {
+    await syncLocalToRemoteIfNeeded();
+    toast({ title: 'Synced!', description: 'Your habits have been synced to the cloud.' });
+  };
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
       <div className="max-w-6xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
@@ -118,6 +133,7 @@ const HomePage = () => {
           </div>
         </motion.div>
 
+        
         {/* Stats Overview */}
         {habits.length > 0 && (
           <motion.div
@@ -152,6 +168,8 @@ const HomePage = () => {
           </motion.div>
         )}
 
+        
+
         {/* Habits List */}
         {/* Grouped Habits by Category, collapsible, and uncategorized habits outside */}
         <DragDropContext
@@ -170,66 +188,83 @@ const HomePage = () => {
 
             let newHabits = [...habits];
 
-            // If dropping into uncategorized, always unset category
+            // Helper to update local storage and UI instantly
+            const updateLocalOrder = (habitsArr) => {
+              localStorage.setItem('habitgrid_data', JSON.stringify(habitsArr));
+              setHabits(habitsArr);
+            };
+
+            // Collect async remote updates to fire after local update
+            let remoteUpdates = [];
+
             if (destination.droppableId === 'uncategorized') {
               let items, removed;
               if (source.droppableId === 'uncategorized') {
-                // Reorder within uncategorized
                 items = Array.from(uncategorized);
                 [removed] = items.splice(source.index, 1);
               } else {
-                // Move from category to uncategorized
                 items = Array.from(uncategorized);
                 const sourceItems = Array.from(grouped[source.droppableId]);
                 [removed] = sourceItems.splice(source.index, 1);
                 removed.category = '';
                 grouped[source.droppableId] = sourceItems;
               }
-              // Always set category to ''
               removed.category = '';
               items.splice(destination.index, 0, removed);
-              items.forEach((h, i) => updateHabit(h.id, { sortOrder: i, category: '' }));
+              items.forEach((h, i) => {
+                h.sortOrder = i;
+                h.category = '';
+                remoteUpdates.push(updateHabit(h.id, { sortOrder: i, category: '' }));
+              });
               newHabits = [
                 ...items,
                 ...Object.values(grouped).flat()
               ];
+              updateLocalOrder(newHabits);
             } else if (source.droppableId === 'uncategorized' && grouped[destination.droppableId]) {
-              // Move from uncategorized to category
               const items = Array.from(uncategorized);
               const [removed] = items.splice(source.index, 1);
               removed.category = destination.droppableId;
               const destItems = Array.from(grouped[destination.droppableId] || []);
               destItems.splice(destination.index, 0, removed);
-              destItems.forEach((h, i) => updateHabit(h.id, { sortOrder: i, category: h.category }));
+              destItems.forEach((h, i) => {
+                h.sortOrder = i;
+                remoteUpdates.push(updateHabit(h.id, { sortOrder: i, category: h.category }));
+              });
               newHabits = [
                 ...items,
                 ...Object.values({ ...grouped, [destination.droppableId]: destItems }).flat()
               ];
+              updateLocalOrder(newHabits);
             } else if (grouped[source.droppableId] && grouped[destination.droppableId]) {
-              // Move within or between categories
               const sourceItems = Array.from(grouped[source.droppableId]);
               const [removed] = sourceItems.splice(source.index, 1);
               if (source.droppableId === destination.droppableId) {
-                // Reorder within same category
                 sourceItems.splice(destination.index, 0, removed);
-                sourceItems.forEach((h, i) => updateHabit(h.id, { sortOrder: i, category: h.category }));
+                sourceItems.forEach((h, i) => {
+                  h.sortOrder = i;
+                  remoteUpdates.push(updateHabit(h.id, { sortOrder: i, category: h.category }));
+                });
                 grouped[source.droppableId] = sourceItems;
               } else {
-                // Move to another category
                 const destItems = Array.from(grouped[destination.droppableId] || []);
                 removed.category = destination.droppableId;
                 destItems.splice(destination.index, 0, removed);
-                destItems.forEach((h, i) => updateHabit(h.id, { sortOrder: i, category: h.category }));
+                destItems.forEach((h, i) => {
+                  h.sortOrder = i;
+                  remoteUpdates.push(updateHabit(h.id, { sortOrder: i, category: h.category }));
+                });
                 grouped[source.droppableId] = sourceItems;
                 grouped[destination.droppableId] = destItems;
               }
-              // Flatten
               newHabits = [
                 ...uncategorized,
                 ...Object.values(grouped).flat()
               ];
+              updateLocalOrder(newHabits);
             }
-            setTimeout(loadHabits, 0); // reload instantly after update
+            // Fire remote updates async, do not block UI
+            Promise.allSettled(remoteUpdates);
           }}
         >
           <div className="space-y-6">
@@ -326,31 +361,69 @@ 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 className="w-16 h-16 mb-6 flex items-center justify-center">
-            </div>
+                <span className="inline-block w-12 h-12 border-4 border-emerald-400 border-t-transparent rounded-full animate-spin"></span>
-            <h2 className="text-2xl font-bold mb-2">Create your grid!</h2>
+              </div>
-            <p className="text-muted-foreground mb-8 max-w-md mx-auto">
+              <h2 className="text-xl font-semibold text-muted-foreground">Loading your habits...</h2>
-              Create your first habit and watch your progress every day as you fill in the squares. Small steps lead to big changes!
+            </motion.div>
-            </p>
+          ) : (
+            <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>
+
+              {/* Call to Action for Login/Sync */}
+        <div className="mb-6 flex flex-col items-center mt-8">
+          {!loggedIn ? (
             <Button
-              onClick={handleAddHabit}
+              onClick={handleLoginSync}
               size="lg"
-              className="rounded-full shadow-lg hover:shadow-xl transition-shadow"
+              className="rounded-full shadow-lg bg-emerald-600 text-white hover:bg-emerald-700 transition"
+            >
+              <Flame className="w-5 h-5 mr-2" />
+              Login & Sync My Habits
+            </Button>
+          ) : (
+            <Button
+              onClick={handleManualSync}
+              size="lg"
+              className="rounded-full shadow-lg bg-blue-600 text-white hover:bg-blue-700 transition"
             >
               <Plus className="w-5 h-5 mr-2" />
-              Create First Habit
+              Sync My Habits Now
             </Button>
-          </motion.div>
+          )}
+        </div>
+            </motion.div>
+          )
         )}
 
+        
+
         {/* Add Button */}
         {habits.length > 0 && (
           <motion.div
@@ -368,6 +441,34 @@ const HomePage = () => {
             </Button>
           </motion.div>
         )}
+
+        <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 0.3 }}
+            className="fixed bottom-6 left-6"
+          >
+            <Button
+              onClick={() => window.open("https://github.com/nagaoo0/HabitGrid", "_blank")}
+              size="lg"
+              className="rounded-full shadow-lg hover:shadow-xl transition-shadow bg-gray-600 hover:bg-gray-700 text-white"
+            >
+            <a
+              href="https://github.com/nagaoo0/HabitGrid"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center space-x-2"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" className="w-7 h-7 text-slate-700 dark:text-slate-200">
+              <path d="M12 2C6.477 2 2 6.484 2 12.021c0 4.428 2.865 8.186 6.839 9.525.5.092.682-.217.682-.483 0-.237-.009-.868-.014-1.703-2.782.605-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.004.07 1.532 1.032 1.532 1.032.892 1.53 2.341 1.088 2.91.832.091-.646.35-1.088.636-1.34-2.221-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.254-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.025A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.295 2.748-1.025 2.748-1.025.546 1.378.202 2.396.1 2.65.64.7 1.028 1.595 1.028 2.688 0 3.847-2.337 4.695-4.566 4.944.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.579.688.481C19.138 20.204 22 16.447 22 12.021 22 6.484 17.523 2 12 2z" />
+            </svg>
+            </a>
+            
+            </Button>
+              
+          </motion.div>     
+
+
       </div>
     </div>
   );