Merge pull request 'Dev' (#35) from dev into main

Reviewed-on: #35

.gitea/workflows/build-apk.yml

@@ -1,74 +0,0 @@
-name: Build APK
-
-on:
-  push:
-    branches: [main]
-  workflow_dispatch:
-
-env:
-  ANDROID_HOME: ${{ runner.tool_cache }}/android-sdk
-  ANDROID_SDK_ROOT: ${{ runner.tool_cache }}/android-sdk
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-
-      - name: Set up JDK
-        uses: actions/setup-java@v4
-        with:
-          distribution: temurin
-          java-version: 17
-
-      - name: Install Android SDK
-        run: |
-          if [ -x "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" ]; then
-            echo "Android SDK already present in cache"
-          else
-            rm -rf "$ANDROID_HOME/cmdline-tools"
-            mkdir -p "$ANDROID_HOME/cmdline-tools"
-            wget -q https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip -O /tmp/cmdtools.zip
-            unzip -q /tmp/cmdtools.zip -d "$ANDROID_HOME/cmdline-tools"
-            mv "$ANDROID_HOME/cmdline-tools/cmdline-tools" "$ANDROID_HOME/cmdline-tools/latest"
-          fi
-          printf 'y\n' | "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" --licenses > /dev/null
-          "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" \
-            "platform-tools" \
-            "platforms;android-35" \
-            "platforms;android-36" \
-            "build-tools;35.0.0" \
-            "build-tools;36.0.0" \
-            "ndk;27.1.12297006"
-          mkdir -p carry-your-live/android/app
-          echo "sdk.dir=$ANDROID_HOME" > carry-your-live/android/app/local.properties
-
-      - name: Install JS dependencies
-        working-directory: carry-your-live
-        run: npm ci
-
-      - name: Generate debug keystore (signs the release APK)
-        run: |
-          mkdir -p carry-your-live/android/app
-          keytool -genkeypair -v \
-            -keystore carry-your-live/android/app/debug.keystore \
-            -alias androiddebugkey -storepass android -keypass android \
-            -keyalg RSA -keysize 2048 -validity 10000 \
-            -dname "CN=Android Debug,O=Android,C=US"
-
-      - name: Build release APK
-        run: |
-          cd carry-your-live/android
-          ./gradlew assembleRelease
-
-      - name: Upload APK
-        uses: actions/upload-artifact@v4
-        with:
-          name: carry-your-live-release
-          path: carry-your-live/android/app/build/outputs/release/app-release.apk

.gitea/workflows/build-deb.yml

@@ -1,36 +0,0 @@
-name: Build Desktop (deb)
-
-on:
-  push:
-    branches: [main]
-  workflow_dispatch:
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-
-      - name: Install JS dependencies
-        working-directory: carry-your-live
-        run: npm ci
-
-      - name: Export web bundle
-        working-directory: carry-your-live
-        run: npx expo export --platform web
-
-      - name: Build deb package
-        working-directory: carry-your-live
-        run: npx electron-builder --linux deb --config electron-builder.config.js
-
-      - name: Upload deb
-        uses: actions/upload-artifact@v4
-        with:
-          name: carry-your-live-desktop-deb
-          path: carry-your-live/desktop-build/*.deb

.gitea/workflows/release.yml

@@ -1,15 +1,17 @@
-name: release
+name: Build and Release APK
 
 on:
   push:
-    branches:
+    tags:
-      - main
+      - 'v*'
+  workflow_dispatch:
 
-permissions:
+env:
-  contents: write
+  ANDROID_HOME: ${{ runner.tool_cache }}/android-sdk
+  ANDROID_SDK_ROOT: ${{ runner.tool_cache }}/android-sdk
 
 jobs:
-  release:
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -17,40 +19,103 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Compute next version
+      - name: Set up Node
-        id: version
+        uses: actions/setup-node@v4
-        run: |
-          latest=$(git tag --list 'v[0-9]*' --sort=-v:refname | head -n 1)
-          if [ -z "$latest" ]; then
-            next="v1.0.0"
-          else
-            latest=${latest#v}
-            IFS='.' read -r major minor patch <<< "$latest"
-            next="v${major}.${minor}.$((patch + 1))"
-          fi
-          echo "next=${next}" >> "$GITHUB_OUTPUT"
-
-      - name: Build changelog
-        id: changelog
-        run: |
-          prev_tag=$(git describe --tags --abbrev=0 2>/dev/null || echo "")
-          if [ -z "$prev_tag" ]; then
-            log=$(git log --oneline --no-merges main | head -n 40)
-          else
-            log=$(git log --oneline --no-merges "$prev_tag"..main | head -n 40)
-          fi
-          {
-            echo "body<<EOF"
-            echo "## What's new in this release"
-            echo ""
-            echo "$log" | sed 's/^/- /'
-            echo "EOF"
-          } >> "$GITHUB_OUTPUT"
-
-      - name: Create release
-        uses: softprops/action-gh-release@v2
         with:
-          tag_name: ${{ steps.version.outputs.next }}
+          node-version: 22
-          name: ${{ steps.version.outputs.next }}
+
-          body: ${{ steps.changelog.outputs.body }}
+      - name: Set up JDK
-          generate_release_notes: false
+        uses: actions/setup-java@v4
+        with:
+          distribution: temurin
+          java-version: 17
+
+      - name: Install Android SDK
+        run: |
+          if [ -x "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" ]; then
+            echo "Android SDK already present in cache"
+          else
+            rm -rf "$ANDROID_HOME/cmdline-tools"
+            mkdir -p "$ANDROID_HOME/cmdline-tools"
+            wget -q https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip -O /tmp/cmdtools.zip
+            unzip -q /tmp/cmdtools.zip -d "$ANDROID_HOME/cmdline-tools"
+            mv "$ANDROID_HOME/cmdline-tools/cmdline-tools" "$ANDROID_HOME/cmdline-tools/latest"
+          fi
+          mkdir -p "$ANDROID_HOME/licenses"
+          echo "8933bad161af4178b1185d1a37fbf41ea5269c55" > "$ANDROID_HOME/licenses/android-sdk-license"
+          echo "d56f5187479451eabf01fb78af6dfcb131a6481e" >> "$ANDROID_HOME/licenses/android-sdk-license"
+          echo "24333f8a63b6825ea9c5514f83c2829b004d1fee" >> "$ANDROID_HOME/licenses/android-sdk-license"
+          "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" \
+            "platform-tools" \
+            "platforms;android-36" \
+            "build-tools;36.0.0" \
+            "ndk;27.1.12297006"
+          mkdir -p carry-your-live/android/app
+          echo "sdk.dir=$ANDROID_HOME" > carry-your-live/android/app/local.properties
+
+      - name: Install JS dependencies
+        working-directory: carry-your-live
+        run: |
+          for i in {1..3}; do
+            npm ci && break || sleep 10
+          done
+
+      - name: Generate debug keystore (signs the release APK)
+        run: |
+          mkdir -p carry-your-live/android/app
+          rm -f carry-your-live/android/app/debug.keystore
+          keytool -genkeypair -v \
+            -keystore carry-your-live/android/app/debug.keystore \
+            -alias androiddebugkey -storepass android -keypass android \
+            -keyalg RSA -keysize 2048 -validity 10000 \
+            -dname "CN=Android Debug,O=Android,C=US"
+
+      - name: Build release APK
+        run: |
+          cd carry-your-live/android
+          ./gradlew assembleRelease
+
+      - name: Find APK
+        id: find-apk
+        run: |
+          APK_PATH=$(find carry-your-live/android/app/build/outputs -name "*.apk" -type f | head -n 1)
+          echo "apk_path=$APK_PATH" >> "$GITHUB_OUTPUT"
+          echo "Found APK at: $APK_PATH"
+
+      - name: Create Gitea Release and Upload APK
+        if: startsWith(github.ref, 'refs/tags/v')
+        env:
+          GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
+        run: |
+          TAG_NAME="${GITHUB_REF#refs/tags/}"
+          REPO_OWNER="${GITHUB_REPOSITORY%/*}"
+          REPO_NAME="${GITHUB_REPOSITORY#*/}"
+          APK_PATH="${{ steps.find-apk.outputs.apk_path }}"
+          APK_NAME="carry-your-live-${TAG_NAME}.apk"
+          
+          # Create release using Gitea API
+          RESPONSE=$(curl -s -X POST "https://techmos.gitea.org/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/releases" \
+            -H "Authorization: token ${GITEA_TOKEN}" \
+            -H "Content-Type: application/json" \
+            -d "{
+              \"tag_name\": \"${TAG_NAME}\",
+              \"name\": \"${TAG_NAME}\",
+              \"body\": \"Automated release for ${TAG_NAME}\",
+              \"draft\": false,
+              \"prerelease\": false
+            }")
+          
+          RELEASE_ID=$(echo "$RESPONSE" | jq -r '.id')
+          
+          if [ "$RELEASE_ID" = "null" ] || [ -z "$RELEASE_ID" ]; then
+            echo "Release might already exist, fetching existing release..."
+            RELEASE_ID=$(curl -s -H "Authorization: token ${GITEA_TOKEN}" \
+              "https://techmos.gitea.org/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/releases/tags/${TAG_NAME}" | jq -r '.id')
+          fi
+          
+          # Upload APK as attachment
+          curl -s -X POST "https://techmos.gitea.org/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/releases/${RELEASE_ID}/assets" \
+            -H "Authorization: token ${GITEA_TOKEN}" \
+            -F "attachment=@${APK_PATH};filename=${APK_NAME}"
+          
+          echo "APK uploaded to release ${TAG_NAME}"

.opencode/architekt.md

@@ -15,3 +15,14 @@ System architecture design, technical strategy, and scalability planning.
 - Performance benchmarks
 - Technical debt ratio
 - Architecture compliance
+
+## Android Design Guidelines
+- Material Design elevation patterns (0-12dp shadows)
+- Tab bar height: 56dp (standard Android)
+- Status bar: dark style for light backgrounds, light style for dark
+- System back button: router.back() or goBack() with confirmation on home screen
+- Touch ripple: opacity scaling on press (44dp touch targets, 8dp border radius)
+- Safe area insets: account for bottom navigation bar (84px + system insets)
+- Theme: primary accent color with complementary supporting colors
+- Typography: Roboto-inspired font weights (600 for labels, 400/500 for body)
+- Scaling: 8dp grid system for spacing and margins

README.md

@@ -1,6 +1,40 @@
 # Carry Your Live - Mobile To-Do & Calendar App
 
-A minimalist, offline-first task management app built with Expo, React Native, and WatermelonDB. Features three primary screens: To-Do List, Add New Task, and Calendar with bottom navigation.
+A minimalist, offline-first task management app built with Expo, React Native, and WatermelonDB. Features multiple screens with bottom navigation, social features, and a full-featured backend API.
+
+## 📝 Recent Progress (v1.1.0 - Unreleased)
+
+### Added
+- **Friends feature**: Friend requests, accept/decline/remove, user search, full backend routes
+- **Assignee field on tasks**: Schema v7, model, types, forms, sync, task actions
+- **AssigneeSelector component** and assignee display in TaskItem
+- **QuickAddBar** on tasks overview (copied from calendar)
+- **Backend**: Mounted friends route, added assigneeId to task validation and sync
+
+### Changed
+- Due date prefilled from Calendar "+" button
+- 12-hour time formatting across task rows and pickers
+- Calendar strip scrolls to selected day when navigating months
+- Calendar completion toggle now handles repeating tasks and reminders
+- Task color strips now use the task's category color
+
+### Fixed
+- WheelTimePicker FlatList scroll clamping - all hours (0-23) and minutes (0-59) reachable
+- WheelTimePicker selection highlight background connecting selected item with colon separator
+- WheelTimePicker number alignment in scroll list
+- Tasks without a due date no longer get overdue styling
+- `useOverdueTasks` infinite re-subscription loop (Date.now in effect deps)
+- Web/Android crashes from decorator transform ordering (babel config)
+- FormButtons crash outside FormProvider; Cancel navigation fallback
+- Task repeat settings, reminders and series info now sync to backend
+
+### Removed
+- Task color picker (task color now comes from its category)
+- Drag lift popup from TaskItem (scale + shadow on drag)
+- Checkbox from task items
+- Selection bar overlapping QuickAddBar on tasks overview
+
+---
 
 ## Features
 
@@ -8,97 +42,145 @@ A minimalist, offline-first task management app built with Expo, React Native, a
 - **Offline-First Architecture**: Full CRUD operations work offline with WatermelonDB + SQLite
 - **Auto-Sync**: Background synchronization with custom Postgres API when online
 - **Cross-Platform**: iOS, Android, and Web from single codebase
+- **Desktop Support**: Electron wrapper for desktop app distribution
 
 ### Screens
 
-#### 1. To-Do List Screen
+#### 1. Tasks Screen (To-Do List)
 - **Header**: App logo + "TODO" title with rounded corners
 - **Category Filter**: Horizontal scrollable chips (Work, Personal, School, Shopping, Health, Finance, All)
   - Single selection with visual feedback (thicker border, shadow, scale animation)
   - Instant task filtering
-- **Task List**: Vertical scrolling with:
+- **QuickAddBar**: Quick task creation from list view
-  - Checkbox (empty/checked states with animation)
+- **Task List**: Virtualized FlatList with sections (Pending/Completed)
   - Task title (truncated with ellipsis)
   - Three-dot overflow menu (Edit, Delete, Duplicate, Mark Complete, Change Category, Change Priority)
   - Priority badges with colors
   - Due date/time with overdue/due-today highlighting
-  - Completed section (collapsible)
+  - Category color indicator strip
-- **Floating Action Button**: Bottom-right, opens Add Task screen with press animation
+  - Assignee display
+  - Swipe actions (left: delete, right: complete)
+  - Drag-to-reorder with visual drop indicators
+  - Long press → Selection mode (multi-delete, multi-complete, change category/priority)
+- **Floating Action Button**: Bottom-right, opens Add Task screen
 
-#### 2. Add New Task Screen
+#### 2. Calendar Screen
+- **Date Strip**: Horizontal scrollable days of current month
+  - Current day highlighted, scrolls to selected day on month change
+- **Month Label**: Centered (e.g., "JAN 2026")
+- **QuickAddBar**: Quick task creation for selected date
+- **Task List**: Tasks for selected day with category color, title, time, completion status
+- **Analog Clock Widget**: Decorative analog clock display
+- **Empty State**: "No tasks scheduled."
+- **Day View**: Detailed view for selected day (pushes to stack)
+
+#### 3. Stats Screen
+- Client-side statistics (`useStats` hook)
+- Task completion metrics
+- Category and priority breakdowns
+
+#### 4. Settings Screen
+- **Account**: Login/Register/Sign Out (SyncModal)
+- **Server URL Override**: Custom API endpoint configuration
+- **Appearance**: Accent color picker (dark mode toggle planned)
+- **Task Defaults**: Default category, sort order (Date, Priority, Alphabetically, Creation Date), show completed toggle
+- **Calendar**: Days ahead to display
+- **Reminders**: Global reminder preference (stored, wiring in progress)
+- **Notifications**: Toggle (stored, wiring in progress)
+- **Legal**: Privacy Policy, Terms of Service
+- **About**: Version info
+
+#### 5. Add New Task Screen
 - **Category Selector**: Horizontal row of colored circles (required)
 - **Task Name**: Single-line input, 100 char max (required)
-- **Subtasks**: Unlimited, add/remove individually
+- **Subtasks**: Unlimited, add/remove individually, nested subtask support
-- **Date & Time**: Date picker, time picker, calendar button
+- **Date & Time**: Date picker, time picker (WheelTimePicker), calendar button
 - **Priority**: Dropdown (None, Low, Medium, High, Critical) with color indicators
+- **Repeat Profile**: Recurring task configuration
+- **Reminder**: Reminder offset selector
+- **Assignee**: Assign task to friend
 - **Description**: Multi-line text area, 1000 char max
 - **Bottom Actions**: Submit (primary) / Cancel (secondary) fixed buttons
 
-#### 3. Calendar Screen
+#### 6. Task Detail Screen
-- **Date Strip**: Horizontal scrollable days of current month
+- Full task view with all fields
-- **Month Label**: Centered (e.g., "JAN 2026")
+- Subtask management (add, complete, reorder, convert to task)
-- **Task List**: Tasks for selected day with category color, title, time, completion status
+- Edit functionality
-- **Empty State**: "No tasks scheduled."
+- Repeat profile configuration
 
-#### 4. Settings Screen
+#### 7. Subtask Detail Screen
-- Dark Mode toggle
+- Nested subtask management
-- Push Notifications toggle
+- Convert subtask ↔ task
-- Reminder Preferences
+- Re-parent subtasks
-- Default Category selector
-- Sort Tasks By (Date, Priority, Alphabetically, Creation Date)
-- Backup & Sync
-- Version, Privacy Policy, Terms of Service
 
-### Task States
+#### 8. Sync Modal
-- **Pending**: Empty checkbox, normal text
+- Login/Register forms
-- **Completed**: Checked checkbox, strikethrough, reduced opacity
+- Forgot/Reset password flow
-- **Overdue**: Red due date, warning indicator
+- Server URL configuration
-- **Due Today**: Blue highlight
+- Sync status display
-- **High Priority**: Priority badge
 
-### Interactions
+### Task Features
-- Tap task → Edit screen
+- **Nested Subtasks**: Unlimited depth, re-parenting, drag reorder
-- Long press → Selection mode (multi-delete, multi-complete, change category/priority)
+- **Repeating Tasks**: Repeat profiles, series IDs, this/future/all delete scopes, undo-complete
-- Swipe left → Delete
+- **Categories/Tags**: 6 default categories with colors, custom category editor
-- Swipe right → Complete
+- **Priorities**: None, Low, Medium, High, Critical with color badges
-- Pull down → Refresh
+- **Due Dates/Times**: With all-day option
+- **Reminders**: Per-task reminder offsets
+- **Assignees**: Assign tasks to friends
+- **Overdue/Due Today**: Visual highlighting
+
+### Social Features
+- **Friends System**: Send/accept/decline/remove friend requests
+- **User Search**: Find users by username/email
+- **Task Assignment**: Assign tasks to friends (client-side, backend schema ready)
+
+---
 
 ## Tech Stack
 
 | Layer | Technology |
 |-------|------------|
-| Framework | Expo (React Native) |
+| Framework | Expo (React Native) / Expo Router v3 |
-| Language | TypeScript |
+| Language | TypeScript (strict mode) |
 | Navigation | Expo Router (file-based) |
-| Database | WatermelonDB + SQLite |
+| Database | WatermelonDB + SQLite (expo-sqlite) |
-| State | WatermelonDB (reactive queries, no Redux needed) |
+| State | WatermelonDB reactive queries (no Redux) |
 | Forms | React Hook Form + Zod validation |
-| UI Components | React Native Paper + Custom SVG icons |
+| UI Components | React Native Paper + Custom components |
-| Animations | React Native Reanimated |
+| Animations | React Native Reanimated v3 |
-| Date/Time | @react-native-community/datetimepicker + date-fns |
+| Date/Time | @react-native-community/datetimepicker + date-fns + WheelTimePicker |
-| Build | EAS Build / Gradle (local APK) |
+| Build | EAS Build / Gradle (local APK) / Electron Builder (desktop) |
 | CI/CD | Gitea Actions (`.gitea/workflows/build-apk.yml`) |
+| Backend | Node.js + Express + TypeScript |
+| Backend DB | PostgreSQL + Drizzle ORM |
+| Auth | JWT (access + refresh tokens) |
+| Validation | Zod (shared with frontend) |
+
+---
 
 ## Project Structure
 
 ```
 carry-your-live/
 ├── app/
-│   ├── _layout.tsx              # Root layout + DatabaseProvider
+│   ├── _layout.tsx              # Root layout + DatabaseProvider + AuthProvider
 │   ├── (tabs)/
 │   │   ├── _layout.tsx          # Bottom tab navigator
 │   │   ├── index.tsx            # Tasks screen
 │   │   ├── calendar.tsx         # Calendar screen
+│   │   ├── stats.tsx            # Stats screen
 │   │   └── settings.tsx         # Settings screen
-│   └── add-task.tsx             # Add Task screen
+│   ├── add-task.tsx             # Add Task screen
+│   ├── day-view.tsx             # Calendar day detail
+│   ├── task-detail.tsx          # Task view/edit
+│   └── subtask-detail.tsx       # Subtask view/edit
 ├── src/
-│   ├── components/              # Reusable UI components
+│   ├── components/              # Reusable UI components (30+)
 │   │   ├── Header.tsx
 │   │   ├── CategoryFilter.tsx
 │   │   ├── TaskList.tsx
 │   │   ├── TaskItem.tsx
 │   │   ├── FloatingActionButton.tsx
-│   │   ├── TabBarIcon.tsx
 │   │   ├── CategorySelector.tsx
 │   │   ├── TaskNameInput.tsx
 │   │   ├── SubtasksSection.tsx
@@ -106,24 +188,102 @@ carry-your-live/
 │   │   ├── PrioritySelector.tsx
 │   │   ├── DescriptionInput.tsx
 │   │   ├── FormButtons.tsx
-│   │   └── ListItem.tsx
+│   │   ├── ListItem.tsx
+│   │   ├── AnalogClock.tsx
+│   │   ├── AssigneeSelector.tsx
+│   │   ├── CategoryEditorModal.tsx
+│   │   ├── ColorPickerInput.tsx
+│   │   ├── ColorWheel.tsx
+│   │   ├── DateTimeInput.tsx
+│   │   ├── ForgotPasswordModal.tsx
+│   │   ├── FriendsModal.tsx
+│   │   ├── LegalModal.tsx
+│   │   ├── OptionPickerModal.tsx
+│   │   ├── QuickAddBar.tsx
+│   │   ├── ReminderSelector.tsx
+│   │   ├── RepeatSelector.tsx
+│   │   ├── ServerUrlModal.tsx
+│   │   ├── SubtaskItem.tsx
+│   │   ├── SyncModal.tsx
+│   │   ├── SyncStatus.tsx
+│   │   ├── TabBarIcon.tsx
+│   │   ├── TaskDeleteModal.tsx
+│   │   ├── TaskOverflowMenu.tsx
+│   │   ├── UpdateNotifier.tsx
+│   │   └── WheelTimePicker.tsx
+│   ├── constants/
+│   │   └── index.ts             # Categories, priorities, colors, reminder options
 │   ├── database/
-│   │   ├── schema.ts            # WatermelonDB schema
+│   │   ├── schema.ts            # WatermelonDB schema (v21)
 │   │   ├── index.ts             # Database instance + collections
-│   │   └── sync.ts              # Custom API sync adapter
+│   │   ├── sync.ts              # Custom API sync adapter (25KB)
-│   ├── models/
+│   │   ├── migrations.ts        # Schema migrations
-│   │   ├── Task.ts
+│   │   ├── adapter.ts           # Platform-specific adapters
-│   │   ├── Category.ts
+│   │   └── tombstones.ts        # Deleted record tracking
-│   │   └── Subtask.ts
 │   ├── hooks/
 │   │   ├── useDatabase.tsx      # Database context & providers
-│   │   └── useTasks.tsx         # Task queries with reactive state
+│   │   ├── useTasks.tsx         # Task queries with reactive state
-│   ├── constants/
+│   │   ├── useCategories.tsx    # Category queries
-│   │   └── index.ts             # Categories, priorities, colors
+│   │   ├── useTasksByDate.tsx   # Calendar date queries
-│   └── types/
+│   │   ├── useFriends.tsx       # Friends state & actions
-│       └── index.ts             # TypeScript interfaces
+│   │   ├── useAuth.tsx          # Authentication state
+│   │   └── useStats.tsx         # Statistics computation
+│   ├── models/
+│   │   ├── Task.ts              # Task model (assigneeId, repeat, reminders)
+│   │   ├── Category.ts
+│   │   ├── Subtask.ts
+│   │   ├── RepeatProfile.ts
+│   │   ├── Friendship.ts
+│   │   └── Tombstone.ts
+│   ├── services/
+│   │   ├── api.ts               # API client with auth
+│   │   ├── auth.ts              # Auth token management
+│   │   ├── friends.ts           # Friends API calls
+│   │   ├── notifications.ts     # Reminder scheduling (expo-notifications)
+│   │   ├── repeat.ts            # Repeat task generation
+│   │   └── taskActions.ts       # Task CRUD + sync operations
+│   ├── theme/
+│   │   ├── index.ts             # Theme context, colors, spacing
+│   │   └── theme.tsx            # Accent color picker, settings sync
+│   ├── types/
+│   │   └── index.ts             # TypeScript interfaces
+│   └── utils/
+│       ├── date.ts              # Date formatting utilities
+│       ├── format.ts            # General formatting
+│       └── validation.ts        # Zod schemas
+├── backend/                     # Backend API (separate package)
+│   ├── src/
+│   │   ├── index.ts             # Express app entry
+│   │   ├── db/
+│   │   │   ├── schema.ts        # Drizzle schema (Postgres)
+│   │   │   └── index.ts         # DB connection
+│   │   ├── routes/
+│   │   │   ├── auth.ts          # Register, login, me, forgot/reset password
+│   │   │   ├── categories.ts    # Category CRUD
+│   │   │   ├── tasks.ts         # Task CRUD + batch
+│   │   │   ├── subtasks.ts      # Subtask CRUD
+│   │   │   ├── sync.ts          # Pull/push sync endpoints
+│   │   │   ├── users.ts         # User profile & settings
+│   │   │   ├── friends.ts       # Friend requests, search, management
+│   │   │   ├── repeatProfiles.ts# Repeat profile CRUD
+│   │   │   └── pushNotifications.ts
+│   │   ├── middleware/
+│   │   │   ├── auth.ts          # JWT verification
+│   │   │   ├── errorHandler.ts
+│   │   │   └── validation.ts    # Zod validation middleware
+│   │   ├── services/
+│   │   └── utils/
+│   ├── drizzle.config.ts
+│   └── Dockerfile
+├── electron/                    # Desktop app entry
+├── android/                     # Native Android project
+├── assets/                      # Images, fonts
+├── patches/                     # patch-package fixes
+└── plugins/                     # Expo config plugins
 ```
 
+---
+
 ## Data Models
 
 ### Task
@@ -135,8 +295,14 @@ carry-your-live/
   categoryId: string;
   priority: 'none' | 'low' | 'medium' | 'high' | 'critical';
   completed: boolean;
-  dueDate: number;        // timestamp
+  dueDate: number;        // timestamp (ms)
-  dueTime: string;        // "HH:MM"
+  dueTime: string;        // "HH:MM" (24h stored, 12h displayed)
+  allDay: boolean;
+  assigneeId: string | null;
+  repeatProfileId: string | null;
+  seriesId: string | null;      // For repeating tasks
+  isTemplate: boolean;          // Series template
+  reminderOffset: string | null; // e.g., "5m", "1h", "1d"
   createdAt: Date;
   updatedAt: Date;
   subtasks: Subtask[];
@@ -150,6 +316,8 @@ carry-your-live/
   name: string;
   color: '#HEX';
   order: number;
+  createdAt: Date;
+  updatedAt: Date;
 }
 ```
 
@@ -158,14 +326,47 @@ carry-your-live/
 {
   id: string;
   taskId: string;
+  parentSubtaskId: string | null;  // For nesting
   title: string;
   completed: boolean;
   order: number;
+  assigneeId: string | null;
   createdAt: Date;
   updatedAt: Date;
 }
 ```
 
+### Repeat Profile
+```typescript
+{
+  id: string;
+  name: string;
+  frequency: 'daily' | 'weekly' | 'monthly' | 'yearly' | 'custom';
+  interval: number;
+  daysOfWeek: number[];      // 0-6 for weekly
+  dayOfMonth: number | null; // For monthly
+  monthOfYear: number | null; // For yearly
+  endDate: number | null;    // Timestamp
+  occurrences: number | null;
+  createdAt: Date;
+  updatedAt: Date;
+}
+```
+
+### Friendship
+```typescript
+{
+  id: string;
+  userId: string;        // Requester
+  friendId: string;      // Recipient
+  status: 'pending' | 'accepted' | 'declined' | 'blocked';
+  createdAt: Date;
+  updatedAt: Date;
+}
+```
+
+---
+
 ## Default Categories
 | Name | Color | Order |
 |------|-------|-------|
@@ -176,6 +377,8 @@ carry-your-live/
 | Health | #8E24AA (Purple) | 4 |
 | Finance | #FDD835 (Yellow) | 5 |
 
+---
+
 ## Priority Colors
 | Priority | Color |
 |----------|-------|
@@ -185,6 +388,8 @@ carry-your-live/
 | High | #E53935 |
 | Critical | #B71C1C |
 
+---
+
 ## Getting Started
 
 ### Prerequisites
@@ -192,15 +397,23 @@ carry-your-live/
 - npm or yarn
 - Expo CLI (`npm install -g expo-cli`)
 - iOS Simulator (Mac) / Android Studio for mobile testing
+- PostgreSQL 16+ (or Docker)
 
 ### Installation
 ```bash
 cd carry-your-live
 npm install
+
+cd ../backend
+npm install
 ```
 
 ### Development
+
+#### Frontend
 ```bash
+cd carry-your-live
+
 # Start Expo dev server
 npx expo start
 
@@ -210,6 +423,37 @@ npx expo start --android
 npx expo start --web
 ```
 
+#### Backend
+```bash
+cd backend
+
+# Start PostgreSQL (Docker)
+docker-compose up -d postgres
+
+# Configure environment
+cp .env.example .env
+# Edit .env with your settings
+
+# Run migrations
+npm run db:push
+
+# Start dev server
+npm run dev
+```
+
+Server runs at `http://localhost:3000` (health check: `GET /health`)
+
+#### Desktop (Electron)
+```bash
+cd carry-your-live
+
+# Development with live reload
+npm run desktop:dev
+
+# Production build
+npm run desktop:dist
+```
+
 ### Building
 
 #### EAS Build (cloud)
@@ -225,18 +469,16 @@ eas build --platform ios
 eas build --platform android
 eas build --platform web
 ```
-Profiles are defined in `eas.json` (`development`, `preview`, `production`; production auto-increments version code).
+Profiles defined in `eas.json` (`development`, `preview`, `production`; production auto-increments version code).
 
 #### Gradle (local Android APK)
-The native Android project lives in `carry-your-live/android/`. Requires JDK 17+ and the Android SDK (platform 35, build-tools 35.0.0, NDK 27.1).
-
 ```bash
 cd carry-your-live/android
 
 # Debug APK (unsigned)
 ./gradlew assembleDebug
 
-# Release APK (currently signed with the debug keystore)
+# Release APK (signed with debug keystore)
 ./gradlew assembleRelease
 ```
 Output:
@@ -244,24 +486,21 @@ Output:
 android/app/build/outputs/apk/debug/app-debug.apk
 android/app/build/outputs/apk/release/app-release.apk
 ```
-Key notes:
+
-- The debug keystore (`android/app/debug.keystore`) is generated by the CI pipeline and must exist for release builds — create it locally with the same command used in the pipeline (see below) if it's missing.
+---
-- Release builds use `signingConfig signingConfigs.debug` until a production keystore is configured.
-- Versions are set in `android/app/build.gradle` (`versionCode`, `versionName`).
 
 ## CI/CD Pipeline (Gitea Actions)
 
-`.gitea/workflows/build-apk.yml` builds a release APK on every push to `main` (also manually triggerable via workflow_dispatch):
+`.gitea/workflows/build-apk.yml` builds a release APK on every push to `main` (also manually triggerable via `workflow_dispatch`):
 
 1. **Checkout** and setup Node 22, JDK 17 (Temurin)
 2. **Android SDK**: installs cmdline-tools, licenses, platform-tools, `platforms;android-35`, `build-tools;35.0.0`, `ndk;27.1.12297006`
 3. **JS deps**: `npm ci` in `carry-your-live/`
-4. **Debug keystore**: generates `carry-your-live/android/app/debug.keystore` with `keytool` (alias `androiddebugkey`, passwords `android`)
+4. **Debug keystore**: generates `carry-your-live/android/app/debug.keystore` with `keytool`
 5. **Build**: `./gradlew assembleRelease` in `carry-your-live/android/`
-6. **Upload**: the APK is saved as the `carry-your-live-release` artifact (downloadable from the run's artifacts page)
+6. **Upload**: APK saved as `carry-your-live-release` artifact
-
-To run the build locally exactly as CI does:
 
+To run locally exactly as CI does:
 ```bash
 keytool -genkeypair -v \
   -keystore carry-your-live/android/app/debug.keystore \
@@ -271,48 +510,119 @@ keytool -genkeypair -v \
 cd carry-your-live/android && ./gradlew assembleRelease
 ```
 
-## Sync API Specification
+---
 
-The app expects a custom API at `http://localhost:3000/api` (configurable in `src/database/sync.ts`):
+## Backend API Specification
 
-### Pull Changes
+Server runs at `http://localhost:3000/api` (configurable in `src/services/api.ts` and `src/database/sync.ts`):
-```
-GET /sync?since={timestamp}
-```
-Response:
-```json
-{
-  "categories": [{ "id", "name", "color", "order", "createdAt", "updatedAt" }],
-  "tasks": [{ "id", "title", "description", "categoryId", "priority", "completed", "dueDate", "dueTime", "createdAt", "updatedAt" }],
-  "subtasks": [{ "id", "taskId", "title", "completed", "order", "createdAt", "updatedAt" }],
-  "timestamp": 1234567890
-}
-```
 
-### Push Changes
+### Authentication
-```
+- `POST /api/auth/register` - Register new user
-POST /sync/push
+- `POST /api/auth/login` - Login (returns access + refresh tokens)
-```
+- `POST /api/auth/refresh` - Refresh access token
-Body:
+- `POST /api/auth/forgot-password` - Request password reset
-```json
+- `POST /api/auth/reset-password` - Reset password with token
-{
+- `GET /api/auth/me` - Get current user
-  "changes": {
+
-    "categories": [...],
+### Categories
-    "tasks": [...],
+- `GET /api/categories` - List categories
-    "subtasks": [...]
+- `POST /api/categories` - Create category
-  },
+- `PATCH /api/categories/:id` - Update category
-  "lastPulledAt": 1234567890
+- `DELETE /api/categories/:id` - Delete category
-}
+
-```
+### Tasks
+- `GET /api/tasks` - List tasks (with filters: category, completed, due date range, assignee)
+- `GET /api/tasks/:id` - Get task with subtasks
+- `POST /api/tasks` - Create task
+- `PATCH /api/tasks/:id` - Update task
+- `DELETE /api/tasks/:id` - Delete task (scopes: this/future/all for repeating)
+- `POST /api/tasks/batch` - Batch operations
+
+### Subtasks
+- `GET /api/subtasks/task/:taskId` - List subtasks for task
+- `POST /api/subtasks/task/:taskId` - Create subtask
+- `PATCH /api/subtasks/:id` - Update subtask
+- `DELETE /api/subtasks/:id` - Delete subtask
+
+### Repeat Profiles
+- `GET /api/repeat-profiles` - List repeat profiles
+- `POST /api/repeat-profiles` - Create repeat profile
+- `PATCH /api/repeat-profiles/:id` - Update repeat profile
+- `DELETE /api/repeat-profiles/:id` - Delete repeat profile
+
+### Users
+- `GET /api/users/me` - Get user with settings
+- `PATCH /api/users/me/settings` - Update settings (darkMode, defaultCategoryId, sortOrder, etc.)
+- `GET /api/users/search` - Search users (for friends)
+
+### Friends
+- `GET /api/friends` - List accepted friends
+- `GET /api/friends/requests` - List pending requests (incoming/outgoing)
+- `POST /api/friends/request` - Send friend request
+- `PATCH /api/friends/request/:id/accept` - Accept request
+- `PATCH /api/friends/request/:id/decline` - Decline request
+- `DELETE /api/friends/:id` - Remove friend
+
+### Sync (Offline-first)
+- `GET /api/sync?since=<timestamp>` - Pull changes since timestamp
+- `POST /api/sync/push` - Push local changes
+
+---
+
+## Sync Protocol
+
+The sync endpoint uses a cursor-based approach with tombstones:
+
+1. **Pull**: Client sends `since` timestamp, server returns all changes since then
+   ```json
+   {
+     "categories": [...],
+     "tasks": [...],
+     "subtasks": [...],
+     "repeatProfiles": [...],
+     "friendships": [...],
+     "tombstones": [...],
+     "timestamp": 1234567890
+   }
+   ```
+
+2. **Push**: Client sends batched changes with `lastPulledAt`
+   ```json
+   {
+     "changes": {
+       "categories": [...],
+       "tasks": [...],
+       "subtasks": [...],
+       "repeatProfiles": [...],
+       "friendships": [...]
+     },
+     "tombstones": [...],
+     "lastPulledAt": 1234567890
+   }
+   ```
+
+3. **Conflict Resolution**: Last-write-wins based on `updatedAt` (customizable in `src/database/sync.ts`)
+
+---
 
 ## Configuration
 
-### Environment Variables
+### Frontend Environment Variables
-Create `.env` file:
+Create `.env` file in `carry-your-live/`:
 ```
 EXPO_PUBLIC_API_URL=http://your-api-url/api
 ```
 
+### Backend Environment Variables
+Create `.env` file in `backend/`:
+```
+DATABASE_URL=postgresql://user:pass@localhost:5432/carry_your_live
+JWT_SECRET=your-32-char-secret
+PORT=3000
+NODE_ENV=development
+FRONTEND_URL=http://localhost:8081
+```
+
 ### App Config
 Modify `app.json` for:
 - App name, slug, version
@@ -320,10 +630,12 @@ Modify `app.json` for:
 - Permissions (notifications, etc.)
 - Orientation, theme
 
+---
+
 ## Visual Style Guide
 
-- **Background**: White (#FFFFFF)
+- **Background**: White (#FFFFFF) / Dark mode (planned)
-- **Primary Accent**: #E53935 (Pink/Red)
+- **Primary Accent**: #E53935 (Pink/Red) - customizable
 - **Typography**: Black (#212121) primary, #757575 secondary, #9E9E9E tertiary
 - **Borders**: Thin (#E0E0E0), selected #E53935
 - **Radius**: 16-20px for cards/buttons/inputs
@@ -331,11 +643,13 @@ Modify `app.json` for:
 - **Shadows**: Minimal (elevation 1-3)
 - **Animations**: 150-250ms, cubic easing
 
+---
+
 ## Offline-First Architecture
 
 ```
 ┌─────────────┐     ┌──────────────┐     ┌─────────────┐
-│   Expo App  │────▶│ WatermelonDB │────▶│  Your API   │
+│   Expo App  │────▶│ WatermelonDB │────▶│  Backend    │
 │ (iOS/Android│     │  (SQLite)    │     │  (Postgres) │
 │    Web)     │◀───▶│  + Sync      │◀───▶│             │
 └─────────────┘     └──────────────┘     └─────────────┘
@@ -345,6 +659,79 @@ Modify `app.json` for:
 2. Reactive queries update UI instantly
 3. Background sync pushes/pulls changes
 4. Conflict resolution: last-write-wins (customizable)
+5. Tombstones track deletions for sync
+
+---
+
+## Current Implementation Status
+
+Based on code audit (August 2026):
+
+| Feature | Status | Notes |
+|---------|--------|-------|
+| Core CRUD (tasks, subtasks, categories) | ✅ Complete | |
+| Nested subtasks | ✅ Complete | Unlimited depth |
+| Repeating tasks | ✅ Complete | Profiles, series, this/future/all delete |
+| Categories & priorities | ✅ Complete | |
+| Calendar with date strip | ✅ Complete | Month nav, day detail |
+| Stats screen | ✅ Complete | Client-side only |
+| Settings screen | ✅ Complete | Most settings wired |
+| Friends system | ✅ Complete | Backend + UI |
+| Task assignees | ✅ Complete | Schema v7, UI, sync |
+| QuickAddBar | ✅ Complete | Tasks + Calendar |
+| Offline sync (WatermelonDB) | ✅ Complete | Schema v21, tombstones |
+| Backend API | ✅ Complete | Express + Drizzle + Postgres |
+| Auth (JWT) | ✅ Complete | Register, login, refresh, forgot/reset |
+| Dark mode / theme toggle | ❌ Missing | Backend column exists, UI not implemented |
+| Notifications toggle | 🟡 Partial | Stored but not respected |
+| Global reminder preference | 🟡 Partial | Stored but not applied |
+| Forgot/reset password UI | 🟡 Partial | Backend done, no client UI |
+| Pull-to-refresh → sync | 🟡 Partial | Reloads local only |
+| Client settings sync | 🟡 Partial | AsyncStorage only, not synced to backend |
+| Reminder enum mismatch | 🟡 Partial | Client uses '5m'/'1h', spec uses minutes |
+
+---
+
+## Roadmap Highlights
+
+### v1.1.0 — Friends & Assignees (Current Unreleased)
+- Ship existing Unreleased changes
+- Fix notifications toggle, wire up `rescheduleAllReminders()`
+- Apply global reminder preference
+- Make pull-to-refresh trigger real sync
+- Add forgot/reset password UI
+- Unify reminder offset enums
+
+### v1.2.0 — Theming & Findability
+- Light mode + follow-system-theme
+- Sync all settings to `PATCH /users/me/settings`
+- Task search (filter + global)
+- Friend request badges/indicators
+
+### v1.3.0 — Stats & Insights
+- Persisted stats snapshots
+- Productivity trends, streaks
+- Export stats (CSV/image)
+
+### v1.4.0 — Quick Capture & Calendar UX
+- Natural language quick-add
+- Drag-and-drop rescheduling in calendar
+- Month grid view
+- "Today at a glance" dashboard
+
+### v1.5.0 — Power Tools & Personalization
+- Task templates, soft-archive, attachments
+- Markdown support, deep links
+- Biometric lock, haptics, reduced motion
+- Android home-screen widget
+
+### v2.0.0 — Collaboration
+- Real task assignment delivery
+- Shared lists with permissions
+- Server push notifications (FCM/APNs)
+- Comments/activity feed
+
+---
 
 ## Contributing
 
@@ -353,6 +740,9 @@ Modify `app.json` for:
 3. Write components with React Hook Form + Zod
 4. Use WatermelonDB decorators for models
 5. Test offline scenarios
+6. Run `npm run lint` and `npm run typecheck` before committing
+
+---
 
 ## License
 

carry-your-live/.gitignore

@@ -41,4 +41,3 @@ yarn-error.*
 
 # generated native folders
 /ios
-/android

carry-your-live/android/.gitignore

@@ -0,0 +1,19 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+
+# generated inline modules
+app/src/main/java/inline/
+
+# Bundle artifacts
+*.jsbundle

carry-your-live/android/app/build.gradle

@@ -0,0 +1,182 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('hermes-compiler/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+    enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
+    // Use Expo CLI to bundle the app, this ensures the Metro config
+    // works correctly with Expo projects.
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
+
+    /* Folders */
+     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true in release builds to optimize the app using [R8](https://developer.android.com/topic/performance/app-optimization/enable-app-optimization).
+ */
+def enableMinifyInReleaseBuilds = (findProperty('android.enableMinifyInReleaseBuilds') ?: false).toBoolean()
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
+
+android {
+    ndkVersion = rootProject.ext.ndkVersion
+
+    buildToolsVersion = rootProject.ext.buildToolsVersion
+    compileSdk = rootProject.ext.compileSdkVersion
+
+    namespace = 'com.anonymous.carryyourlive'
+    defaultConfig {
+        applicationId = 'com.anonymous.carryyourlive'
+        minSdkVersion = rootProject.ext.minSdkVersion
+        targetSdkVersion = rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.0"
+
+        buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig = signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig = signingConfigs.debug
+            def enableShrinkResources = findProperty('android.enableShrinkResourcesInReleaseBuilds') ?: 'false'
+            shrinkResources = enableShrinkResources.toBoolean()
+            minifyEnabled enableMinifyInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            def enablePngCrunchInRelease = findProperty('android.enablePngCrunchInReleaseBuilds') ?: 'true'
+            crunchPngs = enablePngCrunchInRelease.toBoolean()
+        }
+    }
+    packagingOptions {
+        jniLibs {
+            def enableLegacyPackaging = findProperty('expo.useLegacyPackaging') ?: 'false'
+            useLegacyPackaging = enableLegacyPackaging.toBoolean()
+        }
+    }
+    androidResources {
+        ignoreAssetsPattern = '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
+    }
+}
+
+// Apply static values from `gradle.properties` to the `android.packagingOptions`
+// Accepts values in comma delimited lists, example:
+// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
+["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
+    // Split option: 'foo,bar' -> ['foo', 'bar']
+    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+    // Trim all elements in place.
+    for (i in 0..<options.size()) options[i] = options[i].trim();
+    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
+    options -= ""
+
+    if (options.length > 0) {
+        println "android.packagingOptions.$prop += $options ($options.length)"
+        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+        options.each {
+            android.packagingOptions[prop] += it
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+    if (isGifEnabled) {
+        // For animated gif support
+        implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
+    }
+
+    if (isWebpEnabled) {
+        // For webp support
+        implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
+        if (isWebpAnimatedEnabled) {
+            // Animated webp support
+            implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
+        }
+    }
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}

carry-your-live/android/app/proguard-rules.pro

@@ -0,0 +1,14 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# react-native-reanimated
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
+
+# Add any project specific keep options here:

carry-your-live/android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>

carry-your-live/android/app/src/debugOptimized/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>

carry-your-live/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,36 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
+  <uses-permission android:name="android.permission.INTERNET"/>
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" tools:replace="android:maxSdkVersion"/>
+  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+  <uses-permission android:name="android.permission.VIBRATE"/>
+  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" tools:replace="android:maxSdkVersion"/>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW"/>
+      <category android:name="android.intent.category.BROWSABLE"/>
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false" android:usesCleartextTraffic="true">
+    <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/notification_icon_color"/>
+    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon"/>
+    <meta-data android:name="expo.modules.notifications.default_notification_color" android:resource="@color/notification_icon_color"/>
+    <meta-data android:name="expo.modules.notifications.default_notification_icon" android:resource="@drawable/notification_icon"/>
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
+    <meta-data android:name="expo.modules.updates.ENABLE_BSDIFF_PATCH_SUPPORT" android:value="true"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
+    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode|smallestScreenSize|assetsPaths" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="exp+carry-your-live"/>
+      </intent-filter>
+    </activity>
+  </application>
+</manifest>

carry-your-live/android/app/src/main/java/com/anonymous/carryyourlive/MainActivity.kt

@@ -0,0 +1,61 @@
+package com.anonymous.carryyourlive
+
+import android.os.Build
+import android.os.Bundle
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+import expo.modules.ReactActivityDelegateWrapper
+
+class MainActivity : ReactActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    // Set the theme to AppTheme BEFORE onCreate to support
+    // coloring the background, status bar, and navigation bar.
+    // This is required for expo-splash-screen.
+    setTheme(R.style.AppTheme);
+    super.onCreate(null)
+  }
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "main"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate {
+    return ReactActivityDelegateWrapper(
+          this,
+          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
+          object : DefaultReactActivityDelegate(
+              this,
+              mainComponentName,
+              fabricEnabled
+          ){})
+  }
+
+  /**
+    * Align the back button behavior with Android S
+    * where moving root activities to background instead of finishing activities.
+    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
+    */
+  override fun invokeDefaultOnBackPressed() {
+      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
+          if (!moveTaskToBack(false)) {
+              // For non-root activities, use the default implementation to finish them.
+              super.invokeDefaultOnBackPressed()
+          }
+          return
+      }
+
+      // Use the default back button implementation on Android S
+      // because it's doing more than [Activity.moveTaskToBack] in fact.
+      super.invokeDefaultOnBackPressed()
+  }
+}

carry-your-live/android/app/src/main/java/com/anonymous/carryyourlive/MainApplication.kt

@@ -0,0 +1,45 @@
+package com.anonymous.carryyourlive
+
+import android.app.Application
+import android.content.res.Configuration
+
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
+import com.facebook.react.ReactPackage
+import com.facebook.react.ReactHost
+import com.facebook.react.common.ReleaseLevel
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
+
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ExpoReactHostFactory
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactHost: ReactHost by lazy {
+    ExpoReactHostFactory.getDefaultReactHost(
+      context = applicationContext,
+      packageList =
+        PackageList(this).packages.apply {
+          // Packages that cannot be autolinked yet can be added manually here, for example:
+          // add(MyReactNativePackage())
+        }
+    )
+  }
+
+  override fun onCreate() {
+    super.onCreate()
+    DefaultNewArchitectureEntryPoint.releaseLevel = try {
+      ReleaseLevel.valueOf(BuildConfig.REACT_NATIVE_RELEASE_LEVEL.uppercase())
+    } catch (e: IllegalArgumentException) {
+      ReleaseLevel.STABLE
+    }
+    loadReactNative(this)
+    ApplicationLifecycleDispatcher.onApplicationCreate(this)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+  }
+}

carry-your-live/android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,6 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@color/splashscreen_background"/>
+  <item>
+    <bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
+  </item>
+</layer-list>

carry-your-live/android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
+
+    <selector>
+        <!--
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>

carry-your-live/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
+</adaptive-icon>

carry-your-live/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
+</adaptive-icon>

carry-your-live/android/app/src/main/res/values-night/colors.xml

@@ -0,0 +1,3 @@
+<resources>
+  <color name="appBackground">#121212</color>
+</resources>

carry-your-live/android/app/src/main/res/values/colors.xml

@@ -0,0 +1,7 @@
+<resources>
+  <color name="splashscreen_background">#FFFFFF</color>
+  <color name="iconBackground">#E6F4FE</color>
+  <color name="colorPrimary">#023c69</color>
+  <color name="notification_icon_color">#1E88E5</color>
+  <color name="appBackground">#121212</color>
+</resources>

carry-your-live/android/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+  <string name="app_name">carry-your-live</string>
+</resources>

carry-your-live/android/app/src/main/res/values/styles.xml

@@ -0,0 +1,12 @@
+<resources xmlns:tools="http://schemas.android.com/tools">
+  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    <item name="colorPrimary">@color/colorPrimary</item>
+    <item name="android:statusBarColor">@android:color/transparent</item>
+    <item name="android:navigationBarColor">@android:color/transparent</item>
+    <item name="android:windowBackground">@color/appBackground</item>
+  </style>
+  <style name="Theme.App.SplashScreen" parent="AppTheme">
+    <item name="android:windowBackground">@drawable/splashscreen_logo</item>
+  </style>
+</resources>

carry-your-live/android/build.gradle

@@ -0,0 +1,37 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+  dependencies {
+    classpath('com.android.tools.build:gradle')
+    classpath('com.facebook.react:react-native-gradle-plugin')
+    classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
+  }
+}
+
+allprojects {
+  repositories {
+    google()
+    mavenCentral()
+        maven { url = 'https://www.jitpack.io' }
+  }
+}
+
+apply plugin: "expo-root-project"
+apply plugin: "com.facebook.react.rootproject"
+
+subprojects {
+  plugins.withId("com.android.library") {
+    extensions.configure(com.android.build.api.dsl.LibraryExtension) {
+      ndkVersion = rootProject.ext.ndkVersion
+    }
+  }
+  plugins.withId("com.android.application") {
+    extensions.configure(com.android.build.api.dsl.ApplicationExtension) {
+      ndkVersion = rootProject.ext.ndkVersion
+    }
+  }
+}

carry-your-live/android/gradle.properties

@@ -0,0 +1,66 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx1536m -XX:MaxMetaspaceSize=1024m --add-opens=java.base/java.lang=ALL-UNNAMED --add-opens=java.base/java.io=ALL-UNNAMED
+org.gradle.workers.max=2
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which packages are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+
+# Enable AAPT2 PNG crunching
+android.enablePngCrunchInReleaseBuilds=true
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them. React Native 0.82+ always runs with the New
+# Architecture, so this flag is no longer honored and was removed.
+
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
+
+# Enable edge-to-edge display support.
+# This allows your app to draw behind system bars for an immersive UI.
+# Note: Only works with ReactActivity and should not be used with custom Activity.
+edgeToEdgeEnabled=true
+
+# Enable GIF support in React Native images (~200 B increase)
+expo.gif.enabled=true
+# Enable webp support in React Native images (~85 KB increase)
+expo.webp.enabled=true
+# Enable animated webp support (~3.4 MB increase)
+# Disabled by default because iOS doesn't support animated webp
+expo.webp.animated=false
+
+# Enable network inspector
+EX_DEV_CLIENT_NETWORK_INSPECTOR=true
+
+# Use legacy packaging to compress native libraries in the resulting APK.
+expo.useLegacyPackaging=false
+
+expo.inlineModules.watchedDirectories=[]
+# Enabled parallel sync for Gradle 9.4+
+org.gradle.tooling.parallel=true

carry-your-live/android/gradle/gradle-daemon-jvm.properties

@@ -0,0 +1,2 @@
+#This file is generated by updateDaemonJvm
+toolchainVersion=17

carry-your-live/android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.3.1-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

carry-your-live/android/gradlew

@@ -0,0 +1,248 @@
+#!/bin/sh
+
+#
+# Copyright © 2015 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

carry-your-live/android/gradlew.bat

@@ -0,0 +1,93 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

carry-your-live/android/settings.gradle

@@ -0,0 +1,42 @@
+pluginManagement {
+  repositories {
+    gradlePluginPortal()
+  }
+  def reactNativeGradlePlugin = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })")
+    }.standardOutput.asText.get().trim()
+  ).getParentFile().absolutePath
+  includeBuild(reactNativeGradlePlugin)
+  
+  def expoPluginsPath = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
+    }.standardOutput.asText.get().trim(),
+    "../android/expo-gradle-plugin"
+  ).absolutePath
+  includeBuild(expoPluginsPath)
+}
+
+plugins {
+  id("com.facebook.react.settings")
+  id("expo-autolinking-settings")
+}
+
+extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
+  if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
+    ex.autolinkLibrariesFromCommand()
+  } else {
+    ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand)
+  }
+}
+expoAutolinking.useExpoModules()
+
+rootProject.name = 'carry-your-live'
+
+expoAutolinking.useExpoVersionCatalog()
+
+include ':app'
+includeBuild(expoAutolinking.reactNativeGradlePlugin)

carry-your-live/app.json

@@ -34,7 +34,9 @@
           "color": "#1E88E5"
         }
       ],
-      "./plugins/withQuickAddWidget"
+      "./plugins/withQuickAddWidget",
+      "expo-router",
+      "expo-sqlite"
     ],
     "extra": {
       "eas": {

carry-your-live/app/(tabs)/_layout.tsx

@@ -1,7 +1,7 @@
 import { Tabs } from 'expo-router';
 import React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Animated } from 'react-native';
 import { TabBarIcon } from '@/components/TabBarIcon';
 import { useSettings } from '@/theme';
 import { setLastVisitedTab } from '@/utils/tabHistory';
@@ -18,64 +18,80 @@ export default function TabLayout() {
         tabBarStyle: {
           backgroundColor: theme.tabBarBg,
           borderTopWidth: 0,
-          height: 84 + insets.bottom,
+          height: 56,
           paddingBottom: insets.bottom,
-          paddingTop: 12,
+          paddingTop: insets.top,
           paddingHorizontal: 16,
-          elevation: 0,
+          elevation: 4,
           shadowColor: '#000',
-          shadowOffset: { width: 0, height: -4 },
+          shadowOffset: { width: 0, height: 2 },
-          shadowOpacity: 0.12,
+          shadowOpacity: 0.1,
-          shadowRadius: 20,
+          shadowRadius: 8,
         },
         tabBarItemStyle: {
-          paddingVertical: 0,
+          paddingVertical: 6,
+          paddingHorizontal: 12,
         },
         tabBarLabelStyle: {
-          fontSize: 11,
+          fontSize: 12,
-          fontWeight: '700',
+          fontWeight: '600',
-          marginTop: 4,
+          marginTop: 2,
         },
         headerShown: false,
         sceneStyle: { backgroundColor: theme.background },
       }}
-      tabBar={(props) => {
+      tabBar={props => {
         return (
           <View
-          style={[
+            style={[
-            styles.tabBarContainer,
+              styles.tabBarContainer,
-            {
+              {
-              backgroundColor: theme.tabBarBg,
+                backgroundColor: theme.tabBarBg,
-              paddingBottom: Math.max(props.insets.bottom, 8),
+                paddingBottom: Math.max(props.insets.bottom, 8),
-              shadowColor: '#000',
+                shadowColor: '#000',
-              shadowOffset: { width: 0, height: -4 },
+                shadowOffset: { width: 0, height: 4 },
-              shadowOpacity: 0.12,
+                shadowOpacity: 0.1,
-              shadowRadius: 20,
+                shadowRadius: 8,
-              elevation: 8,
+                elevation: 4,
-            },
+              },
-          ]}
+            ]}
           >
-            {props.navigation.getState().routes.map((route) => {
+            {props.navigation.getState().routes.map(route => {
-              const focused = props.navigation.getState().index === props.navigation.getState().routes.indexOf(route);
+              const focused =
+                props.navigation.getState().index ===
+                props.navigation.getState().routes.indexOf(route);
               return (
                 <TouchableOpacity
                   key={route.name}
                   style={[
                     styles.tabItem,
-                    focused && styles.tabItemActive,
                     { backgroundColor: focused ? theme.accentSoft : 'transparent' },
                   ]}
                   onPress={() => props.navigation.navigate(route.name as never)}
                   accessibilityRole="button"
-                  accessibilityLabel={route.name === 'index' ? 'ToDo' : route.name.charAt(0).toUpperCase() + route.name.slice(1)}
+                  accessibilityLabel={
+                    route.name === 'index'
+                      ? 'ToDo'
+                      : route.name.charAt(0).toUpperCase() + route.name.slice(1)
+                  }
                   accessibilityState={{ selected: focused }}
                 >
-                  <TabBarIcon
+                  <Animated.View style={[styles.rippleContainer, { opacity: focused ? 1 : 0.5 }]}>
-                    name={route.name === 'index' ? 'checklist' : route.name === 'calendar' ? 'calendar' : route.name === 'stats' ? 'stats' : 'gear'}
+                    <TabBarIcon
-                    focused={focused}
+                      name={
-                    color={focused ? theme.accent : theme.textSecondary}
+                        route.name === 'index'
-                    size={24}
+                          ? 'checklist'
-                  />
+                          : route.name === 'calendar'
+                            ? 'calendar'
+                            : route.name === 'stats'
+                              ? 'stats'
+                              : 'gear'
+                      }
+                      focused={focused}
+                      color={focused ? theme.accent : theme.textSecondary}
+                      size={24}
+                    />
+                  </Animated.View>
                 </TouchableOpacity>
               );
             })}
@@ -103,22 +119,23 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-around',
-    paddingTop: 10,
+    paddingTop: 6,
     paddingHorizontal: 16,
   },
   tabItem: {
     flex: 1,
     alignItems: 'center',
-    paddingVertical: 8,
+    paddingVertical: 6,
-    paddingHorizontal: 8,
+    paddingHorizontal: 12,
-    borderRadius: 16,
+    borderRadius: 8,
     minWidth: 70,
   },
-  tabItemActive: {
+  rippleContainer: {
-    shadowColor: '#000',
+    width: 44,
-    shadowOffset: { width: 0, height: 2 },
+    height: 44,
-    shadowOpacity: 0.1,
+    borderRadius: 22,
-    shadowRadius: 8,
+    alignItems: 'center',
-    elevation: 4,
+    justifyContent: 'center',
+    position: 'relative',
   },
 });

carry-your-live/app/(tabs)/calendar.tsx

@@ -1,5 +1,15 @@
 import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
-import { View, Text, StyleSheet, SafeAreaView, ScrollView, TouchableOpacity, Animated, Dimensions, KeyboardAvoidingView } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  TouchableOpacity,
+  Animated,
+  Dimensions,
+  KeyboardAvoidingView,
+} from 'react-native';
 import { useRouter, useFocusEffect } from 'expo-router';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { Header } from '@/components/Header';
@@ -15,7 +25,15 @@ import { OptionPickerModal } from '@/components/OptionPickerModal';
 import { TaskItem } from '@/components/TaskItem';
 import { SubtaskItem } from '@/components/SubtaskItem';
 import Task from '@/models/Task';
-import { format, addMonths, addDays, startOfMonth, isSameDay, isSameMonth, isToday } from 'date-fns';
+import {
+  format,
+  addMonths,
+  addDays,
+  startOfMonth,
+  isSameDay,
+  isSameMonth,
+  isToday,
+} from 'date-fns';
 import Svg, { Path } from 'react-native-svg';
 import type { ThemeColors } from '@/theme';
 import type { TaskData, SubtaskData } from '@/types';
@@ -24,8 +42,18 @@ const WIDTH = Dimensions.get('window').width;
 const GERMAN_WEEKDAYS = ['mo', 'di', 'mi', 'do', 'fr', 'sa', 'so'];
 const PRIORITY_RANK: Record<string, number> = { none: 0, low: 1, medium: 2, high: 3, critical: 4 };
 const MONTH_NAMES = [
-  'January', 'February', 'March', 'April', 'May', 'June',
+  'January',
-  'July', 'August', 'September', 'October', 'November', 'December',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
 ];
 
 export default function CalendarScreen() {
@@ -70,7 +98,9 @@ export default function CalendarScreen() {
     const sorted = [...selectedDayTasks];
     switch (sortBy) {
       case 'date':
-        sorted.sort((a, b) => (a.dueDate || Number.MAX_SAFE_INTEGER) - (b.dueDate || Number.MAX_SAFE_INTEGER));
+        sorted.sort(
+          (a, b) => (a.dueDate || Number.MAX_SAFE_INTEGER) - (b.dueDate || Number.MAX_SAFE_INTEGER)
+        );
         break;
       case 'priority':
         sorted.sort((a, b) => PRIORITY_RANK[b.priority] - PRIORITY_RANK[a.priority]);
@@ -118,10 +148,18 @@ export default function CalendarScreen() {
       animatingRef.current = true;
       const w = gridWidthRef.current || WIDTH;
       const target = dir === 1 ? -w : w;
-      Animated.timing(translateX.current, { toValue: target, duration: 220, useNativeDriver: false }).start(() => {
+      Animated.timing(translateX.current, {
+        toValue: target,
+        duration: 220,
+        useNativeDriver: false,
+      }).start(() => {
         setVisibleMonth(next);
         translateX.current.setValue(-target);
-        Animated.timing(translateX.current, { toValue: 0, duration: 180, useNativeDriver: false }).start(() => {
+        Animated.timing(translateX.current, {
+          toValue: 0,
+          duration: 180,
+          useNativeDriver: false,
+        }).start(() => {
           animatingRef.current = false;
         });
       });
@@ -148,11 +186,11 @@ export default function CalendarScreen() {
         .minDistance(6)
         .runOnJS(true)
         // eslint-disable-next-line react-hooks/refs
-        .onUpdate((e) => {
+        .onUpdate(e => {
           if (!animatingRef.current) translateX.current.setValue(e.translationX);
         })
         // eslint-disable-next-line react-hooks/refs
-        .onEnd((e) => {
+        .onEnd(e => {
           if (animatingRef.current) return;
           const w = gridWidthRef.current || WIDTH;
           const dx = e.translationX;
@@ -183,22 +221,26 @@ export default function CalendarScreen() {
   const monthOptions = MONTH_NAMES.map((label, i) => ({ value: String(i), label }));
   const yearOptions = useMemo(() => {
     const options: { value: string; label: string }[] = [];
-    for (let y = currentYear - 20; y <= currentYear + 10; y++) options.push({ value: String(y), label: String(y) });
+    for (let y = currentYear - 20; y <= currentYear + 10; y++)
+      options.push({ value: String(y), label: String(y) });
     return options;
   }, [currentYear]);
 
-  const handleToggleComplete = useCallback(async (taskId: string) => {
+  const handleToggleComplete = useCallback(
-    await confirmAndToggleTaskComplete(taskId, () => {
+    async (taskId: string) => {
-      refreshDayTasks();
+      await confirmAndToggleTaskComplete(taskId, () => {
-      refreshMonthTasks();
+        refreshDayTasks();
-      refreshSubtasks();
+        refreshMonthTasks();
-    });
+        refreshSubtasks();
-  }, [refreshDayTasks, refreshMonthTasks, refreshSubtasks]);
+      });
+    },
+    [refreshDayTasks, refreshMonthTasks, refreshSubtasks]
+  );
 
   const [expandedTasks, setExpandedTasks] = useState<Set<string>>(new Set());
 
   const toggleExpand = useCallback((taskId: string) => {
-    setExpandedTasks((prev) => {
+    setExpandedTasks(prev => {
       const next = new Set(prev);
       if (next.has(taskId)) {
         next.delete(taskId);
@@ -209,58 +251,126 @@ export default function CalendarScreen() {
     });
   }, []);
 
-  const handleSubtaskToggle = useCallback(async (subtaskId: string) => {
+  const handleSubtaskToggle = useCallback(
-    await toggleSubtaskComplete(subtaskId);
+    async (subtaskId: string) => {
-    refreshDayTasks();
+      await toggleSubtaskComplete(subtaskId);
-    refreshMonthTasks();
+      refreshDayTasks();
-    refreshSubtasks();
+      refreshMonthTasks();
-  }, [refreshDayTasks, refreshMonthTasks, refreshSubtasks]);
+      refreshSubtasks();
+    },
+    [refreshDayTasks, refreshMonthTasks, refreshSubtasks]
+  );
 
   return (
     <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
-      <Header title="Calendar" showLogo={false} />
+      <Header
+        title="Calendar"
+        showLogo={false}
+        rightAction={
+          <TouchableOpacity
+            onPress={() => router.back()}
+            style={styles.backButton}
+            accessible={true}
+            accessibilityLabel="Back"
+          >
+            <Svg width={20} height={20} viewBox="0 0 24 24">
+              <Path
+                d="M15 18l-6-6 6-6"
+                stroke="currentColor"
+                strokeWidth={2.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="none"
+              />
+            </Svg>
+          </TouchableOpacity>
+        }
+      />
 
       <KeyboardAvoidingView style={styles.kbAvoid} behavior="padding">
-      <ScrollView style={styles.scrollBody} showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>
+        <ScrollView
-        <GestureDetector gesture={pan}>
+          style={styles.scrollBody}
-          <Animated.View
+          showsVerticalScrollIndicator={false}
-            onLayout={(e) => {
+          contentContainerStyle={styles.scrollContent}
-              gridWidthRef.current = e.nativeEvent.layout.width;
+        >
-            }}
+          <GestureDetector gesture={pan}>
-            // eslint-disable-next-line react-hooks/refs
+            <Animated.View
-            style={[styles.calendarArea, { transform: [{ translateX: translateX.current }] }]}
+              onLayout={e => {
-          >
+                gridWidthRef.current = e.nativeEvent.layout.width;
+              }}
+              // eslint-disable-next-line react-hooks/refs
+              style={[styles.calendarArea, { transform: [{ translateX: translateX.current }] }]}
+            >
               <View style={styles.monthRow}>
                 <TouchableOpacity
                   onPress={() => transitionTo(-1)}
-                  style={[styles.monthNav, { borderColor: theme.borderStrong, backgroundColor: theme.card }]}
+                  style={[
+                    styles.monthNav,
+                    { borderColor: theme.borderStrong, backgroundColor: theme.card },
+                  ]}
                   activeOpacity={0.7}
                 >
                   <Svg width={20} height={20} viewBox="0 0 24 24">
-                    <Path d="M15 18l-6-6 6-6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                    <Path
+                      d="M15 18l-6-6 6-6"
+                      stroke={theme.textSecondary}
+                      strokeWidth={2.5}
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      fill="none"
+                    />
                   </Svg>
                 </TouchableOpacity>
 
                 <View style={styles.monthSelectorGroup}>
-                  <TouchableOpacity onPress={() => setMonthPickerVisible(true)} activeOpacity={0.7} style={styles.monthButton}>
+                  <TouchableOpacity
-                    <Text style={[styles.monthLabel, { color: theme.text }]}>{format(visibleMonth, 'MMMM')}</Text>
+                    onPress={() => setMonthPickerVisible(true)}
+                    activeOpacity={0.7}
+                    style={styles.monthButton}
+                  >
+                    <Text style={[styles.monthLabel, { color: theme.text }]}>
+                      {format(visibleMonth, 'MMMM')}
+                    </Text>
                     <Svg width={14} height={14} viewBox="0 0 24 24">
-                      <Path d="M6 9l6 6 6-6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                      <Path
+                        d="M6 9l6 6 6-6"
+                        stroke={theme.textSecondary}
+                        strokeWidth={2.5}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        fill="none"
+                      />
                     </Svg>
                   </TouchableOpacity>
                 </View>
 
-                <TouchableOpacity onPress={() => setYearPickerVisible(true)} activeOpacity={0.7} style={styles.yearButton}>
+                <TouchableOpacity
-                  <Text style={[styles.yearLabel, { color: theme.textMuted }]}>{format(visibleMonth, 'yyyy')}</Text>
+                  onPress={() => setYearPickerVisible(true)}
+                  activeOpacity={0.7}
+                  style={styles.yearButton}
+                >
+                  <Text style={[styles.yearLabel, { color: theme.textMuted }]}>
+                    {format(visibleMonth, 'yyyy')}
+                  </Text>
                 </TouchableOpacity>
 
                 <TouchableOpacity
                   onPress={() => transitionTo(1)}
-                  style={[styles.monthNav, { borderColor: theme.borderStrong, backgroundColor: theme.card }]}
+                  style={[
+                    styles.monthNav,
+                    { borderColor: theme.borderStrong, backgroundColor: theme.card },
+                  ]}
                   activeOpacity={0.7}
                 >
                   <Svg width={20} height={20} viewBox="0 0 24 24">
-                    <Path d="M9 6l6 6-6 6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                    <Path
+                      d="M9 6l6 6-6 6"
+                      stroke={theme.textSecondary}
+                      strokeWidth={2.5}
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      fill="none"
+                    />
                   </Svg>
                 </TouchableOpacity>
               </View>
@@ -275,7 +385,7 @@ export default function CalendarScreen() {
 
               {weeks.map((week, wi) => (
                 <View key={wi} style={styles.weekRow}>
-                  {week.map((day) => (
+                  {week.map(day => (
                     <DayCell
                       key={day.toISOString()}
                       day={day}
@@ -291,52 +401,58 @@ export default function CalendarScreen() {
                 </View>
               ))}
             </Animated.View>
-        </GestureDetector>
+          </GestureDetector>
 
-        <View style={styles.panelHeader}>
+          <View style={styles.panelHeader}>
-              <Text style={[styles.panelDate, { color: theme.text }]}>{format(selectedDate, 'EEEE, MMMM d')}</Text>
+            <Text style={[styles.panelDate, { color: theme.text }]}>
-              {sortedDayTasks.length > 0 && (
+              {format(selectedDate, 'EEEE, MMMM d')}
-                <Text style={[styles.panelCount, { color: theme.textFaint }]}>
+            </Text>
-                  {sortedDayTasks.length} event{sortedDayTasks.length === 1 ? '' : 's'}
+            {sortedDayTasks.length > 0 && (
-                </Text>
+              <Text style={[styles.panelCount, { color: theme.textFaint }]}>
-              )}
+                {sortedDayTasks.length} event{sortedDayTasks.length === 1 ? '' : 's'}
-            </View>
+              </Text>
-
-            {sortedDayTasks.length === 0 ? (
-              <View style={styles.emptyState}>
-                <Text style={[styles.emptyText, { color: theme.textSecondary }]}>No events on this day</Text>
-                <Text style={[styles.emptySubtext, { color: theme.textMuted }]}>Tap a date or use the bar below</Text>
-              </View>
-            ) : (
-              sortedDayTasks.map((task) => {
-                const isExpanded = expandedTasks.has(task.id);
-                const itemSubtasks = subtasksByTask.get(task.id) ?? [];
-                return (
-                  <View key={task.id} style={styles.eventCard}>
-                    <CalendarTaskRow
-                      task={task}
-                      expanded={isExpanded}
-                      subtasks={itemSubtasks}
-                      categoryColor={categoryColors.get(task.categoryId)}
-                      onToggle={() => handleToggleComplete(task.id)}
-                      onPress={(id) =>
-                        expandedTasks.has(id)
-                          ? router.push({ pathname: '/task-detail', params: { id } })
-                          : toggleExpand(id)
-                      }
-                      onMenuOpen={(id) => openTaskEdit(id)}
-                      onSubtaskToggle={handleSubtaskToggle}
-                    />
-                  </View>
-                );
-              })
             )}
-          </ScrollView>
+          </View>
 
-      <QuickAddBar
+          {sortedDayTasks.length === 0 ? (
-        dueDate={selectedDate.getTime()}
+            <View style={styles.emptyState}>
-        placeholder={`Add event for ${format(selectedDate, 'MMM d')}`}
+              <Text style={[styles.emptyText, { color: theme.textSecondary }]}>
-      />
+                No events on this day
+              </Text>
+              <Text style={[styles.emptySubtext, { color: theme.textMuted }]}>
+                Tap a date or use the bar below
+              </Text>
+            </View>
+          ) : (
+            sortedDayTasks.map(task => {
+              const isExpanded = expandedTasks.has(task.id);
+              const itemSubtasks = subtasksByTask.get(task.id) ?? [];
+              return (
+                <View key={task.id} style={styles.eventCard}>
+                  <CalendarTaskRow
+                    task={task}
+                    expanded={isExpanded}
+                    subtasks={itemSubtasks}
+                    categoryColor={categoryColors.get(task.categoryId)}
+                    onToggle={() => handleToggleComplete(task.id)}
+                    onPress={id =>
+                      expandedTasks.has(id)
+                        ? router.push({ pathname: '/task-detail', params: { id } })
+                        : toggleExpand(id)
+                    }
+                    onMenuOpen={id => openTaskEdit(id)}
+                    onSubtaskToggle={handleSubtaskToggle}
+                  />
+                </View>
+              );
+            })
+          )}
+        </ScrollView>
+
+        <QuickAddBar
+          dueDate={selectedDate.getTime()}
+          placeholder={`Add event for ${format(selectedDate, 'MMM d')}`}
+        />
       </KeyboardAvoidingView>
 
       {modals(() => {})}
@@ -404,7 +520,7 @@ const CalendarTaskRow = React.memo(function CalendarTaskRow({
       />
       {expanded && sortedSubtasks.length > 0 && (
         <View style={styles.subtaskList}>
-          {sortedSubtasks.map((sub) => (
+          {sortedSubtasks.map(sub => (
             <SubtaskItem
               key={sub.id}
               subtask={sub}
@@ -425,7 +541,11 @@ function cellTitle(tasks: Task[]): string | null {
   return `${tasks[0].title} +${tasks.length - 1}`;
 }
 
-function cellColor(tasks: Task[], categories: { id: string; color: string }[], theme: ThemeColors): string {
+function cellColor(
+  tasks: Task[],
+  categories: { id: string; color: string }[],
+  theme: ThemeColors
+): string {
   if (tasks.length === 0) return theme.textMuted;
   return theme.accent;
 }
@@ -441,11 +561,23 @@ interface DayCellProps {
   onPress: (day: Date) => void;
 }
 
-const DayCell = React.memo(function DayCell({ day, label, dotColor, selected, today, inMonth, theme, onPress }: DayCellProps) {
+const DayCell = React.memo(function DayCell({
+  day,
+  label,
+  dotColor,
+  selected,
+  today,
+  inMonth,
+  theme,
+  onPress,
+}: DayCellProps) {
   const styles = React.useMemo(() => createStyles(theme), [theme]);
   return (
     <TouchableOpacity
-      style={[styles.dayCell, selected && { backgroundColor: theme.accentSoft, borderColor: theme.accentBorder }]}
+      style={[
+        styles.dayCell,
+        selected && { backgroundColor: theme.accentSoft, borderColor: theme.accentBorder },
+      ]}
       onPress={() => onPress(day)}
       activeOpacity={0.7}
     >
@@ -473,149 +605,153 @@ const DayCell = React.memo(function DayCell({ day, label, dotColor, selected, to
   );
 });
 
-const createStyles = (theme: ThemeColors) => StyleSheet.create({
+const createStyles = (theme: ThemeColors) =>
-  container: {
+  StyleSheet.create({
-    flex: 1,
+    container: {
-  },
+      flex: 1,
-  scrollContent: {
+    },
-    paddingBottom: 16,
+    scrollContent: {
-    flexGrow: 1,
+      paddingBottom: 16,
-  },
+      flexGrow: 1,
-  scrollBody: {
+    },
-    flex: 1,
+    scrollBody: {
-  },
+      flex: 1,
-  kbAvoid: {
+    },
-    flex: 1,
+    kbAvoid: {
-  },
+      flex: 1,
-  calendarArea: {
+    },
-    paddingHorizontal: 12,
+    calendarArea: {
-    paddingTop: 6,
+      paddingHorizontal: 12,
-    paddingBottom: 4,
+      paddingTop: 6,
-  },
+      paddingBottom: 4,
-  monthRow: {
+    },
-    flexDirection: 'row',
+    monthRow: {
-    alignItems: 'center',
+      flexDirection: 'row',
-    justifyContent: 'space-between',
+      alignItems: 'center',
-    paddingHorizontal: 4,
+      justifyContent: 'space-between',
-    paddingBottom: 14,
+      paddingHorizontal: 4,
-  },
+      paddingBottom: 14,
-  monthNav: {
+    },
-    width: 36,
+    monthNav: {
-    height: 36,
+      width: 36,
-    borderRadius: 12,
+      height: 36,
-    borderWidth: 1,
+      borderRadius: 12,
-    alignItems: 'center',
+      borderWidth: 1,
-    justifyContent: 'center',
+      alignItems: 'center',
-  },
+      justifyContent: 'center',
-  monthSelectorGroup: {
+    },
-    alignItems: 'flex-start',
+    monthSelectorGroup: {
-    flex: 1,
+      alignItems: 'flex-start',
-  },
+      flex: 1,
-  monthButton: {
+    },
-    flexDirection: 'row',
+    monthButton: {
-    alignItems: 'center',
+      flexDirection: 'row',
-    justifyContent: 'center',
+      alignItems: 'center',
-    gap: 6,
+      justifyContent: 'center',
-    paddingHorizontal: 10,
+      gap: 6,
-  },
+      paddingHorizontal: 10,
-  monthLabel: {
+    },
-    fontSize: 22,
+    monthLabel: {
-    fontWeight: '700',
+      fontSize: 22,
-  },
+      fontWeight: '700',
-  yearButton: {
+    },
-    marginTop: -2,
+    yearButton: {
-    paddingHorizontal: 6,
+      marginTop: -2,
-  },
+      paddingHorizontal: 6,
-  yearLabel: {
+    },
-    fontSize: 17,
+    yearLabel: {
-    fontWeight: '700',
+      fontSize: 17,
-  },
+      fontWeight: '700',
-  weekdayRow: {
+    },
-    flexDirection: 'row',
+    weekdayRow: {
-    marginBottom: 4,
+      flexDirection: 'row',
-    paddingHorizontal: 2,
+      marginBottom: 4,
-  },
+      paddingHorizontal: 2,
-  weekday: {
+    },
-    flex: 1,
+    weekday: {
-    textAlign: 'center',
+      flex: 1,
-    fontSize: 11,
+      textAlign: 'center',
-    fontWeight: '600',
+      fontSize: 11,
-    textTransform: 'uppercase',
+      fontWeight: '600',
-  },
+      textTransform: 'uppercase',
-  weekRow: {
+    },
-    flexDirection: 'row',
+    weekRow: {
-    gap: 6,
+      flexDirection: 'row',
-    marginBottom: 6,
+      gap: 6,
-  },
+      marginBottom: 6,
-  dayCell: {
+    },
-    flex: 1,
+    dayCell: {
-    height: 56,
+      flex: 1,
-    borderRadius: 12,
+      height: 56,
-    borderWidth: 1,
+      borderRadius: 12,
-    borderColor: 'transparent',
+      borderWidth: 1,
-    paddingVertical: 4,
+      borderColor: 'transparent',
-    alignItems: 'center',
+      paddingVertical: 4,
-  },
+      alignItems: 'center',
-  dayNumber: {
+    },
-    fontSize: 14,
+    dayNumber: {
-    fontWeight: '600',
+      fontSize: 14,
-  },
+      fontWeight: '600',
-  dayNumberSelected: {
+    },
-    color: theme.text,
+    dayNumberSelected: {
-  },
+      color: theme.text,
-  chip: {
+    },
-    marginTop: 3,
+    chip: {
-    paddingHorizontal: 4,
+      marginTop: 3,
-    paddingVertical: 2,
+      paddingHorizontal: 4,
-    borderRadius: 5,
+      paddingVertical: 2,
-    maxWidth: '92%',
+      borderRadius: 5,
-  },
+      maxWidth: '92%',
-  chipText: {
+    },
-    color: '#FFFFFF',
+    chipText: {
-    fontSize: 8,
+      color: '#FFFFFF',
-    fontWeight: '600',
+      fontSize: 8,
-  },
+      fontWeight: '600',
-  chipPlaceholder: {
+    },
-    marginTop: 3,
+    chipPlaceholder: {
-    width: 6,
+      marginTop: 3,
-    height: 2,
+      width: 6,
-    borderRadius: 1,
+      height: 2,
-    opacity: 0.4,
+      borderRadius: 1,
-  },
+      opacity: 0.4,
-  panelHeader: {
+    },
-    flexDirection: 'row',
+    panelHeader: {
-    alignItems: 'center',
+      flexDirection: 'row',
-    justifyContent: 'space-between',
+      alignItems: 'center',
-    paddingHorizontal: 18,
+      justifyContent: 'space-between',
-    paddingTop: 15,
+      paddingHorizontal: 18,
-    paddingBottom: 4,
+      paddingTop: 15,
-  },
+      paddingBottom: 4,
-  panelDate: {
+    },
-    fontSize: 16,
+    panelDate: {
-    fontWeight: '700',
+      fontSize: 16,
-  },
+      fontWeight: '700',
-  panelCount: {
+    },
-    fontSize: 13,
+    panelCount: {
-  },
+      fontSize: 13,
-  emptyState: {
+    },
-    alignItems: 'center',
+    emptyState: {
-    paddingVertical: 36,
+      alignItems: 'center',
-  },
+      paddingVertical: 36,
-  emptyText: {
+    },
-    fontSize: 15,
+    emptyText: {
-    fontWeight: '600',
+      fontSize: 15,
-    marginBottom: 4,
+      fontWeight: '600',
-  },
+      marginBottom: 4,
-  emptySubtext: {
+    },
-    fontSize: 13,
+    emptySubtext: {
-  },
+      fontSize: 13,
-  eventCard: {
+    },
-    marginHorizontal: 16,
+    backButton: {
-    marginTop: 6,
+      padding: 8,
-  },
+    },
-  subtaskList: {
+    eventCard: {
-    paddingLeft: 8,
+      marginHorizontal: 16,
-    paddingRight: 4,
+      marginTop: 6,
-    paddingTop: 4,
+    },
-  },
+    subtaskList: {
-});
+      paddingLeft: 8,
+      paddingRight: 4,
+      paddingTop: 4,
+    },
+  });

carry-your-live/app/(tabs)/index.tsx

@@ -1,5 +1,13 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { View, Text, StyleSheet, SafeAreaView, KeyboardAvoidingView, TouchableOpacity, BackHandler } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  KeyboardAvoidingView,
+  TouchableOpacity,
+  BackHandler,
+} from 'react-native';
 import { useFocusEffect } from 'expo-router';
 import { Header } from '@/components/Header';
 import { CategoryFilter } from '@/components/CategoryFilter';
@@ -39,7 +47,10 @@ export default function TasksScreen() {
         <TouchableOpacity
           style={[
             styles.completedToggle,
-            { backgroundColor: theme.card, borderColor: showCompleted ? theme.accent : theme.borderStrong },
+            {
+              backgroundColor: theme.card,
+              borderColor: showCompleted ? theme.accent : theme.borderStrong,
+            },
           ]}
           onPress={() => setShowCompleted(!showCompleted)}
           activeOpacity={0.8}
@@ -57,18 +68,27 @@ export default function TasksScreen() {
               fill="none"
             />
             {showCompleted && (
-              <Path d="M7 12.5l3.5 3.5 6.5-7" stroke={theme.accent} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+              <Path
+                d="M7 12.5l3.5 3.5 6.5-7"
+                stroke={theme.accent}
+                strokeWidth={2.2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="none"
+              />
             )}
           </Svg>
-          <Text style={[styles.completedToggleText, { color: showCompleted ? theme.text : theme.textMuted }]}>
+          <Text
+            style={[
+              styles.completedToggleText,
+              { color: showCompleted ? theme.text : theme.textMuted },
+            ]}
+          >
             Completed
           </Text>
         </TouchableOpacity>
       </View>
-      <KeyboardAvoidingView
+      <KeyboardAvoidingView style={styles.kbAvoid} behavior="padding">
-        style={styles.kbAvoid}
-        behavior="padding"
-      >
         <TaskList categoryIds={categoryIds} showCompleted={showCompleted} />
         <QuickAddBar />
       </KeyboardAvoidingView>

carry-your-live/app/(tabs)/settings.tsx

@@ -1,5 +1,18 @@
 import React, { useState, useCallback } from 'react';
-import { View, Text, StyleSheet, SafeAreaView, ScrollView, Switch, TouchableOpacity, Alert, Linking, Modal, Pressable, BackHandler } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  Switch,
+  TouchableOpacity,
+  Alert,
+  Linking,
+  Modal,
+  Pressable,
+  BackHandler,
+} from 'react-native';
 import { useFocusEffect, useRouter } from 'expo-router';
 import { Header } from '@/components/Header';
 import { ListItem } from '@/components/ListItem';
@@ -10,7 +23,15 @@ import { FriendsModal } from '@/components/FriendsModal';
 import { LegalModal } from '@/components/LegalModal';
 import { ServerUrlModal } from '@/components/ServerUrlModal';
 import SyncStatus from '@/components/SyncStatus';
-import { useSettings, SORT_OPTIONS, REMINDER_OPTIONS, ACCENT_PRESETS, DEFAULT_ACCENT } from '@/theme';
+import {
+  useSettings,
+  SORT_OPTIONS,
+  REMINDER_OPTIONS,
+  ACCENT_PRESETS,
+  DEFAULT_ACCENT,
+  DEFAULT_ACCENT_OPACITY,
+  ThemeMode,
+} from '@/theme';
 import { useCategories } from '@/hooks/useDatabase';
 import { getAuthUser, getAuthToken } from '@/services/auth';
 import { checkForUpdates, getCurrentAppVersion } from '@/services/updates';
@@ -24,9 +45,38 @@ import { getLastVisitedTab, tabHref } from '@/utils/tabHistory';
 
 export default function SettingsScreen() {
   const router = useRouter();
-  const { theme, notifications, setNotifications, defaultCategoryId, setDefaultCategoryId, sortBy, setSortBy, reminderPreference, setReminderPreference, tagReminderPreferences, setTagReminderPreferences, apiUrl, accentColor, setAccentColor, todoAheadDays, setTodoAheadDays, showCompleted, setShowCompleted, deleteBySwipe, setDeleteBySwipe } = useSettings();
+  const {
+    theme,
+    notifications,
+    setNotifications,
+    defaultCategoryId,
+    setDefaultCategoryId,
+    sortBy,
+    setSortBy,
+    reminderPreference,
+    setReminderPreference,
+    tagReminderPreferences,
+    setTagReminderPreferences,
+    apiUrl,
+    accentColor,
+    setAccentColor,
+    accentOpacity,
+    setAccentOpacity,
+    todoAheadDays,
+    setTodoAheadDays,
+    showCompleted,
+    setShowCompleted,
+    deleteBySwipe,
+    setDeleteBySwipe,
+    themeMode,
+    setThemeMode,
+    syncSettingsToServer,
+    loadSettingsFromServer,
+  } = useSettings();
   const categories = useCategories();
-  const [picker, setPicker] = useState<null | 'category' | 'sort' | 'reminder' | 'todoAhead'>(null);
+  const [picker, setPicker] = useState<
+    null | 'category' | 'sort' | 'reminder' | 'todoAhead' | 'themeMode'
+  >(null);
   const [reminderTagPicker, setReminderTagPicker] = useState<Category | null>(null);
   const [editingCategory, setEditingCategory] = useState<Category | null | 'new'>(null);
   const [syncVisible, setSyncVisible] = useState(false);
@@ -35,18 +85,22 @@ export default function SettingsScreen() {
   const [serverUrlVisible, setServerUrlVisible] = useState(false);
   const [customAccentVisible, setCustomAccentVisible] = useState(false);
   const [draftAccent, setDraftAccent] = useState(accentColor);
+  const [draftAccentOpacity, setDraftAccentOpacity] = useState(accentOpacity);
   const [syncSubtitle, setSyncSubtitle] = useState('Checking...');
   const [updateSubtitle, setUpdateSubtitle] = useState('Tap to check');
+  const [lastUpdateCheck, setLastUpdateCheck] = useState<string | null>(null);
 
   const handleCheckUpdates = async () => {
     setUpdateSubtitle('Checking...');
     const update = await checkForUpdates();
     if (!update) {
       setUpdateSubtitle('Up to date');
+      setLastUpdateCheck(new Date().toLocaleString());
       Alert.alert('Up to date', `You're running the latest version (${getCurrentAppVersion()}).`);
       return;
     }
     setUpdateSubtitle(`${update.version} available`);
+    setLastUpdateCheck(new Date().toLocaleString());
     const url = update.apkUrl ?? update.releaseUrl;
     Alert.alert('Update available', `Version ${update.version} is available for download.`, [
       { text: 'Later', style: 'cancel' },
@@ -59,6 +113,17 @@ export default function SettingsScreen() {
     ]);
   };
 
+  const checkForUpdatesOnLoad = async () => {
+    const update = await checkForUpdates();
+    if (!update) {
+      setUpdateSubtitle('Up to date');
+      setLastUpdateCheck(new Date().toLocaleString());
+      return;
+    }
+    setUpdateSubtitle(`${update.version} available`);
+    setLastUpdateCheck(new Date().toLocaleString());
+  };
+
   const refreshSyncStatus = async () => {
     const token = await getAuthToken();
     if (!token) {
@@ -69,7 +134,9 @@ export default function SettingsScreen() {
     const lastSync = await getLastSyncTime();
     if (user) {
       setSyncSubtitle(
-        lastSync ? `Signed in · synced ${formatSyncTime(lastSync)}` : `Signed in as ${user.username}`
+        lastSync
+          ? `Signed in · synced ${formatSyncTime(lastSync)}`
+          : `Signed in as ${user.username}`
       );
     } else {
       setSyncSubtitle('Not signed in');
@@ -83,6 +150,8 @@ export default function SettingsScreen() {
 
   useFocusEffect(
     useCallback(() => {
+      refreshSyncStatus();
+      checkForUpdatesOnLoad();
       const sub = BackHandler.addEventListener('hardwareBackPress', () => {
         const target = getLastVisitedTab();
         if (target && target !== 'settings') {
@@ -91,19 +160,18 @@ export default function SettingsScreen() {
         return true;
       });
       return () => sub.remove();
-    }, [router])
+    }, [refreshSyncStatus, router])
   );
 
-  const defaultCategory = categories.find((c) => c.id === defaultCategoryId);
+  const defaultCategory = categories.find(c => c.id === defaultCategoryId);
   const defaultCategoryLabel = defaultCategory?.name ?? 'None';
-  const reminderLabel = REMINDER_OPTIONS.find((o) => o.value === reminderPreference)?.label ?? 'No reminder';
+  const reminderLabel =
+    REMINDER_OPTIONS.find(o => o.value === reminderPreference)?.label ?? 'No reminder';
 
   const tagReminderLabel = (categoryId: string) => {
     const selected = tagReminderPreferences[categoryId] ?? [];
     if (selected.length === 0) return `Default (${reminderLabel})`;
-    return selected
+    return selected.map(v => REMINDER_OPTIONS.find(o => o.value === v)?.label ?? v).join(', ');
-      .map((v) => REMINDER_OPTIONS.find((o) => o.value === v)?.label ?? v)
-      .join(', ');
   };
 
   const openCustomAccent = () => {
@@ -145,14 +213,12 @@ export default function SettingsScreen() {
       <Header title="Settings" showLogo={false} />
       <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
         <Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Tags</Text>
-        {categories.map((category) => (
+        {categories.map(category => (
           <ListItem
             key={category.id}
             title={category.name}
             subtitle={category.id === defaultCategoryId ? 'Default tag' : undefined}
-            leftElement={
+            leftElement={<View style={[styles.categoryDot, { backgroundColor: category.color }]} />}
-              <View style={[styles.categoryDot, { backgroundColor: category.color }]} />
-            }
             onPress={() => setEditingCategory(category)}
             showChevron
           />
@@ -164,7 +230,12 @@ export default function SettingsScreen() {
         >
           <View style={[styles.addIcon, { backgroundColor: theme.accentSoft }]}>
             <Svg width={16} height={16} viewBox="0 0 24 24">
-              <Path d="M12 5v14M5 12h14" stroke={theme.accentText} strokeWidth={2} strokeLinecap="round" />
+              <Path
+                d="M12 5v14M5 12h14"
+                stroke={theme.accentText}
+                strokeWidth={2}
+                strokeLinecap="round"
+              />
             </Svg>
           </View>
           <Text style={[styles.addCategoryText, { color: theme.accent }]}>Add Tag</Text>
@@ -176,7 +247,18 @@ export default function SettingsScreen() {
           rightElement={
             <Switch
               value={notifications}
-              onValueChange={setNotifications}
+              onValueChange={async value => {
+                setNotifications(value);
+                if (!value) {
+                  const { cancelAllReminders } = await import('@/services/notifications');
+                  await cancelAllReminders();
+                } else {
+                  const { rescheduleAllReminders } = await import('@/services/notifications');
+                  const { collections } = await import('@/database');
+                  const tasks = await collections.tasks.query().fetch();
+                  await rescheduleAllReminders(tasks, true, reminderPreference);
+                }
+              }}
               thumbColor="#FFFFFF"
               trackColor={{ false: theme.borderStrong, true: theme.accent }}
             />
@@ -188,14 +270,12 @@ export default function SettingsScreen() {
           onPress={() => notifications && setPicker('reminder')}
           showChevron
         />
-        {categories.map((category) => (
+        {categories.map(category => (
           <ListItem
             key={`tag-reminder-${category.id}`}
             title={category.name}
             subtitle={notifications ? tagReminderLabel(category.id) : 'Enable notifications first'}
-            leftElement={
+            leftElement={<View style={[styles.categoryDot, { backgroundColor: category.color }]} />}
-              <View style={[styles.categoryDot, { backgroundColor: category.color }]} />
-            }
             onPress={() => notifications && setReminderTagPicker(category)}
             showChevron
           />
@@ -209,7 +289,7 @@ export default function SettingsScreen() {
         />
         <ListItem
           title="Sort Tasks By"
-          subtitle={SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Date'}
+          subtitle={SORT_OPTIONS.find(o => o.value === sortBy)?.label ?? 'Date'}
           onPress={() => setPicker('sort')}
           showChevron
         />
@@ -247,7 +327,7 @@ export default function SettingsScreen() {
         <Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Appearance</Text>
         <Text style={[styles.sectionHint, { color: theme.textFaint }]}>Accent color</Text>
         <View style={styles.accentPresets}>
-          {ACCENT_PRESETS.map((c) => (
+          {ACCENT_PRESETS.map(c => (
             <TouchableOpacity
               key={c}
               style={[
@@ -260,7 +340,14 @@ export default function SettingsScreen() {
             >
               {accentColor.toUpperCase() === c && (
                 <Svg width={16} height={16} viewBox="0 0 24 24">
-                  <Path d="M5 12l5 5 9-10" stroke={contrastOnSwatch(c)} strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                  <Path
+                    d="M5 12l5 5 9-10"
+                    stroke={contrastOnSwatch(c)}
+                    strokeWidth={3}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    fill="none"
+                  />
                 </Svg>
               )}
             </TouchableOpacity>
@@ -273,6 +360,15 @@ export default function SettingsScreen() {
           onPress={openCustomAccent}
           showChevron
         />
+        <Text style={[styles.sectionHint, { color: theme.textFaint }]}>Theme</Text>
+        <ListItem
+          title="Theme Mode"
+          subtitle={
+            themeMode === 'system' ? 'System default' : themeMode === 'dark' ? 'Dark' : 'Light'
+          }
+          onPress={() => setPicker('themeMode')}
+          showChevron
+        />
         <Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Data</Text>
         <SyncStatus />
         <ListItem
@@ -281,6 +377,32 @@ export default function SettingsScreen() {
           onPress={() => setSyncVisible(true)}
           showChevron
         />
+        <ListItem
+          title="Sync Settings to Server"
+          subtitle="Push local settings to backend"
+          onPress={async () => {
+            try {
+              await syncSettingsToServer();
+              Alert.alert('Success', 'Settings synced to server');
+            } catch {
+              Alert.alert('Error', 'Failed to sync settings');
+            }
+          }}
+          showChevron
+        />
+        <ListItem
+          title="Load Settings from Server"
+          subtitle="Pull settings from backend"
+          onPress={async () => {
+            try {
+              await loadSettingsFromServer();
+              Alert.alert('Success', 'Settings loaded from server');
+            } catch {
+              Alert.alert('Error', 'Failed to load settings');
+            }
+          }}
+          showChevron
+        />
         <ListItem
           title="Friends"
           subtitle="Manage friends and requests"
@@ -301,26 +423,19 @@ export default function SettingsScreen() {
           onPress={handleCheckUpdates}
           showChevron
         />
-        <ListItem
+        <ListItem title="Last checked" subtitle={lastUpdateCheck ?? 'Never'} />
-          title="Version"
+        <ListItem title="Version" subtitle={getCurrentAppVersion()} />
-          subtitle={getCurrentAppVersion()}
+        <ListItem title="Privacy Policy" onPress={() => setLegalVisible('privacy')} showChevron />
-        />
+        <ListItem title="Terms of Service" onPress={() => setLegalVisible('terms')} showChevron />
-        <ListItem
-          title="Privacy Policy"
-          onPress={() => setLegalVisible('privacy')}
-          showChevron
-        />
-        <ListItem
-          title="Terms of Service"
-          onPress={() => setLegalVisible('terms')}
-          showChevron
-        />
       </ScrollView>
 
       <OptionPickerModal
         visible={picker === 'category'}
         title="Default Tag"
-        options={[{ value: '', label: 'None', color: theme.textMuted }, ...categories.map((c) => ({ value: c.id, label: c.name, color: c.color }))]}
+        options={[
+          { value: '', label: 'None', color: theme.textMuted },
+          ...categories.map(c => ({ value: c.id, label: c.name, color: c.color })),
+        ]}
         selectedValue={defaultCategoryId}
         onSelect={handleDefaultCategory}
         onClose={() => setPicker(null)}
@@ -331,7 +446,7 @@ export default function SettingsScreen() {
         title="Sort Tasks By"
         options={SORT_OPTIONS}
         selectedValue={sortBy}
-        onSelect={(value) => setSortBy(value as typeof sortBy)}
+        onSelect={value => setSortBy(value as typeof sortBy)}
         onClose={() => setPicker(null)}
       />
 
@@ -344,15 +459,15 @@ export default function SettingsScreen() {
         onClose={() => setPicker(null)}
       />
 
-      {categories.map((category) => (
+      {categories.map(category => (
         <OptionPickerModal
           key={`tag-reminder-picker-${category.id}`}
           visible={reminderTagPicker?.id === category.id}
           title={`Reminders · ${category.name}`}
-          options={REMINDER_OPTIONS.filter((o) => o.value !== 'none')}
+          options={REMINDER_OPTIONS.filter(o => o.value !== 'none')}
           selectedValue={tagReminderPreferences[category.id] ?? []}
           multiSelect
-          onSelect={(value) => handleTagReminderPreference(category.id, value)}
+          onSelect={value => handleTagReminderPreference(category.id, value)}
           onClose={() => setReminderTagPicker(null)}
         />
       ))}
@@ -366,6 +481,15 @@ export default function SettingsScreen() {
         onClose={() => setPicker(null)}
       />
 
+      <OptionPickerModal
+        visible={picker === 'themeMode'}
+        title="Theme Mode"
+        options={THEME_MODE_OPTIONS}
+        selectedValue={themeMode}
+        onSelect={value => setThemeMode(value as ThemeMode)}
+        onClose={() => setPicker(null)}
+      />
+
       <CategoryEditorModal
         visible={editorVisible}
         category={editorCategory}
@@ -373,41 +497,86 @@ export default function SettingsScreen() {
         onClose={() => setEditingCategory(null)}
       />
 
-      <SyncModal visible={syncVisible} onClose={() => { setSyncVisible(false); refreshSyncStatus(); }} />
+      <SyncModal
+        visible={syncVisible}
+        onClose={() => {
+          setSyncVisible(false);
+          refreshSyncStatus();
+        }}
+      />
 
       <FriendsModal visible={friendsVisible} onClose={() => setFriendsVisible(false)} />
 
       <ServerUrlModal visible={serverUrlVisible} onClose={() => setServerUrlVisible(false)} />
 
-      <Modal visible={customAccentVisible} transparent animationType="fade" onRequestClose={() => setCustomAccentVisible(false)}>
+      <Modal
-        <Pressable
+        visible={customAccentVisible}
-          style={styles.accentModalOverlay}
+        transparent
-          onPress={() => setCustomAccentVisible(false)}
+        animationType="fade"
-        >
+        onRequestClose={() => setCustomAccentVisible(false)}
-          <Pressable style={[styles.accentModalSheet, { backgroundColor: theme.sheetBg }]} onPress={() => {}}>
+      >
+        <Pressable style={styles.accentModalOverlay} onPress={() => setCustomAccentVisible(false)}>
+          <Pressable
+            style={[styles.accentModalSheet, { backgroundColor: theme.sheetBg }]}
+            onPress={() => {}}
+          >
             <View style={styles.accentModalHeader}>
-              <Text style={[styles.accentModalTitle, { color: theme.text }]}>Custom Accent Color</Text>
+              <Text style={[styles.accentModalTitle, { color: theme.text }]}>
-              <TouchableOpacity onPress={() => setCustomAccentVisible(false)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+                Custom Accent Color
+              </Text>
+              <TouchableOpacity
+                onPress={() => setCustomAccentVisible(false)}
+                hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+              >
                 <Svg width={18} height={18} viewBox="0 0 24 24">
-                  <Path d="M18 6L6 18M6 6l12 12" stroke={theme.textSecondary} strokeWidth={2.2} strokeLinecap="round" />
+                  <Path
+                    d="M18 6L6 18M6 6l12 12"
+                    stroke={theme.textSecondary}
+                    strokeWidth={2.2}
+                    strokeLinecap="round"
+                  />
                 </Svg>
               </TouchableOpacity>
             </View>
-            <ColorWheel color={draftAccent} onChange={setDraftAccent} />
+            <ColorWheel
+              color={draftAccent}
+              opacity={draftAccentOpacity}
+              onChange={(color, opacity) => {
+                setDraftAccent(color);
+                setDraftAccentOpacity(opacity);
+              }}
+            />
             <View style={styles.accentModalActions}>
               <TouchableOpacity
                 style={[styles.accentModalButton, { borderColor: theme.borderStrong }]}
-                onPress={() => { setDraftAccent(DEFAULT_ACCENT); setAccentColor(DEFAULT_ACCENT); }}
+                onPress={() => {
+                  setDraftAccent(DEFAULT_ACCENT);
+                  setDraftAccentOpacity(DEFAULT_ACCENT_OPACITY);
+                  setAccentColor(DEFAULT_ACCENT);
+                  setAccentOpacity(DEFAULT_ACCENT_OPACITY);
+                }}
                 activeOpacity={0.7}
               >
-                <Text style={[styles.accentModalButtonText, { color: theme.textSecondary }]}>Reset</Text>
+                <Text style={[styles.accentModalButtonText, { color: theme.textSecondary }]}>
+                  Reset
+                </Text>
               </TouchableOpacity>
               <TouchableOpacity
-                style={[styles.accentModalButton, styles.accentModalButtonPrimary, { backgroundColor: theme.accent }]}
+                style={[
-                onPress={() => { setAccentColor(draftAccent); setCustomAccentVisible(false); }}
+                  styles.accentModalButton,
+                  styles.accentModalButtonPrimary,
+                  { backgroundColor: theme.accent },
+                ]}
+                onPress={() => {
+                  setAccentColor(draftAccent);
+                  setAccentOpacity(draftAccentOpacity);
+                  setCustomAccentVisible(false);
+                }}
                 activeOpacity={0.8}
               >
-                <Text style={[styles.accentModalButtonText, { color: theme.accentText }]}>Apply</Text>
+                <Text style={[styles.accentModalButtonText, { color: theme.accentText }]}>
+                  Apply
+                </Text>
               </TouchableOpacity>
             </View>
           </Pressable>
@@ -428,6 +597,12 @@ const AHEAD_OPTIONS: { value: string; label: string }[] = Array.from({ length: 2
   label: i === 0 ? 'Only today' : `${i} day${i === 1 ? '' : 's'}`,
 }));
 
+const THEME_MODE_OPTIONS: { value: ThemeMode; label: string }[] = [
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+  { value: 'system', label: 'System default' },
+];
+
 function formatSyncTime(timestamp: number): string {
   const seconds = Math.floor((Date.now() - timestamp) / 1000);
   if (seconds < 60) return 'just now';

carry-your-live/app/(tabs)/stats.tsx

@@ -15,7 +15,7 @@ export default function StatsScreen() {
     }, [])
   );
 
-  const maxDaily = Math.max(1, ...stats.daily.map((d) => d.count));
+  const maxDaily = Math.max(1, ...stats.daily.map(d => d.count));
 
   return (
     <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
@@ -25,27 +25,42 @@ export default function StatsScreen() {
           <Text style={[styles.cardTitle, { color: theme.textMuted }]}>Overview</Text>
           <View style={styles.summaryGrid}>
             <View style={styles.summaryItem}>
-              <Text style={[styles.summaryValue, { color: theme.accent }]}>{stats.totalCompleted}</Text>
+              <Text style={[styles.summaryValue, { color: theme.accent }]}>
+                {stats.totalCompleted}
+              </Text>
               <Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Completed</Text>
             </View>
             <View style={styles.summaryItem}>
-              <Text style={[styles.summaryValue, { color: theme.text }]}>{stats.completedLast7}</Text>
+              <Text style={[styles.summaryValue, { color: theme.text }]}>
+                {stats.completedLast7}
+              </Text>
               <Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Last 7 days</Text>
             </View>
             <View style={styles.summaryItem}>
-              <Text style={[styles.summaryValue, { color: theme.text }]}>{stats.completedLast30}</Text>
+              <Text style={[styles.summaryValue, { color: theme.text }]}>
+                {stats.completedLast30}
+              </Text>
               <Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Last 30 days</Text>
             </View>
             <View style={styles.summaryItem}>
-              <Text style={[styles.summaryValue, { color: theme.text }]}>{stats.completionRate}%</Text>
+              <Text style={[styles.summaryValue, { color: theme.text }]}>
+                {stats.completionRate}%
+              </Text>
               <Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Success rate</Text>
             </View>
             <View style={styles.summaryItem}>
-              <Text style={[styles.summaryValue, { color: theme.text }]}>{stats.currentStreak}</Text>
+              <Text style={[styles.summaryValue, { color: theme.text }]}>
+                {stats.currentStreak}
+              </Text>
               <Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Day streak</Text>
             </View>
             <View style={styles.summaryItem}>
-              <Text style={[styles.summaryValue, { color: stats.overdueCount > 0 ? theme.accent : theme.text }]}>
+              <Text
+                style={[
+                  styles.summaryValue,
+                  { color: stats.overdueCount > 0 ? theme.accent : theme.text },
+                ]}
+              >
                 {stats.overdueCount}
               </Text>
               <Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Overdue</Text>
@@ -64,7 +79,10 @@ export default function StatsScreen() {
                     <View
                       style={[
                         styles.chartBar,
-                        { height: Math.max(4, height), backgroundColor: d.count > 0 ? theme.accent : theme.cardAlt },
+                        {
+                          height: Math.max(4, height),
+                          backgroundColor: d.count > 0 ? theme.accent : theme.cardAlt,
+                        },
                       ]}
                     />
                   </View>
@@ -78,9 +96,11 @@ export default function StatsScreen() {
         <View style={[styles.card, { backgroundColor: theme.card }]}>
           <Text style={[styles.cardTitle, { color: theme.textMuted }]}>By tags</Text>
           {stats.byCategory.length === 0 ? (
-            <Text style={[styles.emptyText, { color: theme.textFaint }]}>No completed tasks yet</Text>
+            <Text style={[styles.emptyText, { color: theme.textFaint }]}>
+              No completed tasks yet
+            </Text>
           ) : (
-            stats.byCategory.map((c) => (
+            stats.byCategory.map(c => (
               <View key={c.id} style={styles.row}>
                 <View style={[styles.dot, { backgroundColor: c.color }]} />
                 <Text style={[styles.rowLabel, { color: theme.text }]}>{c.name}</Text>
@@ -93,9 +113,11 @@ export default function StatsScreen() {
         <View style={[styles.card, { backgroundColor: theme.card }]}>
           <Text style={[styles.cardTitle, { color: theme.textMuted }]}>By priority</Text>
           {stats.byPriority.length === 0 ? (
-            <Text style={[styles.emptyText, { color: theme.textFaint }]}>No completed tasks yet</Text>
+            <Text style={[styles.emptyText, { color: theme.textFaint }]}>
+              No completed tasks yet
+            </Text>
           ) : (
-            stats.byPriority.map((p) => (
+            stats.byPriority.map(p => (
               <View key={p.priority} style={styles.row}>
                 <View style={[styles.dot, { backgroundColor: priorityColor(theme, p.priority) }]} />
                 <Text style={[styles.rowLabel, { color: theme.text }]}>{p.label}</Text>

carry-your-live/app/_layout.tsx

@@ -8,9 +8,13 @@ import { UpdateNotifier } from '@/components/UpdateNotifier';
 import { Linking } from 'react-native';
 import { useEffect } from 'react';
 import { requestQuickAddFocus } from '@/utils/quickAddFocus';
-import { registerForPushNotificationsAsync, setupNotificationChannels, addNotificationResponseReceivedListener, removeNotificationSubscription } from '@/services/pushNotifications';
+import {
+  registerForPushNotificationsAsync,
+  setupNotificationChannels,
+  addNotificationResponseReceivedListener,
+  removeNotificationSubscription,
+} from '@/services/pushNotifications';
 import * as Notifications from 'expo-notifications';
-import { Platform } from 'react-native';
 
 Notifications.setNotificationHandler({
   handleNotification: async () => ({
@@ -29,7 +33,7 @@ function RootNavigator() {
     setupNotificationChannels();
     registerForPushNotificationsAsync().catch(() => {});
 
-    const responseListener = addNotificationResponseReceivedListener((response) => {
+    const responseListener = addNotificationResponseReceivedListener(response => {
       const data = response.notification.request.content.data as Record<string, any> | undefined;
       if (!data) return;
 
@@ -54,18 +58,29 @@ function RootNavigator() {
       requestQuickAddFocus();
     };
 
-    Linking.getInitialURL().then(handleUrl).catch(() => {});
+    Linking.getInitialURL()
+      .then(handleUrl)
+      .catch(() => {});
     const subscription = Linking.addEventListener('url', ({ url }) => handleUrl(url));
 
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        router.back();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
     return () => {
       subscription.remove();
       removeNotificationSubscription(responseListener);
+      window.removeEventListener('keydown', handleKeyDown);
     };
   }, [router]);
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <StatusBar style="light" />
+      <StatusBar style="dark" />
       <Stack screenOptions={{ headerShown: false }}>
         <Stack.Screen name="(tabs)" />
         <Stack.Screen name="add-task" />

carry-your-live/app/add-task.tsx

@@ -1,5 +1,14 @@
 import React, { useMemo, useRef } from 'react';
-import { View, Text, StyleSheet, SafeAreaView, ScrollView, KeyboardAvoidingView, Platform, Keyboard } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  Keyboard,
+} from 'react-native';
 import { Header } from '@/components/Header';
 import { CategorySelector } from '@/components/CategorySelector';
 import { TaskNameInput } from '@/components/TaskNameInput';
@@ -112,15 +121,16 @@ export default function AddTaskScreen() {
 
     const now = new Date();
     const dueDateTimestamp = data.dueDate ? data.dueDate.getTime() : 0;
-    const seriesId = data.repeat !== 'none'
+    const seriesId =
-      ? `series_${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36)}`
+      data.repeat !== 'none'
-      : '';
+        ? `series_${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36)}`
+        : '';
     const resolvedCategoryId = (data.tags && data.tags[0]) || '';
 
     let createdTask: any = null;
 
     await database.write(async () => {
-      const task = await collections.tasks.create((t) => {
+      const task = await collections.tasks.create(t => {
         t.title = data.title.trim();
         t.description = data.description || '';
         t.categoryId = resolvedCategoryId;
@@ -146,7 +156,7 @@ export default function AddTaskScreen() {
         for (let i = 0; i < data.subtasks.length; i++) {
           const subtask = data.subtasks[i];
           if (subtask.title.trim()) {
-            await collections.subtasks.create((s) => {
+            await collections.subtasks.create(s => {
               s.taskId = task.id;
               s.title = subtask.title.trim();
               s.description = '';
@@ -198,7 +208,7 @@ export default function AddTaskScreen() {
           >
             <CategorySelector
               value={tags}
-              onChange={(value) => setValue('tags', value)}
+              onChange={value => setValue('tags', value)}
               error={errors.categoryId?.message}
             />
             <Controller
@@ -214,10 +224,7 @@ export default function AddTaskScreen() {
               )}
             />
             <SubtasksSection control={control} />
-            <PrioritySelector
+            <PrioritySelector value={priority} onChange={value => setValue('priority', value)} />
-              value={priority}
-              onChange={(value) => setValue('priority', value)}
-            />
             <DateTimePickerComponent control={control} />
             <RepeatSelector
               value={repeat}
@@ -232,12 +239,12 @@ export default function AddTaskScreen() {
             <ReminderSelector
               value={reminders}
               hasDueDate={!!dueDate}
-              onChange={(value) => setValue('reminders', value)}
+              onChange={value => setValue('reminders', value)}
             />
             <AssigneeSelector
               value={assigneeId}
               onChange={(value: string | null) => setValue('assigneeId', value)}
-              friends={friends.map((f) => f.username)}
+              friends={friends.map(f => f.username)}
             />
             <Controller
               control={control}

carry-your-live/app/day-view.tsx

@@ -1,5 +1,14 @@
 import React, { useCallback, useMemo } from 'react';
-import { View, Text, StyleSheet, SafeAreaView, ScrollView, TouchableOpacity, KeyboardAvoidingView, BackHandler } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  BackHandler,
+} from 'react-native';
 import { useRouter, useLocalSearchParams, useFocusEffect } from 'expo-router';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Header } from '@/components/Header';
@@ -17,7 +26,11 @@ import { desaturate, type ThemeColors } from '@/theme';
 
 function isDayMatch(timestamp: number, day: Date): boolean {
   const d = new Date(timestamp);
-  return d.getFullYear() === day.getFullYear() && d.getMonth() === day.getMonth() && d.getDate() === day.getDate();
+  return (
+    d.getFullYear() === day.getFullYear() &&
+    d.getMonth() === day.getMonth() &&
+    d.getDate() === day.getDate()
+  );
 }
 
 export default function DayViewScreen() {
@@ -53,45 +66,68 @@ export default function DayViewScreen() {
   const subtasksOnDay = useMemo(() => {
     const map = new Map<string, SubtaskData[]>();
     for (const [taskId, roots] of subtasksByTask) {
-      const due = roots.filter((s) => s.dueDate && isDayMatch(s.dueDate, day));
+      const due = roots.filter(s => s.dueDate && isDayMatch(s.dueDate, day));
       if (due.length > 0) map.set(taskId, due);
     }
     return map;
   }, [subtasksByTask, day]);
 
-  const handleToggleComplete = useCallback(async (taskId: string) => {
+  const handleToggleComplete = useCallback(
-    await confirmAndToggleTaskComplete(taskId, () => {
+    async (taskId: string) => {
-      refresh();
+      await confirmAndToggleTaskComplete(taskId, () => {
-      refreshSubtasks();
+        refresh();
-    });
+        refreshSubtasks();
-  }, [refresh, refreshSubtasks]);
+      });
+    },
+    [refresh, refreshSubtasks]
+  );
 
-  const handleToggleSubtask = useCallback(async (subtaskId: string) => {
+  const handleToggleSubtask = useCallback(
-    await toggleSubtaskComplete(subtaskId);
+    async (subtaskId: string) => {
-    refreshSubtasks();
+      await toggleSubtaskComplete(subtaskId);
-  }, [refreshSubtasks]);
+      refreshSubtasks();
+    },
+    [refreshSubtasks]
+  );
 
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: theme.background, paddingBottom: insets.bottom }]}>
+    <SafeAreaView
+      style={[
+        styles.container,
+        { backgroundColor: theme.background, paddingBottom: insets.bottom },
+      ]}
+    >
       <Header title={format(day, 'EEEE, MMM d')} showLogo={false} rightAction="Back" />
       <KeyboardAvoidingView style={styles.kbAvoid} behavior="padding">
-        <ScrollView style={styles.scrollBody} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        <ScrollView
+          style={styles.scrollBody}
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+        >
           {loading ? (
             <View style={styles.emptyState}>
               <Text style={[styles.emptyText, { color: theme.textSecondary }]}>Loading...</Text>
             </View>
           ) : dayTasks.length === 0 && subtasksOnDay.size === 0 ? (
             <View style={styles.emptyState}>
-              <Text style={[styles.emptyText, { color: theme.textSecondary }]}>No tasks on this day</Text>
+              <Text style={[styles.emptyText, { color: theme.textSecondary }]}>
+                No tasks on this day
+              </Text>
             </View>
           ) : (
             <>
-              {dayTasks.map((task) => {
+              {dayTasks.map(task => {
                 const subs = subtasksOnDay.get(task.id) ?? [];
-                const openCount = subs.filter((s) => !s.completed).length;
+                const openCount = subs.filter(s => !s.completed).length;
-                const cat = categories.find((c) => c.id === task.categoryId);
+                const cat = categories.find(c => c.id === task.categoryId);
                 return (
-                  <View key={task.id} style={[styles.eventCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
+                  <View
+                    key={task.id}
+                    style={[
+                      styles.eventCard,
+                      { backgroundColor: theme.card, borderColor: theme.border },
+                    ]}
+                  >
                     <View style={styles.eventRow}>
                       <TouchableOpacity
                         style={styles.checkCircle}
@@ -104,41 +140,76 @@ export default function DayViewScreen() {
                           {task.completed ? (
                             <>
                               <Circle cx={12} cy={12} r={10} fill={theme.accent} />
-                              <Path d="M7 12l3 3 7-7" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                              <Path
+                                d="M7 12l3 3 7-7"
+                                stroke="#FFFFFF"
+                                strokeWidth={2.5}
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                fill="none"
+                              />
                             </>
                           ) : (
-                            <Circle cx={12} cy={12} r={10} stroke={theme.textSecondary} strokeWidth={2.5} fill="none" />
+                            <Circle
+                              cx={12}
+                              cy={12}
+                              r={10}
+                              stroke={theme.textSecondary}
+                              strokeWidth={2.5}
+                              fill="none"
+                            />
                           )}
                         </Svg>
                       </TouchableOpacity>
 
                       <TouchableOpacity
                         style={styles.eventTouch}
-                        onPress={() => router.push({ pathname: '/task-detail', params: { id: task.id } })}
+                        onPress={() =>
+                          router.push({ pathname: '/task-detail', params: { id: task.id } })
+                        }
                         activeOpacity={0.7}
                       >
                         <Text
-                          style={[styles.eventTitle, { color: theme.text }, task.completed && styles.eventCompleted]}
+                          style={[
+                            styles.eventTitle,
+                            { color: theme.text },
+                            task.completed && styles.eventCompleted,
+                          ]}
                           numberOfLines={1}
                         >
                           {task.title}
                         </Text>
                         {openCount > 0 && (
-                          <Text style={[styles.eventSub, { color: theme.textMuted }]} numberOfLines={1}>
+                          <Text
+                            style={[styles.eventSub, { color: theme.textMuted }]}
+                            numberOfLines={1}
+                          >
                             {openCount} open subtask{openCount === 1 ? '' : 's'}
                           </Text>
                         )}
                         {!task.completed && (
                           <View style={styles.metaRow}>
                             {cat && (
-                              <View style={[styles.tagChip, { backgroundColor: desaturate(cat.color, 0.3) }]}>
+                              <View
-                                <Text style={styles.tagText} numberOfLines={1}>{cat.name}</Text>
+                                style={[
+                                  styles.tagChip,
+                                  { backgroundColor: desaturate(cat.color, 0.3) },
+                                ]}
+                              >
+                                <Text style={styles.tagText} numberOfLines={1}>
+                                  {cat.name}
+                                </Text>
                               </View>
                             )}
                             {task.dueTime ? (
-                              <Text style={[styles.timeText, { color: theme.textSecondary }]}>{task.dueTime}{task.endTime ? `–${task.endTime}` : ''}</Text>
+                              <Text style={[styles.timeText, { color: theme.textSecondary }]}>
+                                {task.dueTime}
+                                {task.endTime ? `–${task.endTime}` : ''}
+                              </Text>
                             ) : task.dueDate ? (
-                              <Text style={[styles.timeText, { color: theme.textSecondary }]}>{format(task.dueDate, 'HH:mm')}</Text>
+                              <Text style={[styles.timeText, { color: theme.textSecondary }]}>
+                                {format(task.dueDate, 'HH:mm')}
+                              </Text>
                             ) : null}
                           </View>
                         )}
@@ -152,7 +223,14 @@ export default function DayViewScreen() {
                         accessibilityLabel={`Edit ${task.title}`}
                       >
                         <Svg width={20} height={20} viewBox="0 0 24 24">
-                          <Path d="M9 6l6 6-6 6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                          <Path
+                            d="M9 6l6 6-6 6"
+                            stroke={theme.textSecondary}
+                            strokeWidth={2.5}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            fill="none"
+                          />
                         </Svg>
                       </TouchableOpacity>
                     </View>
@@ -160,10 +238,16 @@ export default function DayViewScreen() {
                 );
               })}
               {Array.from(subtasksOnDay.entries()).flatMap(([taskId, subs]) => {
-                const parent = dayTasks.find((t) => t.id === taskId);
+                const parent = dayTasks.find(t => t.id === taskId);
                 if (parent) return [];
-                return subs.map((sub) => (
+                return subs.map(sub => (
-                  <View key={sub.id} style={[styles.eventCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
+                  <View
+                    key={sub.id}
+                    style={[
+                      styles.eventCard,
+                      { backgroundColor: theme.card, borderColor: theme.border },
+                    ]}
+                  >
                     <View style={styles.eventRow}>
                       <TouchableOpacity
                         style={styles.checkCircle}
@@ -176,26 +260,49 @@ export default function DayViewScreen() {
                           {sub.completed ? (
                             <>
                               <Circle cx={12} cy={12} r={10} fill={theme.accent} />
-                              <Path d="M7 12l3 3 7-7" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                              <Path
+                                d="M7 12l3 3 7-7"
+                                stroke="#FFFFFF"
+                                strokeWidth={2.5}
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                fill="none"
+                              />
                             </>
                           ) : (
-                            <Circle cx={12} cy={12} r={10} stroke={theme.textSecondary} strokeWidth={2.5} fill="none" />
+                            <Circle
+                              cx={12}
+                              cy={12}
+                              r={10}
+                              stroke={theme.textSecondary}
+                              strokeWidth={2.5}
+                              fill="none"
+                            />
                           )}
                         </Svg>
                       </TouchableOpacity>
                       <TouchableOpacity
                         style={styles.eventTouch}
-                        onPress={() => router.push({ pathname: '/subtask-detail', params: { id: sub.id } })}
+                        onPress={() =>
+                          router.push({ pathname: '/subtask-detail', params: { id: sub.id } })
+                        }
                         activeOpacity={0.7}
                       >
                         <Text
-                          style={[styles.eventTitle, { color: theme.text }, sub.completed && styles.eventCompleted]}
+                          style={[
+                            styles.eventTitle,
+                            { color: theme.text },
+                            sub.completed && styles.eventCompleted,
+                          ]}
                           numberOfLines={1}
                         >
                           {sub.title}
                         </Text>
                         {sub.dueTime ? (
-                          <Text style={[styles.timeText, { color: theme.textSecondary }]}>{sub.dueTime}{sub.endTime ? `–${sub.endTime}` : ''}</Text>
+                          <Text style={[styles.timeText, { color: theme.textSecondary }]}>
+                            {sub.dueTime}
+                            {sub.endTime ? `–${sub.endTime}` : ''}
+                          </Text>
                         ) : null}
                       </TouchableOpacity>
                     </View>
@@ -205,89 +312,93 @@ export default function DayViewScreen() {
             </>
           )}
         </ScrollView>
-        <QuickAddBar dueDate={dayStart.getTime()} placeholder={`Add event for ${format(day, 'MMM d')}`} />
+        <QuickAddBar
+          dueDate={dayStart.getTime()}
+          placeholder={`Add event for ${format(day, 'MMM d')}`}
+        />
       </KeyboardAvoidingView>
       {modals(() => {})}
     </SafeAreaView>
   );
 }
 
-const createStyles = (theme: ThemeColors) => StyleSheet.create({
+const createStyles = (theme: ThemeColors) =>
-  container: {
+  StyleSheet.create({
-    flex: 1,
+    container: {
-  },
+      flex: 1,
-  kbAvoid: {
+    },
-    flex: 1,
+    kbAvoid: {
-  },
+      flex: 1,
-  scrollBody: {
+    },
-    flex: 1,
+    scrollBody: {
-  },
+      flex: 1,
-  scrollContent: {
+    },
-    paddingTop: 12,
+    scrollContent: {
-    paddingBottom: 16,
+      paddingTop: 12,
-  },
+      paddingBottom: 16,
-  emptyState: {
+    },
-    alignItems: 'center',
+    emptyState: {
-    paddingVertical: 64,
+      alignItems: 'center',
-  },
+      paddingVertical: 64,
-  emptyText: {
+    },
-    fontSize: 15,
+    emptyText: {
-    fontWeight: '600',
+      fontSize: 15,
-  },
+      fontWeight: '600',
-  eventCard: {
+    },
-    marginHorizontal: 16,
+    eventCard: {
-    marginBottom: 8,
+      marginHorizontal: 16,
-    borderRadius: 16,
+      marginBottom: 8,
-    borderWidth: 1,
+      borderRadius: 16,
-    paddingHorizontal: 14,
+      borderWidth: 1,
-    paddingVertical: 12,
+      paddingHorizontal: 14,
-  },
+      paddingVertical: 12,
-  eventRow: {
+    },
-    flexDirection: 'row',
+    eventRow: {
-    alignItems: 'center',
+      flexDirection: 'row',
-  },
+      alignItems: 'center',
-  checkCircle: {
+    },
-    width: 30,
+    checkCircle: {
-    marginRight: 12,
+      width: 30,
-  },
+      marginRight: 12,
-  eventTouch: {
+    },
-    flex: 1,
+    eventTouch: {
-  },
+      flex: 1,
-  eventTitle: {
+    },
-    fontSize: 15,
+    eventTitle: {
-    fontWeight: '500',
+      fontSize: 15,
-  },
+      fontWeight: '500',
-  eventCompleted: {
+    },
-    textDecorationLine: 'line-through',
+    eventCompleted: {
-    color: theme.textMuted,
+      textDecorationLine: 'line-through',
-  },
+      color: theme.textMuted,
-  eventSub: {
+    },
-    fontSize: 13,
+    eventSub: {
-    marginTop: 2,
+      fontSize: 13,
-  },
+      marginTop: 2,
-  metaRow: {
+    },
-    flexDirection: 'row',
+    metaRow: {
-    alignItems: 'center',
+      flexDirection: 'row',
-    gap: 8,
+      alignItems: 'center',
-    marginTop: 4,
+      gap: 8,
-  },
+      marginTop: 4,
-  tagChip: {
+    },
-    paddingHorizontal: 7,
+    tagChip: {
-    paddingVertical: 2,
+      paddingHorizontal: 7,
-    borderRadius: 6,
+      paddingVertical: 2,
-    maxWidth: 140,
+      borderRadius: 6,
-  },
+      maxWidth: 140,
-  tagText: {
+    },
-    color: '#FFFFFF',
+    tagText: {
-    fontSize: 10,
+      color: '#FFFFFF',
-    fontWeight: '600',
+      fontSize: 10,
-  },
+      fontWeight: '600',
-  timeText: {
+    },
-    fontSize: 12.5,
+    timeText: {
-    fontWeight: '500',
+      fontSize: 12.5,
-  },
+      fontWeight: '500',
-  menuButton: {
+    },
-    padding: 4,
+    menuButton: {
-    marginLeft: 6,
+      padding: 4,
-  },
+      marginLeft: 6,
-});
+    },
+  });

carry-your-live/app/subtask-detail.tsx

@@ -1,5 +1,15 @@
 import React from 'react';
-import { View, Text, StyleSheet, SafeAreaView, ScrollView, KeyboardAvoidingView, Platform, TouchableOpacity, Alert } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableOpacity,
+  Alert,
+} from 'react-native';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Header } from '@/components/Header';
 import { TaskNameInput } from '@/components/TaskNameInput';
@@ -15,7 +25,14 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useDatabase } from '@/hooks/useDatabase';
 import { collections } from '@/database';
-import { SubtaskFormData, Reminder, parseReminders, toRemindersString, parseTaskTags, tagsToString } from '@/types';
+import {
+  SubtaskFormData,
+  Reminder,
+  parseReminders,
+  toRemindersString,
+  parseTaskTags,
+  tagsToString,
+} from '@/types';
 import { useSettings } from '@/theme';
 import { updateSubtask, deleteSubtask } from '@/utils/taskActions';
 import { CategorySelector } from '@/components/CategorySelector';
@@ -68,7 +85,14 @@ export default function SubtaskDetailScreen() {
     },
   });
 
-  const { handleSubmit, watch, setValue, control, reset, formState: { errors } } = methods;
+  const {
+    handleSubmit,
+    watch,
+    setValue,
+    control,
+    reset,
+    formState: { errors },
+  } = methods;
 
   const priority = watch('priority');
   const tags = watch('tags') ?? [];
@@ -98,7 +122,10 @@ export default function SubtaskDetailScreen() {
           allDay: subtask.allDay ?? false,
           repeat: subtask.repeat,
           repeatInterval: subtask.repeatInterval || 1,
-          repeatDays: ((subtask.repeatDays || '') as string).split(',').map(Number).filter((d) => !Number.isNaN(d)),
+          repeatDays: ((subtask.repeatDays || '') as string)
+            .split(',')
+            .map(Number)
+            .filter(d => !Number.isNaN(d)),
           reminder: (subtask.reminder || 'none') as Reminder,
           reminders: subtask.reminders || '',
           assigneeId: subtask.assigneeId ?? null,
@@ -160,7 +187,9 @@ export default function SubtaskDetailScreen() {
   if (!isReady || !loaded) {
     return (
       <View style={[styles.loadingContainer, { backgroundColor: theme.background }]}>
-        <Text style={{ color: theme.textFaint }}>{notFound ? 'Subtask not found' : 'Loading...'}</Text>
+        <Text style={{ color: theme.textFaint }}>
+          {notFound ? 'Subtask not found' : 'Loading...'}
+        </Text>
       </View>
     );
   }
@@ -171,9 +200,23 @@ export default function SubtaskDetailScreen() {
         title="Edit Subtask"
         showLogo={true}
         rightAction={
-          <TouchableOpacity onPress={confirmDelete} activeOpacity={0.7} style={[styles.deleteButton, { borderColor: theme.accentBorder, backgroundColor: theme.accentSoft }]}>
+          <TouchableOpacity
+            onPress={confirmDelete}
+            activeOpacity={0.7}
+            style={[
+              styles.deleteButton,
+              { borderColor: theme.accentBorder, backgroundColor: theme.accentSoft },
+            ]}
+          >
             <Svg width={22} height={22} viewBox="0 0 24 24">
-              <Path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" stroke={theme.accent} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+              <Path
+                d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"
+                stroke={theme.accent}
+                strokeWidth={2.2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="none"
+              />
             </Svg>
           </TouchableOpacity>
         }
@@ -201,14 +244,8 @@ export default function SubtaskDetailScreen() {
                 />
               )}
             />
-            <CategorySelector
+            <CategorySelector value={tags} onChange={value => setValue('tags', value)} />
-              value={tags}
+            <PrioritySelector value={priority} onChange={value => setValue('priority', value)} />
-              onChange={(value) => setValue('tags', value)}
-            />
-            <PrioritySelector
-              value={priority}
-              onChange={(value) => setValue('priority', value)}
-            />
             <DateTimePickerComponent control={control as any} />
             <RepeatSelector
               value={repeat}
@@ -223,12 +260,12 @@ export default function SubtaskDetailScreen() {
             <ReminderSelector
               value={reminders}
               hasDueDate={!!dueDate}
-              onChange={(value) => setValue('reminders', value)}
+              onChange={value => setValue('reminders', value)}
             />
             <AssigneeSelector
               value={assigneeId}
               onChange={(value: string | null) => setValue('assigneeId', value)}
-              friends={friends.map((f) => f.username)}
+              friends={friends.map(f => f.username)}
             />
             <Controller
               control={control}

carry-your-live/app/task-detail.tsx

@@ -1,5 +1,15 @@
 import React, { useRef } from 'react';
-import { View, Text, StyleSheet, SafeAreaView, ScrollView, KeyboardAvoidingView, Platform, TouchableOpacity, Keyboard } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableOpacity,
+  Keyboard,
+} from 'react-native';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Header } from '@/components/Header';
 import { CategorySelector } from '@/components/CategorySelector';
@@ -47,13 +57,27 @@ const taskSchema = z.object({
   subtasks: z.array(z.object({ title: z.string(), _key: z.string().optional() })).optional(),
 });
 
-function CollapsibleSection({ title, children, defaultExpanded = false, icon }: { title: string; children: React.ReactNode; defaultExpanded?: boolean; icon: React.ReactNode }) {
+function CollapsibleSection({
+  title,
+  children,
+  defaultExpanded = false,
+  icon,
+}: {
+  title: string;
+  children: React.ReactNode;
+  defaultExpanded?: boolean;
+  icon: React.ReactNode;
+}) {
   const { theme } = useSettings();
   const [expanded, setExpanded] = React.useState(defaultExpanded);
 
   return (
     <View style={styles.section}>
-      <TouchableOpacity style={[styles.sectionHeader, { backgroundColor: theme.card, borderColor: theme.border }]} onPress={() => setExpanded(!expanded)} activeOpacity={0.8}>
+      <TouchableOpacity
+        style={[styles.sectionHeader, { backgroundColor: theme.card, borderColor: theme.border }]}
+        onPress={() => setExpanded(!expanded)}
+        activeOpacity={0.8}
+      >
         <View style={styles.sectionHeaderLeft}>
           {icon}
           <Text style={[styles.sectionTitle, { color: theme.text }]}>{title}</Text>
@@ -106,7 +130,14 @@ export default function TaskDetailScreen() {
     },
   });
 
-  const { handleSubmit, watch, setValue, control, reset, formState: { errors } } = methods;
+  const {
+    handleSubmit,
+    watch,
+    setValue,
+    control,
+    reset,
+    formState: { errors },
+  } = methods;
 
   const tags = watch('tags') ?? [];
   const priority = watch('priority');
@@ -129,7 +160,8 @@ export default function TaskDetailScreen() {
         const subtasks = await collections.subtasks.query(Q.where('task_id', id)).fetch();
 
         if (!mounted) return;
-        const remindersValue = task.reminders || (task.reminder && task.reminder !== 'none' ? task.reminder : '');
+        const remindersValue =
+          task.reminders || (task.reminder && task.reminder !== 'none' ? task.reminder : '');
 
         reset({
           title: task.title,
@@ -143,11 +175,14 @@ export default function TaskDetailScreen() {
           allDay: task.allDay ?? false,
           repeat: task.repeat,
           repeatInterval: task.repeatInterval || 1,
-          repeatDays: (task.repeatDays || '').split(',').map(Number).filter((d) => !Number.isNaN(d)),
+          repeatDays: (task.repeatDays || '')
+            .split(',')
+            .map(Number)
+            .filter(d => !Number.isNaN(d)),
           reminder: (task.reminder || 'none') as TaskFormData['reminder'],
           reminders: remindersValue,
           assigneeId: task.assigneeId ?? null,
-          subtasks: subtasks.map((s) => ({ title: s.title, _key: s.id })),
+          subtasks: subtasks.map(s => ({ title: s.title, _key: s.id })),
         });
         setLoaded(true);
       } catch {
@@ -155,7 +190,9 @@ export default function TaskDetailScreen() {
       }
     })();
 
-    return () => { mounted = false; };
+    return () => {
+      mounted = false;
+    };
   }, [id, isReady, reset]);
 
   const onSubmit = async (data: TaskFormData) => {
@@ -174,7 +211,7 @@ export default function TaskDetailScreen() {
       savedTask = task;
       const existingSubtasks = await collections.subtasks.query(Q.where('task_id', id)).fetch();
 
-      await task.update((t) => {
+      await task.update(t => {
         t.title = data.title.trim();
         t.description = data.description || '';
         t.categoryId = (data.tags && data.tags[0]) || task.categoryId || '';
@@ -202,10 +239,10 @@ export default function TaskDetailScreen() {
         const trimmed = formItem.title.trim();
         if (!trimmed) continue;
         if (formItem._key) {
-          const existing = existingSubtasks.find((s) => s.id === formItem._key && !s.parentSubtaskId);
+          const existing = existingSubtasks.find(s => s.id === formItem._key && !s.parentSubtaskId);
           if (existing) {
             keptIds.add(existing.id);
-            await existing.update((s) => {
+            await existing.update(s => {
               s.title = trimmed;
               s.order = order;
               s.updatedAt = now;
@@ -214,7 +251,7 @@ export default function TaskDetailScreen() {
             continue;
           }
         }
-        await collections.subtasks.create((s) => {
+        await collections.subtasks.create(s => {
           s.taskId = task.id;
           s.categoryId = task.categoryId || '';
           s.tags = task.tags || '';
@@ -244,9 +281,11 @@ export default function TaskDetailScreen() {
         if (existing.parentSubtaskId) continue;
         if (keptIds.has(existing.id)) continue;
         removedIds.push(existing.id);
-        const children = await collections.subtasks.query(Q.where('parent_subtask_id', existing.id)).fetch();
+        const children = await collections.subtasks
+          .query(Q.where('parent_subtask_id', existing.id))
+          .fetch();
         for (const child of children) {
-          await child.update((c) => {
+          await child.update(c => {
             c.parentSubtaskId = null;
             c.updatedAt = now;
           });
@@ -288,9 +327,23 @@ export default function TaskDetailScreen() {
         title="Edit Task"
         showLogo={true}
         rightAction={
-          <TouchableOpacity onPress={handleDelete} activeOpacity={0.7} style={[styles.deleteButton, { borderColor: theme.accentBorder, backgroundColor: theme.accentSoft }]}>
+          <TouchableOpacity
+            onPress={handleDelete}
+            activeOpacity={0.7}
+            style={[
+              styles.deleteButton,
+              { borderColor: theme.accentBorder, backgroundColor: theme.accentSoft },
+            ]}
+          >
             <Svg width={22} height={22} viewBox="0 0 24 24">
-              <Path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" stroke={theme.accent} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+              <Path
+                d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"
+                stroke={theme.accent}
+                strokeWidth={2.2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="none"
+              />
             </Svg>
           </TouchableOpacity>
         }
@@ -310,7 +363,7 @@ export default function TaskDetailScreen() {
           >
             <CategorySelector
               value={tags}
-              onChange={(value) => setValue('tags', value)}
+              onChange={value => setValue('tags', value)}
               error={errors.categoryId?.message}
             />
             <Controller
@@ -326,32 +379,49 @@ export default function TaskDetailScreen() {
               )}
             />
             <SubtasksSection control={control} />
-            <PrioritySelector
+            <PrioritySelector value={priority} onChange={value => setValue('priority', value)} />
-              value={priority}
-              onChange={(value) => setValue('priority', value)}
-            />
 
-            <CollapsibleSection title="Date & Time" icon={
+            <CollapsibleSection
-              <Svg width={20} height={20} viewBox="0 0 24 24">
+              title="Date & Time"
-                <Circle cx={12} cy={12} r={10} stroke={theme.accent} strokeWidth={1.8} fill="none" />
+              icon={
-                <Path d="M12 6v6l4 2" stroke={theme.accent} strokeWidth={1.8} strokeLinecap="round" />
+                <Svg width={20} height={20} viewBox="0 0 24 24">
-              </Svg>
+                  <Circle
-            } defaultExpanded={!!dueDate}>
+                    cx={12}
+                    cy={12}
+                    r={10}
+                    stroke={theme.accent}
+                    strokeWidth={1.8}
+                    fill="none"
+                  />
+                  <Path
+                    d="M12 6v6l4 2"
+                    stroke={theme.accent}
+                    strokeWidth={1.8}
+                    strokeLinecap="round"
+                  />
+                </Svg>
+              }
+              defaultExpanded={!!dueDate}
+            >
               <DateTimePickerComponent control={control} />
             </CollapsibleSection>
 
-            <CollapsibleSection title="Repeat" icon={
+            <CollapsibleSection
-              <Svg width={20} height={20} viewBox="0 0 24 24">
+              title="Repeat"
-                <Path
+              icon={
-                  d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3"
+                <Svg width={20} height={20} viewBox="0 0 24 24">
-                  stroke={theme.accent}
+                  <Path
-                  strokeWidth={1.8}
+                    d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3"
-                  strokeLinecap="round"
+                    stroke={theme.accent}
-                  strokeLinejoin="round"
+                    strokeWidth={1.8}
-                  fill="none"
+                    strokeLinecap="round"
-                />
+                    strokeLinejoin="round"
-              </Svg>
+                    fill="none"
-            } defaultExpanded={repeat !== 'none'}>
+                  />
+                </Svg>
+              }
+              defaultExpanded={repeat !== 'none'}
+            >
               <RepeatSelector
                 value={repeat}
                 interval={repeatInterval}
@@ -364,43 +434,74 @@ export default function TaskDetailScreen() {
               />
             </CollapsibleSection>
 
-            <CollapsibleSection title="Reminder" icon={
+            <CollapsibleSection
-              <Svg width={20} height={20} viewBox="0 0 24 24">
+              title="Reminder"
-                <Path
+              icon={
-                  d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"
+                <Svg width={20} height={20} viewBox="0 0 24 24">
-                  stroke={theme.accent}
+                  <Path
-                  strokeWidth={1.8}
+                    d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"
-                  strokeLinecap="round"
+                    stroke={theme.accent}
-                  strokeLinejoin="round"
+                    strokeWidth={1.8}
-                  fill="none"
+                    strokeLinecap="round"
-                />
+                    strokeLinejoin="round"
-              </Svg>
+                    fill="none"
-            } defaultExpanded={!!reminders && reminders !== ''}>
+                  />
+                </Svg>
+              }
+              defaultExpanded={!!reminders && reminders !== ''}
+            >
               <ReminderSelector
                 value={reminders}
                 hasDueDate={!!dueDate}
-                onChange={(value) => setValue('reminders', value)}
+                onChange={value => setValue('reminders', value)}
               />
             </CollapsibleSection>
 
-            <CollapsibleSection title="Assignee" icon={
+            <CollapsibleSection
-              <Svg width={20} height={20} viewBox="0 0 24 24">
+              title="Assignee"
-                <Circle cx={12} cy={12} r={10} stroke={theme.accent} strokeWidth={1.8} fill="none" />
+              icon={
-                <Path d="M12 10v6M12 19v1" stroke={theme.accent} strokeWidth={1.8} strokeLinecap="round" />
+                <Svg width={20} height={20} viewBox="0 0 24 24">
-              </Svg>
+                  <Circle
-            } defaultExpanded={!!assigneeId}>
+                    cx={12}
+                    cy={12}
+                    r={10}
+                    stroke={theme.accent}
+                    strokeWidth={1.8}
+                    fill="none"
+                  />
+                  <Path
+                    d="M12 10v6M12 19v1"
+                    stroke={theme.accent}
+                    strokeWidth={1.8}
+                    strokeLinecap="round"
+                  />
+                </Svg>
+              }
+              defaultExpanded={!!assigneeId}
+            >
               <AssigneeSelector
                 value={assigneeId}
                 onChange={(value: string | null) => setValue('assigneeId', value)}
-                friends={friends.map((f) => f.username)}
+                friends={friends.map(f => f.username)}
               />
             </CollapsibleSection>
 
-            <CollapsibleSection title="Description" icon={
+            <CollapsibleSection
-              <Svg width={20} height={20} viewBox="0 0 24 24">
+              title="Description"
-                <Path d="M4 6h16M4 12h16M4 18h10" stroke={theme.accent} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+              icon={
-              </Svg>
+                <Svg width={20} height={20} viewBox="0 0 24 24">
-            } defaultExpanded={!!methods.getValues('description')}>
+                  <Path
+                    d="M4 6h16M4 12h16M4 18h10"
+                    stroke={theme.accent}
+                    strokeWidth={1.8}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    fill="none"
+                  />
+                </Svg>
+              }
+              defaultExpanded={!!methods.getValues('description')}
+            >
               <Controller
                 control={control}
                 name="description"

carry-your-live/package.json

@@ -9,22 +9,23 @@
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-community/datetimepicker": "9.1.0",
     "date-fns": "^3.6.0",
-    "expo": "~57.0.10",
+    "expo": "~57.0.18",
     "expo-blur": "~57.0.2",
     "expo-constants": "~57.0.9",
-    "expo-dev-client": "~57.0.1",
+    "expo-dev-client": "~57.0.16",
     "expo-device": "^57.0.1",
-    "expo-linking": "~57.0.5",
+    "expo-intent-launcher": "~57.0.1",
-    "expo-notifications": "~57.0.8",
+    "expo-linking": "~57.0.8",
-    "expo-router": "~57.0.10",
+    "expo-notifications": "~57.0.15",
-    "expo-sqlite": "~57.0.1",
+    "expo-router": "~57.0.17",
+    "expo-sqlite": "~57.0.2",
     "expo-status-bar": "~57.0.1",
-    "expo-system-ui": "~57.0.2",
+    "expo-system-ui": "~57.0.3",
-    "expo-updates": "~57.0.12",
+    "expo-updates": "~57.0.19",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-hook-form": "^7.51.5",
-    "react-native": "0.86.2",
+    "react-native": "0.86.3",
     "react-native-gesture-handler": "2.32.0",
     "react-native-keyboard-controller": "1.21.9",
     "react-native-safe-area-context": "5.7.0",
@@ -40,7 +41,7 @@
     "electron": "^41.7.1",
     "electron-builder": "^26.15.3",
     "eslint": "^9.0.0",
-    "eslint-config-expo": "~57.0.1",
+    "eslint-config-expo": "~57.0.2",
     "patch-package": "^8.0.1",
     "prettier": "^3.9.6",
     "typescript": "~6.0.3"

carry-your-live/patches/react-native+0.86.3.patch

@@ -0,0 +1,78 @@
+diff --git a/node_modules/react-native/src/private/webapis/dom/events/Event.js b/node_modules/react-native/src/private/webapis/dom/events/Event.js
+index f918f97..5deab46 100644
+--- a/node_modules/react-native/src/private/webapis/dom/events/Event.js
++++ b/node_modules/react-native/src/private/webapis/dom/events/Event.js
+@@ -70,7 +70,7 @@ export default class Event {
+   [CURRENT_TARGET_KEY]: EventTarget | null = null;
+ 
+   // $FlowExpectedError[unsupported-syntax]
+-  [EVENT_PHASE_KEY]: boolean = Event.NONE;
++  [EVENT_PHASE_KEY]: boolean = 0;
+ 
+   // $FlowExpectedError[unsupported-syntax]
+   [IN_PASSIVE_LISTENER_FLAG_KEY]: boolean = false;
+@@ -193,48 +193,64 @@ export default class Event {
+ 
+ // $FlowExpectedError[cannot-write]
+ Object.defineProperty(Event, 'NONE', {
++  writable: true,
++  configurable: true,
+   enumerable: true,
+   value: 0,
+ });
+ 
+ // $FlowExpectedError[cannot-write]
+ Object.defineProperty(Event.prototype, 'NONE', {
++  writable: true,
++  configurable: true,
+   enumerable: true,
+   value: 0,
+ });
+ 
+ // $FlowExpectedError[cannot-write]
+ Object.defineProperty(Event, 'CAPTURING_PHASE', {
++  writable: true,
++  configurable: true,
+   enumerable: true,
+   value: 1,
+ });
+ 
+ // $FlowExpectedError[cannot-write]
+ Object.defineProperty(Event.prototype, 'CAPTURING_PHASE', {
++  writable: true,
++  configurable: true,
+   enumerable: true,
+   value: 1,
+ });
+ 
+ // $FlowExpectedError[cannot-write]
+ Object.defineProperty(Event, 'AT_TARGET', {
++  writable: true,
++  configurable: true,
+   enumerable: true,
+   value: 2,
+ });
+ 
+ // $FlowExpectedError[cannot-write]
+ Object.defineProperty(Event.prototype, 'AT_TARGET', {
++  writable: true,
++  configurable: true,
+   enumerable: true,
+   value: 2,
+ });
+ 
+ // $FlowExpectedError[cannot-write]
+ Object.defineProperty(Event, 'BUBBLING_PHASE', {
++  writable: true,
++  configurable: true,
+   enumerable: true,
+   value: 3,
+ });
+ 
+ // $FlowExpectedError[cannot-write]
+ Object.defineProperty(Event.prototype, 'BUBBLING_PHASE', {
++  writable: true,
++  configurable: true,
+   enumerable: true,
+   value: 3,
+ });

carry-your-live/src/components/CategoryEditorModal.tsx

@@ -161,7 +161,7 @@ export function CategoryEditorModal({
                   </TouchableOpacity>
                 ))}
               </View>
-              <ColorWheel color={color} onChange={setColor} />
+              <ColorWheel color={color} opacity={1} onChange={setColor} />
 
               <View style={styles.actions}>
                 {category && (

carry-your-live/src/components/ColorWheel.native.tsx

@@ -70,10 +70,11 @@ function hsvToHex(h: number, s: number, v: number) {
 
 interface ColorWheelProps {
   color: string;
-  onChange: (color: string) => void;
+  opacity: number;
+  onChange: (color: string, opacity: number) => void;
 }
 
-export default function ColorWheel({ color, onChange }: ColorWheelProps) {
+export default function ColorWheel({ color, opacity, onChange }: ColorWheelProps) {
   const { theme } = useSettings();
   const initialHsv = useMemo(() => hexToHsv(color), [color]);
   const [hue, setHue] = useState(initialHsv.h);
@@ -90,8 +91,8 @@ export default function ColorWheel({ color, onChange }: ColorWheelProps) {
 
   useEffect(() => {
     const newColor = hsvToHex(hue, saturation, value);
-    onChange(newColor);
+    onChange(newColor, opacity);
-  }, [hue, saturation, value, onChange]);
+  }, [hue, saturation, value, opacity, onChange]);
 
   const updateFromWheel = (locationX: number, locationY: number) => {
     const center = WHEEL_SIZE / 2;

carry-your-live/src/components/ColorWheel.web.tsx

@@ -69,10 +69,11 @@ function hsvToHex(h: number, s: number, v: number) {
 
 interface ColorWheelProps {
   color: string;
-  onChange: (color: string) => void;
+  opacity: number;
+  onChange: (color: string, opacity: number) => void;
 }
 
-export default function ColorWheel({ color, onChange }: ColorWheelProps) {
+export default function ColorWheel({ color, opacity, onChange }: ColorWheelProps) {
   const { theme } = useSettings();
   const initialHsv = useMemo(() => hexToHsv(color), [color]);
   const [hue, setHue] = useState(initialHsv.h);
@@ -89,8 +90,8 @@ export default function ColorWheel({ color, onChange }: ColorWheelProps) {
 
   useEffect(() => {
     const newColor = hsvToHex(hue, saturation, value);
-    onChange(newColor);
+    onChange(newColor, opacity);
-  }, [hue, saturation, value, onChange]);
+  }, [hue, saturation, value, opacity, onChange]);
 
   const handleWheelMouseDown = (e: React.MouseEvent) => {
     const rect = e.currentTarget.getBoundingClientRect();

carry-your-live/src/components/ListItem.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Switch } from 'react-native';
+
+export const ListItem = ({
+  title,
+  subtitle,
+  onPress,
+  leftIcon,
+  rightIcon,
+  disabled,
+  leftElement,
+  rightElement,
+  showChevron,
+}: {
+  title: string;
+  subtitle?: string | undefined;
+  onPress?: () => void;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  disabled?: boolean;
+  leftElement?: React.ReactNode;
+  rightElement?: React.ReactNode;
+  showChevron?: boolean;
+}) => {
+  return (
+    <TouchableOpacity onPress={onPress} disabled={disabled} style={styles.item}>
+      <View style={styles.left}>
+        {leftElement}
+        {leftIcon}
+      </View>
+      <View style={styles.center}>
+        <Text style={styles.title}>{title}</Text>
+        {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+      </View>
+      <View style={styles.right}>
+        {rightElement}
+        {rightIcon}
+      </View>
+      {showChevron && <Text style={styles.chevron}>▶</Text>}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  item: {
+    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: 'white',
+    marginVertical: 4,
+    borderRadius: 8,
+  },
+  left: {
+    flex: 1,
+  },
+  center: {
+    flex: 3,
+    marginHorizontal: 12,
+  },
+  right: {
+    flex: 1,
+    textAlign: 'right',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  subtitle: {
+    fontSize: 12,
+    color: '#757575',
+    marginTop: 2,
+  },
+  chevron: {
+    fontSize: 14,
+    color: '#757575',
+    marginLeft: 4,
+  },
+});

carry-your-live/src/components/OptionPickerModal.tsx

@@ -19,10 +19,22 @@ interface OptionPickerModalProps {
   multiSelect?: boolean;
 }
 
-export function OptionPickerModal({ visible, title, options, selectedValue, onSelect, onClose, multiSelect = false }: OptionPickerModalProps) {
+export function OptionPickerModal({
+  visible,
+  title,
+  options,
+  selectedValue,
+  onSelect,
+  onClose,
+  multiSelect = false,
+}: OptionPickerModalProps) {
   const { theme } = useSettings();
 
-  const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue == null ? [] : [selectedValue];
+  const selectedValues = Array.isArray(selectedValue)
+    ? selectedValue
+    : selectedValue == null
+      ? []
+      : [selectedValue];
 
   return (
     <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
@@ -31,7 +43,7 @@ export function OptionPickerModal({ visible, title, options, selectedValue, onSe
           <Text style={[styles.title, { color: theme.text }]}>{title}</Text>
           <FlatList
             data={options}
-            keyExtractor={(item) => item.value}
+            keyExtractor={item => item.value}
             renderItem={({ item }) => {
               const selected = selectedValues.includes(item.value);
               return (
@@ -44,7 +56,7 @@ export function OptionPickerModal({ visible, title, options, selectedValue, onSe
                   onPress={() => {
                     if (multiSelect) {
                       const newValues = selected
-                        ? selectedValues.filter((v) => v !== item.value)
+                        ? selectedValues.filter(v => v !== item.value)
                         : [...selectedValues, item.value];
                       onSelect(newValues);
                     } else {
@@ -57,23 +69,49 @@ export function OptionPickerModal({ visible, title, options, selectedValue, onSe
                   accessibilityLabel={item.label}
                   accessibilityState={multiSelect ? { checked: selected } : { selected }}
                 >
-                  {item.color && (
+                  {item.color && <View style={[styles.dot, { backgroundColor: item.color }]} />}
-                    <View style={[styles.dot, { backgroundColor: item.color }]} />
+                  <Text
-                  )}
+                    style={[
-                  <Text style={[styles.optionText, { color: selected ? theme.accent : theme.textSecondary }]}>
+                      styles.optionText,
+                      { color: selected ? theme.accent : theme.textSecondary },
+                    ]}
+                  >
                     {item.label}
                   </Text>
                   {multiSelect ? (
                     <Svg width={22} height={22} viewBox="0 0 24 24">
-                      <Circle cx={12} cy={12} r={10} stroke={selected ? theme.accent : theme.borderStrong} strokeWidth={2} fill={selected ? theme.accent : 'transparent'} />
+                      <Circle
+                        cx={12}
+                        cy={12}
+                        r={10}
+                        stroke={selected ? theme.accent : theme.borderStrong}
+                        strokeWidth={2}
+                        fill={selected ? theme.accent : 'transparent'}
+                      />
                       {selected && (
-                        <Path d="M8 12l3 3 6-6" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                        <Path
+                          d="M8 12l3 3 6-6"
+                          stroke="#FFFFFF"
+                          strokeWidth={2.5}
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          fill="none"
+                        />
                       )}
                     </Svg>
-                  ) : selected && (
+                  ) : (
-                    <Svg width={18} height={18} viewBox="0 0 24 24">
+                    selected && (
-                      <Path d="M5 12l5 5 9-10" stroke={theme.accent} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                      <Svg width={18} height={18} viewBox="0 0 24 24">
-                    </Svg>
+                        <Path
+                          d="M5 12l5 5 9-10"
+                          stroke={theme.accent}
+                          strokeWidth={2.5}
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          fill="none"
+                        />
+                      </Svg>
+                    )
                   )}
                 </TouchableOpacity>
               );

carry-your-live/src/components/PrioritySelector.tsx

@@ -24,13 +24,17 @@ export function PrioritySelector({ value, onChange }: PrioritySelectorProps) {
     <View style={styles.container}>
       <Text style={[styles.label, { color: theme.text }]}>Priority</Text>
       <View style={styles.options} accessibilityRole="radiogroup" accessibilityLabel="Priority">
-        {priorities.map((priority) => (
+        {priorities.map(priority => (
           <TouchableOpacity
             key={priority.value}
             style={[
               styles.option,
               { backgroundColor: theme.card, borderColor: theme.borderStrong },
-              value === priority.value && { borderColor: theme.accent, backgroundColor: theme.accentSoft, borderWidth: 2 },
+              value === priority.value && {
+                borderColor: theme.accent,
+                backgroundColor: theme.accentSoft,
+                borderWidth: 2,
+              },
             ]}
             onPress={() => onChange(priority.value)}
             activeOpacity={0.8}
@@ -38,16 +42,20 @@ export function PrioritySelector({ value, onChange }: PrioritySelectorProps) {
             accessibilityLabel={`${priority.label} priority`}
             accessibilityState={{ selected: value === priority.value }}
           >
-            <View style={[
+            <View
-              styles.colorIndicator,
+              style={[
-              { backgroundColor: PRIORITY_COLORS[priority.value] },
+                styles.colorIndicator,
-              value === priority.value && styles.colorIndicatorSelected,
+                { backgroundColor: PRIORITY_COLORS[priority.value] },
-            ]} />
+                value === priority.value && styles.colorIndicatorSelected,
-            <Text style={[
+              ]}
-              styles.optionText,
+            />
-              { color: theme.textFaint },
+            <Text
-              value === priority.value && { color: theme.accentStrong, fontWeight: '600' },
+              style={[
-            ]}>
+                styles.optionText,
+                { color: theme.textFaint },
+                value === priority.value && { color: theme.accentStrong, fontWeight: '600' },
+              ]}
+            >
               {priority.label}
             </Text>
           </TouchableOpacity>

carry-your-live/src/components/QuickAddBar.tsx

@@ -1,5 +1,13 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { View, StyleSheet, TextInput, TouchableOpacity, Keyboard, Text, Platform } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  Keyboard,
+  Text,
+  Platform,
+} from 'react-native';
 import { BlurView } from 'expo-blur';
 import { database, collections } from '@/database';
 import { useCategories } from '@/hooks/useDatabase';
@@ -14,10 +22,20 @@ interface QuickAddBarProps {
   placeholder?: string;
 }
 
-const BlurContainer = ({ children, style, theme }: { children: React.ReactNode; style: any; theme: any }) => {
+const BlurContainer = ({
+  children,
+  style,
+  theme,
+}: {
+  children: React.ReactNode;
+  style: any;
+  theme: any;
+}) => {
   if (Platform.OS === 'web') {
     return (
-      <View style={[style, { backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border }]}>
+      <View
+        style={[style, { backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border }]}
+      >
         {children}
       </View>
     );
@@ -38,10 +56,10 @@ export function QuickAddBar({ dueDate = 0, placeholder }: QuickAddBarProps) {
   const inputRef = useRef<TextInput>(null);
 
   const visibleCategories = useMemo(
-    () => categories.filter((c) => c.name.toLowerCase() !== 'calendar'),
+    () => categories.filter(c => c.name.toLowerCase() !== 'calendar'),
     [categories]
   );
-  const categoryColor = visibleCategories.find((c) => c.id === categoryId)?.color ?? theme.textMuted;
+  const categoryColor = visibleCategories.find(c => c.id === categoryId)?.color ?? theme.textMuted;
 
   useEffect(() => {
     return subscribeToQuickAdd(() => {
@@ -57,7 +75,7 @@ export function QuickAddBar({ dueDate = 0, placeholder }: QuickAddBarProps) {
 
     const now = new Date();
     await database.write(async () => {
-      await collections.tasks.create((t) => {
+      await collections.tasks.create(t => {
         t.title = trimmed;
         t.description = '';
         t.categoryId = categoryId || '';
@@ -83,16 +101,31 @@ export function QuickAddBar({ dueDate = 0, placeholder }: QuickAddBarProps) {
   return (
     <View style={styles.wrapper}>
       <BlurContainer theme={theme} style={styles.blurContainer}>
-        <View style={[styles.bar, { backgroundColor: 'rgba(255,255,255,0.05)', borderColor: 'rgba(255,255,255,0.1)' }]}>
+        <View
+          style={[
+            styles.bar,
+            { backgroundColor: 'rgba(255,255,255,0.05)', borderColor: 'rgba(255,255,255,0.1)' },
+          ]}
+        >
           <TouchableOpacity
-            style={[styles.categoryButton, { borderColor: theme.borderStrong, backgroundColor: theme.cardAlt }]}
+            style={[
+              styles.categoryButton,
+              { borderColor: theme.borderStrong, backgroundColor: theme.cardAlt },
+            ]}
             onPress={() => setCategoryPickerVisible(true)}
             activeOpacity={0.7}
             accessibilityLabel="Select tags"
           >
             <View style={[styles.categoryButtonDot, { backgroundColor: categoryColor }]} />
             <Svg width={12} height={12} viewBox="0 0 24 24">
-              <Path d="M6 9l6 6 6-6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+              <Path
+                d="M6 9l6 6 6-6"
+                stroke={theme.textSecondary}
+                strokeWidth={2.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="none"
+              />
             </Svg>
           </TouchableOpacity>
           <TextInput
@@ -108,7 +141,11 @@ export function QuickAddBar({ dueDate = 0, placeholder }: QuickAddBarProps) {
             accessibilityHint="Enter a task name and press the add button"
           />
           <TouchableOpacity
-            style={[styles.submit, { backgroundColor: theme.accent }, title.trim() ? {} : styles.submitDisabled]}
+            style={[
+              styles.submit,
+              { backgroundColor: theme.accent },
+              title.trim() ? {} : styles.submitDisabled,
+            ]}
             onPress={title.trim() ? handleAdd : undefined}
             disabled={!title.trim()}
             activeOpacity={0.8}
@@ -132,9 +169,12 @@ export function QuickAddBar({ dueDate = 0, placeholder }: QuickAddBarProps) {
       <OptionPickerModal
         visible={categoryPickerVisible}
         title="Select Tags"
-        options={[{ value: '', label: 'None', color: theme.textMuted }, ...visibleCategories.map((c) => ({ value: c.id, label: c.name, color: c.color }))]}
+        options={[
+          { value: '', label: 'None', color: theme.textMuted },
+          ...visibleCategories.map(c => ({ value: c.id, label: c.name, color: c.color })),
+        ]}
         selectedValue={categoryId}
-        onSelect={(value) => setCategoryId(Array.isArray(value) ? value[0] : value)}
+        onSelect={value => setCategoryId(Array.isArray(value) ? value[0] : value)}
         onClose={() => setCategoryPickerVisible(false)}
       />
     </View>
@@ -162,7 +202,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: -2 },
-    shadowOpacity: 0.10,
+    shadowOpacity: 0.1,
     shadowRadius: 6,
     elevation: 6,
     minHeight: 56,

carry-your-live/src/components/ReminderSelector.tsx

@@ -18,9 +18,13 @@ export function ReminderSelector({ value, onChange, hasDueDate }: ReminderSelect
   const selectedReminders = parseReminders(value);
   const disabled = !hasDueDate;
 
-  const reminderLabels = selectedReminders.length > 0
+  const reminderLabels =
-    ? selectedReminders.map(r => REMINDER_OPTIONS.find(o => o.value === r)?.label).filter(Boolean).join(', ')
+    selectedReminders.length > 0
-    : 'No reminder';
+      ? selectedReminders
+          .map(r => REMINDER_OPTIONS.find(o => o.value === r)?.label)
+          .filter(Boolean)
+          .join(', ')
+      : 'No reminder';
 
   return (
     <View style={styles.container}>
@@ -29,7 +33,10 @@ export function ReminderSelector({ value, onChange, hasDueDate }: ReminderSelect
         style={[
           styles.row,
           { backgroundColor: theme.card, borderColor: theme.borderStrong },
-          selectedReminders.length > 0 && { borderColor: theme.accent, backgroundColor: theme.accentSoft },
+          selectedReminders.length > 0 && {
+            borderColor: theme.accent,
+            backgroundColor: theme.accentSoft,
+          },
           disabled && { opacity: 0.5 },
         ]}
         onPress={() => setShowPicker(true)}
@@ -49,7 +56,14 @@ export function ReminderSelector({ value, onChange, hasDueDate }: ReminderSelect
             strokeLinejoin="round"
             fill="none"
           />
-          <Circle cx={18.5} cy={5.5} r={3.5} fill={selectedReminders.length > 0 ? theme.accent : 'transparent'} stroke={selectedReminders.length > 0 ? theme.accentText : theme.textSecondary} strokeWidth={1.8} />
+          <Circle
+            cx={18.5}
+            cy={5.5}
+            r={3.5}
+            fill={selectedReminders.length > 0 ? theme.accent : 'transparent'}
+            stroke={selectedReminders.length > 0 ? theme.accentText : theme.textSecondary}
+            strokeWidth={1.8}
+          />
         </Svg>
         <Text
           style={[
@@ -62,20 +76,32 @@ export function ReminderSelector({ value, onChange, hasDueDate }: ReminderSelect
         </Text>
         <View style={styles.chevron}>
           <Svg width={16} height={16} viewBox="0 0 24 24">
-            <Path d="M9 18l6-6-6-6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+            <Path
+              d="M9 18l6-6-6-6"
+              stroke={theme.textSecondary}
+              strokeWidth={2.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
           </Svg>
         </View>
       </TouchableOpacity>
       {!hasDueDate && (
-        <Text style={[styles.hint, { color: theme.textMuted }]}>Set a due date to add reminders.</Text>
+        <Text style={[styles.hint, { color: theme.textMuted }]}>
+          Set a due date to add reminders.
+        </Text>
       )}
 
       <OptionPickerModal
         visible={showPicker}
         title="Reminders"
-        options={REMINDER_OPTIONS.filter((o) => o.value !== 'none').map((o) => ({ value: o.value, label: o.label }))}
+        options={REMINDER_OPTIONS.filter(o => o.value !== 'none').map(o => ({
+          value: o.value,
+          label: o.label,
+        }))}
         selectedValue={selectedReminders}
-        onSelect={(v) => onChange(toRemindersString(v as Reminder[]))}
+        onSelect={v => onChange(toRemindersString(v as Reminder[]))}
         onClose={() => setShowPicker(false)}
         multiSelect
       />

carry-your-live/src/components/RepeatSelector.tsx

@@ -1,6 +1,22 @@
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Modal, TextInput, Pressable, KeyboardAvoidingView } from 'react-native';
+import {
-import { Repeat, REPEAT_OPTIONS, WEEKDAY_LABELS, WEEKDAY_ORDER, weekdaysInDisplayOrder, repeatDaysFromString } from '@/types';
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Modal,
+  TextInput,
+  Pressable,
+  KeyboardAvoidingView,
+} from 'react-native';
+import {
+  Repeat,
+  REPEAT_OPTIONS,
+  WEEKDAY_LABELS,
+  WEEKDAY_ORDER,
+  weekdaysInDisplayOrder,
+  repeatDaysFromString,
+} from '@/types';
 import { useSettings } from '@/theme';
 import { useRepeatProfiles } from '@/hooks/useDatabase';
 import { createRepeatProfile, deleteRepeatProfile } from '@/utils/repeatProfileActions';
@@ -43,7 +59,15 @@ function RepeatIcon({ repeat, color }: { repeat: Repeat; color: string }) {
   );
 }
 
-const WEEKDAY_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const WEEKDAY_NAMES = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+];
 
 function unitLabel(value: Repeat): string {
   switch (value) {
@@ -77,12 +101,16 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
   };
 
   const toggleDay = (day: number) => {
-    const nextDays = days.includes(day) ? days.filter((d) => d !== day) : [...days, day].sort();
+    const nextDays = days.includes(day) ? days.filter(d => d !== day) : [...days, day].sort();
     if (value === 'custom' && nextDays.length === 0) return;
     onChange(value, interval, nextDays);
   };
 
-  const applyProfile = (profile: { repeat: Repeat; repeatInterval: number; repeatDays: string }) => {
+  const applyProfile = (profile: {
+    repeat: Repeat;
+    repeatInterval: number;
+    repeatDays: string;
+  }) => {
     onChange(profile.repeat, profile.repeatInterval, repeatDaysFromString(profile.repeatDays));
   };
 
@@ -116,7 +144,7 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
         <View style={styles.profileRow}>
           <Text style={[styles.profileLabel, { color: theme.textFaint }]}>Profiles</Text>
           <View style={styles.profileChips}>
-            {profiles.map((profile) => (
+            {profiles.map(profile => (
               <View
                 key={profile.id}
                 style={[
@@ -131,8 +159,15 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
                     },
                 ]}
               >
-                <TouchableOpacity onPress={() => applyProfile(profile)} activeOpacity={0.8} accessibilityRole="button" accessibilityLabel={`Apply repeat profile ${profile.name}`}>
+                <TouchableOpacity
-                  <Text style={[styles.profileChipText, { color: theme.textSecondary }]}>{profile.name}</Text>
+                  onPress={() => applyProfile(profile)}
+                  activeOpacity={0.8}
+                  accessibilityRole="button"
+                  accessibilityLabel={`Apply repeat profile ${profile.name}`}
+                >
+                  <Text style={[styles.profileChipText, { color: theme.textSecondary }]}>
+                    {profile.name}
+                  </Text>
                 </TouchableOpacity>
                 <TouchableOpacity
                   onPress={() => handleDeleteProfile(profile.id, profile.name)}
@@ -149,13 +184,17 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
       )}
 
       <View style={styles.chipRow} accessibilityRole="radiogroup" accessibilityLabel="Repeat">
-        {REPEAT_OPTIONS.map((option) => (
+        {REPEAT_OPTIONS.map(option => (
           <TouchableOpacity
             key={option.value}
             style={[
               styles.chip,
               { backgroundColor: theme.card, borderColor: theme.borderStrong },
-              value === option.value && { borderColor: theme.accent, backgroundColor: theme.accentSoft, borderWidth: 2 },
+              value === option.value && {
+                borderColor: theme.accent,
+                backgroundColor: theme.accentSoft,
+                borderWidth: 2,
+              },
             ]}
             onPress={() => selectRepeat(option.value)}
             activeOpacity={0.8}
@@ -163,7 +202,10 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
             accessibilityLabel={`Repeat ${option.label.replace('No Repeat', 'none')}`}
             accessibilityState={{ selected: value === option.value }}
           >
-            <RepeatIcon repeat={option.value} color={value === option.value ? theme.accent : theme.textFaint} />
+            <RepeatIcon
+              repeat={option.value}
+              color={value === option.value ? theme.accent : theme.textFaint}
+            />
             <Text
               style={[
                 styles.chipText,
@@ -179,7 +221,12 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
 
       {value !== 'none' && (
         <View style={styles.settings}>
-          <View style={[styles.intervalRow, { backgroundColor: theme.card, borderColor: theme.borderStrong }]}>
+          <View
+            style={[
+              styles.intervalRow,
+              { backgroundColor: theme.card, borderColor: theme.borderStrong },
+            ]}
+          >
             <Text style={[styles.intervalLabel, { color: theme.textSecondary }]}>Every</Text>
             <TouchableOpacity
               style={[styles.stepButton, { borderColor: theme.borderStrong }]}
@@ -190,7 +237,14 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
               accessibilityLabel="Decrease repeat interval"
               accessibilityState={{ disabled: interval <= 1 }}
             >
-              <Text style={[styles.stepButtonText, { color: interval <= 1 ? theme.textMuted : theme.text }]}>−</Text>
+              <Text
+                style={[
+                  styles.stepButtonText,
+                  { color: interval <= 1 ? theme.textMuted : theme.text },
+                ]}
+              >
+                −
+              </Text>
             </TouchableOpacity>
             <Text style={[styles.intervalValue, { color: theme.text }]}>{interval}</Text>
             <TouchableOpacity
@@ -202,7 +256,14 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
               accessibilityLabel="Increase repeat interval"
               accessibilityState={{ disabled: interval >= 30 }}
             >
-              <Text style={[styles.stepButtonText, { color: interval >= 30 ? theme.textMuted : theme.text }]}>+</Text>
+              <Text
+                style={[
+                  styles.stepButtonText,
+                  { color: interval >= 30 ? theme.textMuted : theme.text },
+                ]}
+              >
+                +
+              </Text>
             </TouchableOpacity>
             <Text style={[styles.intervalLabel, { color: theme.textSecondary }]}>
               {unitLabel(value)}
@@ -212,14 +273,20 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
 
           {isDaysBased(value) && (
             <View style={styles.dayRow}>
-              {WEEKDAY_ORDER.map((day) => (
+              {WEEKDAY_ORDER.map(day => (
                 <TouchableOpacity
                   key={`${WEEKDAY_LABELS[day]}-${day}`}
                   style={[
                     styles.dayChip,
                     { backgroundColor: theme.card, borderColor: theme.borderStrong },
-                    days.includes(day) && { backgroundColor: theme.accent, borderColor: theme.accent },
+                    days.includes(day) && {
-                    value === 'custom' && days.length === 1 && days.includes(day) && styles.dayChipLast,
+                      backgroundColor: theme.accent,
+                      borderColor: theme.accent,
+                    },
+                    value === 'custom' &&
+                      days.length === 1 &&
+                      days.includes(day) &&
+                      styles.dayChipLast,
                   ]}
                   onPress={() => toggleDay(day)}
                   activeOpacity={0.8}
@@ -250,9 +317,16 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
           activeOpacity={0.8}
         >
           <Svg width={13} height={13} viewBox="0 0 24 24">
-            <Path d="M12 5v14M5 12h14" stroke={theme.accent} strokeWidth={2.5} strokeLinecap="round" />
+            <Path
+              d="M12 5v14M5 12h14"
+              stroke={theme.accent}
+              strokeWidth={2.5}
+              strokeLinecap="round"
+            />
           </Svg>
-          <Text style={[styles.saveProfileText, { color: theme.accentStrong }]}>Save as profile</Text>
+          <Text style={[styles.saveProfileText, { color: theme.accentStrong }]}>
+            Save as profile
+          </Text>
         </TouchableOpacity>
       )}
 
@@ -262,19 +336,29 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
         animationType="fade"
         onRequestClose={() => setSaveModalVisible(false)}
       >
-        <KeyboardAvoidingView
+        <KeyboardAvoidingView style={styles.modalBackdrop} behavior="padding">
-          style={styles.modalBackdrop}
-          behavior="padding"
-        >
           <Pressable style={styles.modalBackdrop} onPress={() => setSaveModalVisible(false)}>
-            <Pressable style={[styles.modalCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
+            <Pressable
+              style={[styles.modalCard, { backgroundColor: theme.card, borderColor: theme.border }]}
+            >
               <Text style={[styles.modalTitle, { color: theme.text }]}>Save repeat profile</Text>
               <Text style={[styles.modalHint, { color: theme.textFaint }]}>
-                {`${REPEAT_OPTIONS.find((o) => o.value === value)?.label.replace('No Repeat', 'None')}, every ${interval} ${unitLabel(value)}${interval > 1 ? 's' : ''}`}
+                {`${REPEAT_OPTIONS.find(o => o.value === value)?.label.replace('No Repeat', 'None')}, every ${interval} ${unitLabel(value)}${interval > 1 ? 's' : ''}`}
-                {isDaysBased(value) && days.length > 0 ? ` · ${weekdaysInDisplayOrder(days).map((d) => WEEKDAY_LABELS[d]).join(' ')}` : ''}
+                {isDaysBased(value) && days.length > 0
+                  ? ` · ${weekdaysInDisplayOrder(days)
+                      .map(d => WEEKDAY_LABELS[d])
+                      .join(' ')}`
+                  : ''}
               </Text>
               <TextInput
-                style={[styles.modalInput, { backgroundColor: theme.cardAlt, borderColor: theme.borderStrong, color: theme.text }]}
+                style={[
+                  styles.modalInput,
+                  {
+                    backgroundColor: theme.cardAlt,
+                    borderColor: theme.borderStrong,
+                    color: theme.text,
+                  },
+                ]}
                 value={profileName}
                 onChangeText={setProfileName}
                 placeholder="Profile name (e.g. Every weekday)"
@@ -290,15 +374,25 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
                   onPress={() => setSaveModalVisible(false)}
                   activeOpacity={0.8}
                 >
-                  <Text style={[styles.modalButtonText, { color: theme.textSecondary }]}>Cancel</Text>
+                  <Text style={[styles.modalButtonText, { color: theme.textSecondary }]}>
+                    Cancel
+                  </Text>
                 </TouchableOpacity>
                 <TouchableOpacity
-                  style={[styles.modalButton, styles.modalButtonPrimary, { backgroundColor: theme.accent }]}
+                  style={[
+                    styles.modalButton,
+                    styles.modalButtonPrimary,
+                    { backgroundColor: theme.accent },
+                  ]}
                   onPress={handleSaveProfile}
                   disabled={!profileName.trim()}
                   activeOpacity={0.8}
                 >
-                  <Text style={[styles.modalButtonText, { color: theme.accentText, fontWeight: '600' }]}>Save</Text>
+                  <Text
+                    style={[styles.modalButtonText, { color: theme.accentText, fontWeight: '600' }]}
+                  >
+                    Save
+                  </Text>
                 </TouchableOpacity>
               </View>
             </Pressable>

carry-your-live/src/components/ServerUrlModal.tsx

@@ -1,5 +1,13 @@
 import React, { useState } from 'react';
-import { Modal, View, Text, StyleSheet, TextInput, TouchableOpacity, KeyboardAvoidingView } from 'react-native';
+import {
+  Modal,
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+} from 'react-native';
 import { useSettings } from '@/theme';
 import { DEFAULT_API_BASE_URL } from '@/services/auth';
 import Svg, { Path } from 'react-native-svg';
@@ -33,16 +41,22 @@ export function ServerUrlModal({ visible, onClose }: ServerUrlModalProps) {
 
   return (
     <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
-      <KeyboardAvoidingView
+      <KeyboardAvoidingView style={styles.overlay} behavior="padding">
-        style={styles.overlay}
-        behavior="padding"
-      >
         <View style={[styles.sheet, { backgroundColor: theme.sheetBg }]}>
           <View style={styles.header}>
             <Text style={[styles.title, { color: theme.text }]}>Backend URL</Text>
-            <TouchableOpacity onPress={onClose} style={styles.closeButton} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <TouchableOpacity
+              onPress={onClose}
+              style={styles.closeButton}
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            >
               <Svg width={18} height={18} viewBox="0 0 24 24">
-                <Path d="M18 6L6 18M6 6l12 12" stroke={theme.textSecondary} strokeWidth={2.2} strokeLinecap="round" />
+                <Path
+                  d="M18 6L6 18M6 6l12 12"
+                  stroke={theme.textSecondary}
+                  strokeWidth={2.2}
+                  strokeLinecap="round"
+                />
               </Svg>
             </TouchableOpacity>
           </View>
@@ -51,7 +65,11 @@ export function ServerUrlModal({ visible, onClose }: ServerUrlModalProps) {
           <TextInput
             style={[
               styles.input,
-              { backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text },
+              {
+                backgroundColor: theme.inputBg,
+                borderColor: theme.borderStrong,
+                color: theme.text,
+              },
             ]}
             placeholder={DEFAULT_API_BASE_URL}
             placeholderTextColor={theme.textMuted}
@@ -75,7 +93,11 @@ export function ServerUrlModal({ visible, onClose }: ServerUrlModalProps) {
               <Text style={[styles.cancelButtonText, { color: theme.textSecondary }]}>Cancel</Text>
             </TouchableOpacity>
             <TouchableOpacity
-              style={[styles.saveButton, { backgroundColor: theme.accent }, !isValid && styles.saveButtonDisabled]}
+              style={[
+                styles.saveButton,
+                { backgroundColor: theme.accent },
+                !isValid && styles.saveButtonDisabled,
+              ]}
               onPress={handleSave}
               disabled={!isValid}
               activeOpacity={0.8}

carry-your-live/src/components/SubtaskItem.tsx

@@ -46,7 +46,7 @@ export const SubtaskItem = React.memo(function SubtaskItem({
   const hasChildren = subtask.subtasks && subtask.subtasks.length > 0;
   const hovered = hoveredId === subtask.id;
   const effectiveColor = subtask.categoryId
-    ? categoryColorResolver?.(subtask.categoryId) ?? categoryColor
+    ? (categoryColorResolver?.(subtask.categoryId) ?? categoryColor)
     : categoryColor;
 
   const handleExpand = () => setExpanded(!expanded);
@@ -59,7 +59,7 @@ export const SubtaskItem = React.memo(function SubtaskItem({
 
   return (
     <View>
-      <View ref={(ref) => registerRef?.(subtask.id, subtask.taskId, ref)}>
+      <View ref={ref => registerRef?.(subtask.id, subtask.taskId, ref)}>
         <TaskItem
           task={subtask}
           indented
@@ -86,7 +86,7 @@ export const SubtaskItem = React.memo(function SubtaskItem({
           {subtask.subtasks
             .slice()
             .sort((a, b) => a.order - b.order)
-            .map((child) => (
+            .map(child => (
               <SubtaskItem
                 key={child.id}
                 subtask={child}

carry-your-live/src/components/SubtasksSection.tsx

@@ -48,7 +48,9 @@ export function SubtasksSection({ control }: SubtasksSectionProps) {
                 <Text style={[styles.label, { color: theme.text }]}>Subtasks</Text>
                 {items.length > 0 && (
                   <View style={[styles.badge, { backgroundColor: theme.accentSoft }]}>
-                    <Text style={[styles.badgeText, { color: theme.accentStrong }]}>{items.length}</Text>
+                    <Text style={[styles.badgeText, { color: theme.accentStrong }]}>
+                      {items.length}
+                    </Text>
                   </View>
                 )}
               </View>
@@ -92,20 +94,30 @@ export function SubtasksSection({ control }: SubtasksSectionProps) {
                     key={item._key ?? `subtask-${index}`}
                     index={index}
                     value={item.title}
-                    onChange={(value) => updateSubtask(index, value)}
+                    onChange={value => updateSubtask(index, value)}
                     onRemove={() => removeSubtask(index)}
                   />
                 ))}
               </View>
               <TouchableOpacity
-                style={[styles.addButton, { backgroundColor: theme.accentSoft, borderColor: theme.accentBorder }]}
+                style={[
+                  styles.addButton,
+                  { backgroundColor: theme.accentSoft, borderColor: theme.accentBorder },
+                ]}
                 onPress={addSubtask}
                 activeOpacity={0.8}
               >
                 <Svg width={16} height={16} viewBox="0 0 24 24">
-                  <Path d="M12 5v14M5 12h14" stroke={theme.accent} strokeWidth={2} strokeLinecap="round" />
+                  <Path
+                    d="M12 5v14M5 12h14"
+                    stroke={theme.accent}
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                  />
                 </Svg>
-                <Text style={[styles.addButtonText, { color: theme.accentStrong }]}>Add Subtask</Text>
+                <Text style={[styles.addButtonText, { color: theme.accentStrong }]}>
+                  Add Subtask
+                </Text>
               </TouchableOpacity>
             </Animated.View>
           </View>
@@ -150,7 +162,12 @@ function SubtaskItem({ index, value, onChange, onRemove }: SubtaskItemProps) {
       />
       <TouchableOpacity style={styles.removeButton} onPress={onRemove} activeOpacity={0.7}>
         <Svg width={20} height={20} viewBox="0 0 24 24">
-          <Path d="M18 6L6 18M6 6l12 12" stroke={theme.textSecondary} strokeWidth={2.2} strokeLinecap="round" />
+          <Path
+            d="M18 6L6 18M6 6l12 12"
+            stroke={theme.textSecondary}
+            strokeWidth={2.2}
+            strokeLinecap="round"
+          />
         </Svg>
       </TouchableOpacity>
     </View>

carry-your-live/src/components/SyncModal.tsx

@@ -11,9 +11,18 @@ import {
 } from 'react-native';
 import { useSettings } from '@/theme';
 import { AuthUser, getAuthToken, getAuthUser, login, register, signOutAuth } from '@/services/auth';
-import { runSyncGuarded, startAutoSync, stopAutoSync, getLastSyncTime, SyncResult } from '@/database/sync';
+import {
+  runSyncGuarded,
+  startAutoSync,
+  stopAutoSync,
+  getLastSyncTime,
+  SyncResult,
+} from '@/database/sync';
 import { ForgotPasswordModal } from './ForgotPasswordModal';
-import { registerForPushNotificationsAsync, unregisterForPushNotificationsAsync } from '@/services/pushNotifications';
+import {
+  registerForPushNotificationsAsync,
+  unregisterForPushNotificationsAsync,
+} from '@/services/pushNotifications';
 
 interface SyncModalProps {
   visible: boolean;
@@ -81,9 +90,10 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
     }
     setBusy(true);
     try {
-      const authedUser = mode === 'register'
+      const authedUser =
-        ? await register(username.trim(), password)
+        mode === 'register'
-        : await login(username.trim(), password);
+          ? await register(username.trim(), password)
+          : await login(username.trim(), password);
       setUser(authedUser);
       startAutoSync();
       registerForPushNotificationsAsync().catch(() => {});
@@ -128,10 +138,7 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
 
   return (
     <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
-      <KeyboardAvoidingView
+      <KeyboardAvoidingView style={styles.overlay} behavior="padding">
-        style={styles.overlay}
-        behavior="padding"
-      >
         <TouchableOpacity style={styles.backdrop} activeOpacity={1} onPress={onClose} />
         <View style={[styles.sheet, { backgroundColor: theme.sheetBg }]}>
           <View style={[styles.handle, { backgroundColor: theme.borderStrong }]} />
@@ -159,7 +166,9 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
                 {status === 'syncing' ? (
                   <ActivityIndicator color={theme.accentText} />
                 ) : (
-                  <Text style={[styles.primaryButtonText, { color: theme.accentText }]}>Sync Now</Text>
+                  <Text style={[styles.primaryButtonText, { color: theme.accentText }]}>
+                    Sync Now
+                  </Text>
                 )}
               </TouchableOpacity>
 
@@ -181,7 +190,9 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
                 onPress={handleSignOut}
                 activeOpacity={0.7}
               >
-                <Text style={[styles.secondaryButtonText, { color: theme.dangerStrong }]}>Sign Out</Text>
+                <Text style={[styles.secondaryButtonText, { color: theme.dangerStrong }]}>
+                  Sign Out
+                </Text>
               </TouchableOpacity>
             </View>
           ) : (
@@ -191,13 +202,10 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
               </Text>
 
               <View style={[styles.segmentRow, { backgroundColor: theme.inputBg }]}>
-                {(['login', 'register'] as const).map((m) => (
+                {(['login', 'register'] as const).map(m => (
                   <TouchableOpacity
                     key={m}
-                    style={[
+                    style={[styles.segment, mode === m && { backgroundColor: theme.accent }]}
-                      styles.segment,
-                      mode === m && { backgroundColor: theme.accent },
-                    ]}
                     onPress={() => {
                       setMode(m);
                       setError(null);
@@ -222,7 +230,14 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
                 </Text>
               )}
               <TextInput
-                style={[styles.input, { backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text }]}
+                style={[
+                  styles.input,
+                  {
+                    backgroundColor: theme.inputBg,
+                    borderColor: theme.borderStrong,
+                    color: theme.text,
+                  },
+                ]}
                 placeholder="Username"
                 placeholderTextColor={theme.textMuted}
                 value={username}
@@ -231,7 +246,14 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
                 autoCorrect={false}
               />
               <TextInput
-                style={[styles.input, { backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text }]}
+                style={[
+                  styles.input,
+                  {
+                    backgroundColor: theme.inputBg,
+                    borderColor: theme.borderStrong,
+                    color: theme.text,
+                  },
+                ]}
                 placeholder="Password (min 8 chars)"
                 placeholderTextColor={theme.textMuted}
                 value={password}
@@ -245,11 +267,15 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
                   onPress={() => setShowForgotPassword(true)}
                   activeOpacity={0.7}
                 >
-                  <Text style={[styles.forgotPasswordText, { color: theme.accent }]}>Forgot Password?</Text>
+                  <Text style={[styles.forgotPasswordText, { color: theme.accent }]}>
+                    Forgot Password?
+                  </Text>
                 </TouchableOpacity>
               )}
 
-              {error && <Text style={[styles.errorText, { color: theme.dangerStrong }]}>{error}</Text>}
+              {error && (
+                <Text style={[styles.errorText, { color: theme.dangerStrong }]}>{error}</Text>
+              )}
 
               <TouchableOpacity
                 style={[styles.primaryButton, { backgroundColor: theme.accent }]}
@@ -268,7 +294,10 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
             </View>
           )}
 
-          <ForgotPasswordModal visible={showForgotPassword} onClose={() => setShowForgotPassword(false)} />
+          <ForgotPasswordModal
+            visible={showForgotPassword}
+            onClose={() => setShowForgotPassword(false)}
+          />
 
           <TouchableOpacity
             style={[styles.secondaryButton, { borderColor: theme.borderStrong }]}

carry-your-live/src/components/SyncStatus.tsx

@@ -66,20 +66,37 @@ export default function SyncStatus({ compact = false }: SyncStatusProps) {
       case 'success':
         return (
           <Svg width={16} height={16} viewBox="0 0 24 24">
-            <Path d="M5 12l5 5 9-10" stroke={theme.success} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+            <Path
+              d="M5 12l5 5 9-10"
+              stroke={theme.success}
+              strokeWidth={2.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
           </Svg>
         );
       case 'error':
         return (
           <Svg width={16} height={16} viewBox="0 0 24 24">
             <Circle cx={12} cy={12} r={10} stroke={theme.danger} strokeWidth={2} fill="none" />
-            <Path d="M12 8v4M12 16h.01" stroke={theme.danger} strokeWidth={2} strokeLinecap="round" />
+            <Path
+              d="M12 8v4M12 16h.01"
+              stroke={theme.danger}
+              strokeWidth={2}
+              strokeLinecap="round"
+            />
           </Svg>
         );
       default:
         return (
           <Svg width={16} height={16} viewBox="0 0 24 24">
-            <Path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" stroke={theme.textFaint} strokeWidth={1.8} fill="none" />
+            <Path
+              d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+              stroke={theme.textFaint}
+              strokeWidth={1.8}
+              fill="none"
+            />
             <Path d="M12 22V12" stroke={theme.textFaint} strokeWidth={1.8} strokeLinecap="round" />
           </Svg>
         );
@@ -88,16 +105,25 @@ export default function SyncStatus({ compact = false }: SyncStatusProps) {
 
   const getStatusText = () => {
     switch (status) {
-      case 'syncing': return 'Syncing...';
+      case 'syncing':
-      case 'success': return 'Synced';
+        return 'Syncing...';
-      case 'error': return 'Sync failed';
+      case 'success':
-      default: return lastSync ? `Last sync: ${formatTime(lastSync)}` : 'Not synced';
+        return 'Synced';
+      case 'error':
+        return 'Sync failed';
+      default:
+        return lastSync ? `Last sync: ${formatTime(lastSync)}` : 'Not synced';
     }
   };
 
   if (compact) {
     return (
-      <TouchableOpacity style={[styles.compact, { backgroundColor: theme.sheetBg }]} onPress={handleSync} disabled={status === 'syncing'} activeOpacity={0.7}>
+      <TouchableOpacity
+        style={[styles.compact, { backgroundColor: theme.sheetBg }]}
+        onPress={handleSync}
+        disabled={status === 'syncing'}
+        activeOpacity={0.7}
+      >
         <View style={styles.compactRow}>
           {getStatusIcon()}
           <Text style={[styles.compactText, { color: theme.textMuted }]}>
@@ -116,12 +142,20 @@ export default function SyncStatus({ compact = false }: SyncStatusProps) {
           <Text style={[styles.statusText, { color: theme.text }]}>{getStatusText()}</Text>
         </View>
         <TouchableOpacity
-          style={[styles.syncButton, { backgroundColor: status === 'syncing' ? theme.accentSoft : theme.accent }]}
+          style={[
+            styles.syncButton,
+            { backgroundColor: status === 'syncing' ? theme.accentSoft : theme.accent },
+          ]}
           onPress={handleSync}
           disabled={status === 'syncing'}
           activeOpacity={0.8}
         >
-          <Text style={[styles.syncButtonText, { color: status === 'syncing' ? theme.accent : theme.accentText }]}>
+          <Text
+            style={[
+              styles.syncButtonText,
+              { color: status === 'syncing' ? theme.accent : theme.accentText },
+            ]}
+          >
             {status === 'syncing' ? 'Syncing...' : 'Sync Now'}
           </Text>
         </TouchableOpacity>

carry-your-live/src/components/TabBarIcon.tsx

@@ -56,7 +56,14 @@ export function TabBarIcon({ name, focused, color, size = 24 }: TabBarIconProps)
       )}
       {name === 'gear' && (
         <>
-          <Circle cx={12} cy={12} r={3.5} stroke={color} strokeWidth={focused ? 3.5 : 3} fill="none" />
+          <Circle
+            cx={12}
+            cy={12}
+            r={3.5}
+            stroke={color}
+            strokeWidth={focused ? 3.5 : 3}
+            fill="none"
+          />
           <Path
             d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
             stroke={color}
@@ -76,9 +83,7 @@ export function TabBarIcon({ name, focused, color, size = 24 }: TabBarIconProps)
             strokeLinecap="round"
             strokeLinejoin="round"
           />
-          {focused && (
+          {focused && <Circle cx={4} cy={10} r={2} fill={color} />}
-            <Circle cx={4} cy={10} r={2} fill={color} />
-          )}
         </>
       )}
     </Svg>

carry-your-live/src/components/TaskDeleteModal.tsx

@@ -14,7 +14,15 @@ interface TaskDeleteModalProps {
   onDelete: (scope: TaskDeleteScope) => void;
 }
 
-export function TaskDeleteModal({ visible, taskId, taskTitle, isRepeating, subtask, onClose, onDelete }: TaskDeleteModalProps) {
+export function TaskDeleteModal({
+  visible,
+  taskId,
+  taskTitle,
+  isRepeating,
+  subtask,
+  onClose,
+  onDelete,
+}: TaskDeleteModalProps) {
   const { theme } = useSettings();
   const [counts, setCounts] = useState({ future: 1, all: 1 });
 
@@ -22,11 +30,13 @@ export function TaskDeleteModal({ visible, taskId, taskTitle, isRepeating, subta
     if (!visible || !taskId || subtask) return;
     let mounted = true;
     getSeriesOccurrenceCounts(taskId)
-      .then((c) => {
+      .then(c => {
         if (mounted) setCounts(c);
       })
       .catch(() => {});
-    return () => { mounted = false; };
+    return () => {
+      mounted = false;
+    };
   }, [visible, taskId, subtask]);
 
   const options: { scope: TaskDeleteScope; label: string; hint?: string }[] = subtask
@@ -34,7 +44,11 @@ export function TaskDeleteModal({ visible, taskId, taskTitle, isRepeating, subta
     : [{ scope: 'this', label: 'This task only' }];
 
   if (isRepeating) {
-    options.push({ scope: 'future', label: 'This and future tasks', hint: counts.future > 1 ? `${counts.future} occurrences` : undefined });
+    options.push({
+      scope: 'future',
+      label: 'This and future tasks',
+      hint: counts.future > 1 ? `${counts.future} occurrences` : undefined,
+    });
     options.push({ scope: 'all', label: 'All tasks in series', hint: `${counts.all} occurrences` });
   }
 
@@ -43,10 +57,21 @@ export function TaskDeleteModal({ visible, taskId, taskTitle, isRepeating, subta
       <View style={styles.overlay}>
         <View style={[styles.sheet, { backgroundColor: theme.sheetBg }]}>
           <View style={styles.header}>
-            <Text style={[styles.title, { color: theme.text }]}>{subtask ? 'Delete Subtask' : 'Delete Task'}</Text>
+            <Text style={[styles.title, { color: theme.text }]}>
-            <TouchableOpacity onPress={onClose} style={styles.closeButton} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+              {subtask ? 'Delete Subtask' : 'Delete Task'}
+            </Text>
+            <TouchableOpacity
+              onPress={onClose}
+              style={styles.closeButton}
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            >
               <Svg width={18} height={18} viewBox="0 0 24 24">
-                <Path d="M18 6L6 18M6 6l12 12" stroke={theme.textSecondary} strokeWidth={2.2} strokeLinecap="round" />
+                <Path
+                  d="M18 6L6 18M6 6l12 12"
+                  stroke={theme.textSecondary}
+                  strokeWidth={2.2}
+                  strokeLinecap="round"
+                />
               </Svg>
             </TouchableOpacity>
           </View>
@@ -64,19 +89,26 @@ export function TaskDeleteModal({ visible, taskId, taskTitle, isRepeating, subta
           )}
 
           <View style={styles.actions}>
-            {options.map((option) => (
+            {options.map(option => (
               <TouchableOpacity
                 key={option.scope}
                 style={[styles.actionButton, { borderColor: theme.accentBorder }]}
                 onPress={() => onDelete(option.scope)}
                 activeOpacity={0.7}
               >
-                <Text style={[styles.actionLabel, { color: theme.accentStrong }]}>{option.label}</Text>
+                <Text style={[styles.actionLabel, { color: theme.accentStrong }]}>
-                {option.hint && <Text style={[styles.actionHint, { color: theme.textMuted }]}>{option.hint}</Text>}
+                  {option.label}
+                </Text>
+                {option.hint && (
+                  <Text style={[styles.actionHint, { color: theme.textMuted }]}>{option.hint}</Text>
+                )}
               </TouchableOpacity>
             ))}
             <TouchableOpacity
-              style={[styles.cancelButton, { borderColor: theme.borderStrong, backgroundColor: theme.card }]}
+              style={[
+                styles.cancelButton,
+                { borderColor: theme.borderStrong, backgroundColor: theme.card },
+              ]}
               onPress={onClose}
               activeOpacity={0.7}
             >

carry-your-live/src/components/TaskItem.tsx

@@ -1,6 +1,19 @@
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Animated, Platform, Dimensions } from 'react-native';
+import {
-import { Swipeable, Gesture, GestureDetector, PanGestureHandler } from 'react-native-gesture-handler';
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Animated,
+  Platform,
+  Dimensions,
+} from 'react-native';
+import {
+  Swipeable,
+  Gesture,
+  GestureDetector,
+  PanGestureHandler,
+} from 'react-native-gesture-handler';
 import { TaskData, SubtaskData, Priority, Repeat, Reminder } from '@/types';
 import { PRIORITY_COLORS } from '@/constants';
 import { useSettings, mixHex } from '@/theme';
@@ -46,7 +59,30 @@ interface TaskItemProps {
   categoryColors?: (string | undefined)[];
 }
 
-export const TaskItem = React.memo(function TaskItem({ task, onToggle, onDelete, onPress, onLongPress, onMenuOpen, selected, selectionMode, completedSection, draggable, hovered, onDragStart, onDragUpdate, onDragEnd, onReorderStart, onReorderUpdate, onReorderEnd, expanded, indented, depth = 0, categoryColor, categoryColors }: TaskItemProps) {
+export const TaskItem = React.memo(function TaskItem({
+  task,
+  onToggle,
+  onDelete,
+  onPress,
+  onLongPress,
+  onMenuOpen,
+  selected,
+  selectionMode,
+  completedSection,
+  draggable,
+  hovered,
+  onDragStart,
+  onDragUpdate,
+  onDragEnd,
+  onReorderStart,
+  onReorderUpdate,
+  onReorderEnd,
+  expanded,
+  indented,
+  depth = 0,
+  categoryColor,
+  categoryColors,
+}: TaskItemProps) {
   const { theme, deleteBySwipe } = useSettings();
   const styles = React.useMemo(() => createStyles(theme), [theme]);
   const [opacityAnim] = React.useState(new Animated.Value(task.completed ? 0.5 : 1));
@@ -73,17 +109,17 @@ export const TaskItem = React.memo(function TaskItem({ task, onToggle, onDelete,
         .activateAfterLongPress(400)
         .minDistance(5)
         .runOnJS(true)
-        .onStart((e) => {
+        .onStart(e => {
           setDragging(true);
           setDragStartY(e.absoluteY);
           onReorderStart?.();
         })
-        .onUpdate((e) => {
+        .onUpdate(e => {
           dragTranslateX.setValue(e.translationX);
           dragTranslateY.setValue(e.translationY);
           onReorderUpdate?.(e.absoluteY);
         })
-        .onEnd((e) => {
+        .onEnd(e => {
           onReorderEnd?.(e.absoluteY, e.translationY);
         })
         .onFinalize(() => {
@@ -104,12 +140,12 @@ export const TaskItem = React.memo(function TaskItem({ task, onToggle, onDelete,
           setDragging(true);
           onDragStart?.();
         })
-        .onUpdate((e) => {
+        .onUpdate(e => {
           dragTranslateX.setValue(e.translationX);
           dragTranslateY.setValue(e.translationY);
           onDragUpdate?.(e.absoluteY);
         })
-        .onEnd((e) => {
+        .onEnd(e => {
           onDragEnd?.(e.absoluteY);
         })
         .onFinalize(() => {
@@ -135,7 +171,11 @@ export const TaskItem = React.memo(function TaskItem({ task, onToggle, onDelete,
     endOfToday.setHours(23, 59, 59, 999);
     const hasDueDate = task.dueDate > 0;
     const isOverdue = hasDueDate && !task.completed && task.dueDate < startOfToday.getTime();
-    const isDueToday = hasDueDate && !task.completed && task.dueDate >= startOfToday.getTime() && task.dueDate <= endOfToday.getTime();
+    const isDueToday =
+      hasDueDate &&
+      !task.completed &&
+      task.dueDate >= startOfToday.getTime() &&
+      task.dueDate <= endOfToday.getTime();
     return { hasDueDate, isOverdue, isDueToday };
   }, [task.dueDate, task.completed]);
 
@@ -149,21 +189,39 @@ export const TaskItem = React.memo(function TaskItem({ task, onToggle, onDelete,
   const renderRightActions = (progress: Animated.AnimatedInterpolation<number>) => {
     const translateX = progress.interpolate({ inputRange: [0, 1], outputRange: [80, 0] });
     return (
-      <Animated.View style={[styles.swipeAction, styles.swipeDelete, { transform: [{ translateX }] }]}>
+      <Animated.View
+        style={[styles.swipeAction, styles.swipeDelete, { transform: [{ translateX }] }]}
+      >
         <Svg width={24} height={24} viewBox="0 0 24 24">
-          <Path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" stroke="#FFFFFF" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+          <Path
+            d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"
+            stroke="#FFFFFF"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
         </Svg>
         <Text style={styles.swipeActionText}>Delete</Text>
       </Animated.View>
     );
   };
 
-const renderLeftActions = (progress: Animated.AnimatedInterpolation<number>) => {
+  const renderLeftActions = (progress: Animated.AnimatedInterpolation<number>) => {
     const translateX = progress.interpolate({ inputRange: [0, 1], outputRange: [-80, 0] });
     return (
-      <Animated.View style={[styles.swipeAction, styles.swipeComplete, { transform: [{ translateX }] }]}>
+      <Animated.View
+        style={[styles.swipeAction, styles.swipeComplete, { transform: [{ translateX }] }]}
+      >
         <Svg width={24} height={24} viewBox="0 0 24 24">
-          <Path d="M5 12l5 5 9-10" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+          <Path
+            d="M5 12l5 5 9-10"
+            stroke="#FFFFFF"
+            strokeWidth={2.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
         </Svg>
         <Text style={styles.swipeActionText}>{task.completed ? 'Undo' : 'Done'}</Text>
       </Animated.View>
@@ -188,7 +246,9 @@ const renderLeftActions = (progress: Animated.AnimatedInterpolation<number>) =>
       overshootRight={false}
       overshootLeft={false}
     >
-      <GestureDetector gesture={draggable ? (onReorderStart ? reorderGesture : dragGesture) : Gesture.Native()}>
+      <GestureDetector
+        gesture={draggable ? (onReorderStart ? reorderGesture : dragGesture) : Gesture.Native()}
+      >
         <Animated.View
           style={[
             styles.container,
@@ -206,18 +266,18 @@ const renderLeftActions = (progress: Animated.AnimatedInterpolation<number>) =>
           ]}
           pointerEvents={dragging ? 'none' : 'auto'}
         >
-        <TouchableOpacity
+          <TouchableOpacity
-          style={styles.contentWrapper}
+            style={styles.contentWrapper}
-          onPress={onPress}
+            onPress={onPress}
-          onLongPress={onLongPress}
+            onLongPress={onLongPress}
-          delayLongPress={350}
+            delayLongPress={350}
-          activeOpacity={0.8}
+            activeOpacity={0.8}
-          accessibilityRole={selectionMode ? 'checkbox' : 'button'}
+            accessibilityRole={selectionMode ? 'checkbox' : 'button'}
-          accessibilityLabel={selectionMode ? `Select ${task.title}` : task.title}
+            accessibilityLabel={selectionMode ? `Select ${task.title}` : task.title}
-          accessibilityState={selectionMode ? { checked: selected } : { expanded }}
+            accessibilityState={selectionMode ? { checked: selected } : { expanded }}
-          accessibilityHint={selectionMode ? undefined : 'Expands the task to show subtasks'}
+            accessibilityHint={selectionMode ? undefined : 'Expands the task to show subtasks'}
-        >
+          >
-<View style={styles.content}>
+            <View style={styles.content}>
               <View style={styles.titleRow}>
                 <View style={styles.categoryDotSlot}>
                   {categoryColor && (
@@ -236,10 +296,24 @@ const renderLeftActions = (progress: Animated.AnimatedInterpolation<number>) =>
                     {task.completed ? (
                       <>
                         <Circle cx={12} cy={12} r={10} fill={theme.accent} />
-                        <Path d="M7 12l3 3 7-7" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                        <Path
+                          d="M7 12l3 3 7-7"
+                          stroke="#FFFFFF"
+                          strokeWidth={2.5}
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          fill="none"
+                        />
                       </>
                     ) : (
-                      <Circle cx={12} cy={12} r={10} stroke={isOverdue ? theme.danger : theme.textSecondary} strokeWidth={2.5} fill="none" />
+                      <Circle
+                        cx={12}
+                        cy={12}
+                        r={10}
+                        stroke={isOverdue ? theme.danger : theme.textSecondary}
+                        strokeWidth={2.5}
+                        fill="none"
+                      />
                     )}
                   </Svg>
                 </TouchableOpacity>
@@ -253,90 +327,30 @@ const renderLeftActions = (progress: Animated.AnimatedInterpolation<number>) =>
                 >
                   {task.title}
                 </Animated.Text>
-              {task.priority !== 'none' && (
+                {task.priority !== 'none' && (
-                <View
+                  <View
-                  style={[
+                    style={[
-                    styles.priorityBadge,
+                      styles.priorityBadge,
-                    { backgroundColor: PRIORITY_COLORS[task.priority] },
+                      { backgroundColor: PRIORITY_COLORS[task.priority] },
-                  ]}
+                    ]}
-                >
+                  >
-                  <Text style={styles.priorityText}>
+                    <Text style={styles.priorityText}>{task.priority.charAt(0).toUpperCase()}</Text>
-                    {task.priority.charAt(0).toUpperCase()}
+                  </View>
-                  </Text>
+                )}
-                </View>
+                {task.assigneeId && (
-              )}
+                  <View style={styles.assigneeBadge}>
-              {task.assigneeId && (
+                    <Text style={styles.assigneeText}>
-                <View style={styles.assigneeBadge}>
+                      {task.assigneeId.charAt(0).toUpperCase()}
-                  <Text style={styles.assigneeText}>
+                    </Text>
-                    {task.assigneeId.charAt(0).toUpperCase()}
+                  </View>
-                  </Text>
+                )}
-                </View>
+                {task.repeat && task.repeat !== 'none' && (
-              )}
+                  <View style={styles.repeatIcon}>
-              {task.repeat && task.repeat !== 'none' && (
+                    <Svg width={14} height={14} viewBox="0 0 24 24">
-                <View style={styles.repeatIcon}>
-                  <Svg width={14} height={14} viewBox="0 0 24 24">
-                    <Path
-                      d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3"
-                      stroke={theme.textSecondary}
-                      strokeWidth={2.2}
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      fill="none"
-                    />
-                  </Svg>
-                </View>
-              )}
-              {task.allDay && (
-                <View style={styles.allDayBadge}>
-                  <Svg width={14} height={14} viewBox="0 0 24 24">
-                    <Path
-                      d="M12 2v2M12 20v2M2 12h2M20 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4"
-                      stroke={theme.accent}
-                      strokeWidth={1.8}
-                      strokeLinecap="round"
-                      fill="none"
-                    />
-                    <Circle cx={12} cy={12} r={4} stroke={theme.accent} strokeWidth={1.5} fill="none" />
-                  </Svg>
-                  <Text style={styles.allDayText}>All Day</Text>
-                </View>
-              )}
-              <Animated.View style={[styles.chevron, { transform: [{ rotate }] }]}>
-                <Svg width={16} height={16} viewBox="0 0 24 24">
-                  <Path
-                    d="M6 9l6 6 6-6"
-                    stroke={theme.textSecondary}
-                    strokeWidth={2.5}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    fill="none"
-                  />
-                </Svg>
-              </Animated.View>
-            </View>
-            {hasDueDate && (
-              <View style={styles.dueRow}>
-                <Svg width={14} height={14} viewBox="0 0 24 24">
-                  <Circle cx={12} cy={12} r={10} stroke={theme.textSecondary} strokeWidth={2} fill="none" />
-                  <Path d="M12 6v6l4 2" stroke={theme.textSecondary} strokeWidth={2} strokeLinecap="round" />
-                </Svg>
-                <Animated.Text
-                  style={[
-                    styles.dueText,
-                    { color: theme.textFaint },
-                    isOverdue && styles.dueTextOverdue,
-                    isDueToday && styles.dueTextDueToday,
-                  ]}
-                >
-                  {formattedDueDate}
-                </Animated.Text>
-                {task.reminder && task.reminder !== 'none' && (
-                  <View style={styles.reminderIcon}>
-                    <Svg width={13} height={13} viewBox="0 0 24 24">
                       <Path
-                        d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"
+                        d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3"
                         stroke={theme.textSecondary}
-                        strokeWidth={1.8}
+                        strokeWidth={2.2}
                         strokeLinecap="round"
                         strokeLinejoin="round"
                         fill="none"
@@ -344,26 +358,103 @@ const renderLeftActions = (progress: Animated.AnimatedInterpolation<number>) =>
                     </Svg>
                   </View>
                 )}
+                {task.allDay && (
+                  <View style={styles.allDayBadge}>
+                    <Svg width={14} height={14} viewBox="0 0 24 24">
+                      <Path
+                        d="M12 2v2M12 20v2M2 12h2M20 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4"
+                        stroke={theme.accent}
+                        strokeWidth={1.8}
+                        strokeLinecap="round"
+                        fill="none"
+                      />
+                      <Circle
+                        cx={12}
+                        cy={12}
+                        r={4}
+                        stroke={theme.accent}
+                        strokeWidth={1.5}
+                        fill="none"
+                      />
+                    </Svg>
+                    <Text style={styles.allDayText}>All Day</Text>
+                  </View>
+                )}
+                <Animated.View style={[styles.chevron, { transform: [{ rotate }] }]}>
+                  <Svg width={16} height={16} viewBox="0 0 24 24">
+                    <Path
+                      d="M6 9l6 6 6-6"
+                      stroke={theme.textSecondary}
+                      strokeWidth={2.5}
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      fill="none"
+                    />
+                  </Svg>
+                </Animated.View>
               </View>
-            )}
+              {hasDueDate && (
-          </View>
+                <View style={styles.dueRow}>
-        </TouchableOpacity>
+                  <Svg width={14} height={14} viewBox="0 0 24 24">
+                    <Circle
+                      cx={12}
+                      cy={12}
+                      r={10}
+                      stroke={theme.textSecondary}
+                      strokeWidth={2}
+                      fill="none"
+                    />
+                    <Path
+                      d="M12 6v6l4 2"
+                      stroke={theme.textSecondary}
+                      strokeWidth={2}
+                      strokeLinecap="round"
+                    />
+                  </Svg>
+                  <Animated.Text
+                    style={[
+                      styles.dueText,
+                      { color: theme.textFaint },
+                      isOverdue && styles.dueTextOverdue,
+                      isDueToday && styles.dueTextDueToday,
+                    ]}
+                  >
+                    {formattedDueDate}
+                  </Animated.Text>
+                  {task.reminder && task.reminder !== 'none' && (
+                    <View style={styles.reminderIcon}>
+                      <Svg width={13} height={13} viewBox="0 0 24 24">
+                        <Path
+                          d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"
+                          stroke={theme.textSecondary}
+                          strokeWidth={1.8}
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          fill="none"
+                        />
+                      </Svg>
+                    </View>
+                  )}
+                </View>
+              )}
+            </View>
+          </TouchableOpacity>
 
-        <TouchableOpacity
+          <TouchableOpacity
-          style={styles.menuButton}
+            style={styles.menuButton}
-          onPress={onMenuOpen}
+            onPress={onMenuOpen}
-          activeOpacity={0.7}
+            activeOpacity={0.7}
-          accessibilityRole="button"
+            accessibilityRole="button"
-          accessibilityLabel={`Edit ${task.title}`}
+            accessibilityLabel={`Edit ${task.title}`}
-          accessibilityHint="Opens the task editor"
+            accessibilityHint="Opens the task editor"
-          hitSlop={8}
+            hitSlop={8}
-        >
+          >
-          <Svg width={24} height={24} viewBox="0 0 24 24">
+            <Svg width={24} height={24} viewBox="0 0 24 24">
-            <Circle cx={12} cy={12} r={1.5} fill={theme.textMuted} />
+              <Circle cx={12} cy={12} r={1.5} fill={theme.textMuted} />
-            <Circle cx={12} cy={6} r={1.5} fill={theme.textMuted} />
+              <Circle cx={12} cy={6} r={1.5} fill={theme.textMuted} />
-            <Circle cx={12} cy={18} r={1.5} fill={theme.textMuted} />
+              <Circle cx={12} cy={18} r={1.5} fill={theme.textMuted} />
-          </Svg>
+            </Svg>
-        </TouchableOpacity>
+          </TouchableOpacity>
         </Animated.View>
       </GestureDetector>
     </Swipeable>
@@ -400,204 +491,205 @@ function formatTime12(time: string): string {
   return `${h}:${String(minutes).padStart(2, '0')} ${period}`;
 }
 
-const createStyles = (theme: ThemeColors) => StyleSheet.create({
+const createStyles = (theme: ThemeColors) =>
-  container: {
+  StyleSheet.create({
-    flexDirection: 'row',
+    container: {
-    alignItems: 'center',
+      flexDirection: 'row',
-    paddingHorizontal: 12,
+      alignItems: 'center',
-    paddingVertical: 14,
+      paddingHorizontal: 12,
-    borderRadius: 16,
+      paddingVertical: 14,
-    borderWidth: 1,
+      borderRadius: 16,
-    marginVertical: 4,
+      borderWidth: 1,
-    shadowColor: '#000',
+      marginVertical: 4,
-    shadowOffset: { width: 0, height: 1 },
+      shadowColor: '#000',
-    shadowOpacity: 0.05,
+      shadowOffset: { width: 0, height: 1 },
-    shadowRadius: 6,
+      shadowOpacity: 0.05,
-    elevation: 1,
+      shadowRadius: 6,
-  },
+      elevation: 1,
-  taskCompleted: {
+    },
-    opacity: 0.5,
+    taskCompleted: {
-  },
+      opacity: 0.5,
-  indented: {
+    },
-    marginLeft: 32,
+    indented: {
-    marginBottom: 4,
+      marginLeft: 32,
-  },
+      marginBottom: 4,
-  taskOverdue: {
+    },
-    borderColor: theme.dangerBorder,
+    taskOverdue: {
-  },
+      borderColor: theme.dangerBorder,
-  taskDueToday: {
+    },
-    borderColor: mixHex(theme.info, theme.background, 0.55),
+    taskDueToday: {
-  },
+      borderColor: mixHex(theme.info, theme.background, 0.55),
-  taskSelected: {
+    },
-    shadowColor: '#000',
+    taskSelected: {
-    shadowOpacity: 0.1,
+      shadowColor: '#000',
-    shadowRadius: 6,
+      shadowOpacity: 0.1,
-    elevation: 2,
+      shadowRadius: 6,
-  },
+      elevation: 2,
-  taskHovered: {
+    },
-    borderColor: mixHex(theme.info, theme.background, 0.55),
+    taskHovered: {
-    backgroundColor: mixHex(theme.info, theme.background, 0.85),
+      borderColor: mixHex(theme.info, theme.background, 0.55),
-  },
+      backgroundColor: mixHex(theme.info, theme.background, 0.85),
-  dragLifted: {
+    },
-    zIndex: 100,
+    dragLifted: {
-    elevation: 12,
+      zIndex: 100,
-    shadowColor: '#000',
+      elevation: 12,
-    shadowOpacity: 0.25,
+      shadowColor: '#000',
-    shadowRadius: 12,
+      shadowOpacity: 0.25,
-    shadowOffset: { width: 0, height: 8 },
+      shadowRadius: 12,
-  },
+      shadowOffset: { width: 0, height: 8 },
-  contentWrapper: {
+    },
-    flex: 1,
+    contentWrapper: {
-  },
+      flex: 1,
-  content: {
+    },
-    gap: 12,
+    content: {
-  },
+      gap: 12,
-  titleRow: {
+    },
-    flexDirection: 'row',
+    titleRow: {
-    alignItems: 'center',
+      flexDirection: 'row',
-    justifyContent: 'space-between',
+      alignItems: 'center',
-  },
+      justifyContent: 'space-between',
-  dragHandle: {
+    },
-    width: 28,
+    dragHandle: {
-    height: 28,
+      width: 28,
-    borderRadius: 14,
+      height: 28,
-    alignItems: 'center',
+      borderRadius: 14,
-    justifyContent: 'center',
+      alignItems: 'center',
-    marginRight: 8,
+      justifyContent: 'center',
-  },
+      marginRight: 8,
-  categoryDotSlot: {
+    },
-    width: 28,
+    categoryDotSlot: {
-    height: 28,
+      width: 28,
-    alignItems: 'center',
+      height: 28,
-    justifyContent: 'center',
+      alignItems: 'center',
-    marginRight: 8,
+      justifyContent: 'center',
-  },
+      marginRight: 8,
-  categoryDot: {
+    },
-    width: 12,
+    categoryDot: {
-    height: 12,
+      width: 12,
-    borderRadius: 6,
+      height: 12,
-  },
+      borderRadius: 6,
-  title: {
+    },
-    fontSize: 17,
+    title: {
-    fontWeight: '500',
+      fontSize: 17,
-    flex: 1,
+      fontWeight: '500',
-    marginRight: 16,
+      flex: 1,
-  },
+      marginRight: 16,
-  titleCompleted: {
+    },
-    textDecorationLine: 'line-through',
+    titleCompleted: {
-    color: theme.textMuted,
+      textDecorationLine: 'line-through',
-  },
+      color: theme.textMuted,
-  repeatIcon: {
+    },
-    marginLeft: 8,
+    repeatIcon: {
-    width: 14,
+      marginLeft: 8,
-    height: 14,
+      width: 14,
-    alignItems: 'center',
+      height: 14,
-    justifyContent: 'center',
+      alignItems: 'center',
-  },
+      justifyContent: 'center',
-  chevron: {
+    },
-    marginLeft: 8,
+    chevron: {
-    width: 16,
+      marginLeft: 8,
-    height: 16,
+      width: 16,
-    alignItems: 'center',
+      height: 16,
-    justifyContent: 'center',
+      alignItems: 'center',
-  },
+      justifyContent: 'center',
-  reminderIcon: {
+    },
-    marginLeft: 6,
+    reminderIcon: {
-    width: 13,
+      marginLeft: 6,
-    height: 13,
+      width: 13,
-    alignItems: 'center',
+      height: 13,
-    justifyContent: 'center',
+      alignItems: 'center',
-  },
+      justifyContent: 'center',
-  titleOverdue: {
+    },
-    color: theme.danger,
+    titleOverdue: {
-  },
+      color: theme.danger,
-  priorityBadge: {
+    },
-    paddingHorizontal: 6,
+    priorityBadge: {
-    paddingVertical: 2,
+      paddingHorizontal: 6,
-    borderRadius: 8,
+      paddingVertical: 2,
-    minWidth: 20,
+      borderRadius: 8,
-    alignItems: 'center',
+      minWidth: 20,
-  },
+      alignItems: 'center',
-  priorityText: {
+    },
-    fontSize: 9,
+    priorityText: {
-    fontWeight: '700',
+      fontSize: 9,
-    color: '#FFFFFF',
+      fontWeight: '700',
-  },
+      color: '#FFFFFF',
-  assigneeBadge: {
+    },
-    width: 20,
+    assigneeBadge: {
-    height: 20,
+      width: 20,
-    borderRadius: 10,
+      height: 20,
-    backgroundColor: theme.dangerSoft,
+      borderRadius: 10,
-    alignItems: 'center',
+      backgroundColor: theme.dangerSoft,
-    justifyContent: 'center',
+      alignItems: 'center',
-  },
+      justifyContent: 'center',
-  assigneeText: {
+    },
-    fontSize: 9,
+    assigneeText: {
-    fontWeight: '700',
+      fontSize: 9,
-    color: theme.danger,
+      fontWeight: '700',
-  },
+      color: theme.danger,
-  dueRow: {
+    },
-    flexDirection: 'row',
+    dueRow: {
-    alignItems: 'center',
+      flexDirection: 'row',
-    gap: 8,
+      alignItems: 'center',
-  },
+      gap: 8,
-  dueText: {
+    },
-    fontSize: 13,
+    dueText: {
-  },
+      fontSize: 13,
-  dueTextOverdue: {
+    },
-    color: theme.danger,
+    dueTextOverdue: {
-    fontWeight: '600',
+      color: theme.danger,
-  },
+      fontWeight: '600',
-  dueTextDueToday: {
+    },
-    color: theme.info,
+    dueTextDueToday: {
-    fontWeight: '600',
+      color: theme.info,
-  },
+      fontWeight: '600',
-  menuButton: {
+    },
-    padding: 4,
+    menuButton: {
-    marginLeft: 8,
+      padding: 4,
-  },
+      marginLeft: 8,
-  allDayBadge: {
+    },
-    flexDirection: 'row',
+    allDayBadge: {
-    alignItems: 'center',
+      flexDirection: 'row',
-    gap: 4,
+      alignItems: 'center',
-    marginLeft: 8,
+      gap: 4,
-    paddingHorizontal: 6,
+      marginLeft: 8,
-    paddingVertical: 2,
+      paddingHorizontal: 6,
-    borderRadius: 8,
+      paddingVertical: 2,
-    backgroundColor: mixHex(theme.info, theme.background, 0.85),
+      borderRadius: 8,
-  },
+      backgroundColor: mixHex(theme.info, theme.background, 0.85),
-  allDayText: {
+    },
-    fontSize: 11,
+    allDayText: {
-    fontWeight: '600',
+      fontSize: 11,
-    color: theme.info,
+      fontWeight: '600',
-  },
+      color: theme.info,
-  checkCircle: {
+    },
-    width: 30,
+    checkCircle: {
-    height: 30,
+      width: 30,
-    borderRadius: 15,
+      height: 30,
-    alignItems: 'center',
+      borderRadius: 15,
-    justifyContent: 'center',
+      alignItems: 'center',
-    marginRight: 12,
+      justifyContent: 'center',
-  },
+      marginRight: 12,
-  swipeAction: {
+    },
-    width: 80,
+    swipeAction: {
-    alignItems: 'center',
+      width: 80,
-    justifyContent: 'center',
+      alignItems: 'center',
-    gap: 4,
+      justifyContent: 'center',
-  },
+      gap: 4,
-  swipeDelete: {
+    },
-    backgroundColor: theme.dangerStrong,
+    swipeDelete: {
-    borderTopRightRadius: 16,
+      backgroundColor: theme.dangerStrong,
-    borderBottomRightRadius: 16,
+      borderTopRightRadius: 16,
-  },
+      borderBottomRightRadius: 16,
-  swipeComplete: {
+    },
-    backgroundColor: theme.successStrong,
+    swipeComplete: {
-    borderTopLeftRadius: 16,
+      backgroundColor: theme.successStrong,
-    borderBottomLeftRadius: 16,
+      borderTopLeftRadius: 16,
-  },
+      borderBottomLeftRadius: 16,
-  swipeActionText: {
+    },
-    color: '#FFFFFF',
+    swipeActionText: {
-    fontSize: 12,
+      color: '#FFFFFF',
-    fontWeight: '600',
+      fontSize: 12,
-  },
+      fontWeight: '600',
-});
+    },
+  });

carry-your-live/src/components/TaskList.tsx

@@ -1,5 +1,13 @@
 import React, { useState, useCallback, useMemo, useRef } from 'react';
-import { View, Text, StyleSheet, Animated, RefreshControl, Alert, TouchableOpacity } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  RefreshControl,
+  Alert,
+  TouchableOpacity,
+} from 'react-native';
 import { useTasks } from '@/hooks/useTasks';
 import { useSubtasks } from '@/hooks/useSubtasks';
 import { useCategories } from '@/hooks/useDatabase';
@@ -42,10 +50,18 @@ const DropIndicator = ({ theme }: { theme: any }) => (
   </View>
 );
 
-export function TaskList({ categoryIds = [], showCompleted = false, onSelectionChange }: TaskListProps) {
+export function TaskList({
+  categoryIds = [],
+  showCompleted = false,
+  onSelectionChange,
+}: TaskListProps) {
   const { theme, sortBy, todoAheadDays } = useSettings();
 
-  const { tasks, loading, refresh: refreshTasks } = useTasks(categoryIds, showCompleted ? 'all' : false, todoAheadDays);
+  const {
+    tasks,
+    loading,
+    refresh: refreshTasks,
+  } = useTasks(categoryIds, showCompleted ? 'all' : false, todoAheadDays);
 
   const categories = useCategories();
   const categoryColors = useMemo(() => {
@@ -62,18 +78,30 @@ export function TaskList({ categoryIds = [], showCompleted = false, onSelectionC
   const [hoverTaskId, setHoverTaskId] = useState<string | null>(null);
   const [expandedTasks, setExpandedTasks] = useState<Set<string>>(new Set());
   const { map: subtasksMap, refresh: refreshSubtasks } = useSubtasks();
-  const [dropIndicator, setDropIndicator] = useState<{ targetId: string | null; position: 'above' | 'below' } | null>(null);
+  const [dropIndicator, setDropIndicator] = useState<{
+    targetId: string | null;
+    position: 'above' | 'below';
+  } | null>(null);
   const itemRefs = useRef<Map<string, View>>(new Map());
   const subtaskRefs = useRef<Map<string, { ref: View; parentTaskId: string }>>(new Map());
-  const dragStateRef = useRef<{ taskId: string; positions: Record<string, { top: number; bottom: number }>; subPositions: Record<string, { top: number; bottom: number }> } | null>(null);
+  const dragStateRef = useRef<{
-  const subtaskDragRef = useRef<{ subtaskId: string; parentTaskId: string; positions: Record<string, { top: number; bottom: number }>; subPositions: Record<string, { top: number; bottom: number }> } | null>(null);
+    taskId: string;
-   const {
+    positions: Record<string, { top: number; bottom: number }>;
-      modals,
+    subPositions: Record<string, { top: number; bottom: number }>;
-      openTaskDelete,
+  } | null>(null);
-      openSubtaskDelete,
+  const subtaskDragRef = useRef<{
-      openSubtaskEdit,
+    subtaskId: string;
-      openTaskEdit,
+    parentTaskId: string;
-    } = useTaskModals();
+    parentSubtaskId: string | null;
+    positions: Record<string, { top: number; bottom: number }>;
+    subPositions: Record<string, { top: number; bottom: number }>;
+  } | null>(null);
+  const taskDragRef = useRef<{
+    taskId: string;
+    positions: Record<string, { top: number; bottom: number }>;
+  } | null>(null);
+  const { modals, openTaskDelete, openSubtaskDelete, openSubtaskEdit, openTaskEdit } =
+    useTaskModals();
 
   const registerRef = useCallback((taskId: string, ref: View | null) => {
     if (ref) {
@@ -83,13 +111,16 @@ export function TaskList({ categoryIds = [], showCompleted = false, onSelectionC
     }
   }, []);
 
-  const registerSubtaskRef = useCallback((subtaskId: string, parentTaskId: string, ref: View | null) => {
+  const registerSubtaskRef = useCallback(
-    if (ref) {
+    (subtaskId: string, parentTaskId: string, ref: View | null) => {
-      subtaskRefs.current.set(subtaskId, { ref, parentTaskId });
+      if (ref) {
-    } else {
+        subtaskRefs.current.set(subtaskId, { ref, parentTaskId });
-      subtaskRefs.current.delete(subtaskId);
+      } else {
-    }
+        subtaskRefs.current.delete(subtaskId);
-  }, []);
+      }
+    },
+    []
+  );
 
   const categoryColorResolver = useCallback(
     (categoryId: string | undefined) => (categoryId ? categoryColors.get(categoryId) : undefined),
@@ -100,7 +131,9 @@ export function TaskList({ categoryIds = [], showCompleted = false, onSelectionC
     const sorted = [...tasks];
     switch (sortBy) {
       case 'date':
-        sorted.sort((a, b) => (a.dueDate || Number.MAX_SAFE_INTEGER) - (b.dueDate || Number.MAX_SAFE_INTEGER));
+        sorted.sort(
+          (a, b) => (a.dueDate || Number.MAX_SAFE_INTEGER) - (b.dueDate || Number.MAX_SAFE_INTEGER)
+        );
         break;
       case 'priority':
         sorted.sort((a, b) => PRIORITY_RANK[b.priority] - PRIORITY_RANK[a.priority]);
@@ -145,34 +178,43 @@ export function TaskList({ categoryIds = [], showCompleted = false, onSelectionC
     onSelectionChange?.(false);
   }, [onSelectionChange]);
 
-  const enterSelection = useCallback((taskId: string) => {
+  const enterSelection = useCallback(
-    setSelectionMode(true);
+    (taskId: string) => {
-    setSelectedIds(new Set([taskId]));
+      setSelectionMode(true);
-    onSelectionChange?.(true);
+      setSelectedIds(new Set([taskId]));
-  }, [onSelectionChange]);
+      onSelectionChange?.(true);
+    },
+    [onSelectionChange]
+  );
 
-  const toggleSelect = useCallback((taskId: string) => {
+  const toggleSelect = useCallback(
-    setSelectedIds((prev) => {
+    (taskId: string) => {
-      const next = new Set(prev);
+      setSelectedIds(prev => {
-      if (next.has(taskId)) {
+        const next = new Set(prev);
-        next.delete(taskId);
+        if (next.has(taskId)) {
-      } else {
+          next.delete(taskId);
-        next.add(taskId);
+        } else {
-      }
+          next.add(taskId);
-      if (next.size === 0) {
+        }
-        setSelectionMode(false);
+        if (next.size === 0) {
-        onSelectionChange?.(false);
+          setSelectionMode(false);
-      }
+          onSelectionChange?.(false);
-      return next;
+        }
-    });
+        return next;
-  }, [onSelectionChange]);
+      });
+    },
+    [onSelectionChange]
+  );
 
-  const handleToggle = useCallback(async (taskId: string) => {
+  const handleToggle = useCallback(
-    await confirmAndToggleTaskComplete(taskId, () => refreshTasks());
+    async (taskId: string) => {
-  }, [refreshTasks]);
+      await confirmAndToggleTaskComplete(taskId, () => refreshTasks());
+    },
+    [refreshTasks]
+  );
 
   const toggleExpand = useCallback(async (taskId: string) => {
-    setExpandedTasks((prev) => {
+    setExpandedTasks(prev => {
       const next = new Set(prev);
       if (next.has(taskId)) {
         next.delete(taskId);
@@ -183,24 +225,31 @@ export function TaskList({ categoryIds = [], showCompleted = false, onSelectionC
     });
   }, []);
 
-  const handleSubtaskToggle = useCallback(async (subtaskId: string) => {
+  const handleSubtaskToggle = useCallback(
-    await toggleSubtaskComplete(subtaskId);
+    async (subtaskId: string) => {
-    refreshTasks();
+      await toggleSubtaskComplete(subtaskId);
-    refreshSubtasks();
+      refreshTasks();
-  }, [refreshTasks, refreshSubtasks]);
+      refreshSubtasks();
+    },
+    [refreshTasks, refreshSubtasks]
+  );
 
   const handleBulkDelete = useCallback(() => {
-    Alert.alert(`Delete ${selectedIds.size} task${selectedIds.size > 1 ? 's' : ''}?`, 'This cannot be undone.', [
+    Alert.alert(
-      { text: 'Cancel', style: 'cancel' },
+      `Delete ${selectedIds.size} task${selectedIds.size > 1 ? 's' : ''}?`,
-      {
+      'This cannot be undone.',
-        text: 'Delete',
+      [
-        style: 'destructive',
+        { text: 'Cancel', style: 'cancel' },
-        onPress: async () => {
+        {
-          await Promise.all(Array.from(selectedIds).map(taskId => deleteTask(taskId)));
+          text: 'Delete',
-          exitSelection();
+          style: 'destructive',
+          onPress: async () => {
+            await Promise.all(Array.from(selectedIds).map(taskId => deleteTask(taskId)));
+            exitSelection();
+          },
         },
-      },
+      ]
-    ]);
+    );
   }, [selectedIds, exitSelection]);
 
   const handleBulkComplete = useCallback(async () => {
@@ -211,14 +260,16 @@ export function TaskList({ categoryIds = [], showCompleted = false, onSelectionC
   const measureItems = useCallback(async () => {
     const positions: Record<string, { top: number; bottom: number }> = {};
     const entries = Array.from(itemRefs.current.entries());
-    await Promise.all(entries.map(([id, ref]) => {
+    await Promise.all(
-      return new Promise<void>((resolve) => {
+      entries.map(([id, ref]) => {
-        ref?.measureInWindow((_x, y, _w, h) => {
+        return new Promise<void>(resolve => {
-          positions[id] = { top: y, bottom: y + h };
+          ref?.measureInWindow((_x, y, _w, h) => {
-          resolve();
+            positions[id] = { top: y, bottom: y + h };
+            resolve();
+          });
         });
-      });
+      })
-    }));
+    );
     return positions;
   }, []);
 
@@ -226,48 +277,91 @@ export function TaskList({ categoryIds = [], showCompleted = false, onSelectionC
     const positions = await measureItems();
     const subPositions: Record<string, { top: number; bottom: number }> = {};
     const entries = Array.from(subtaskRefs.current.entries());
-    await Promise.all(entries.map(([id, entry]) => {
+    await Promise.all(
-      return new Promise<void>((resolve) => {
+      entries.map(([id, entry]) => {
-        entry.ref?.measureInWindow((_x, y, _w, h) => {
+        return new Promise<void>(resolve => {
-          subPositions[id] = { top: y, bottom: y + h };
+          entry.ref?.measureInWindow((_x, y, _w, h) => {
-          resolve();
+            subPositions[id] = { top: y, bottom: y + h };
+            resolve();
+          });
         });
-      });
+      })
-    }));
+    );
     return { positions, subPositions };
   }, [measureItems]);
 
-  const findHoverTarget = useCallback((absoluteY: number, draggedId: string, positions: Record<string, { top: number; bottom: number }>, subPositions: Record<string, { top: number; bottom: number }>) => {
+  const findHoverTask = useCallback(
-    const subEntries = Object.entries(subPositions);
+    (
-    for (let i = subEntries.length - 1; i >= 0; i--) {
+      absoluteY: number,
-      const [id, p] = subEntries[i];
+      draggedId: string,
-      if (id === draggedId) continue;
+      positions: Record<string, { top: number; bottom: number }>
-      if (absoluteY >= p.top && absoluteY <= p.bottom) {
+    ) => {
-        return id;
+      const entries = Object.entries(positions);
+      for (let i = entries.length - 1; i >= 0; i--) {
+        const [id, p] = entries[i];
+        if (id === draggedId) continue;
+        if (absoluteY >= p.top && absoluteY <= p.bottom) {
+          return id;
+        }
       }
-    }
+      return null;
-    for (const [id, p] of Object.entries(positions)) {
+    },
-      if (id === draggedId) continue;
+    []
-      if (absoluteY >= p.top && absoluteY <= p.bottom) {
+  );
-        return id;
+
-      }
+  const updateHoverTaskTarget = useCallback((target: string | null) => {
-    }
+    setHoverTaskId(target ?? null);
-    return null;
   }, []);
 
-  const calculateDropPosition = useCallback((absoluteY: number, targetId: string, positions: Record<string, { top: number; bottom: number }>) => {
+  const findHoverTarget = useCallback(
-    const target = positions[targetId];
+    (
-    if (!target) return 'below' as const;
+      absoluteY: number,
-    const middle = (target.top + target.bottom) / 2;
+      draggedId: string,
-    return absoluteY < middle ? 'above' : 'below';
+      positions: Record<string, { top: number; bottom: number }>,
-  }, []);
+      subPositions: Record<string, { top: number; bottom: number }>
+    ) => {
+      const subEntries = Object.entries(subPositions);
+      for (let i = subEntries.length - 1; i >= 0; i--) {
+        const [id, p] = subEntries[i];
+        if (id === draggedId) continue;
+        if (absoluteY >= p.top && absoluteY <= p.bottom) {
+          return id;
+        }
+      }
+      for (const [id, p] of Object.entries(positions)) {
+        if (id === draggedId) continue;
+        if (absoluteY >= p.top && absoluteY <= p.bottom) {
+          return id;
+        }
+      }
+      return null;
+    },
+    []
+  );
 
-  const handleDragStart = useCallback(async (taskId: string) => {
+  const calculateDropPosition = useCallback(
-    dragStateRef.current = { taskId, ...(await measureAll()) };
+    (
-  }, [measureAll]);
+      absoluteY: number,
+      targetId: string,
+      positions: Record<string, { top: number; bottom: number }>
+    ) => {
+      const target = positions[targetId];
+      if (!target) return 'below' as const;
+      const middle = (target.top + target.bottom) / 2;
+      return absoluteY < middle ? 'above' : 'below';
+    },
+    []
+  );
+
+  const handleDragStart = useCallback(
+    async (taskId: string) => {
+      dragStateRef.current = { taskId, ...(await measureAll()) };
+    },
+    [measureAll]
+  );
 
   const refreshDragPositions = useCallback(() => {
-    measureAll().then((m) => {
+    measureAll().then(m => {
       if (subtaskDragRef.current) {
         subtaskDragRef.current = { ...subtaskDragRef.current, ...m };
       } else if (dragStateRef.current) {
@@ -276,118 +370,217 @@ export function TaskList({ categoryIds = [], showCompleted = false, onSelectionC
     });
   }, [measureAll]);
 
-  const updateHoverTarget = useCallback((target: string | null) => {
+  const updateHoverTarget = useCallback(
-    let changed = false;
+    (target: string | null) => {
-    setHoverTaskId((prev) => {
+      let changed = false;
-      if (prev === target) return prev;
+      setHoverTaskId(prev => {
-      changed = true;
+        if (prev === target) return prev;
-      return target;
+        changed = true;
-    });
+        return target;
-    if (changed && target) {
+      });
-      setTimeout(refreshDragPositions, 80);
+      if (changed && target) {
-    }
+        setTimeout(refreshDragPositions, 80);
-  }, [refreshDragPositions]);
-
-  const handleDragUpdate = useCallback((absoluteY: number) => {
-    const state = dragStateRef.current;
-    if (!state) return;
-    const target = findHoverTarget(absoluteY, state.taskId, state.positions, state.subPositions);
-    updateHoverTarget(target);
-    if (target) {
-      if (state.subPositions[target]) {
-        setDropIndicator(null);
-      } else {
-        const position = calculateDropPosition(absoluteY, target, state.positions);
-        setDropIndicator({ targetId: target, position });
       }
-    } else {
+    },
-      // Check if below last item
+    [refreshDragPositions]
-      const positions = state.positions;
+  );
-      const lastItem = Object.values(positions).reduce((max, p) => p.bottom > max.bottom ? p : max, { bottom: 0 });
+
-      if (absoluteY > lastItem.bottom) {
+  const handleDragUpdate = useCallback(
-        setDropIndicator({ targetId: null, position: 'below' });
+    (absoluteY: number) => {
+      const state = dragStateRef.current;
+      if (!state) return;
+      const target = findHoverTarget(absoluteY, state.taskId, state.positions, state.subPositions);
+      updateHoverTarget(target);
+      if (target) {
+        if (state.subPositions[target]) {
+          setDropIndicator(null);
+        } else {
+          const position = calculateDropPosition(absoluteY, target, state.positions);
+          setDropIndicator({ targetId: target, position });
+        }
       } else {
-        setDropIndicator(null);
+        // Check if below last item
+        const positions = state.positions;
+        const lastItem = Object.values(positions).reduce(
+          (max, p) => (p.bottom > max.bottom ? p : max),
+          { bottom: 0 }
+        );
+        if (absoluteY > lastItem.bottom) {
+          setDropIndicator({ targetId: null, position: 'below' });
+        } else {
+          setDropIndicator(null);
+        }
       }
-    }
+    },
-  }, [findHoverTarget, calculateDropPosition, updateHoverTarget]);
+    [findHoverTarget, calculateDropPosition, updateHoverTarget]
+  );
 
-  const handleDragEnd = useCallback((absoluteY: number) => {
+  const handleDragEnd = useCallback(
-    const state = dragStateRef.current;
+    (absoluteY: number) => {
-    dragStateRef.current = null;
+      const state = dragStateRef.current;
-    setHoverTaskId(null);
+      dragStateRef.current = null;
-    setDropIndicator(null);
+      setHoverTaskId(null);
-    if (!state) return;
+      setDropIndicator(null);
+      if (!state) return;
 
-    const target = findHoverTarget(absoluteY, state.taskId, state.positions, state.subPositions);
+      const target = findHoverTarget(absoluteY, state.taskId, state.positions, state.subPositions);
-    if (target) {
+      if (target) {
-      if (state.subPositions[target]) {
+        if (state.subPositions[target]) {
-        const parentTaskId = subtaskRefs.current.get(target)?.parentTaskId ?? state.taskId;
+          const parentTaskId = subtaskRefs.current.get(target)?.parentTaskId ?? state.taskId;
-        (async () => {
+          (async () => {
-          await convertTaskToSubtask(state.taskId, parentTaskId, target);
+            await convertTaskToSubtask(state.taskId, parentTaskId, target);
-        })();
+          })();
+        } else {
+          (async () => {
+            await convertTaskToSubtask(state.taskId, target);
+          })();
+        }
+      }
+    },
+    [findHoverTarget]
+  );
+
+  const handleSubtaskDragStart = useCallback(
+    async (subtaskId: string, parentTaskId: string, parentSubtaskId: string | null = null) => {
+      subtaskDragRef.current = {
+        subtaskId,
+        parentTaskId,
+        parentSubtaskId,
+        ...(await measureAll()),
+      };
+    },
+    [measureAll]
+  );
+
+  const handleSubtaskDragUpdate = useCallback(
+    (absoluteY: number) => {
+      const state = subtaskDragRef.current;
+      if (!state) return;
+      const target = findHoverTarget(
+        absoluteY,
+        state.subtaskId,
+        state.positions,
+        state.subPositions
+      );
+      updateHoverTarget(target);
+      if (target) {
+        if (state.subPositions[target]) {
+          setDropIndicator(null);
+        } else {
+          const position = calculateDropPosition(absoluteY, target, state.positions);
+          setDropIndicator({ targetId: target, position });
+        }
       } else {
-        (async () => {
+        const positions = state.positions;
-          await convertTaskToSubtask(state.taskId, target);
+        const lastItem = Object.values(positions).reduce(
-        })();
+          (max, p) => (p.bottom > max.bottom ? p : max),
+          { bottom: 0 }
+        );
+        if (absoluteY > lastItem.bottom) {
+          setDropIndicator({ targetId: null, position: 'below' });
+        } else {
+          setDropIndicator(null);
+        }
       }
-    }
+    },
-  }, [findHoverTarget]);
+    [findHoverTarget, calculateDropPosition, updateHoverTarget]
+  );
 
-  const handleSubtaskDragStart = useCallback(async (subtaskId: string, parentTaskId: string, parentSubtaskId?: string) => {
+  const handleSubtaskDragEnd = useCallback(
-    subtaskDragRef.current = { subtaskId, parentTaskId, parentSubtaskId, ...(await measureAll()) };
+    async (absoluteY: number) => {
-  }, [measureAll]);
+      const state = subtaskDragRef.current;
+      subtaskDragRef.current = null;
+      setHoverTaskId(null);
+      setDropIndicator(null);
+      if (!state) return;
 
-  const handleSubtaskDragUpdate = useCallback((absoluteY: number) => {
+      const target = findHoverTarget(
-    const state = subtaskDragRef.current;
+        absoluteY,
-    if (!state) return;
+        state.subtaskId,
-    const target = findHoverTarget(absoluteY, state.subtaskId, state.positions, state.subPositions);
+        state.positions,
-    updateHoverTarget(target);
+        state.subPositions
-    if (target) {
+      );
-      if (state.subPositions[target]) {
+      if (target === state.subtaskId) return;
-        setDropIndicator(null);
+
+      // Only allow dropping on tasks (not subtasks) to match task behavior
+      // Check if target exists in main task positions, not subtask positions
+      const isTaskTarget = state.positions != null && target != null && target in state.positions;
+      if (target && isTaskTarget) {
+        // Move subtask to target task - makes it a subtask of that task
+        // If no target or target is a subtask: do nothing (matches task behavior)
+        await moveSubtaskToTask(state.subtaskId, target);
+      }
+    },
+    [findHoverTarget, moveSubtaskToTask]
+  );
+
+  const handleTaskDragStart = useCallback(
+    async (taskId: string) => {
+      const positions = (await measureItems()) as Record<string, { top: number; bottom: number }>;
+      taskDragRef.current = { taskId, positions };
+    },
+    [measureItems]
+  );
+
+  const handleTaskDragUpdate = useCallback(
+    (absoluteY: number) => {
+      const state = taskDragRef.current;
+      if (!state) return;
+      const target = findHoverTask(absoluteY, state.taskId, state.positions);
+      updateHoverTaskTarget(target);
+      if (target) {
+        setDropIndicator({ targetId: target, position: 'below' });
       } else {
-        const position = calculateDropPosition(absoluteY, target, state.positions);
+        const lastItem = Object.values(state.positions).reduce(
-        setDropIndicator({ targetId: target, position });
+          (max, p) => (p.bottom > max.bottom ? p : max),
+          { bottom: 0 }
+        );
+        if (absoluteY > lastItem.bottom) {
+          setDropIndicator({ targetId: null, position: 'below' });
+        } else {
+          setDropIndicator(null);
+        }
       }
-    } else {
+    },
-      const positions = state.positions;
+    [findHoverTask, updateHoverTaskTarget]
-      const lastItem = Object.values(positions).reduce((max, p) => p.bottom > max.bottom ? p : max, { bottom: 0 });
+  );
-      if (absoluteY > lastItem.bottom) {
+
-        setDropIndicator({ targetId: null, position: 'below' });
+  const handleTaskDragEnd = useCallback(
+    async (absoluteY: number) => {
+      const state = taskDragRef.current;
+      taskDragRef.current = null;
+      setHoverTaskId(null);
+      setDropIndicator(null);
+      if (!state) return;
+
+      const target = findHoverTask(absoluteY, state.taskId, state.positions);
+      if (target === state.taskId) return;
+
+      // Set drop indicator based on target position
+      if (target) {
+        setDropIndicator({ targetId: target, position: 'below' });
       } else {
-        setDropIndicator(null);
+        const lastItem = Object.values(state.positions).reduce(
+          (max, p) => (p.bottom > max.bottom ? p : max),
+          { bottom: 0 }
+        );
+        if (absoluteY > lastItem.bottom) {
+          setDropIndicator({ targetId: null, position: 'below' });
+        }
       }
-    }
+    },
-  }, [findHoverTarget, calculateDropPosition, updateHoverTarget]);
+    [findHoverTask]
-
+  );
-const handleSubtaskDragEnd = useCallback(async (absoluteY: number) => {
-    const state = subtaskDragRef.current;
-    subtaskDragRef.current = null;
-    setHoverTaskId(null);
-    setDropIndicator(null);
-    if (!state) return;
-
-    const target = findHoverTarget(absoluteY, state.subtaskId, state.positions, state.subPositions);
-    if (target === state.subtaskId) return;
-
-    // Only allow dropping on tasks (not subtasks) to match task behavior
-    // Check if target exists in main task positions, not subtask positions
-    const isTaskTarget = state.positions && target in state.positions;
-    if (target && isTaskTarget) {
-      // Move subtask to target task - makes it a subtask of that task
-      // If no target or target is a subtask: do nothing (matches task behavior)
-      await moveSubtaskToTask(state.subtaskId, target);
-    }
-  }, [findHoverTarget, moveSubtaskToTask]);
 
   const renderItem = useCallback(
     ({ item, index }: { item: Task; index: number }) => {
       const isExpanded = expandedTasks.has(item.id);
       const itemSubtasks = subtasksMap.get(item.id) ?? [];
-      const showDropAbove = dropIndicator?.targetId === item.id && dropIndicator?.position === 'above';
+      const showDropAbove =
-      const showDropBelow = dropIndicator?.targetId === item.id && dropIndicator?.position === 'below';
+        dropIndicator?.targetId === item.id && dropIndicator?.position === 'above';
-      const tagColors = parseTaskTags(item.tags, item.categoryId).map((id) => categoryColors.get(id));
+      const showDropBelow =
+        dropIndicator?.targetId === item.id && dropIndicator?.position === 'below';
+      const tagColors = parseTaskTags(item.tags, item.categoryId).map(id => categoryColors.get(id));
       return (
         <View>
           {showDropAbove && <DropIndicator theme={theme} />}
@@ -406,10 +599,10 @@ const handleSubtaskDragEnd = useCallback(async (absoluteY: number) => {
             onExpand={toggleExpand}
             onSelect={toggleSelect}
             onEnterSelection={enterSelection}
-            onMenuOpen={(task) => openTaskEdit(task.id)}
+            onMenuOpen={task => openTaskEdit(task.id)}
             onSubtaskToggle={handleSubtaskToggle}
             onSubtaskDelete={openSubtaskDelete}
-            onSubtaskMenuOpen={(subtask) => openSubtaskEdit(subtask.id)}
+            onSubtaskMenuOpen={subtask => openSubtaskEdit(subtask.id)}
             onDragStart={handleDragStart}
             onDragUpdate={handleDragUpdate}
             onDragEnd={handleDragEnd}
@@ -463,7 +656,9 @@ const handleSubtaskDragEnd = useCallback(async (absoluteY: number) => {
     return (
       <View style={styles.emptyState}>
         <Text style={[styles.emptyText, { color: theme.textSecondary }]}>No tasks yet</Text>
-        <Text style={[styles.emptySubtext, { color: theme.textMuted }]}>Tap + to add your first task</Text>
+        <Text style={[styles.emptySubtext, { color: theme.textMuted }]}>
+          Tap + to add your first task
+        </Text>
       </View>
     );
   }, [sortedTasks.length, theme.textSecondary, theme.textMuted]);
@@ -485,9 +680,16 @@ const handleSubtaskDragEnd = useCallback(async (absoluteY: number) => {
     <View style={styles.container}>
       <Animated.FlatList
         data={sortedTasks}
-        keyExtractor={(item) => item.id}
+        keyExtractor={item => item.id}
         renderItem={renderItem}
-        extraData={{ expandedTasks, subtasksMap, selectedIds, selectionMode, hoverTaskId, dropIndicator }}
+        extraData={{
+          expandedTasks,
+          subtasksMap,
+          selectedIds,
+          selectionMode,
+          hoverTaskId,
+          dropIndicator,
+        }}
         ItemSeparatorComponent={MemoSeparator}
         ListHeaderComponent={listHeader}
         ListFooterComponent={listFooter}
@@ -506,16 +708,36 @@ const handleSubtaskDragEnd = useCallback(async (absoluteY: number) => {
       {modals(() => {})}
 
       {selectionMode && (
-        <View style={[styles.selectionBar, { backgroundColor: theme.sheetBg, borderTopColor: theme.border }]}>
+        <View
-          <TouchableOpacity onPress={exitSelection} style={styles.selectionCancel} activeOpacity={0.7}>
+          style={[
+            styles.selectionBar,
+            { backgroundColor: theme.sheetBg, borderTopColor: theme.border },
+          ]}
+        >
+          <TouchableOpacity
+            onPress={exitSelection}
+            style={styles.selectionCancel}
+            activeOpacity={0.7}
+          >
             <Svg width={20} height={20} viewBox="0 0 24 24">
-              <Path d="M18 6L6 18M6 6l12 12" stroke={theme.textSecondary} strokeWidth={2.2} strokeLinecap="round" />
+              <Path
+                d="M18 6L6 18M6 6l12 12"
+                stroke={theme.textSecondary}
+                strokeWidth={2.2}
+                strokeLinecap="round"
+              />
             </Svg>
             <Text style={[styles.selectionCancelText, { color: theme.textFaint }]}>Cancel</Text>
           </TouchableOpacity>
-          <Text style={[styles.selectionCount, { color: theme.text }]}>{selectedIds.size} selected</Text>
+          <Text style={[styles.selectionCount, { color: theme.text }]}>
+            {selectedIds.size} selected
+          </Text>
           <View style={styles.selectionActions}>
-            <SelectionButton label="Complete" color={theme.successStrong} onPress={handleBulkComplete} />
+            <SelectionButton
+              label="Complete"
+              color={theme.successStrong}
+              onPress={handleBulkComplete}
+            />
             <SelectionButton label="Delete" color={theme.dangerStrong} onPress={handleBulkDelete} />
           </View>
         </View>
@@ -524,7 +746,15 @@ const handleSubtaskDragEnd = useCallback(async (absoluteY: number) => {
   );
 }
 
-const SelectionButton = React.memo(function SelectionButton({ label, color, onPress }: { label: string; color: string; onPress: () => void }) {
+const SelectionButton = React.memo(function SelectionButton({
+  label,
+  color,
+  onPress,
+}: {
+  label: string;
+  color: string;
+  onPress: () => void;
+}) {
   return (
     <TouchableOpacity
       style={[styles.selectionButton, { backgroundColor: color }]}
@@ -608,10 +838,7 @@ const TaskRow = React.memo(function TaskRow({
     [subtasks]
   );
   return (
-    <View
+    <View ref={ref => registerRef(task.id, ref)} style={styles.dragContainer}>
-      ref={(ref) => registerRef(task.id, ref)}
-      style={styles.dragContainer}
-    >
       <TaskItem
         task={task as unknown as TaskData}
         onToggle={() => onToggle(task.id)}
@@ -635,19 +862,19 @@ const TaskRow = React.memo(function TaskRow({
       />
       {expanded && subtasks.length > 0 && (
         <View style={styles.subtaskList}>
-          {sortedSubtasks.map((sub) => (
+          {sortedSubtasks.map(sub => (
-<SubtaskItem
+            <SubtaskItem
-                key={sub.id}
+              key={sub.id}
-                subtask={sub}
+              subtask={sub}
-                hoveredId={hoverTaskId}
+              hoveredId={hoverTaskId}
-                registerRef={registerSubtaskRef}
+              registerRef={registerSubtaskRef}
-                onToggle={(sub) => onSubtaskToggle(sub.id, task.id)}
+              onToggle={sub => onSubtaskToggle(sub.id, task.id)}
               onDelete={() => onSubtaskDelete(sub)}
               onMenuOpen={() => onSubtaskMenuOpen(sub)}
               selected={selectedIds.has(sub.id)}
               selectionMode={selectionMode}
               draggable
-              onDragStart={(sub) => onSubtaskDragStart(sub.id, task.id)}
+              onDragStart={sub => onSubtaskDragStart(sub.id, task.id)}
               onDragUpdate={onSubtaskDragUpdate}
               onDragEnd={onSubtaskDragEnd}
               categoryColor={categoryColor}
@@ -656,8 +883,8 @@ const TaskRow = React.memo(function TaskRow({
           ))}
         </View>
       )}
-     </View>
+    </View>
-    );
+  );
 });
 
 const styles = StyleSheet.create({
@@ -691,8 +918,7 @@ const styles = StyleSheet.create({
     paddingTop: 4,
     marginBottom: 4,
   },
-  dragContainer: {
+  dragContainer: {},
-  },
   dropIndicatorContainer: {
     height: 8,
     justifyContent: 'center',

carry-your-live/src/components/TaskNameInput.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, StyleSheet, TextInput , TextInputProps } from 'react-native';
+import { View, Text, StyleSheet, TextInput, TextInputProps } from 'react-native';
 import { useSettings, type ThemeColors } from '@/theme';
 
 interface TaskNameInputProps extends TextInputProps {
@@ -35,37 +35,38 @@ export function TaskNameInput({ error, ...props }: TaskNameInputProps) {
   );
 }
 
-const createStyles = (theme: ThemeColors) => StyleSheet.create({
+const createStyles = (theme: ThemeColors) =>
-  container: {
+  StyleSheet.create({
-    gap: 5,
+    container: {
-  },
+      gap: 5,
-  labelRow: {
+    },
-    flexDirection: 'row',
+    labelRow: {
-    alignItems: 'center',
+      flexDirection: 'row',
-  },
+      alignItems: 'center',
-  label: {
+    },
-    fontSize: 13,
+    label: {
-    fontWeight: '600',
+      fontSize: 13,
-  },
+      fontWeight: '600',
-  required: {
+    },
-    color: theme.dangerStrong,
+    required: {
-    fontSize: 13,
+      color: theme.dangerStrong,
-    fontWeight: '600',
+      fontSize: 13,
-  },
+      fontWeight: '600',
-  input: {
+    },
-    height: 48,
+    input: {
-    paddingHorizontal: 14,
+      height: 48,
-    borderRadius: 10,
+      paddingHorizontal: 14,
-    borderWidth: 1,
+      borderRadius: 10,
-    fontSize: 15,
+      borderWidth: 1,
-  },
+      fontSize: 15,
-  inputError: {
+    },
-    borderColor: theme.dangerStrong,
+    inputError: {
-    borderWidth: 1.5,
+      borderColor: theme.dangerStrong,
-  },
+      borderWidth: 1.5,
-  errorText: {
+    },
-    fontSize: 11,
+    errorText: {
-    color: theme.dangerStrong,
+      fontSize: 11,
-    marginLeft: 4,
+      color: theme.dangerStrong,
-  },
+      marginLeft: 4,
-});
+    },
+  });

carry-your-live/src/components/TaskOverflowMenu.tsx

@@ -49,19 +49,45 @@ export function TaskOverflowMenu({
     {
       key: 'edit',
       label: 'Edit',
-      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17v3z" stroke={theme.text} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" /></Svg>,
+      icon: (
+        <Svg width={20} height={20} viewBox="0 0 24 24">
+          <Path
+            d="M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17v3z"
+            stroke={theme.text}
+            strokeWidth={2.2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        </Svg>
+      ),
       onPress: onEdit,
     },
     {
       key: 'complete',
       label: task.completed ? 'Mark Incomplete' : 'Mark Complete',
-      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M5 12l5 5 9-10" stroke={theme.text} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" /></Svg>,
+      icon: (
+        <Svg width={20} height={20} viewBox="0 0 24 24">
+          <Path
+            d="M5 12l5 5 9-10"
+            stroke={theme.text}
+            strokeWidth={2.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        </Svg>
+      ),
       onPress: onToggleComplete,
     },
     {
       key: 'duplicate',
       label: 'Duplicate',
-      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M8 8h12v12H8zM4 16V4h12" stroke={theme.text} strokeWidth={2.2} fill="none" /></Svg>,
+      icon: (
+        <Svg width={20} height={20} viewBox="0 0 24 24">
+          <Path d="M8 8h12v12H8zM4 16V4h12" stroke={theme.text} strokeWidth={2.2} fill="none" />
+        </Svg>
+      ),
       onPress: onDuplicate,
     },
   ];
@@ -70,7 +96,11 @@ export function TaskOverflowMenu({
     actions.push({
       key: 'category',
       label: 'Change Tags',
-      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Circle2 /></Svg>,
+      icon: (
+        <Svg width={20} height={20} viewBox="0 0 24 24">
+          <Circle2 />
+        </Svg>
+      ),
       onPress: onChangeCategory ?? (() => {}),
     });
   }
@@ -79,23 +109,49 @@ export function TaskOverflowMenu({
     {
       key: 'priority',
       label: 'Change Priority',
-      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M5 3v18M5 5h14l-3 4 3 4H5" stroke={theme.text} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" /></Svg>,
+      icon: (
+        <Svg width={20} height={20} viewBox="0 0 24 24">
+          <Path
+            d="M5 3v18M5 5h14l-3 4 3 4H5"
+            stroke={theme.text}
+            strokeWidth={2.2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        </Svg>
+      ),
       onPress: onChangePriority,
     },
     {
       key: 'delete',
       label: 'Delete',
       destructive: true,
-      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" stroke={theme.danger} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" /></Svg>,
+      icon: (
+        <Svg width={20} height={20} viewBox="0 0 24 24">
+          <Path
+            d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"
+            stroke={theme.danger}
+            strokeWidth={2.2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        </Svg>
+      ),
       onPress: onDelete,
-    },
+    }
   );
 
   if (subtask && onAddSubtask) {
     actions.push({
       key: 'addSubtask',
       label: 'Add Subtask',
-      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M12 5v14M5 12h14" stroke={theme.text} strokeWidth={2.5} strokeLinecap="round" /></Svg>,
+      icon: (
+        <Svg width={20} height={20} viewBox="0 0 24 24">
+          <Path d="M12 5v14M5 12h14" stroke={theme.text} strokeWidth={2.5} strokeLinecap="round" />
+        </Svg>
+      ),
       onPress: onAddSubtask,
     });
   }
@@ -112,7 +168,7 @@ export function TaskOverflowMenu({
           <Text style={[styles.title, { color: theme.text }]} numberOfLines={1}>
             {task.title}
           </Text>
-          {actions.map((action) => (
+          {actions.map(action => (
             <TouchableOpacity
               key={action.key}
               style={[styles.action, { borderColor: theme.border }]}
@@ -125,7 +181,12 @@ export function TaskOverflowMenu({
               accessibilityLabel={`${action.label}${action.destructive ? ' (dangerous)' : ''}`}
             >
               {action.icon}
-              <Text style={[styles.actionText, action.destructive ? styles.destructiveText : { color: theme.textSecondary }]}>
+              <Text
+                style={[
+                  styles.actionText,
+                  action.destructive ? styles.destructiveText : { color: theme.textSecondary },
+                ]}
+              >
                 {action.label}
               </Text>
             </TouchableOpacity>
@@ -140,54 +201,60 @@ function Circle2() {
   const { theme } = useSettings();
   return (
     <Svg width={20} height={20} viewBox="0 0 24 24">
-      <Path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z" stroke={theme.text} strokeWidth={2.2} fill="none" />
+      <Path
+        d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"
+        stroke={theme.text}
+        strokeWidth={2.2}
+        fill="none"
+      />
       <Path d="M12 2a10 10 0 0 1 0 20z" fill={theme.text} opacity={0.35} />
     </Svg>
   );
 }
 
-const createStyles = (theme: ThemeColors) => StyleSheet.create({
+const createStyles = (theme: ThemeColors) =>
-  overlay: {
+  StyleSheet.create({
-    flex: 1,
+    overlay: {
-    justifyContent: 'flex-end',
+      flex: 1,
-  },
+      justifyContent: 'flex-end',
-  sheet: {
+    },
-    borderTopLeftRadius: 24,
+    sheet: {
-    borderTopRightRadius: 24,
+      borderTopLeftRadius: 24,
-    paddingTop: 8,
+      borderTopRightRadius: 24,
-    paddingHorizontal: 16,
+      paddingTop: 8,
-    paddingBottom: 32,
+      paddingHorizontal: 16,
-  },
+      paddingBottom: 32,
-  handle: {
+    },
-    width: 40,
+    handle: {
-    height: 4,
+      width: 40,
-    borderRadius: 2,
+      height: 4,
-    alignSelf: 'center',
+      borderRadius: 2,
-    marginBottom: 12,
+      alignSelf: 'center',
-  },
+      marginBottom: 12,
-  title: {
+    },
-    fontSize: 14,
+    title: {
-    fontWeight: '600',
+      fontSize: 14,
-    textAlign: 'center',
+      fontWeight: '600',
-    marginBottom: 16,
+      textAlign: 'center',
-    opacity: 0.8,
+      marginBottom: 16,
-  },
+      opacity: 0.8,
-  action: {
+    },
-    flexDirection: 'row',
+    action: {
-    alignItems: 'center',
+      flexDirection: 'row',
-    gap: 12,
+      alignItems: 'center',
-    paddingVertical: 14,
+      gap: 12,
-    paddingHorizontal: 16,
+      paddingVertical: 14,
-    borderRadius: 12,
+      paddingHorizontal: 16,
-    borderWidth: 1,
+      borderRadius: 12,
-    marginBottom: 8,
+      borderWidth: 1,
-  },
+      marginBottom: 8,
-  actionText: {
+    },
-    fontSize: 15,
+    actionText: {
-    fontWeight: '500',
+      fontSize: 15,
-  },
+      fontWeight: '500',
-  destructiveText: {
+    },
-    color: theme.dangerStrong,
+    destructiveText: {
-    fontWeight: '600',
+      color: theme.dangerStrong,
-  },
+      fontWeight: '600',
-});
+    },
+  });