Color on right - Better Handling

readme.me

@@ -1,28 +1,33 @@
 # Learning Progress Tracker
 
-A web-based goal and learning progress tracker with subtask management, drag-and-drop reordering, and persistent server-side storage.
+A web-based goal and learning progress tracker with subtask management, due dates, drag-and-drop reordering, task archiving, and persistent server-side storage.
 
 ## Features
 
-- **Goal Management** — Create, edit, and delete learning goals with titles, descriptions, sizes, and optional rewards.
-- **Subtasks** — Break goals into smaller subtasks. Drag any task onto another to nest it as a subtask, or promote subtasks back to top-level goals.
-- **Progress Tracking** — Automatic progress calculation based on subtask completion, weighted by task size (Small 10%, Medium 25%, Large 50%).
-- **Drag & Drop** — Reorder tasks and subtasks via drag-and-drop. Hold over a task to reveal its drop zone for nesting.
-- **Context Menus** — Right-click any task or subtask to edit, delete, or promote (subtasks only).
-- **Rewards** — Set optional rewards on goals that are revealed only upon completion.
-- **Persistent Storage** — All data is stored in a SQLite database on the server.
-- **Dark Theme** — Clean, modern dark UI.
+- **Goal Management** — Create, edit, and delete learning goals with titles, descriptions, sizes, due dates, and optional rewards.
+- **Due Dates** — Set deadlines on tasks and subtasks. Color-coded badges show time remaining: green (plenty of time), amber (7 days or less), red (overdue/today). Completed tasks show a strikethrough date.
+- **Subtasks** — Break goals into smaller subtasks. Drag any task onto another to nest it, or promote subtasks back to top-level goals via right-click.
+- **Progress Tracking** — Automatic weighted progress calculation (Small 10%, Medium 25%, Large 50%).
+- **Archive** — Completed tasks show an "Archive" button. Switch to the Archive view to restore, edit, or permanently delete archived tasks.
+- **Drag & Drop** — Reorder tasks and subtasks. Hold over a task to reveal its drop zone for nesting.
+- **Context Menus** — Right-click for edit, delete, promote, archive, or restore actions.
+- **Double-Click to Edit** — Double-click any task or subtask card to open the editor.
+- **Expandable Descriptions** — Toggle "Show full description" per task to expand beyond the default 2-line clamp.
+- **Rewards** — Hidden rewards revealed only upon completion.
+- **Custom Background** — Place a `background.jpg` or `background.png` in `public/img/` to set a custom background image. The UI uses frosted glass (glassmorphism) over the image.
+- **Persistent Storage** — SQLite database with automatic schema migration.
 
 ## Project Structure
 
 ```
 ├── public/
-│   ├── index.html       # Main HTML page
-│   ├── styles.css       # Stylesheet (dark theme)
-│   └── app.js           # Client-side application logic
+│   ├── img/              # Place background.jpg or background.png here
+│   ├── index.html
+│   ├── styles.css
+│   └── app.js
 ├── server/
-│   └── server.js        # Express server with SQLite backend
-├── data/                # SQLite database (auto-created)
+│   └── server.js
+├── data/                 # SQLite database (auto-created)
 ├── package.json
 ├── dockerfile
 └── README.md
@@ -33,22 +38,16 @@ A web-based goal and learning progress tracker with subtask management, drag-and
 ### Prerequisites
 
 - [Node.js](https://nodejs.org/) v18 or later
-- npm (comes with Node.js)
 
 ### Installation
 
 ```bash
-# Clone or download the project
 cd learning-progress-tracker
-
-# Install dependencies
 npm install
-
-# Start the server
 npm start
 ```
 
-The app will be available at **http://localhost:3000**.
+Available at **http://localhost:3000**.
 
 For development with auto-reload:
 
@@ -56,13 +55,14 @@ For development with auto-reload:
 npm run dev
 ```
 
+### Custom Background
+
+Place your image at `public/img/background.jpg` (or `.png`). The CSS references `img/background.jpg` — rename or edit the CSS path as needed. Without an image, the app falls back to a soft gradient.
+
 ### Docker
 
 ```bash
-# Build the image
 docker build -t learning-tracker .
-
-# Run the container (persists data via volume)
 docker run -d -p 3000:3000 -v tracker-data:/app/data learning-tracker
 ```
 
@@ -70,22 +70,25 @@ docker run -d -p 3000:3000 -v tracker-data:/app/data learning-tracker
 
 | Method | Endpoint | Description |
 |--------|----------|-------------|
-| `GET` | `/api/tasks` | Fetch all tasks |
+| `GET` | `/api/tasks` | Fetch active tasks (`?archived=1` for archived) |
 | `POST` | `/api/tasks` | Create a new task |
-| `PUT` | `/api/tasks/:id` | Update a task (including subtasks) |
-| `DELETE` | `/api/tasks/:id` | Delete a task |
-| `POST` | `/api/tasks/reorder` | Reorder tasks (accepts array of task IDs) |
+| `PUT` | `/api/tasks/:id` | Update a task |
+| `PUT` | `/api/tasks/:id/archive` | Archive a task |
+| `PUT` | `/api/tasks/:id/unarchive` | Restore an archived task |
+| `DELETE` | `/api/tasks/:id` | Permanently delete a task |
+| `POST` | `/api/tasks/reorder` | Reorder tasks (array of IDs) |
 
 ## Usage
 
-- Click **+ New Goal** to create a task.
-- **Right-click** a task or subtask for edit/delete/promote options.
-- **Drag** tasks to reorder them, or hold over another task to nest it as a subtask.
-- Mark tasks complete to reveal rewards and track overall progress.
+- **+ New Goal** to create a task with optional due date.
+- **Right-click** for context menu actions.
+- **Double-click** a card to edit it.
+- **Drag** to reorder or nest tasks.
+- **Archive** completed tasks, then switch views with the Active/Archive toggle.
 
 ## Tech Stack
 
-- **Frontend:** Vanilla JavaScript, HTML, CSS
+- **Frontend:** Vanilla JavaScript, HTML, CSS (glassmorphism, CSS variables)
 - **Backend:** Node.js, Express
 - **Database:** SQLite3
 - **Containerization:** Docker