CountersUpdate

This document outlines the standards of behavior expected from community members, including pledges for inclusivity and guidelines for enforcement of the code.

.env.example

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/codeql.yml

@@ -0,0 +1,99 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '27 4 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Add any setup steps before running the `github/codeql-action/init` action.
+    # This includes steps like installing compilers or runtimes (`actions/setup-node`
+    # or others). This is typically only required for manual builds.
+    # - name: Setup runtime (example)
+    #   uses: actions/setup-example@v1
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v4
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - name: Run manual build steps
+      if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v4
+      with:
+        category: "/language:${{matrix.language}}"

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+mixaciric000@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

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/)*

index.html

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

package-lock.json

@@ -8,6 +8,7 @@
       "name": "habitgrid",
       "version": "0.0.0",
       "dependencies": {
+        "@hello-pangea/dnd": "^18.0.1",
         "@radix-ui/react-alert-dialog": "^1.0.5",
         "@radix-ui/react-avatar": "^1.0.3",
         "@radix-ui/react-checkbox": "^1.0.4",
@@ -19,6 +20,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",
@@ -2008,7 +2010,6 @@
       "version": "7.28.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
       "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -2622,6 +2623,23 @@
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
       "license": "MIT"
     },
+    "node_modules/@hello-pangea/dnd": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
+      "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.26.7",
+        "css-box-model": "^1.2.1",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^9.2.0",
+        "redux": "^5.0.1"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -4043,6 +4061,80 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.75.1",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.75.1.tgz",
+      "integrity": "sha512-zktlxtXstQuVys/egDpVsargD9hQtG20CMdtn+mMn7d2Ulkzy2tgUT5FUtpppvCJtd9CkhPHO/73rvi5W6Am5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.75.1",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.75.1.tgz",
+      "integrity": "sha512-xO+01SUcwVmmo67J7Htxq8FmhkYLFdWkxfR/taxBOI36wACEUNQZmroXGPl4PkpYxBO7TaDsRHYGxUpv9zTKkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15"
+      }
+    },
+    "node_modules/@supabase/node-fetch": {
+      "version": "2.6.15",
+      "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
+      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.75.1",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.75.1.tgz",
+      "integrity": "sha512-FiYBD0MaKqGW8eo4Xqu7/100Xm3ddgh+3qHtqS18yQRoglJTFRQCJzY1xkrGS0JFHE2YnbjL6XCiOBXiG8DK4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.75.1",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.75.1.tgz",
+      "integrity": "sha512-lBIJ855bUsBFScHA/AY+lxIFkubduUvmwbagbP1hq0wDBNAsYdg3ql80w8YmtXCDjkCwlE96SZqcFn7BGKKJKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15",
+        "@types/phoenix": "^1.6.6",
+        "@types/ws": "^8.18.1",
+        "ws": "^8.18.2"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.75.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.75.1.tgz",
+      "integrity": "sha512-WdGEhroflt5O398Yg3dpf1uKZZ6N3CGloY9iGsdT873uWbkQKoP0wG8mtx98dh0fhj6dAlzBqOAvnlV12cJfzA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "2.6.15"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.75.1",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.75.1.tgz",
+      "integrity": "sha512-GEPVBvjQimcMd9z5K1eTKTixTRb6oVbudoLQ9JKqTUJnR6GQdBU4OifFZean1AnHfsQwtri1fop2OWwsMv019w==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.75.1",
+        "@supabase/functions-js": "2.75.1",
+        "@supabase/node-fetch": "2.6.15",
+        "@supabase/postgrest-js": "2.75.1",
+        "@supabase/realtime-js": "2.75.1",
+        "@supabase/storage-js": "2.75.1"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -4113,7 +4205,6 @@
       "version": "20.19.21",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.21.tgz",
       "integrity": "sha512-CsGG2P3I5y48RPMfprQGfy4JPRZ6csfC3ltBZSRItG3ngggmNY/qs2uZKp4p9VbrpqNNSMzUZNFZKzgOGnd/VA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -4126,6 +4217,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
+      "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
@@ -4161,6 +4258,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.62.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
@@ -5306,6 +5418,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "license": "MIT",
+      "dependencies": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
     "node_modules/css-line-break": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
@@ -8230,6 +8351,12 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -8282,6 +8409,29 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -8423,6 +8573,12 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -9418,6 +9574,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -9478,6 +9640,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -9681,7 +9849,6 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
@@ -9942,6 +10109,22 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -10157,6 +10340,27 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview --host :: --port 3000"
   },
   "dependencies": {
+    "@hello-pangea/dnd": "^18.0.1",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -20,6 +21,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",

public/encouragements.json

@@ -1,102 +1,209 @@
 [
-  "Great job! Keep going!",
-  "You're on fire! 🔥",
-  "Consistency is key!",
-  "Amazing streak!",
-  "You crushed it today!",
-  "Small steps, big results!",
-  "Habit hero!",
-  "Progress, not perfection!",
-  "Every dot counts!",
-  "Keep up the momentum!",
-  "You’re building something awesome!",
-  "One step closer to your goal!",
+  "You did it! 🎉",
+  "High five! ✋",
+  "You’re awesome!",
+  "Keep rocking!",
+  "Level up! 🚀",
+  "You’re a legend!",
+  "That’s how it’s done!",
+  "You’re crushing it!",
+  "Go you!",
   "You’re unstoppable!",
-  "Keep the streak alive!",
-  "You’re making it happen!",
-  "Your effort is inspiring!",
-  "You’re a streak superstar!",
-  "Every day matters!",
-  "You’re a habit legend!",
-  "You’re doing fantastic!",
-  "Keep shining!",
-  "You’re a role model!",
-  "You’re a champion!",
-  "You’re making progress!",
+  "Boom! Achievement unlocked!",
+  "You’re a superstar!",
+  "You make it look easy!",
+  "You’re a force of nature!",
+  "You’re a wizard! 🧙‍♂️",
+  "You’re a ninja! 🥷",
+  "You’re a rockstar! 🎸",
+  "You’re a champion! 🏆",
+  "You’re a hero! 🦸‍♂️",
+  "You’re a genius!",
+  "You’re a boss!",
+  "You’re a machine!",
+  "You’re a powerhouse!",
+  "You’re a trailblazer!",
+  "You’re a game changer!",
   "You’re a winner!",
-  "You’re a streak master!",
-  "You’re a habit machine!",
-  "You’re a streak builder!",
-  "You’re a streak star!",
-  "You’re a streak hero!",
-  "You’re a streak ninja!",
-  "You’re a streak wizard!",
-  "You’re a streak warrior!",
-  "You’re a streak explorer!",
-  "You’re a streak adventurer!",
-  "You’re a streak conqueror!",
-  "You’re a streak champion!",
-  "You’re a streak genius!",
-  "You’re a streak guru!",
-  "You’re a streak expert!",
-  "You’re a streak pro!",
-  "You’re a streak veteran!",
-  "You’re a streak rookie!",
-  "You’re a streak all-star!",
-  "You’re a streak MVP!",
-  "You’re a streak superstar!",
-  "You’re a streak rockstar!",
-  "You’re a streak dynamo!",
-  "You’re a streak powerhouse!",
-  "You’re a streak inspiration!",
-  "You’re a streak motivator!",
-  "You’re a streak leader!",
-  "You’re a streak innovator!",
-  "You’re a streak creator!",
-  "You’re a streak builder!",
-  "You’re a streak achiever!",
-  "You’re a streak doer!",
-  "You’re a streak finisher!",
-  "You’re a streak starter!",
-  "You’re a streak closer!",
-  "You’re a streak winner!",
-  "You’re a streak believer!",
-  "You’re a streak dreamer!",
-  "You’re a streak thinker!",
-  "You’re a streak planner!",
-  "You’re a streak organizer!",
-  "You’re a streak strategist!",
-  "You’re a streak tactician!",
-  "You’re a streak visionary!",
-  "You’re a streak optimist!",
-  "You’re a streak realist!",
-  "You’re a streak enthusiast!",
-  "You’re a streak supporter!",
-  "You’re a streak encourager!",
-  "You’re a streak helper!",
-  "You’re a streak friend!",
-  "You’re a streak teammate!",
-  "You’re a streak partner!",
-  "You’re a streak ally!",
-  "You’re a streak companion!",
-  "You’re a streak buddy!",
-  "You’re a streak pal!",
-  "You’re a streak mate!",
-  "You’re a streak peer!",
-  "You’re a streak colleague!",
-  "You’re a streak associate!",
-  "You’re a streak collaborator!",
-  "You’re a streak contributor!",
-  "You’re a streak participant!",
-  "You’re a streak member!",
-  "You’re a streak player!",
-  "You’re a streak contender!",
-  "You’re a streak competitor!",
-  "You’re a streak challenger!",
-  "You’re a streak rival!",
-  "You’re a streak victor!",
-  "You’re a streak survivor!",
-  "You’re a streak thriver!",
-  "You’re a streak overcomer!",
-  "You’re a streak achiever!"
+  "You’re a motivator!",
+  "You’re a creator!",
+  "You’re a dreamer!",
+  "You’re a doer!",
+  "You’re a finisher!",
+  "You’re a Firestarter!",
+  "You’re a closer!",
+  "You’re a believer!",
+  "You’re a planner!",
+  "You’re an organizer!",
+  "You’re a strategist!",
+  "You’re a visionary!",
+  "You’re an optimist!",
+  "You’re an enthusiast!",
+  "You’re a player!",
+  "You’re a contender!",
+  "You’re a competitor!",
+  "You’re a challenger!",
+  "You’re a victor!",
+  "You’re a survivor!",
+  "You’re a thriver!",
+  "You’re an overcomer!",
+  "You’re a high achiever!",
+  "Not all those who wander are lost. —J.R.R. Tolkien",
+  "So it goes. —Kurt Vonnegut",
+  "The only way out is through. —Robert Frost",
+  "You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose. —Dr. Seuss",
+  "Courage is found in unlikely places. —J.R.R. Tolkien",
+  "Do or do not. There is no try. —Yoda",
+  "It’s dangerous to go alone! Take this. —The Legend of Zelda",
+  "The game is afoot! —Sherlock Holmes",
+  "To the stars who listen and the dreams that are answered. —Sarah J. Maas",
+  "All we have to decide is what to do with the time that is given us. —Gandalf",
+  "Even the smallest person can change the course of the future. —Galadriel",
+  "Winter passed and the world grew up. —C.S. Lewis",
+  "The secret of getting ahead is getting started. —Mark Twain",
+  "Not all heroes wear capes.",
+  "Achievement unlocked!",
+  "You rolled a natural 20!",
+  "The odds are ever in your favor.",
+  "You found the last Horcrux!",
+  "You solved the puzzle before Watson!",
+  "You’re the plot twist everyone needed.",
+  "You’re the missing page in the story.",
+  "You’re the last piece of the puzzle.",
+  "You’re the answer to the riddle.",
+  "You’re the light at the end of the tunnel.",
+  "You’re the hero of your own epic.",
+  "You’re the author of your next chapter.",
+  "You’re the main character energy!",
+  "You’re the chosen one (but in a good way).",
+  "You’re the unexpected ending everyone loves.",
+  "You’re the plot armor in a tough scene.",
+  "You’re the magic in the mundane.",
+  "You’re the hope in the dystopia.",
+  "You’re the clever twist in the mystery.",
+  "You’re the spark in the revolution.",
+  "You’re the prophecy fulfilled.",
+  "You’re the legend in the making.",
+  "You’re the muse for tomorrow’s story.",
+  "You’re the ink in the pen of progress.",
+  "You’re the page-turner in a slow chapter.",
+  "You’re the secret passage in the labyrinth.",
+  "You’re the dragon’s gold at the end of the quest.",
+  "You’re the ring-bearer on the journey.",
+  "You’re the phoenix rising from the ashes.",
+  "You’re the sword in the stone.",
+  "You’re the magic bean that grew the beanstalk.",
+  "You’re the time traveler who fixed the timeline.",
+  "You’re the detective who cracked the case.",
+  "You’re the rebel with a cause.",
+  "You’re the wizard who remembered the spell.",
+  "You’re the hobbit who left the Shire.",
+  "You’re the poet who found the rhyme.",
+  "You’re the knight who saved the day.",
+  "You’re the bard who inspired the crowd.",
+  "You’re the scientist who made the breakthrough.",
+  "You’re the explorer who found the map.",
+  "You’re the inventor of your own future.",
+  "You’re the captain of your own starship.",
+  "You’re the one who knocks (success).",
+  "You’re the last Jedi in the room.",
+  "You’re the answer to the ultimate question of life, the universe, and everything.",
+  "You’re the one who remembered the towel. —Hitchhiker’s Guide",
+  "You’re the spark that started the fire.",
+  "You’re the wind beneath the wings.",
+  "You’re the punchline to the cosmic joke.",
+  "You’re the plot device that saves the day.",
+  "You’re the deus ex machina of your own story.",
+  "You’re the twist ending everyone talks about.",
+  "You’re the secret ingredient in the recipe for success.",
+  "You’re the magic feather that lets Dumbo fly.",
+  "You’re the golden ticket in the chocolate bar.",
+  "You’re the red pill in the Matrix.",
+  "You’re the portal to the next adventure.",
+  "You’re the key to the locked door.",
+  "You’re the map to the hidden treasure.",
+  "You’re the light saber in the darkness.",
+  "You’re the spell that works every time.",
+  "You’re the last page in the book—and it’s a happy ending!",
+  "You’re the chosen one, Neo!",
+  "Live long and prosper! 🖖",
+  "To infinity and beyond!",
+  "You’re a wizard, Harry!",
+  "Winter is NOT coming—you’re winning!",
+  "You’ve got the power of Grayskull!",
+  "You’re the hero Gotham deserves!",
+  "Victory tastes sweeter than lembas bread.",
+  "The Sorting Hat would put you in Gryffindor today.",
+  "The cake is not a lie—success is real!",
+  "The odds are ever in your favor.",
+  "Achievement unlocked!",
+  "The Force is strong with this one.",
+  "Elementary, my dear Watson!",
+  "The journey is the reward.",
+  "Allons-y!",
+  "The adventure begins anew.",
+  "The stars look very different today.",
+  "The game is afoot!",
+  "The world is your oyster.",
+  "The pen is mightier—and you’re writing history.",
+  "The quest was perilous, but you prevailed.",
+  "The answer is 42.",
+  "The road goes ever on and on.",
+  "The magic is in the doing.",
+  "The universe just gave you a thumbs up.",
+  "The next chapter is looking epic.",
+  "The finish line is just the beginning.",
+  "The secret passage opened!",
+  "The plot thickens—in your favor.",
+  "The prophecy has been fulfilled.",
+  "The spell worked perfectly.",
+  "The treasure chest is open!",
+  "The portal to greatness is unlocked.",
+  "The time machine landed on success.",
+  "The dragon has been tamed.",
+  "The labyrinth has been solved.",
+  "The riddle is cracked.",
+  "The beacon is lit—Gondor calls for aid!",
+  "The ring is destroyed—peace returns to Middle-earth.",
+  "The Millennium Falcon made the jump to lightspeed.",
+  "The Bat-Signal is shining bright.",
+  "The TARDIS is ready for the next adventure.",
+  "The wand chose the wizard.",
+  "The shield held strong.",
+  "The sword gleams with victory.",
+  "The map led to treasure.",
+  "The spellbook is open to the right page.",
+  "The dice rolled in your favor.",
+  "The stars aligned for you.",
+  "The quest log is complete.",
+  "The story ends happily ever after.",
+  "The legend grows.",
+  "The adventure continues.",
+  "The world just got a little brighter.",
+  "The muse is smiling.",
+  "The universe applauds your effort.",
+  "The crowd goes wild!",
+  "The confetti is falling!",
+  "The fireworks are for you!",
+  "The applause is thunderous!",
+  "The curtain rises on your next act.",
+  "The credits roll—and you’re the star!",
+  "Foundation built, success inevitable. —Isaac Asimov",
+  "The robots would approve your logic. —Isaac Asimov",
+  "Hari Seldon predicted this win! —Isaac Asimov",
+  "You navigated the Sprawl like Case. —William Gibson",
+  "The future is now—cyberspace conquered. —William Gibson",
+  "You’re jacked in and winning. —William Gibson",
+  "The spice must flow—and so does your progress. —Frank Herbert",
+  "Fear is the mind-killer, but you crushed it. —Frank Herbert",
+  "You walked without rhythm and avoided the sandworm. —Frank Herbert",
+  "You claimed the Iron Throne of achievement. —George R.R. Martin",
+  "A mind needs books as a sword needs a whetstone. —George R.R. Martin",
+  "You survived the game of habits—winter is not coming! —George R.R. Martin",
+  "Chaos isn’t a pit, it’s a ladder—and you climbed it. —George R.R. Martin",
+  "Progress is coming. —George R.R. Martin",
+  "You bent the arc of history—psychohistory style. —Isaac Asimov",
+  "You hacked the matrix and rewrote the code. —William Gibson",
+  "You rode the worm to victory. —Frank Herbert",
+  "You played the game of thrones and won. —George R.R. Martin"
 ]

public/robots.txt

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

public/sitemap.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://myhabitgrid.com/</loc>
+  </url>
+  <url>
+    <loc>https://myhabitgrid.com/add</loc>
+  </url>
+  <url>
+    <loc>https://myhabitgrid.com/settings</loc>
+  </url>
+  <url>
+    <loc>https://myhabitgrid.com/login-providers</loc>
+  </url>
+</urlset>

src/App.jsx

@@ -5,6 +5,7 @@ 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() {
@@ -21,6 +22,7 @@ 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>

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,7 +35,7 @@ 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" />
+              {getStreakIcon()}
               <span><AnimatedCounter value={habit.currentStreak || 0} duration={800} /> day streak</span>
             </div>
             <span>•</span>

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 { getColorIntensity, isToday, formatDate, getWeekdayLabel, getFrozenDays, calculateStreaks } from '../lib/utils-habit';
+import { toggleCompletion, getAuthUser } from '../lib/datastore';
 
 const HabitGrid = ({ habit, onUpdate, fullView = false }) => {
   const frozenDays = getFrozenDays(habit.completions);
@@ -38,9 +38,33 @@ const HabitGrid = ({ habit, onUpdate, fullView = false }) => {
     }
   }, []);
 
-  const handleCellClick = (date) => {
-    toggleCompletion(habit.id, formatDate(date));
+  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;
+        // Recalculate streaks so counters reflect immediately
+        const { currentStreak, longestStreak } = calculateStreaks(completions);
+        const prevRecord = habits[idx].longestStreak || 0;
+        habits[idx].currentStreak = currentStreak;
+        habits[idx].longestStreak = Math.max(longestStreak, prevRecord);
+        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 { getColorIntensity, isToday, formatDate, calculateStreaks } 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,31 @@ const MiniGrid = ({ habit, onUpdate }) => {
     const dateStr = formatDate(date);
     const isTodayCell = isToday(date);
     const wasCompleted = habit.completions.includes(dateStr);
-    toggleCompletion(habit.id, dateStr);
+    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;
+        // Recalculate streaks locally so counters update immediately
+        const { currentStreak, longestStreak } = calculateStreaks(completions);
+        const prevRecord = habits[idx].longestStreak || 0;
+        habits[idx].currentStreak = currentStreak;
+        habits[idx].longestStreak = Math.max(longestStreak, prevRecord);
+        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 +169,7 @@ const MiniGrid = ({ habit, onUpdate }) => {
                       }}
                       transition={{ duration: 0.7, ease: 'easeInOut' }}
                     >
-                      ❄️
+                      {getFreezeIcon()}
                     </motion.span>
                   )}
                   {/* Flame icon for full streak days */}
@@ -147,6 +194,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 +202,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,312 @@
+// 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 { calculateStreaks } from './utils-habit';
+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();
+  const user = data?.user ?? null;
+  // Mark that the user has logged in at least once so we can prompt later if they're logged out
+  try {
+    if (user) localStorage.setItem('habitgrid_ever_logged_in', '1');
+  } catch (e) {
+    // ignore localStorage errors in restrictive environments
+  }
+  return user;
+};
+
+// Helper to check whether the user has ever logged in from this browser
+export const hasEverLoggedIn = () => {
+  try {
+    return localStorage.getItem('habitgrid_ever_logged_in') === '1';
+  } catch (e) {
+    return false;
+  }
+};
+
+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);
+  // Calculate streaks and preserve personal record (do not decrease longest)
+  const { currentStreak, longestStreak } = calculateStreaks(completions);
+  const nextLongest = Math.max(longestStreak, target.longestStreak || 0);
+  return updateHabit(habitId, { completions, currentStreak, longestStreak: nextLongest });
+}
+
+
+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/git.js

@@ -180,6 +180,7 @@ async function fetchGitHubEvents({ baseUrl = 'https://api.github.com', username,
   return counts;
 }
 
+//This bullshit is still not working, but at least it is not crashing everything
 async function fetchGiteaLike({ baseUrl, username, token }, days = 365) {
   let authMode = token ? 'token' : null; // 'token' | 'bearer' | null
   const counts = {};
@@ -228,6 +229,7 @@ async function fetchGiteaLike({ baseUrl, username, token }, days = 365) {
   return counts;
 }
 
+//gitlab fetch should work now
 async function fetchGitLabEvents({ baseUrl = 'https://gitlab.com', token }, days = 365) {
   const headers = { 'Accept': 'application/json', 'PRIVATE-TOKEN': token };
   const counts = {};

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,14 +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(),
+    id,
+    sortOrder: habit.sortOrder ?? habits.length,
+    createdAt: habit.createdAt || nowIso(),
+    updatedAt: nowIso(),
   };
+  if (existingIndex >= 0) {
+    habits[existingIndex] = newHabit;
+  } else {
     habits.push(newHabit);
+  }
   localStorage.setItem(STORAGE_KEY, JSON.stringify(habits));
+  remoteMirrorUpsert(newHabit);
   return newHabit;
 };
 
@@ -30,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]);
   }
 };
 
@@ -39,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) => {
@@ -65,65 +126,7 @@ export const toggleCompletion = (habitId, dateStr) => {
   });
 };
 
-import { getFrozenDays } from './utils-habit.js';
-const calculateStreaks = (completions) => {
-  if (completions.length === 0) {
-    return { currentStreak: 0, longestStreak: 0 };
-  }
-  // Only use frozen days for streak calculation
-  const frozenDays = getFrozenDays(completions);
-  const allValid = Array.from(new Set([...completions, ...frozenDays]));
-  const sortedDates = allValid
-    .map(d => new Date(d))
-    .sort((a, b) => b - a);
-
-  let currentStreak = 0;
-  let longestStreak = 0;
-  let tempStreak = 1;
-
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const yesterday = new Date(today);
-  yesterday.setDate(yesterday.getDate() - 1);
-
-  const mostRecent = sortedDates[0];
-  mostRecent.setHours(0, 0, 0, 0);
-
-  if (mostRecent.getTime() === today.getTime() || mostRecent.getTime() === yesterday.getTime()) {
-    currentStreak = 1;
-    for (let i = 1; i < sortedDates.length; i++) {
-      const current = new Date(sortedDates[i]);
-      current.setHours(0, 0, 0, 0);
-      const previous = new Date(sortedDates[i - 1]);
-      previous.setHours(0, 0, 0, 0);
-      const diffDays = Math.floor((previous - current) / (1000 * 60 * 60 * 24));
-      if (diffDays === 1) {
-        currentStreak++;
-        tempStreak++;
-      } else {
-        break;
-      }
-    }
-  }
-
-  tempStreak = 1;
-  for (let i = 1; i < sortedDates.length; i++) {
-    const current = new Date(sortedDates[i]);
-    current.setHours(0, 0, 0, 0);
-    const previous = new Date(sortedDates[i - 1]);
-    previous.setHours(0, 0, 0, 0);
-    const diffDays = Math.floor((previous - current) / (1000 * 60 * 60 * 24));
-    if (diffDays === 1) {
-      tempStreak++;
-      longestStreak = Math.max(longestStreak, tempStreak);
-    } else {
-      tempStreak = 1;
-    }
-  }
-
-  longestStreak = Math.max(longestStreak, currentStreak, 1);
-  return { currentStreak, longestStreak };
-}
+import { calculateStreaks } from './utils-habit.js';
 
 export const exportData = () => {
   const habits = getHabits();
@@ -138,3 +141,7 @@ 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/lib/utils-habit.js

@@ -40,6 +40,71 @@ export const getWeekdayLabel = (dayIndex) => {
   const labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   return labels[dayIndex];
 };
+  
+  // Calculate current and longest streaks from a list of completion date strings (YYYY-MM-DD)
+  // Rules:
+  // - Streaks count consecutive days
+  // - Today or yesterday must be present to have a non-zero current streak
+  // - We also include "frozen" days (one missed day per month sandwiched by completions)
+  // - Longest streak is at least 1 if there is at least one completion
+  export function calculateStreaks(completions) {
+    if (!Array.isArray(completions) || completions.length === 0) {
+      return { currentStreak: 0, longestStreak: 0 };
+    }
+    // Only use frozen days for streak calculation
+    const frozenDays = getFrozenDays(completions);
+    const allValid = Array.from(new Set([...(completions || []), ...frozenDays]));
+    const sortedDates = allValid
+      .map(d => new Date(d))
+      .sort((a, b) => b - a);
+
+    let currentStreak = 0;
+    let longestStreak = 0;
+    let tempStreak = 1;
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+
+    const mostRecent = sortedDates[0];
+    mostRecent.setHours(0, 0, 0, 0);
+
+    if (mostRecent.getTime() === today.getTime() || mostRecent.getTime() === yesterday.getTime()) {
+      currentStreak = 1;
+      for (let i = 1; i < sortedDates.length; i++) {
+        const current = new Date(sortedDates[i]);
+        current.setHours(0, 0, 0, 0);
+        const previous = new Date(sortedDates[i - 1]);
+        previous.setHours(0, 0, 0, 0);
+        const diffDays = Math.floor((previous - current) / (1000 * 60 * 60 * 24));
+        if (diffDays === 1) {
+          currentStreak++;
+          tempStreak++;
+        } else {
+          break;
+        }
+      }
+    }
+
+    tempStreak = 1;
+    for (let i = 1; i < sortedDates.length; i++) {
+      const current = new Date(sortedDates[i]);
+      current.setHours(0, 0, 0, 0);
+      const previous = new Date(sortedDates[i - 1]);
+      previous.setHours(0, 0, 0, 0);
+      const diffDays = Math.floor((previous - current) / (1000 * 60 * 60 * 24));
+      if (diffDays === 1) {
+        tempStreak++;
+        longestStreak = Math.max(longestStreak, tempStreak);
+      } else {
+        tempStreak = 1;
+      }
+    }
+
+    longestStreak = Math.max(longestStreak, currentStreak, 1);
+    return { currentStreak, longestStreak };
+  }
   // Returns array of frozen days (date strings) for a given completions array
   export function getFrozenDays(completions) {
     // Map: month string -> frozen day string

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();
@@ -17,6 +31,7 @@ const AddEditHabitPage = () => {
 
   const [name, setName] = useState('');
   const [color, setColor] = useState('#22c55e');
+  const [category, setCategory] = useState('');
 
   useEffect(() => {
     if (isEdit) {
@@ -24,6 +39,7 @@ const AddEditHabitPage = () => {
       if (habit) {
         setName(habit.name);
         setColor(habit.color);
+        if (habit.category) setCategory(habit.category);
       } else {
         toast({
           title: "Habit not found",
@@ -35,7 +51,7 @@ const AddEditHabitPage = () => {
     }
   }, [id, isEdit, navigate, toast]);
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
 
     if (!name.trim()) {
@@ -47,21 +63,34 @@ const AddEditHabitPage = () => {
       return;
     }
 
+    // Optimistic local update
     if (isEdit) {
-      updateHabit(id, { name: name.trim(), color });
+      // 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(),
         completions: [],
         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!",
@@ -121,6 +150,19 @@ const AddEditHabitPage = () => {
               </p>
             </div>
 
+            {/* Category Input */}
+            <div className="space-y-2">
+              <Label htmlFor="category">Category <span className="text-xs text-muted-foreground">(optional)</span></Label>
+              <Input
+                id="category"
+                placeholder="e.g., Health, Reading, Mindfulness"
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+                className="text-lg"
+                maxLength={30}
+              />
+            </div>
+
             {/* Color Picker */}
             <div className="space-y-2">
               <Label>Habit Color</Label>
@@ -137,6 +179,9 @@ const AddEditHabitPage = () => {
                     style={{ backgroundColor: color }}
                   />
                   <span className="font-medium">{name || 'Your Habit Name'}</span>
+                  {category && (
+                    <span className="ml-2 px-2 py-0.5 rounded bg-slate-200 dark:bg-slate-700 text-xs text-slate-700 dark:text-slate-200">{category}</span>
+                  )}
                 </div>
                 <div className="flex gap-1">
                   {[...Array(14)].map((_, i) => (

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,28 +1,61 @@
 import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+// ...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 } from '../lib/storage';
+import { calculateStreaks } from '../lib/utils-habit';
+import { getHabits, updateHabit, syncLocalToRemoteIfNeeded, syncRemoteToLocal, getAuthUser, hasEverLoggedIn } from '../lib/datastore';
+import { useNavigate } from 'react-router-dom';
 
 const HomePage = () => {
   const navigate = useNavigate();
   const { toast } = useToast();
   const [habits, setHabits] = useState([]);
-  const [isPremium] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [collapsedGroups, setCollapsedGroups] = useState({});
+  const [everLoggedIn, setEverLoggedIn] = useState(false);
   const [gitEnabled, setGitEnabled] = useState(getGitEnabled());
   const [darkMode, setDarkMode] = useState(() => {
     return localStorage.getItem('theme') === 'dark';
   });
 
   useEffect(() => {
-    loadHabits();
+    (async () => {
+      setLoading(true);
+      // On login, pull remote habits into localStorage
+      const user = await getAuthUser();
+      setLoggedIn(!!user);
+      // Mark whether this browser has seen a login before
+      try {
+        setEverLoggedIn(hasEverLoggedIn());
+      } catch (e) {
+        setEverLoggedIn(false);
+      }
+      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(() => {
@@ -35,23 +68,54 @@ const HomePage = () => {
     }
   }, [darkMode]);
 
-  const loadHabits = () => {
-    const loadedHabits = getHabits();
-    setHabits(loadedHabits);
+  const loadHabits = async () => {
+    // Always read from local for instant UI
+    const loadedHabits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+    // One-time consistency pass: recompute streaks from completions if missing or outdated
+    let changed = false;
+    const updated = loadedHabits.map(h => {
+      const { currentStreak, longestStreak } = calculateStreaks(h.completions || []);
+      const nextLongest = Math.max(longestStreak, h.longestStreak || 0);
+      if ((h.currentStreak ?? 0) !== currentStreak || (h.longestStreak ?? 0) !== nextLongest) {
+        changed = true;
+        return { ...h, currentStreak, longestStreak: nextLongest };
+      }
+      return h;
+    });
+    if (changed) {
+      localStorage.setItem('habitgrid_data', JSON.stringify(updated));
+    }
+    updated.sort((a, b) => {
+      if (a.sortOrder !== undefined && b.sortOrder !== undefined) return a.sortOrder - b.sortOrder;
+      if (a.sortOrder !== undefined) return -1;
+      if (b.sortOrder !== undefined) return 1;
+      return new Date(a.createdAt || 0) - new Date(b.createdAt || 0);
+    });
+    setHabits(updated);
+    // Initialize collapsed state for new categories
+    const categories = Array.from(new Set(loadedHabits.map(h => h.category || 'Uncategorized')));
+    setCollapsedGroups(prev => {
+      const next = { ...prev };
+      categories.forEach(cat => {
+        if (!(cat in next)) next[cat] = false;
+      });
+      return next;
+    });
   };
 
   const handleAddHabit = () => {
-    if (!isPremium && habits.length >= 1000) {
-      toast({
-        title: "🔒 Premium Feature",
-        description: "Free tier limited to 1000 habits. Upgrade to unlock unlimited habits!",
-        duration: 4000,
-      });
-      return;
-    }
     navigate('/add');
   };
 
+  const handleLoginSync = () => {
+    navigate('/login-providers');
+  };
+
+  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">
@@ -91,6 +155,21 @@ const HomePage = () => {
           </div>
         </motion.div>
 
+        {/* Prompt previously-signed-in users to re-authenticate if currently logged out */}
+        {!loggedIn && everLoggedIn && (
+          <motion.div
+            initial={{ opacity: 0, y: -6 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="max-w-6xl mx-auto mb-6 p-4 bg-yellow-50 dark:bg-yellow-900/40 rounded-lg border border-yellow-100 dark:border-yellow-800 flex items-center justify-between"
+          >
+            <div className="text-sm text-yellow-800 dark:text-yellow-200">Looks like you were previously signed in. Sign in again to keep your habits synced across devices.</div>
+            <div className="flex items-center gap-2">
+              <Button size="sm" onClick={() => navigate('/login-providers')}>Sign in</Button>
+              <Button size="sm" variant="ghost" onClick={() => { localStorage.removeItem('habitgrid_ever_logged_in'); setEverLoggedIn(false); }}>Dismiss</Button>
+            </div>
+          </motion.div>
+        )}
+
         {/* Stats Overview */}
         {habits.length > 0 && (
           <motion.div
@@ -126,11 +205,117 @@ const HomePage = () => {
         )}
 
         {/* Habits List */}
-        <div className="space-y-4">
-          <AnimatePresence mode="popLayout">
-            {habits.map((habit, index) => (
+        {/* Grouped Habits by Category, collapsible, and uncategorized habits outside */}
+        <DragDropContext
+          onDragEnd={result => {
+            if (!result.destination) return;
+            const { source, destination } = result;
+            // Get all habits grouped by category
+            const uncategorized = habits.filter(h => !h.category);
+            const categorized = habits.filter(h => h.category);
+            const grouped = categorized.reduce((acc, habit) => {
+              const cat = habit.category;
+              if (!acc[cat]) acc[cat] = [];
+              acc[cat].push(habit);
+              return acc;
+            }, {});
+
+            let newHabits = [...habits];
+
+            // 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') {
+                items = Array.from(uncategorized);
+                [removed] = items.splice(source.index, 1);
+              } else {
+                items = Array.from(uncategorized);
+                const sourceItems = Array.from(grouped[source.droppableId]);
+                [removed] = sourceItems.splice(source.index, 1);
+                removed.category = '';
+                grouped[source.droppableId] = sourceItems;
+              }
+              removed.category = '';
+              items.splice(destination.index, 0, removed);
+              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]) {
+              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) => {
+                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]) {
+              const sourceItems = Array.from(grouped[source.droppableId]);
+              const [removed] = sourceItems.splice(source.index, 1);
+              if (source.droppableId === destination.droppableId) {
+                sourceItems.splice(destination.index, 0, removed);
+                sourceItems.forEach((h, i) => {
+                  h.sortOrder = i;
+                  remoteUpdates.push(updateHabit(h.id, { sortOrder: i, category: h.category }));
+                });
+                grouped[source.droppableId] = sourceItems;
+              } else {
+                const destItems = Array.from(grouped[destination.droppableId] || []);
+                removed.category = destination.droppableId;
+                destItems.splice(destination.index, 0, removed);
+                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;
+              }
+              newHabits = [
+                ...uncategorized,
+                ...Object.values(grouped).flat()
+              ];
+              updateLocalOrder(newHabits);
+            }
+            // Fire remote updates async, do not block UI
+            Promise.allSettled(remoteUpdates);
+          }}
+        >
+          <div className="space-y-6">
+            {/* Uncategorized habits (no group panel) */}
+            <Droppable droppableId="uncategorized" type="HABIT">
+              {(provided) => (
+                <div ref={provided.innerRef} {...provided.droppableProps} className="space-y-4">
+                  {habits.filter(h => !h.category).map((habit, index) => (
+                    <Draggable key={habit.id} draggableId={habit.id} index={index}>
+                      {(provided, snapshot) => (
+                        <div
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          style={{ ...provided.draggableProps.style, zIndex: snapshot.isDragging ? 10 : undefined }}
+                        >
                           <motion.div
-                key={habit.id}
                             initial={{ opacity: 0, y: 20 }}
                             animate={{ opacity: 1, y: 0 }}
                             exit={{ opacity: 0, scale: 0.95 }}
@@ -138,12 +323,92 @@ const HomePage = () => {
                           >
                             <HabitCard habit={habit} onUpdate={loadHabits} />
                           </motion.div>
+                        </div>
+                      )}
+                    </Draggable>
                   ))}
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+            {/* Group panels for named categories */}
+            {Object.entries(
+              habits.filter(h => h.category).reduce((acc, habit) => {
+                const cat = habit.category;
+                if (!acc[cat]) acc[cat] = [];
+                acc[cat].push(habit);
+                return acc;
+              }, {})
+            ).map(([category, groupHabits], groupIdx) => (
+              <div key={category} className="bg-white/60 dark:bg-slate-800/60 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700">
+                <button
+                  className="w-full flex items-center justify-between px-6 py-3 text-lg font-semibold focus:outline-none select-none hover:bg-slate-100 dark:hover:bg-slate-900 rounded-2xl transition"
+                  onClick={() => setCollapsedGroups(prev => ({ ...prev, [category]: !prev[category] }))}
+                  aria-expanded={!collapsedGroups[category]}
+                >
+                  <span>{category}</span>
+                  <span className={`transition-transform ${collapsedGroups[category] ? 'rotate-90' : ''}`}>▶</span>
+                </button>
+                <AnimatePresence initial={false}>
+                  {!collapsedGroups[category] && (
+                    <motion.div
+                      key="content"
+                      initial={{ height: 0, opacity: 0 }}
+                      animate={{ height: 'auto', opacity: 1 }}
+                      exit={{ height: 0, opacity: 0 }}
+                      transition={{ duration: 0.25 }}
+                      className="overflow-hidden"
+                    >
+                      <Droppable droppableId={category} type="HABIT">
+                        {(provided) => (
+                          <div ref={provided.innerRef} {...provided.droppableProps} className="space-y-4 px-4 pb-4">
+                            {groupHabits.map((habit, index) => (
+                              <Draggable key={habit.id} draggableId={habit.id} index={index}>
+                                {(provided, snapshot) => (
+                                  <div
+                                    ref={provided.innerRef}
+                                    {...provided.draggableProps}
+                                    {...provided.dragHandleProps}
+                                    style={{ ...provided.draggableProps.style, zIndex: snapshot.isDragging ? 10 : undefined }}
+                                  >
+                                    <motion.div
+                                      initial={{ opacity: 0, y: 20 }}
+                                      animate={{ opacity: 1, y: 0 }}
+                                      exit={{ opacity: 0, scale: 0.95 }}
+                                      transition={{ delay: index * 0.05 }}
+                                    >
+                                      <HabitCard habit={habit} onUpdate={loadHabits} />
+                                    </motion.div>
+                                  </div>
+                                )}
+                              </Draggable>
+                            ))}
+                            {provided.placeholder}
+                          </div>
+                        )}
+                      </Droppable>
+                    </motion.div>
+                  )}
                 </AnimatePresence>
               </div>
+            ))}
+          </div>
+        </DragDropContext>
 
-        {/* Empty State */}
+        {/* Empty State or Loading Buffer */}
         {habits.length === 0 && (
+          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 }}
@@ -164,7 +429,31 @@ const HomePage = () => {
                 <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={handleLoginSync}
+              size="lg"
+              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" />
+              Sync My Habits Now
+            </Button>
+          )}
+        </div>
             </motion.div>
+          )
         )}
 
         {/* Add Button */}
@@ -184,6 +473,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,6 +228,7 @@ 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 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" />}
@@ -172,6 +243,49 @@ const SettingsPage = () => {
                   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>
+            </div>
           </motion.div>
 
           {/* Notifications */}
@@ -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);