Android App Test

Removed a dash from the sentence for clarity.

.env.example

@@ -0,0 +1,2 @@
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=

README.md

@@ -1,7 +1,25 @@
 # HabitGrid
 
+
 A modern, grid-based habit tracker app inspired by GitHub contribution graphs. Track your daily habits, visualize progress, and build streaks with a beautiful, responsive UI.
 
+---
+
+<p align="center">
+  <a href="https://github.com/nagaoo0/HabitGrid" target="_blank"><img src="https://img.shields.io/github/stars/nagaoo0/HabitGrid?style=social" alt="GitHub stars"></a>
+  <a href="https://github.com/nagaoo0/HabitGrid" target="_blank"><img src="https://img.shields.io/github/license/nagaoo0/HabitGrid?color=blue" alt="MIT License"></a>
+  <a href="https://git.mihajlociric.com/count0/HabitGrid" target="_blank"><img src="https://img.shields.io/badge/Mirror-git.mihajlociric.com-orange?logo=gitea" alt="Gitea Mirror"></a>
+</p>
+
+---
+
+**Source code:**
+
+- [GitHub Repository](https://github.com/nagaoo0/HabitGrid)
+- [Self-hosted Mirror (Gitea)](https://git.mihajlociric.com/count0/HabitGrid)
+
+
+
 ## Features
 - GitHub-style habit grid (calendar view)
 - Streak tracking and personal bests
@@ -9,8 +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
@@ -50,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/):
 
@@ -67,10 +118,20 @@ 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.
 
 ---
 
-*Built with ❤️ by Mihajlo Ciric*
-````
+**Project Links:**
+
+- [Live Demo](https://myhabitgrid.com/)
+- [GitHub](https://github.com/nagaoo0/HabitGrid)
+- [Mirror (Gitea)](https://git.mihajlociric.com/count0/HabitGrid)
+
+---
+
+*Built with ❤️ by [Mihajlo Ciric](https://mihajlociric.com/)*

android/.gitignore

@@ -0,0 +1,101 @@
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
+
+# Generated Config files
+app/src/main/assets/capacitor.config.json
+app/src/main/assets/capacitor.plugins.json
+app/src/main/res/xml/config.xml

android/app/.gitignore

@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep

android/app/build.gradle

@@ -0,0 +1,54 @@
+apply plugin: 'com.android.application'
+
+android {
+    namespace "com.habitgrid.app"
+    compileSdk rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "com.habitgrid.app"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        aaptOptions {
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
+    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}

android/app/capacitor.build.gradle

@@ -0,0 +1,19 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_21
+      targetCompatibility JavaVersion.VERSION_21
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}

android/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java

@@ -0,0 +1,26 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import android.content.Context;
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.platform.app.InstrumentationRegistry;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+
+    @Test
+    public void useAppContext() throws Exception {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+        assertEquals("com.getcapacitor.app", appContext.getPackageName());
+    }
+}

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation"
+            android:name=".MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask"
+            android:exported="true">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths"></meta-data>
+        </provider>
+    </application>
+
+    <!-- Permissions -->
+
+    <uses-permission android:name="android.permission.INTERNET" />
+</manifest>

android/app/src/main/java/com/habitgrid/app/MainActivity.java

@@ -0,0 +1,5 @@
+package com.habitgrid.app;
+
+import com.getcapacitor.BridgeActivity;
+
+public class MainActivity extends BridgeActivity {}

android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml

@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1" />
+</vector>

android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillColor="#26A69A"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+</vector>

android/app/src/main/res/layout/activity_main.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <WebView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>

android/app/src/main/res/values/strings.xml

@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <string name="app_name">HabitGrid</string>
+    <string name="title_activity_main">HabitGrid</string>
+    <string name="package_name">com.habitgrid.app</string>
+    <string name="custom_url_scheme">com.habitgrid.app</string>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>

android/app/src/main/res/xml/file_paths.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="my_images" path="." />
+    <cache-path name="my_cache_images" path="." />
+</paths>

android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java

@@ -0,0 +1,18 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import org.junit.Test;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+
+    @Test
+    public void addition_isCorrect() throws Exception {
+        assertEquals(4, 2 + 2);
+    }
+}

android/build.gradle

@@ -0,0 +1,29 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:8.7.2'
+        classpath 'com.google.gms:google-services:4.4.2'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}

android/capacitor.settings.gradle

@@ -0,0 +1,3 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')

android/gradle.properties

@@ -0,0 +1,22 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-all.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,252 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
+' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle

@@ -0,0 +1,5 @@
+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'

android/variables.gradle

@@ -0,0 +1,16 @@
+ext {
+    minSdkVersion = 23
+    compileSdkVersion = 35
+    targetSdkVersion = 35
+    androidxActivityVersion = '1.9.2'
+    androidxAppCompatVersion = '1.7.0'
+    androidxCoordinatorLayoutVersion = '1.2.0'
+    androidxCoreVersion = '1.15.0'
+    androidxFragmentVersion = '1.8.4'
+    coreSplashScreenVersion = '1.0.1'
+    androidxWebkitVersion = '1.12.1'
+    junitVersion = '4.13.2'
+    androidxJunitVersion = '1.2.1'
+    androidxEspressoCoreVersion = '3.6.1'
+    cordovaAndroidVersion = '10.1.1'
+}

capacitor.config.ts

@@ -0,0 +1,12 @@
+import { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.habitgrid.app',
+  appName: 'HabitGrid',
+  webDir: 'dist',
+  server: {
+    androidScheme: 'https',
+  },
+};
+
+export default config;

index.html

@@ -5,8 +5,42 @@
     <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." />
-    <link rel="icon" type="image/png" href="/assets/fav.png" />
-    <link rel="stylesheet" href="/src/index.css" />
+    <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" />
   </head>
   <body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100">
     <div id="root"></div>

package.json

@@ -6,7 +6,11 @@
   "scripts": {
     "dev": "vite --host :: --port 3000",
     "build": "vite build",
-    "preview": "vite preview --host :: --port 3000"
+    "preview": "vite preview --host :: --port 3000",
+    "cap:init": "npx cap init HabitGrid com.habitgrid.app --web-dir=dist",
+    "cap:sync": "npx cap sync",
+    "cap:android": "npx cap add android",
+    "cap:open": "npx cap open android"
   },
   "dependencies": {
     "@hello-pangea/dnd": "^18.0.1",
@@ -21,6 +25,7 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
+    "@supabase/supabase-js": "^2.75.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.0.0",
     "framer-motion": "^10.16.4",
@@ -38,6 +43,9 @@
     "@babel/parser": "^7.27.0",
     "@babel/traverse": "^7.27.0",
     "@babel/types": "^7.27.0",
+    "@capacitor/android": "^7.4.3",
+    "@capacitor/cli": "^7.4.3",
+    "@capacitor/core": "^7.4.3",
     "@types/node": "^20.8.3",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

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/App.jsx

@@ -1,15 +1,19 @@
 import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, HashRouter, Routes, Route } from 'react-router-dom';
+import { Capacitor } from '@capacitor/core';
 import { Helmet } from 'react-helmet';
 import HomePage from './pages/HomePage';
 import HabitDetailPage from './pages/HabitDetailPage';
 import AddEditHabitPage from './pages/AddEditHabitPage';
 import SettingsPage from './pages/SettingsPage';
+import LoginProvidersPage from './pages/LoginProvidersPage';
 import { Toaster } from './components/ui/toaster';
 
 function App() {
+  const isNative = Capacitor?.isNativePlatform?.() ?? false;
+  const RouterComponent = isNative ? HashRouter : BrowserRouter;
   return (
-    <Router>
+    <RouterComponent>
       <Helmet>
         <title>HabitGrid - Commit to yourself, one square at a time</title>
         <meta name="description" content="Track your habits with a beautiful GitHub-style contribution grid. Build streaks, visualize progress, and commit to yourself daily." />
@@ -21,10 +25,11 @@ function App() {
           <Route path="/add" element={<AddEditHabitPage />} />
           <Route path="/edit/:id" element={<AddEditHabitPage />} />
           <Route path="/settings" element={<SettingsPage />} />
+          <Route path="/login-providers" element={<LoginProvidersPage />} />
         </Routes>
         <Toaster />
       </div>
-    </Router>
+    </RouterComponent>
   );
 }
 

src/components/HabitCard.jsx

@@ -6,6 +6,14 @@ import { Button } from './ui/button';
 import MiniGrid from './MiniGrid';
 import AnimatedCounter from './AnimatedCounter';
 
+
+// Helper to get streak icon from localStorage or fallback
+function getStreakIcon() {
+  const icon = typeof window !== 'undefined' ? localStorage.getItem('streakIcon') : null;
+  if (!icon || icon === 'flame') return <Flame className="w-4 h-4 text-orange-500" />;
+  return <span className="w-4 h-4 text-lg align-text-bottom" role="img" aria-label="Streak Icon">{icon}</span>;
+}
+
 const HabitCard = ({ habit, onUpdate }) => {
   const navigate = useNavigate();
 
@@ -27,11 +35,11 @@ const HabitCard = ({ habit, onUpdate }) => {
           </div>
           <div className="flex items-center gap-4 text-sm text-muted-foreground">
             <div className="flex items-center gap-1">
-              <Flame className="w-4 h-4 text-orange-500" />
-                <span><AnimatedCounter value={habit.currentStreak || 0} duration={800} /> day streak</span>
+              {getStreakIcon()}
+              <span><AnimatedCounter value={habit.currentStreak || 0} duration={800} /> day streak</span>
             </div>
             <span>•</span>
-              <span>Personal Record: <AnimatedCounter value={habit.longestStreak || 0} duration={800} /> days</span>
+            <span>Personal Record: <AnimatedCounter value={habit.longestStreak || 0} duration={800} /> days</span>
           </div>
         </div>
         <Button

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/storage';
+import { toggleCompletion, getAuthUser } from '../lib/datastore';
 
 const HabitGrid = ({ habit, onUpdate, fullView = false }) => {
   const frozenDays = getFrozenDays(habit.completions);
@@ -38,9 +38,28 @@ const HabitGrid = ({ habit, onUpdate, fullView = false }) => {
     }
   }, []);
 
-  const handleCellClick = (date) => {
-    toggleCompletion(habit.id, formatDate(date));
-    onUpdate();
+  const handleCellClick = async (date) => {
+    const dateStr = formatDate(date);
+    const user = await getAuthUser();
+    if (user) {
+      // Optimistically update completions for instant UI
+      const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+      const idx = habits.findIndex(h => h.id === habit.id);
+      if (idx !== -1) {
+        const completions = Array.isArray(habits[idx].completions) ? [...habits[idx].completions] : [];
+        const cidx = completions.indexOf(dateStr);
+        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();
+    }
   };
 
   return (

src/components/MiniGrid.jsx

@@ -13,10 +13,34 @@ function lightenColor(hex, percent) {
   return `rgb(${r},${g},${b})`;
 }
 import { Flame } from 'lucide-react';
+// Helpers to get custom icons from localStorage or fallback
+function getStreakIcon() {
+  if (typeof window === 'undefined') return (
+    <span className="flex items-center justify-center w-full h-full">
+      <Flame className="w-4 h-4 drop-shadow-lg" />
+    </span>
+  );
+  const icon = localStorage.getItem('streakIcon');
+  if (!icon || icon === 'flame') return (
+    <span className="flex items-center justify-center w-full h-full">
+      <Flame className="w-4 h-4 drop-shadow-lg" />
+    </span>
+  );
+  return (
+    <span className="flex items-center justify-center w-full h-full">
+      <span className="text-lg" role="img" aria-label="Streak Icon">{icon}</span>
+    </span>
+  );
+}
+function getFreezeIcon() {
+  if (typeof window === 'undefined') return '❄️';
+  const icon = localStorage.getItem('freezeIcon');
+  return icon || '❄️';
+}
 import { motion } from 'framer-motion';
 import { getColorIntensity, isToday, formatDate } from '../lib/utils-habit';
 import { getFrozenDays } from '../lib/utils-habit';
-import { toggleCompletion } from '../lib/storage';
+import { toggleCompletion, getAuthUser } from '../lib/datastore';
 import { toast } from './ui/use-toast';
 
 const MiniGrid = ({ habit, onUpdate }) => {
@@ -45,8 +69,26 @@ const MiniGrid = ({ habit, onUpdate }) => {
     const dateStr = formatDate(date);
     const isTodayCell = isToday(date);
     const wasCompleted = habit.completions.includes(dateStr);
-    toggleCompletion(habit.id, dateStr);
-    onUpdate();
+    const user = await getAuthUser();
+    if (user) {
+      // Optimistically update completions for instant UI
+      const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+      const idx = habits.findIndex(h => h.id === habit.id);
+      if (idx !== -1) {
+        const completions = Array.isArray(habits[idx].completions) ? [...habits[idx].completions] : [];
+        const cidx = completions.indexOf(dateStr);
+        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();
+    }
     // Only show encouragement toast if validating (adding) today's dot
     if (isTodayCell && !wasCompleted) {
       try {
@@ -122,7 +164,7 @@ const MiniGrid = ({ habit, onUpdate }) => {
                       }}
                       transition={{ duration: 0.7, ease: 'easeInOut' }}
                     >
-                      ❄️
+                      {getFreezeIcon()}
                     </motion.span>
                   )}
                   {/* Flame icon for full streak days */}
@@ -147,6 +189,7 @@ const MiniGrid = ({ habit, onUpdate }) => {
                       whileTap={{ scale: 1.2, rotate: 0 }}
                     >
                       <motion.div
+                        className="flex items-center justify-center w-full h-full"
                         animate={{ rotate: [0, 12, -12, 0] }}
                         transition={{
                           repeat: Infinity,
@@ -154,12 +197,8 @@ const MiniGrid = ({ habit, onUpdate }) => {
                           duration: 2,
                           ease: 'easeInOut',
                         }}
-                        style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}
                       >
-                        <Flame
-                          className="w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 drop-shadow-lg"
-                          style={{ color: lightenColor(habit.color, 0.4), filter: 'brightness(1.3) drop-shadow(0 0 6px white)' }}
-                        />
+                        {getStreakIcon()}
                       </motion.div>
                     </motion.span>
                   )}

src/components/ui/separator.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+/**
+ * Separator component for dividing sections in the UI.
+ * Renders a horizontal line with optional styling for light/dark mode.
+ */
+export function Separator({ className = '' }) {
+  return (
+    <div className="w-full my-8 mx-auto flex flex-col items-center" style={{ maxWidth: '96%' }}>
+      <div className="w-full h-0.5 bg-slate-100 dark:bg-slate-800 mb-1 rounded-full" />
+      <hr
+        className={`w-full border-0 h-1 rounded-lg bg-slate-200 dark:bg-slate-700 shadow-sm ${className}`}
+        style={{ boxShadow: '0 1px 4px 0 rgba(0,0,0,0.04)' }}
+        role="separator"
+        aria-orientation="horizontal"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,292 @@
+// 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';
+
+const SYNC_FLAG = 'habitgrid_remote_synced_at';
+
+export const getAuthUser = async () => {
+  if (!isSupabaseConfigured()) return null;
+  const { data } = await supabase.auth.getUser();
+  return data?.user ?? null;
+};
+
+export const isLoggedIn = async () => Boolean(await getAuthUser());
+
+// Remote schema suggestion:
+// 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()
+// };
+
+export async function getHabits() {
+  if (!(await isLoggedIn())) return local.getHabits();
+
+  const { data: user } = await supabase.auth.getUser();
+  const userId = user?.user?.id;
+  if (!userId) return local.getHabits();
+
+  const { data, error } = await supabase
+    .from('habits')
+    .select('id,user_id,name,color,category,completions,current_streak,longest_streak,sort_order,updated_at,created_at')
+    .eq('user_id', userId)
+    .order('sort_order');
+  if (error) {
+    console.warn('Supabase getHabits error, falling back to local:', error.message);
+    return local.getHabits();
+  }
+  // Map to local shape
+  return (data || []).map(row => ({
+    id: row.id,
+    name: row.name,
+    color: row.color,
+    category: row.category || '',
+    completions: row.completions || [],
+    currentStreak: row.current_streak ?? 0,
+    longestStreak: row.longest_streak ?? 0,
+    sortOrder: row.sort_order ?? 0,
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+  }));
+}
+
+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,
+    category: habit.category || '',
+    completions: habit.completions || [],
+    current_streak: habit.currentStreak ?? 0,
+    longest_streak: habit.longestStreak ?? 0,
+    sort_order: habit.sortOrder ?? 0,
+    created_at: now,
+    updated_at: now,
+  };
+  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, id });
+  }
+  return {
+    id: data.id,
+    sortOrder: data.sort_order ?? 0,
+    ...habit,
+  };
+}
+
+export async function updateHabit(id, updates) {
+  if (!(await isLoggedIn())) return local.updateHabit(id, updates);
+  const now = new Date().toISOString();
+  const patch = {
+    ...(updates.name !== undefined ? { name: updates.name } : {}),
+    ...(updates.color !== undefined ? { color: updates.color } : {}),
+    ...(updates.category !== undefined ? { category: updates.category } : {}),
+    ...(updates.completions !== undefined ? { completions: updates.completions } : {}),
+    ...(updates.currentStreak !== undefined ? { current_streak: updates.currentStreak } : {}),
+    ...(updates.longestStreak !== undefined ? { longest_streak: updates.longestStreak } : {}),
+    ...(updates.sortOrder !== undefined ? { sort_order: updates.sortOrder } : {}),
+    updated_at: now,
+  };
+  const { error } = await supabase.from('habits').update(patch).eq('id', id);
+  if (error) {
+    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) {
+  if (!(await isLoggedIn())) return local.deleteHabit(id);
+  const { error } = await supabase.from('habits').delete().eq('id', id);
+  if (error) {
+    console.warn('Supabase deleteHabit error, writing local:', error.message);
+    return local.deleteHabit(id);
+  }
+}
+
+export async function toggleCompletion(habitId, dateStr) {
+  if (!(await isLoggedIn())) return local.toggleCompletion(habitId, dateStr);
+  // Fetch current then delegate to local logic for streak calc
+  const habits = await getHabits();
+  const target = habits.find(h => h.id === habitId);
+  if (!target) return;
+  const completions = Array.isArray(target.completions) ? [...target.completions] : [];
+  const idx = completions.indexOf(dateStr);
+  if (idx > -1) completions.splice(idx, 1); else completions.push(dateStr);
+  return updateHabit(habitId, { completions });
+}
+
+
+export async function exportData() {
+  // Always export from local snapshot for portability
+  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) {
+  // Import to local
+  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() {
+  // Clear local only; remote data persists per account
+  return local.clearAllData();
+}
+
+// Sync: push local data to remote when user first logs in or when no remote data exists
+export async function syncLocalToRemoteIfNeeded() {
+  if (!isSupabaseConfigured()) return;
+  const user = await getAuthUser();
+  if (!user) return;
+
+  // Always upsert all local habits to Supabase after login
+  let habits = local.getHabits();
+  if (habits.length === 0) return localStorage.setItem(SYNC_FLAG, new Date().toISOString());
+  habits = ensureUUIDs(habits);
+  localStorage.setItem('habitgrid_data', JSON.stringify(habits));
+  const rows = habits.map(h => ({
+    id: h.id,
+    user_id: user.id,
+    name: h.name,
+    color: h.color,
+    category: h.category || '',
+    completions: h.completions || [],
+    current_streak: h.currentStreak ?? 0,
+    longest_streak: h.longestStreak ?? 0,
+    sort_order: h.sortOrder ?? 0,
+    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());
+}
+
+
+// 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();
+  const localHabits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+
+  // 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

@@ -1,5 +1,16 @@
+// Local storage remains the primary source. If Supabase auth is active, we mirror writes to the remote DB.
+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);
@@ -15,15 +26,62 @@ export const getHabit = (id) => {
   return habits.find(h => h.id === id);
 };
 
+const nowIso = () => new Date().toISOString();
+
+const remoteMirrorUpsert = async (habit) => {
+  try {
+    if (!supabase) return;
+    const { data: auth } = await supabase.auth.getUser();
+    if (!auth?.user) return;
+    const row = {
+      id: habit.id,
+      name: habit.name ?? habit.title ?? habit?.name,
+      color: habit.color,
+      category: habit.category || '',
+      completions: habit.completions || [],
+      current_streak: habit.currentStreak ?? 0,
+      longest_streak: habit.longestStreak ?? 0,
+      sort_order: habit.sortOrder ?? 0,
+      created_at: habit.createdAt || nowIso(),
+      updated_at: habit.updatedAt || nowIso(),
+      user_id: auth.user.id,
+    };
+    await supabase.from('habits').upsert(row, { onConflict: 'id' });
+  } catch (e) {
+    console.warn('Remote mirror upsert failed:', e?.message || e);
+  }
+};
+
+const remoteMirrorDelete = async (id) => {
+  try {
+    if (!supabase) return;
+    const { data: auth } = await supabase.auth.getUser();
+    if (!auth?.user) return;
+  await supabase.from('habits').delete().eq('id', id).eq('user_id', auth.user.id);
+  } catch (e) {
+    console.warn('Remote mirror delete failed:', e?.message || e);
+  }
+};
+
 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(),
-    sortOrder: habits.length,
+    id,
+    sortOrder: habit.sortOrder ?? habits.length,
+    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;
 };
 
@@ -31,8 +89,9 @@ export const updateHabit = (id, updates) => {
   const habits = getHabits();
   const index = habits.findIndex(h => h.id === id);
   if (index !== -1) {
-    habits[index] = { ...habits[index], ...updates };
+    habits[index] = { ...habits[index], ...updates, updatedAt: nowIso() };
     localStorage.setItem(STORAGE_KEY, JSON.stringify(habits));
+    remoteMirrorUpsert(habits[index]);
   }
 };
 
@@ -40,6 +99,7 @@ export const deleteHabit = (id) => {
   const habits = getHabits();
   const filtered = habits.filter(h => h.id !== id);
   localStorage.setItem(STORAGE_KEY, JSON.stringify(filtered));
+  remoteMirrorDelete(id);
 };
 
 export const toggleCompletion = (habitId, dateStr) => {
@@ -138,4 +198,8 @@ export const importData = (jsonString) => {
 
 export const clearAllData = () => {
   localStorage.removeItem(STORAGE_KEY);
-};
+};
+
+// Re-export a thin Supabase-aware facade so the rest of the app can import from 'lib/storage'
+// without refactors. We keep original names but allow higher-level modules to import the remote-aware versions.
+export * as remote from './datastore';

src/lib/supabase.js

@@ -0,0 +1,11 @@
+import { createClient } from '@supabase/supabase-js';
+
+// Expect env vars provided by Vite
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+export const supabase = (supabaseUrl && supabaseAnonKey)
+  ? createClient(supabaseUrl, supabaseAnonKey)
+  : null;
+
+export const isSupabaseConfigured = () => Boolean(supabase);

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';
@@ -7,7 +15,13 @@ import { Input } from '../components/ui/input';
 import { Label } from '../components/ui/label';
 import { useToast } from '../components/ui/use-toast';
 import ColorPicker from '../components/ColorPicker';
-import { getHabit, saveHabit, updateHabit } from '../lib/storage';
+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();
@@ -37,7 +51,7 @@ const AddEditHabitPage = () => {
     }
   }, [id, isEdit, navigate, toast]);
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
 
     if (!name.trim()) {
@@ -49,14 +63,24 @@ const AddEditHabitPage = () => {
       return;
     }
 
+    // Optimistic local update
     if (isEdit) {
-      updateHabit(id, { name: name.trim(), color, category: category.trim() });
+      // Update localStorage directly for instant UI
+      const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+      const idx = habits.findIndex(h => h.id === id);
+      if (idx !== -1) {
+        habits[idx] = { ...habits[idx], name: name.trim(), color, category: category.trim() };
+        localStorage.setItem('habitgrid_data', JSON.stringify(habits));
+      }
+      updateHabit(id, { name: name.trim(), color, category: category.trim() }); // background sync
       toast({
         title: "✅ Habit updated",
         description: "Your habit has been updated successfully.",
       });
     } else {
-      saveHabit({
+      // Single source of truth: delegate to datastore; it will handle local or remote as needed
+      const newHabit = {
+        id: generateUUID(),
         name: name.trim(),
         color,
         category: category.trim(),
@@ -64,7 +88,9 @@ const AddEditHabitPage = () => {
         currentStreak: 0,
         longestStreak: 0,
         createdAt: new Date().toISOString(),
-      });
+        updatedAt: new Date().toISOString(),
+      };
+      await saveHabit(newHabit);
       toast({
         title: "✅ Habit created",
         description: "Your new habit is ready to track!",

src/pages/HabitDetailPage.jsx

@@ -6,7 +6,13 @@ import { Button } from '../components/ui/button';
 import { useToast } from '../components/ui/use-toast';
 import HabitGrid from '../components/HabitGrid';
 import DeleteHabitDialog from '../components/DeleteHabitDialog';
-import { getHabit, deleteHabit } from '../lib/storage';
+import { getHabits, deleteHabit } 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);
+}
 import AnimatedCounter from '../components/AnimatedCounter';
 
 const HabitDetailPage = () => {
@@ -44,7 +50,11 @@ const HabitDetailPage = () => {
   };
 
   const handleDelete = () => {
-    deleteHabit(id);
+    // Optimistic local delete
+    const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+    const filtered = habits.filter(h => h.id !== id);
+    localStorage.setItem('habitgrid_data', JSON.stringify(filtered));
+    deleteHabit(id); // background sync
     toast({
       title: "✅ Habit deleted",
       description: "Your habit has been removed successfully.",

src/pages/HomePage.jsx

@@ -1,20 +1,23 @@
 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';
 import AnimatedCounter from '../components/AnimatedCounter';
 import GitActivityGrid from '../components/GitActivityGrid';
 import { getGitEnabled } from '../lib/git';
-import { getHabits, updateHabit } from '../lib/storage';
+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(() => {
@@ -22,8 +25,29 @@ const HomePage = () => {
   });
 
   useEffect(() => {
-    loadHabits();
-    setGitEnabled(getGitEnabled());
+    (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(() => {
+      syncLocalToRemoteIfNeeded();
+    }, 10000);
+    // Listen for remote sync event to reload habits
+    const syncListener = () => loadHabits();
+    window.addEventListener('habitgrid-sync-updated', syncListener);
+    return () => {
+      clearInterval(interval);
+      window.removeEventListener('habitgrid-sync-updated', syncListener);
+    };
   }, []);
 
   useEffect(() => {
@@ -36,9 +60,9 @@ const HomePage = () => {
     }
   }, [darkMode]);
 
-  const loadHabits = () => {
-    const loadedHabits = getHabits();
-    // Sort by sortOrder if present, then fallback to createdAt
+  const loadHabits = async () => {
+    // Always read from local for instant UI
+    const loadedHabits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
     loadedHabits.sort((a, b) => {
       if (a.sortOrder !== undefined && b.sortOrder !== undefined) return a.sortOrder - b.sortOrder;
       if (a.sortOrder !== undefined) return -1;
@@ -61,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">
@@ -100,6 +133,7 @@ const HomePage = () => {
           </div>
         </motion.div>
 
+        
         {/* Stats Overview */}
         {habits.length > 0 && (
           <motion.div
@@ -134,6 +168,8 @@ const HomePage = () => {
           </motion.div>
         )}
 
+        
+
         {/* Habits List */}
         {/* Grouped Habits by Category, collapsible, and uncategorized habits outside */}
         <DragDropContext
@@ -152,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, 100); // reload after update
+            // Fire remote updates async, do not block UI
+            Promise.allSettled(remoteUpdates);
           }}
         >
           <div className="space-y-6">
@@ -308,31 +361,69 @@ const HomePage = () => {
           </div>
         </DragDropContext>
 
-        {/* Empty State */}
+        {/* Empty State or Loading Buffer */}
         {habits.length === 0 && (
-          <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>
+          loading && loggedIn ? (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              className="flex flex-col items-center justify-center py-20"
+            >
+              <div className="w-16 h-16 mb-6 flex items-center justify-center">
+                <span className="inline-block w-12 h-12 border-4 border-emerald-400 border-t-transparent rounded-full animate-spin"></span>
+              </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>
+
+              {/* 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
@@ -350,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>
   );

src/pages/LoginProvidersPage.jsx

@@ -0,0 +1,105 @@
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { supabase, isSupabaseConfigured } from '../lib/supabase';
+import { Button } from '../components/ui/button';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const PROVIDERS = [
+  { id: 'github', label: 'GitHub' },
+  { id: 'discord', label: 'Discord' },
+  { id: 'google', label: 'Google' },
+  // Add more providers here if needed
+];
+
+
+const LoginProvidersPage = () => {
+  const navigate = useNavigate();
+
+  // Ensure theme is correct on mount
+  React.useEffect(() => {
+    const theme = localStorage.getItem('theme');
+    document.documentElement.classList.remove('light', 'dark');
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.add('light');
+    }
+  }, []);
+
+  const handleLogin = async (provider) => {
+    if (!isSupabaseConfigured()) return alert('Supabase not configured. Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY');
+    const { error } = await supabase.auth.signInWithOAuth({ provider });
+    if (error) alert(error.message);
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+      <motion.div
+        initial={{ opacity: 0, y: 40, scale: 0.95 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ type: 'spring', stiffness: 200, damping: 20 }}
+        className="max-w-md w-full p-8 bg-white dark:bg-slate-800 rounded-3xl shadow-2xl border border-slate-200 dark:border-slate-700 relative overflow-hidden"
+      >
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+        >
+          <h1 className="text-3xl font-extrabold mb-2 text-center bg-gradient-to-r from-blue-600 to-indigo-500 bg-clip-text text-transparent drop-shadow-lg">Sync Your Habits</h1>
+          <p className="text-center text-base text-slate-600 dark:text-slate-300 mb-6 animate-fadeIn">
+            Log in to securely sync your habits across all your devices. Choose your preferred provider below.<br/>
+            <span className="text-xs text-blue-500">(No posts or data will be shared without your consent.)</span>
+          </p>
+        </motion.div>
+        <motion.div
+          initial="hidden"
+          animate="visible"
+          variants={{
+            hidden: { opacity: 0, y: 20 },
+            visible: { opacity: 1, y: 0, transition: { staggerChildren: 0.08 } },
+          }}
+          className="flex flex-col gap-4 mb-4"
+        >
+          {PROVIDERS.map((p, i) => (
+            <motion.div
+              key={p.id}
+              initial={{ opacity: 0, x: -30 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.15 + i * 0.08, type: 'spring', stiffness: 180 }}
+            >
+              <Button
+                onClick={() => handleLogin(p.id)}
+                className="w-full py-3 text-lg font-semibold tracking-wide shadow-md hover:scale-105 transition-transform duration-150"
+              >
+                {`Login with ${p.label}`}
+              </Button>
+            </motion.div>
+          ))}
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+        >
+          <Button variant="ghost" className="mt-4 w-full" onClick={() => navigate(-1)}>
+            Cancel
+          </Button>
+        </motion.div>
+        {/* Decorative animated background shapes */}
+        <motion.div
+          className="absolute -top-10 -left-10 w-32 h-32 bg-blue-200 dark:bg-blue-900 rounded-full opacity-30 blur-2xl animate-pulse"
+          animate={{ scale: [1, 1.2, 1], rotate: [0, 30, 0] }}
+          transition={{ repeat: Infinity, duration: 6, ease: 'easeInOut' }}
+        />
+        <motion.div
+          className="absolute -bottom-10 -right-10 w-40 h-40 bg-indigo-200 dark:bg-indigo-900 rounded-full opacity-20 blur-2xl animate-pulse"
+          animate={{ scale: [1, 1.15, 1], rotate: [0, -20, 0] }}
+          transition={{ repeat: Infinity, duration: 7, ease: 'easeInOut' }}
+        />
+      </motion.div>
+    </div>
+  );
+};
+
+export default LoginProvidersPage;

src/pages/SettingsPage.jsx

@@ -1,15 +1,53 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
-import { ArrowLeft, Moon, Sun, Bell, Download, Upload, Trash2, Plus, Trash, GitBranch } from 'lucide-react';
+import { ArrowLeft, Moon, Sun, Bell, Download, Upload, Trash2, Plus, Trash, GitBranch, Flame } from 'lucide-react';
 import { Button } from '../components/ui/button';
+import { Separator } from '../components/ui/separator';
 import { Switch } from '../components/ui/switch';
 import { Label } from '../components/ui/label';
 import { useToast } from '../components/ui/use-toast';
-import { exportData, importData, clearAllData } from '../lib/storage';
+import { exportData, importData, clearAllData } from '../lib/datastore';
+import { supabase, isSupabaseConfigured } from '../lib/supabase';
+import { syncLocalToRemoteIfNeeded } from '../lib/datastore';
 import { addIntegration, getIntegrations, removeIntegration, getGitEnabled, setGitEnabled, fetchAllGitActivity, getCachedGitActivity } from '../lib/git';
 
+const DEFAULT_STREAK_ICON = 'flame';
+const DEFAULT_FREEZE_ICON = '❄️';
+
+const ICON_OPTIONS = [
+  { label: 'Flame', value: 'flame', icon: <Flame className="inline w-5 h-5 text-orange-500 align-text-bottom" /> },
+  { label: 'Fire (emoji)', value: '🔥', icon: <span role="img" aria-label="Fire" className="inline text-lg align-text-bottom">🔥</span> },
+  { label: 'Star', value: '⭐', icon: <span role="img" aria-label="Star" className="inline text-lg align-text-bottom">⭐</span> },
+  { label: 'Trophy', value: '🏆', icon: <span role="img" aria-label="Trophy" className="inline text-lg align-text-bottom">🏆</span> },
+  { label: 'Rocket', value: '🚀', icon: <span role="img" aria-label="Rocket" className="inline text-lg align-text-bottom">🚀</span> },
+  { label: 'Rose', value: '🌹', icon: <span role="img" aria-label="Rose" className="inline text-lg align-text-bottom">🌹</span> },
+];
+const FREEZE_OPTIONS = [
+  { label: 'Snowflake', value: '❄️', icon: <span role="img" aria-label="Snowflake" className="inline text-lg align-text-bottom">❄️</span> },
+  { label: 'Ice', value: '🧊', icon: <span role="img" aria-label="Ice" className="inline text-lg align-text-bottom">🧊</span> },
+  { label: 'Snowman', value: '☃️', icon: <span role="img" aria-label="Snowman" className="inline text-lg align-text-bottom">☃️</span> },
+  { label: 'Cloud', value: '☁️', icon: <span role="img" aria-label="Cloud" className="inline text-lg align-text-bottom">☁️</span> },
+  { label: 'Withered Flower', value: '🥀', icon: <span role="img" aria-label="Withered Flower" className="inline text-lg align-text-bottom">🥀</span> },
+];
+
 const SettingsPage = () => {
+  // Appearance customization state
+  const [streakIcon, setStreakIcon] = useState(() => localStorage.getItem('streakIcon') || DEFAULT_STREAK_ICON);
+  const [freezeIcon, setFreezeIcon] = useState(() => localStorage.getItem('freezeIcon') || DEFAULT_FREEZE_ICON);
+  // Save icon selections to localStorage
+  useEffect(() => {
+    localStorage.setItem('streakIcon', streakIcon);
+  }, [streakIcon]);
+  useEffect(() => {
+    localStorage.setItem('freezeIcon', freezeIcon);
+  }, [freezeIcon]);
+  // Render icon for preview
+  const renderStreakIcon = (icon) => {
+    if (icon === 'flame') return <Flame className="inline w-5 h-5 text-orange-500 align-text-bottom" />;
+    return <span className="inline text-lg align-text-bottom">{icon}</span>;
+  };
+  const renderFreezeIcon = (icon) => <span className="inline text-lg align-text-bottom">{icon}</span>;
   const navigate = useNavigate();
   const { toast } = useToast();
   const [darkMode, setDarkMode] = useState(() => {
@@ -21,6 +59,27 @@ const SettingsPage = () => {
   const [form, setForm] = useState({ provider: 'github', baseUrl: '', username: '', token: '' });
   const [{ lastSync }, setCacheInfo] = useState(getCachedGitActivity());
   const [syncing, setSyncing] = useState(false);
+  const [userEmail, setUserEmail] = useState('');
+
+  useEffect(() => {
+    if (!isSupabaseConfigured()) return;
+    supabase.auth.getUser().then(({ data }) => setUserEmail(data?.user?.email || ''));
+    const { data: sub } = supabase.auth.onAuthStateChange((_event, session) => {
+      setUserEmail(session?.user?.email || '');
+      if (session?.user) syncLocalToRemoteIfNeeded();
+    });
+    return () => sub?.subscription?.unsubscribe();
+  }, []);
+
+  const handleLogin = async (provider) => {
+    if (!isSupabaseConfigured()) return alert('Supabase not configured. Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY');
+    const { error } = await supabase.auth.signInWithOAuth({ provider });
+    if (error) alert(error.message);
+  };
+
+  const handleLogout = async () => {
+    await supabase?.auth?.signOut();
+  };
 
   useEffect(() => {
     if (darkMode) {
@@ -142,14 +201,25 @@ const SettingsPage = () => {
           >
             <ArrowLeft className="w-5 h-5" />
           </Button>
-          <div>
+          <div className="flex-1">
             <h1 className="text-2xl font-bold">Settings</h1>
             <p className="text-sm text-muted-foreground">Customize your experience</p>
           </div>
+          {isSupabaseConfigured() && (
+            userEmail ? (
+              <div className="flex items-center gap-2 ml-auto">
+                <span className="text-sm text-muted-foreground">{userEmail}</span>
+                <Button variant="outline" size="sm" onClick={handleLogout} className="rounded-full">Logout</Button>
+              </div>
+            ) : (
+              <Button onClick={() => navigate('/login-providers')} variant="outline" size="sm" className="rounded-full ml-auto">Login to Sync</Button>
+            )
+          )}
         </motion.div>
 
         <div className="space-y-4">
 
+
           {/* Appearance */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
@@ -158,19 +228,63 @@ const SettingsPage = () => {
             className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-700"
           >
             <h2 className="text-lg font-semibold mb-4">Appearance</h2>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                {darkMode ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
-                <div>
-                  <Label htmlFor="dark-mode" className="text-base">Dark Mode</Label>
-                  <p className="text-sm text-muted-foreground">Toggle dark theme</p>
+            <div className="flex flex-col gap-6">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  {darkMode ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
+                  <div>
+                    <Label htmlFor="dark-mode" className="text-base">Dark Mode</Label>
+                    <p className="text-sm text-muted-foreground">Toggle dark theme</p>
+                  </div>
                 </div>
+                <Switch
+                  id="dark-mode"
+                  checked={darkMode}
+                  onCheckedChange={toggleDarkMode}
+                />
+              </div>
+
+              {/* Streak Icon Picker */}
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  {renderStreakIcon(streakIcon)}
+                  <div>
+                    <Label htmlFor="streak-icon" className="text-base">Streak Icon</Label>
+                    <p className="text-sm text-muted-foreground">Choose your streak icon</p>
+                  </div>
+                </div>
+                <select
+                  id="streak-icon"
+                  className="border rounded-md p-2 bg-white dark:bg-slate-900 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors"
+                  value={streakIcon}
+                  onChange={e => setStreakIcon(e.target.value)}
+                >
+                  {ICON_OPTIONS.map(opt => (
+                    <option key={opt.value} value={opt.value}>{opt.label}</option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Freeze Icon Picker */}
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  {renderFreezeIcon(freezeIcon)}
+                  <div>
+                    <Label htmlFor="freeze-icon" className="text-base">Freeze Icon</Label>
+                    <p className="text-sm text-muted-foreground">Choose your freeze icon</p>
+                  </div>
+                </div>
+                <select
+                  id="freeze-icon"
+                  className="border rounded-md p-2 bg-white dark:bg-slate-900 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors"
+                  value={freezeIcon}
+                  onChange={e => setFreezeIcon(e.target.value)}
+                >
+                  {FREEZE_OPTIONS.map(opt => (
+                    <option key={opt.value} value={opt.value}>{opt.label}</option>
+                  ))}
+                </select>
               </div>
-              <Switch
-                id="dark-mode"
-                checked={darkMode}
-                onCheckedChange={toggleDarkMode}
-              />
             </div>
           </motion.div>
 
@@ -254,7 +368,7 @@ const SettingsPage = () => {
             <div className="grid sm:grid-cols-4 gap-2 mb-3">
               <div>
                 <Label className="text-xs">Provider</Label>
-                <select className="w-full bg-transparent border rounded-md p-2" value={form.provider} onChange={e => setForm({ ...form, provider: e.target.value })}>
+                <select className="w-full border rounded-md p-2 bg-white dark:bg-slate-900 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors" value={form.provider} onChange={e => setForm({ ...form, provider: e.target.value })}>
                   <option value="github">GitHub</option>
                   <option value="gitlab">GitLab</option>
                   <option value="gitea">Gitea</option>
@@ -310,15 +424,34 @@ const SettingsPage = () => {
           >
             <h2 className="text-lg font-semibold mb-2">About HabitGrid</h2>
             <p className="text-sm text-muted-foreground mb-4">
-              Version 1.0.0 • Built with ❤️ for habit builders
+              Version 1.1.0 • Built by <a href="https://www.mihajlociric.com" target="_blank" rel="noopener noreferrer" className="underline text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"> Mihajlo Ciric </a> with ❤️ 
             </p>
+            <Separator />
             <p className="text-xs text-muted-foreground">
-              Track your habits with a beautiful GitHub-style contribution grid. 
-              Build streaks, visualize progress, and commit to yourself daily.
+              This project is open-source and available on <a href="https://github.com/nagaoo0/HabitGrid" target="_blank" rel="noopener noreferrer" className="underline text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">GitHub</a> and mirrored on <a href="https://git.mihajlociric.com/count0/HabitGrid" target="_blank" rel="noopener noreferrer" className="underline text-orange-600 hover:text-orange-800 dark:text-orange-400 dark:hover:text-orange-300">git.mihajlociric.com</a>. If you enjoy using HabitGrid, please consider starring the repository and sharing it with others!
+              If you encounter any issues or have suggestions, feel free to open an issue or contribute.
             </p>
           </motion.div>
         </div>
       </div>
+      {/* GitHub Icon Button at the bottom */}
+      <div className="flex justify-center gap-4 mt-8">
+        <a href="https://github.com/nagaoo0/HabitGrid" target="_blank" rel="noopener noreferrer">
+          <Button variant="ghost" size="icon" className="rounded-full" aria-label="GitHub Repository">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" 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>
+          </Button>
+        </a>
+        <a href="https://git.mihajlociric.com/count0/HabitGrid" target="_blank" rel="noopener noreferrer">
+          <Button variant="ghost" size="icon" className="rounded-full" aria-label="Git Mirror Repository">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className="w-7 h-7" fill="none">
+              <rect width="32" height="32" rx="16" fill="#F7931E"/>
+              <path d="M16 7C11.03 7 7 11.03 7 16C7 20.97 11.03 25 16 25C20.97 25 25 20.97 25 16C25 11.03 20.97 7 16 7ZM16 23.5C12.14 23.5 9 20.36 9 16.5C9 12.64 12.14 9.5 16 9.5C19.86 9.5 23 12.64 23 16.5C23 20.36 19.86 23.5 16 23.5ZM16 12C14.07 12 12.5 13.57 12.5 15.5C12.5 17.43 14.07 19 16 19C17.93 19 19.5 17.43 19.5 15.5C19.5 13.57 17.93 12 16 12Z" fill="#fff"/>
+            </svg>
+          </Button>
+        </a>
+      </div>
     </div>
   );
 };

supabase/habits_table.csv

@@ -0,0 +1,2 @@
+id,user_id,name,color,category,completions,current_streak,longest_streak,sort_order,created_at,updated_at
+3fa85f64-5717-4562-b3fc-2c963f66afa6,11111111-1111-1111-1111-111111111111,Sample Habit,#22c55e,Health,"[""2025-01-01"",""2025-01-02""]",2,5,0,2025-01-01T00:00:00Z,2025-01-02T00:00:00Z

supabase/habits_table.sql

@@ -0,0 +1,57 @@
+-- Create habits table with proper types, defaults, constraints, and RLS
+-- Run this in Supabase SQL editor
+
+-- Enable gen_random_uuid()
+create extension if not exists pgcrypto;
+
+create table if not exists public.habits (
+  id uuid primary key default gen_random_uuid(),
+  user_id uuid not null references auth.users(id) on delete cascade,
+  name text not null,
+  color text,
+  category text,
+  completions jsonb not null default '[]'::jsonb,
+  current_streak integer not null default 0,
+  longest_streak integer not null default 0,
+  sort_order integer not null default 0,
+  created_at timestamptz not null default now(),
+  updated_at timestamptz not null default now()
+);
+
+-- Useful indexes
+create index if not exists idx_habits_user_id on public.habits(user_id);
+create index if not exists idx_habits_user_sort on public.habits(user_id, sort_order);
+
+-- Automatically update updated_at
+create or replace function public.set_updated_at()
+returns trigger language plpgsql as $$
+begin
+  new.updated_at = now();
+  return new;
+end;
+$$;
+
+drop trigger if exists trg_habits_set_updated_at on public.habits;
+create trigger trg_habits_set_updated_at
+before update on public.habits
+for each row execute function public.set_updated_at();
+
+-- Row Level Security
+alter table public.habits enable row level security;
+
+-- Policies: each user can only access their own rows
+drop policy if exists habits_select on public.habits;
+create policy habits_select on public.habits
+for select using (auth.uid() = user_id);
+
+drop policy if exists habits_insert on public.habits;
+create policy habits_insert on public.habits
+for insert with check (auth.uid() = user_id);
+
+drop policy if exists habits_update on public.habits;
+create policy habits_update on public.habits
+for update using (auth.uid() = user_id) with check (auth.uid() = user_id);
+
+drop policy if exists habits_delete on public.habits;
+create policy habits_delete on public.habits
+for delete using (auth.uid() = user_id);