basic working app currently wworking on the sync to work

specifications.md

@@ -0,0 +1,486 @@
+Mobile To-Do & Calendar App Specification
+Overview
+
+The application is a minimalist task management app consisting of three primary screens:
+
+To-Do List
+Add New Task
+Calendar
+
+Navigation between these screens is handled through a persistent bottom navigation bar.
+
+The design should prioritize simplicity, quick task entry, and easy organization using categories, priorities, and scheduling.
+
+General Layout
+Device
+Mobile-first
+Portrait orientation
+Responsive for Android and iOS
+Safe-area support for notches and gesture navigation
+Theme
+White background
+Rounded containers
+Thin borders
+Minimal shadows
+Black typography
+Accent colors used only for task categories and primary actions
+Navigation
+
+A bottom navigation bar is visible on every screen.
+
+Navigation Items
+1. Tasks
+
+Icon:
+Checklist
+
+Destination:
+To-Do List Screen
+
+2. Calendar
+
+Icon:
+Calendar
+
+Destination:
+Calendar Screen
+
+3. Settings
+
+Icon:
+Gear
+
+Destination:
+Settings Screen
+
+The currently active tab should be highlighted using the primary accent color.
+
+Screen 1 — To-Do List
+Header
+
+Height: approximately 80 px
+
+Contains:
+
+App logo aligned left
+Title "TODO" centered
+Rounded top corners
+Category Filter
+
+Directly below the header.
+
+Layout
+
+Horizontal scroll list.
+
+Each category is displayed as a colored circular button.
+
+Example:
+
+🔴 Work
+🟢 Personal
+🔵 School
+🟠 Shopping
+🟣 Health
+🟡 Finance
+🌈 All
+
+Requirements:
+
+Scroll horizontally
+Only one category selected at a time
+Selected category has:
+thicker border
+slight shadow
+scale animation
+
+Selecting a category filters the visible tasks.
+
+Task List
+
+Vertical scrolling list.
+
+Each row contains:
+
+Left
+
+Checkbox
+
+States:
+
+Empty
+Checked
+
+Checking a task should:
+
+Strike through title
+Reduce opacity
+Optionally move task to completed section
+Center
+
+Task title
+
+One line
+
+If text exceeds width:
+
+Truncate with ellipsis
+Right
+
+Three-dot overflow menu
+
+Menu options:
+
+Edit
+Delete
+Duplicate
+Mark Complete
+Change Category
+Change Priority
+Floating Action Button
+
+Position:
+
+Bottom-right
+
+Shape:
+
+Rounded square or circular
+
+Color:
+
+Primary accent (pink/red in sketch)
+
+Icon:
+
+Function:
+
+Open Add Task Screen.
+
+Screen 2 — Add New Task
+
+Presented as a full screen.
+
+Header
+
+Same styling as home screen.
+
+Contains:
+
+Logo
+
+TODO
+
+Title
+
+Add New Task
+
+Category Selector
+
+Horizontal row of colored circles.
+
+User selects one.
+
+Selection should update instantly.
+
+Required field.
+
+Task Name
+
+Single-line text input.
+
+Placeholder:
+
+"Task name"
+
+Required.
+
+Maximum:
+
+100 characters.
+
+Subtasks
+
+Section below task name.
+
+Initially contains one button.
+
+"+ Add Subtask"
+
+Pressing button adds:
+
+□ Subtask text field
+
+Unlimited subtasks allowed.
+
+Users can remove subtasks individually.
+
+Date & Time
+
+Single horizontal row.
+
+Components:
+
+Due Date field
+
+Opens date picker.
+
+Due Time field
+
+Opens time picker.
+
+Calendar button
+
+Alternative method for selecting date.
+
+Priority
+
+Dropdown menu.
+
+Options:
+
+None
+Low
+Medium
+High
+Critical
+
+Each priority has a corresponding color.
+
+Description
+
+Large multiline text area.
+
+Placeholder:
+
+"Add description..."
+
+Maximum:
+
+1000 characters.
+
+Optional.
+
+Buttons
+
+Bottom aligned.
+
+Submit
+
+Primary button.
+
+Creates task.
+
+Returns to To-Do screen.
+
+Cancel
+
+Secondary button.
+
+Discard changes.
+
+Return without saving.
+
+Screen 3 — Calendar
+
+Displays scheduled tasks.
+
+Header
+
+Centered title:
+
+Calendar
+
+Date Strip
+
+Horizontal row.
+
+Shows days of current month.
+
+Example:
+
+1 2 3 4 5 6 7 8 9
+
+Requirements:
+
+Scrollable horizontally.
+
+Current day highlighted.
+
+Selecting a day refreshes task list.
+
+Month Label
+
+Displayed beneath date strip.
+
+Example:
+
+JAN 2026
+
+Centered.
+
+Calendar Body
+
+Large content area.
+
+Initially displays:
+
+Tasks scheduled for selected day.
+
+Each item includes:
+
+Category color
+Task title
+Time
+Completion status
+
+If no tasks:
+
+Display
+
+"No tasks scheduled."
+
+Task Object
+
+Each task should contain:
+
+{
+  "id": "",
+  "title": "",
+  "description": "",
+  "category": "",
+  "priority": "",
+  "completed": false,
+  "dueDate": "",
+  "dueTime": "",
+  "subtasks": [],
+  "createdAt": "",
+  "updatedAt": ""
+}
+Categories
+
+Each category consists of:
+
+{
+  "id": "",
+  "name": "",
+  "color": "#HEX"
+}
+
+Example:
+
+Work
+
+Red
+
+Personal
+
+Green
+
+School
+
+Blue
+
+Shopping
+
+Orange
+
+Health
+
+Purple
+
+Finance
+
+Yellow
+
+Task States
+
+A task can be:
+
+Pending
+
+Empty checkbox
+Normal text
+
+Completed
+
+Checked checkbox
+Strikethrough
+Reduced opacity
+
+Overdue
+
+Red due date
+Warning indicator
+
+Due Today
+
+Blue highlight
+
+High Priority
+
+Priority badge
+Interactions
+Tap Task
+
+Opens edit screen.
+
+Long Press Task
+
+Selection mode.
+
+Allows:
+
+Delete multiple
+Complete multiple
+Change category
+Change priority
+Swipe Left
+
+Delete task.
+
+Swipe Right
+
+Complete task.
+
+Pull Down
+
+Refresh list.
+
+Category Tap
+
+Filter tasks instantly.
+
+FAB Tap
+
+Open Add Task screen.
+
+Submit
+
+Validate required fields.
+
+Save.
+
+Return to task list.
+
+Settings Screen
+
+Although not drawn, the navigation implies a settings page containing:
+
+Dark Mode toggle
+Notification settings
+Reminder preferences
+Default category
+Sort tasks by:
+Date
+Priority
+Alphabetically
+Creation date
+Backup & Sync
+About
+Visual Style
+Clean, minimal interface with ample whitespace.
+Rounded corners (16–20 px) for cards, buttons, and input fields.
+Consistent spacing (8 px grid) and typography hierarchy.
+Category colors should be used sparingly for chips, icons, and badges to avoid overwhelming the interface.
+Subtle animations (150–250 ms) for navigation, button presses, filtering, and task completion to create a responsive feel without distraction.