Add one-time Driver.js onboarding tour to HomePage

CONTRIBUTING.md

@@ -25,7 +25,6 @@ Scan through our [existing issues](https://github.com/its-me-abhishek/ccsync/iss
 1. Fork the repository.
 
 - Using GitHub Desktop:
-
   - [Getting started with GitHub Desktop](https://docs.github.com/en/desktop/installing-and-configuring-github-desktop/getting-started-with-github-desktop) will guide you through setting up Desktop.
   - Once Desktop is set up, you can use it to [fork the repo](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/cloning-and-forking-repositories-from-github-desktop)!
 

development/README.md

@@ -6,7 +6,6 @@ The `setup.sh` script starts all three services (backend, frontend, and sync ser
 
 > **Note:** The backend should ideally be run in a separate user environment (preferably root user) to avoid permission issues with Taskwarrior configuration files.
 
-
 > **Git Hooks:** Pre-commit hooks are automatically configured when you run `npm install` in the frontend directory. These hooks will format your code before each commit.
 
 ## Prerequisites

frontend/package.json

@@ -91,6 +91,7 @@
     "dlv": "^1.1.3",
     "doctrine": "^3.0.0",
     "dom-accessibility-api": "^0.5.16",
+    "driver.js": "^1.3.1",
     "electron-to-chromium": "^1.4.796",
     "emittery": "^0.13.1",
     "emoji-regex": "^8.0.0",

frontend/src/App.css

@@ -80,3 +80,79 @@
 ::-webkit-scrollbar-thumb:hover {
   background: #3bbcf0;
 }
+
+.driver-popover.ccsync-tour-popover {
+  background-color: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  border-radius: 0.75rem;
+  border: 1px solid hsl(var(--border));
+  /* box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18); */
+  max-width: 320px;
+  padding: 1rem 1.25rem 1.1rem 1.25rem;
+}
+
+.driver-popover.ccsync-tour-popover .driver-popover-title {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.driver-popover.ccsync-tour-popover .driver-popover-description {
+  color: hsl(var(--muted-foreground));
+  line-height: 1.55;
+  font-size: 0.92rem;
+}
+
+.driver-popover.ccsync-tour-popover .driver-popover-progress-text {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.75rem;
+}
+
+.driver-popover.ccsync-tour-popover .driver-popover-navigation-btns {
+  gap: 0.5rem;
+}
+
+.driver-popover.ccsync-tour-popover .driver-popover-navigation-btns button {
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  padding: 0.35rem 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  text-shadow: none;
+}
+
+.driver-popover.ccsync-tour-popover
+  .driver-popover-navigation-btns
+  button.driver-popover-next-btn,
+.driver-popover.ccsync-tour-popover
+  .driver-popover-navigation-btns
+  button.driver-popover-done-btn {
+  background-color: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+
+.driver-popover.ccsync-tour-popover
+  .driver-popover-navigation-btns
+  button.driver-popover-prev-btn {
+  background-color: hsl(var(--secondary));
+  color: hsl(var(--secondary-foreground));
+}
+
+.driver-popover.ccsync-tour-popover
+  .driver-popover-navigation-btns
+  button.driver-popover-prev-btn:hover {
+  background-color: hsl(var(--accent));
+}
+
+.driver-popover.ccsync-tour-popover .driver-skip-btn {
+  background-color: transparent;
+  color: hsl(var(--muted-foreground));
+  border: none;
+  padding: 0.35rem 0.6rem;
+  font-weight: 500;
+  cursor: pointer;
+  text-shadow: none;
+}
+
+.driver-popover.ccsync-tour-popover .driver-skip-btn:hover {
+  color: hsl(var(--foreground));
+}