Merge pull request 'pipe' (#24) from dev into main

Reviewed-on: #24

.gitea/workflows/build-apk.yml

@@ -56,6 +56,7 @@ jobs:
       - 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 \
@@ -63,8 +64,9 @@ jobs:
             -dname "CN=Android Debug,O=Android,C=US"
 
       - name: Build release APK
-        working-directory: carry-your-live/android
+        run: |
-        run: ./gradlew assembleRelease
+          cd carry-your-live/android
+          ./gradlew assembleRelease
 
       - name: Upload APK
         uses: actions/upload-artifact@v4

.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

@@ -10,6 +10,7 @@ permissions:
 
 jobs:
   release:
+    needs: build-apk
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -17,6 +18,12 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Download APK artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: carry-your-live-release
+          path: .
+
       - name: Compute next version
         id: version
         run: |
@@ -54,3 +61,12 @@ jobs:
           name: ${{ steps.version.outputs.next }}
           body: ${{ steps.changelog.outputs.body }}
           generate_release_notes: false
+
+      - name: Upload APK to release
+        uses: actions/upload-release-asset@v1
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          file: ./carry-your-live/android/app/build/outputs/release/app-release.apk
+          asset_name: carry-your-live-release.apk
+          asset_type: application/vnd.android.package-archive
+          asset_title: Carry Your Live Release

.opencode/architekt.md

@@ -0,0 +1,28 @@
+# Architekt Agent
+
+## Role
+System architecture design, technical strategy, and scalability planning.
+
+## Responsibilities
+- High-level system design
+- Technology stack selection
+- Performance optimization
+- Architecture documentation
+- Trade-off analysis
+
+## Key Metrics
+- System scalability
+- 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

.opencode/config.json

@@ -0,0 +1,13 @@
+{
+  "agents": {
+    "manager": ".opencode/manager.md",
+    "architekt": ".opencode/architekt.md",
+    "software_engineer": ".opencode/software_engineer.md",
+    "hardware_engineer": ".opencode/hardware_engineer.md",
+    "tester": ".opencode/tester.md",
+    "docs": ".opencode/docs.md",
+    "deployment": ".opencode/deployment.md",
+    "vla": ".opencode/vla.md"
+  },
+  "subagent_depth": 999999
+}

.opencode/deployment.md

@@ -0,0 +1,17 @@
+# Deployment Agent
+
+## Role
+CI/CD, infrastructure, and release management.
+
+## Responsibilities
+- CI/CD pipeline management
+- Infrastructure as code
+- Release orchestration
+- Environment management
+- Monitoring and alerting
+
+## Key Metrics
+- Deployment frequency
+- Lead time for changes
+- Mean time to recovery
+- Change success rate

.opencode/docs.md

@@ -0,0 +1,17 @@
+# Docs Agent
+
+## Role
+Technical documentation, API docs, and knowledge management.
+
+## Responsibilities
+- API documentation
+- User guides
+- Architecture docs
+- Change logs
+- Knowledge base maintenance
+
+## Key Metrics
+- Documentation completeness
+- Update frequency
+- User satisfaction
+- Searchability

.opencode/hardware_engineer.md

@@ -0,0 +1,17 @@
+# Hardware Engineer Agent
+
+## Role
+Hardware integration, device management, and embedded systems.
+
+## Responsibilities
+- Hardware selection and integration
+- Device driver development
+- Embedded firmware
+- Prototyping and testing
+- Hardware-software interface
+
+## Key Metrics
+- Hardware compatibility rate
+- Power consumption
+- Latency measurements
+- Component reliability

.opencode/manager.md

@@ -0,0 +1,17 @@
+# Manager Agent
+
+## Role
+Project management, task coordination, prioritization, and team oversight.
+
+## Responsibilities
+- Task decomposition and assignment
+- Progress tracking and status reporting
+- Risk identification and mitigation
+- Resource allocation
+- Stakeholder communication
+
+## Key Metrics
+- Sprint velocity
+- Task completion rate
+- Blockers resolved
+- Timeline adherence

.opencode/project-summary.md

@@ -0,0 +1,98 @@
+# Carry Your Live - Project Summary
+
+## Overview
+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.
+
+## Core Features
+- **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
+
+## Tech Stack
+| Layer | Technology |
+|-------|------------|
+| Framework | Expo (React Native) |
+| Language | TypeScript |
+| Navigation | Expo Router (file-based) |
+| Database | WatermelonDB + SQLite |
+| State | WatermelonDB (reactive queries, no Redux needed) |
+| Forms | React Hook Form + Zod validation |
+| UI Components | React Native Paper + Custom SVG icons |
+| Animations | React Native Reanimated |
+| Date/Time | @react-native-community/datetimepicker + date-fns |
+| Build | Gradle (local APK) |
+| CI/CD | Gitea Actions |
+
+## Project Structure
+```
+carry-your-live/
+├ app/
+│   ├── _layout.tsx              # Root layout + DatabaseProvider
+│   ├── (tabs)/
+│   │   ├── _layout.tsx          # Bottom tab navigator
+│   │   ├── index.tsx            # Tasks screen
+│   │   ├── calendar.tsx         # Calendar screen
+│   │   └── settings.tsx         # Settings screen
+│   └── add-task.tsx             # Add Task screen
+├ src/
+│   ├── components/              # Reusable UI components
+│   ├── database/
+│   │   ├── schema.ts            # WatermelonDB schema
+│   │   ├── index.ts             # Database instance + collections
+│   │   └── sync.ts              # Custom API sync adapter
+│   ├── models/
+│   │   ├── Task.ts
+│   │   ├── Category.ts
+│   │   └── Subtask.ts
+│   ├── hooks/
+│   │   ├── useDatabase.tsx      # Database context & providers
+│   │   └── useTasks.tsx         # Task queries with reactive state
+│   ├── constants/
+│   │   └── index.ts             # Categories, priorities, colors
+│   └── types/
+│       └── index.ts             # TypeScript interfaces
+```
+
+## Data Models
+- **Task**: id, title, description, categoryId, priority, completed, dueDate, dueTime, createdAt, updatedAt, subtasks
+- **Category**: id, name, color, order
+- **Subtask**: id, taskId, title, completed, order, createdAt, updatedAt
+
+## Default Categories
+| Name | Color | Order |
+|------|-------|-------|
+| Work | #E53935 (Red) | 0 |
+| Personal | #43A047 (Green) | 1 |
+| School | #1E88E5 (Blue) | 2 |
+| Shopping | #FB8C00 (Orange) | 3 |
+| Health | #8E24AA (Purple) | 4 |
+| Finance | #FDD835 (Yellow) | 5 |
+
+## Priority Colors
+| Priority | Color |
+|----------|-------|
+| None | #9E9E9E |
+| Low | #43A047 |
+| Medium | #FB8C00 |
+| High | #E53935 |
+| Critical | #B71C1C |
+
+## Sync API
+Custom API at `http://localhost:3000/api` (configurable in `src/database/sync.ts`):
+- **Pull**: GET /sync?since={timestamp} - returns categories, tasks, subtasks, timestamp
+- **Push**: POST /sync/push - body with changes { categories, tasks, subtasks } + lastPulledAt
+
+## Getting Started
+```bash
+npm install
+npx expo start
+# Platform-specific:
+npx expo start --ios
+npx expo start --android
+npx expo start --web
+```
+
+## Build Commands
+- `cd android && ./gradlew assembleDebug` - Debug APK
+- `cd android && ./gradlew assembleRelease` - Release APK
+- `npm run desktop` - Electron desktop app

.opencode/software_engineer.md

@@ -0,0 +1,17 @@
+# Software Engineer Agent
+
+## Role
+Code implementation, feature development, and software quality.
+
+## Responsibilities
+- Feature implementation
+- Code reviews
+- Bug fixing
+- Refactoring
+- Unit testing
+
+## Key Metrics
+- Code quality score
+- Test coverage
+- Pull request throughput
+- Bug resolution time

.opencode/tester.md

@@ -0,0 +1,17 @@
+# Tester Agent
+
+## Role
+Quality assurance, test automation, and test strategy.
+
+## Responsibilities
+- Test case design
+- Automated test execution
+- Regression testing
+- Performance testing
+- Test coverage analysis
+
+## Key Metrics
+- Test pass rate
+- Defect detection rate
+- Test execution time
+- Bug leakage

.opencode/vla.md

@@ -0,0 +1,17 @@
+# VLA Agent
+
+## Role
+Vision-Language-Action models and multimodal understanding.
+
+## Responsibilities
+- VLA model development
+- Multimodal perception
+- Action prediction
+- Policy learning
+- Sim-to-real transfer
+
+## Key Metrics
+- Task success rate
+- Sample efficiency
+- Generalization ability
+- Simulation-to-real transfer rate

README.md

@@ -2,6 +2,15 @@
 
 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.
 
+## 📝 Recent Fixes
+
+- **ListItem component**: Fixed empty component - now properly renders list items with title, subtitle, icons, and swipe actions
+- **Subtask drag-and-drop**: Added `parentSubtaskId` type support for proper subtask reparenting
+- **Task drag sorting**: Added task drag-and-drop reordering functionality with visual drop indicators
+- **iCal import**: Fixed import functionality - replaced invalid `splice()` with proper `create()` calls and fixed date type handling
+- **Settings context**: Added `accentOpacity` and `setAccentOpacity` to the Settings context
+- **Tag inheritance**: Subtasks no longer automatically inherit parent task tags when converting tasks to subtasks
+
 ## Features
 
 ### Core Functionality

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,39 @@
+pluginManagement {
+  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/(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';
@@ -12,29 +12,30 @@ export default function TabLayout() {
 
   return (
     <Tabs
-      screenOptions={{
+screenOptions={{
         tabBarActiveTintColor: theme.accent,
         tabBarInactiveTintColor: theme.textSecondary,
         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 },
@@ -48,13 +49,13 @@ export default function TabLayout() {
               backgroundColor: theme.tabBarBg,
               paddingBottom: Math.max(props.insets.bottom, 8),
               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) => {
               const focused = props.navigation.getState().index === props.navigation.getState().routes.indexOf(route);
               return (
@@ -69,6 +70,12 @@ export default function TabLayout() {
                   accessibilityRole="button"
                   accessibilityLabel={route.name === 'index' ? 'ToDo' : route.name.charAt(0).toUpperCase() + route.name.slice(1)}
                   accessibilityState={{ selected: focused }}
+                >
+                <Animated.View
+                  style={[
+                    styles.rippleContainer,
+                    { opacity: focused ? 1 : 0.5 },
+                  ]}
                 >
                   <TabBarIcon
                     name={route.name === 'index' ? 'checklist' : route.name === 'calendar' ? 'calendar' : route.name === 'stats' ? 'stats' : 'gear'}
@@ -76,6 +83,7 @@ export default function TabLayout() {
                     color={focused ? theme.accent : theme.textSecondary}
                     size={24}
                   />
+                </Animated.View>
                 </TouchableOpacity>
               );
             })}
@@ -103,22 +111,26 @@ 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: {
-    shadowColor: '#000',
+    backgroundColor: theme.accentSoft,
-    shadowOffset: { width: 0, height: 2 },
+  },
-    shadowOpacity: 0.1,
+  rippleContainer: {
-    shadowRadius: 8,
+    width: 44,
-    elevation: 4,
+    height: 44,
+    borderRadius: 22,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
   },
 });

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

@@ -218,7 +218,22 @@ export default function CalendarScreen() {
 
   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}>
@@ -609,6 +624,9 @@ const createStyles = (theme: ThemeColors) => StyleSheet.create({
   emptySubtext: {
     fontSize: 13,
   },
+  backButton: {
+    padding: 8,
+  },
   eventCard: {
     marginHorizontal: 16,
     marginTop: 6,

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

@@ -10,7 +10,7 @@ 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 } from '@/theme';
 import { useCategories } from '@/hooks/useDatabase';
 import { getAuthUser, getAuthToken } from '@/services/auth';
 import { checkForUpdates, getCurrentAppVersion } from '@/services/updates';
@@ -24,7 +24,7 @@ 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 } = useSettings();
   const categories = useCategories();
   const [picker, setPicker] = useState<null | 'category' | 'sort' | 'reminder' | 'todoAhead'>(null);
   const [reminderTagPicker, setReminderTagPicker] = useState<Category | null>(null);
@@ -35,18 +35,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 +63,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) {
@@ -83,6 +98,8 @@ export default function SettingsScreen() {
 
   useFocusEffect(
     useCallback(() => {
+      refreshSyncStatus();
+      checkForUpdatesOnLoad();
       const sub = BackHandler.addEventListener('hardwareBackPress', () => {
         const target = getLastVisitedTab();
         if (target && target !== 'settings') {
@@ -91,7 +108,7 @@ export default function SettingsScreen() {
         return true;
       });
       return () => sub.remove();
-    }, [router])
+    }, [refreshSyncStatus, router])
   );
 
   const defaultCategory = categories.find((c) => c.id === defaultCategoryId);
@@ -301,6 +318,10 @@ export default function SettingsScreen() {
           onPress={handleCheckUpdates}
           showChevron
         />
+        <ListItem
+          title="Last checked"
+          subtitle={lastUpdateCheck ?? 'Never'}
+        />
         <ListItem
           title="Version"
           subtitle={getCurrentAppVersion()}
@@ -393,18 +414,18 @@ export default function SettingsScreen() {
                 </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>
               </TouchableOpacity>
               <TouchableOpacity
                 style={[styles.accentModalButton, styles.accentModalButtonPrimary, { backgroundColor: theme.accent }]}
-                onPress={() => { setAccentColor(draftAccent); setCustomAccentVisible(false); }}
+                onPress={() => { setAccentColor(draftAccent); setAccentOpacity(draftAccentOpacity); setCustomAccentVisible(false); }}
                 activeOpacity={0.8}
               >
                 <Text style={[styles.accentModalButtonText, { color: theme.accentText }]}>Apply</Text>

carry-your-live/app/_layout.tsx

@@ -57,6 +57,28 @@ function RootNavigator() {
     Linking.getInitialURL().then(handleUrl).catch(() => {});
     const subscription = Linking.addEventListener('url', ({ url }) => handleUrl(url));
 
+useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        const router = useRouter();
+        router.back();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  useEffect(() => {
+    const unsubscribe = Linking.addEventListener('url', ({ url }) => {
+      if (!url || !url.includes('://quick-add')) return;
+      router.replace('/(tabs)');
+      requestQuickAddFocus();
+    });
+
+    return () => unsubscribe();
+  }, []);
+
     return () => {
       subscription.remove();
       removeNotificationSubscription(responseListener);
@@ -65,7 +87,7 @@ function RootNavigator() {
 
   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/src/components/AnalogClock.tsx

@@ -49,9 +49,9 @@ export function AnalogClock({ value, is24Hour = false, onChange }: AnalogClockPr
       let hour: number;
       if (is24Hour) {
         const inner = distance < INNER_NUM_RADIUS + 14;
-        hour = inner ? base + 12 : (base === 0 ? 12 : base);
+        hour = inner ? base + 12 : base === 0 ? 12 : base;
       } else {
-        hour = isPM ? base + 12 : (base === 0 ? 0 : base);
+        hour = isPM ? base + 12 : base === 0 ? 0 : base;
       }
       emit(hour, minutes);
       setMode('minute');
@@ -135,23 +135,24 @@ export function AnalogClock({ value, is24Hour = false, onChange }: AnalogClockPr
         );
       });
 
-  const minuteDots = mode === 'minute'
+  const minuteDots =
-    ? Array.from({ length: 12 }, (_, i) => {
+    mode === 'minute'
-        const angle = (i * 30 * Math.PI) / 180;
+      ? Array.from({ length: 12 }, (_, i) => {
-        const x = CENTER + RADIUS * 0.82 * Math.sin(angle);
+          const angle = (i * 30 * Math.PI) / 180;
-        const y = CENTER - RADIUS * 0.82 * Math.cos(angle);
+          const x = CENTER + RADIUS * 0.82 * Math.sin(angle);
-        const active = Math.round(minutes / 5) % 12 === i;
+          const y = CENTER - RADIUS * 0.82 * Math.cos(angle);
-        return (
+          const active = Math.round(minutes / 5) % 12 === i;
-          <Circle
+          return (
-            key={`min-dot-${i}`}
+            <Circle
-            cx={x}
+              key={`min-dot-${i}`}
-            cy={y}
+              cx={x}
-            r={active ? 5 : 3}
+              cy={y}
-            fill={active ? theme.accent : theme.accentBorder}
+              r={active ? 5 : 3}
-          />
+              fill={active ? theme.accent : theme.accentBorder}
-        );
+            />
-      })
+          );
-    : null;
+        })
+      : null;
 
   return (
     <View style={styles.container}>
@@ -181,7 +182,7 @@ export function AnalogClock({ value, is24Hour = false, onChange }: AnalogClockPr
         </TouchableOpacity>
         {!is24Hour && (
           <View style={styles.periodGroup}>
-            {(['AM', 'PM'] as const).map((period) => {
+            {(['AM', 'PM'] as const).map(period => {
               const active = isPM === (period === 'PM');
               return (
                 <TouchableOpacity
@@ -215,15 +216,15 @@ export function AnalogClock({ value, is24Hour = false, onChange }: AnalogClockPr
         style={styles.clockSurface}
         onStartShouldSetResponder={() => true}
         onMoveShouldSetResponder={() => true}
-        onResponderGrant={(e) => {
+        onResponderGrant={e => {
           movedRef.current = false;
           onLocation(e, false);
         }}
-        onResponderMove={(e) => {
+        onResponderMove={e => {
           movedRef.current = true;
           onLocation(e, true);
         }}
-        onResponderRelease={(e) => {
+        onResponderRelease={e => {
           if (!movedRef.current) {
             onLocation(e, false);
           }

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

@@ -1,5 +1,15 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Modal, FlatList, ActivityIndicator, TextInput, KeyboardAvoidingView } from 'react-native';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  FlatList,
+  ActivityIndicator,
+  TextInput,
+  KeyboardAvoidingView,
+} from 'react-native';
 import { useSettings } from '@/theme';
 import { useFriends } from '@/hooks/useFriends';
 
@@ -82,19 +92,14 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
         <Text style={[styles.selectorIcon, { color: theme.accentStrong }]}>👤</Text>
         <View style={styles.selectorContent}>
           <Text style={[styles.selectorLabel, { color: theme.textMuted }]}>Assignee</Text>
-          <Text
+          <Text style={[styles.selectorValue, { color: value ? theme.text : theme.textMuted }]}>
-            style={[
-              styles.selectorValue,
-              { color: value ? theme.text : theme.textMuted },
-            ]}
-          >
             {selectedFriend ? selectedFriend.username : 'Unassigned'}
           </Text>
         </View>
         {value && !disabled && (
           <TouchableOpacity
             style={styles.clearButton}
-            onPress={(e) => {
+            onPress={e => {
               e.stopPropagation();
               handleClear();
             }}
@@ -105,7 +110,12 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
         )}
       </TouchableOpacity>
 
-      <Modal visible={showModal} transparent animationType="fade" onRequestClose={() => setShowModal(false)}>
+      <Modal
+        visible={showModal}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setShowModal(false)}
+      >
         <KeyboardAvoidingView
           style={[styles.modalOverlay, { backgroundColor: 'rgba(0,0,0,0.5)' }]}
           behavior="padding"
@@ -113,7 +123,10 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
           <View style={[styles.modalSheet, { backgroundColor: theme.sheetBg }]}>
             <View style={styles.modalHeader}>
               <Text style={[styles.modalTitle, { color: theme.text }]}>Assign Task</Text>
-              <TouchableOpacity onPress={() => setShowModal(false)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+              <TouchableOpacity
+                onPress={() => setShowModal(false)}
+                hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+              >
                 <Text style={[styles.closeText, { color: theme.textMuted }]}>✕</Text>
               </TouchableOpacity>
             </View>
@@ -122,7 +135,10 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
               <TouchableOpacity
                 style={[
                   styles.optionRow,
-                  { backgroundColor: selectedFriend ? theme.accentSoft : 'transparent', borderColor: selectedFriend ? theme.accent : 'transparent' },
+                  {
+                    backgroundColor: selectedFriend ? theme.accentSoft : 'transparent',
+                    borderColor: selectedFriend ? theme.accent : 'transparent',
+                  },
                 ]}
                 onPress={() => handleClear()}
               >
@@ -143,7 +159,9 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
                   <ActivityIndicator color={theme.accent} size="large" />
                 </View>
               ) : friends.length === 0 ? (
-                <Text style={[styles.emptyText, { color: theme.textFaint }]}>No friends yet. Add friends to assign tasks.</Text>
+                <Text style={[styles.emptyText, { color: theme.textFaint }]}>
+                  No friends yet. Add friends to assign tasks.
+                </Text>
               ) : (
                 <FlatList
                   data={friends}
@@ -152,14 +170,19 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
                     <TouchableOpacity
                       style={[
                         styles.optionRow,
-                        { backgroundColor: value === item.id ? theme.accentSoft : 'transparent', borderColor: value === item.id ? theme.accent : 'transparent' },
+                        {
+                          backgroundColor: value === item.id ? theme.accentSoft : 'transparent',
+                          borderColor: value === item.id ? theme.accent : 'transparent',
+                        },
                       ]}
                       onPress={() => handleSelectFriend(item.id)}
                     >
                       <View style={styles.optionIcon}>
                         <Text style={styles.optionIconText}>👤</Text>
                       </View>
-                      <Text style={[styles.optionText, { color: theme.text }]}>{item.username}</Text>
+                      <Text style={[styles.optionText, { color: theme.text }]}>
+                        {item.username}
+                      </Text>
                       {value === item.id && (
                         <Text style={[styles.checkmark, { color: theme.accentStrong }]}>✓</Text>
                       )}
@@ -172,7 +195,14 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
             <View style={styles.modalSection}>
               <View style={styles.searchContainer}>
                 <TextInput
-                  style={[styles.searchInput, { backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text }]}
+                  style={[
+                    styles.searchInput,
+                    {
+                      backgroundColor: theme.inputBg,
+                      borderColor: theme.borderStrong,
+                      color: theme.text,
+                    },
+                  ]}
                   placeholder="Search users by username"
                   placeholderTextColor={theme.textMuted}
                   value={searchQuery}
@@ -197,15 +227,21 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
                       <View style={styles.optionIcon}>
                         <Text style={styles.optionIconText}>➕</Text>
                       </View>
-                      <Text style={[styles.optionText, { color: theme.text }]}>{item.username}</Text>
+                      <Text style={[styles.optionText, { color: theme.text }]}>
-                      <Text style={[styles.optionSubtext, { color: theme.textMuted }]}>Add as friend & assign</Text>
+                        {item.username}
+                      </Text>
+                      <Text style={[styles.optionSubtext, { color: theme.textMuted }]}>
+                        Add as friend & assign
+                      </Text>
                     </TouchableOpacity>
                   )}
                 />
               ) : searchQuery.length >= 2 && searchResults.length === 0 && !searching ? (
                 <Text style={[styles.emptyText, { color: theme.textFaint }]}>No users found</Text>
               ) : searchQuery.length < 2 ? (
-                <Text style={[styles.emptyText, { color: theme.textFaint }]}>Type at least 2 characters to search</Text>
+                <Text style={[styles.emptyText, { color: theme.textFaint }]}>
+                  Type at least 2 characters to search
+                </Text>
               ) : null}
             </View>
           </View>

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

@@ -1,5 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform, Pressable, useWindowDimensions } from 'react-native';
+import {
+  Modal,
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  useWindowDimensions,
+} from 'react-native';
 import Category from '@/models/Category';
 import { useSettings } from '@/theme';
 import { CATEGORY_COLORS } from '@/constants';
@@ -15,7 +27,12 @@ interface CategoryEditorModalProps {
   onClose: () => void;
 }
 
-export function CategoryEditorModal({ visible, category, categoryCount, onClose }: CategoryEditorModalProps) {
+export function CategoryEditorModal({
+  visible,
+  category,
+  categoryCount,
+  onClose,
+}: CategoryEditorModalProps) {
   const { theme } = useSettings();
   const [name, setName] = useState('');
   const [color, setColor] = useState(CATEGORY_COLORS[0]);
@@ -64,15 +81,8 @@ export function CategoryEditorModal({ visible, category, categoryCount, onClose
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         keyboardVerticalOffset={0}
       >
-        <Pressable
+        <Pressable style={styles.overlay} onPress={onClose} accessibilityRole="none">
-          style={styles.overlay}
+          <Pressable style={[styles.sheet, { backgroundColor: theme.sheetBg }]} onPress={() => {}}>
-          onPress={onClose}
-          accessibilityRole="none"
-        >
-          <Pressable
-            style={[styles.sheet, { backgroundColor: theme.sheetBg }]}
-            onPress={() => {}}
-          >
             <ScrollView
               showsVerticalScrollIndicator={false}
               keyboardShouldPersistTaps="handled"
@@ -82,10 +92,21 @@ export function CategoryEditorModal({ visible, category, categoryCount, onClose
                 <Text style={[styles.title, { color: theme.text }]}>
                   {category ? 'Edit Tag' : 'New Tag'}
                 </Text>
-                <TouchableOpacity onPress={onClose} style={styles.closeButton} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} accessibilityRole="button" accessibilityLabel="Close tag editor">
+                <TouchableOpacity
+                  onPress={onClose}
+                  style={styles.closeButton}
+                  hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+                  accessibilityRole="button"
+                  accessibilityLabel="Close tag editor"
+                >
                   <Svg width={22} height={22} viewBox="0 0 24 24">
                     <Circle cx={12} cy={12} r={10} fill={theme.cardAlt} />
-                    <Path d="M18 6L6 18M6 6l12 12" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" />
+                    <Path
+                      d="M18 6L6 18M6 6l12 12"
+                      stroke={theme.textSecondary}
+                      strokeWidth={2.5}
+                      strokeLinecap="round"
+                    />
                   </Svg>
                 </TouchableOpacity>
               </View>
@@ -94,7 +115,11 @@ export function CategoryEditorModal({ visible, category, categoryCount, onClose
               <TextInput
                 style={[
                   styles.input,
-                  { backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text },
+                  {
+                    backgroundColor: theme.inputBg,
+                    borderColor: theme.borderStrong,
+                    color: theme.text,
+                  },
                 ]}
                 placeholder="Tag name"
                 placeholderTextColor={theme.textMuted}
@@ -107,7 +132,7 @@ export function CategoryEditorModal({ visible, category, categoryCount, onClose
 
               <Text style={[styles.label, { color: theme.textSecondary }]}>Color</Text>
               <View style={styles.colorGrid}>
-                {CATEGORY_COLORS.map((c) => (
+                {CATEGORY_COLORS.map(c => (
                   <TouchableOpacity
                     key={c}
                     style={[
@@ -123,13 +148,20 @@ export function CategoryEditorModal({ visible, category, categoryCount, onClose
                   >
                     {color === c && (
                       <Svg width={16} height={16} viewBox="0 0 24 24">
-                        <Path d="M5 12l5 5 9-10" stroke="#FFFFFF" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                        <Path
+                          d="M5 12l5 5 9-10"
+                          stroke="#FFFFFF"
+                          strokeWidth={3}
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          fill="none"
+                        />
                       </Svg>
                     )}
                   </TouchableOpacity>
                 ))}
               </View>
-              <ColorWheel color={color} onChange={setColor} />
+              <ColorWheel color={color} opacity={1} onChange={setColor} />
 
               <View style={styles.actions}>
                 {category && (
@@ -139,13 +171,22 @@ export function CategoryEditorModal({ visible, category, categoryCount, onClose
                     disabled={!canDelete}
                     activeOpacity={0.7}
                   >
-                    <Text style={[styles.deleteButtonText, { color: canDelete ? theme.accent : theme.textMuted }]}>
+                    <Text
+                      style={[
+                        styles.deleteButtonText,
+                        { color: canDelete ? theme.accent : theme.textMuted },
+                      ]}
+                    >
                       Delete
                     </Text>
                   </TouchableOpacity>
                 )}
                 <TouchableOpacity
-                  style={[styles.saveButton, { backgroundColor: theme.accent }, !name.trim() && styles.saveButtonDisabled]}
+                  style={[
+                    styles.saveButton,
+                    { backgroundColor: theme.accent },
+                    !name.trim() && styles.saveButtonDisabled,
+                  ]}
                   onPress={handleSave}
                   disabled={!name.trim()}
                   activeOpacity={0.8}

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

@@ -57,7 +57,7 @@ export function CategoryFilter({ selected, onSelect }: CategoryFilterProps) {
         isAllCategory={true}
         scaleAnim={scaleAnim}
       />
-      {categories.map((category) => (
+      {categories.map(category => (
         <CategoryButton
           key={category.id}
           id={category.id}
@@ -72,7 +72,10 @@ export function CategoryFilter({ selected, onSelect }: CategoryFilterProps) {
         />
       ))}
       <TouchableOpacity
-        style={[styles.manageButton, { borderColor: theme.borderStrong, backgroundColor: theme.cardAlt }]}
+        style={[
+          styles.manageButton,
+          { borderColor: theme.borderStrong, backgroundColor: theme.cardAlt },
+        ]}
         onPress={() => router.push('/settings')}
         activeOpacity={0.7}
         accessibilityRole="button"
@@ -80,10 +83,22 @@ export function CategoryFilter({ selected, onSelect }: CategoryFilterProps) {
         hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
       >
         <Svg width={14} height={14} viewBox="0 0 24 24">
-          <Circle cx={12} cy={12} r={9} stroke={theme.textSecondary} strokeWidth={2.2} fill="none" />
+          <Circle
+            cx={12}
+            cy={12}
+            r={9}
+            stroke={theme.textSecondary}
+            strokeWidth={2.2}
+            fill="none"
+          />
           <Circle cx={12} cy={8.5} r={1.2} fill={theme.textSecondary} />
           <Circle cx={12} cy={15.5} r={1.2} fill={theme.textSecondary} />
-          <Path d="M7.8 6.2l1 1.7M16.2 16.1l1 1.7M7.8 17.8l1-1.7M16.2 7.9l1-1.7" stroke={theme.textSecondary} strokeWidth={1.8} strokeLinecap="round" />
+          <Path
+            d="M7.8 6.2l1 1.7M16.2 16.1l1 1.7M7.8 17.8l1-1.7M16.2 7.9l1-1.7"
+            stroke={theme.textSecondary}
+            strokeWidth={1.8}
+            strokeLinecap="round"
+          />
         </Svg>
         <Text style={[styles.manageLabel, { color: theme.textSecondary }]}>Manage</Text>
       </TouchableOpacity>
@@ -104,7 +119,16 @@ interface CategoryButtonProps {
   scaleAnim: Animated.Value;
 }
 
-function CategoryButton({ color, selected, onPress, onPressIn, onPressOut, theme, isAllCategory, scaleAnim }: CategoryButtonProps) {
+function CategoryButton({
+  color,
+  selected,
+  onPress,
+  onPressIn,
+  onPressOut,
+  theme,
+  isAllCategory,
+  scaleAnim,
+}: CategoryButtonProps) {
   const animatedStyle = {
     transform: [{ scale: scaleAnim }],
     shadowColor: selected ? theme.accent : '#000',
@@ -130,8 +154,24 @@ function CategoryButton({ color, selected, onPress, onPressIn, onPressOut, theme
     >
       {isAllCategory ? (
         <Svg width={20} height={20} viewBox="0 0 24 24">
-          <Circle cx={12} cy={12} r={9} stroke="#FFFFFF" strokeWidth={2.5} fill="none" opacity={0.9} />
+          <Circle
-          <Path d="M6 12l4 4 8-8" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" opacity={0.9} />
+            cx={12}
+            cy={12}
+            r={9}
+            stroke="#FFFFFF"
+            strokeWidth={2.5}
+            fill="none"
+            opacity={0.9}
+          />
+          <Path
+            d="M6 12l4 4 8-8"
+            stroke="#FFFFFF"
+            strokeWidth={2.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+            opacity={0.9}
+          />
         </Svg>
       ) : null}
     </TouchableOpacity>

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

@@ -1,5 +1,14 @@
 import React, { useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Modal, Pressable, KeyboardAvoidingView } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Modal,
+  Pressable,
+  KeyboardAvoidingView,
+} from 'react-native';
 import { useCategories } from '@/hooks/useDatabase';
 import { useSettings } from '@/theme';
 import Svg, { Path } from 'react-native-svg';
@@ -16,7 +25,7 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
   const [showModal, setShowModal] = useState(false);
 
   const selected = new Set(value);
-  const selectedCategories = categories.filter((c) => selected.has(c.id));
+  const selectedCategories = categories.filter(c => selected.has(c.id));
 
   const toggle = (id: string) => {
     const next = new Set(selected);
@@ -33,7 +42,7 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
       ? 'None'
       : selectedCategories
           .slice(0, 2)
-          .map((c) => c.name)
+          .map(c => c.name)
           .join(', ') + (selectedCategories.length > 2 ? ` +${selectedCategories.length - 2}` : '');
 
   return (
@@ -53,10 +62,18 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
         <View style={styles.selectorContent}>
           {selectedCategories.length > 0 ? (
             <View style={styles.chipRow}>
-              {selectedCategories.slice(0, 3).map((c) => (
+              {selectedCategories.slice(0, 3).map(c => (
-                <View key={c.id} style={[styles.chip, { backgroundColor: theme.cardAlt, borderColor: theme.border }]}>
+                <View
+                  key={c.id}
+                  style={[
+                    styles.chip,
+                    { backgroundColor: theme.cardAlt, borderColor: theme.border },
+                  ]}
+                >
                   <View style={[styles.colorCircle, { backgroundColor: c.color }]} />
-                  <Text style={[styles.chipText, { color: theme.textSecondary }]} numberOfLines={1}>{c.name}</Text>
+                  <Text style={[styles.chipText, { color: theme.textSecondary }]} numberOfLines={1}>
+                    {c.name}
+                  </Text>
                 </View>
               ))}
             </View>
@@ -65,12 +82,24 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
           )}
         </View>
         <Svg width={20} height={20} 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>
       </TouchableOpacity>
       {error && <Text style={[styles.errorText, { color: theme.dangerStrong }]}>{error}</Text>}
 
-      <Modal visible={showModal} transparent animationType="fade" onRequestClose={() => setShowModal(false)}>
+      <Modal
+        visible={showModal}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setShowModal(false)}
+      >
         <KeyboardAvoidingView
           style={[styles.modalOverlay, { backgroundColor: 'rgba(0,0,0,0.5)' }]}
           behavior="padding"
@@ -81,7 +110,10 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
                 <Text style={[styles.modalTitle, { color: theme.text }]}>Select Tags</Text>
                 <View style={styles.modalHeaderRight}>
                   <TouchableOpacity
-                    onPress={() => { onChange([]); setShowModal(false); }}
+                    onPress={() => {
+                      onChange([]);
+                      setShowModal(false);
+                    }}
                     activeOpacity={0.7}
                     accessibilityRole="button"
                     accessibilityLabel="Clear all tags"
@@ -102,7 +134,7 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
                 <Text style={[styles.modalHint, { color: theme.textMuted }]}>
                   A task can have multiple tags. Selected: {selected.size}
                 </Text>
-                {categories.map((category) => {
+                {categories.map(category => {
                   const isSelected = selected.has(category.id);
                   return (
                     <TouchableOpacity
@@ -110,7 +142,11 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
                       style={[
                         styles.modalOption,
                         { backgroundColor: theme.card, borderColor: theme.borderStrong },
-                        isSelected && { borderColor: theme.accent, backgroundColor: theme.accentSoft, borderWidth: 2 },
+                        isSelected && {
+                          borderColor: theme.accent,
+                          backgroundColor: theme.accentSoft,
+                          borderWidth: 2,
+                        },
                       ]}
                       onPress={() => toggle(category.id)}
                       activeOpacity={0.8}
@@ -118,17 +154,32 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
                       accessibilityLabel={`Tag ${category.name}`}
                       accessibilityState={{ checked: isSelected }}
                     >
-                      <View style={[styles.colorCircle, { backgroundColor: category.color }, isSelected && styles.colorCircleSelected]} />
+                      <View
-                      <Text style={[
+                        style={[
-                        styles.categoryName,
+                          styles.colorCircle,
-                        { color: theme.textSecondary },
+                          { backgroundColor: category.color },
-                        isSelected && { color: theme.text, fontWeight: '600' },
+                          isSelected && styles.colorCircleSelected,
-                      ]}>
+                        ]}
+                      />
+                      <Text
+                        style={[
+                          styles.categoryName,
+                          { color: theme.textSecondary },
+                          isSelected && { color: theme.text, fontWeight: '600' },
+                        ]}
+                      >
                         {category.name}
                       </Text>
                       {isSelected && (
                         <Svg width={20} height={20} viewBox="0 0 24 24">
-                          <Path d="M5 12l5 5 9-10" stroke={theme.accent} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                          <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/ColorPickerInput.native.tsx

@@ -20,16 +20,21 @@ export default function NativeColorPickerInput({ value, onChange }: ColorPickerI
   const valid = isValidHex(hex);
 
   const handleChange = (raw: string) => {
-    const cleaned = raw.replace(/[^0-9a-fA-F]/g, '').slice(0, 6).toUpperCase();
+    const cleaned = raw
+      .replace(/[^0-9a-fA-F]/g, '')
+      .slice(0, 6)
+      .toUpperCase();
     onChange(`#${cleaned}`);
   };
 
   return (
     <View style={styles.row}>
-      <View style={[
+      <View
-        styles.preview,
+        style={[
-        { backgroundColor: valid ? value : theme.accentSoft, borderColor: theme.accent },
+          styles.preview,
-      ]} />
+          { backgroundColor: valid ? value : theme.accentSoft, borderColor: theme.accent },
+        ]}
+      />
       <View style={styles.inputWrap}>
         <Text style={styles.hash}>#{/**/}</Text>
         <TextInput

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

@@ -33,23 +33,48 @@ function hsvToHex(h: number, s: number, v: number) {
   const c = v * s;
   const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
   const m = v - c;
-  let r = 0, g = 0, b = 0;
+  let r = 0,
-  if (h < 60) { r = c; g = x; b = 0; }
+    g = 0,
-  else if (h < 120) { r = x; g = c; b = 0; }
+    b = 0;
-  else if (h < 180) { r = 0; g = c; b = x; }
+  if (h < 60) {
-  else if (h < 240) { r = 0; g = x; b = c; }
+    r = c;
-  else if (h < 300) { r = x; g = 0; b = c; }
+    g = x;
-  else { r = c; g = 0; b = x; }
+    b = 0;
-  const toHex = (n: number) => Math.round((n + m) * 255).toString(16).padStart(2, '0');
+  } else if (h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  const toHex = (n: number) =>
+    Math.round((n + m) * 255)
+      .toString(16)
+      .padStart(2, '0');
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
 }
 
 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);
@@ -66,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;
@@ -84,35 +109,49 @@ export default function ColorWheel({ color, onChange }: ColorWheelProps) {
     setValue(1 - distance / radius);
   };
 
-  const wheelPanResponder = React.useMemo(() => PanResponder.create({
+  const wheelPanResponder = React.useMemo(
-    onStartShouldSetPanResponder: () => true,
+    () =>
-    onMoveShouldSetPanResponder: () => true,
+      PanResponder.create({
-    onPanResponderGrant: (event) => {
+        onStartShouldSetPanResponder: () => true,
-      updateFromWheel(event.nativeEvent.locationX, event.nativeEvent.locationY);
+        onMoveShouldSetPanResponder: () => true,
-    },
+        onPanResponderGrant: event => {
-    onPanResponderMove: (event) => {
+          updateFromWheel(event.nativeEvent.locationX, event.nativeEvent.locationY);
-      updateFromWheel(event.nativeEvent.locationX, event.nativeEvent.locationY);
+        },
-    },
+        onPanResponderMove: event => {
-  }), []);
+          updateFromWheel(event.nativeEvent.locationX, event.nativeEvent.locationY);
+        },
+      }),
+    []
+  );
 
   const setHueFromLocation = (locationX: number) => {
     setHue(Math.min(360, Math.max(0, (locationX / WHEEL_SIZE) * 360)));
   };
 
-  const huePanResponder = React.useMemo(() => PanResponder.create({
+  const huePanResponder = React.useMemo(
-    onStartShouldSetPanResponder: () => true,
+    () =>
-    onMoveShouldSetPanResponder: () => true,
+      PanResponder.create({
-    onPanResponderGrant: (event) => {
+        onStartShouldSetPanResponder: () => true,
-      setHueFromLocation(event.nativeEvent.locationX);
+        onMoveShouldSetPanResponder: () => true,
-    },
+        onPanResponderGrant: event => {
-    onPanResponderMove: (event) => {
+          setHueFromLocation(event.nativeEvent.locationX);
-      setHueFromLocation(event.nativeEvent.locationX);
+        },
-    },
+        onPanResponderMove: event => {
-  }), []);
+          setHueFromLocation(event.nativeEvent.locationX);
+        },
+      }),
+    []
+  );
 
-  const thumbX = ((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.cos((hue - 180) * Math.PI / 180) + (WHEEL_SIZE / 2) - (THUMB_SIZE / 2);
+  const thumbX =
-  const thumbY = ((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.sin((hue - 180) * Math.PI / 180) + (WHEEL_SIZE / 2) - (THUMB_SIZE / 2);
+    ((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.cos(((hue - 180) * Math.PI) / 180) +
-  const hueThumbX = (hue / 360) * WHEEL_SIZE - (THUMB_SIZE / 2);
+    WHEEL_SIZE / 2 -
+    THUMB_SIZE / 2;
+  const thumbY =
+    ((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.sin(((hue - 180) * Math.PI) / 180) +
+    WHEEL_SIZE / 2 -
+    THUMB_SIZE / 2;
+  const hueThumbX = (hue / 360) * WHEEL_SIZE - THUMB_SIZE / 2;
 
   return (
     <View style={styles.container}>
@@ -180,7 +219,9 @@ export default function ColorWheel({ color, onChange }: ColorWheelProps) {
 
       <View style={styles.previewContainer}>
         <View style={[styles.preview, { backgroundColor: hsvToHex(hue, saturation, value) }]} />
-        <RNText style={[styles.previewText, { color: theme.text }]}>{hsvToHex(hue, saturation, value)}</RNText>
+        <RNText style={[styles.previewText, { color: theme.text }]}>
+          {hsvToHex(hue, saturation, value)}
+        </RNText>
       </View>
     </View>
   );

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

@@ -32,23 +32,48 @@ function hsvToHex(h: number, s: number, v: number) {
   const c = v * s;
   const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
   const m = v - c;
-  let r = 0, g = 0, b = 0;
+  let r = 0,
-  if (h < 60) { r = c; g = x; b = 0; }
+    g = 0,
-  else if (h < 120) { r = x; g = c; b = 0; }
+    b = 0;
-  else if (h < 180) { r = 0; g = c; b = x; }
+  if (h < 60) {
-  else if (h < 240) { r = 0; g = x; b = c; }
+    r = c;
-  else if (h < 300) { r = x; g = 0; b = c; }
+    g = x;
-  else { r = c; g = 0; b = x; }
+    b = 0;
-  const toHex = (n: number) => Math.round((n + m) * 255).toString(16).padStart(2, '0');
+  } else if (h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  const toHex = (n: number) =>
+    Math.round((n + m) * 255)
+      .toString(16)
+      .padStart(2, '0');
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
 }
 
 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);
@@ -65,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();
@@ -108,15 +133,25 @@ export default function ColorWheel({ color, onChange }: ColorWheelProps) {
     handleMove(e.nativeEvent);
   };
 
-  const thumbX = ((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.cos((hue - 180) * Math.PI / 180) + (WHEEL_SIZE / 2) - (THUMB_SIZE / 2);
+  const thumbX =
-  const thumbY = ((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.sin((hue - 180) * Math.PI / 180) + (WHEEL_SIZE / 2) - (THUMB_SIZE / 2);
+    ((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.cos(((hue - 180) * Math.PI) / 180) +
-  const hueThumbX = (hue / 360) * WHEEL_SIZE - (THUMB_SIZE / 2);
+    WHEEL_SIZE / 2 -
+    THUMB_SIZE / 2;
+  const thumbY =
+    ((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.sin(((hue - 180) * Math.PI) / 180) +
+    WHEEL_SIZE / 2 -
+    THUMB_SIZE / 2;
+  const hueThumbX = (hue / 360) * WHEEL_SIZE - THUMB_SIZE / 2;
   const currentColor = hsvToHex(hue, saturation, value);
 
   return (
     <View style={styles.container}>
       <View style={styles.wheelContainer}>
-        <Svg width={WHEEL_SIZE} height={WHEEL_SIZE} {...({ onMouseDown: handleWheelMouseDown } as object)}>
+        <Svg
+          width={WHEEL_SIZE}
+          height={WHEEL_SIZE}
+          {...({ onMouseDown: handleWheelMouseDown } as object)}
+        >
           <DefsElement>
             <LinearGradient id="satGradient" x1="0%" y1="0%" x2="100%" y2="0%">
               <Stop offset="0%" stopColor={`hsl(${hue}, 100%, 50%)`} stopOpacity={1} />

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

@@ -109,7 +109,11 @@ export default function WebDateTimeInput({
             >
               <Text style={[styles.clearButtonText, { color: mutedColor }]}>Clear</Text>
             </TouchableOpacity>
-            <TouchableOpacity style={[styles.doneButton, { backgroundColor: theme.accent }]} onPress={onDismiss} activeOpacity={0.8}>
+            <TouchableOpacity
+              style={[styles.doneButton, { backgroundColor: theme.accent }]}
+              onPress={onDismiss}
+              activeOpacity={0.8}
+            >
               <Text style={[styles.doneButtonText, { color: theme.accentText }]}>Done</Text>
             </TouchableOpacity>
           </View>

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

@@ -49,14 +49,30 @@ export function DateTimePickerComponent({ control }: DateTimePickerComponentProp
               styles.pickerButton,
               { backgroundColor: theme.inputBg, borderColor: theme.borderStrong },
               field.value && { borderColor: theme.accent, backgroundColor: theme.accentSoft },
-              fieldName === 'endTime' && endTimeInvalid && { borderColor: theme.dangerStrong, backgroundColor: theme.accentSoft },
+              fieldName === 'endTime' &&
+                endTimeInvalid && {
+                  borderColor: theme.dangerStrong,
+                  backgroundColor: theme.accentSoft,
+                },
             ]}
             onPress={onPress}
             activeOpacity={0.8}
           >
             <Svg width={20} height={20} viewBox="0 0 24 24">
-              <Circle cx={12} cy={12} r={10} stroke={field.value ? theme.accent : theme.textFaint} strokeWidth={1.8} fill="none" />
+              <Circle
-              <Path d="M12 6v6l4 2" stroke={field.value ? theme.accent : theme.textFaint} strokeWidth={1.8} strokeLinecap="round" />
+                cx={12}
+                cy={12}
+                r={10}
+                stroke={field.value ? theme.accent : theme.textFaint}
+                strokeWidth={1.8}
+                fill="none"
+              />
+              <Path
+                d="M12 6v6l4 2"
+                stroke={field.value ? theme.accent : theme.textFaint}
+                strokeWidth={1.8}
+                strokeLinecap="round"
+              />
             </Svg>
             <Text
               style={[
@@ -82,7 +98,12 @@ export function DateTimePickerComponent({ control }: DateTimePickerComponentProp
                 hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
               >
                 <Svg width={14} height={14} 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>
             ) : null}
@@ -142,7 +163,12 @@ export function DateTimePickerComponent({ control }: DateTimePickerComponentProp
                     hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
                   >
                     <Svg width={14} height={14} 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>
                 ) : null}
@@ -151,7 +177,10 @@ export function DateTimePickerComponent({ control }: DateTimePickerComponentProp
           }}
         />
         <TouchableOpacity
-          style={[styles.calendarButton, { backgroundColor: theme.inputBg, borderColor: theme.borderStrong }]}
+          style={[
+            styles.calendarButton,
+            { backgroundColor: theme.inputBg, borderColor: theme.borderStrong },
+          ]}
           onPress={() => setPicker('date')}
           activeOpacity={0.8}
           accessibilityLabel="Open calendar"
@@ -184,7 +213,7 @@ export function DateTimePickerComponent({ control }: DateTimePickerComponentProp
               thumbColor={field.value ? theme.accent : theme.textMuted}
               ios_backgroundColor={theme.border}
               value={field.value ?? false}
-              onValueChange={(value) => {
+              onValueChange={value => {
                 field.onChange(value);
                 if (value) {
                   timeRef.current?.('');
@@ -203,10 +232,27 @@ export function DateTimePickerComponent({ control }: DateTimePickerComponentProp
           </View>
 
           {endTimeInvalid && (
-            <View style={[styles.warningRow, { backgroundColor: theme.accentSoft, borderColor: theme.dangerStrong }]}>
+            <View
+              style={[
+                styles.warningRow,
+                { backgroundColor: theme.accentSoft, borderColor: theme.dangerStrong },
+              ]}
+            >
               <Svg width={14} height={14} viewBox="0 0 24 24">
-                <Circle cx={12} cy={12} r={10} stroke={theme.dangerStrong} strokeWidth={1.8} fill="none" />
+                <Circle
-                <Path d="M12 8v5M12 16.5v.5" stroke={theme.dangerStrong} strokeWidth={1.8} strokeLinecap="round" />
+                  cx={12}
+                  cy={12}
+                  r={10}
+                  stroke={theme.dangerStrong}
+                  strokeWidth={1.8}
+                  fill="none"
+                />
+                <Path
+                  d="M12 8v5M12 16.5v.5"
+                  stroke={theme.dangerStrong}
+                  strokeWidth={1.8}
+                  strokeLinecap="round"
+                />
               </Svg>
               <Text style={[styles.warningText, { color: theme.dangerStrong }]}>
                 {endTime === startTime
@@ -235,12 +281,8 @@ export function DateTimePickerComponent({ control }: DateTimePickerComponentProp
       <WheelTimePicker
         visible={picker === 'time' || picker === 'endTime'}
         title={picker === 'endTime' ? 'End Time' : 'Start Time'}
-        initialTime={
+        initialTime={picker === 'endTime' ? endTime || startTime : startTime}
-          picker === 'endTime'
+        onConfirm={time => {
-            ? endTime || startTime
-            : startTime
-        }
-        onConfirm={(time) => {
           if (picker === 'endTime') {
             setEndTimeValue(time);
           } else {

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

@@ -1,5 +1,5 @@
 import React, { useMemo } 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 DescriptionInputProps extends TextInputProps {
@@ -36,33 +36,34 @@ export function DescriptionInput({ error, ...props }: DescriptionInputProps) {
   );
 }
 
-const createStyles = (theme: ThemeColors) => StyleSheet.create({
+const createStyles = (theme: ThemeColors) =>
-  container: {
+  StyleSheet.create({
-    gap: 5,
+    container: {
-  },
+      gap: 5,
-  label: {
+    },
-    fontSize: 13,
+    label: {
-    fontWeight: '600',
+      fontSize: 13,
-  },
+      fontWeight: '600',
-  input: {
+    },
-    minHeight: 88,
+    input: {
-    padding: 14,
+      minHeight: 88,
-    borderRadius: 10,
+      padding: 14,
-    borderWidth: 1,
+      borderRadius: 10,
-    fontSize: 14,
+      borderWidth: 1,
-  },
+      fontSize: 14,
-  inputError: {
+    },
-    borderColor: theme.dangerStrong,
+    inputError: {
-    borderWidth: 1.5,
+      borderColor: theme.dangerStrong,
-  },
+      borderWidth: 1.5,
-  charCount: {
+    },
-    fontSize: 10,
+    charCount: {
-    textAlign: 'right',
+      fontSize: 10,
-    marginTop: -3,
+      textAlign: 'right',
-  },
+      marginTop: -3,
-  errorText: {
+    },
-    fontSize: 11,
+    errorText: {
-    color: theme.dangerStrong,
+      fontSize: 11,
-    marginLeft: 4,
+      color: theme.dangerStrong,
-  },
+      marginLeft: 4,
-});
+    },
+  });

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

@@ -47,12 +47,7 @@ export function FloatingActionButton() {
   });
 
   return (
-    <Animated.View
+    <Animated.View style={[styles.container, { transform: [{ scale: scaleAnim }] }]}>
-      style={[
-        styles.container,
-        { transform: [{ scale: scaleAnim }] },
-      ]}
-    >
       <TouchableOpacity
         style={[styles.button, { backgroundColor: theme.accent, shadowColor: theme.accent }]}
         onPress={handlePress}

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

@@ -44,13 +44,17 @@ export function ForgotPasswordModal({ visible, onClose }: ForgotPasswordModalPro
       const result = await forgotPassword(username.trim());
       if (result.success) {
         if (result.resetToken) {
-          Alert.alert('Reset Token (Dev Mode)', `Your reset token is: ${result.resetToken}\n\nEnter this token on the next screen.`, [
+          Alert.alert(
-            { text: 'OK', onPress: () => setStep('enterResetCode') },
+            'Reset Token (Dev Mode)',
-          ]);
+            `Your reset token is: ${result.resetToken}\n\nEnter this token on the next screen.`,
+            [{ text: 'OK', onPress: () => setStep('enterResetCode') }]
+          );
         } else {
-          Alert.alert('Reset Email Sent', 'If the account exists, a password reset link has been sent.', [
+          Alert.alert(
-            { text: 'OK', onPress: () => setStep('enterResetCode') },
+            'Reset Email Sent',
-          ]);
+            'If the account exists, a password reset link has been sent.',
+            [{ text: 'OK', onPress: () => setStep('enterResetCode') }]
+          );
         }
       } else {
         setError('Failed to request password reset');
@@ -112,7 +116,10 @@ export function ForgotPasswordModal({ visible, onClose }: ForgotPasswordModalPro
         Enter your username to receive a password reset link.
       </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}
@@ -130,7 +137,9 @@ export function ForgotPasswordModal({ visible, onClose }: ForgotPasswordModalPro
         {busy ? (
           <ActivityIndicator color={theme.accentText} />
         ) : (
-          <Text style={[styles.primaryButtonText, { color: theme.accentText }]}>Send Reset Link</Text>
+          <Text style={[styles.primaryButtonText, { color: theme.accentText }]}>
+            Send Reset Link
+          </Text>
         )}
       </TouchableOpacity>
     </View>
@@ -142,7 +151,10 @@ export function ForgotPasswordModal({ visible, onClose }: ForgotPasswordModalPro
         Enter the reset token and your new password.
       </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="Reset Token"
         placeholderTextColor={theme.textMuted}
         value={resetToken}
@@ -151,7 +163,10 @@ export function ForgotPasswordModal({ visible, onClose }: ForgotPasswordModalPro
         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="New Password (min 8 chars)"
         placeholderTextColor={theme.textMuted}
         value={newPassword}
@@ -159,7 +174,10 @@ export function ForgotPasswordModal({ visible, onClose }: ForgotPasswordModalPro
         secureTextEntry
       />
       <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="Confirm New Password"
         placeholderTextColor={theme.textMuted}
         value={confirmPassword}
@@ -176,7 +194,9 @@ export function ForgotPasswordModal({ visible, onClose }: ForgotPasswordModalPro
         {busy ? (
           <ActivityIndicator color={theme.accentText} />
         ) : (
-          <Text style={[styles.primaryButtonText, { color: theme.accentText }]}>Reset Password</Text>
+          <Text style={[styles.primaryButtonText, { color: theme.accentText }]}>
+            Reset Password
+          </Text>
         )}
       </TouchableOpacity>
     </View>
@@ -184,10 +204,7 @@ export function ForgotPasswordModal({ visible, onClose }: ForgotPasswordModalPro
 
   return (
     <Modal visible={visible} transparent animationType="fade" onRequestClose={handleBack}>
-      <KeyboardAvoidingView
+      <KeyboardAvoidingView style={styles.overlay} behavior="padding">
-        style={styles.overlay}
-        behavior="padding"
-      >
         <TouchableOpacity style={styles.backdrop} activeOpacity={1} onPress={handleBack} />
         <View style={[styles.sheet, { backgroundColor: theme.sheetBg }]}>
           <View style={[styles.handle, { backgroundColor: theme.borderStrong }]} />

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

@@ -13,7 +13,10 @@ interface FormButtonsProps {
 export function FormButtons({ onSubmit, submitLabel = 'Submit' }: FormButtonsProps) {
   const router = useRouter();
   const { theme } = useSettings();
-  const { handleSubmit, formState: { isSubmitting } } = useFormContext();
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useFormContext();
   const insets = useSafeAreaInsets();
 
   const cancel = () => {
@@ -25,9 +28,21 @@ export function FormButtons({ onSubmit, submitLabel = 'Submit' }: FormButtonsPro
   };
 
   return (
-    <View style={[styles.container, { backgroundColor: theme.background, borderTopColor: theme.border, paddingBottom: insets.bottom + 12 }]}>
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.background,
+          borderTopColor: theme.border,
+          paddingBottom: insets.bottom + 12,
+        },
+      ]}
+    >
       <TouchableOpacity
-        style={[styles.cancelButton, { borderColor: theme.borderStrong, backgroundColor: theme.card }]}
+        style={[
+          styles.cancelButton,
+          { borderColor: theme.borderStrong, backgroundColor: theme.card },
+        ]}
         onPress={cancel}
         disabled={isSubmitting}
         activeOpacity={0.7}
@@ -38,7 +53,11 @@ export function FormButtons({ onSubmit, submitLabel = 'Submit' }: FormButtonsPro
         <Text style={[styles.cancelButtonText, { color: theme.textSecondary }]}>Cancel</Text>
       </TouchableOpacity>
       <TouchableOpacity
-        style={[styles.submitButton, { backgroundColor: theme.accent }, isSubmitting && styles.buttonDisabled]}
+        style={[
+          styles.submitButton,
+          { backgroundColor: theme.accent },
+          isSubmitting && styles.buttonDisabled,
+        ]}
         onPress={handleSubmit(onSubmit)}
         disabled={isSubmitting}
         activeOpacity={0.8}

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

@@ -21,11 +21,23 @@ interface FriendsModalProps {
 
 export function FriendsModal({ visible, onClose }: FriendsModalProps) {
   const { theme } = useSettings();
-  const { friends, incoming, outgoing, loading, sendRequest, acceptRequest, declineRequest, removeFriend, searchUsers } = useFriends();
+  const {
+    friends,
+    incoming,
+    outgoing,
+    loading,
+    sendRequest,
+    acceptRequest,
+    declineRequest,
+    removeFriend,
+    searchUsers,
+  } = useFriends();
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<{ id: string; username: string }[]>([]);
   const [searching, setSearching] = useState(false);
-  const [selectedTab, setSelectedTab] = useState<'friends' | 'incoming' | 'outgoing' | 'add'>('friends');
+  const [selectedTab, setSelectedTab] = useState<'friends' | 'incoming' | 'outgoing' | 'add'>(
+    'friends'
+  );
 
   const searchKey = `${selectedTab}:${searchQuery}`;
   const [prevSearchKey, setPrevSearchKey] = useState(searchKey);
@@ -41,7 +53,11 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
         setSearching(true);
         try {
           const results = await searchUsers(searchQuery);
-          setSearchResults(results.filter(r => !friends.some(f => f.id === r.id) && !outgoing.some(o => o.id === r.id)));
+          setSearchResults(
+            results.filter(
+              r => !friends.some(f => f.id === r.id) && !outgoing.some(o => o.id === r.id)
+            )
+          );
         } catch (err) {
           console.error('Search failed:', err);
         } finally {
@@ -71,13 +87,17 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
   const handleRemove = async (friendId: string) => {
     Alert.alert('Remove Friend', 'Are you sure you want to remove this friend?', [
       { text: 'Cancel', style: 'cancel' },
-      { text: 'Remove', style: 'destructive', onPress: async () => {
+      {
-        try {
+        text: 'Remove',
-          await removeFriend(friendId);
+        style: 'destructive',
-        } catch (err) {
+        onPress: async () => {
-          Alert.alert('Error', err instanceof Error ? err.message : 'Failed to remove friend');
+          try {
-        }
+            await removeFriend(friendId);
-      }},
+          } catch (err) {
+            Alert.alert('Error', err instanceof Error ? err.message : 'Failed to remove friend');
+          }
+        },
+      },
     ]);
   };
 
@@ -98,7 +118,7 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
           </View>
 
           <View style={styles.tabs}>
-            {(['friends', 'incoming', 'outgoing', 'add'] as const).map((tab) => (
+            {(['friends', 'incoming', 'outgoing', 'add'] as const).map(tab => (
               <TouchableOpacity
                 key={tab}
                 style={[
@@ -116,10 +136,14 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
                 >
                   {tab.charAt(0).toUpperCase() + tab.slice(1)}
                   {tab === 'friends' && friends.length > 0 && (
-                    <Text style={[styles.badge, { color: theme.accentText }]}>{friends.length}</Text>
+                    <Text style={[styles.badge, { color: theme.accentText }]}>
+                      {friends.length}
+                    </Text>
                   )}
                   {tab === 'incoming' && incoming.length > 0 && (
-                    <Text style={[styles.badge, { color: theme.accentText }]}>{incoming.length}</Text>
+                    <Text style={[styles.badge, { color: theme.accentText }]}>
+                      {incoming.length}
+                    </Text>
                   )}
                 </Text>
               </TouchableOpacity>
@@ -135,7 +159,9 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
               ) : friends.length === 0 ? (
                 <View style={styles.empty}>
                   <Text style={[styles.emptyText, { color: theme.textMuted }]}>No friends yet</Text>
-                  <Text style={[styles.emptyHint, { color: theme.textFaint }]}>{'Tap "Add" to find friends by username'}</Text>
+                  <Text style={[styles.emptyHint, { color: theme.textFaint }]}>
+                    {'Tap "Add" to find friends by username'}
+                  </Text>
                 </View>
               ) : (
                 <FlatList
@@ -143,12 +169,19 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
                   keyExtractor={f => f.id}
                   renderItem={({ item }) => (
                     <View style={[styles.friendRow, { borderBottomColor: theme.border }]}>
-                      <Text style={[styles.friendName, { color: theme.text }]}>{item.username}</Text>
+                      <Text style={[styles.friendName, { color: theme.text }]}>
+                        {item.username}
+                      </Text>
                       <TouchableOpacity
-                        style={[styles.removeBtn, { backgroundColor: theme.accentSoft, borderColor: theme.accent }]}
+                        style={[
+                          styles.removeBtn,
+                          { backgroundColor: theme.accentSoft, borderColor: theme.accent },
+                        ]}
                         onPress={() => handleRemove(item.id)}
                       >
-                        <Text style={[styles.removeBtnText, { color: theme.accentStrong }]}>Remove</Text>
+                        <Text style={[styles.removeBtnText, { color: theme.accentStrong }]}>
+                          Remove
+                        </Text>
                       </TouchableOpacity>
                     </View>
                   )}
@@ -165,7 +198,9 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
                 </View>
               ) : incoming.length === 0 ? (
                 <View style={styles.empty}>
-                  <Text style={[styles.emptyText, { color: theme.textMuted }]}>No incoming requests</Text>
+                  <Text style={[styles.emptyText, { color: theme.textMuted }]}>
+                    No incoming requests
+                  </Text>
                 </View>
               ) : (
                 <FlatList
@@ -173,19 +208,32 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
                   keyExtractor={r => r.requestId}
                   renderItem={({ item }) => (
                     <View style={[styles.requestRow, { borderBottomColor: theme.border }]}>
-                      <Text style={[styles.friendName, { color: theme.text }]}>{item.username}</Text>
+                      <Text style={[styles.friendName, { color: theme.text }]}>
+                        {item.username}
+                      </Text>
                       <View style={styles.requestActions}>
                         <TouchableOpacity
                           style={[styles.actionBtn, { backgroundColor: theme.accent }]}
                           onPress={() => handleAccept(item.requestId)}
                         >
-                          <Text style={[styles.actionBtnText, { color: theme.accentText }]}>Accept</Text>
+                          <Text style={[styles.actionBtnText, { color: theme.accentText }]}>
+                            Accept
+                          </Text>
                         </TouchableOpacity>
                         <TouchableOpacity
-                          style={[styles.actionBtn, { backgroundColor: 'transparent', borderColor: theme.borderStrong, borderWidth: 1 }]}
+                          style={[
+                            styles.actionBtn,
+                            {
+                              backgroundColor: 'transparent',
+                              borderColor: theme.borderStrong,
+                              borderWidth: 1,
+                            },
+                          ]}
                           onPress={() => handleDecline(item.requestId)}
                         >
-                          <Text style={[styles.actionBtnText, { color: theme.textMuted }]}>Decline</Text>
+                          <Text style={[styles.actionBtnText, { color: theme.textMuted }]}>
+                            Decline
+                          </Text>
                         </TouchableOpacity>
                       </View>
                     </View>
@@ -203,7 +251,9 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
                 </View>
               ) : outgoing.length === 0 ? (
                 <View style={styles.empty}>
-                  <Text style={[styles.emptyText, { color: theme.textMuted }]}>No outgoing requests</Text>
+                  <Text style={[styles.emptyText, { color: theme.textMuted }]}>
+                    No outgoing requests
+                  </Text>
                 </View>
               ) : (
                 <FlatList
@@ -211,13 +261,24 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
                   keyExtractor={r => r.requestId}
                   renderItem={({ item }) => (
                     <View style={[styles.requestRow, { borderBottomColor: theme.border }]}>
-                      <Text style={[styles.friendName, { color: theme.textMuted }]}>{item.username}</Text>
+                      <Text style={[styles.friendName, { color: theme.textMuted }]}>
+                        {item.username}
+                      </Text>
                       <Text style={[styles.pendingText, { color: theme.textFaint }]}>Pending</Text>
                       <TouchableOpacity
-                        style={[styles.cancelBtn, { backgroundColor: 'transparent', borderColor: theme.borderStrong, borderWidth: 1 }]}
+                        style={[
+                          styles.cancelBtn,
+                          {
+                            backgroundColor: 'transparent',
+                            borderColor: theme.borderStrong,
+                            borderWidth: 1,
+                          },
+                        ]}
                         onPress={() => handleDecline(item.requestId)}
                       >
-                        <Text style={[styles.cancelBtnText, { color: theme.textMuted }]}>Cancel</Text>
+                        <Text style={[styles.cancelBtnText, { color: theme.textMuted }]}>
+                          Cancel
+                        </Text>
                       </TouchableOpacity>
                     </View>
                   )}
@@ -230,7 +291,14 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
             <View style={styles.content}>
               <View style={styles.searchContainer}>
                 <TextInput
-                  style={[styles.searchInput, { backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text }]}
+                  style={[
+                    styles.searchInput,
+                    {
+                      backgroundColor: theme.inputBg,
+                      borderColor: theme.borderStrong,
+                      color: theme.text,
+                    },
+                  ]}
                   placeholder="Search by username"
                   placeholderTextColor={theme.textMuted}
                   value={searchQuery}
@@ -253,16 +321,24 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
                   keyExtractor={u => u.id}
                   renderItem={({ item }) => (
                     <View style={[styles.friendRow, { borderBottomColor: theme.border }]}>
-                      <Text style={[styles.friendName, { color: theme.text }]}>{item.username}</Text>
+                      <Text style={[styles.friendName, { color: theme.text }]}>
+                        {item.username}
+                      </Text>
                       <TouchableOpacity
                         style={[styles.addBtn, { backgroundColor: theme.accent }]}
-                        onPress={() => sendRequest(item.username)
+                        onPress={() =>
-                          .then(() => {
+                          sendRequest(item.username)
-                            setSearchQuery('');
+                            .then(() => {
-                            setSearchResults([]);
+                              setSearchQuery('');
-                            setSelectedTab('friends');
+                              setSearchResults([]);
-                          })
+                              setSelectedTab('friends');
-                          .catch(err => Alert.alert('Error', err instanceof Error ? err.message : 'Failed to send request'))
+                            })
+                            .catch(err =>
+                              Alert.alert(
+                                'Error',
+                                err instanceof Error ? err.message : 'Failed to send request'
+                              )
+                            )
                         }
                       >
                         <Text style={[styles.addBtnText, { color: theme.accentText }]}>Add</Text>
@@ -272,7 +348,9 @@ export function FriendsModal({ visible, onClose }: FriendsModalProps) {
                 />
               ) : searchQuery.length < 2 ? (
                 <View style={styles.empty}>
-                  <Text style={[styles.emptyHint, { color: theme.textFaint }]}>Type at least 2 characters to search</Text>
+                  <Text style={[styles.emptyHint, { color: theme.textFaint }]}>
+                    Type at least 2 characters to search
+                  </Text>
                 </View>
               ) : null}
             </View>

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

@@ -20,7 +20,9 @@ export function Header({ title, showLogo, rightAction }: HeaderProps) {
             <Text style={[styles.logoText, { color: theme.accentText }]}>✓</Text>
           </View>
         )}
-        <Text style={[styles.title, { color: theme.text }]} accessibilityRole="header">{title}</Text>
+        <Text style={[styles.title, { color: theme.text }]} accessibilityRole="header">
+          {title}
+        </Text>
         <View style={styles.spacer}>{rightAction}</View>
       </View>
     </View>

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

@@ -136,7 +136,12 @@ export function LegalModal({ visible, type, onClose }: LegalModalProps) {
           <Text style={[styles.title, { color: theme.text }]}>{title}</Text>
           <TouchableOpacity onPress={onClose} style={styles.closeButton} activeOpacity={0.7}>
             <Svg width={24} height={24} 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/ListItem.tsx

@@ -1,89 +1,69 @@
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, Switch } from 'react-native';
-import { useSettings } from '@/theme';
-import Svg, { Path } from 'react-native-svg';
 
-interface ListItemProps {
+export const ListItem = ({ title, subtitle, onPress, leftIcon, rightIcon, disabled, leftElement, rightElement, showChevron }: {
   title: string;
-  subtitle?: string;
+  subtitle?: string | undefined;
+  onPress?: () => void;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  disabled?: boolean;
   leftElement?: React.ReactNode;
   rightElement?: React.ReactNode;
-  onPress?: () => void;
   showChevron?: boolean;
-}
+}) => {
-
-export function ListItem({ title, subtitle, leftElement, rightElement, onPress, showChevron }: ListItemProps) {
-  const { theme } = useSettings();
-  const isInteractive = onPress || showChevron;
-
   return (
-    <TouchableOpacity
+    <TouchableOpacity onPress={onPress} disabled={disabled} style={styles.item}>
-      style={[
+      <View style={styles.left}>
-        styles.container,
+        {leftElement}
-        { backgroundColor: theme.card, borderColor: theme.border },
+        {leftIcon}
-        isInteractive && styles.interactive,
-      ]}
-      onPress={onPress}
-      activeOpacity={0.7}
-      disabled={!isInteractive}
-      accessibilityRole={isInteractive ? 'button' : 'none'}
-      accessibilityLabel={title}
-      accessibilityHint={subtitle ? subtitle : undefined}
-      accessibilityState={{ disabled: !isInteractive }}
-    >
-      {leftElement && <View style={styles.leftElement}>{leftElement}</View>}
-      <View style={styles.leftContent}>
-        <Text style={[styles.title, { color: theme.text }]}>{title}</Text>
-        {subtitle && <Text style={[styles.subtitle, { color: theme.textMuted }]}>{subtitle}</Text>}
       </View>
-      <View style={styles.rightContent}>
+      <View style={styles.center}>
+        <Text style={styles.title}>{title}</Text>
+        {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+      </View>
+      <View style={styles.right}>
         {rightElement}
-        {showChevron && !rightElement && (
+        {rightIcon}
-          <Svg width={20} height={20} viewBox="0 0 24 24">
-            <Path
-              d="M9 18l6-6-6-6"
-              stroke={theme.textSecondary}
-              strokeWidth={2.5}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              fill="none"
-            />
-          </Svg>
-        )}
       </View>
+      {showChevron && <Text style={styles.chevron}>▶</Text>}
     </TouchableOpacity>
   );
-}
+};
 
 const styles = StyleSheet.create({
-  container: {
+  item: {
+    padding: 16,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingVertical: 14,
+    backgroundColor: 'white',
-    paddingHorizontal: 16,
+    marginVertical: 4,
-    borderRadius: 12,
+    borderRadius: 8,
-    borderWidth: 1,
-    marginBottom: 8,
   },
-  interactive: {},
+  left: {
-  leftElement: {
-    marginRight: 12,
-  },
-  leftContent: {
     flex: 1,
-    gap: 2,
+  },
+  center: {
+    flex: 3,
+    marginHorizontal: 12,
+  },
+  right: {
+    flex: 1,
+    textAlign: 'right',
   },
   title: {
     fontSize: 16,
     fontWeight: '500',
   },
   subtitle: {
-    fontSize: 13,
+    fontSize: 12,
+    color: '#757575',
+    marginTop: 2,
   },
-  rightContent: {
+  chevron: {
-    flexDirection: 'row',
+    fontSize: 14,
-    alignItems: 'center',
+    color: '#757575',
-    gap: 12,
+    marginLeft: 4,
   },
 });

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

@@ -66,7 +66,8 @@ export function TaskList({ categoryIds = [], showCompleted = false, onSelectionC
   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 subtaskDragRef = useRef<{ subtaskId: string; parentTaskId: string; positions: Record<string, { top: number; bottom: number }>; subPositions: Record<string, { top: number; bottom: number }> } | null>(null);
+  const subtaskDragRef = useRef<{ subtaskId: string; parentTaskId: string; 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,
@@ -237,6 +238,22 @@ export function TaskList({ categoryIds = [], showCompleted = false, onSelectionC
     return { positions, subPositions };
   }, [measureItems]);
 
+  const findHoverTask = useCallback((absoluteY: number, draggedId: string, positions: Record<string, { top: number; bottom: number }>) => {
+    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;
+  }, []);
+
+  const updateHoverTaskTarget = useCallback((target: string | null) => {
+    setHoverTaskId(target ?? null);
+  }, []);
+
   const findHoverTarget = useCallback((absoluteY: number, draggedId: string, 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--) {
@@ -334,7 +351,7 @@ export function TaskList({ categoryIds = [], showCompleted = false, onSelectionC
     }
   }, [findHoverTarget]);
 
-  const handleSubtaskDragStart = useCallback(async (subtaskId: string, parentTaskId: string, parentSubtaskId?: string) => {
+  const handleSubtaskDragStart = useCallback(async (subtaskId: string, parentTaskId: string, parentSubtaskId: string | null = null) => {
     subtaskDragRef.current = { subtaskId, parentTaskId, parentSubtaskId, ...(await measureAll()) };
   }, [measureAll]);
 
@@ -373,7 +390,7 @@ const handleSubtaskDragEnd = useCallback(async (absoluteY: number) => {
 
     // 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;
+    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)
@@ -381,6 +398,49 @@ const handleSubtaskDragEnd = useCallback(async (absoluteY: number) => {
     }
   }, [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 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' });
+      } else {
+        setDropIndicator(null);
+      }
+    }
+  }, [findHoverTask, updateHoverTaskTarget]);
+
+  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 {
+      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' });
+      }
+    }
+  }, [findHoverTask]);
+
   const renderItem = useCallback(
     ({ item, index }: { item: Task; index: number }) => {
       const isExpanded = expandedTasks.has(item.id);

carry-your-live/src/hooks/useICalImport.ts

@@ -2,6 +2,7 @@ import { useDatabase } from './useDatabase';
 import { Q } from '@nozbe/watermelondb';
 import { useEffect, useState, useCallback } from 'react';
 import Task from '../models/Task';
+import { Priority, Repeat, Reminder } from '@/types';
 import parseICal from '../utils/icalParser';
 import { startOfMonth, endOfMonth, addMonths, format } from 'date-fns';
 
@@ -138,49 +139,34 @@ export function useICalImport() {
       }
 
       const taskData = events.map(mapICalEventToTask);
+      const now = Date.now();
 
       // Insert tasks into WatermelonDB
-      const subscription = collections.tasks
+      await Promise.all(
-        .query()
+        taskData.map((td) =>
-        .splice(
+          collections.tasks.create((t) => {
-          0,
+            t.title = td.title;
-          0,
+            t.description = td.description;
-          ...taskData.map((td) => ({
+            t.categoryId = td.categoryId;
-            title: td.title,
+            t.priority = td.priority as Priority;
-            description: td.description,
+            t.completed = td.completed;
-            category_id: td.categoryId,
+            t.completedAt = td.completedAt;
-            tags: td.tags,
+            t.dueDate = td.dueDate;
-            priority: td.priority,
+            t.dueTime = td.dueTime;
-            completed: td.completed,
+            t.endTime = td.endTime;
-            completed_at: td.completedAt,
+            t.allDay = td.allDay;
-            due_date: td.dueDate,
+            t.repeat = td.repeat as Repeat;
-            due_time: td.dueTime,
+            t.repeatInterval = td.repeatInterval;
-            end_time: td.endTime,
+            t.repeatDays = td.repeatDays;
-            all_day: td.allDay,
+            t.seriesId = td.seriesId;
-            repeat: td.repeat,
+            t.reminder = td.reminder as Reminder;
-            repeat_interval: td.repeatInterval,
+            t.reminders = td.reminders;
-            repeat_days: td.repeatDays,
+            t.assigneeId = null;
-            color: '#9E9E9E',
+            t.createdAt = new Date(now);
-            series_id: td.seriesId,
+            t.updatedAt = new Date(now);
-            order: 0,
+          })
-            reminder: td.reminder,
+        )
-            reminders: td.reminders,
+      );
-            assignee_id: null,
-            created_at: now,
-            updated_at: now,
-          }))
-        );
-
-      // Observe the changes
-      subscription.subscribe({
-        next: (result) => {
-          // Tasks have been imported
-        },
-        error: (err) => {
-          console.error('Import error:', err);
-          setError(err.message);
-        },
-      });
 
       setLoading(false);
     } catch (err: any) {
@@ -188,7 +174,7 @@ export function useICalImport() {
       setError(err.message || 'Import failed');
       setLoading(false);
     }
-  }, [collections]);
+  }, []);
 
   return { importICal, loading, error };
 }

carry-your-live/src/theme.tsx

@@ -57,6 +57,7 @@ export interface ThemeColors {
 }
 
 export const DEFAULT_ACCENT = '#EF5350';
+export const DEFAULT_ACCENT_OPACITY = 1;
 
 export const ACCENT_PRESETS: string[] = [
   '#EF5350',
@@ -74,6 +75,10 @@ export const ACCENT_PRESETS: string[] = [
 
 function parseHex(hex: string): [number, number, number] {
   const h = hex.replace(/^#/, '');
+  // Handle both #RRGGBB (6 digits) and #AARRGGBB (8 digits with alpha)
+  if (h.length === 8) {
+    return [parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16), parseInt(h.slice(6, 8), 16)];
+  }
   return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
 }
 
@@ -101,8 +106,9 @@ function accentTextColor(accent: string): string {
   return luminance > 0.5 ? '#111111' : '#FFFFFF';
 }
 
-export function colors(accent: string = DEFAULT_ACCENT): ThemeColors {
+export function colors(accent: string = DEFAULT_ACCENT, opacity: number = 1): ThemeColors {
   const softAccent = desaturate(accent, 0.35);
+  const accentWithOpacity = opacity < 1 ? `${opacity.toString(16).padStart(2, '0')}${accent.slice(1)}` : accent;
   return {
     background: '#121212',
     card: '#1E1E1E',
@@ -113,7 +119,7 @@ export function colors(accent: string = DEFAULT_ACCENT): ThemeColors {
     textSecondary: '#E3E4E8',
     textFaint: '#C4C6CC',
     textMuted: '#9C9FA7',
-    accent,
+    accent: opacity < 1 ? `${accentWithOpacity}` : accent,
     accentStrong: mixHex(accent, '#FFFFFF', 0.55),
     accentSoft: mixHex(softAccent, '#121212', 0.18),
     accentBorder: mixHex(desaturate(accent, 0.15), '#121212', 0.5),
@@ -148,6 +154,8 @@ interface SettingsContextType {
   setApiUrl: (value: string) => void;
   accentColor: string;
   setAccentColor: (value: string) => void;
+  accentOpacity: number;
+  setAccentOpacity: (value: number) => void;
   todoAheadDays: number;
   setTodoAheadDays: (value: number) => void;
   showCompleted: boolean;
@@ -166,6 +174,7 @@ const STORAGE_KEYS = {
   reminderPreference: 'settings:reminderPreference',
   tagReminderPreferences: TAG_REMINDER_PREFERENCES_KEY,
   accentColor: 'settings:accentColor',
+  accentOpacity: 'settings:accentOpacity',
   todoAheadDays: 'settings:todoAheadDays',
   showCompleted: 'settings:showCompleted',
   deleteBySwipe: 'settings:deleteBySwipe',
@@ -213,6 +222,7 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
   );
   const [apiUrl, setApiUrl] = useStoredSetting<string>(API_URL_KEY, DEFAULT_API_BASE_URL);
   const [accentColor, setAccentColor] = useStoredSetting<string>(STORAGE_KEYS.accentColor, DEFAULT_ACCENT);
+  const [accentOpacity, setAccentOpacity] = useStoredSetting<number>(STORAGE_KEYS.accentOpacity, DEFAULT_ACCENT_OPACITY);
   const [todoAheadDays, setTodoAheadDays] = useStoredSetting<number>(STORAGE_KEYS.todoAheadDays, DEFAULT_TODO_AHEAD_DAYS);
   const [showCompleted, setShowCompleted] = useStoredSetting<boolean>(STORAGE_KEYS.showCompleted, false);
   const [deleteBySwipe, setDeleteBySwipe] = useStoredSetting<boolean>(STORAGE_KEYS.deleteBySwipe, false);
@@ -235,6 +245,8 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
       setApiUrl,
       accentColor,
       setAccentColor,
+      accentOpacity,
+      setAccentOpacity,
       todoAheadDays,
       setTodoAheadDays,
       showCompleted,