add google auth and improve look of new page

Added Freeze Day

.env.example

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

README.md

@@ -1,7 +1,24 @@
 # 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
@@ -11,6 +28,8 @@ A modern, grid-based habit tracker app inspired by GitHub contribution graphs. T
 - Responsive design (desktop & mobile)
 - Built with React, Vite, Tailwind CSS, Radix UI, and Framer Motion
 
+---
+
 ## Getting Started
 
 ### Prerequisites
@@ -20,7 +39,7 @@ A modern, grid-based habit tracker app inspired by GitHub contribution graphs. T
 ### Installation
 ```powershell
 # Clone the repository
-git clone https://github.com/yourusername/habitgrid.git
+git clone https://github.com/nagaoo0/habitgrid.git
 cd habitgrid
 
 # Install dependencies
@@ -68,9 +87,19 @@ You can easily deploy your own instance of HabitGrid using [Cloudflare Pages](ht
 5. Deploy and enjoy your own habit tracker online!
 
 ## License
+
 MIT
 
 ---
 
-*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/)*

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,9 +20,11 @@
         "@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",
+        "html2canvas": "^1.4.1",
         "lucide-react": "^0.285.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -39,11 +42,11 @@
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
         "@vitejs/plugin-react": "^4.0.3",
-        "autoprefixer": "^10.4.16",
+        "autoprefixer": "^10.4.21",
         "eslint": "^8.57.1",
         "eslint-config-react-app": "^7.0.1",
-        "postcss": "^8.4.31",
+        "postcss": "^8.5.6",
-        "tailwindcss": "^3.3.3",
+        "tailwindcss": "^3.4.18",
         "terser": "^5.39.0",
         "vite": "^7.1.9"
       }
@@ -2007,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"
@@ -2621,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",
@@ -4042,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",
@@ -4112,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"
@@ -4125,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",
@@ -4160,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",
@@ -4943,6 +5056,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.8.16",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.16.tgz",
@@ -5296,6 +5418,24 @@
         "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",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -6762,6 +6902,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -8198,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",
@@ -8250,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",
@@ -8391,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",
@@ -9349,6 +9537,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -9377,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",
@@ -9437,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",
@@ -9640,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": {
@@ -9786,6 +9994,15 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/vite": {
       "version": "7.1.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.9.tgz",
@@ -9892,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",
@@ -10107,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",
@@ -10114,20 +10368,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
-      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.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,9 +21,11 @@
     "@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",
+    "html2canvas": "^1.4.1",
     "lucide-react": "^0.285.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -40,11 +43,11 @@
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.21",
     "eslint": "^8.57.1",
     "eslint-config-react-app": "^7.0.1",
-    "postcss": "^8.4.31",
+    "postcss": "^8.5.6",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.18",
     "terser": "^5.39.0",
     "vite": "^7.1.9"
   }

public/encouragements.json

@@ -0,0 +1,102 @@
+[
+  "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’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!",
+  "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!"
+]

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

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+/**
+ * AnimatedCounter
+ * Animates a number from 0 (or start) to the target value progressively.
+ * Usage: <AnimatedCounter value={targetNumber} duration={1000} />
+ */
+function AnimatedCounter({ value, duration = 1000, start = 0, format = v => v }) {
+  const [displayValue, setDisplayValue] = useState(start);
+  const [animating, setAnimating] = useState(false);
+  const [direction, setDirection] = useState('up');
+  const rafRef = useRef();
+  const startRef = useRef(start);
+  const valueRef = useRef(value);
+  const prevValueRef = useRef(start);
+
+  useEffect(() => {
+    startRef.current = displayValue;
+    valueRef.current = value;
+    let startTime;
+    setAnimating(true);
+    setDirection(value > prevValueRef.current ? 'up' : value < prevValueRef.current ? 'down' : direction);
+    function animate(ts) {
+      if (!startTime) startTime = ts;
+      const progress = Math.min((ts - startTime) / duration, 1);
+      const current = Math.round(startRef.current + (valueRef.current - startRef.current) * progress);
+      setDisplayValue(current);
+      if (progress < 1) {
+        rafRef.current = requestAnimationFrame(animate);
+      } else {
+        setAnimating(false);
+        prevValueRef.current = current;
+      }
+    }
+    rafRef.current = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [value, duration]);
+
+  // Animation styles
+  const styles = {
+    display: 'inline-block',
+    transition: 'transform 0.4s cubic-bezier(.68,-0.55,.27,1.55), color 0.4s',
+    transform: animating ? 'scale(1.25) rotate(-5deg)' : 'scale(1)',
+    color: animating ? (direction === 'up' ? '#22c55e' : direction === 'down' ? '#ef4444' : undefined) : undefined,
+    fontWeight: animating ? 700 : undefined,
+    filter: animating ? (direction === 'up' ? 'drop-shadow(0 0 8px #22c55e88)' : direction === 'down' ? 'drop-shadow(0 0 8px #ef444488)' : undefined) : undefined,
+  };
+
+  return (
+    <span style={styles}>{format(displayValue)}</span>
+  );
+}
+
+export default AnimatedCounter;

src/components/GitActivityGrid.jsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { GitBranch } from 'lucide-react';
+import { getCachedGitActivity } from '../lib/git';
+import { formatDate, isToday, getWeekdayLabel } from '../lib/utils-habit';
+import AnimatedCounter from './AnimatedCounter';
+
+const GitActivityGrid = () => {
+  const [{ dailyCounts }, setData] = useState(() => getCachedGitActivity());
+
+  const weeks = useMemo(() => {
+    const today = new Date();
+    const todayDay = today.getDay();
+    const daysSinceMonday = (todayDay + 6) % 7;
+    const mondayThisWeek = new Date(today);
+    mondayThisWeek.setDate(today.getDate() - daysSinceMonday);
+    const weeksArray = [];
+    const totalWeeks = 52;
+    for (let week = totalWeeks - 1; week >= 0; week--) {
+      const weekDays = [];
+      const monday = new Date(mondayThisWeek);
+      monday.setDate(mondayThisWeek.getDate() - week * 7);
+      for (let day = 0; day < 7; day++) {
+        const date = new Date(monday);
+        date.setDate(monday.getDate() + day);
+        weekDays.push(date);
+      }
+      weeksArray.push(weekDays);
+    }
+    return weeksArray;
+  }, []);
+
+  const getOpacity = (count) => {
+    if (!count) return 0.15;
+    if (count < 2) return 0.35;
+    if (count < 5) return 0.6;
+    if (count < 10) return 0.8;
+    return 1;
+  };
+
+  useEffect(() => {
+    // Display current cache only; syncing is done from Settings
+    setData(getCachedGitActivity());
+  }, []);
+
+  return (
+    <div className="bg-white dark:bg-slate-800 rounded-2xl p-4 pt-0 shadow-sm border border-slate-200 dark:border-slate-700 flex flex-col items-center">
+      <div className="mb-2 text-center w-full flex items-center justify-between">
+        <div className="flex items-center gap-2 mt-4">
+          <GitBranch className="w-5 h-5" />
+          <h2 className="text-lg font-semibold">Git Activity</h2>
+        </div>
+        <div />
+      </div>
+      <div className="overflow-x-auto grid-scroll mt-2 w-full flex justify-center">
+        <div className="inline-flex gap-1 mb-4">
+          {weeks.map((week, weekIndex) => (
+            <div key={weekIndex} className="flex flex-col gap-1">
+              <div className="h-3 text-xs text-muted-foreground text-center">
+                {weekIndex % 4 === 0 && week[0].toLocaleDateString('en-US', { month: 'short' })}
+              </div>
+              {week.map((date, dayIndex) => {
+                const dateStr = formatDate(date);
+                const count = dailyCounts?.[dateStr] || 0;
+                const isTodayCell = isToday(date);
+                const isFuture = date > new Date();
+                return (
+                  <div
+                    key={dayIndex}
+                    className="habit-cell w-3 h-3 rounded-sm"
+                    style={{
+                      backgroundColor: '#3fb950',
+                      opacity: isFuture ? 0 : getOpacity(count),
+                      border: isTodayCell ? `2px solid #3fb950` : `1px solid #3fb95020`,
+                      pointerEvents: 'none',
+                      visibility: isFuture ? 'hidden' : 'visible',
+                    }}
+                    title={`${dateStr} • `}
+                  >
+                    {/* Animated commit count for tooltip */}
+                    <span style={{ display: 'none' }}>
+                      <AnimatedCounter value={count} duration={600} /> commits
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+          <div className="flex flex-col gap-1 ml-2">
+            <div className="h-3" />
+            {[1, 2, 3, 4, 5, 6, 0].map((day) => (
+              <div key={day} className="h-3 flex items-center justify-end text-xs text-muted-foreground pr-0">
+                {getWeekdayLabel(day)}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GitActivityGrid;

src/components/HabitCard.jsx

@@ -4,6 +4,15 @@ import { motion } from 'framer-motion';
 import { ChevronRight, Flame } from 'lucide-react';
 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();
@@ -26,11 +35,11 @@ const HabitCard = ({ habit, onUpdate }) => {
           </div>
           <div className="flex items-center gap-4 text-sm text-muted-foreground">
             <div className="flex items-center gap-1">
-              <Flame className="w-4 h-4 text-orange-500" />
+              {getStreakIcon()}
-              <span>{habit.currentStreak || 0} day streak</span>
+              <span><AnimatedCounter value={habit.currentStreak || 0} duration={800} /> day streak</span>
             </div>
             <span>•</span>
-            <span>Personal Record: {habit.longestStreak || 0} days</span>
+            <span>Personal Record: <AnimatedCounter value={habit.longestStreak || 0} duration={800} /> days</span>
           </div>
         </div>
         <Button

src/components/HabitGrid.jsx

@@ -1,9 +1,10 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import { motion } from 'framer-motion';
-import { getColorIntensity, isToday, formatDate, getWeekdayLabel } from '../lib/utils-habit';
+import { getColorIntensity, isToday, formatDate, getWeekdayLabel, getFrozenDays } from '../lib/utils-habit';
-import { toggleCompletion } from '../lib/storage';
+import { toggleCompletion } from '../lib/datastore';
 
 const HabitGrid = ({ habit, onUpdate, fullView = false }) => {
+  const frozenDays = getFrozenDays(habit.completions);
   const weeks = useMemo(() => {
     const today = new Date();
     // Find the Monday of the current week
@@ -29,35 +30,41 @@ const HabitGrid = ({ habit, onUpdate, fullView = false }) => {
     return weeksArray;
   }, [fullView]);
 
+  useEffect(() => {
+    // Scroll to the rightmost (most recent) week on mount
+    const gridScroll = document.querySelector('.grid-scroll');
+    if (gridScroll) {
+      gridScroll.scrollLeft = gridScroll.scrollWidth;
+    }
+  }, []);
+
   const handleCellClick = (date) => {
-    toggleCompletion(habit.id, formatDate(date));
+    const dateStr = formatDate(date);
+    // Optimistic local update
+    const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+    const idx = habits.findIndex(h => h.id === habit.id);
+    if (idx !== -1) {
+      const completions = Array.isArray(habits[idx].completions) ? [...habits[idx].completions] : [];
+      const cidx = completions.indexOf(dateStr);
+      if (cidx > -1) completions.splice(cidx, 1); else completions.push(dateStr);
+      habits[idx].completions = completions;
+      localStorage.setItem('habitgrid_data', JSON.stringify(habits));
+    }
+    toggleCompletion(habit.id, dateStr); // background sync
     onUpdate();
   };
 
   return (
-    <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-700">
+    <div className="bg-white dark:bg-slate-800 rounded-2xl p-4 pt-0 shadow-sm border border-slate-200 dark:border-slate-700 flex flex-col items-center">
-      <div className="mb-4">
+      <div className="mb-2 text-center w-full">
-        <h2 className="text-lg font-semibold mb-1">Activity Calendar</h2>
+        <h2 className="text-lg font-semibold mb-1 mt-4">Activity Calendar</h2>
         <p className="text-sm text-muted-foreground">
           Tap any day to mark it as complete
         </p>
       </div>
 
-      <div className="overflow-x-auto grid-scroll">
+      <div className="overflow-x-auto grid-scroll mt-2 w-full flex justify-center">
-        <div className="inline-flex gap-1">
+        <div className="inline-flex gap-1 mb-4">
-          {/* Weekday labels: Monday (top) to Sunday (bottom) */}
-          <div className="flex flex-col gap-1 mr-2">
-            <div className="h-3" />
-            {[1, 2, 3, 4, 5, 6, 0].map((day) => (
-              <div
-                key={day}
-                className="h-3 flex items-center justify-end text-xs text-muted-foreground pr-1"
-              >
-                {getWeekdayLabel(day)}
-              </div>
-            ))}
-          </div>
-
           {/* Grid: Monday (top) to Sunday (bottom) */}
           {weeks.map((week, weekIndex) => (
             <div key={weekIndex} className="flex flex-col gap-1">
@@ -72,13 +79,14 @@ const HabitGrid = ({ habit, onUpdate, fullView = false }) => {
                 const intensity = isCompleted ? getColorIntensity(habit.completions, dateStr) : 0;
                 const isTodayCell = isToday(date);
                 const isFuture = date > new Date();
+                const isFrozen = frozenDays.includes(dateStr);
                 return (
                   <motion.button
                     key={dayIndex}
                     whileHover={{ scale: 1.15 }}
                     whileTap={{ scale: 0.9 }}
                     onClick={() => handleCellClick(date)}
-                    className="habit-cell w-3 h-3 rounded-sm"
+                    className="habit-cell w-3 h-3 rounded-sm flex items-center justify-center"
                     style={{
                       backgroundColor: isCompleted ? habit.color : 'transparent',
                       opacity: isFuture ? 0 : (isCompleted ? 0.3 + (intensity * 0.7) : 1),
@@ -86,12 +94,29 @@ const HabitGrid = ({ habit, onUpdate, fullView = false }) => {
                       pointerEvents: isFuture ? 'none' : 'auto',
                       visibility: isFuture ? 'hidden' : 'visible',
                     }}
-                    title={`${dateStr}${isCompleted ? ' ✓' : ''}`}
+                    title={`${dateStr}${isCompleted ? ' ✓' : ''}${isFrozen ? ' (Frozen)' : ''}`}
-                  />
+                  >
+                    {isFrozen && (
+                      <span role="img" aria-label="Frozen" style={{ fontSize: '0.7em' }}>❄️</span>
+                    )}
+                  </motion.button>
                 );
               })}
             </div>
           ))}
+          {/* Weekday labels: Monday (top) to Sunday (bottom) */}
+          <div className="flex flex-col gap-1 ml-2">
+            {/* Spacer matches month label height to align rows */}
+            <div className="h-3" />
+            {[1, 2, 3, 4, 5, 6, 0].map((day) => (
+              <div
+                key={day}
+                className="h-3 flex items-center justify-end text-xs text-muted-foreground pr-0"
+              >
+                {getWeekdayLabel(day)}
+              </div>
+            ))}
+          </div>
         </div>
       </div>
 

src/components/MiniGrid.jsx

@@ -1,14 +1,62 @@
 import React from 'react';
+// Utility to lighten a hex color
+function lightenColor(hex, percent) {
+  hex = hex.replace(/^#/, '');
+  if (hex.length === 3) hex = hex.split('').map(x => x + x).join('');
+  const num = parseInt(hex, 16);
+  let r = (num >> 16) + Math.round(255 * percent);
+  let g = ((num >> 8) & 0x00FF) + Math.round(255 * percent);
+  let b = (num & 0x0000FF) + Math.round(255 * percent);
+  r = Math.min(255, r);
+  g = Math.min(255, g);
+  b = Math.min(255, b);
+  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 { toggleCompletion } from '../lib/storage';
+import { getFrozenDays } from '../lib/utils-habit';
+import { toggleCompletion } from '../lib/datastore';
+import { toast } from './ui/use-toast';
 
 const MiniGrid = ({ habit, onUpdate }) => {
   const today = new Date();
-  // Show fewer days on mobile for better aspect ratio
+  // Dynamically calculate number of days that fit based on window width and cell size, max 28
-  const isMobile = window.innerWidth < 640; // Tailwind 'sm' breakpoint
+  const CELL_SIZE = 42; // px, matches w-8 h-8
-  const numDays = isMobile ? 14 : 28;
+  const PADDING = 16; // px, for grid padding/margin
+  const numDays = Math.min(28, Math.max(5, Math.floor((window.innerWidth - PADDING) / CELL_SIZE)));
   const days = [];
+  const scrollRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
+    }
+  }, [numDays, habit.completions]);
   
   for (let i = numDays - 1; i >= 0; i--) {
     const date = new Date(today);
@@ -16,40 +64,142 @@ const MiniGrid = ({ habit, onUpdate }) => {
     days.push(date);
   }
 
-  const handleCellClick = (e, date) => {
+  const handleCellClick = async (e, date) => {
     e.stopPropagation();
-    toggleCompletion(habit.id, formatDate(date));
+    const dateStr = formatDate(date);
+    const isTodayCell = isToday(date);
+    const wasCompleted = habit.completions.includes(dateStr);
+    // Optimistic local update
+    const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+    const idx = habits.findIndex(h => h.id === habit.id);
+    if (idx !== -1) {
+      const completions = Array.isArray(habits[idx].completions) ? [...habits[idx].completions] : [];
+      const cidx = completions.indexOf(dateStr);
+      if (cidx > -1) completions.splice(cidx, 1); else completions.push(dateStr);
+      habits[idx].completions = completions;
+      localStorage.setItem('habitgrid_data', JSON.stringify(habits));
+    }
+    toggleCompletion(habit.id, dateStr); // background sync
     onUpdate();
+    // Only show encouragement toast if validating (adding) today's dot
+    if (isTodayCell && !wasCompleted) {
+      try {
+        const res = await fetch('/encouragements.json');
+        const messages = await res.json();
+        const msg = messages[Math.floor(Math.random() * messages.length)];
+        toast({
+          title: '🎉 Keep Going!',
+          description: msg,
+          duration: 2500,
+        });
+      } catch (err) {
+        // fallback message
+        toast({
+          title: '🎉 Keep Going!',
+          description: 'Great job! Keep up the streak!',
+          duration: 2500,
+        });
+      }
+    }
   };
 
   return (
-    <div className="flex gap-1 overflow-x-auto grid-scroll pb-2">
+    <div ref={scrollRef} className="flex gap-1 overflow-x-auto grid-scroll pt-4 pb-2">
-      {days.map((date, index) => {
+        {(() => {
-        const dateStr = formatDate(date);
+          const frozenDays = getFrozenDays(habit.completions);
-        const isCompleted = habit.completions.includes(dateStr);
+          return days.map((date, index) => {
-        const intensity = isCompleted ? getColorIntensity(habit.completions, dateStr) : 0;
+            const dateStr = formatDate(date);
-        const isTodayCell = isToday(date);
+            const isCompleted = habit.completions.includes(dateStr);
- 
+            const intensity = isCompleted ? getColorIntensity(habit.completions, dateStr) : 0;
-        return (
+            const isTodayCell = isToday(date);
-          <motion.button
+            const dayLetter = date.toLocaleDateString('en-US', { weekday: 'short' })[0];
-            key={index}
+            // Check if previous day was completed and next day is today
-            whileHover={{ scale: 0.9 }}
+            let isFrozen = frozenDays.includes(dateStr);
-            whileTap={{ scale: 0.5 }}
+            if (!isCompleted && !isTodayCell && index < days.length - 1 && index > 0) {
-            onClick={(e) => handleCellClick(e, date)}
+              const prevDateStr = formatDate(days[index - 1]);
-            className="habit-cell flex w-8 h-8 rounded-2xl transition-all"
+              const nextDateStr = formatDate(days[index + 1]);
-            style={{
+              const prevCompleted = habit.completions.includes(prevDateStr);
-              backgroundColor: isCompleted
+              const nextIsToday = isToday(days[index + 1]);
-                ? habit.color
+              if (prevCompleted && nextIsToday) {
-                : 'transparent',
+                isFrozen = true;
-              opacity: isCompleted ? 0.3 + (intensity * 0.7) : 1,
+              }
-              border: isTodayCell
+            }
-                ? `2px solid ${habit.color}`
+            return (
-                : `1px solid ${habit.color}20`,
+              <div key={index} className="flex flex-col items-center">
-            }}
+                <motion.button
-            title={dateStr}
+                  whileHover={{ scale: 0.9 }}
-          />
+                  whileTap={{ scale: 0.5 }}
-        );
+                  onClick={(e) => handleCellClick(e, date)}
-      })}
+                  className={`habit-cell flex w-8 h-8 transition-all items-center justify-center ${isTodayCell ? 'rounded-md' : 'rounded-2xl'}`}
+                  style={{
+                    backgroundColor: isCompleted
+                      ? habit.color
+                      : 'transparent',
+                    opacity: isCompleted ? 0.3 + (intensity * 0.7) : 1,
+                    border: isTodayCell
+                      ? `2px solid ${habit.color}`
+                      : `1px solid ${habit.color}20`,
+                  }}
+                  title={dateStr}
+                >
+                  {isFrozen && (
+                    <motion.span
+                      role="img"
+                      aria-label="Frozen"
+                      style={{ fontSize: '1.2em', filter: 'drop-shadow(0 0 8px #3b82f6)' }}
+                      initial={{ opacity: 0, y: -40, scale: 1.2 }}
+                      animate={{
+                        opacity: 1,
+                        y: [ -40, 8, -4, 0 ],
+                        scale: [ 1.2, 0.9, 1.05, 1 ],
+                        rotate: [ 0, -10, 10, -5, 0 ]
+                      }}
+                      transition={{ duration: 0.7, ease: 'easeInOut' }}
+                    >
+                      {getFreezeIcon()}
+                    </motion.span>
+                  )}
+                  {/* Flame icon for full streak days */}
+                  {isCompleted && intensity >= 1 && (
+                    <motion.span
+                      className="relative flex items-center justify-center w-full h-full"
+                      initial={{ opacity: 0, scale: 0.2, rotate: -45 }}
+                      animate={{
+                        opacity: 1,
+                        scale: 1.3,
+                        rotate: [0, 10, -10, 0],
+                        transition: {
+                          duration: 0.7,
+                          delay: (index / numDays) * 0.7,
+                          type: 'spring',
+                          bounce: 0.7,
+                          stiffness: 180,
+                          onComplete: () => {},
+                        }
+                      }}
+                      whileHover={{ scale: 1.5, rotate: 10 }}
+                      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,
+                          repeatType: 'loop',
+                          duration: 2,
+                          ease: 'easeInOut',
+                        }}
+                      >
+                        {getStreakIcon()}
+                      </motion.div>
+                    </motion.span>
+                  )}
+                </motion.button>
+                <span className="text-[10px] text-muted-foreground mt-1">{dayLetter}</span>
+              </div>
+            );
+          });
+        })()}
     </div>
   );
 };

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/components/ui/toast.jsx

@@ -7,19 +7,21 @@ import React from 'react';
 const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (
-	<ToastPrimitives.Viewport
+			<ToastPrimitives.Viewport
-		ref={ref}
+				ref={ref}
-		className={cn(
+				className={cn(
-			'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+					'fixed z-[100] flex max-h-screen w-full flex-col-reverse p-4',
-			className,
+					'sm:bottom-4 sm:right-4 sm:top-auto sm:left-auto sm:flex-col md:max-w-[420px]',
-		)}
+					'bottom-4 left-1/2 transform -translate-x-1/2 sm:transform-none',
-		{...props}
+					className,
-	/>
+				)}
+				{...props}
+			/>
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-	'data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full',
+			'data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-2xl border-0 p-6 pr-8 shadow-2xl transition-all bg-white/80 backdrop-blur-lg ring-2 ring-green-300/40 drop-shadow-xl scale-95 animate-toast-in data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full',
 	{
 		variants: {
 			variant: {
@@ -73,20 +75,24 @@ const ToastClose = React.forwardRef(({ className, ...props }, ref) => (
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (
-	<ToastPrimitives.Title
+			<ToastPrimitives.Title
-		ref={ref}
+				ref={ref}
-		className={cn('text-sm font-semibold', className)}
+				className={cn('text-lg font-bold flex items-center gap-2', className)}
-		{...props}
+				{...props}
-	/>
+			>
+				<span className="animate-float inline-block">🎊</span> {props.children}
+			</ToastPrimitives.Title>
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (
-	<ToastPrimitives.Description
+			<ToastPrimitives.Description
-		ref={ref}
+				ref={ref}
-		className={cn('text-sm opacity-90', className)}
+				className={cn('text-base opacity-95 font-medium flex items-center gap-2', className)}
-		{...props}
+				{...props}
-	/>
+			>
+				<span className="animate-float inline-block">✨</span> {props.children}
+			</ToastPrimitives.Description>
 ));
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 

src/index.css

@@ -95,3 +95,20 @@
 .dark .grid-scroll::-webkit-scrollbar-thumb {
   background-color: rgba(255, 255, 255, 0.2);
 }
+
+/* Toast custom animations */
+@keyframes toast-in {
+  0% { transform: scale(0.7) translateY(40px); opacity: 0; }
+  100% { transform: scale(1) translateY(0); opacity: 1; }
+}
+.animate-toast-in {
+  animation: toast-in 0.5s cubic-bezier(.68,-0.55,.27,1.55);
+}
+@keyframes float {
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+  100% { transform: translateY(0); }
+}
+.animate-float {
+  animation: float 2s infinite ease-in-out;
+}

src/lib/datastore.js

@@ -0,0 +1,184 @@
+import { supabase, isSupabaseConfigured } from './supabase';
+import * as local from './storage';
+
+const SYNC_FLAG = 'habitgrid_remote_synced_at';
+
+export const getAuthUser = async () => {
+  if (!isSupabaseConfigured()) return null;
+  const { data } = await supabase.auth.getUser();
+  return data?.user ?? null;
+};
+
+export const isLoggedIn = async () => Boolean(await getAuthUser());
+
+// Remote schema suggestion:
+// table habits {
+//   id uuid primary key default gen_random_uuid(),
+//   user_id uuid not null,
+//   name text not null,
+//   color text,
+//   category text,
+//   completions jsonb default '[]'::jsonb,
+//   current_streak int default 0,
+//   longest_streak int default 0,
+//   sort_order int default 0,
+//   created_at timestamptz default now(),
+//   updated_at timestamptz default now()
+// };
+
+export async function getHabits() {
+  if (!(await isLoggedIn())) return local.getHabits();
+
+  const { data: user } = await supabase.auth.getUser();
+  const userId = user?.user?.id;
+  if (!userId) return local.getHabits();
+
+  const { data, error } = await supabase
+    .from('habits')
+    .select('id,user_id,name,color,category,completions,current_streak,longest_streak,sort_order,updated_at,created_at')
+    .eq('user_id', userId)
+    .order('sort_order');
+  if (error) {
+    console.warn('Supabase getHabits error, falling back to local:', error.message);
+    return local.getHabits();
+  }
+  // Map to local shape
+  return (data || []).map(row => ({
+    id: row.id,
+    name: row.name,
+    color: row.color,
+    category: row.category || '',
+    completions: row.completions || [],
+    currentStreak: row.current_streak ?? 0,
+    longestStreak: row.longest_streak ?? 0,
+    sortOrder: row.sort_order ?? 0,
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+  }));
+}
+
+export async function saveHabit(habit) {
+  if (!(await isLoggedIn())) return local.saveHabit(habit);
+  const now = new Date().toISOString();
+  const { data: auth } = await supabase.auth.getUser();
+  const insert = {
+    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').insert(insert).select('*').single();
+  if (error) {
+    console.warn('Supabase saveHabit error, writing local:', error.message);
+    return local.saveHabit(habit);
+  }
+  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);
+  }
+}
+
+export async function deleteHabit(id) {
+  if (!(await isLoggedIn())) return local.deleteHabit(id);
+  const { error } = await supabase.from('habits').delete().eq('id', id);
+  if (error) {
+    console.warn('Supabase deleteHabit error, writing local:', error.message);
+    return local.deleteHabit(id);
+  }
+}
+
+export async function toggleCompletion(habitId, dateStr) {
+  if (!(await isLoggedIn())) return local.toggleCompletion(habitId, dateStr);
+  // Fetch current then delegate to local logic for streak calc
+  const habits = await getHabits();
+  const target = habits.find(h => h.id === habitId);
+  if (!target) return;
+  const completions = Array.isArray(target.completions) ? [...target.completions] : [];
+  const idx = completions.indexOf(dateStr);
+  if (idx > -1) completions.splice(idx, 1); else completions.push(dateStr);
+  return updateHabit(habitId, { completions });
+}
+
+export async function exportData() {
+  // Always export from local snapshot for portability
+  const habits = await getHabits();
+  return JSON.stringify(habits, null, 2);
+}
+
+export async function importData(jsonString) {
+  // Always import to local; remote sync will push on login
+  return local.importData(jsonString);
+}
+
+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;
+
+  const already = localStorage.getItem(SYNC_FLAG);
+  const { data: remote, error } = await supabase.from('habits').select('id').limit(1);
+  if (error) return;
+
+  if (!already || (remote || []).length === 0) {
+    const habits = local.getHabits();
+    if (habits.length === 0) return localStorage.setItem(SYNC_FLAG, new Date().toISOString());
+    const rows = habits.map(h => ({
+      id: h.id && h.id.length > 0 ? h.id : undefined,
+      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());
+  }
+}
+
+export async function syncRemoteToLocal() {
+  const user = await getAuthUser();
+  if (!user) return;
+  const remote = await getHabits();
+  // write to local in the app's expected format
+  localStorage.setItem('habitgrid_data', JSON.stringify(remote));
+  // Notify UI to reload if listening
+  window.dispatchEvent(new CustomEvent('habitgrid-sync-updated'));
+}

src/lib/git.js

@@ -0,0 +1,289 @@
+// Git integrations library: manages sources, token encryption, fetching events, and caching
+import { formatDate } from './utils-habit';
+
+const GIT_INT_KEY = 'habitgrid_git_integrations';
+const GIT_CACHE_KEY = 'habitgrid_git_cache';
+const GIT_ENABLED_KEY = 'habitgrid_git_enabled';
+const GIT_KEY_MATERIAL = 'habitgrid_git_k';
+
+// --- Minimal AES-GCM encryption helpers using Web Crypto ---
+async function getCryptoKey() {
+  try {
+    let raw = localStorage.getItem(GIT_KEY_MATERIAL);
+    if (!raw) {
+      const bytes = crypto.getRandomValues(new Uint8Array(32));
+      raw = btoa(String.fromCharCode(...bytes));
+      localStorage.setItem(GIT_KEY_MATERIAL, raw);
+    }
+    const buf = Uint8Array.from(atob(raw), c => c.charCodeAt(0));
+    return await crypto.subtle.importKey('raw', buf, 'AES-GCM', false, ['encrypt', 'decrypt']);
+  } catch {
+    return null;
+  }
+}
+
+export async function encryptToken(token) {
+  const key = await getCryptoKey();
+  if (!key) return token; // fallback
+  const iv = crypto.getRandomValues(new Uint8Array(12));
+  const enc = new TextEncoder().encode(token);
+  const ct = new Uint8Array(await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, enc));
+  return `${btoa(String.fromCharCode(...iv))}:${btoa(String.fromCharCode(...ct))}`;
+}
+
+export async function decryptToken(tokenEnc) {
+  const key = await getCryptoKey();
+  if (!key || !tokenEnc.includes(':')) return tokenEnc || '';
+  const [ivB64, ctB64] = tokenEnc.split(':');
+  const iv = Uint8Array.from(atob(ivB64), c => c.charCodeAt(0));
+  const ct = Uint8Array.from(atob(ctB64), c => c.charCodeAt(0));
+  try {
+    const pt = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ct);
+    return new TextDecoder().decode(pt);
+  } catch {
+    return '';
+  }
+}
+
+// --- Integrations CRUD ---
+export function getGitEnabled() {
+  return localStorage.getItem(GIT_ENABLED_KEY) === 'true';
+}
+export function setGitEnabled(enabled) {
+  localStorage.setItem(GIT_ENABLED_KEY, enabled ? 'true' : 'false');
+}
+
+export function getIntegrations() {
+  try {
+    const raw = localStorage.getItem(GIT_INT_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+export async function addIntegration({ provider, baseUrl, username, token }) {
+  const integrations = getIntegrations();
+  const tokenEnc = await encryptToken(token);
+  const id = Date.now().toString();
+  integrations.push({ id, provider, baseUrl, username, tokenEnc, createdAt: new Date().toISOString() });
+  localStorage.setItem(GIT_INT_KEY, JSON.stringify(integrations));
+  return id;
+}
+
+export function removeIntegration(id) {
+  const integrations = getIntegrations().filter(x => x.id !== id);
+  localStorage.setItem(GIT_INT_KEY, JSON.stringify(integrations));
+}
+
+// --- Caching ---
+function getCache() {
+  try {
+    const raw = localStorage.getItem(GIT_CACHE_KEY);
+    return raw ? JSON.parse(raw) : { lastSync: null, dailyCounts: {} };
+  } catch {
+    return { lastSync: null, dailyCounts: {} };
+  }
+}
+function setCache(cache) {
+  localStorage.setItem(GIT_CACHE_KEY, JSON.stringify(cache));
+}
+
+export function getCachedGitActivity() {
+  return getCache();
+}
+
+// --- Fetch events per provider ---
+function isOlderThan(dateStr, days) {
+  const d = new Date(dateStr);
+  const cutoff = new Date();
+  cutoff.setDate(cutoff.getDate() - days);
+  return d < cutoff;
+}
+
+function deriveGitHubGraphQLEndpoint(baseUrl) {
+  try {
+    const u = new URL(baseUrl || 'https://api.github.com');
+    // If /api/v3 -> likely /api/graphql
+    if (u.pathname.includes('/api/v3')) {
+      return `${u.origin}/api/graphql`;
+    }
+    // If ends with /api -> /graphql under same base
+    if (u.pathname.endsWith('/api')) {
+      return `${u.origin}/graphql`;
+    }
+    // Default: append /graphql
+    return `${baseUrl.replace(/\/$/, '')}/graphql`;
+  } catch {
+    return 'https://api.github.com/graphql';
+  }
+}
+
+async function fetchGitHubGraphQL({ baseUrl = 'https://api.github.com', username, token }, days = 365) {
+  if (!token) return null; // require token for GraphQL
+  const endpoint = deriveGitHubGraphQLEndpoint(baseUrl);
+  const to = new Date();
+  const from = new Date();
+  from.setDate(from.getDate() - days + 1);
+  const query = `query($login:String!, $from:DateTime!, $to:DateTime!) {
+    user(login:$login) {
+      contributionsCollection(from:$from, to:$to) {
+        contributionCalendar { weeks { contributionDays { date contributionCount } } }
+      }
+    }
+  }`;
+  const res = await fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${token}`,
+    },
+    body: JSON.stringify({ query, variables: { login: username, from: from.toISOString(), to: to.toISOString() } }),
+  });
+  if (!res.ok) return null;
+  const json = await res.json();
+  const daysArr = json?.data?.user?.contributionsCollection?.contributionCalendar?.weeks?.flatMap(w => w.contributionDays) || [];
+  const counts = {};
+  for (const d of daysArr) {
+    if (d?.date) counts[d.date] = (counts[d.date] || 0) + (d.contributionCount || 0);
+  }
+  return counts;
+}
+
+async function fetchGitHubEvents({ baseUrl = 'https://api.github.com', username, token }, days = 365) {
+  // Prefer GraphQL for full-year coverage if token present
+  try {
+    if (token) {
+      const graphCounts = await fetchGitHubGraphQL({ baseUrl, username, token }, days);
+      if (graphCounts) return graphCounts;
+    }
+  } catch {}
+  const headers = { 'Accept': 'application/vnd.github+json' };
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+  const counts = {};
+  for (let page = 1; page <= 3; page++) {
+    const url = `${baseUrl.replace(/\/$/, '')}/users/${encodeURIComponent(username)}/events?per_page=100&page=${page}`;
+    const res = await fetch(url, { headers });
+    if (!res.ok) break;
+    const events = await res.json();
+    if (!Array.isArray(events) || events.length === 0) break;
+    for (const ev of events) {
+      if (!ev || !ev.created_at) continue;
+      if (isOlderThan(ev.created_at, days)) { page = 999; break; }
+      if (ev.type === 'PushEvent') {
+        const c = ev.payload?.size || 1;
+        const day = formatDate(new Date(ev.created_at));
+        counts[day] = (counts[day] || 0) + c;
+      }
+    }
+  }
+  return counts;
+}
+
+async function fetchGiteaLike({ baseUrl, username, token }, days = 365) {
+  let authMode = token ? 'token' : null; // 'token' | 'bearer' | null
+  const counts = {};
+  for (let page = 1; page <= 8; page++) {
+    const url = `${baseUrl.replace(/\/$/, '')}/api/v1/users/${encodeURIComponent(username)}/events?limit=50&page=${page}`;
+    let res;
+    try {
+      const headers = { 'Accept': 'application/json' };
+      if (token) headers['Authorization'] = authMode === 'bearer' ? `Bearer ${token}` : `token ${token}`;
+      res = await fetch(url, { headers });
+    } catch (e) {
+      break; // likely CORS/network
+    }
+    if (!res.ok) {
+      // Retry once with alternate auth scheme if unauthorized/forbidden
+      if ((res.status === 401 || res.status === 403) && token && authMode === 'token') {
+        authMode = 'bearer';
+        page--; // retry same page with Bearer
+        continue;
+      }
+      break;
+    }
+    let events;
+    try {
+      events = await res.json();
+    } catch {
+      break;
+    }
+    if (!Array.isArray(events) || events.length === 0) break;
+    for (const ev of events) {
+      const created = ev?.created || ev?.created_at || ev?.timestamp;
+      if (!created) continue;
+      if (isOlderThan(created, days)) { page = 999; break; }
+      const actionRaw = (ev?.op_type || ev?.action || ev?.type || '').toString().toLowerCase();
+      const isPushLike = actionRaw.includes('push') || actionRaw.includes('commit');
+      if (!isPushLike) continue;
+      const day = formatDate(new Date(created));
+      // Try to take number of commits if provided
+      let inc = 1;
+      if (typeof ev?.commits_count === 'number') inc = ev.commits_count;
+      else if (typeof ev?.payload?.num_commits === 'number') inc = ev.payload.num_commits;
+      else if (Array.isArray(ev?.payload?.commits)) inc = ev.payload.commits.length || 1;
+      counts[day] = (counts[day] || 0) + (inc || 1);
+    }
+  }
+  return counts;
+}
+
+async function fetchGitLabEvents({ baseUrl = 'https://gitlab.com', token }, days = 365) {
+  const headers = { 'Accept': 'application/json', 'PRIVATE-TOKEN': token };
+  const counts = {};
+  for (let page = 1; page <= 5; page++) {
+    const url = `${baseUrl.replace(/\/$/, '')}/api/v4/events?per_page=100&page=${page}&action=push`;
+    const res = await fetch(url, { headers });
+    if (!res.ok) break;
+    const events = await res.json();
+    if (!Array.isArray(events) || events.length === 0) break;
+    for (const ev of events) {
+      const created = ev?.created_at;
+      if (!created) continue;
+      if (isOlderThan(created, days)) { page = 999; break; }
+      const day = formatDate(new Date(created));
+      counts[day] = (counts[day] || 0) + 1;
+    }
+  }
+  return counts;
+}
+
+export async function fetchAllGitActivity({ force = false, days = 365 } = {}) {
+  const { lastSync, dailyCounts } = getCache();
+  const last = lastSync ? new Date(lastSync) : null;
+  const now = new Date();
+  const withinDay = last && (now - last) < 24 * 60 * 60 * 1000;
+  if (!force && withinDay && dailyCounts) {
+    return { dailyCounts, lastSync };
+  }
+
+  const integrations = getIntegrations();
+  const perSource = [];
+  for (const src of integrations) {
+    const token = await decryptToken(src.tokenEnc);
+    const baseUrl = src.baseUrl || (src.provider === 'gitea' || src.provider === 'forgejo' ? 'https://gitea.com' : undefined);
+    const info = { baseUrl, username: src.username, token };
+    try {
+      if (src.provider === 'github') {
+        perSource.push(await fetchGitHubEvents(info, days));
+      } else if (src.provider === 'gitlab') {
+        perSource.push(await fetchGitLabEvents(info, days));
+      } else if (src.provider === 'gitea' || src.provider === 'forgejo' || src.provider === 'custom') {
+        perSource.push(await fetchGiteaLike(info, days));
+      }
+    } catch (e) {
+      // Continue other sources
+      console.warn('Git fetch failed for', src.provider, e);
+    }
+  }
+  // Merge
+  const merged = {};
+  for (const m of perSource) {
+    for (const [day, cnt] of Object.entries(m)) {
+      merged[day] = (merged[day] || 0) + cnt;
+    }
+  }
+  const updated = { lastSync: new Date().toISOString(), dailyCounts: merged };
+  setCache(updated);
+  return updated;
+}

src/lib/storage.js

@@ -1,3 +1,5 @@
+// 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';
 
 export const getHabits = () => {
@@ -15,14 +17,55 @@ 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();
   const newHabit = {
     ...habit,
     id: Date.now().toString(),
+    sortOrder: habits.length,
+    createdAt: nowIso(),
+    updatedAt: nowIso(),
   };
   habits.push(newHabit);
   localStorage.setItem(STORAGE_KEY, JSON.stringify(habits));
+  remoteMirrorUpsert(newHabit);
   return newHabit;
 };
 
@@ -30,8 +73,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 +83,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,12 +110,15 @@ 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 sortedDates = completions
+  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);
 
@@ -88,15 +136,12 @@ const calculateStreaks = (completions) => {
 
   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++;
@@ -112,9 +157,7 @@ const calculateStreaks = (completions) => {
     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);
@@ -124,9 +167,8 @@ const calculateStreaks = (completions) => {
   }
 
   longestStreak = Math.max(longestStreak, currentStreak, 1);
-
   return { currentStreak, longestStreak };
-};
+}
 
 export const exportData = () => {
   const habits = getHabits();
@@ -141,3 +183,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,3 +40,37 @@ export const getWeekdayLabel = (dayIndex) => {
   const labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   return labels[dayIndex];
 };
+  // Returns array of frozen days (date strings) for a given completions array
+  export function getFrozenDays(completions) {
+    // Map: month string -> frozen day string
+    const frozenDays = [];
+    const completedSet = new Set(completions);
+    // Sort completions for easier lookup
+    const sorted = [...completions].sort();
+    // Track frozen per month
+    const frozenPerMonth = {};
+    // To find missed days, scan a range of dates
+    if (completions.length === 0) return [];
+    const minDate = new Date(sorted[0]);
+    const maxDate = new Date(sorted[sorted.length - 1]);
+    for (let d = new Date(minDate); d <= maxDate; d.setDate(d.getDate() + 1)) {
+      const dateStr = formatDate(d);
+      if (completedSet.has(dateStr)) continue; // skip completed days
+      // Check neighbors
+      const prevDate = new Date(d); prevDate.setDate(prevDate.getDate() - 1);
+      const nextDate = new Date(d); nextDate.setDate(nextDate.getDate() + 1);
+      const prevDateStr = formatDate(prevDate);
+      const nextDateStr = formatDate(nextDate);
+      // Only freeze if both neighbors are completed
+      const monthKey = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+      if (
+        completedSet.has(prevDateStr) &&
+        completedSet.has(nextDateStr) &&
+        !frozenPerMonth[monthKey]
+      ) {
+        frozenDays.push(dateStr);
+        frozenPerMonth[monthKey] = true;
+      }
+    }
+    return frozenDays;
+  }

src/pages/AddEditHabitPage.jsx

@@ -7,7 +7,7 @@ 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';
 
 const AddEditHabitPage = () => {
   const { id } = useParams();
@@ -17,6 +17,7 @@ const AddEditHabitPage = () => {
 
   const [name, setName] = useState('');
   const [color, setColor] = useState('#22c55e');
+  const [category, setCategory] = useState('');
 
   useEffect(() => {
     if (isEdit) {
@@ -24,6 +25,7 @@ const AddEditHabitPage = () => {
       if (habit) {
         setName(habit.name);
         setColor(habit.color);
+        if (habit.category) setCategory(habit.category);
       } else {
         toast({
           title: "Habit not found",
@@ -47,21 +49,38 @@ 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({
+      // Add to localStorage for instant UI
+      const habits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+      const newHabit = {
+        id: Date.now().toString(),
         name: name.trim(),
         color,
+        category: category.trim(),
         completions: [],
         currentStreak: 0,
         longestStreak: 0,
         createdAt: new Date().toISOString(),
-      });
+        updatedAt: new Date().toISOString(),
+        sortOrder: habits.length,
+      };
+      habits.push(newHabit);
+      localStorage.setItem('habitgrid_data', JSON.stringify(habits));
+      saveHabit(newHabit); // background sync
       toast({
         title: "✅ Habit created",
         description: "Your new habit is ready to track!",
@@ -121,6 +140,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 +169,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,14 @@ 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 = () => {
   const { id } = useParams();
@@ -15,6 +22,15 @@ const HabitDetailPage = () => {
   const [habit, setHabit] = useState(null);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
+  useEffect(() => {
+    // Load and apply saved theme on mount
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      document.documentElement.classList.remove('light', 'dark');
+      document.documentElement.classList.add(savedTheme);
+    }
+  }, []);
+
   useEffect(() => {
     loadHabit();
   }, [id]);
@@ -34,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.",
@@ -56,8 +76,52 @@ const HabitDetailPage = () => {
     oldestDate = new Date(habit.completions.reduce((min, d) => d < min ? d : min, habit.completions[0]));
   }
 
+  // Calculate streaks of consecutive days
+  function getFullOpacityStreaks(completions) {
+    if (!completions || completions.length === 0) return [];
+    const sorted = [...completions].sort();
+    let streaks = [];
+    let currentStreak = [sorted[0]];
+    for (let i = 1; i < sorted.length; i++) {
+      const prev = new Date(sorted[i - 1]);
+      const curr = new Date(sorted[i]);
+      const diff = (curr - prev) / (1000 * 60 * 60 * 24);
+      if (diff === 1) {
+        currentStreak.push(sorted[i]);
+      } else {
+        if (currentStreak.length > 1) streaks.push([...currentStreak]);
+        currentStreak = [sorted[i]];
+      }
+    }
+    if (currentStreak.length > 1) streaks.push([...currentStreak]);
+    return streaks;
+  }
+
+  // Bonus: +2% per streak of 3+ full opacity days (capped at +10%)
+  const streaks = getFullOpacityStreaks(habit.completions);
+  const bonus = Math.min(streaks.filter(s => s.length >= 3).length * 2, 10);
+
   const completionRate = habit.completions.length > 0
-    ? Math.round((habit.completions.length / Math.max(1, Math.ceil((Date.now() - oldestDate.getTime()) / (1000 * 60 * 60 * 24)))) * 100)
+    ? (() => {
+        // Overall rate
+        const totalDays = Math.max(1, Math.ceil((Date.now() - oldestDate.getTime()) / (1000 * 60 * 60 * 24)));
+        const overallRate = habit.completions.length / totalDays;
+
+        // Last 30 days rate
+        const today = new Date();
+        const lastMonthStart = new Date(today);
+        lastMonthStart.setDate(today.getDate() - 29);
+        const lastMonthDates = [];
+        for (let d = new Date(lastMonthStart); d <= today; d.setDate(d.getDate() + 1)) {
+          lastMonthDates.push(d.toISOString().slice(0, 10));
+        }
+        const lastMonthCompletions = habit.completions.filter(dateStr => lastMonthDates.includes(dateStr));
+        const lastMonthRate = lastMonthCompletions.length / 30;
+
+        // Weighted blend: 70% last month, 30% overall
+        const blendedRate = (lastMonthRate * 0.7) + (overallRate * 0.3);
+        return Math.round(blendedRate * 100 + bonus);
+      })()
     : 0;
 
   return (
@@ -117,7 +181,7 @@ const HabitDetailPage = () => {
               </div>
               <span className="text-sm font-medium text-muted-foreground">Current Streak</span>
             </div>
-            <p className="text-3xl font-bold">{habit.currentStreak || 0}</p>
+            <p className="text-3xl font-bold"><AnimatedCounter value={habit.currentStreak || 0} duration={900} /></p>
             <p className="text-xs text-muted-foreground mt-1">days in a row</p>
           </div>
 
@@ -128,7 +192,7 @@ const HabitDetailPage = () => {
               </div>
               <span className="text-sm font-medium text-muted-foreground">Longest Streak</span>
             </div>
-            <p className="text-3xl font-bold">{habit.longestStreak || 0}</p>
+            <p className="text-3xl font-bold"><AnimatedCounter value={habit.longestStreak || 0} duration={900} /></p>
             <p className="text-xs text-muted-foreground mt-1">personal best</p>
           </div>
 
@@ -139,7 +203,7 @@ const HabitDetailPage = () => {
               </div>
               <span className="text-sm font-medium text-muted-foreground">Consistency Score!</span>
             </div>
-            <p className="text-3xl font-bold">{completionRate}%</p>
+            <p className="text-3xl font-bold"><AnimatedCounter value={completionRate} duration={900} format={v => `${v}%`} /></p>
             <p className="text-xs text-muted-foreground mt-1">overall progress</p>
           </div>
         </motion.div>

src/pages/HomePage.jsx

@@ -1,23 +1,47 @@
 import React, { useState, useEffect } from 'react';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Plus, Settings, TrendingUp, Flame, Calendar, Moon, Sun } from 'lucide-react';
 import { Button } from '../components/ui/button';
 import { useToast } from '../components/ui/use-toast';
 import HabitCard from '../components/HabitCard';
-import { getHabits } from '../lib/storage';
+import AnimatedCounter from '../components/AnimatedCounter';
+import GitActivityGrid from '../components/GitActivityGrid';
+import { getGitEnabled } from '../lib/git';
+import { getHabits, updateHabit, syncLocalToRemoteIfNeeded, syncRemoteToLocal, getAuthUser } from '../lib/datastore';
 
 const HomePage = () => {
   const navigate = useNavigate();
   const { toast } = useToast();
   const [habits, setHabits] = useState([]);
-  const [isPremium] = useState(false);
+  const [collapsedGroups, setCollapsedGroups] = useState({});
+  const [gitEnabled, setGitEnabled] = useState(getGitEnabled());
   const [darkMode, setDarkMode] = useState(() => {
     return localStorage.getItem('theme') === 'dark';
   });
 
   useEffect(() => {
-    loadHabits();
+    (async () => {
+      // On login, pull remote habits into localStorage
+      const user = await getAuthUser();
+      if (user) {
+        await syncRemoteToLocal();
+      }
+      await loadHabits();
+      setGitEnabled(getGitEnabled());
+    })();
+    // 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(() => {
@@ -30,20 +54,28 @@ const HomePage = () => {
     }
   }, [darkMode]);
 
-  const loadHabits = () => {
+  const loadHabits = async () => {
-    const loadedHabits = getHabits();
+    // Always read from local for instant UI
+    const loadedHabits = JSON.parse(localStorage.getItem('habitgrid_data') || '[]');
+    loadedHabits.sort((a, b) => {
+      if (a.sortOrder !== undefined && b.sortOrder !== undefined) return a.sortOrder - b.sortOrder;
+      if (a.sortOrder !== undefined) return -1;
+      if (b.sortOrder !== undefined) return 1;
+      return new Date(a.createdAt || 0) - new Date(b.createdAt || 0);
+    });
     setHabits(loadedHabits);
+    // 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');
   };
 
@@ -107,28 +139,192 @@ const HomePage = () => {
                 <span className="text-xs font-medium text-muted-foreground">Total Streaks</span>
               </div>
               <p className="text-2xl font-bold">
-                {habits.reduce((sum, h) => sum + (h.currentStreak || 0), 0)}
+                <AnimatedCounter value={habits.reduce((sum, h) => sum + (h.currentStreak || 0), 0)} duration={900} />
               </p>
             </div>
           </motion.div>
         )}
 
+        {/* Git Activity */}
+        {gitEnabled && (
+          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.05 }} className="mb-8">
+            <GitActivityGrid />
+          </motion.div>
+        )}
+
         {/* Habits List */}
-        <div className="space-y-4">
+        {/* Grouped Habits by Category, collapsible, and uncategorized habits outside */}
-          <AnimatePresence mode="popLayout">
+        <DragDropContext
-            {habits.map((habit, index) => (
+          onDragEnd={result => {
-              <motion.div
+            if (!result.destination) return;
-                key={habit.id}
+            const { source, destination } = result;
-                initial={{ opacity: 0, y: 20 }}
+            // Get all habits grouped by category
-                animate={{ opacity: 1, y: 0 }}
+            const uncategorized = habits.filter(h => !h.category);
-                exit={{ opacity: 0, scale: 0.95 }}
+            const categorized = habits.filter(h => h.category);
-                transition={{ delay: index * 0.05 }}
+            const grouped = categorized.reduce((acc, habit) => {
-              >
+              const cat = habit.category;
-                <HabitCard habit={habit} onUpdate={loadHabits} />
+              if (!acc[cat]) acc[cat] = [];
-              </motion.div>
+              acc[cat].push(habit);
+              return acc;
+            }, {});
+
+            let newHabits = [...habits];
+
+            // If dropping into uncategorized, always unset category
+            if (destination.droppableId === 'uncategorized') {
+              let items, removed;
+              if (source.droppableId === 'uncategorized') {
+                // Reorder within uncategorized
+                items = Array.from(uncategorized);
+                [removed] = items.splice(source.index, 1);
+              } else {
+                // Move from category to uncategorized
+                items = Array.from(uncategorized);
+                const sourceItems = Array.from(grouped[source.droppableId]);
+                [removed] = sourceItems.splice(source.index, 1);
+                removed.category = '';
+                grouped[source.droppableId] = sourceItems;
+              }
+              // Always set category to ''
+              removed.category = '';
+              items.splice(destination.index, 0, removed);
+              items.forEach((h, i) => updateHabit(h.id, { sortOrder: i, category: '' }));
+              newHabits = [
+                ...items,
+                ...Object.values(grouped).flat()
+              ];
+            } else if (source.droppableId === 'uncategorized' && grouped[destination.droppableId]) {
+              // Move from uncategorized to category
+              const items = Array.from(uncategorized);
+              const [removed] = items.splice(source.index, 1);
+              removed.category = destination.droppableId;
+              const destItems = Array.from(grouped[destination.droppableId] || []);
+              destItems.splice(destination.index, 0, removed);
+              destItems.forEach((h, i) => updateHabit(h.id, { sortOrder: i, category: h.category }));
+              newHabits = [
+                ...items,
+                ...Object.values({ ...grouped, [destination.droppableId]: destItems }).flat()
+              ];
+            } else if (grouped[source.droppableId] && grouped[destination.droppableId]) {
+              // Move within or between categories
+              const sourceItems = Array.from(grouped[source.droppableId]);
+              const [removed] = sourceItems.splice(source.index, 1);
+              if (source.droppableId === destination.droppableId) {
+                // Reorder within same category
+                sourceItems.splice(destination.index, 0, removed);
+                sourceItems.forEach((h, i) => updateHabit(h.id, { sortOrder: i, category: h.category }));
+                grouped[source.droppableId] = sourceItems;
+              } else {
+                // Move to another category
+                const destItems = Array.from(grouped[destination.droppableId] || []);
+                removed.category = destination.droppableId;
+                destItems.splice(destination.index, 0, removed);
+                destItems.forEach((h, i) => updateHabit(h.id, { sortOrder: i, category: h.category }));
+                grouped[source.droppableId] = sourceItems;
+                grouped[destination.droppableId] = destItems;
+              }
+              // Flatten
+              newHabits = [
+                ...uncategorized,
+                ...Object.values(grouped).flat()
+              ];
+            }
+            setTimeout(loadHabits, 0); // reload instantly after update
+          }}
+        >
+          <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
+                            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>
+            {/* 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>
             ))}
-          </AnimatePresence>
+          </div>
-        </div>
+        </DragDropContext>
 
         {/* Empty State */}
         {habits.length === 0 && (

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,20 +1,85 @@
 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 } 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(() => {
     return localStorage.getItem('theme') === 'dark';
   });
   const [notifications, setNotifications] = useState(false);
+  const [gitEnabled, setGitEnabledState] = useState(getGitEnabled());
+  const [sources, setSources] = useState(() => getIntegrations());
+  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) {
@@ -30,6 +95,31 @@ const SettingsPage = () => {
     setDarkMode(enabled);
   };
 
+  const toggleGitEnabled = (enabled) => {
+    setGitEnabledState(enabled);
+    setGitEnabled(enabled);
+  };
+
+  const handleAddSource = async () => {
+    if (!form.username) return;
+    const baseUrl = form.baseUrl || (form.provider === 'github' ? 'https://api.github.com' : form.provider === 'gitlab' ? 'https://gitlab.com' : '');
+    await addIntegration({ provider: form.provider, baseUrl, username: form.username, token: form.token });
+    setSources(getIntegrations());
+    setForm({ provider: 'github', baseUrl: '', username: '', token: '' });
+  };
+
+  const handleRemoveSource = (id) => {
+    removeIntegration(id);
+    setSources(getIntegrations());
+  };
+
+  const handleSyncGit = async () => {
+    setSyncing(true);
+    const data = await fetchAllGitActivity({ force: true });
+    setCacheInfo(data);
+    setSyncing(false);
+  };
+
   const handleExport = () => {
     const data = exportData();
     const blob = new Blob([data], { type: 'application/json' });
@@ -111,13 +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 }}
@@ -126,19 +228,63 @@ const SettingsPage = () => {
             className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-700"
           >
             <h2 className="text-lg font-semibold mb-4">Appearance</h2>
-            <div className="flex items-center justify-between">
+            <div className="flex flex-col gap-6">
-              <div className="flex items-center gap-3">
+              <div className="flex items-center justify-between">
-                {darkMode ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
+                <div className="flex items-center gap-3">
-                <div>
+                  {darkMode ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
-                  <Label htmlFor="dark-mode" className="text-base">Dark Mode</Label>
+                  <div>
-                  <p className="text-sm text-muted-foreground">Toggle dark theme</p>
+                    <Label htmlFor="dark-mode" className="text-base">Dark Mode</Label>
+                    <p className="text-sm text-muted-foreground">Toggle dark theme</p>
+                  </div>
                 </div>
+                <Switch
+                  id="dark-mode"
+                  checked={darkMode}
+                  onCheckedChange={toggleDarkMode}
+                />
+              </div>
+
+              {/* Streak Icon Picker */}
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  {renderStreakIcon(streakIcon)}
+                  <div>
+                    <Label htmlFor="streak-icon" className="text-base">Streak Icon</Label>
+                    <p className="text-sm text-muted-foreground">Choose your streak icon</p>
+                  </div>
+                </div>
+                <select
+                  id="streak-icon"
+                  className="border rounded-md p-2 bg-white dark:bg-slate-900 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors"
+                  value={streakIcon}
+                  onChange={e => setStreakIcon(e.target.value)}
+                >
+                  {ICON_OPTIONS.map(opt => (
+                    <option key={opt.value} value={opt.value}>{opt.label}</option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Freeze Icon Picker */}
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  {renderFreezeIcon(freezeIcon)}
+                  <div>
+                    <Label htmlFor="freeze-icon" className="text-base">Freeze Icon</Label>
+                    <p className="text-sm text-muted-foreground">Choose your freeze icon</p>
+                  </div>
+                </div>
+                <select
+                  id="freeze-icon"
+                  className="border rounded-md p-2 bg-white dark:bg-slate-900 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors"
+                  value={freezeIcon}
+                  onChange={e => setFreezeIcon(e.target.value)}
+                >
+                  {FREEZE_OPTIONS.map(opt => (
+                    <option key={opt.value} value={opt.value}>{opt.label}</option>
+                  ))}
+                </select>
               </div>
-              <Switch
-                id="dark-mode"
-                checked={darkMode}
-                onCheckedChange={toggleDarkMode}
-              />
             </div>
           </motion.div>
 
@@ -203,6 +349,72 @@ const SettingsPage = () => {
             </Button>
           </motion.div>
 
+                    {/* Integrations */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.05 }}
+            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 flex items-center gap-2"><GitBranch className="w-4 h-4" /> Integrations</h2>
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <Label htmlFor="git-enabled" className="text-base">Show Git Activity</Label>
+                <p className="text-sm text-muted-foreground">Display a unified Git activity grid</p>
+              </div>
+              <Switch id="git-enabled" checked={gitEnabled} onCheckedChange={toggleGitEnabled} />
+            </div>
+
+            <div className="grid sm:grid-cols-4 gap-2 mb-3">
+              <div>
+                <Label className="text-xs">Provider</Label>
+                <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>
+                  <option value="forgejo">Forgejo</option>
+                  <option value="custom">Custom</option>
+                </select>
+              </div>
+              <div>
+                <Label className="text-xs">Base URL</Label>
+                <input className="w-full bg-transparent border rounded-md p-2" placeholder="GitHub: https://api.github.com • GitLab: https://gitlab.com • Gitea/Forgejo: https://your.instance" value={form.baseUrl} onChange={e => setForm({ ...form, baseUrl: e.target.value })} />
+              </div>
+              <div>
+                <Label className="text-xs">Username</Label>
+                <input className="w-full bg-transparent border rounded-md p-2" placeholder="your-username" value={form.username} onChange={e => setForm({ ...form, username: e.target.value })} />
+              </div>
+              <div>
+                <Label className="text-xs">Token</Label>
+                <input className="w-full bg-transparent border rounded-md p-2" placeholder="personal access token" value={form.token} onChange={e => setForm({ ...form, token: e.target.value })} />
+              </div>
+            </div>
+            <Button onClick={handleAddSource} className="mb-4 rounded-full"><Plus className="w-4 h-4 mr-1" /> Add Source</Button>
+
+            <div className="flex items-center justify-between mt-2">
+              <Button variant="outline" onClick={handleSyncGit} disabled={syncing} className="rounded-full">
+                {syncing ? 'Syncing…' : 'Sync Git Data'}
+              </Button>
+              <span className="text-xs text-muted-foreground">{lastSync ? `Last sync: ${new Date(lastSync).toLocaleString()}` : ''}</span>
+            </div>
+
+            {sources.length > 0 && (
+              <div className="space-y-2">
+                {sources.map(src => (
+                  <div key={src.id} className="flex items-center justify-between bg-slate-50/50 dark:bg-slate-900/30 border border-slate-200 dark:border-slate-700 rounded-md p-2">
+                    <div className="text-sm">
+                      <div className="font-medium">{src.provider} • {src.username}</div>
+                      <div className="text-xs text-muted-foreground">{src.baseUrl}</div>
+                    </div>
+                    <Button size="icon" variant="ghost" onClick={() => handleRemoveSource(src.id)} className="rounded-full" aria-label="Remove Source">
+                      <Trash className="w-4 h-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </motion.div>
+
           {/* About */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
@@ -212,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. 
+              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!
-              Build streaks, visualize progress, and commit to yourself daily.
+              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);