Compare commits

...
48 Commits
Author SHA1 Message Date
tech08mag 93738a07ac Merge pull request 'Dev' (#35) from dev into main
Reviewed-on: #35
2026-09-01 19:23:32 +00:00
tech08mag 55e21c06d9 new pipe 2026-09-01 21:22:48 +02:00
tech08mag eeab4d1221 - src/theme.tsx - Added light/dark themes, themeMode, settings sync functions
- src/services/notifications.ts - Added useNotificationSettings hook, respects notifications toggle
- app/(tabs)/settings.tsx - Added theme mode picker, fixed notifications toggle, added settings sync buttons
2026-08-28 23:45:36 +02:00
tech08mag c5f129bb42 Merge pull request 'Fixed - Gitea doesn't support actions/upload-artifact@v4 or download-artifact@v4. Switched both to v3.' (#34) from dev into main
Build and Release APK / build (push) Successful in 14m54s
Build and Release APK / release (push) Failing after 9m4s
Reviewed-on: #34
2026-08-28 21:34:01 +00:00
tech08mag 4d3d741563 Fixed - Gitea doesn't support actions/upload-artifact@v4 or download-artifact@v4. Switched both to v3. 2026-08-28 23:33:04 +02:00
tech08mag 95c69d35e2 Merge pull request 'Fixed the APK output path - the build outputs to outputs/release/app-release.apk not outputs/apk/release/app-release.apk' (#33) from dev into main
Build and Release APK / build (push) Successful in 14m59s
Build and Release APK / release (push) Failing after 5m46s
Reviewed-on: #33
2026-08-28 21:11:08 +00:00
tech08mag bc4903e3b8 Fixed the APK output path - the build outputs to outputs/release/app-release.apk not outputs/apk/release/app-release.apk 2026-08-28 23:10:34 +02:00
tech08mag beb6cc5715 Merge pull request 'Fixed the artifact path from outputs/release/ to outputs/apk/release/ in the workflow' (#32) from dev into main
Build and Release APK / build (push) Failing after 20m49s
Build and Release APK / release (push) Skipped
Reviewed-on: #32
2026-08-28 20:40:49 +00:00
tech08mag 4c6adc7117 Fixed the artifact path from outputs/release/ to outputs/apk/release/ in the workflow 2026-08-28 22:40:18 +02:00
tech08mag c787b87cc5 Merge pull request 'Removed the yes | sdkmanager --licenses that caused SIGPIPE' (#31) from dev into main
Build and Release APK / build (push) Successful in 19m59s
Build and Release APK / release (push) Failing after 6m41s
Reviewed-on: #31
2026-08-28 20:09:13 +00:00
tech08mag 0685735c74 Removed the yes | sdkmanager --licenses that caused SIGPIPE 2026-08-28 22:08:16 +02:00
tech08mag 064650a585 Merge pull request 'added explicit NDK license acceptance by writing the known license hashes to $ANDROID_HOME/licenses/android-sdk-license' (#30) from dev into main
Build and Release APK / build (push) Failing after 7s
Build and Release APK / release (push) Skipped
Reviewed-on: #30
2026-08-28 20:06:58 +00:00
tech08mag bdfe53fa83 added explicit NDK license acceptance by writing the known license hashes to $ANDROID_HOME/licenses/android-sdk-license 2026-08-28 22:06:00 +02:00
tech08mag f6abf628e3 Merge pull request 'new release pipe' (#29) from dev into main
Build and Release APK / build (push) Failing after 3m48s
Build and Release APK / release (push) Skipped
Reviewed-on: #29
2026-08-28 20:00:40 +00:00
tech08mag 40077da57f new release pipe 2026-08-28 22:00:13 +02:00
tech08mag aa57d07dc0 Merge pull request 'gradle update' (#28) from dev into main
Build APK / build (push) Successful in 17m50s
release / release (push) Canceled after 0s
Reviewed-on: #28
2026-08-28 19:39:21 +00:00
tech08mag 89c85ed7c0 gradle update 2026-08-28 21:38:23 +02:00
tech08mag ee6af8fb26 Merge pull request 'fixxing pipe dependencies' (#27) from dev into main
Build APK / build (push) Failing after 1m36s
release / release (push) Canceled after 0s
Reviewed-on: #27
2026-08-28 19:35:16 +00:00
tech08mag c6e441d449 fixxing pipe dependencies 2026-08-28 21:34:14 +02:00
tech08mag 5043d9cdff Merge pull request 'fixxing android pipe' (#26) from dev into main
Build APK / build (push) Failing after 48s
release / release (push) Canceled after 0s
Reviewed-on: #26
2026-08-28 19:30:31 +00:00
tech08mag 7e36244478 fixxing android pipe 2026-08-28 21:29:12 +02:00
tech08mag 157fc8d95b Merge pull request 'pipe' (#24) from dev into main
Build APK / build (push) Failing after 2m55s
release / release (push) Canceled after 0s
Reviewed-on: #24
2026-08-27 18:42:32 +00:00
tech08mag 4d2f92b144 pipe 2026-08-27 20:41:31 +02:00
tech08mag 8e805316fb Merge pull request 'new pipe' (#23) from dev into main
Build Desktop (deb) / build (push) Failing after 5m18s
Build APK / build (push) Successful in 15m35s
release / release (push) Canceled after 0s
Reviewed-on: #23
2026-08-27 18:04:54 +00:00
tech08mag 77051e5206 new pipe 2026-08-27 20:03:05 +02:00
tech08mag 7e06415db4 Merge pull request 'Dev' (#22) from dev into main
Build Desktop (deb) / build (push) Failing after 5m27s
release / release (push) Successful in 6m5s
Build APK / build (push) Successful in 15m43s
Reviewed-on: #22
2026-08-27 04:42:02 +00:00
tech08mag cfb987a305 Fix OutOfMemoryError: increase MaxMetaspaceSize from 384m to 1024m 2026-08-27 06:35:06 +02:00
tech08mag 3dad9e93ec layout 2026-08-26 23:48:42 +02:00
tech08mag 2be4d5aa4e Merge pull request 'keystore key' (#21) from dev into main
Build Desktop (deb) / build (push) Failing after 5m14s
release / release (push) Successful in 6m7s
Build APK / build (push) Failing after 3h0m11s
Reviewed-on: #21
2026-08-26 21:21:00 +00:00
tech08mag e91251759b keystore key 2026-08-26 23:20:19 +02:00
tech08mag 0093c4aec2 Merge pull request 'fix: remove existing debug keystore before generation in CI' (#20) from dev into main
Build APK / build (push) Failing after 3m21s
Build Desktop (deb) / build (push) Successful in 2m22s
release / release (push) Successful in 6m15s
Reviewed-on: #20
2026-08-26 21:11:54 +00:00
tech08mag 0563521887 fix: remove existing debug keystore before generation in CI 2026-08-26 23:09:15 +02:00
tech08mag 9ade0fa0ca Merge pull request 'keystore key' (#19) from dev into main
Build APK / build (push) Failing after 51s
Build Desktop (deb) / build (push) Failing after 5m5s
release / release (push) Successful in 6m55s
Reviewed-on: #19
2026-08-26 21:04:21 +00:00
tech08mag 3ec934a54c keystore key 2026-08-26 23:03:29 +02:00
tech08mag 39fd491d24 Merge pull request 'include android directory' (#18) from dev into main
Build APK / build (push) Failing after 35s
Build Desktop (deb) / build (push) Successful in 2m9s
release / release (push) Successful in 7m52s
Reviewed-on: #18
2026-08-26 20:56:30 +00:00
tech08mag 381fef8502 include android directory 2026-08-26 22:55:52 +02:00
tech08mag c4cc2712ee Merge pull request 'feat: remove /android from .gitignore to allow Gradle build in CI' (#17) from dev into main
Build APK / build (push) Failing after 1m7s
Build Desktop (deb) / build (push) Successful in 2m12s
release / release (push) Successful in 8m0s
Reviewed-on: #17
2026-08-26 20:52:22 +00:00
tech08mag 152d07f21e feat: remove /android from .gitignore to allow Gradle build in CI 2026-08-26 22:49:07 +02:00
tech08mag 49ef8ae82f Merge pull request 'fix: remove duplicate useRouter() declaration in CalendarScreen' (#16) from dev into main
Build APK / build (push) Failing after 1m10s
Build Desktop (deb) / build (push) Successful in 2m20s
release / release (push) Successful in 6m14s
Reviewed-on: #16
2026-08-26 20:37:58 +00:00
tech08mag 261a6d4d40 fix: remove duplicate useRouter() declaration in CalendarScreen 2026-08-26 22:36:17 +02:00
tech08mag 0b87f3e4ed Merge pull request 'refactor: update component styles and layouts' (#15) from dev into main
Build APK / build (push) Failing after 1m8s
Build Desktop (deb) / build (push) Successful in 2m12s
release / release (push) Successful in 7m9s
Reviewed-on: #15
2026-08-26 20:17:11 +00:00
tech08mag 7f8a764131 refactor: update component styles and layouts 2026-08-26 22:15:28 +02:00
tech08mag 9a9aff0880 Merge pull request 'Fix Android APK build pipeline' (#14) from dev into main
Build APK / build (push) Failing after 1m3s
Build Desktop (deb) / build (push) Successful in 2m19s
release / release (push) Successful in 6m20s
Reviewed-on: #14
2026-08-25 21:17:59 +00:00
tech08mag f188dde6e4 Merge branch 'dev' of https://gitea.techmos.org/tech08mag/carry-your-live into dev 2026-08-25 23:16:45 +02:00
tech08mag 4566794f44 new pipe 2026-08-25 23:15:16 +02:00
tech08mag c727142689 Merge branch 'main' into dev 2026-08-25 21:04:09 +00:00
tech08mag 4420c72965 Merge pull request 'new pipe' (#13) from dev into main
Build Desktop (deb) / build (push) Failing after 5m4s
release / release (push) Successful in 5m41s
Build APK / build (push) Failing after 49s
Reviewed-on: #13
2026-08-25 20:51:24 +00:00
tech08mag e55528e69f new pipe 2026-08-25 22:50:26 +02:00
166 changed files with 7246 additions and 2975 deletions
-72
View File
@@ -1,72 +0,0 @@
name: Build APK
on:
push:
branches: [main]
workflow_dispatch:
env:
ANDROID_HOME: ${{ runner.tool_cache }}/android-sdk
ANDROID_SDK_ROOT: ${{ runner.tool_cache }}/android-sdk
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: 22
- name: Set up JDK
uses: actions/setup-java@v4
with:
distribution: temurin
java-version: 17
- name: Install Android SDK
run: |
if [ -x "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" ]; then
echo "Android SDK already present in cache"
else
rm -rf "$ANDROID_HOME/cmdline-tools"
mkdir -p "$ANDROID_HOME/cmdline-tools"
wget -q https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip -O /tmp/cmdtools.zip
unzip -q /tmp/cmdtools.zip -d "$ANDROID_HOME/cmdline-tools"
mv "$ANDROID_HOME/cmdline-tools/cmdline-tools" "$ANDROID_HOME/cmdline-tools/latest"
fi
printf 'y\n' | "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" --licenses > /dev/null
"$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" \
"platform-tools" \
"platforms;android-35" \
"platforms;android-36" \
"build-tools;35.0.0" \
"build-tools;36.0.0" \
"ndk;27.1.12297006"
echo "sdk.dir=$ANDROID_HOME" > carry-your-live/android/app/local.properties
- name: Install JS dependencies
working-directory: carry-your-live
run: npm ci
- name: Generate debug keystore (signs the release APK)
run: |
mkdir -p carry-your-live/android/app
keytool -genkeypair -v \
-keystore carry-your-live/android/app/debug.keystore \
-alias androiddebugkey -storepass android -keypass android \
-keyalg RSA -keysize 2048 -validity 10000 \
-dname "CN=Android Debug,O=Android,C=US"
- name: Build release APK
working-directory: carry-your-live/android
run: ./gradlew assembleRelease
- name: Upload APK
uses: actions/upload-artifact@v4
with:
name: carry-your-live-release
path: carry-your-live/android/app/build/outputs/release/app-release.apk
-36
View File
@@ -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
+107 -42
View File
@@ -1,15 +1,17 @@
name: release
name: Build and Release APK
on:
push:
branches:
- main
tags:
- 'v*'
workflow_dispatch:
permissions:
contents: write
env:
ANDROID_HOME: ${{ runner.tool_cache }}/android-sdk
ANDROID_SDK_ROOT: ${{ runner.tool_cache }}/android-sdk
jobs:
release:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
@@ -17,40 +19,103 @@ jobs:
with:
fetch-depth: 0
- name: Compute next version
id: version
run: |
latest=$(git tag --list 'v[0-9]*' --sort=-v:refname | head -n 1)
if [ -z "$latest" ]; then
next="v1.0.0"
else
latest=${latest#v}
IFS='.' read -r major minor patch <<< "$latest"
next="v${major}.${minor}.$((patch + 1))"
fi
echo "next=${next}" >> "$GITHUB_OUTPUT"
- name: Build changelog
id: changelog
run: |
prev_tag=$(git describe --tags --abbrev=0 2>/dev/null || echo "")
if [ -z "$prev_tag" ]; then
log=$(git log --oneline --no-merges main | head -n 40)
else
log=$(git log --oneline --no-merges "$prev_tag"..main | head -n 40)
fi
{
echo "body<<EOF"
echo "## What's new in this release"
echo ""
echo "$log" | sed 's/^/- /'
echo "EOF"
} >> "$GITHUB_OUTPUT"
- name: Create release
uses: softprops/action-gh-release@v2
- name: Set up Node
uses: actions/setup-node@v4
with:
tag_name: ${{ steps.version.outputs.next }}
name: ${{ steps.version.outputs.next }}
body: ${{ steps.changelog.outputs.body }}
generate_release_notes: false
node-version: 22
- name: Set up JDK
uses: actions/setup-java@v4
with:
distribution: temurin
java-version: 17
- name: Install Android SDK
run: |
if [ -x "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" ]; then
echo "Android SDK already present in cache"
else
rm -rf "$ANDROID_HOME/cmdline-tools"
mkdir -p "$ANDROID_HOME/cmdline-tools"
wget -q https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip -O /tmp/cmdtools.zip
unzip -q /tmp/cmdtools.zip -d "$ANDROID_HOME/cmdline-tools"
mv "$ANDROID_HOME/cmdline-tools/cmdline-tools" "$ANDROID_HOME/cmdline-tools/latest"
fi
mkdir -p "$ANDROID_HOME/licenses"
echo "8933bad161af4178b1185d1a37fbf41ea5269c55" > "$ANDROID_HOME/licenses/android-sdk-license"
echo "d56f5187479451eabf01fb78af6dfcb131a6481e" >> "$ANDROID_HOME/licenses/android-sdk-license"
echo "24333f8a63b6825ea9c5514f83c2829b004d1fee" >> "$ANDROID_HOME/licenses/android-sdk-license"
"$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" \
"platform-tools" \
"platforms;android-36" \
"build-tools;36.0.0" \
"ndk;27.1.12297006"
mkdir -p carry-your-live/android/app
echo "sdk.dir=$ANDROID_HOME" > carry-your-live/android/app/local.properties
- name: Install JS dependencies
working-directory: carry-your-live
run: |
for i in {1..3}; do
npm ci && break || sleep 10
done
- name: Generate debug keystore (signs the release APK)
run: |
mkdir -p carry-your-live/android/app
rm -f carry-your-live/android/app/debug.keystore
keytool -genkeypair -v \
-keystore carry-your-live/android/app/debug.keystore \
-alias androiddebugkey -storepass android -keypass android \
-keyalg RSA -keysize 2048 -validity 10000 \
-dname "CN=Android Debug,O=Android,C=US"
- name: Build release APK
run: |
cd carry-your-live/android
./gradlew assembleRelease
- name: Find APK
id: find-apk
run: |
APK_PATH=$(find carry-your-live/android/app/build/outputs -name "*.apk" -type f | head -n 1)
echo "apk_path=$APK_PATH" >> "$GITHUB_OUTPUT"
echo "Found APK at: $APK_PATH"
- name: Create Gitea Release and Upload APK
if: startsWith(github.ref, 'refs/tags/v')
env:
GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
run: |
TAG_NAME="${GITHUB_REF#refs/tags/}"
REPO_OWNER="${GITHUB_REPOSITORY%/*}"
REPO_NAME="${GITHUB_REPOSITORY#*/}"
APK_PATH="${{ steps.find-apk.outputs.apk_path }}"
APK_NAME="carry-your-live-${TAG_NAME}.apk"
# Create release using Gitea API
RESPONSE=$(curl -s -X POST "https://techmos.gitea.org/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/releases" \
-H "Authorization: token ${GITEA_TOKEN}" \
-H "Content-Type: application/json" \
-d "{
\"tag_name\": \"${TAG_NAME}\",
\"name\": \"${TAG_NAME}\",
\"body\": \"Automated release for ${TAG_NAME}\",
\"draft\": false,
\"prerelease\": false
}")
RELEASE_ID=$(echo "$RESPONSE" | jq -r '.id')
if [ "$RELEASE_ID" = "null" ] || [ -z "$RELEASE_ID" ]; then
echo "Release might already exist, fetching existing release..."
RELEASE_ID=$(curl -s -H "Authorization: token ${GITEA_TOKEN}" \
"https://techmos.gitea.org/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/releases/tags/${TAG_NAME}" | jq -r '.id')
fi
# Upload APK as attachment
curl -s -X POST "https://techmos.gitea.org/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/releases/${RELEASE_ID}/assets" \
-H "Authorization: token ${GITEA_TOKEN}" \
-F "attachment=@${APK_PATH};filename=${APK_NAME}"
echo "APK uploaded to release ${TAG_NAME}"
+28
View File
@@ -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
+13
View File
@@ -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
}
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+98
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+492 -102
View File
@@ -1,6 +1,40 @@
# Carry Your Live - Mobile To-Do & Calendar App
A minimalist, offline-first task management app built with Expo, React Native, and WatermelonDB. Features three primary screens: To-Do List, Add New Task, and Calendar with bottom navigation.
A minimalist, offline-first task management app built with Expo, React Native, and WatermelonDB. Features multiple screens with bottom navigation, social features, and a full-featured backend API.
## 📝 Recent Progress (v1.1.0 - Unreleased)
### Added
- **Friends feature**: Friend requests, accept/decline/remove, user search, full backend routes
- **Assignee field on tasks**: Schema v7, model, types, forms, sync, task actions
- **AssigneeSelector component** and assignee display in TaskItem
- **QuickAddBar** on tasks overview (copied from calendar)
- **Backend**: Mounted friends route, added assigneeId to task validation and sync
### Changed
- Due date prefilled from Calendar "+" button
- 12-hour time formatting across task rows and pickers
- Calendar strip scrolls to selected day when navigating months
- Calendar completion toggle now handles repeating tasks and reminders
- Task color strips now use the task's category color
### Fixed
- WheelTimePicker FlatList scroll clamping - all hours (0-23) and minutes (0-59) reachable
- WheelTimePicker selection highlight background connecting selected item with colon separator
- WheelTimePicker number alignment in scroll list
- Tasks without a due date no longer get overdue styling
- `useOverdueTasks` infinite re-subscription loop (Date.now in effect deps)
- Web/Android crashes from decorator transform ordering (babel config)
- FormButtons crash outside FormProvider; Cancel navigation fallback
- Task repeat settings, reminders and series info now sync to backend
### Removed
- Task color picker (task color now comes from its category)
- Drag lift popup from TaskItem (scale + shadow on drag)
- Checkbox from task items
- Selection bar overlapping QuickAddBar on tasks overview
---
## Features
@@ -8,97 +42,145 @@ A minimalist, offline-first task management app built with Expo, React Native, a
- **Offline-First Architecture**: Full CRUD operations work offline with WatermelonDB + SQLite
- **Auto-Sync**: Background synchronization with custom Postgres API when online
- **Cross-Platform**: iOS, Android, and Web from single codebase
- **Desktop Support**: Electron wrapper for desktop app distribution
### Screens
#### 1. To-Do List Screen
#### 1. Tasks Screen (To-Do List)
- **Header**: App logo + "TODO" title with rounded corners
- **Category Filter**: Horizontal scrollable chips (Work, Personal, School, Shopping, Health, Finance, All)
- Single selection with visual feedback (thicker border, shadow, scale animation)
- Instant task filtering
- **Task List**: Vertical scrolling with:
- Checkbox (empty/checked states with animation)
- **QuickAddBar**: Quick task creation from list view
- **Task List**: Virtualized FlatList with sections (Pending/Completed)
- Task title (truncated with ellipsis)
- Three-dot overflow menu (Edit, Delete, Duplicate, Mark Complete, Change Category, Change Priority)
- Priority badges with colors
- Due date/time with overdue/due-today highlighting
- Completed section (collapsible)
- **Floating Action Button**: Bottom-right, opens Add Task screen with press animation
- Category color indicator strip
- Assignee display
- Swipe actions (left: delete, right: complete)
- Drag-to-reorder with visual drop indicators
- Long press → Selection mode (multi-delete, multi-complete, change category/priority)
- **Floating Action Button**: Bottom-right, opens Add Task screen
#### 2. Add New Task Screen
#### 2. Calendar Screen
- **Date Strip**: Horizontal scrollable days of current month
- Current day highlighted, scrolls to selected day on month change
- **Month Label**: Centered (e.g., "JAN 2026")
- **QuickAddBar**: Quick task creation for selected date
- **Task List**: Tasks for selected day with category color, title, time, completion status
- **Analog Clock Widget**: Decorative analog clock display
- **Empty State**: "No tasks scheduled."
- **Day View**: Detailed view for selected day (pushes to stack)
#### 3. Stats Screen
- Client-side statistics (`useStats` hook)
- Task completion metrics
- Category and priority breakdowns
#### 4. Settings Screen
- **Account**: Login/Register/Sign Out (SyncModal)
- **Server URL Override**: Custom API endpoint configuration
- **Appearance**: Accent color picker (dark mode toggle planned)
- **Task Defaults**: Default category, sort order (Date, Priority, Alphabetically, Creation Date), show completed toggle
- **Calendar**: Days ahead to display
- **Reminders**: Global reminder preference (stored, wiring in progress)
- **Notifications**: Toggle (stored, wiring in progress)
- **Legal**: Privacy Policy, Terms of Service
- **About**: Version info
#### 5. Add New Task Screen
- **Category Selector**: Horizontal row of colored circles (required)
- **Task Name**: Single-line input, 100 char max (required)
- **Subtasks**: Unlimited, add/remove individually
- **Date & Time**: Date picker, time picker, calendar button
- **Subtasks**: Unlimited, add/remove individually, nested subtask support
- **Date & Time**: Date picker, time picker (WheelTimePicker), calendar button
- **Priority**: Dropdown (None, Low, Medium, High, Critical) with color indicators
- **Repeat Profile**: Recurring task configuration
- **Reminder**: Reminder offset selector
- **Assignee**: Assign task to friend
- **Description**: Multi-line text area, 1000 char max
- **Bottom Actions**: Submit (primary) / Cancel (secondary) fixed buttons
#### 3. Calendar Screen
- **Date Strip**: Horizontal scrollable days of current month
- **Month Label**: Centered (e.g., "JAN 2026")
- **Task List**: Tasks for selected day with category color, title, time, completion status
- **Empty State**: "No tasks scheduled."
#### 6. Task Detail Screen
- Full task view with all fields
- Subtask management (add, complete, reorder, convert to task)
- Edit functionality
- Repeat profile configuration
#### 4. Settings Screen
- Dark Mode toggle
- Push Notifications toggle
- Reminder Preferences
- Default Category selector
- Sort Tasks By (Date, Priority, Alphabetically, Creation Date)
- Backup & Sync
- Version, Privacy Policy, Terms of Service
#### 7. Subtask Detail Screen
- Nested subtask management
- Convert subtask ↔ task
- Re-parent subtasks
### Task States
- **Pending**: Empty checkbox, normal text
- **Completed**: Checked checkbox, strikethrough, reduced opacity
- **Overdue**: Red due date, warning indicator
- **Due Today**: Blue highlight
- **High Priority**: Priority badge
#### 8. Sync Modal
- Login/Register forms
- Forgot/Reset password flow
- Server URL configuration
- Sync status display
### Interactions
- Tap task → Edit screen
- Long press → Selection mode (multi-delete, multi-complete, change category/priority)
- Swipe left → Delete
- Swipe right → Complete
- Pull down → Refresh
### Task Features
- **Nested Subtasks**: Unlimited depth, re-parenting, drag reorder
- **Repeating Tasks**: Repeat profiles, series IDs, this/future/all delete scopes, undo-complete
- **Categories/Tags**: 6 default categories with colors, custom category editor
- **Priorities**: None, Low, Medium, High, Critical with color badges
- **Due Dates/Times**: With all-day option
- **Reminders**: Per-task reminder offsets
- **Assignees**: Assign tasks to friends
- **Overdue/Due Today**: Visual highlighting
### Social Features
- **Friends System**: Send/accept/decline/remove friend requests
- **User Search**: Find users by username/email
- **Task Assignment**: Assign tasks to friends (client-side, backend schema ready)
---
## Tech Stack
| Layer | Technology |
|-------|------------|
| Framework | Expo (React Native) |
| Language | TypeScript |
| Framework | Expo (React Native) / Expo Router v3 |
| Language | TypeScript (strict mode) |
| Navigation | Expo Router (file-based) |
| Database | WatermelonDB + SQLite |
| State | WatermelonDB (reactive queries, no Redux needed) |
| Database | WatermelonDB + SQLite (expo-sqlite) |
| State | WatermelonDB reactive queries (no Redux) |
| 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 | EAS Build / Gradle (local APK) |
| UI Components | React Native Paper + Custom components |
| Animations | React Native Reanimated v3 |
| Date/Time | @react-native-community/datetimepicker + date-fns + WheelTimePicker |
| Build | EAS Build / Gradle (local APK) / Electron Builder (desktop) |
| CI/CD | Gitea Actions (`.gitea/workflows/build-apk.yml`) |
| Backend | Node.js + Express + TypeScript |
| Backend DB | PostgreSQL + Drizzle ORM |
| Auth | JWT (access + refresh tokens) |
| Validation | Zod (shared with frontend) |
---
## Project Structure
```
carry-your-live/
├── app/
│ ├── _layout.tsx # Root layout + DatabaseProvider
│ ├── _layout.tsx # Root layout + DatabaseProvider + AuthProvider
│ ├── (tabs)/
│ │ ├── _layout.tsx # Bottom tab navigator
│ │ ├── index.tsx # Tasks screen
│ │ ├── calendar.tsx # Calendar screen
│ │ ├── stats.tsx # Stats screen
│ │ └── settings.tsx # Settings screen
│ └── add-task.tsx # Add Task screen
│ ├── add-task.tsx # Add Task screen
│ ├── day-view.tsx # Calendar day detail
│ ├── task-detail.tsx # Task view/edit
│ └── subtask-detail.tsx # Subtask view/edit
├── src/
│ ├── components/ # Reusable UI components
│ ├── components/ # Reusable UI components (30+)
│ │ ├── Header.tsx
│ │ ├── CategoryFilter.tsx
│ │ ├── TaskList.tsx
│ │ ├── TaskItem.tsx
│ │ ├── FloatingActionButton.tsx
│ │ ├── TabBarIcon.tsx
│ │ ├── CategorySelector.tsx
│ │ ├── TaskNameInput.tsx
│ │ ├── SubtasksSection.tsx
@@ -106,24 +188,102 @@ carry-your-live/
│ │ ├── PrioritySelector.tsx
│ │ ├── DescriptionInput.tsx
│ │ ├── FormButtons.tsx
│ │ └── ListItem.tsx
│ │ ├── ListItem.tsx
│ │ ├── AnalogClock.tsx
│ │ ├── AssigneeSelector.tsx
│ │ ├── CategoryEditorModal.tsx
│ │ ├── ColorPickerInput.tsx
│ │ ├── ColorWheel.tsx
│ │ ├── DateTimeInput.tsx
│ │ ├── ForgotPasswordModal.tsx
│ │ ├── FriendsModal.tsx
│ │ ├── LegalModal.tsx
│ │ ├── OptionPickerModal.tsx
│ │ ├── QuickAddBar.tsx
│ │ ├── ReminderSelector.tsx
│ │ ├── RepeatSelector.tsx
│ │ ├── ServerUrlModal.tsx
│ │ ├── SubtaskItem.tsx
│ │ ├── SyncModal.tsx
│ │ ├── SyncStatus.tsx
│ │ ├── TabBarIcon.tsx
│ │ ├── TaskDeleteModal.tsx
│ │ ├── TaskOverflowMenu.tsx
│ │ ├── UpdateNotifier.tsx
│ │ └── WheelTimePicker.tsx
│ ├── constants/
│ │ └── index.ts # Categories, priorities, colors, reminder options
│ ├── database/
│ │ ├── schema.ts # WatermelonDB schema
│ │ ├── schema.ts # WatermelonDB schema (v21)
│ │ ├── index.ts # Database instance + collections
│ │ └── sync.ts # Custom API sync adapter
│ ├── models/
│ │ ├── Task.ts
│ │ ├── Category.ts
│ │ └── Subtask.ts
│ │ ├── sync.ts # Custom API sync adapter (25KB)
│ │ ├── migrations.ts # Schema migrations
│ │ ├── adapter.ts # Platform-specific adapters
│ │ └── tombstones.ts # Deleted record tracking
│ ├── hooks/
│ │ ├── useDatabase.tsx # Database context & providers
│ │ └── useTasks.tsx # Task queries with reactive state
│ ├── constants/
│ │ └── index.ts # Categories, priorities, colors
│ └── types/
│ └── index.ts # TypeScript interfaces
│ │ ├── useTasks.tsx # Task queries with reactive state
│ │ ├── useCategories.tsx # Category queries
│ │ ├── useTasksByDate.tsx # Calendar date queries
│ │ ├── useFriends.tsx # Friends state & actions
│ │ ├── useAuth.tsx # Authentication state
│ │ └── useStats.tsx # Statistics computation
│ ├── models/
│ │ ├── Task.ts # Task model (assigneeId, repeat, reminders)
│ │ ├── Category.ts
│ │ ├── Subtask.ts
│ │ ├── RepeatProfile.ts
│ │ ├── Friendship.ts
│ │ └── Tombstone.ts
│ ├── services/
│ │ ├── api.ts # API client with auth
│ │ ├── auth.ts # Auth token management
│ │ ├── friends.ts # Friends API calls
│ │ ├── notifications.ts # Reminder scheduling (expo-notifications)
│ │ ├── repeat.ts # Repeat task generation
│ │ └── taskActions.ts # Task CRUD + sync operations
│ ├── theme/
│ │ ├── index.ts # Theme context, colors, spacing
│ │ └── theme.tsx # Accent color picker, settings sync
│ ├── types/
│ │ └── index.ts # TypeScript interfaces
│ └── utils/
│ ├── date.ts # Date formatting utilities
│ ├── format.ts # General formatting
│ └── validation.ts # Zod schemas
├── backend/ # Backend API (separate package)
│ ├── src/
│ │ ├── index.ts # Express app entry
│ │ ├── db/
│ │ │ ├── schema.ts # Drizzle schema (Postgres)
│ │ │ └── index.ts # DB connection
│ │ ├── routes/
│ │ │ ├── auth.ts # Register, login, me, forgot/reset password
│ │ │ ├── categories.ts # Category CRUD
│ │ │ ├── tasks.ts # Task CRUD + batch
│ │ │ ├── subtasks.ts # Subtask CRUD
│ │ │ ├── sync.ts # Pull/push sync endpoints
│ │ │ ├── users.ts # User profile & settings
│ │ │ ├── friends.ts # Friend requests, search, management
│ │ │ ├── repeatProfiles.ts# Repeat profile CRUD
│ │ │ └── pushNotifications.ts
│ │ ├── middleware/
│ │ │ ├── auth.ts # JWT verification
│ │ │ ├── errorHandler.ts
│ │ │ └── validation.ts # Zod validation middleware
│ │ ├── services/
│ │ └── utils/
│ ├── drizzle.config.ts
│ └── Dockerfile
├── electron/ # Desktop app entry
├── android/ # Native Android project
├── assets/ # Images, fonts
├── patches/ # patch-package fixes
└── plugins/ # Expo config plugins
```
---
## Data Models
### Task
@@ -135,8 +295,14 @@ carry-your-live/
categoryId: string;
priority: 'none' | 'low' | 'medium' | 'high' | 'critical';
completed: boolean;
dueDate: number; // timestamp
dueTime: string; // "HH:MM"
dueDate: number; // timestamp (ms)
dueTime: string; // "HH:MM" (24h stored, 12h displayed)
allDay: boolean;
assigneeId: string | null;
repeatProfileId: string | null;
seriesId: string | null; // For repeating tasks
isTemplate: boolean; // Series template
reminderOffset: string | null; // e.g., "5m", "1h", "1d"
createdAt: Date;
updatedAt: Date;
subtasks: Subtask[];
@@ -150,6 +316,8 @@ carry-your-live/
name: string;
color: '#HEX';
order: number;
createdAt: Date;
updatedAt: Date;
}
```
@@ -158,14 +326,47 @@ carry-your-live/
{
id: string;
taskId: string;
parentSubtaskId: string | null; // For nesting
title: string;
completed: boolean;
order: number;
assigneeId: string | null;
createdAt: Date;
updatedAt: Date;
}
```
### Repeat Profile
```typescript
{
id: string;
name: string;
frequency: 'daily' | 'weekly' | 'monthly' | 'yearly' | 'custom';
interval: number;
daysOfWeek: number[]; // 0-6 for weekly
dayOfMonth: number | null; // For monthly
monthOfYear: number | null; // For yearly
endDate: number | null; // Timestamp
occurrences: number | null;
createdAt: Date;
updatedAt: Date;
}
```
### Friendship
```typescript
{
id: string;
userId: string; // Requester
friendId: string; // Recipient
status: 'pending' | 'accepted' | 'declined' | 'blocked';
createdAt: Date;
updatedAt: Date;
}
```
---
## Default Categories
| Name | Color | Order |
|------|-------|-------|
@@ -176,6 +377,8 @@ carry-your-live/
| Health | #8E24AA (Purple) | 4 |
| Finance | #FDD835 (Yellow) | 5 |
---
## Priority Colors
| Priority | Color |
|----------|-------|
@@ -185,6 +388,8 @@ carry-your-live/
| High | #E53935 |
| Critical | #B71C1C |
---
## Getting Started
### Prerequisites
@@ -192,15 +397,23 @@ carry-your-live/
- npm or yarn
- Expo CLI (`npm install -g expo-cli`)
- iOS Simulator (Mac) / Android Studio for mobile testing
- PostgreSQL 16+ (or Docker)
### Installation
```bash
cd carry-your-live
npm install
cd ../backend
npm install
```
### Development
#### Frontend
```bash
cd carry-your-live
# Start Expo dev server
npx expo start
@@ -210,6 +423,37 @@ npx expo start --android
npx expo start --web
```
#### Backend
```bash
cd backend
# Start PostgreSQL (Docker)
docker-compose up -d postgres
# Configure environment
cp .env.example .env
# Edit .env with your settings
# Run migrations
npm run db:push
# Start dev server
npm run dev
```
Server runs at `http://localhost:3000` (health check: `GET /health`)
#### Desktop (Electron)
```bash
cd carry-your-live
# Development with live reload
npm run desktop:dev
# Production build
npm run desktop:dist
```
### Building
#### EAS Build (cloud)
@@ -225,18 +469,16 @@ eas build --platform ios
eas build --platform android
eas build --platform web
```
Profiles are defined in `eas.json` (`development`, `preview`, `production`; production auto-increments version code).
Profiles defined in `eas.json` (`development`, `preview`, `production`; production auto-increments version code).
#### Gradle (local Android APK)
The native Android project lives in `carry-your-live/android/`. Requires JDK 17+ and the Android SDK (platform 35, build-tools 35.0.0, NDK 27.1).
```bash
cd carry-your-live/android
# Debug APK (unsigned)
./gradlew assembleDebug
# Release APK (currently signed with the debug keystore)
# Release APK (signed with debug keystore)
./gradlew assembleRelease
```
Output:
@@ -244,24 +486,21 @@ Output:
android/app/build/outputs/apk/debug/app-debug.apk
android/app/build/outputs/apk/release/app-release.apk
```
Key notes:
- The debug keystore (`android/app/debug.keystore`) is generated by the CI pipeline and must exist for release builds — create it locally with the same command used in the pipeline (see below) if it's missing.
- Release builds use `signingConfig signingConfigs.debug` until a production keystore is configured.
- Versions are set in `android/app/build.gradle` (`versionCode`, `versionName`).
---
## CI/CD Pipeline (Gitea Actions)
`.gitea/workflows/build-apk.yml` builds a release APK on every push to `main` (also manually triggerable via workflow_dispatch):
`.gitea/workflows/build-apk.yml` builds a release APK on every push to `main` (also manually triggerable via `workflow_dispatch`):
1. **Checkout** and setup Node 22, JDK 17 (Temurin)
2. **Android SDK**: installs cmdline-tools, licenses, platform-tools, `platforms;android-35`, `build-tools;35.0.0`, `ndk;27.1.12297006`
3. **JS deps**: `npm ci` in `carry-your-live/`
4. **Debug keystore**: generates `carry-your-live/android/app/debug.keystore` with `keytool` (alias `androiddebugkey`, passwords `android`)
4. **Debug keystore**: generates `carry-your-live/android/app/debug.keystore` with `keytool`
5. **Build**: `./gradlew assembleRelease` in `carry-your-live/android/`
6. **Upload**: the APK is saved as the `carry-your-live-release` artifact (downloadable from the run's artifacts page)
To run the build locally exactly as CI does:
6. **Upload**: APK saved as `carry-your-live-release` artifact
To run locally exactly as CI does:
```bash
keytool -genkeypair -v \
-keystore carry-your-live/android/app/debug.keystore \
@@ -271,48 +510,119 @@ keytool -genkeypair -v \
cd carry-your-live/android && ./gradlew assembleRelease
```
## Sync API Specification
---
The app expects a custom API at `http://localhost:3000/api` (configurable in `src/database/sync.ts`):
## Backend API Specification
### Pull Changes
```
GET /sync?since={timestamp}
```
Response:
```json
{
"categories": [{ "id", "name", "color", "order", "createdAt", "updatedAt" }],
"tasks": [{ "id", "title", "description", "categoryId", "priority", "completed", "dueDate", "dueTime", "createdAt", "updatedAt" }],
"subtasks": [{ "id", "taskId", "title", "completed", "order", "createdAt", "updatedAt" }],
Server runs at `http://localhost:3000/api` (configurable in `src/services/api.ts` and `src/database/sync.ts`):
### Authentication
- `POST /api/auth/register` - Register new user
- `POST /api/auth/login` - Login (returns access + refresh tokens)
- `POST /api/auth/refresh` - Refresh access token
- `POST /api/auth/forgot-password` - Request password reset
- `POST /api/auth/reset-password` - Reset password with token
- `GET /api/auth/me` - Get current user
### Categories
- `GET /api/categories` - List categories
- `POST /api/categories` - Create category
- `PATCH /api/categories/:id` - Update category
- `DELETE /api/categories/:id` - Delete category
### Tasks
- `GET /api/tasks` - List tasks (with filters: category, completed, due date range, assignee)
- `GET /api/tasks/:id` - Get task with subtasks
- `POST /api/tasks` - Create task
- `PATCH /api/tasks/:id` - Update task
- `DELETE /api/tasks/:id` - Delete task (scopes: this/future/all for repeating)
- `POST /api/tasks/batch` - Batch operations
### Subtasks
- `GET /api/subtasks/task/:taskId` - List subtasks for task
- `POST /api/subtasks/task/:taskId` - Create subtask
- `PATCH /api/subtasks/:id` - Update subtask
- `DELETE /api/subtasks/:id` - Delete subtask
### Repeat Profiles
- `GET /api/repeat-profiles` - List repeat profiles
- `POST /api/repeat-profiles` - Create repeat profile
- `PATCH /api/repeat-profiles/:id` - Update repeat profile
- `DELETE /api/repeat-profiles/:id` - Delete repeat profile
### Users
- `GET /api/users/me` - Get user with settings
- `PATCH /api/users/me/settings` - Update settings (darkMode, defaultCategoryId, sortOrder, etc.)
- `GET /api/users/search` - Search users (for friends)
### Friends
- `GET /api/friends` - List accepted friends
- `GET /api/friends/requests` - List pending requests (incoming/outgoing)
- `POST /api/friends/request` - Send friend request
- `PATCH /api/friends/request/:id/accept` - Accept request
- `PATCH /api/friends/request/:id/decline` - Decline request
- `DELETE /api/friends/:id` - Remove friend
### Sync (Offline-first)
- `GET /api/sync?since=<timestamp>` - Pull changes since timestamp
- `POST /api/sync/push` - Push local changes
---
## Sync Protocol
The sync endpoint uses a cursor-based approach with tombstones:
1. **Pull**: Client sends `since` timestamp, server returns all changes since then
```json
{
"categories": [...],
"tasks": [...],
"subtasks": [...],
"repeatProfiles": [...],
"friendships": [...],
"tombstones": [...],
"timestamp": 1234567890
}
```
}
```
### Push Changes
```
POST /sync/push
```
Body:
```json
{
2. **Push**: Client sends batched changes with `lastPulledAt`
```json
{
"changes": {
"categories": [...],
"tasks": [...],
"subtasks": [...]
"subtasks": [...],
"repeatProfiles": [...],
"friendships": [...]
},
"tombstones": [...],
"lastPulledAt": 1234567890
}
```
}
```
3. **Conflict Resolution**: Last-write-wins based on `updatedAt` (customizable in `src/database/sync.ts`)
---
## Configuration
### Environment Variables
Create `.env` file:
### Frontend Environment Variables
Create `.env` file in `carry-your-live/`:
```
EXPO_PUBLIC_API_URL=http://your-api-url/api
```
### Backend Environment Variables
Create `.env` file in `backend/`:
```
DATABASE_URL=postgresql://user:pass@localhost:5432/carry_your_live
JWT_SECRET=your-32-char-secret
PORT=3000
NODE_ENV=development
FRONTEND_URL=http://localhost:8081
```
### App Config
Modify `app.json` for:
- App name, slug, version
@@ -320,10 +630,12 @@ Modify `app.json` for:
- Permissions (notifications, etc.)
- Orientation, theme
---
## Visual Style Guide
- **Background**: White (#FFFFFF)
- **Primary Accent**: #E53935 (Pink/Red)
- **Background**: White (#FFFFFF) / Dark mode (planned)
- **Primary Accent**: #E53935 (Pink/Red) - customizable
- **Typography**: Black (#212121) primary, #757575 secondary, #9E9E9E tertiary
- **Borders**: Thin (#E0E0E0), selected #E53935
- **Radius**: 16-20px for cards/buttons/inputs
@@ -331,11 +643,13 @@ Modify `app.json` for:
- **Shadows**: Minimal (elevation 1-3)
- **Animations**: 150-250ms, cubic easing
---
## Offline-First Architecture
```
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ Expo App │────▶│ WatermelonDB │────▶│ Your API │
│ Expo App │────▶│ WatermelonDB │────▶│ Backend │
│ (iOS/Android│ │ (SQLite) │ │ (Postgres) │
│ Web) │◀───▶│ + Sync │◀───▶│ │
└─────────────┘ └──────────────┘ └─────────────┘
@@ -345,6 +659,79 @@ Modify `app.json` for:
2. Reactive queries update UI instantly
3. Background sync pushes/pulls changes
4. Conflict resolution: last-write-wins (customizable)
5. Tombstones track deletions for sync
---
## Current Implementation Status
Based on code audit (August 2026):
| Feature | Status | Notes |
|---------|--------|-------|
| Core CRUD (tasks, subtasks, categories) | ✅ Complete | |
| Nested subtasks | ✅ Complete | Unlimited depth |
| Repeating tasks | ✅ Complete | Profiles, series, this/future/all delete |
| Categories & priorities | ✅ Complete | |
| Calendar with date strip | ✅ Complete | Month nav, day detail |
| Stats screen | ✅ Complete | Client-side only |
| Settings screen | ✅ Complete | Most settings wired |
| Friends system | ✅ Complete | Backend + UI |
| Task assignees | ✅ Complete | Schema v7, UI, sync |
| QuickAddBar | ✅ Complete | Tasks + Calendar |
| Offline sync (WatermelonDB) | ✅ Complete | Schema v21, tombstones |
| Backend API | ✅ Complete | Express + Drizzle + Postgres |
| Auth (JWT) | ✅ Complete | Register, login, refresh, forgot/reset |
| Dark mode / theme toggle | ❌ Missing | Backend column exists, UI not implemented |
| Notifications toggle | 🟡 Partial | Stored but not respected |
| Global reminder preference | 🟡 Partial | Stored but not applied |
| Forgot/reset password UI | 🟡 Partial | Backend done, no client UI |
| Pull-to-refresh → sync | 🟡 Partial | Reloads local only |
| Client settings sync | 🟡 Partial | AsyncStorage only, not synced to backend |
| Reminder enum mismatch | 🟡 Partial | Client uses '5m'/'1h', spec uses minutes |
---
## Roadmap Highlights
### v1.1.0 — Friends & Assignees (Current Unreleased)
- Ship existing Unreleased changes
- Fix notifications toggle, wire up `rescheduleAllReminders()`
- Apply global reminder preference
- Make pull-to-refresh trigger real sync
- Add forgot/reset password UI
- Unify reminder offset enums
### v1.2.0 — Theming & Findability
- Light mode + follow-system-theme
- Sync all settings to `PATCH /users/me/settings`
- Task search (filter + global)
- Friend request badges/indicators
### v1.3.0 — Stats & Insights
- Persisted stats snapshots
- Productivity trends, streaks
- Export stats (CSV/image)
### v1.4.0 — Quick Capture & Calendar UX
- Natural language quick-add
- Drag-and-drop rescheduling in calendar
- Month grid view
- "Today at a glance" dashboard
### v1.5.0 — Power Tools & Personalization
- Task templates, soft-archive, attachments
- Markdown support, deep links
- Biometric lock, haptics, reduced motion
- Android home-screen widget
### v2.0.0 — Collaboration
- Real task assignment delivery
- Shared lists with permissions
- Server push notifications (FCM/APNs)
- Comments/activity feed
---
## Contributing
@@ -353,6 +740,9 @@ Modify `app.json` for:
3. Write components with React Hook Form + Zod
4. Use WatermelonDB decorators for models
5. Test offline scenarios
6. Run `npm run lint` and `npm run typecheck` before committing
---
## License
-1
View File
@@ -41,4 +41,3 @@ yarn-error.*
# generated native folders
/ios
/android
+19
View File
@@ -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
+182
View File
@@ -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
}
}
Binary file not shown.
+14
View File
@@ -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:
@@ -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>
@@ -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>
@@ -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>
@@ -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()
}
}
@@ -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)
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 1010 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 584 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

@@ -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>
@@ -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>
@@ -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>
@@ -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>
Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

@@ -0,0 +1,3 @@
<resources>
<color name="appBackground">#121212</color>
</resources>
@@ -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>
@@ -0,0 +1,3 @@
<resources>
<string name="app_name">carry-your-live</string>
</resources>
@@ -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>
+37
View File
@@ -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
}
}
}
+66
View File
@@ -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
@@ -0,0 +1,2 @@
#This file is generated by updateDaemonJvm
toolchainVersion=17
Binary file not shown.
@@ -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
+248
View File
@@ -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" "$@"
+93
View File
@@ -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
+42
View File
@@ -0,0 +1,42 @@
pluginManagement {
repositories {
gradlePluginPortal()
}
def reactNativeGradlePlugin = new File(
providers.exec {
workingDir(rootDir)
commandLine("node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })")
}.standardOutput.asText.get().trim()
).getParentFile().absolutePath
includeBuild(reactNativeGradlePlugin)
def expoPluginsPath = new File(
providers.exec {
workingDir(rootDir)
commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
}.standardOutput.asText.get().trim(),
"../android/expo-gradle-plugin"
).absolutePath
includeBuild(expoPluginsPath)
}
plugins {
id("com.facebook.react.settings")
id("expo-autolinking-settings")
}
extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
ex.autolinkLibrariesFromCommand()
} else {
ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand)
}
}
expoAutolinking.useExpoModules()
rootProject.name = 'carry-your-live'
expoAutolinking.useExpoVersionCatalog()
include ':app'
includeBuild(expoAutolinking.reactNativeGradlePlugin)
+3 -1
View File
@@ -34,7 +34,9 @@
"color": "#1E88E5"
}
],
"./plugins/withQuickAddWidget"
"./plugins/withQuickAddWidget",
"expo-router",
"expo-sqlite"
],
"extra": {
"eas": {
+48 -31
View File
@@ -1,7 +1,7 @@
import { Tabs } from 'expo-router';
import React from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { View, StyleSheet, TouchableOpacity, Animated } from 'react-native';
import { TabBarIcon } from '@/components/TabBarIcon';
import { useSettings } from '@/theme';
import { setLastVisitedTab } from '@/utils/tabHistory';
@@ -18,28 +18,29 @@ export default function TabLayout() {
tabBarStyle: {
backgroundColor: theme.tabBarBg,
borderTopWidth: 0,
height: 84 + insets.bottom,
height: 56,
paddingBottom: insets.bottom,
paddingTop: 12,
paddingTop: insets.top,
paddingHorizontal: 16,
elevation: 0,
elevation: 4,
shadowColor: '#000',
shadowOffset: { width: 0, height: -4 },
shadowOpacity: 0.12,
shadowRadius: 20,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 8,
},
tabBarItemStyle: {
paddingVertical: 0,
paddingVertical: 6,
paddingHorizontal: 12,
},
tabBarLabelStyle: {
fontSize: 11,
fontWeight: '700',
marginTop: 4,
fontSize: 12,
fontWeight: '600',
marginTop: 2,
},
headerShown: false,
sceneStyle: { backgroundColor: theme.background },
}}
tabBar={(props) => {
tabBar={props => {
return (
<View
style={[
@@ -48,34 +49,49 @@ export default function TabLayout() {
backgroundColor: theme.tabBarBg,
paddingBottom: Math.max(props.insets.bottom, 8),
shadowColor: '#000',
shadowOffset: { width: 0, height: -4 },
shadowOpacity: 0.12,
shadowRadius: 20,
elevation: 8,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
},
]}
>
{props.navigation.getState().routes.map((route) => {
const focused = props.navigation.getState().index === props.navigation.getState().routes.indexOf(route);
{props.navigation.getState().routes.map(route => {
const focused =
props.navigation.getState().index ===
props.navigation.getState().routes.indexOf(route);
return (
<TouchableOpacity
key={route.name}
style={[
styles.tabItem,
focused && styles.tabItemActive,
{ backgroundColor: focused ? theme.accentSoft : 'transparent' },
]}
onPress={() => props.navigation.navigate(route.name as never)}
accessibilityRole="button"
accessibilityLabel={route.name === 'index' ? 'ToDo' : route.name.charAt(0).toUpperCase() + route.name.slice(1)}
accessibilityLabel={
route.name === 'index'
? 'ToDo'
: route.name.charAt(0).toUpperCase() + route.name.slice(1)
}
accessibilityState={{ selected: focused }}
>
<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'}
name={
route.name === 'index'
? 'checklist'
: route.name === 'calendar'
? 'calendar'
: route.name === 'stats'
? 'stats'
: 'gear'
}
focused={focused}
color={focused ? theme.accent : theme.textSecondary}
size={24}
/>
</Animated.View>
</TouchableOpacity>
);
})}
@@ -103,22 +119,23 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
paddingTop: 10,
paddingTop: 6,
paddingHorizontal: 16,
},
tabItem: {
flex: 1,
alignItems: 'center',
paddingVertical: 8,
paddingHorizontal: 8,
borderRadius: 16,
paddingVertical: 6,
paddingHorizontal: 12,
borderRadius: 8,
minWidth: 70,
},
tabItemActive: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
rippleContainer: {
width: 44,
height: 44,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
},
});
+176 -40
View File
@@ -1,5 +1,15 @@
import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
import { View, Text, StyleSheet, SafeAreaView, ScrollView, TouchableOpacity, Animated, Dimensions, KeyboardAvoidingView } from 'react-native';
import {
View,
Text,
StyleSheet,
SafeAreaView,
ScrollView,
TouchableOpacity,
Animated,
Dimensions,
KeyboardAvoidingView,
} from 'react-native';
import { useRouter, useFocusEffect } from 'expo-router';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { Header } from '@/components/Header';
@@ -15,7 +25,15 @@ import { OptionPickerModal } from '@/components/OptionPickerModal';
import { TaskItem } from '@/components/TaskItem';
import { SubtaskItem } from '@/components/SubtaskItem';
import Task from '@/models/Task';
import { format, addMonths, addDays, startOfMonth, isSameDay, isSameMonth, isToday } from 'date-fns';
import {
format,
addMonths,
addDays,
startOfMonth,
isSameDay,
isSameMonth,
isToday,
} from 'date-fns';
import Svg, { Path } from 'react-native-svg';
import type { ThemeColors } from '@/theme';
import type { TaskData, SubtaskData } from '@/types';
@@ -24,8 +42,18 @@ const WIDTH = Dimensions.get('window').width;
const GERMAN_WEEKDAYS = ['mo', 'di', 'mi', 'do', 'fr', 'sa', 'so'];
const PRIORITY_RANK: Record<string, number> = { none: 0, low: 1, medium: 2, high: 3, critical: 4 };
const MONTH_NAMES = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December',
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
export default function CalendarScreen() {
@@ -70,7 +98,9 @@ export default function CalendarScreen() {
const sorted = [...selectedDayTasks];
switch (sortBy) {
case 'date':
sorted.sort((a, b) => (a.dueDate || Number.MAX_SAFE_INTEGER) - (b.dueDate || Number.MAX_SAFE_INTEGER));
sorted.sort(
(a, b) => (a.dueDate || Number.MAX_SAFE_INTEGER) - (b.dueDate || Number.MAX_SAFE_INTEGER)
);
break;
case 'priority':
sorted.sort((a, b) => PRIORITY_RANK[b.priority] - PRIORITY_RANK[a.priority]);
@@ -118,10 +148,18 @@ export default function CalendarScreen() {
animatingRef.current = true;
const w = gridWidthRef.current || WIDTH;
const target = dir === 1 ? -w : w;
Animated.timing(translateX.current, { toValue: target, duration: 220, useNativeDriver: false }).start(() => {
Animated.timing(translateX.current, {
toValue: target,
duration: 220,
useNativeDriver: false,
}).start(() => {
setVisibleMonth(next);
translateX.current.setValue(-target);
Animated.timing(translateX.current, { toValue: 0, duration: 180, useNativeDriver: false }).start(() => {
Animated.timing(translateX.current, {
toValue: 0,
duration: 180,
useNativeDriver: false,
}).start(() => {
animatingRef.current = false;
});
});
@@ -148,11 +186,11 @@ export default function CalendarScreen() {
.minDistance(6)
.runOnJS(true)
// eslint-disable-next-line react-hooks/refs
.onUpdate((e) => {
.onUpdate(e => {
if (!animatingRef.current) translateX.current.setValue(e.translationX);
})
// eslint-disable-next-line react-hooks/refs
.onEnd((e) => {
.onEnd(e => {
if (animatingRef.current) return;
const w = gridWidthRef.current || WIDTH;
const dx = e.translationX;
@@ -183,22 +221,26 @@ export default function CalendarScreen() {
const monthOptions = MONTH_NAMES.map((label, i) => ({ value: String(i), label }));
const yearOptions = useMemo(() => {
const options: { value: string; label: string }[] = [];
for (let y = currentYear - 20; y <= currentYear + 10; y++) options.push({ value: String(y), label: String(y) });
for (let y = currentYear - 20; y <= currentYear + 10; y++)
options.push({ value: String(y), label: String(y) });
return options;
}, [currentYear]);
const handleToggleComplete = useCallback(async (taskId: string) => {
const handleToggleComplete = useCallback(
async (taskId: string) => {
await confirmAndToggleTaskComplete(taskId, () => {
refreshDayTasks();
refreshMonthTasks();
refreshSubtasks();
});
}, [refreshDayTasks, refreshMonthTasks, refreshSubtasks]);
},
[refreshDayTasks, refreshMonthTasks, refreshSubtasks]
);
const [expandedTasks, setExpandedTasks] = useState<Set<string>>(new Set());
const toggleExpand = useCallback((taskId: string) => {
setExpandedTasks((prev) => {
setExpandedTasks(prev => {
const next = new Set(prev);
if (next.has(taskId)) {
next.delete(taskId);
@@ -209,22 +251,51 @@ export default function CalendarScreen() {
});
}, []);
const handleSubtaskToggle = useCallback(async (subtaskId: string) => {
const handleSubtaskToggle = useCallback(
async (subtaskId: string) => {
await toggleSubtaskComplete(subtaskId);
refreshDayTasks();
refreshMonthTasks();
refreshSubtasks();
}, [refreshDayTasks, refreshMonthTasks, refreshSubtasks]);
},
[refreshDayTasks, refreshMonthTasks, refreshSubtasks]
);
return (
<SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
<Header title="Calendar" showLogo={false} />
<Header
title="Calendar"
showLogo={false}
rightAction={
<TouchableOpacity
onPress={() => router.back()}
style={styles.backButton}
accessible={true}
accessibilityLabel="Back"
>
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path
d="M15 18l-6-6 6-6"
stroke="currentColor"
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
</TouchableOpacity>
}
/>
<KeyboardAvoidingView style={styles.kbAvoid} behavior="padding">
<ScrollView style={styles.scrollBody} showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>
<ScrollView
style={styles.scrollBody}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.scrollContent}
>
<GestureDetector gesture={pan}>
<Animated.View
onLayout={(e) => {
onLayout={e => {
gridWidthRef.current = e.nativeEvent.layout.width;
}}
// eslint-disable-next-line react-hooks/refs
@@ -233,34 +304,73 @@ export default function CalendarScreen() {
<View style={styles.monthRow}>
<TouchableOpacity
onPress={() => transitionTo(-1)}
style={[styles.monthNav, { borderColor: theme.borderStrong, backgroundColor: theme.card }]}
style={[
styles.monthNav,
{ borderColor: theme.borderStrong, backgroundColor: theme.card },
]}
activeOpacity={0.7}
>
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path d="M15 18l-6-6 6-6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
<Path
d="M15 18l-6-6 6-6"
stroke={theme.textSecondary}
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
</TouchableOpacity>
<View style={styles.monthSelectorGroup}>
<TouchableOpacity onPress={() => setMonthPickerVisible(true)} activeOpacity={0.7} style={styles.monthButton}>
<Text style={[styles.monthLabel, { color: theme.text }]}>{format(visibleMonth, 'MMMM')}</Text>
<TouchableOpacity
onPress={() => setMonthPickerVisible(true)}
activeOpacity={0.7}
style={styles.monthButton}
>
<Text style={[styles.monthLabel, { color: theme.text }]}>
{format(visibleMonth, 'MMMM')}
</Text>
<Svg width={14} height={14} viewBox="0 0 24 24">
<Path d="M6 9l6 6 6-6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
<Path
d="M6 9l6 6 6-6"
stroke={theme.textSecondary}
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
</TouchableOpacity>
</View>
<TouchableOpacity onPress={() => setYearPickerVisible(true)} activeOpacity={0.7} style={styles.yearButton}>
<Text style={[styles.yearLabel, { color: theme.textMuted }]}>{format(visibleMonth, 'yyyy')}</Text>
<TouchableOpacity
onPress={() => setYearPickerVisible(true)}
activeOpacity={0.7}
style={styles.yearButton}
>
<Text style={[styles.yearLabel, { color: theme.textMuted }]}>
{format(visibleMonth, 'yyyy')}
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => transitionTo(1)}
style={[styles.monthNav, { borderColor: theme.borderStrong, backgroundColor: theme.card }]}
style={[
styles.monthNav,
{ borderColor: theme.borderStrong, backgroundColor: theme.card },
]}
activeOpacity={0.7}
>
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path d="M9 6l6 6-6 6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
<Path
d="M9 6l6 6-6 6"
stroke={theme.textSecondary}
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
</TouchableOpacity>
</View>
@@ -275,7 +385,7 @@ export default function CalendarScreen() {
{weeks.map((week, wi) => (
<View key={wi} style={styles.weekRow}>
{week.map((day) => (
{week.map(day => (
<DayCell
key={day.toISOString()}
day={day}
@@ -294,7 +404,9 @@ export default function CalendarScreen() {
</GestureDetector>
<View style={styles.panelHeader}>
<Text style={[styles.panelDate, { color: theme.text }]}>{format(selectedDate, 'EEEE, MMMM d')}</Text>
<Text style={[styles.panelDate, { color: theme.text }]}>
{format(selectedDate, 'EEEE, MMMM d')}
</Text>
{sortedDayTasks.length > 0 && (
<Text style={[styles.panelCount, { color: theme.textFaint }]}>
{sortedDayTasks.length} event{sortedDayTasks.length === 1 ? '' : 's'}
@@ -304,11 +416,15 @@ export default function CalendarScreen() {
{sortedDayTasks.length === 0 ? (
<View style={styles.emptyState}>
<Text style={[styles.emptyText, { color: theme.textSecondary }]}>No events on this day</Text>
<Text style={[styles.emptySubtext, { color: theme.textMuted }]}>Tap a date or use the bar below</Text>
<Text style={[styles.emptyText, { color: theme.textSecondary }]}>
No events on this day
</Text>
<Text style={[styles.emptySubtext, { color: theme.textMuted }]}>
Tap a date or use the bar below
</Text>
</View>
) : (
sortedDayTasks.map((task) => {
sortedDayTasks.map(task => {
const isExpanded = expandedTasks.has(task.id);
const itemSubtasks = subtasksByTask.get(task.id) ?? [];
return (
@@ -319,12 +435,12 @@ export default function CalendarScreen() {
subtasks={itemSubtasks}
categoryColor={categoryColors.get(task.categoryId)}
onToggle={() => handleToggleComplete(task.id)}
onPress={(id) =>
onPress={id =>
expandedTasks.has(id)
? router.push({ pathname: '/task-detail', params: { id } })
: toggleExpand(id)
}
onMenuOpen={(id) => openTaskEdit(id)}
onMenuOpen={id => openTaskEdit(id)}
onSubtaskToggle={handleSubtaskToggle}
/>
</View>
@@ -404,7 +520,7 @@ const CalendarTaskRow = React.memo(function CalendarTaskRow({
/>
{expanded && sortedSubtasks.length > 0 && (
<View style={styles.subtaskList}>
{sortedSubtasks.map((sub) => (
{sortedSubtasks.map(sub => (
<SubtaskItem
key={sub.id}
subtask={sub}
@@ -425,7 +541,11 @@ function cellTitle(tasks: Task[]): string | null {
return `${tasks[0].title} +${tasks.length - 1}`;
}
function cellColor(tasks: Task[], categories: { id: string; color: string }[], theme: ThemeColors): string {
function cellColor(
tasks: Task[],
categories: { id: string; color: string }[],
theme: ThemeColors
): string {
if (tasks.length === 0) return theme.textMuted;
return theme.accent;
}
@@ -441,11 +561,23 @@ interface DayCellProps {
onPress: (day: Date) => void;
}
const DayCell = React.memo(function DayCell({ day, label, dotColor, selected, today, inMonth, theme, onPress }: DayCellProps) {
const DayCell = React.memo(function DayCell({
day,
label,
dotColor,
selected,
today,
inMonth,
theme,
onPress,
}: DayCellProps) {
const styles = React.useMemo(() => createStyles(theme), [theme]);
return (
<TouchableOpacity
style={[styles.dayCell, selected && { backgroundColor: theme.accentSoft, borderColor: theme.accentBorder }]}
style={[
styles.dayCell,
selected && { backgroundColor: theme.accentSoft, borderColor: theme.accentBorder },
]}
onPress={() => onPress(day)}
activeOpacity={0.7}
>
@@ -473,7 +605,8 @@ const DayCell = React.memo(function DayCell({ day, label, dotColor, selected, to
);
});
const createStyles = (theme: ThemeColors) => StyleSheet.create({
const createStyles = (theme: ThemeColors) =>
StyleSheet.create({
container: {
flex: 1,
},
@@ -609,6 +742,9 @@ const createStyles = (theme: ThemeColors) => StyleSheet.create({
emptySubtext: {
fontSize: 13,
},
backButton: {
padding: 8,
},
eventCard: {
marginHorizontal: 16,
marginTop: 6,
@@ -618,4 +754,4 @@ const createStyles = (theme: ThemeColors) => StyleSheet.create({
paddingRight: 4,
paddingTop: 4,
},
});
});
+28 -8
View File
@@ -1,5 +1,13 @@
import React, { useCallback, useMemo, useState } from 'react';
import { View, Text, StyleSheet, SafeAreaView, KeyboardAvoidingView, TouchableOpacity, BackHandler } from 'react-native';
import {
View,
Text,
StyleSheet,
SafeAreaView,
KeyboardAvoidingView,
TouchableOpacity,
BackHandler,
} from 'react-native';
import { useFocusEffect } from 'expo-router';
import { Header } from '@/components/Header';
import { CategoryFilter } from '@/components/CategoryFilter';
@@ -39,7 +47,10 @@ export default function TasksScreen() {
<TouchableOpacity
style={[
styles.completedToggle,
{ backgroundColor: theme.card, borderColor: showCompleted ? theme.accent : theme.borderStrong },
{
backgroundColor: theme.card,
borderColor: showCompleted ? theme.accent : theme.borderStrong,
},
]}
onPress={() => setShowCompleted(!showCompleted)}
activeOpacity={0.8}
@@ -57,18 +68,27 @@ export default function TasksScreen() {
fill="none"
/>
{showCompleted && (
<Path d="M7 12.5l3.5 3.5 6.5-7" stroke={theme.accent} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" />
<Path
d="M7 12.5l3.5 3.5 6.5-7"
stroke={theme.accent}
strokeWidth={2.2}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
)}
</Svg>
<Text style={[styles.completedToggleText, { color: showCompleted ? theme.text : theme.textMuted }]}>
<Text
style={[
styles.completedToggleText,
{ color: showCompleted ? theme.text : theme.textMuted },
]}
>
Completed
</Text>
</TouchableOpacity>
</View>
<KeyboardAvoidingView
style={styles.kbAvoid}
behavior="padding"
>
<KeyboardAvoidingView style={styles.kbAvoid} behavior="padding">
<TaskList categoryIds={categoryIds} showCompleted={showCompleted} />
<QuickAddBar />
</KeyboardAvoidingView>
+232 -57
View File
@@ -1,5 +1,18 @@
import React, { useState, useCallback } from 'react';
import { View, Text, StyleSheet, SafeAreaView, ScrollView, Switch, TouchableOpacity, Alert, Linking, Modal, Pressable, BackHandler } from 'react-native';
import {
View,
Text,
StyleSheet,
SafeAreaView,
ScrollView,
Switch,
TouchableOpacity,
Alert,
Linking,
Modal,
Pressable,
BackHandler,
} from 'react-native';
import { useFocusEffect, useRouter } from 'expo-router';
import { Header } from '@/components/Header';
import { ListItem } from '@/components/ListItem';
@@ -10,7 +23,15 @@ import { FriendsModal } from '@/components/FriendsModal';
import { LegalModal } from '@/components/LegalModal';
import { ServerUrlModal } from '@/components/ServerUrlModal';
import SyncStatus from '@/components/SyncStatus';
import { useSettings, SORT_OPTIONS, REMINDER_OPTIONS, ACCENT_PRESETS, DEFAULT_ACCENT } from '@/theme';
import {
useSettings,
SORT_OPTIONS,
REMINDER_OPTIONS,
ACCENT_PRESETS,
DEFAULT_ACCENT,
DEFAULT_ACCENT_OPACITY,
ThemeMode,
} from '@/theme';
import { useCategories } from '@/hooks/useDatabase';
import { getAuthUser, getAuthToken } from '@/services/auth';
import { checkForUpdates, getCurrentAppVersion } from '@/services/updates';
@@ -24,9 +45,38 @@ import { getLastVisitedTab, tabHref } from '@/utils/tabHistory';
export default function SettingsScreen() {
const router = useRouter();
const { theme, notifications, setNotifications, defaultCategoryId, setDefaultCategoryId, sortBy, setSortBy, reminderPreference, setReminderPreference, tagReminderPreferences, setTagReminderPreferences, apiUrl, accentColor, setAccentColor, todoAheadDays, setTodoAheadDays, showCompleted, setShowCompleted, deleteBySwipe, setDeleteBySwipe } = useSettings();
const {
theme,
notifications,
setNotifications,
defaultCategoryId,
setDefaultCategoryId,
sortBy,
setSortBy,
reminderPreference,
setReminderPreference,
tagReminderPreferences,
setTagReminderPreferences,
apiUrl,
accentColor,
setAccentColor,
accentOpacity,
setAccentOpacity,
todoAheadDays,
setTodoAheadDays,
showCompleted,
setShowCompleted,
deleteBySwipe,
setDeleteBySwipe,
themeMode,
setThemeMode,
syncSettingsToServer,
loadSettingsFromServer,
} = useSettings();
const categories = useCategories();
const [picker, setPicker] = useState<null | 'category' | 'sort' | 'reminder' | 'todoAhead'>(null);
const [picker, setPicker] = useState<
null | 'category' | 'sort' | 'reminder' | 'todoAhead' | 'themeMode'
>(null);
const [reminderTagPicker, setReminderTagPicker] = useState<Category | null>(null);
const [editingCategory, setEditingCategory] = useState<Category | null | 'new'>(null);
const [syncVisible, setSyncVisible] = useState(false);
@@ -35,18 +85,22 @@ export default function SettingsScreen() {
const [serverUrlVisible, setServerUrlVisible] = useState(false);
const [customAccentVisible, setCustomAccentVisible] = useState(false);
const [draftAccent, setDraftAccent] = useState(accentColor);
const [draftAccentOpacity, setDraftAccentOpacity] = useState(accentOpacity);
const [syncSubtitle, setSyncSubtitle] = useState('Checking...');
const [updateSubtitle, setUpdateSubtitle] = useState('Tap to check');
const [lastUpdateCheck, setLastUpdateCheck] = useState<string | null>(null);
const handleCheckUpdates = async () => {
setUpdateSubtitle('Checking...');
const update = await checkForUpdates();
if (!update) {
setUpdateSubtitle('Up to date');
setLastUpdateCheck(new Date().toLocaleString());
Alert.alert('Up to date', `You're running the latest version (${getCurrentAppVersion()}).`);
return;
}
setUpdateSubtitle(`${update.version} available`);
setLastUpdateCheck(new Date().toLocaleString());
const url = update.apkUrl ?? update.releaseUrl;
Alert.alert('Update available', `Version ${update.version} is available for download.`, [
{ text: 'Later', style: 'cancel' },
@@ -59,6 +113,17 @@ export default function SettingsScreen() {
]);
};
const checkForUpdatesOnLoad = async () => {
const update = await checkForUpdates();
if (!update) {
setUpdateSubtitle('Up to date');
setLastUpdateCheck(new Date().toLocaleString());
return;
}
setUpdateSubtitle(`${update.version} available`);
setLastUpdateCheck(new Date().toLocaleString());
};
const refreshSyncStatus = async () => {
const token = await getAuthToken();
if (!token) {
@@ -69,7 +134,9 @@ export default function SettingsScreen() {
const lastSync = await getLastSyncTime();
if (user) {
setSyncSubtitle(
lastSync ? `Signed in · synced ${formatSyncTime(lastSync)}` : `Signed in as ${user.username}`
lastSync
? `Signed in · synced ${formatSyncTime(lastSync)}`
: `Signed in as ${user.username}`
);
} else {
setSyncSubtitle('Not signed in');
@@ -83,6 +150,8 @@ export default function SettingsScreen() {
useFocusEffect(
useCallback(() => {
refreshSyncStatus();
checkForUpdatesOnLoad();
const sub = BackHandler.addEventListener('hardwareBackPress', () => {
const target = getLastVisitedTab();
if (target && target !== 'settings') {
@@ -91,19 +160,18 @@ export default function SettingsScreen() {
return true;
});
return () => sub.remove();
}, [router])
}, [refreshSyncStatus, router])
);
const defaultCategory = categories.find((c) => c.id === defaultCategoryId);
const defaultCategory = categories.find(c => c.id === defaultCategoryId);
const defaultCategoryLabel = defaultCategory?.name ?? 'None';
const reminderLabel = REMINDER_OPTIONS.find((o) => o.value === reminderPreference)?.label ?? 'No reminder';
const reminderLabel =
REMINDER_OPTIONS.find(o => o.value === reminderPreference)?.label ?? 'No reminder';
const tagReminderLabel = (categoryId: string) => {
const selected = tagReminderPreferences[categoryId] ?? [];
if (selected.length === 0) return `Default (${reminderLabel})`;
return selected
.map((v) => REMINDER_OPTIONS.find((o) => o.value === v)?.label ?? v)
.join(', ');
return selected.map(v => REMINDER_OPTIONS.find(o => o.value === v)?.label ?? v).join(', ');
};
const openCustomAccent = () => {
@@ -145,14 +213,12 @@ export default function SettingsScreen() {
<Header title="Settings" showLogo={false} />
<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
<Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Tags</Text>
{categories.map((category) => (
{categories.map(category => (
<ListItem
key={category.id}
title={category.name}
subtitle={category.id === defaultCategoryId ? 'Default tag' : undefined}
leftElement={
<View style={[styles.categoryDot, { backgroundColor: category.color }]} />
}
leftElement={<View style={[styles.categoryDot, { backgroundColor: category.color }]} />}
onPress={() => setEditingCategory(category)}
showChevron
/>
@@ -164,7 +230,12 @@ export default function SettingsScreen() {
>
<View style={[styles.addIcon, { backgroundColor: theme.accentSoft }]}>
<Svg width={16} height={16} viewBox="0 0 24 24">
<Path d="M12 5v14M5 12h14" stroke={theme.accentText} strokeWidth={2} strokeLinecap="round" />
<Path
d="M12 5v14M5 12h14"
stroke={theme.accentText}
strokeWidth={2}
strokeLinecap="round"
/>
</Svg>
</View>
<Text style={[styles.addCategoryText, { color: theme.accent }]}>Add Tag</Text>
@@ -176,7 +247,18 @@ export default function SettingsScreen() {
rightElement={
<Switch
value={notifications}
onValueChange={setNotifications}
onValueChange={async value => {
setNotifications(value);
if (!value) {
const { cancelAllReminders } = await import('@/services/notifications');
await cancelAllReminders();
} else {
const { rescheduleAllReminders } = await import('@/services/notifications');
const { collections } = await import('@/database');
const tasks = await collections.tasks.query().fetch();
await rescheduleAllReminders(tasks, true, reminderPreference);
}
}}
thumbColor="#FFFFFF"
trackColor={{ false: theme.borderStrong, true: theme.accent }}
/>
@@ -188,14 +270,12 @@ export default function SettingsScreen() {
onPress={() => notifications && setPicker('reminder')}
showChevron
/>
{categories.map((category) => (
{categories.map(category => (
<ListItem
key={`tag-reminder-${category.id}`}
title={category.name}
subtitle={notifications ? tagReminderLabel(category.id) : 'Enable notifications first'}
leftElement={
<View style={[styles.categoryDot, { backgroundColor: category.color }]} />
}
leftElement={<View style={[styles.categoryDot, { backgroundColor: category.color }]} />}
onPress={() => notifications && setReminderTagPicker(category)}
showChevron
/>
@@ -209,7 +289,7 @@ export default function SettingsScreen() {
/>
<ListItem
title="Sort Tasks By"
subtitle={SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Date'}
subtitle={SORT_OPTIONS.find(o => o.value === sortBy)?.label ?? 'Date'}
onPress={() => setPicker('sort')}
showChevron
/>
@@ -247,7 +327,7 @@ export default function SettingsScreen() {
<Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Appearance</Text>
<Text style={[styles.sectionHint, { color: theme.textFaint }]}>Accent color</Text>
<View style={styles.accentPresets}>
{ACCENT_PRESETS.map((c) => (
{ACCENT_PRESETS.map(c => (
<TouchableOpacity
key={c}
style={[
@@ -260,7 +340,14 @@ export default function SettingsScreen() {
>
{accentColor.toUpperCase() === c && (
<Svg width={16} height={16} viewBox="0 0 24 24">
<Path d="M5 12l5 5 9-10" stroke={contrastOnSwatch(c)} strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" fill="none" />
<Path
d="M5 12l5 5 9-10"
stroke={contrastOnSwatch(c)}
strokeWidth={3}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
)}
</TouchableOpacity>
@@ -273,6 +360,15 @@ export default function SettingsScreen() {
onPress={openCustomAccent}
showChevron
/>
<Text style={[styles.sectionHint, { color: theme.textFaint }]}>Theme</Text>
<ListItem
title="Theme Mode"
subtitle={
themeMode === 'system' ? 'System default' : themeMode === 'dark' ? 'Dark' : 'Light'
}
onPress={() => setPicker('themeMode')}
showChevron
/>
<Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Data</Text>
<SyncStatus />
<ListItem
@@ -281,6 +377,32 @@ export default function SettingsScreen() {
onPress={() => setSyncVisible(true)}
showChevron
/>
<ListItem
title="Sync Settings to Server"
subtitle="Push local settings to backend"
onPress={async () => {
try {
await syncSettingsToServer();
Alert.alert('Success', 'Settings synced to server');
} catch {
Alert.alert('Error', 'Failed to sync settings');
}
}}
showChevron
/>
<ListItem
title="Load Settings from Server"
subtitle="Pull settings from backend"
onPress={async () => {
try {
await loadSettingsFromServer();
Alert.alert('Success', 'Settings loaded from server');
} catch {
Alert.alert('Error', 'Failed to load settings');
}
}}
showChevron
/>
<ListItem
title="Friends"
subtitle="Manage friends and requests"
@@ -301,26 +423,19 @@ export default function SettingsScreen() {
onPress={handleCheckUpdates}
showChevron
/>
<ListItem
title="Version"
subtitle={getCurrentAppVersion()}
/>
<ListItem
title="Privacy Policy"
onPress={() => setLegalVisible('privacy')}
showChevron
/>
<ListItem
title="Terms of Service"
onPress={() => setLegalVisible('terms')}
showChevron
/>
<ListItem title="Last checked" subtitle={lastUpdateCheck ?? 'Never'} />
<ListItem title="Version" subtitle={getCurrentAppVersion()} />
<ListItem title="Privacy Policy" onPress={() => setLegalVisible('privacy')} showChevron />
<ListItem title="Terms of Service" onPress={() => setLegalVisible('terms')} showChevron />
</ScrollView>
<OptionPickerModal
visible={picker === 'category'}
title="Default Tag"
options={[{ value: '', label: 'None', color: theme.textMuted }, ...categories.map((c) => ({ value: c.id, label: c.name, color: c.color }))]}
options={[
{ value: '', label: 'None', color: theme.textMuted },
...categories.map(c => ({ value: c.id, label: c.name, color: c.color })),
]}
selectedValue={defaultCategoryId}
onSelect={handleDefaultCategory}
onClose={() => setPicker(null)}
@@ -331,7 +446,7 @@ export default function SettingsScreen() {
title="Sort Tasks By"
options={SORT_OPTIONS}
selectedValue={sortBy}
onSelect={(value) => setSortBy(value as typeof sortBy)}
onSelect={value => setSortBy(value as typeof sortBy)}
onClose={() => setPicker(null)}
/>
@@ -344,15 +459,15 @@ export default function SettingsScreen() {
onClose={() => setPicker(null)}
/>
{categories.map((category) => (
{categories.map(category => (
<OptionPickerModal
key={`tag-reminder-picker-${category.id}`}
visible={reminderTagPicker?.id === category.id}
title={`Reminders · ${category.name}`}
options={REMINDER_OPTIONS.filter((o) => o.value !== 'none')}
options={REMINDER_OPTIONS.filter(o => o.value !== 'none')}
selectedValue={tagReminderPreferences[category.id] ?? []}
multiSelect
onSelect={(value) => handleTagReminderPreference(category.id, value)}
onSelect={value => handleTagReminderPreference(category.id, value)}
onClose={() => setReminderTagPicker(null)}
/>
))}
@@ -366,6 +481,15 @@ export default function SettingsScreen() {
onClose={() => setPicker(null)}
/>
<OptionPickerModal
visible={picker === 'themeMode'}
title="Theme Mode"
options={THEME_MODE_OPTIONS}
selectedValue={themeMode}
onSelect={value => setThemeMode(value as ThemeMode)}
onClose={() => setPicker(null)}
/>
<CategoryEditorModal
visible={editorVisible}
category={editorCategory}
@@ -373,41 +497,86 @@ export default function SettingsScreen() {
onClose={() => setEditingCategory(null)}
/>
<SyncModal visible={syncVisible} onClose={() => { setSyncVisible(false); refreshSyncStatus(); }} />
<SyncModal
visible={syncVisible}
onClose={() => {
setSyncVisible(false);
refreshSyncStatus();
}}
/>
<FriendsModal visible={friendsVisible} onClose={() => setFriendsVisible(false)} />
<ServerUrlModal visible={serverUrlVisible} onClose={() => setServerUrlVisible(false)} />
<Modal visible={customAccentVisible} transparent animationType="fade" onRequestClose={() => setCustomAccentVisible(false)}>
<Modal
visible={customAccentVisible}
transparent
animationType="fade"
onRequestClose={() => setCustomAccentVisible(false)}
>
<Pressable style={styles.accentModalOverlay} onPress={() => setCustomAccentVisible(false)}>
<Pressable
style={styles.accentModalOverlay}
onPress={() => setCustomAccentVisible(false)}
style={[styles.accentModalSheet, { backgroundColor: theme.sheetBg }]}
onPress={() => {}}
>
<Pressable style={[styles.accentModalSheet, { backgroundColor: theme.sheetBg }]} onPress={() => {}}>
<View style={styles.accentModalHeader}>
<Text style={[styles.accentModalTitle, { color: theme.text }]}>Custom Accent Color</Text>
<TouchableOpacity onPress={() => setCustomAccentVisible(false)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
<Text style={[styles.accentModalTitle, { color: theme.text }]}>
Custom Accent Color
</Text>
<TouchableOpacity
onPress={() => setCustomAccentVisible(false)}
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
>
<Svg width={18} height={18} viewBox="0 0 24 24">
<Path d="M18 6L6 18M6 6l12 12" stroke={theme.textSecondary} strokeWidth={2.2} strokeLinecap="round" />
<Path
d="M18 6L6 18M6 6l12 12"
stroke={theme.textSecondary}
strokeWidth={2.2}
strokeLinecap="round"
/>
</Svg>
</TouchableOpacity>
</View>
<ColorWheel color={draftAccent} onChange={setDraftAccent} />
<ColorWheel
color={draftAccent}
opacity={draftAccentOpacity}
onChange={(color, opacity) => {
setDraftAccent(color);
setDraftAccentOpacity(opacity);
}}
/>
<View style={styles.accentModalActions}>
<TouchableOpacity
style={[styles.accentModalButton, { borderColor: theme.borderStrong }]}
onPress={() => { setDraftAccent(DEFAULT_ACCENT); setAccentColor(DEFAULT_ACCENT); }}
onPress={() => {
setDraftAccent(DEFAULT_ACCENT);
setDraftAccentOpacity(DEFAULT_ACCENT_OPACITY);
setAccentColor(DEFAULT_ACCENT);
setAccentOpacity(DEFAULT_ACCENT_OPACITY);
}}
activeOpacity={0.7}
>
<Text style={[styles.accentModalButtonText, { color: theme.textSecondary }]}>Reset</Text>
<Text style={[styles.accentModalButtonText, { color: theme.textSecondary }]}>
Reset
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.accentModalButton, styles.accentModalButtonPrimary, { backgroundColor: theme.accent }]}
onPress={() => { setAccentColor(draftAccent); setCustomAccentVisible(false); }}
style={[
styles.accentModalButton,
styles.accentModalButtonPrimary,
{ backgroundColor: theme.accent },
]}
onPress={() => {
setAccentColor(draftAccent);
setAccentOpacity(draftAccentOpacity);
setCustomAccentVisible(false);
}}
activeOpacity={0.8}
>
<Text style={[styles.accentModalButtonText, { color: theme.accentText }]}>Apply</Text>
<Text style={[styles.accentModalButtonText, { color: theme.accentText }]}>
Apply
</Text>
</TouchableOpacity>
</View>
</Pressable>
@@ -428,6 +597,12 @@ const AHEAD_OPTIONS: { value: string; label: string }[] = Array.from({ length: 2
label: i === 0 ? 'Only today' : `${i} day${i === 1 ? '' : 's'}`,
}));
const THEME_MODE_OPTIONS: { value: ThemeMode; label: string }[] = [
{ value: 'light', label: 'Light' },
{ value: 'dark', label: 'Dark' },
{ value: 'system', label: 'System default' },
];
function formatSyncTime(timestamp: number): string {
const seconds = Math.floor((Date.now() - timestamp) / 1000);
if (seconds < 60) return 'just now';
+34 -12
View File
@@ -15,7 +15,7 @@ export default function StatsScreen() {
}, [])
);
const maxDaily = Math.max(1, ...stats.daily.map((d) => d.count));
const maxDaily = Math.max(1, ...stats.daily.map(d => d.count));
return (
<SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
@@ -25,27 +25,42 @@ export default function StatsScreen() {
<Text style={[styles.cardTitle, { color: theme.textMuted }]}>Overview</Text>
<View style={styles.summaryGrid}>
<View style={styles.summaryItem}>
<Text style={[styles.summaryValue, { color: theme.accent }]}>{stats.totalCompleted}</Text>
<Text style={[styles.summaryValue, { color: theme.accent }]}>
{stats.totalCompleted}
</Text>
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Completed</Text>
</View>
<View style={styles.summaryItem}>
<Text style={[styles.summaryValue, { color: theme.text }]}>{stats.completedLast7}</Text>
<Text style={[styles.summaryValue, { color: theme.text }]}>
{stats.completedLast7}
</Text>
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Last 7 days</Text>
</View>
<View style={styles.summaryItem}>
<Text style={[styles.summaryValue, { color: theme.text }]}>{stats.completedLast30}</Text>
<Text style={[styles.summaryValue, { color: theme.text }]}>
{stats.completedLast30}
</Text>
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Last 30 days</Text>
</View>
<View style={styles.summaryItem}>
<Text style={[styles.summaryValue, { color: theme.text }]}>{stats.completionRate}%</Text>
<Text style={[styles.summaryValue, { color: theme.text }]}>
{stats.completionRate}%
</Text>
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Success rate</Text>
</View>
<View style={styles.summaryItem}>
<Text style={[styles.summaryValue, { color: theme.text }]}>{stats.currentStreak}</Text>
<Text style={[styles.summaryValue, { color: theme.text }]}>
{stats.currentStreak}
</Text>
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Day streak</Text>
</View>
<View style={styles.summaryItem}>
<Text style={[styles.summaryValue, { color: stats.overdueCount > 0 ? theme.accent : theme.text }]}>
<Text
style={[
styles.summaryValue,
{ color: stats.overdueCount > 0 ? theme.accent : theme.text },
]}
>
{stats.overdueCount}
</Text>
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Overdue</Text>
@@ -64,7 +79,10 @@ export default function StatsScreen() {
<View
style={[
styles.chartBar,
{ height: Math.max(4, height), backgroundColor: d.count > 0 ? theme.accent : theme.cardAlt },
{
height: Math.max(4, height),
backgroundColor: d.count > 0 ? theme.accent : theme.cardAlt,
},
]}
/>
</View>
@@ -78,9 +96,11 @@ export default function StatsScreen() {
<View style={[styles.card, { backgroundColor: theme.card }]}>
<Text style={[styles.cardTitle, { color: theme.textMuted }]}>By tags</Text>
{stats.byCategory.length === 0 ? (
<Text style={[styles.emptyText, { color: theme.textFaint }]}>No completed tasks yet</Text>
<Text style={[styles.emptyText, { color: theme.textFaint }]}>
No completed tasks yet
</Text>
) : (
stats.byCategory.map((c) => (
stats.byCategory.map(c => (
<View key={c.id} style={styles.row}>
<View style={[styles.dot, { backgroundColor: c.color }]} />
<Text style={[styles.rowLabel, { color: theme.text }]}>{c.name}</Text>
@@ -93,9 +113,11 @@ export default function StatsScreen() {
<View style={[styles.card, { backgroundColor: theme.card }]}>
<Text style={[styles.cardTitle, { color: theme.textMuted }]}>By priority</Text>
{stats.byPriority.length === 0 ? (
<Text style={[styles.emptyText, { color: theme.textFaint }]}>No completed tasks yet</Text>
<Text style={[styles.emptyText, { color: theme.textFaint }]}>
No completed tasks yet
</Text>
) : (
stats.byPriority.map((p) => (
stats.byPriority.map(p => (
<View key={p.priority} style={styles.row}>
<View style={[styles.dot, { backgroundColor: priorityColor(theme, p.priority) }]} />
<Text style={[styles.rowLabel, { color: theme.text }]}>{p.label}</Text>
+20 -5
View File
@@ -8,9 +8,13 @@ import { UpdateNotifier } from '@/components/UpdateNotifier';
import { Linking } from 'react-native';
import { useEffect } from 'react';
import { requestQuickAddFocus } from '@/utils/quickAddFocus';
import { registerForPushNotificationsAsync, setupNotificationChannels, addNotificationResponseReceivedListener, removeNotificationSubscription } from '@/services/pushNotifications';
import {
registerForPushNotificationsAsync,
setupNotificationChannels,
addNotificationResponseReceivedListener,
removeNotificationSubscription,
} from '@/services/pushNotifications';
import * as Notifications from 'expo-notifications';
import { Platform } from 'react-native';
Notifications.setNotificationHandler({
handleNotification: async () => ({
@@ -29,7 +33,7 @@ function RootNavigator() {
setupNotificationChannels();
registerForPushNotificationsAsync().catch(() => {});
const responseListener = addNotificationResponseReceivedListener((response) => {
const responseListener = addNotificationResponseReceivedListener(response => {
const data = response.notification.request.content.data as Record<string, any> | undefined;
if (!data) return;
@@ -54,18 +58,29 @@ function RootNavigator() {
requestQuickAddFocus();
};
Linking.getInitialURL().then(handleUrl).catch(() => {});
Linking.getInitialURL()
.then(handleUrl)
.catch(() => {});
const subscription = Linking.addEventListener('url', ({ url }) => handleUrl(url));
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
router.back();
}
};
window.addEventListener('keydown', handleKeyDown);
return () => {
subscription.remove();
removeNotificationSubscription(responseListener);
window.removeEventListener('keydown', handleKeyDown);
};
}, [router]);
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<StatusBar style="light" />
<StatusBar style="dark" />
<Stack screenOptions={{ headerShown: false }}>
<Stack.Screen name="(tabs)" />
<Stack.Screen name="add-task" />
+18 -11
View File
@@ -1,5 +1,14 @@
import React, { useMemo, useRef } from 'react';
import { View, Text, StyleSheet, SafeAreaView, ScrollView, KeyboardAvoidingView, Platform, Keyboard } from 'react-native';
import {
View,
Text,
StyleSheet,
SafeAreaView,
ScrollView,
KeyboardAvoidingView,
Platform,
Keyboard,
} from 'react-native';
import { Header } from '@/components/Header';
import { CategorySelector } from '@/components/CategorySelector';
import { TaskNameInput } from '@/components/TaskNameInput';
@@ -112,7 +121,8 @@ export default function AddTaskScreen() {
const now = new Date();
const dueDateTimestamp = data.dueDate ? data.dueDate.getTime() : 0;
const seriesId = data.repeat !== 'none'
const seriesId =
data.repeat !== 'none'
? `series_${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36)}`
: '';
const resolvedCategoryId = (data.tags && data.tags[0]) || '';
@@ -120,7 +130,7 @@ export default function AddTaskScreen() {
let createdTask: any = null;
await database.write(async () => {
const task = await collections.tasks.create((t) => {
const task = await collections.tasks.create(t => {
t.title = data.title.trim();
t.description = data.description || '';
t.categoryId = resolvedCategoryId;
@@ -146,7 +156,7 @@ export default function AddTaskScreen() {
for (let i = 0; i < data.subtasks.length; i++) {
const subtask = data.subtasks[i];
if (subtask.title.trim()) {
await collections.subtasks.create((s) => {
await collections.subtasks.create(s => {
s.taskId = task.id;
s.title = subtask.title.trim();
s.description = '';
@@ -198,7 +208,7 @@ export default function AddTaskScreen() {
>
<CategorySelector
value={tags}
onChange={(value) => setValue('tags', value)}
onChange={value => setValue('tags', value)}
error={errors.categoryId?.message}
/>
<Controller
@@ -214,10 +224,7 @@ export default function AddTaskScreen() {
)}
/>
<SubtasksSection control={control} />
<PrioritySelector
value={priority}
onChange={(value) => setValue('priority', value)}
/>
<PrioritySelector value={priority} onChange={value => setValue('priority', value)} />
<DateTimePickerComponent control={control} />
<RepeatSelector
value={repeat}
@@ -232,12 +239,12 @@ export default function AddTaskScreen() {
<ReminderSelector
value={reminders}
hasDueDate={!!dueDate}
onChange={(value) => setValue('reminders', value)}
onChange={value => setValue('reminders', value)}
/>
<AssigneeSelector
value={assigneeId}
onChange={(value: string | null) => setValue('assigneeId', value)}
friends={friends.map((f) => f.username)}
friends={friends.map(f => f.username)}
/>
<Controller
control={control}
+146 -35
View File
@@ -1,5 +1,14 @@
import React, { useCallback, useMemo } from 'react';
import { View, Text, StyleSheet, SafeAreaView, ScrollView, TouchableOpacity, KeyboardAvoidingView, BackHandler } from 'react-native';
import {
View,
Text,
StyleSheet,
SafeAreaView,
ScrollView,
TouchableOpacity,
KeyboardAvoidingView,
BackHandler,
} from 'react-native';
import { useRouter, useLocalSearchParams, useFocusEffect } from 'expo-router';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Header } from '@/components/Header';
@@ -17,7 +26,11 @@ import { desaturate, type ThemeColors } from '@/theme';
function isDayMatch(timestamp: number, day: Date): boolean {
const d = new Date(timestamp);
return d.getFullYear() === day.getFullYear() && d.getMonth() === day.getMonth() && d.getDate() === day.getDate();
return (
d.getFullYear() === day.getFullYear() &&
d.getMonth() === day.getMonth() &&
d.getDate() === day.getDate()
);
}
export default function DayViewScreen() {
@@ -53,45 +66,68 @@ export default function DayViewScreen() {
const subtasksOnDay = useMemo(() => {
const map = new Map<string, SubtaskData[]>();
for (const [taskId, roots] of subtasksByTask) {
const due = roots.filter((s) => s.dueDate && isDayMatch(s.dueDate, day));
const due = roots.filter(s => s.dueDate && isDayMatch(s.dueDate, day));
if (due.length > 0) map.set(taskId, due);
}
return map;
}, [subtasksByTask, day]);
const handleToggleComplete = useCallback(async (taskId: string) => {
const handleToggleComplete = useCallback(
async (taskId: string) => {
await confirmAndToggleTaskComplete(taskId, () => {
refresh();
refreshSubtasks();
});
}, [refresh, refreshSubtasks]);
},
[refresh, refreshSubtasks]
);
const handleToggleSubtask = useCallback(async (subtaskId: string) => {
const handleToggleSubtask = useCallback(
async (subtaskId: string) => {
await toggleSubtaskComplete(subtaskId);
refreshSubtasks();
}, [refreshSubtasks]);
},
[refreshSubtasks]
);
return (
<SafeAreaView style={[styles.container, { backgroundColor: theme.background, paddingBottom: insets.bottom }]}>
<SafeAreaView
style={[
styles.container,
{ backgroundColor: theme.background, paddingBottom: insets.bottom },
]}
>
<Header title={format(day, 'EEEE, MMM d')} showLogo={false} rightAction="Back" />
<KeyboardAvoidingView style={styles.kbAvoid} behavior="padding">
<ScrollView style={styles.scrollBody} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
<ScrollView
style={styles.scrollBody}
contentContainerStyle={styles.scrollContent}
showsVerticalScrollIndicator={false}
>
{loading ? (
<View style={styles.emptyState}>
<Text style={[styles.emptyText, { color: theme.textSecondary }]}>Loading...</Text>
</View>
) : dayTasks.length === 0 && subtasksOnDay.size === 0 ? (
<View style={styles.emptyState}>
<Text style={[styles.emptyText, { color: theme.textSecondary }]}>No tasks on this day</Text>
<Text style={[styles.emptyText, { color: theme.textSecondary }]}>
No tasks on this day
</Text>
</View>
) : (
<>
{dayTasks.map((task) => {
{dayTasks.map(task => {
const subs = subtasksOnDay.get(task.id) ?? [];
const openCount = subs.filter((s) => !s.completed).length;
const cat = categories.find((c) => c.id === task.categoryId);
const openCount = subs.filter(s => !s.completed).length;
const cat = categories.find(c => c.id === task.categoryId);
return (
<View key={task.id} style={[styles.eventCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
<View
key={task.id}
style={[
styles.eventCard,
{ backgroundColor: theme.card, borderColor: theme.border },
]}
>
<View style={styles.eventRow}>
<TouchableOpacity
style={styles.checkCircle}
@@ -104,41 +140,76 @@ export default function DayViewScreen() {
{task.completed ? (
<>
<Circle cx={12} cy={12} r={10} fill={theme.accent} />
<Path d="M7 12l3 3 7-7" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
<Path
d="M7 12l3 3 7-7"
stroke="#FFFFFF"
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</>
) : (
<Circle cx={12} cy={12} r={10} stroke={theme.textSecondary} strokeWidth={2.5} fill="none" />
<Circle
cx={12}
cy={12}
r={10}
stroke={theme.textSecondary}
strokeWidth={2.5}
fill="none"
/>
)}
</Svg>
</TouchableOpacity>
<TouchableOpacity
style={styles.eventTouch}
onPress={() => router.push({ pathname: '/task-detail', params: { id: task.id } })}
onPress={() =>
router.push({ pathname: '/task-detail', params: { id: task.id } })
}
activeOpacity={0.7}
>
<Text
style={[styles.eventTitle, { color: theme.text }, task.completed && styles.eventCompleted]}
style={[
styles.eventTitle,
{ color: theme.text },
task.completed && styles.eventCompleted,
]}
numberOfLines={1}
>
{task.title}
</Text>
{openCount > 0 && (
<Text style={[styles.eventSub, { color: theme.textMuted }]} numberOfLines={1}>
<Text
style={[styles.eventSub, { color: theme.textMuted }]}
numberOfLines={1}
>
{openCount} open subtask{openCount === 1 ? '' : 's'}
</Text>
)}
{!task.completed && (
<View style={styles.metaRow}>
{cat && (
<View style={[styles.tagChip, { backgroundColor: desaturate(cat.color, 0.3) }]}>
<Text style={styles.tagText} numberOfLines={1}>{cat.name}</Text>
<View
style={[
styles.tagChip,
{ backgroundColor: desaturate(cat.color, 0.3) },
]}
>
<Text style={styles.tagText} numberOfLines={1}>
{cat.name}
</Text>
</View>
)}
{task.dueTime ? (
<Text style={[styles.timeText, { color: theme.textSecondary }]}>{task.dueTime}{task.endTime ? `–${task.endTime}` : ''}</Text>
<Text style={[styles.timeText, { color: theme.textSecondary }]}>
{task.dueTime}
{task.endTime ? `–${task.endTime}` : ''}
</Text>
) : task.dueDate ? (
<Text style={[styles.timeText, { color: theme.textSecondary }]}>{format(task.dueDate, 'HH:mm')}</Text>
<Text style={[styles.timeText, { color: theme.textSecondary }]}>
{format(task.dueDate, 'HH:mm')}
</Text>
) : null}
</View>
)}
@@ -152,7 +223,14 @@ export default function DayViewScreen() {
accessibilityLabel={`Edit ${task.title}`}
>
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path d="M9 6l6 6-6 6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
<Path
d="M9 6l6 6-6 6"
stroke={theme.textSecondary}
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
</TouchableOpacity>
</View>
@@ -160,10 +238,16 @@ export default function DayViewScreen() {
);
})}
{Array.from(subtasksOnDay.entries()).flatMap(([taskId, subs]) => {
const parent = dayTasks.find((t) => t.id === taskId);
const parent = dayTasks.find(t => t.id === taskId);
if (parent) return [];
return subs.map((sub) => (
<View key={sub.id} style={[styles.eventCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
return subs.map(sub => (
<View
key={sub.id}
style={[
styles.eventCard,
{ backgroundColor: theme.card, borderColor: theme.border },
]}
>
<View style={styles.eventRow}>
<TouchableOpacity
style={styles.checkCircle}
@@ -176,26 +260,49 @@ export default function DayViewScreen() {
{sub.completed ? (
<>
<Circle cx={12} cy={12} r={10} fill={theme.accent} />
<Path d="M7 12l3 3 7-7" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
<Path
d="M7 12l3 3 7-7"
stroke="#FFFFFF"
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</>
) : (
<Circle cx={12} cy={12} r={10} stroke={theme.textSecondary} strokeWidth={2.5} fill="none" />
<Circle
cx={12}
cy={12}
r={10}
stroke={theme.textSecondary}
strokeWidth={2.5}
fill="none"
/>
)}
</Svg>
</TouchableOpacity>
<TouchableOpacity
style={styles.eventTouch}
onPress={() => router.push({ pathname: '/subtask-detail', params: { id: sub.id } })}
onPress={() =>
router.push({ pathname: '/subtask-detail', params: { id: sub.id } })
}
activeOpacity={0.7}
>
<Text
style={[styles.eventTitle, { color: theme.text }, sub.completed && styles.eventCompleted]}
style={[
styles.eventTitle,
{ color: theme.text },
sub.completed && styles.eventCompleted,
]}
numberOfLines={1}
>
{sub.title}
</Text>
{sub.dueTime ? (
<Text style={[styles.timeText, { color: theme.textSecondary }]}>{sub.dueTime}{sub.endTime ? `–${sub.endTime}` : ''}</Text>
<Text style={[styles.timeText, { color: theme.textSecondary }]}>
{sub.dueTime}
{sub.endTime ? `–${sub.endTime}` : ''}
</Text>
) : null}
</TouchableOpacity>
</View>
@@ -205,14 +312,18 @@ export default function DayViewScreen() {
</>
)}
</ScrollView>
<QuickAddBar dueDate={dayStart.getTime()} placeholder={`Add event for ${format(day, 'MMM d')}`} />
<QuickAddBar
dueDate={dayStart.getTime()}
placeholder={`Add event for ${format(day, 'MMM d')}`}
/>
</KeyboardAvoidingView>
{modals(() => {})}
</SafeAreaView>
);
}
const createStyles = (theme: ThemeColors) => StyleSheet.create({
const createStyles = (theme: ThemeColors) =>
StyleSheet.create({
container: {
flex: 1,
},
@@ -290,4 +401,4 @@ const createStyles = (theme: ThemeColors) => StyleSheet.create({
padding: 4,
marginLeft: 6,
},
});
});
+54 -17
View File
@@ -1,5 +1,15 @@
import React from 'react';
import { View, Text, StyleSheet, SafeAreaView, ScrollView, KeyboardAvoidingView, Platform, TouchableOpacity, Alert } from 'react-native';
import {
View,
Text,
StyleSheet,
SafeAreaView,
ScrollView,
KeyboardAvoidingView,
Platform,
TouchableOpacity,
Alert,
} from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { Header } from '@/components/Header';
import { TaskNameInput } from '@/components/TaskNameInput';
@@ -15,7 +25,14 @@ import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useDatabase } from '@/hooks/useDatabase';
import { collections } from '@/database';
import { SubtaskFormData, Reminder, parseReminders, toRemindersString, parseTaskTags, tagsToString } from '@/types';
import {
SubtaskFormData,
Reminder,
parseReminders,
toRemindersString,
parseTaskTags,
tagsToString,
} from '@/types';
import { useSettings } from '@/theme';
import { updateSubtask, deleteSubtask } from '@/utils/taskActions';
import { CategorySelector } from '@/components/CategorySelector';
@@ -68,7 +85,14 @@ export default function SubtaskDetailScreen() {
},
});
const { handleSubmit, watch, setValue, control, reset, formState: { errors } } = methods;
const {
handleSubmit,
watch,
setValue,
control,
reset,
formState: { errors },
} = methods;
const priority = watch('priority');
const tags = watch('tags') ?? [];
@@ -98,7 +122,10 @@ export default function SubtaskDetailScreen() {
allDay: subtask.allDay ?? false,
repeat: subtask.repeat,
repeatInterval: subtask.repeatInterval || 1,
repeatDays: ((subtask.repeatDays || '') as string).split(',').map(Number).filter((d) => !Number.isNaN(d)),
repeatDays: ((subtask.repeatDays || '') as string)
.split(',')
.map(Number)
.filter(d => !Number.isNaN(d)),
reminder: (subtask.reminder || 'none') as Reminder,
reminders: subtask.reminders || '',
assigneeId: subtask.assigneeId ?? null,
@@ -160,7 +187,9 @@ export default function SubtaskDetailScreen() {
if (!isReady || !loaded) {
return (
<View style={[styles.loadingContainer, { backgroundColor: theme.background }]}>
<Text style={{ color: theme.textFaint }}>{notFound ? 'Subtask not found' : 'Loading...'}</Text>
<Text style={{ color: theme.textFaint }}>
{notFound ? 'Subtask not found' : 'Loading...'}
</Text>
</View>
);
}
@@ -171,9 +200,23 @@ export default function SubtaskDetailScreen() {
title="Edit Subtask"
showLogo={true}
rightAction={
<TouchableOpacity onPress={confirmDelete} activeOpacity={0.7} style={[styles.deleteButton, { borderColor: theme.accentBorder, backgroundColor: theme.accentSoft }]}>
<TouchableOpacity
onPress={confirmDelete}
activeOpacity={0.7}
style={[
styles.deleteButton,
{ borderColor: theme.accentBorder, backgroundColor: theme.accentSoft },
]}
>
<Svg width={22} height={22} viewBox="0 0 24 24">
<Path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" stroke={theme.accent} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" />
<Path
d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"
stroke={theme.accent}
strokeWidth={2.2}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
</TouchableOpacity>
}
@@ -201,14 +244,8 @@ export default function SubtaskDetailScreen() {
/>
)}
/>
<CategorySelector
value={tags}
onChange={(value) => setValue('tags', value)}
/>
<PrioritySelector
value={priority}
onChange={(value) => setValue('priority', value)}
/>
<CategorySelector value={tags} onChange={value => setValue('tags', value)} />
<PrioritySelector value={priority} onChange={value => setValue('priority', value)} />
<DateTimePickerComponent control={control as any} />
<RepeatSelector
value={repeat}
@@ -223,12 +260,12 @@ export default function SubtaskDetailScreen() {
<ReminderSelector
value={reminders}
hasDueDate={!!dueDate}
onChange={(value) => setValue('reminders', value)}
onChange={value => setValue('reminders', value)}
/>
<AssigneeSelector
value={assigneeId}
onChange={(value: string | null) => setValue('assigneeId', value)}
friends={friends.map((f) => f.username)}
friends={friends.map(f => f.username)}
/>
<Controller
control={control}
+139 -38
View File
@@ -1,5 +1,15 @@
import React, { useRef } from 'react';
import { View, Text, StyleSheet, SafeAreaView, ScrollView, KeyboardAvoidingView, Platform, TouchableOpacity, Keyboard } from 'react-native';
import {
View,
Text,
StyleSheet,
SafeAreaView,
ScrollView,
KeyboardAvoidingView,
Platform,
TouchableOpacity,
Keyboard,
} from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { Header } from '@/components/Header';
import { CategorySelector } from '@/components/CategorySelector';
@@ -47,13 +57,27 @@ const taskSchema = z.object({
subtasks: z.array(z.object({ title: z.string(), _key: z.string().optional() })).optional(),
});
function CollapsibleSection({ title, children, defaultExpanded = false, icon }: { title: string; children: React.ReactNode; defaultExpanded?: boolean; icon: React.ReactNode }) {
function CollapsibleSection({
title,
children,
defaultExpanded = false,
icon,
}: {
title: string;
children: React.ReactNode;
defaultExpanded?: boolean;
icon: React.ReactNode;
}) {
const { theme } = useSettings();
const [expanded, setExpanded] = React.useState(defaultExpanded);
return (
<View style={styles.section}>
<TouchableOpacity style={[styles.sectionHeader, { backgroundColor: theme.card, borderColor: theme.border }]} onPress={() => setExpanded(!expanded)} activeOpacity={0.8}>
<TouchableOpacity
style={[styles.sectionHeader, { backgroundColor: theme.card, borderColor: theme.border }]}
onPress={() => setExpanded(!expanded)}
activeOpacity={0.8}
>
<View style={styles.sectionHeaderLeft}>
{icon}
<Text style={[styles.sectionTitle, { color: theme.text }]}>{title}</Text>
@@ -106,7 +130,14 @@ export default function TaskDetailScreen() {
},
});
const { handleSubmit, watch, setValue, control, reset, formState: { errors } } = methods;
const {
handleSubmit,
watch,
setValue,
control,
reset,
formState: { errors },
} = methods;
const tags = watch('tags') ?? [];
const priority = watch('priority');
@@ -129,7 +160,8 @@ export default function TaskDetailScreen() {
const subtasks = await collections.subtasks.query(Q.where('task_id', id)).fetch();
if (!mounted) return;
const remindersValue = task.reminders || (task.reminder && task.reminder !== 'none' ? task.reminder : '');
const remindersValue =
task.reminders || (task.reminder && task.reminder !== 'none' ? task.reminder : '');
reset({
title: task.title,
@@ -143,11 +175,14 @@ export default function TaskDetailScreen() {
allDay: task.allDay ?? false,
repeat: task.repeat,
repeatInterval: task.repeatInterval || 1,
repeatDays: (task.repeatDays || '').split(',').map(Number).filter((d) => !Number.isNaN(d)),
repeatDays: (task.repeatDays || '')
.split(',')
.map(Number)
.filter(d => !Number.isNaN(d)),
reminder: (task.reminder || 'none') as TaskFormData['reminder'],
reminders: remindersValue,
assigneeId: task.assigneeId ?? null,
subtasks: subtasks.map((s) => ({ title: s.title, _key: s.id })),
subtasks: subtasks.map(s => ({ title: s.title, _key: s.id })),
});
setLoaded(true);
} catch {
@@ -155,7 +190,9 @@ export default function TaskDetailScreen() {
}
})();
return () => { mounted = false; };
return () => {
mounted = false;
};
}, [id, isReady, reset]);
const onSubmit = async (data: TaskFormData) => {
@@ -174,7 +211,7 @@ export default function TaskDetailScreen() {
savedTask = task;
const existingSubtasks = await collections.subtasks.query(Q.where('task_id', id)).fetch();
await task.update((t) => {
await task.update(t => {
t.title = data.title.trim();
t.description = data.description || '';
t.categoryId = (data.tags && data.tags[0]) || task.categoryId || '';
@@ -202,10 +239,10 @@ export default function TaskDetailScreen() {
const trimmed = formItem.title.trim();
if (!trimmed) continue;
if (formItem._key) {
const existing = existingSubtasks.find((s) => s.id === formItem._key && !s.parentSubtaskId);
const existing = existingSubtasks.find(s => s.id === formItem._key && !s.parentSubtaskId);
if (existing) {
keptIds.add(existing.id);
await existing.update((s) => {
await existing.update(s => {
s.title = trimmed;
s.order = order;
s.updatedAt = now;
@@ -214,7 +251,7 @@ export default function TaskDetailScreen() {
continue;
}
}
await collections.subtasks.create((s) => {
await collections.subtasks.create(s => {
s.taskId = task.id;
s.categoryId = task.categoryId || '';
s.tags = task.tags || '';
@@ -244,9 +281,11 @@ export default function TaskDetailScreen() {
if (existing.parentSubtaskId) continue;
if (keptIds.has(existing.id)) continue;
removedIds.push(existing.id);
const children = await collections.subtasks.query(Q.where('parent_subtask_id', existing.id)).fetch();
const children = await collections.subtasks
.query(Q.where('parent_subtask_id', existing.id))
.fetch();
for (const child of children) {
await child.update((c) => {
await child.update(c => {
c.parentSubtaskId = null;
c.updatedAt = now;
});
@@ -288,9 +327,23 @@ export default function TaskDetailScreen() {
title="Edit Task"
showLogo={true}
rightAction={
<TouchableOpacity onPress={handleDelete} activeOpacity={0.7} style={[styles.deleteButton, { borderColor: theme.accentBorder, backgroundColor: theme.accentSoft }]}>
<TouchableOpacity
onPress={handleDelete}
activeOpacity={0.7}
style={[
styles.deleteButton,
{ borderColor: theme.accentBorder, backgroundColor: theme.accentSoft },
]}
>
<Svg width={22} height={22} viewBox="0 0 24 24">
<Path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" stroke={theme.accent} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" />
<Path
d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"
stroke={theme.accent}
strokeWidth={2.2}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
</TouchableOpacity>
}
@@ -310,7 +363,7 @@ export default function TaskDetailScreen() {
>
<CategorySelector
value={tags}
onChange={(value) => setValue('tags', value)}
onChange={value => setValue('tags', value)}
error={errors.categoryId?.message}
/>
<Controller
@@ -326,21 +379,36 @@ export default function TaskDetailScreen() {
)}
/>
<SubtasksSection control={control} />
<PrioritySelector
value={priority}
onChange={(value) => setValue('priority', value)}
/>
<PrioritySelector value={priority} onChange={value => setValue('priority', value)} />
<CollapsibleSection title="Date & Time" icon={
<CollapsibleSection
title="Date & Time"
icon={
<Svg width={20} height={20} viewBox="0 0 24 24">
<Circle cx={12} cy={12} r={10} stroke={theme.accent} strokeWidth={1.8} fill="none" />
<Path d="M12 6v6l4 2" stroke={theme.accent} strokeWidth={1.8} strokeLinecap="round" />
<Circle
cx={12}
cy={12}
r={10}
stroke={theme.accent}
strokeWidth={1.8}
fill="none"
/>
<Path
d="M12 6v6l4 2"
stroke={theme.accent}
strokeWidth={1.8}
strokeLinecap="round"
/>
</Svg>
} defaultExpanded={!!dueDate}>
}
defaultExpanded={!!dueDate}
>
<DateTimePickerComponent control={control} />
</CollapsibleSection>
<CollapsibleSection title="Repeat" icon={
<CollapsibleSection
title="Repeat"
icon={
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path
d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3"
@@ -351,7 +419,9 @@ export default function TaskDetailScreen() {
fill="none"
/>
</Svg>
} defaultExpanded={repeat !== 'none'}>
}
defaultExpanded={repeat !== 'none'}
>
<RepeatSelector
value={repeat}
interval={repeatInterval}
@@ -364,7 +434,9 @@ export default function TaskDetailScreen() {
/>
</CollapsibleSection>
<CollapsibleSection title="Reminder" icon={
<CollapsibleSection
title="Reminder"
icon={
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path
d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"
@@ -375,32 +447,61 @@ export default function TaskDetailScreen() {
fill="none"
/>
</Svg>
} defaultExpanded={!!reminders && reminders !== ''}>
}
defaultExpanded={!!reminders && reminders !== ''}
>
<ReminderSelector
value={reminders}
hasDueDate={!!dueDate}
onChange={(value) => setValue('reminders', value)}
onChange={value => setValue('reminders', value)}
/>
</CollapsibleSection>
<CollapsibleSection title="Assignee" icon={
<CollapsibleSection
title="Assignee"
icon={
<Svg width={20} height={20} viewBox="0 0 24 24">
<Circle cx={12} cy={12} r={10} stroke={theme.accent} strokeWidth={1.8} fill="none" />
<Path d="M12 10v6M12 19v1" stroke={theme.accent} strokeWidth={1.8} strokeLinecap="round" />
<Circle
cx={12}
cy={12}
r={10}
stroke={theme.accent}
strokeWidth={1.8}
fill="none"
/>
<Path
d="M12 10v6M12 19v1"
stroke={theme.accent}
strokeWidth={1.8}
strokeLinecap="round"
/>
</Svg>
} defaultExpanded={!!assigneeId}>
}
defaultExpanded={!!assigneeId}
>
<AssigneeSelector
value={assigneeId}
onChange={(value: string | null) => setValue('assigneeId', value)}
friends={friends.map((f) => f.username)}
friends={friends.map(f => f.username)}
/>
</CollapsibleSection>
<CollapsibleSection title="Description" icon={
<CollapsibleSection
title="Description"
icon={
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path d="M4 6h16M4 12h16M4 18h10" stroke={theme.accent} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" fill="none" />
<Path
d="M4 6h16M4 12h16M4 18h10"
stroke={theme.accent}
strokeWidth={1.8}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
} defaultExpanded={!!methods.getValues('description')}>
}
defaultExpanded={!!methods.getValues('description')}
>
<Controller
control={control}
name="description"
+727 -605
View File
File diff suppressed because it is too large Load Diff
+11 -10
View File
@@ -9,22 +9,23 @@
"@react-native-async-storage/async-storage": "2.2.0",
"@react-native-community/datetimepicker": "9.1.0",
"date-fns": "^3.6.0",
"expo": "~57.0.10",
"expo": "~57.0.18",
"expo-blur": "~57.0.2",
"expo-constants": "~57.0.9",
"expo-dev-client": "~57.0.1",
"expo-dev-client": "~57.0.16",
"expo-device": "^57.0.1",
"expo-linking": "~57.0.5",
"expo-notifications": "~57.0.8",
"expo-router": "~57.0.10",
"expo-sqlite": "~57.0.1",
"expo-intent-launcher": "~57.0.1",
"expo-linking": "~57.0.8",
"expo-notifications": "~57.0.15",
"expo-router": "~57.0.17",
"expo-sqlite": "~57.0.2",
"expo-status-bar": "~57.0.1",
"expo-system-ui": "~57.0.2",
"expo-updates": "~57.0.12",
"expo-system-ui": "~57.0.3",
"expo-updates": "~57.0.19",
"react": "19.2.3",
"react-dom": "19.2.3",
"react-hook-form": "^7.51.5",
"react-native": "0.86.2",
"react-native": "0.86.3",
"react-native-gesture-handler": "2.32.0",
"react-native-keyboard-controller": "1.21.9",
"react-native-safe-area-context": "5.7.0",
@@ -40,7 +41,7 @@
"electron": "^41.7.1",
"electron-builder": "^26.15.3",
"eslint": "^9.0.0",
"eslint-config-expo": "~57.0.1",
"eslint-config-expo": "~57.0.2",
"patch-package": "^8.0.1",
"prettier": "^3.9.6",
"typescript": "~6.0.3"
@@ -0,0 +1,78 @@
diff --git a/node_modules/react-native/src/private/webapis/dom/events/Event.js b/node_modules/react-native/src/private/webapis/dom/events/Event.js
index f918f97..5deab46 100644
--- a/node_modules/react-native/src/private/webapis/dom/events/Event.js
+++ b/node_modules/react-native/src/private/webapis/dom/events/Event.js
@@ -70,7 +70,7 @@ export default class Event {
[CURRENT_TARGET_KEY]: EventTarget | null = null;
// $FlowExpectedError[unsupported-syntax]
- [EVENT_PHASE_KEY]: boolean = Event.NONE;
+ [EVENT_PHASE_KEY]: boolean = 0;
// $FlowExpectedError[unsupported-syntax]
[IN_PASSIVE_LISTENER_FLAG_KEY]: boolean = false;
@@ -193,48 +193,64 @@ export default class Event {
// $FlowExpectedError[cannot-write]
Object.defineProperty(Event, 'NONE', {
+ writable: true,
+ configurable: true,
enumerable: true,
value: 0,
});
// $FlowExpectedError[cannot-write]
Object.defineProperty(Event.prototype, 'NONE', {
+ writable: true,
+ configurable: true,
enumerable: true,
value: 0,
});
// $FlowExpectedError[cannot-write]
Object.defineProperty(Event, 'CAPTURING_PHASE', {
+ writable: true,
+ configurable: true,
enumerable: true,
value: 1,
});
// $FlowExpectedError[cannot-write]
Object.defineProperty(Event.prototype, 'CAPTURING_PHASE', {
+ writable: true,
+ configurable: true,
enumerable: true,
value: 1,
});
// $FlowExpectedError[cannot-write]
Object.defineProperty(Event, 'AT_TARGET', {
+ writable: true,
+ configurable: true,
enumerable: true,
value: 2,
});
// $FlowExpectedError[cannot-write]
Object.defineProperty(Event.prototype, 'AT_TARGET', {
+ writable: true,
+ configurable: true,
enumerable: true,
value: 2,
});
// $FlowExpectedError[cannot-write]
Object.defineProperty(Event, 'BUBBLING_PHASE', {
+ writable: true,
+ configurable: true,
enumerable: true,
value: 3,
});
// $FlowExpectedError[cannot-write]
Object.defineProperty(Event.prototype, 'BUBBLING_PHASE', {
+ writable: true,
+ configurable: true,
enumerable: true,
value: 3,
});
@@ -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,7 +135,8 @@ export function AnalogClock({ value, is24Hour = false, onChange }: AnalogClockPr
);
});
const minuteDots = mode === 'minute'
const minuteDots =
mode === 'minute'
? Array.from({ length: 12 }, (_, i) => {
const angle = (i * 30 * Math.PI) / 180;
const x = CENTER + RADIUS * 0.82 * Math.sin(angle);
@@ -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);
}
@@ -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
style={[
styles.selectorValue,
{ color: value ? theme.text : theme.textMuted },
]}
>
<Text 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.optionSubtext, { color: theme.textMuted }]}>Add as friend & assign</Text>
<Text style={[styles.optionText, { color: theme.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>
@@ -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
style={styles.overlay}
onPress={onClose}
accessibilityRole="none"
>
<Pressable
style={[styles.sheet, { backgroundColor: theme.sheetBg }]}
onPress={() => {}}
>
<Pressable style={styles.overlay} 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}
@@ -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} />
<Path d="M6 12l4 4 8-8" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" opacity={0.9} />
<Circle
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>
@@ -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) => (
<View key={c.id} style={[styles.chip, { backgroundColor: theme.cardAlt, borderColor: theme.border }]}>
{selectedCategories.slice(0, 3).map(c => (
<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]} />
<Text style={[
<View
style={[
styles.colorCircle,
{ backgroundColor: category.color },
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>
@@ -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
style={[
styles.preview,
{ backgroundColor: valid ? value : theme.accentSoft, borderColor: theme.accent },
]} />
]}
/>
<View style={styles.inputWrap}>
<Text style={styles.hash}>#{/**/}</Text>
<TextInput
@@ -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;
if (h < 60) { r = c; g = x; b = 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');
let r = 0,
g = 0,
b = 0;
if (h < 60) {
r = c;
g = x;
b = 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);
}, [hue, saturation, value, onChange]);
onChange(newColor, opacity);
}, [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(
() =>
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: (event) => {
onPanResponderGrant: event => {
updateFromWheel(event.nativeEvent.locationX, event.nativeEvent.locationY);
},
onPanResponderMove: (event) => {
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(
() =>
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: (event) => {
onPanResponderGrant: event => {
setHueFromLocation(event.nativeEvent.locationX);
},
onPanResponderMove: (event) => {
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 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 thumbX =
((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.cos(((hue - 180) * Math.PI) / 180) +
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>
);
@@ -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;
if (h < 60) { r = c; g = x; b = 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');
let r = 0,
g = 0,
b = 0;
if (h < 60) {
r = c;
g = x;
b = 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);
}, [hue, saturation, value, onChange]);
onChange(newColor, opacity);
}, [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 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 thumbX =
((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.cos(((hue - 180) * Math.PI) / 180) +
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} />
@@ -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>
@@ -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" />
<Path d="M12 6v6l4 2" stroke={field.value ? theme.accent : theme.textFaint} strokeWidth={1.8} strokeLinecap="round" />
<Circle
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" />
<Path d="M12 8v5M12 16.5v.5" stroke={theme.dangerStrong} strokeWidth={1.8} strokeLinecap="round" />
<Circle
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={
picker === 'endTime'
? endTime || startTime
: startTime
}
onConfirm={(time) => {
initialTime={picker === 'endTime' ? endTime || startTime : startTime}
onConfirm={time => {
if (picker === 'endTime') {
setEndTimeValue(time);
} else {
@@ -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,7 +36,8 @@ export function DescriptionInput({ error, ...props }: DescriptionInputProps) {
);
}
const createStyles = (theme: ThemeColors) => StyleSheet.create({
const createStyles = (theme: ThemeColors) =>
StyleSheet.create({
container: {
gap: 5,
},
@@ -65,4 +66,4 @@ const createStyles = (theme: ThemeColors) => StyleSheet.create({
color: theme.dangerStrong,
marginLeft: 4,
},
});
});

Some files were not shown because too many files have changed in this diff Show More