Compare commits

..
4 Commits
Author SHA1 Message Date
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 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 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 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
139 changed files with 2650 additions and 6708 deletions
-327
View File
@@ -1,327 +0,0 @@
name: Android Build
on:
push:
branches: [main, develop]
paths:
- 'carry-your-live/**'
- '.gitea/workflows/android-build.yml'
pull_request:
branches: [main, develop]
paths:
- 'carry-your-live/**'
workflow_dispatch:
env:
NODE_VERSION: '20'
JAVA_VERSION: '17'
ANDROID_HOME: ${{ runner.tool_cache }}/android-sdk
ANDROID_SDK_ROOT: ${{ runner.tool_cache }}/android-sdk
GRADLE_OPTS: "-Dorg.gradle.workers.max=2 -Dorg.gradle.jvmargs=-Xmx1536m -XX:MaxMetaspaceSize=1024m"
jobs:
setup:
name: Setup & Install
runs-on: ubuntu-latest
timeout-minutes: 20
outputs:
gradle-cache-key: ${{ steps.gradle-cache.outputs.cache-primary-key }}
steps:
- name: Checkout repository
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
cache: 'npm'
cache-dependency-path: carry-your-live/package-lock.json
- name: Setup Java
uses: actions/setup-java@v4
with:
distribution: 'temurin'
java-version: ${{ env.JAVA_VERSION }}
cache: 'gradle'
cache-dependency-path: carry-your-live/android/gradle/wrapper/gradle-wrapper.properties
- 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 dependencies
working-directory: carry-your-live
run: |
for i in {1..3}; do
npm ci && break || sleep 10
done
- name: Prebuild Android
working-directory: carry-your-live
run: |
for i in {1..2}; do
npx expo prebuild --platform android --clean && break || sleep 15
done
build-debug:
name: Build Debug APK
needs: setup
runs-on: ubuntu-latest
timeout-minutes: 30
steps:
- name: Checkout repository
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
cache: 'npm'
cache-dependency-path: carry-your-live/package-lock.json
- name: Setup Java
uses: actions/setup-java@v4
with:
distribution: 'temurin'
java-version: ${{ env.JAVA_VERSION }}
cache: 'gradle'
cache-dependency-path: carry-your-live/android/gradle/wrapper/gradle-wrapper.properties
- 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: Build Debug APK
working-directory: carry-your-live/android
run: |
for i in {1..3}; do
./gradlew assembleDebug --no-daemon -Dorg.gradle.workers.max=2 && break || sleep 30
done
- name: Find Debug APK
id: find-debug-apk
run: |
APK_PATH=$(find carry-your-live/android/app/build/outputs -name "*debug*.apk" -type f | head -n 1)
echo "apk_path=$APK_PATH" >> "$GITHUB_OUTPUT"
echo "Found Debug APK at: $APK_PATH"
- name: Upload Debug APK
uses: actions/upload-artifact@v4
with:
name: android-debug-apk
path: ${{ steps.find-debug-apk.outputs.apk_path }}
retention-days: 30
build-release:
name: Build Release APK & AAB
needs: setup
runs-on: ubuntu-latest
timeout-minutes: 35
steps:
- name: Checkout repository
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
cache: 'npm'
cache-dependency-path: carry-your-live/package-lock.json
- name: Setup Java
uses: actions/setup-java@v4
with:
distribution: 'temurin'
java-version: ${{ env.JAVA_VERSION }}
cache: 'gradle'
cache-dependency-path: carry-your-live/android/gradle/wrapper/gradle-wrapper.properties
- 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: Build Release APK
working-directory: carry-your-live/android
run: |
for i in {1..3}; do
./gradlew assembleRelease --no-daemon -Dorg.gradle.workers.max=2 && break || sleep 30
done
- name: Build Release Bundle (AAB)
working-directory: carry-your-live/android
run: |
for i in {1..3}; do
./gradlew bundleRelease --no-daemon -Dorg.gradle.workers.max=2 && break || sleep 30
done
- name: Find Release APK
id: find-release-apk
run: |
APK_PATH=$(find carry-your-live/android/app/build/outputs -name "*release*.apk" -type f | head -n 1)
echo "apk_path=$APK_PATH" >> "$GITHUB_OUTPUT"
echo "Found Release APK at: $APK_PATH"
- name: Find Release Bundle (AAB)
id: find-release-aab
run: |
AAB_PATH=$(find carry-your-live/android/app/build/outputs -name "*release*.aab" -type f | head -n 1)
echo "aab_path=$AAB_PATH" >> "$GITHUB_OUTPUT"
echo "Found Release AAB at: $AAB_PATH"
- name: Upload Release APK
uses: actions/upload-artifact@v4
with:
name: android-release-apk
path: ${{ steps.find-release-apk.outputs.apk_path }}
retention-days: 30
- name: Upload Release Bundle (AAB)
uses: actions/upload-artifact@v4
with:
name: android-release-aab
path: ${{ steps.find-release-aab.outputs.aab_path }}
retention-days: 30
test-lint:
name: Test & Lint
needs: setup
runs-on: ubuntu-latest
timeout-minutes: 25
steps:
- name: Checkout repository
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
cache: 'npm'
cache-dependency-path: carry-your-live/package-lock.json
- name: Setup Java
uses: actions/setup-java@v4
with:
distribution: 'temurin'
java-version: ${{ env.JAVA_VERSION }}
cache: 'gradle'
cache-dependency-path: carry-your-live/android/gradle/wrapper/gradle-wrapper.properties
- 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: Run Unit Tests
working-directory: carry-your-live/android
run: |
for i in {1..3}; do
./gradlew test --no-daemon -Dorg.gradle.workers.max=2 && break || sleep 30
done
continue-on-error: true
- name: Run Lint
working-directory: carry-your-live/android
run: |
for i in {1..2}; do
./gradlew lint --no-daemon -Dorg.gradle.workers.max=2 && break || sleep 30
done
continue-on-error: true
- name: Upload Test Reports
if: always()
uses: actions/upload-artifact@v4
with:
name: android-test-reports
path: carry-your-live/android/app/build/reports/tests/
retention-days: 14
- name: Upload Lint Reports
if: always()
uses: actions/upload-artifact@v4
with:
name: android-lint-reports
path: carry-your-live/android/app/build/reports/lint-results*.html
retention-days: 14
+74
View File
@@ -0,0 +1,74 @@
name: Build APK
on:
push:
branches: [main]
workflow_dispatch:
env:
ANDROID_HOME: ${{ runner.tool_cache }}/android-sdk
ANDROID_SDK_ROOT: ${{ runner.tool_cache }}/android-sdk
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: 22
- name: Set up JDK
uses: actions/setup-java@v4
with:
distribution: temurin
java-version: 17
- name: Install Android SDK
run: |
if [ -x "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" ]; then
echo "Android SDK already present in cache"
else
rm -rf "$ANDROID_HOME/cmdline-tools"
mkdir -p "$ANDROID_HOME/cmdline-tools"
wget -q https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip -O /tmp/cmdtools.zip
unzip -q /tmp/cmdtools.zip -d "$ANDROID_HOME/cmdline-tools"
mv "$ANDROID_HOME/cmdline-tools/cmdline-tools" "$ANDROID_HOME/cmdline-tools/latest"
fi
printf 'y\n' | "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" --licenses > /dev/null
"$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" \
"platform-tools" \
"platforms;android-35" \
"platforms;android-36" \
"build-tools;35.0.0" \
"build-tools;36.0.0" \
"ndk;27.1.12297006"
mkdir -p carry-your-live/android/app
echo "sdk.dir=$ANDROID_HOME" > carry-your-live/android/app/local.properties
- name: Install JS dependencies
working-directory: carry-your-live
run: npm ci
- name: Generate debug keystore (signs the release APK)
run: |
mkdir -p carry-your-live/android/app
keytool -genkeypair -v \
-keystore carry-your-live/android/app/debug.keystore \
-alias androiddebugkey -storepass android -keypass android \
-keyalg RSA -keysize 2048 -validity 10000 \
-dname "CN=Android Debug,O=Android,C=US"
- name: Build release APK
run: |
cd carry-your-live/android
./gradlew assembleRelease
- name: Upload APK
uses: actions/upload-artifact@v4
with:
name: carry-your-live-release
path: carry-your-live/android/app/build/outputs/release/app-release.apk
+36
View File
@@ -0,0 +1,36 @@
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
+35 -216
View File
@@ -1,237 +1,56 @@
name: Build and Release Android
name: release
on:
push:
tags:
- 'v*'
workflow_dispatch:
branches:
- main
env:
NODE_VERSION: '20'
JAVA_VERSION: '17'
ANDROID_HOME: ${{ runner.tool_cache }}/android-sdk
ANDROID_SDK_ROOT: ${{ runner.tool_cache }}/android-sdk
GITEA_SERVER_URL: "https://techmos.gitea.org"
permissions:
contents: write
jobs:
build:
name: Build Android
release:
runs-on: ubuntu-latest
timeout-minutes: 45
permissions:
contents: read
steps:
- name: Checkout repository
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
cache: 'npm'
cache-dependency-path: carry-your-live/package-lock.json
- name: Setup Java
uses: actions/setup-java@v4
with:
distribution: 'temurin'
java-version: ${{ env.JAVA_VERSION }}
cache: 'gradle'
cache-dependency-path: carry-your-live/android/gradle/wrapper/gradle-wrapper.properties
- name: Install Android SDK
- name: Compute next version
id: version
run: |
if [ -x "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" ]; then
echo "Android SDK already present in cache"
latest=$(git tag --list 'v[0-9]*' --sort=-v:refname | head -n 1)
if [ -z "$latest" ]; then
next="v1.0.0"
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"
latest=${latest#v}
IFS='.' read -r major minor patch <<< "$latest"
next="v${major}.${minor}.$((patch + 1))"
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
echo "next=${next}" >> "$GITHUB_OUTPUT"
- name: Install dependencies
working-directory: carry-your-live
- name: Build changelog
id: changelog
run: |
for i in {1..3}; do
npm ci && break || sleep 10
done
- name: Prebuild Android
working-directory: carry-your-live
run: npx expo prebuild --platform android --clean
- name: Configure Release Signing
if: env.KEYSTORE_BASE64 != ''
working-directory: carry-your-live/android/app
run: |
echo "${{ secrets.KEYSTORE_BASE64 }}" | base64 -d > release.keystore
cat > ../release-signing.properties <<EOF
storeFile=release.keystore
storePassword=${{ secrets.KEYSTORE_PASSWORD }}
keyAlias=${{ secrets.KEY_ALIAS }}
keyPassword=${{ secrets.KEY_PASSWORD }}
EOF
- name: Build Release APK
working-directory: carry-your-live/android
run: |
if [ -f "../release-signing.properties" ]; then
./gradlew assembleRelease -PreleaseSigningProperties=../release-signing.properties --no-daemon
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
./gradlew assembleRelease --no-daemon
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: Build Release Bundle (AAB)
working-directory: carry-your-live/android
run: |
if [ -f "../release-signing.properties" ]; then
./gradlew bundleRelease -PreleaseSigningProperties=../release-signing.properties --no-daemon
else
./gradlew bundleRelease --no-daemon
fi
- name: Run Tests
working-directory: carry-your-live/android
run: ./gradlew test --no-daemon
- name: Run Lint
working-directory: carry-your-live/android
run: ./gradlew lint --no-daemon
- name: Find Release APK
id: find-release-apk
run: |
APK_PATH=$(find carry-your-live/android/app/build/outputs -name "*release*.apk" -type f | head -n 1)
echo "apk_path=$APK_PATH" >> "$GITHUB_OUTPUT"
echo "Found Release APK at: $APK_PATH"
- name: Find Release Bundle (AAB)
id: find-release-aab
run: |
AAB_PATH=$(find carry-your-live/android/app/build/outputs -name "*release*.aab" -type f | head -n 1)
echo "aab_path=$AAB_PATH" >> "$GITHUB_OUTPUT"
echo "Found Release AAB at: $AAB_PATH"
- name: Upload Build Artifacts
uses: actions/upload-artifact@v4
- name: Create release
uses: softprops/action-gh-release@v2
with:
name: android-release-build
path: |
${{ steps.find-release-apk.outputs.apk_path }}
${{ steps.find-release-aab.outputs.aab_path }}
retention-days: 90
- name: Upload Test Reports
if: always()
uses: actions/upload-artifact@v4
with:
name: android-test-reports
path: carry-your-live/android/app/build/reports/tests/
retention-days: 30
- name: Upload Lint Reports
if: always()
uses: actions/upload-artifact@v4
with:
name: android-lint-reports
path: carry-your-live/android/app/build/reports/lint-results*.html
retention-days: 30
release:
name: Create Gitea Release
needs: build
if: startsWith(github.ref, 'refs/tags/v')
runs-on: ubuntu-latest
timeout-minutes: 10
permissions:
contents: write
steps:
- name: Download Build Artifacts
uses: actions/download-artifact@v4
with:
name: android-release-build
path: artifacts
- name: Create Gitea Release
env:
GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
run: |
TAG_NAME="${GITHUB_REF#refs/tags/}"
REPO_OWNER="${GITHUB_REPOSITORY%/*}"
REPO_NAME="${GITHUB_REPOSITORY#*/}"
# Detect Gitea server URL
GITEA_URL="${GITEA_SERVER_URL:-https://techmos.gitea.org}"
# Create release
RESPONSE=$(curl -s -X POST "${GITEA_URL}/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}" \
"${GITEA_URL}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/releases/tags/${TAG_NAME}" | jq -r '.id')
fi
if [ "$RELEASE_ID" = "null" ] || [ -z "$RELEASE_ID" ]; then
echo "Failed to create or find release"
exit 1
fi
echo "Release ID: $RELEASE_ID"
echo "release_id=$RELEASE_ID" >> "$GITHUB_OUTPUT"
id: create-release
- name: Upload APK to Release
env:
GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
run: |
GITEA_URL="${GITEA_URL:-https://techmos.gitea.org}"
REPO_OWNER="${GITHUB_REPOSITORY%/*}"
REPO_NAME="${GITHUB_REPOSITORY#*/}"
RELEASE_ID="${{ steps.create-release.outputs.release_id }}"
TAG_NAME="${GITHUB_REF#refs/tags/}"
for file in artifacts/*; do
if [[ "$file" == *.apk ]]; then
FILENAME="carry-your-live-${TAG_NAME}.apk"
elif [[ "$file" == *.aab ]]; then
FILENAME="carry-your-live-${TAG_NAME}.aab"
else
continue
fi
echo "Uploading $file as $FILENAME..."
curl -s -X POST "${GITEA_URL}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/releases/${RELEASE_ID}/assets" \
-H "Authorization: token ${GITEA_TOKEN}" \
-F "attachment=@${file};filename=${FILENAME}"
echo "Uploaded $FILENAME"
done
tag_name: ${{ steps.version.outputs.next }}
name: ${{ steps.version.outputs.next }}
body: ${{ steps.changelog.outputs.body }}
generate_release_notes: false
-11
View File
@@ -15,14 +15,3 @@ System architecture design, technical strategy, and scalability planning.
- Performance benchmarks
- Technical debt ratio
- Architecture compliance
## Android Design Guidelines
- Material Design elevation patterns (0-12dp shadows)
- Tab bar height: 56dp (standard Android)
- Status bar: dark style for light backgrounds, light style for dark
- System back button: router.back() or goBack() with confirmation on home screen
- Touch ripple: opacity scaling on press (44dp touch targets, 8dp border radius)
- Safe area insets: account for bottom navigation bar (84px + system insets)
- Theme: primary accent color with complementary supporting colors
- Typography: Roboto-inspired font weights (600 for labels, 400/500 for body)
- Scaling: 8dp grid system for spacing and margins
+102 -492
View File
@@ -1,40 +1,6 @@
# Carry Your Live - Mobile To-Do & Calendar App
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
---
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.
## Features
@@ -42,145 +8,97 @@ 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. Tasks Screen (To-Do List)
#### 1. To-Do List Screen
- **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
- **QuickAddBar**: Quick task creation from list view
- **Task List**: Virtualized FlatList with sections (Pending/Completed)
- **Task List**: Vertical scrolling with:
- Checkbox (empty/checked states with animation)
- 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
- 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
- Completed section (collapsible)
- **Floating Action Button**: Bottom-right, opens Add Task screen with press animation
#### 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
#### 2. 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, nested subtask support
- **Date & Time**: Date picker, time picker (WheelTimePicker), calendar button
- **Subtasks**: Unlimited, add/remove individually
- **Date & Time**: Date picker, time picker, 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
#### 6. Task Detail Screen
- Full task view with all fields
- Subtask management (add, complete, reorder, convert to task)
- Edit functionality
- Repeat profile configuration
#### 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."
#### 7. Subtask Detail Screen
- Nested subtask management
- Convert subtask ↔ task
- Re-parent subtasks
#### 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
#### 8. Sync Modal
- Login/Register forms
- Forgot/Reset password flow
- Server URL configuration
- Sync status display
### 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
### 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)
---
### 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
## Tech Stack
| Layer | Technology |
|-------|------------|
| Framework | Expo (React Native) / Expo Router v3 |
| Language | TypeScript (strict mode) |
| Framework | Expo (React Native) |
| Language | TypeScript |
| Navigation | Expo Router (file-based) |
| Database | WatermelonDB + SQLite (expo-sqlite) |
| State | WatermelonDB reactive queries (no Redux) |
| Database | WatermelonDB + SQLite |
| State | WatermelonDB (reactive queries, no Redux needed) |
| Forms | React Hook Form + Zod validation |
| 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) |
| 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) |
| 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 + AuthProvider
│ ├── _layout.tsx # Root layout + DatabaseProvider
│ ├── (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
│ ├── day-view.tsx # Calendar day detail
│ ├── task-detail.tsx # Task view/edit
│ └── subtask-detail.tsx # Subtask view/edit
│ └── add-task.tsx # Add Task screen
├── src/
│ ├── components/ # Reusable UI components (30+)
│ ├── components/ # Reusable UI components
│ │ ├── Header.tsx
│ │ ├── CategoryFilter.tsx
│ │ ├── TaskList.tsx
│ │ ├── TaskItem.tsx
│ │ ├── FloatingActionButton.tsx
│ │ ├── TabBarIcon.tsx
│ │ ├── CategorySelector.tsx
│ │ ├── TaskNameInput.tsx
│ │ ├── SubtasksSection.tsx
@@ -188,102 +106,24 @@ carry-your-live/
│ │ ├── PrioritySelector.tsx
│ │ ├── DescriptionInput.tsx
│ │ ├── FormButtons.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
│ │ └── ListItem.tsx
│ ├── database/
│ │ ├── schema.ts # WatermelonDB schema (v21)
│ │ ├── schema.ts # WatermelonDB schema
│ │ ├── index.ts # Database instance + collections
│ │ ├── sync.ts # Custom API sync adapter (25KB)
│ │ ├── migrations.ts # Schema migrations
│ │ ├── adapter.ts # Platform-specific adapters
│ │ └── tombstones.ts # Deleted record tracking
│ │ └── 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
│ │ ├── 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
│ │ └── useTasks.tsx # Task queries with reactive state
│ ├── constants/
│ │ └── index.ts # Categories, priorities, colors
│ └── types/
│ └── index.ts # TypeScript interfaces
```
---
## Data Models
### Task
@@ -295,14 +135,8 @@ carry-your-live/
categoryId: string;
priority: 'none' | 'low' | 'medium' | 'high' | 'critical';
completed: boolean;
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"
dueDate: number; // timestamp
dueTime: string; // "HH:MM"
createdAt: Date;
updatedAt: Date;
subtasks: Subtask[];
@@ -316,8 +150,6 @@ carry-your-live/
name: string;
color: '#HEX';
order: number;
createdAt: Date;
updatedAt: Date;
}
```
@@ -326,47 +158,14 @@ 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 |
|------|-------|-------|
@@ -377,8 +176,6 @@ carry-your-live/
| Health | #8E24AA (Purple) | 4 |
| Finance | #FDD835 (Yellow) | 5 |
---
## Priority Colors
| Priority | Color |
|----------|-------|
@@ -388,8 +185,6 @@ carry-your-live/
| High | #E53935 |
| Critical | #B71C1C |
---
## Getting Started
### Prerequisites
@@ -397,23 +192,15 @@ 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
@@ -423,37 +210,6 @@ 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)
@@ -469,16 +225,18 @@ eas build --platform ios
eas build --platform android
eas build --platform web
```
Profiles defined in `eas.json` (`development`, `preview`, `production`; production auto-increments version code).
Profiles are 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 (signed with debug keystore)
# Release APK (currently signed with the debug keystore)
./gradlew assembleRelease
```
Output:
@@ -486,21 +244,24 @@ 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`
4. **Debug keystore**: generates `carry-your-live/android/app/debug.keystore` with `keytool` (alias `androiddebugkey`, passwords `android`)
5. **Build**: `./gradlew assembleRelease` in `carry-your-live/android/`
6. **Upload**: APK saved as `carry-your-live-release` artifact
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:
To run locally exactly as CI does:
```bash
keytool -genkeypair -v \
-keystore carry-your-live/android/app/debug.keystore \
@@ -510,119 +271,48 @@ keytool -genkeypair -v \
cd carry-your-live/android && ./gradlew assembleRelease
```
---
## Sync API Specification
## Backend API Specification
The app expects a custom API at `http://localhost:3000/api` (configurable in `src/database/sync.ts`):
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": [...],
### 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" }],
"timestamp": 1234567890
}
```
}
```
2. **Push**: Client sends batched changes with `lastPulledAt`
```json
{
### Push Changes
```
POST /sync/push
```
Body:
```json
{
"changes": {
"categories": [...],
"tasks": [...],
"subtasks": [...],
"repeatProfiles": [...],
"friendships": [...]
"subtasks": [...]
},
"tombstones": [...],
"lastPulledAt": 1234567890
}
```
3. **Conflict Resolution**: Last-write-wins based on `updatedAt` (customizable in `src/database/sync.ts`)
---
}
```
## Configuration
### Frontend Environment Variables
Create `.env` file in `carry-your-live/`:
### Environment Variables
Create `.env` file:
```
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
@@ -630,12 +320,10 @@ Modify `app.json` for:
- Permissions (notifications, etc.)
- Orientation, theme
---
## Visual Style Guide
- **Background**: White (#FFFFFF) / Dark mode (planned)
- **Primary Accent**: #E53935 (Pink/Red) - customizable
- **Background**: White (#FFFFFF)
- **Primary Accent**: #E53935 (Pink/Red)
- **Typography**: Black (#212121) primary, #757575 secondary, #9E9E9E tertiary
- **Borders**: Thin (#E0E0E0), selected #E53935
- **Radius**: 16-20px for cards/buttons/inputs
@@ -643,13 +331,11 @@ Modify `app.json` for:
- **Shadows**: Minimal (elevation 1-3)
- **Animations**: 150-250ms, cubic easing
---
## Offline-First Architecture
```
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ Expo App │────▶│ WatermelonDB │────▶│ Backend │
│ Expo App │────▶│ WatermelonDB │────▶│ Your API │
│ (iOS/Android│ │ (SQLite) │ │ (Postgres) │
│ Web) │◀───▶│ + Sync │◀───▶│ │
└─────────────┘ └──────────────┘ └─────────────┘
@@ -659,79 +345,6 @@ 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
@@ -740,9 +353,6 @@ Based on code audit (August 2026):
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
-19
View File
@@ -1,19 +0,0 @@
# OSX
#
.DS_Store
# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml
*.hprof
.cxx/
# generated inline modules
app/src/main/java/inline/
# Bundle artifacts
*.jsbundle
-194
View File
@@ -1,194 +0,0 @@
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'
}
release {
if (project.hasProperty('releaseSigningProperties')) {
def propsFile = file(project.property('releaseSigningProperties'))
if (propsFile.exists()) {
def props = new Properties()
props.load(new FileInputStream(propsFile))
storeFile = file(props['storeFile'])
storePassword = props['storePassword']
keyAlias = props['keyAlias']
keyPassword = props['keyPassword']
}
}
}
}
buildTypes {
debug {
signingConfig = signingConfigs.debug
}
release {
signingConfig = signingConfigs.release
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
@@ -1,14 +0,0 @@
# 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:
@@ -1,7 +0,0 @@
<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>
@@ -1,7 +0,0 @@
<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>
@@ -1,36 +0,0 @@
<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>
@@ -1,61 +0,0 @@
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()
}
}
@@ -1,45 +0,0 @@
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.

Before

Width:  |  Height:  |  Size: 1010 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 584 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

@@ -1,6 +0,0 @@
<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>
@@ -1,37 +0,0 @@
<?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>
@@ -1,6 +0,0 @@
<?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>
@@ -1,6 +0,0 @@
<?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.

Before

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

@@ -1,3 +0,0 @@
<resources>
<color name="appBackground">#121212</color>
</resources>
@@ -1,7 +0,0 @@
<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>
@@ -1,3 +0,0 @@
<resources>
<string name="app_name">carry-your-live</string>
</resources>
@@ -1,12 +0,0 @@
<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
@@ -1,37 +0,0 @@
// 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
@@ -1,66 +0,0 @@
# 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
@@ -1,2 +0,0 @@
#This file is generated by updateDaemonJvm
toolchainVersion=17
Binary file not shown.
@@ -1,7 +0,0 @@
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
@@ -1,248 +0,0 @@
#!/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
@@ -1,93 +0,0 @@
@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
@@ -1,42 +0,0 @@
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)
+1 -3
View File
@@ -34,9 +34,7 @@
"color": "#1E88E5"
}
],
"./plugins/withQuickAddWidget",
"expo-router",
"expo-sqlite"
"./plugins/withQuickAddWidget"
],
"extra": {
"eas": {
+31 -48
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, Animated } from 'react-native';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { TabBarIcon } from '@/components/TabBarIcon';
import { useSettings } from '@/theme';
import { setLastVisitedTab } from '@/utils/tabHistory';
@@ -18,29 +18,28 @@ export default function TabLayout() {
tabBarStyle: {
backgroundColor: theme.tabBarBg,
borderTopWidth: 0,
height: 56,
height: 84 + insets.bottom,
paddingBottom: insets.bottom,
paddingTop: insets.top,
paddingTop: 12,
paddingHorizontal: 16,
elevation: 4,
elevation: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 8,
shadowOffset: { width: 0, height: -4 },
shadowOpacity: 0.12,
shadowRadius: 20,
},
tabBarItemStyle: {
paddingVertical: 6,
paddingHorizontal: 12,
paddingVertical: 0,
},
tabBarLabelStyle: {
fontSize: 12,
fontWeight: '600',
marginTop: 2,
fontSize: 11,
fontWeight: '700',
marginTop: 4,
},
headerShown: false,
sceneStyle: { backgroundColor: theme.background },
}}
tabBar={props => {
tabBar={(props) => {
return (
<View
style={[
@@ -49,49 +48,34 @@ export default function TabLayout() {
backgroundColor: theme.tabBarBg,
paddingBottom: Math.max(props.insets.bottom, 8),
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
shadowOffset: { width: 0, height: -4 },
shadowOpacity: 0.12,
shadowRadius: 20,
elevation: 8,
},
]}
>
{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>
);
})}
@@ -119,23 +103,22 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
paddingTop: 6,
paddingTop: 10,
paddingHorizontal: 16,
},
tabItem: {
flex: 1,
alignItems: 'center',
paddingVertical: 6,
paddingHorizontal: 12,
borderRadius: 8,
paddingVertical: 8,
paddingHorizontal: 8,
borderRadius: 16,
minWidth: 70,
},
rippleContainer: {
width: 44,
height: 44,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
tabItemActive: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
},
});
+40 -158
View File
@@ -1,15 +1,5 @@
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';
@@ -25,15 +15,7 @@ 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';
@@ -42,18 +24,8 @@ 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() {
@@ -98,9 +70,7 @@ 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]);
@@ -148,18 +118,10 @@ 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;
});
});
@@ -186,11 +148,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;
@@ -221,26 +183,22 @@ 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);
@@ -251,15 +209,12 @@ 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 }]}>
@@ -274,28 +229,17 @@ export default function CalendarScreen() {
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"
/>
<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
@@ -304,73 +248,34 @@ 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>
@@ -385,7 +290,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}
@@ -404,9 +309,7 @@ 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'}
@@ -416,15 +319,11 @@ 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 (
@@ -435,12 +334,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>
@@ -520,7 +419,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}
@@ -541,11 +440,7 @@ 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;
}
@@ -561,23 +456,11 @@ 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}
>
@@ -605,8 +488,7 @@ const DayCell = React.memo(function DayCell({
);
});
const createStyles = (theme: ThemeColors) =>
StyleSheet.create({
const createStyles = (theme: ThemeColors) => StyleSheet.create({
container: {
flex: 1,
},
@@ -754,4 +636,4 @@ const createStyles = (theme: ThemeColors) =>
paddingRight: 4,
paddingTop: 4,
},
});
});
+8 -28
View File
@@ -1,13 +1,5 @@
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';
@@ -47,10 +39,7 @@ 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}
@@ -68,27 +57,18 @@ 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>
+57 -231
View File
@@ -1,18 +1,5 @@
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';
@@ -23,15 +10,7 @@ import { FriendsModal } from '@/components/FriendsModal';
import { LegalModal } from '@/components/LegalModal';
import { ServerUrlModal } from '@/components/ServerUrlModal';
import SyncStatus from '@/components/SyncStatus';
import {
useSettings,
SORT_OPTIONS,
REMINDER_OPTIONS,
ACCENT_PRESETS,
DEFAULT_ACCENT,
DEFAULT_ACCENT_OPACITY,
ThemeMode,
} from '@/theme';
import { useSettings, SORT_OPTIONS, REMINDER_OPTIONS, ACCENT_PRESETS, DEFAULT_ACCENT } from '@/theme';
import { useCategories } from '@/hooks/useDatabase';
import { getAuthUser, getAuthToken } from '@/services/auth';
import { checkForUpdates, getCurrentAppVersion } from '@/services/updates';
@@ -45,38 +24,9 @@ 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,
accentOpacity,
setAccentOpacity,
todoAheadDays,
setTodoAheadDays,
showCompleted,
setShowCompleted,
deleteBySwipe,
setDeleteBySwipe,
themeMode,
setThemeMode,
syncSettingsToServer,
loadSettingsFromServer,
} = useSettings();
const { theme, notifications, setNotifications, defaultCategoryId, setDefaultCategoryId, sortBy, setSortBy, reminderPreference, setReminderPreference, tagReminderPreferences, setTagReminderPreferences, apiUrl, accentColor, setAccentColor, accentOpacity, setAccentOpacity, todoAheadDays, setTodoAheadDays, showCompleted, setShowCompleted, deleteBySwipe, setDeleteBySwipe } = useSettings();
const categories = useCategories();
const [picker, setPicker] = useState<
null | 'category' | 'sort' | 'reminder' | 'todoAhead' | 'themeMode'
>(null);
const [picker, setPicker] = useState<null | 'category' | 'sort' | 'reminder' | 'todoAhead'>(null);
const [reminderTagPicker, setReminderTagPicker] = useState<Category | null>(null);
const [editingCategory, setEditingCategory] = useState<Category | null | 'new'>(null);
const [syncVisible, setSyncVisible] = useState(false);
@@ -88,19 +38,16 @@ export default function SettingsScreen() {
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' },
@@ -113,17 +60,6 @@ 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) {
@@ -134,9 +70,7 @@ 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');
@@ -150,8 +84,6 @@ export default function SettingsScreen() {
useFocusEffect(
useCallback(() => {
refreshSyncStatus();
checkForUpdatesOnLoad();
const sub = BackHandler.addEventListener('hardwareBackPress', () => {
const target = getLastVisitedTab();
if (target && target !== 'settings') {
@@ -160,18 +92,19 @@ export default function SettingsScreen() {
return true;
});
return () => sub.remove();
}, [refreshSyncStatus, router])
}, [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 = () => {
@@ -213,12 +146,14 @@ 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
/>
@@ -230,12 +165,7 @@ 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>
@@ -247,18 +177,7 @@ export default function SettingsScreen() {
rightElement={
<Switch
value={notifications}
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);
}
}}
onValueChange={setNotifications}
thumbColor="#FFFFFF"
trackColor={{ false: theme.borderStrong, true: theme.accent }}
/>
@@ -270,12 +189,14 @@ 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
/>
@@ -289,7 +210,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
/>
@@ -327,7 +248,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={[
@@ -340,14 +261,7 @@ 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>
@@ -360,15 +274,6 @@ 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
@@ -377,32 +282,6 @@ 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"
@@ -423,19 +302,26 @@ export default function SettingsScreen() {
onPress={handleCheckUpdates}
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 />
<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)}
@@ -446,7 +332,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)}
/>
@@ -459,15 +345,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)}
/>
))}
@@ -481,15 +367,6 @@ 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}
@@ -497,86 +374,41 @@ 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)}
>
<Pressable style={styles.accentModalOverlay} onPress={() => setCustomAccentVisible(false)}>
<Modal visible={customAccentVisible} transparent animationType="fade" onRequestClose={() => setCustomAccentVisible(false)}>
<Pressable
style={[styles.accentModalSheet, { backgroundColor: theme.sheetBg }]}
onPress={() => {}}
>
<View style={styles.accentModalHeader}>
<Text style={[styles.accentModalTitle, { color: theme.text }]}>
Custom Accent Color
</Text>
<TouchableOpacity
style={styles.accentModalOverlay}
onPress={() => setCustomAccentVisible(false)}
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
>
<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 }}>
<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}
opacity={draftAccentOpacity}
onChange={(color, opacity) => {
setDraftAccent(color);
setDraftAccentOpacity(opacity);
}}
/>
<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);
setDraftAccentOpacity(DEFAULT_ACCENT_OPACITY);
setAccentColor(DEFAULT_ACCENT);
setAccentOpacity(DEFAULT_ACCENT_OPACITY);
}}
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);
setAccentOpacity(draftAccentOpacity);
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>
@@ -597,12 +429,6 @@ 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';
+12 -34
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,42 +25,27 @@ 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>
@@ -79,10 +64,7 @@ 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>
@@ -96,11 +78,9 @@ 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>
@@ -113,11 +93,9 @@ 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>
+5 -20
View File
@@ -8,13 +8,9 @@ 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 () => ({
@@ -33,7 +29,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;
@@ -58,29 +54,18 @@ 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="dark" />
<StatusBar style="light" />
<Stack screenOptions={{ headerShown: false }}>
<Stack.Screen name="(tabs)" />
<Stack.Screen name="add-task" />
+11 -18
View File
@@ -1,14 +1,5 @@
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';
@@ -121,8 +112,7 @@ 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]) || '';
@@ -130,7 +120,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;
@@ -156,7 +146,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 = '';
@@ -208,7 +198,7 @@ export default function AddTaskScreen() {
>
<CategorySelector
value={tags}
onChange={value => setValue('tags', value)}
onChange={(value) => setValue('tags', value)}
error={errors.categoryId?.message}
/>
<Controller
@@ -224,7 +214,10 @@ 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}
@@ -239,12 +232,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}
+35 -146
View File
@@ -1,14 +1,5 @@
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';
@@ -26,11 +17,7 @@ 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() {
@@ -66,68 +53,45 @@ 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}
@@ -140,76 +104,41 @@ 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>
)}
@@ -223,14 +152,7 @@ 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>
@@ -238,16 +160,10 @@ 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}
@@ -260,49 +176,26 @@ 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>
@@ -312,18 +205,14 @@ 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,
},
@@ -401,4 +290,4 @@ const createStyles = (theme: ThemeColors) =>
padding: 4,
marginLeft: 6,
},
});
});
+17 -54
View File
@@ -1,15 +1,5 @@
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';
@@ -25,14 +15,7 @@ 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';
@@ -85,14 +68,7 @@ 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') ?? [];
@@ -122,10 +98,7 @@ 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,
@@ -187,9 +160,7 @@ 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>
);
}
@@ -200,23 +171,9 @@ 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>
}
@@ -244,8 +201,14 @@ 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}
@@ -260,12 +223,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}
+38 -139
View File
@@ -1,15 +1,5 @@
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';
@@ -57,27 +47,13 @@ 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>
@@ -130,14 +106,7 @@ 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');
@@ -160,8 +129,7 @@ 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,
@@ -175,14 +143,11 @@ 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 {
@@ -190,9 +155,7 @@ export default function TaskDetailScreen() {
}
})();
return () => {
mounted = false;
};
return () => { mounted = false; };
}, [id, isReady, reset]);
const onSubmit = async (data: TaskFormData) => {
@@ -211,7 +174,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 || '';
@@ -239,10 +202,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;
@@ -251,7 +214,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 || '';
@@ -281,11 +244,9 @@ 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;
});
@@ -327,23 +288,9 @@ 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>
}
@@ -363,7 +310,7 @@ export default function TaskDetailScreen() {
>
<CategorySelector
value={tags}
onChange={value => setValue('tags', value)}
onChange={(value) => setValue('tags', value)}
error={errors.categoryId?.message}
/>
<Controller
@@ -379,36 +326,21 @@ 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"
@@ -419,9 +351,7 @@ export default function TaskDetailScreen() {
fill="none"
/>
</Svg>
}
defaultExpanded={repeat !== 'none'}
>
} defaultExpanded={repeat !== 'none'}>
<RepeatSelector
value={repeat}
interval={repeatInterval}
@@ -434,9 +364,7 @@ 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"
@@ -447,61 +375,32 @@ 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"
+605 -727
View File
File diff suppressed because it is too large Load Diff
+10 -11
View File
@@ -9,23 +9,22 @@
"@react-native-async-storage/async-storage": "2.2.0",
"@react-native-community/datetimepicker": "9.1.0",
"date-fns": "^3.6.0",
"expo": "~57.0.18",
"expo": "~57.0.10",
"expo-blur": "~57.0.2",
"expo-constants": "~57.0.9",
"expo-dev-client": "~57.0.16",
"expo-dev-client": "~57.0.1",
"expo-device": "^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-linking": "~57.0.5",
"expo-notifications": "~57.0.8",
"expo-router": "~57.0.10",
"expo-sqlite": "~57.0.1",
"expo-status-bar": "~57.0.1",
"expo-system-ui": "~57.0.3",
"expo-updates": "~57.0.19",
"expo-system-ui": "~57.0.2",
"expo-updates": "~57.0.12",
"react": "19.2.3",
"react-dom": "19.2.3",
"react-hook-form": "^7.51.5",
"react-native": "0.86.3",
"react-native": "0.86.2",
"react-native-gesture-handler": "2.32.0",
"react-native-keyboard-controller": "1.21.9",
"react-native-safe-area-context": "5.7.0",
@@ -41,7 +40,7 @@
"electron": "^41.7.1",
"electron-builder": "^26.15.3",
"eslint": "^9.0.0",
"eslint-config-expo": "~57.0.2",
"eslint-config-expo": "~57.0.1",
"patch-package": "^8.0.1",
"prettier": "^3.9.6",
"typescript": "~6.0.3"
@@ -1,78 +0,0 @@
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,
});
@@ -161,7 +161,7 @@ export function CategoryEditorModal({
</TouchableOpacity>
))}
</View>
<ColorWheel color={color} opacity={1} onChange={setColor} />
<ColorWheel color={color} onChange={setColor} />
<View style={styles.actions}>
{category && (
+1 -11
View File
@@ -1,17 +1,7 @@
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Switch } from 'react-native';
export const ListItem = ({
title,
subtitle,
onPress,
leftIcon,
rightIcon,
disabled,
leftElement,
rightElement,
showChevron,
}: {
export const ListItem = ({ title, subtitle, onPress, leftIcon, rightIcon, disabled, leftElement, rightElement, showChevron }: {
title: string;
subtitle?: string | undefined;
onPress?: () => void;
@@ -19,22 +19,10 @@ interface OptionPickerModalProps {
multiSelect?: boolean;
}
export function OptionPickerModal({
visible,
title,
options,
selectedValue,
onSelect,
onClose,
multiSelect = false,
}: OptionPickerModalProps) {
export function OptionPickerModal({ visible, title, options, selectedValue, onSelect, onClose, multiSelect = false }: OptionPickerModalProps) {
const { theme } = useSettings();
const selectedValues = Array.isArray(selectedValue)
? selectedValue
: selectedValue == null
? []
: [selectedValue];
const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue == null ? [] : [selectedValue];
return (
<Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
@@ -43,7 +31,7 @@ export function OptionPickerModal({
<Text style={[styles.title, { color: theme.text }]}>{title}</Text>
<FlatList
data={options}
keyExtractor={item => item.value}
keyExtractor={(item) => item.value}
renderItem={({ item }) => {
const selected = selectedValues.includes(item.value);
return (
@@ -56,7 +44,7 @@ export function OptionPickerModal({
onPress={() => {
if (multiSelect) {
const newValues = selected
? selectedValues.filter(v => v !== item.value)
? selectedValues.filter((v) => v !== item.value)
: [...selectedValues, item.value];
onSelect(newValues);
} else {
@@ -69,49 +57,23 @@ export function OptionPickerModal({
accessibilityLabel={item.label}
accessibilityState={multiSelect ? { checked: selected } : { selected }}
>
{item.color && <View style={[styles.dot, { backgroundColor: item.color }]} />}
<Text
style={[
styles.optionText,
{ color: selected ? theme.accent : theme.textSecondary },
]}
>
{item.color && (
<View style={[styles.dot, { backgroundColor: item.color }]} />
)}
<Text style={[styles.optionText, { color: selected ? theme.accent : theme.textSecondary }]}>
{item.label}
</Text>
{multiSelect ? (
<Svg width={22} height={22} viewBox="0 0 24 24">
<Circle
cx={12}
cy={12}
r={10}
stroke={selected ? theme.accent : theme.borderStrong}
strokeWidth={2}
fill={selected ? theme.accent : 'transparent'}
/>
<Circle cx={12} cy={12} r={10} stroke={selected ? theme.accent : theme.borderStrong} strokeWidth={2} fill={selected ? theme.accent : 'transparent'} />
{selected && (
<Path
d="M8 12l3 3 6-6"
stroke="#FFFFFF"
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
<Path d="M8 12l3 3 6-6" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
)}
</Svg>
) : (
selected && (
) : selected && (
<Svg width={18} height={18} 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>
);
@@ -24,17 +24,13 @@ export function PrioritySelector({ value, onChange }: PrioritySelectorProps) {
<View style={styles.container}>
<Text style={[styles.label, { color: theme.text }]}>Priority</Text>
<View style={styles.options} accessibilityRole="radiogroup" accessibilityLabel="Priority">
{priorities.map(priority => (
{priorities.map((priority) => (
<TouchableOpacity
key={priority.value}
style={[
styles.option,
{ backgroundColor: theme.card, borderColor: theme.borderStrong },
value === priority.value && {
borderColor: theme.accent,
backgroundColor: theme.accentSoft,
borderWidth: 2,
},
value === priority.value && { borderColor: theme.accent, backgroundColor: theme.accentSoft, borderWidth: 2 },
]}
onPress={() => onChange(priority.value)}
activeOpacity={0.8}
@@ -42,20 +38,16 @@ export function PrioritySelector({ value, onChange }: PrioritySelectorProps) {
accessibilityLabel={`${priority.label} priority`}
accessibilityState={{ selected: value === priority.value }}
>
<View
style={[
<View style={[
styles.colorIndicator,
{ backgroundColor: PRIORITY_COLORS[priority.value] },
value === priority.value && styles.colorIndicatorSelected,
]}
/>
<Text
style={[
]} />
<Text style={[
styles.optionText,
{ color: theme.textFaint },
value === priority.value && { color: theme.accentStrong, fontWeight: '600' },
]}
>
]}>
{priority.label}
</Text>
</TouchableOpacity>
+13 -53
View File
@@ -1,13 +1,5 @@
import React, { useState, useEffect, useMemo, useRef } from 'react';
import {
View,
StyleSheet,
TextInput,
TouchableOpacity,
Keyboard,
Text,
Platform,
} from 'react-native';
import { View, StyleSheet, TextInput, TouchableOpacity, Keyboard, Text, Platform } from 'react-native';
import { BlurView } from 'expo-blur';
import { database, collections } from '@/database';
import { useCategories } from '@/hooks/useDatabase';
@@ -22,20 +14,10 @@ interface QuickAddBarProps {
placeholder?: string;
}
const BlurContainer = ({
children,
style,
theme,
}: {
children: React.ReactNode;
style: any;
theme: any;
}) => {
const BlurContainer = ({ children, style, theme }: { children: React.ReactNode; style: any; theme: any }) => {
if (Platform.OS === 'web') {
return (
<View
style={[style, { backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border }]}
>
<View style={[style, { backgroundColor: theme.card, borderWidth: 1, borderColor: theme.border }]}>
{children}
</View>
);
@@ -56,10 +38,10 @@ export function QuickAddBar({ dueDate = 0, placeholder }: QuickAddBarProps) {
const inputRef = useRef<TextInput>(null);
const visibleCategories = useMemo(
() => categories.filter(c => c.name.toLowerCase() !== 'calendar'),
() => categories.filter((c) => c.name.toLowerCase() !== 'calendar'),
[categories]
);
const categoryColor = visibleCategories.find(c => c.id === categoryId)?.color ?? theme.textMuted;
const categoryColor = visibleCategories.find((c) => c.id === categoryId)?.color ?? theme.textMuted;
useEffect(() => {
return subscribeToQuickAdd(() => {
@@ -75,7 +57,7 @@ export function QuickAddBar({ dueDate = 0, placeholder }: QuickAddBarProps) {
const now = new Date();
await database.write(async () => {
await collections.tasks.create(t => {
await collections.tasks.create((t) => {
t.title = trimmed;
t.description = '';
t.categoryId = categoryId || '';
@@ -101,31 +83,16 @@ export function QuickAddBar({ dueDate = 0, placeholder }: QuickAddBarProps) {
return (
<View style={styles.wrapper}>
<BlurContainer theme={theme} style={styles.blurContainer}>
<View
style={[
styles.bar,
{ backgroundColor: 'rgba(255,255,255,0.05)', borderColor: 'rgba(255,255,255,0.1)' },
]}
>
<View style={[styles.bar, { backgroundColor: 'rgba(255,255,255,0.05)', borderColor: 'rgba(255,255,255,0.1)' }]}>
<TouchableOpacity
style={[
styles.categoryButton,
{ borderColor: theme.borderStrong, backgroundColor: theme.cardAlt },
]}
style={[styles.categoryButton, { borderColor: theme.borderStrong, backgroundColor: theme.cardAlt }]}
onPress={() => setCategoryPickerVisible(true)}
activeOpacity={0.7}
accessibilityLabel="Select tags"
>
<View style={[styles.categoryButtonDot, { backgroundColor: categoryColor }]} />
<Svg width={12} height={12} viewBox="0 0 24 24">
<Path
d="M6 9l6 6 6-6"
stroke={theme.textSecondary}
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
<Path d="M6 9l6 6 6-6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
</Svg>
</TouchableOpacity>
<TextInput
@@ -141,11 +108,7 @@ export function QuickAddBar({ dueDate = 0, placeholder }: QuickAddBarProps) {
accessibilityHint="Enter a task name and press the add button"
/>
<TouchableOpacity
style={[
styles.submit,
{ backgroundColor: theme.accent },
title.trim() ? {} : styles.submitDisabled,
]}
style={[styles.submit, { backgroundColor: theme.accent }, title.trim() ? {} : styles.submitDisabled]}
onPress={title.trim() ? handleAdd : undefined}
disabled={!title.trim()}
activeOpacity={0.8}
@@ -169,12 +132,9 @@ export function QuickAddBar({ dueDate = 0, placeholder }: QuickAddBarProps) {
<OptionPickerModal
visible={categoryPickerVisible}
title="Select Tags"
options={[
{ value: '', label: 'None', color: theme.textMuted },
...visibleCategories.map(c => ({ value: c.id, label: c.name, color: c.color })),
]}
options={[{ value: '', label: 'None', color: theme.textMuted }, ...visibleCategories.map((c) => ({ value: c.id, label: c.name, color: c.color }))]}
selectedValue={categoryId}
onSelect={value => setCategoryId(Array.isArray(value) ? value[0] : value)}
onSelect={(value) => setCategoryId(Array.isArray(value) ? value[0] : value)}
onClose={() => setCategoryPickerVisible(false)}
/>
</View>
@@ -202,7 +162,7 @@ const styles = StyleSheet.create({
borderBottomWidth: 1,
shadowColor: '#000',
shadowOffset: { width: 0, height: -2 },
shadowOpacity: 0.1,
shadowOpacity: 0.10,
shadowRadius: 6,
elevation: 6,
minHeight: 56,
@@ -18,12 +18,8 @@ export function ReminderSelector({ value, onChange, hasDueDate }: ReminderSelect
const selectedReminders = parseReminders(value);
const disabled = !hasDueDate;
const reminderLabels =
selectedReminders.length > 0
? selectedReminders
.map(r => REMINDER_OPTIONS.find(o => o.value === r)?.label)
.filter(Boolean)
.join(', ')
const reminderLabels = selectedReminders.length > 0
? selectedReminders.map(r => REMINDER_OPTIONS.find(o => o.value === r)?.label).filter(Boolean).join(', ')
: 'No reminder';
return (
@@ -33,10 +29,7 @@ export function ReminderSelector({ value, onChange, hasDueDate }: ReminderSelect
style={[
styles.row,
{ backgroundColor: theme.card, borderColor: theme.borderStrong },
selectedReminders.length > 0 && {
borderColor: theme.accent,
backgroundColor: theme.accentSoft,
},
selectedReminders.length > 0 && { borderColor: theme.accent, backgroundColor: theme.accentSoft },
disabled && { opacity: 0.5 },
]}
onPress={() => setShowPicker(true)}
@@ -56,14 +49,7 @@ export function ReminderSelector({ value, onChange, hasDueDate }: ReminderSelect
strokeLinejoin="round"
fill="none"
/>
<Circle
cx={18.5}
cy={5.5}
r={3.5}
fill={selectedReminders.length > 0 ? theme.accent : 'transparent'}
stroke={selectedReminders.length > 0 ? theme.accentText : theme.textSecondary}
strokeWidth={1.8}
/>
<Circle cx={18.5} cy={5.5} r={3.5} fill={selectedReminders.length > 0 ? theme.accent : 'transparent'} stroke={selectedReminders.length > 0 ? theme.accentText : theme.textSecondary} strokeWidth={1.8} />
</Svg>
<Text
style={[
@@ -76,32 +62,20 @@ export function ReminderSelector({ value, onChange, hasDueDate }: ReminderSelect
</Text>
<View style={styles.chevron}>
<Svg width={16} height={16} viewBox="0 0 24 24">
<Path
d="M9 18l6-6-6-6"
stroke={theme.textSecondary}
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
<Path d="M9 18l6-6-6-6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
</Svg>
</View>
</TouchableOpacity>
{!hasDueDate && (
<Text style={[styles.hint, { color: theme.textMuted }]}>
Set a due date to add reminders.
</Text>
<Text style={[styles.hint, { color: theme.textMuted }]}>Set a due date to add reminders.</Text>
)}
<OptionPickerModal
visible={showPicker}
title="Reminders"
options={REMINDER_OPTIONS.filter(o => o.value !== 'none').map(o => ({
value: o.value,
label: o.label,
}))}
options={REMINDER_OPTIONS.filter((o) => o.value !== 'none').map((o) => ({ value: o.value, label: o.label }))}
selectedValue={selectedReminders}
onSelect={v => onChange(toRemindersString(v as Reminder[]))}
onSelect={(v) => onChange(toRemindersString(v as Reminder[]))}
onClose={() => setShowPicker(false)}
multiSelect
/>
+30 -124
View File
@@ -1,22 +1,6 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Modal,
TextInput,
Pressable,
KeyboardAvoidingView,
} from 'react-native';
import {
Repeat,
REPEAT_OPTIONS,
WEEKDAY_LABELS,
WEEKDAY_ORDER,
weekdaysInDisplayOrder,
repeatDaysFromString,
} from '@/types';
import { View, Text, StyleSheet, TouchableOpacity, Modal, TextInput, Pressable, KeyboardAvoidingView } from 'react-native';
import { Repeat, REPEAT_OPTIONS, WEEKDAY_LABELS, WEEKDAY_ORDER, weekdaysInDisplayOrder, repeatDaysFromString } from '@/types';
import { useSettings } from '@/theme';
import { useRepeatProfiles } from '@/hooks/useDatabase';
import { createRepeatProfile, deleteRepeatProfile } from '@/utils/repeatProfileActions';
@@ -59,15 +43,7 @@ function RepeatIcon({ repeat, color }: { repeat: Repeat; color: string }) {
);
}
const WEEKDAY_NAMES = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
];
const WEEKDAY_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
function unitLabel(value: Repeat): string {
switch (value) {
@@ -101,16 +77,12 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
};
const toggleDay = (day: number) => {
const nextDays = days.includes(day) ? days.filter(d => d !== day) : [...days, day].sort();
const nextDays = days.includes(day) ? days.filter((d) => d !== day) : [...days, day].sort();
if (value === 'custom' && nextDays.length === 0) return;
onChange(value, interval, nextDays);
};
const applyProfile = (profile: {
repeat: Repeat;
repeatInterval: number;
repeatDays: string;
}) => {
const applyProfile = (profile: { repeat: Repeat; repeatInterval: number; repeatDays: string }) => {
onChange(profile.repeat, profile.repeatInterval, repeatDaysFromString(profile.repeatDays));
};
@@ -144,7 +116,7 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
<View style={styles.profileRow}>
<Text style={[styles.profileLabel, { color: theme.textFaint }]}>Profiles</Text>
<View style={styles.profileChips}>
{profiles.map(profile => (
{profiles.map((profile) => (
<View
key={profile.id}
style={[
@@ -159,15 +131,8 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
},
]}
>
<TouchableOpacity
onPress={() => applyProfile(profile)}
activeOpacity={0.8}
accessibilityRole="button"
accessibilityLabel={`Apply repeat profile ${profile.name}`}
>
<Text style={[styles.profileChipText, { color: theme.textSecondary }]}>
{profile.name}
</Text>
<TouchableOpacity onPress={() => applyProfile(profile)} activeOpacity={0.8} accessibilityRole="button" accessibilityLabel={`Apply repeat profile ${profile.name}`}>
<Text style={[styles.profileChipText, { color: theme.textSecondary }]}>{profile.name}</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleDeleteProfile(profile.id, profile.name)}
@@ -184,17 +149,13 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
)}
<View style={styles.chipRow} accessibilityRole="radiogroup" accessibilityLabel="Repeat">
{REPEAT_OPTIONS.map(option => (
{REPEAT_OPTIONS.map((option) => (
<TouchableOpacity
key={option.value}
style={[
styles.chip,
{ backgroundColor: theme.card, borderColor: theme.borderStrong },
value === option.value && {
borderColor: theme.accent,
backgroundColor: theme.accentSoft,
borderWidth: 2,
},
value === option.value && { borderColor: theme.accent, backgroundColor: theme.accentSoft, borderWidth: 2 },
]}
onPress={() => selectRepeat(option.value)}
activeOpacity={0.8}
@@ -202,10 +163,7 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
accessibilityLabel={`Repeat ${option.label.replace('No Repeat', 'none')}`}
accessibilityState={{ selected: value === option.value }}
>
<RepeatIcon
repeat={option.value}
color={value === option.value ? theme.accent : theme.textFaint}
/>
<RepeatIcon repeat={option.value} color={value === option.value ? theme.accent : theme.textFaint} />
<Text
style={[
styles.chipText,
@@ -221,12 +179,7 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
{value !== 'none' && (
<View style={styles.settings}>
<View
style={[
styles.intervalRow,
{ backgroundColor: theme.card, borderColor: theme.borderStrong },
]}
>
<View style={[styles.intervalRow, { backgroundColor: theme.card, borderColor: theme.borderStrong }]}>
<Text style={[styles.intervalLabel, { color: theme.textSecondary }]}>Every</Text>
<TouchableOpacity
style={[styles.stepButton, { borderColor: theme.borderStrong }]}
@@ -237,14 +190,7 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
accessibilityLabel="Decrease repeat interval"
accessibilityState={{ disabled: interval <= 1 }}
>
<Text
style={[
styles.stepButtonText,
{ color: interval <= 1 ? theme.textMuted : theme.text },
]}
>
−
</Text>
<Text style={[styles.stepButtonText, { color: interval <= 1 ? theme.textMuted : theme.text }]}>−</Text>
</TouchableOpacity>
<Text style={[styles.intervalValue, { color: theme.text }]}>{interval}</Text>
<TouchableOpacity
@@ -256,14 +202,7 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
accessibilityLabel="Increase repeat interval"
accessibilityState={{ disabled: interval >= 30 }}
>
<Text
style={[
styles.stepButtonText,
{ color: interval >= 30 ? theme.textMuted : theme.text },
]}
>
+
</Text>
<Text style={[styles.stepButtonText, { color: interval >= 30 ? theme.textMuted : theme.text }]}>+</Text>
</TouchableOpacity>
<Text style={[styles.intervalLabel, { color: theme.textSecondary }]}>
{unitLabel(value)}
@@ -273,20 +212,14 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
{isDaysBased(value) && (
<View style={styles.dayRow}>
{WEEKDAY_ORDER.map(day => (
{WEEKDAY_ORDER.map((day) => (
<TouchableOpacity
key={`${WEEKDAY_LABELS[day]}-${day}`}
style={[
styles.dayChip,
{ backgroundColor: theme.card, borderColor: theme.borderStrong },
days.includes(day) && {
backgroundColor: theme.accent,
borderColor: theme.accent,
},
value === 'custom' &&
days.length === 1 &&
days.includes(day) &&
styles.dayChipLast,
days.includes(day) && { backgroundColor: theme.accent, borderColor: theme.accent },
value === 'custom' && days.length === 1 && days.includes(day) && styles.dayChipLast,
]}
onPress={() => toggleDay(day)}
activeOpacity={0.8}
@@ -317,16 +250,9 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
activeOpacity={0.8}
>
<Svg width={13} height={13} viewBox="0 0 24 24">
<Path
d="M12 5v14M5 12h14"
stroke={theme.accent}
strokeWidth={2.5}
strokeLinecap="round"
/>
<Path d="M12 5v14M5 12h14" stroke={theme.accent} strokeWidth={2.5} strokeLinecap="round" />
</Svg>
<Text style={[styles.saveProfileText, { color: theme.accentStrong }]}>
Save as profile
</Text>
<Text style={[styles.saveProfileText, { color: theme.accentStrong }]}>Save as profile</Text>
</TouchableOpacity>
)}
@@ -336,29 +262,19 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
animationType="fade"
onRequestClose={() => setSaveModalVisible(false)}
>
<KeyboardAvoidingView style={styles.modalBackdrop} behavior="padding">
<Pressable style={styles.modalBackdrop} onPress={() => setSaveModalVisible(false)}>
<Pressable
style={[styles.modalCard, { backgroundColor: theme.card, borderColor: theme.border }]}
<KeyboardAvoidingView
style={styles.modalBackdrop}
behavior="padding"
>
<Pressable style={styles.modalBackdrop} onPress={() => setSaveModalVisible(false)}>
<Pressable style={[styles.modalCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
<Text style={[styles.modalTitle, { color: theme.text }]}>Save repeat profile</Text>
<Text style={[styles.modalHint, { color: theme.textFaint }]}>
{`${REPEAT_OPTIONS.find(o => o.value === value)?.label.replace('No Repeat', 'None')}, every ${interval} ${unitLabel(value)}${interval > 1 ? 's' : ''}`}
{isDaysBased(value) && days.length > 0
? ` · ${weekdaysInDisplayOrder(days)
.map(d => WEEKDAY_LABELS[d])
.join(' ')}`
: ''}
{`${REPEAT_OPTIONS.find((o) => o.value === value)?.label.replace('No Repeat', 'None')}, every ${interval} ${unitLabel(value)}${interval > 1 ? 's' : ''}`}
{isDaysBased(value) && days.length > 0 ? ` · ${weekdaysInDisplayOrder(days).map((d) => WEEKDAY_LABELS[d]).join(' ')}` : ''}
</Text>
<TextInput
style={[
styles.modalInput,
{
backgroundColor: theme.cardAlt,
borderColor: theme.borderStrong,
color: theme.text,
},
]}
style={[styles.modalInput, { backgroundColor: theme.cardAlt, borderColor: theme.borderStrong, color: theme.text }]}
value={profileName}
onChangeText={setProfileName}
placeholder="Profile name (e.g. Every weekday)"
@@ -374,25 +290,15 @@ export function RepeatSelector({ value, interval, days, onChange }: RepeatSelect
onPress={() => setSaveModalVisible(false)}
activeOpacity={0.8}
>
<Text style={[styles.modalButtonText, { color: theme.textSecondary }]}>
Cancel
</Text>
<Text style={[styles.modalButtonText, { color: theme.textSecondary }]}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.modalButton,
styles.modalButtonPrimary,
{ backgroundColor: theme.accent },
]}
style={[styles.modalButton, styles.modalButtonPrimary, { backgroundColor: theme.accent }]}
onPress={handleSaveProfile}
disabled={!profileName.trim()}
activeOpacity={0.8}
>
<Text
style={[styles.modalButtonText, { color: theme.accentText, fontWeight: '600' }]}
>
Save
</Text>
<Text style={[styles.modalButtonText, { color: theme.accentText, fontWeight: '600' }]}>Save</Text>
</TouchableOpacity>
</View>
</Pressable>
@@ -1,13 +1,5 @@
import React, { useState } from 'react';
import {
Modal,
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
KeyboardAvoidingView,
} from 'react-native';
import { Modal, View, Text, StyleSheet, TextInput, TouchableOpacity, KeyboardAvoidingView } from 'react-native';
import { useSettings } from '@/theme';
import { DEFAULT_API_BASE_URL } from '@/services/auth';
import Svg, { Path } from 'react-native-svg';
@@ -41,22 +33,16 @@ export function ServerUrlModal({ visible, onClose }: ServerUrlModalProps) {
return (
<Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
<KeyboardAvoidingView style={styles.overlay} behavior="padding">
<KeyboardAvoidingView
style={styles.overlay}
behavior="padding"
>
<View style={[styles.sheet, { backgroundColor: theme.sheetBg }]}>
<View style={styles.header}>
<Text style={[styles.title, { color: theme.text }]}>Backend URL</Text>
<TouchableOpacity
onPress={onClose}
style={styles.closeButton}
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
>
<TouchableOpacity onPress={onClose} style={styles.closeButton} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
<Svg width={18} height={18} viewBox="0 0 24 24">
<Path
d="M18 6L6 18M6 6l12 12"
stroke={theme.textSecondary}
strokeWidth={2.2}
strokeLinecap="round"
/>
<Path d="M18 6L6 18M6 6l12 12" stroke={theme.textSecondary} strokeWidth={2.2} strokeLinecap="round" />
</Svg>
</TouchableOpacity>
</View>
@@ -65,11 +51,7 @@ export function ServerUrlModal({ visible, onClose }: ServerUrlModalProps) {
<TextInput
style={[
styles.input,
{
backgroundColor: theme.inputBg,
borderColor: theme.borderStrong,
color: theme.text,
},
{ backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text },
]}
placeholder={DEFAULT_API_BASE_URL}
placeholderTextColor={theme.textMuted}
@@ -93,11 +75,7 @@ export function ServerUrlModal({ visible, onClose }: ServerUrlModalProps) {
<Text style={[styles.cancelButtonText, { color: theme.textSecondary }]}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.saveButton,
{ backgroundColor: theme.accent },
!isValid && styles.saveButtonDisabled,
]}
style={[styles.saveButton, { backgroundColor: theme.accent }, !isValid && styles.saveButtonDisabled]}
onPress={handleSave}
disabled={!isValid}
activeOpacity={0.8}
@@ -46,7 +46,7 @@ export const SubtaskItem = React.memo(function SubtaskItem({
const hasChildren = subtask.subtasks && subtask.subtasks.length > 0;
const hovered = hoveredId === subtask.id;
const effectiveColor = subtask.categoryId
? (categoryColorResolver?.(subtask.categoryId) ?? categoryColor)
? categoryColorResolver?.(subtask.categoryId) ?? categoryColor
: categoryColor;
const handleExpand = () => setExpanded(!expanded);
@@ -59,7 +59,7 @@ export const SubtaskItem = React.memo(function SubtaskItem({
return (
<View>
<View ref={ref => registerRef?.(subtask.id, subtask.taskId, ref)}>
<View ref={(ref) => registerRef?.(subtask.id, subtask.taskId, ref)}>
<TaskItem
task={subtask}
indented
@@ -86,7 +86,7 @@ export const SubtaskItem = React.memo(function SubtaskItem({
{subtask.subtasks
.slice()
.sort((a, b) => a.order - b.order)
.map(child => (
.map((child) => (
<SubtaskItem
key={child.id}
subtask={child}
@@ -48,9 +48,7 @@ export function SubtasksSection({ control }: SubtasksSectionProps) {
<Text style={[styles.label, { color: theme.text }]}>Subtasks</Text>
{items.length > 0 && (
<View style={[styles.badge, { backgroundColor: theme.accentSoft }]}>
<Text style={[styles.badgeText, { color: theme.accentStrong }]}>
{items.length}
</Text>
<Text style={[styles.badgeText, { color: theme.accentStrong }]}>{items.length}</Text>
</View>
)}
</View>
@@ -94,30 +92,20 @@ export function SubtasksSection({ control }: SubtasksSectionProps) {
key={item._key ?? `subtask-${index}`}
index={index}
value={item.title}
onChange={value => updateSubtask(index, value)}
onChange={(value) => updateSubtask(index, value)}
onRemove={() => removeSubtask(index)}
/>
))}
</View>
<TouchableOpacity
style={[
styles.addButton,
{ backgroundColor: theme.accentSoft, borderColor: theme.accentBorder },
]}
style={[styles.addButton, { backgroundColor: theme.accentSoft, borderColor: theme.accentBorder }]}
onPress={addSubtask}
activeOpacity={0.8}
>
<Svg width={16} height={16} viewBox="0 0 24 24">
<Path
d="M12 5v14M5 12h14"
stroke={theme.accent}
strokeWidth={2}
strokeLinecap="round"
/>
<Path d="M12 5v14M5 12h14" stroke={theme.accent} strokeWidth={2} strokeLinecap="round" />
</Svg>
<Text style={[styles.addButtonText, { color: theme.accentStrong }]}>
Add Subtask
</Text>
<Text style={[styles.addButtonText, { color: theme.accentStrong }]}>Add Subtask</Text>
</TouchableOpacity>
</Animated.View>
</View>
@@ -162,12 +150,7 @@ function SubtaskItem({ index, value, onChange, onRemove }: SubtaskItemProps) {
/>
<TouchableOpacity style={styles.removeButton} onPress={onRemove} activeOpacity={0.7}>
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path
d="M18 6L6 18M6 6l12 12"
stroke={theme.textSecondary}
strokeWidth={2.2}
strokeLinecap="round"
/>
<Path d="M18 6L6 18M6 6l12 12" stroke={theme.textSecondary} strokeWidth={2.2} strokeLinecap="round" />
</Svg>
</TouchableOpacity>
</View>
+19 -48
View File
@@ -11,18 +11,9 @@ import {
} from 'react-native';
import { useSettings } from '@/theme';
import { AuthUser, getAuthToken, getAuthUser, login, register, signOutAuth } from '@/services/auth';
import {
runSyncGuarded,
startAutoSync,
stopAutoSync,
getLastSyncTime,
SyncResult,
} from '@/database/sync';
import { runSyncGuarded, startAutoSync, stopAutoSync, getLastSyncTime, SyncResult } from '@/database/sync';
import { ForgotPasswordModal } from './ForgotPasswordModal';
import {
registerForPushNotificationsAsync,
unregisterForPushNotificationsAsync,
} from '@/services/pushNotifications';
import { registerForPushNotificationsAsync, unregisterForPushNotificationsAsync } from '@/services/pushNotifications';
interface SyncModalProps {
visible: boolean;
@@ -90,8 +81,7 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
}
setBusy(true);
try {
const authedUser =
mode === 'register'
const authedUser = mode === 'register'
? await register(username.trim(), password)
: await login(username.trim(), password);
setUser(authedUser);
@@ -138,7 +128,10 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
return (
<Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
<KeyboardAvoidingView style={styles.overlay} behavior="padding">
<KeyboardAvoidingView
style={styles.overlay}
behavior="padding"
>
<TouchableOpacity style={styles.backdrop} activeOpacity={1} onPress={onClose} />
<View style={[styles.sheet, { backgroundColor: theme.sheetBg }]}>
<View style={[styles.handle, { backgroundColor: theme.borderStrong }]} />
@@ -166,9 +159,7 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
{status === 'syncing' ? (
<ActivityIndicator color={theme.accentText} />
) : (
<Text style={[styles.primaryButtonText, { color: theme.accentText }]}>
Sync Now
</Text>
<Text style={[styles.primaryButtonText, { color: theme.accentText }]}>Sync Now</Text>
)}
</TouchableOpacity>
@@ -190,9 +181,7 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
onPress={handleSignOut}
activeOpacity={0.7}
>
<Text style={[styles.secondaryButtonText, { color: theme.dangerStrong }]}>
Sign Out
</Text>
<Text style={[styles.secondaryButtonText, { color: theme.dangerStrong }]}>Sign Out</Text>
</TouchableOpacity>
</View>
) : (
@@ -202,10 +191,13 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
</Text>
<View style={[styles.segmentRow, { backgroundColor: theme.inputBg }]}>
{(['login', 'register'] as const).map(m => (
{(['login', 'register'] as const).map((m) => (
<TouchableOpacity
key={m}
style={[styles.segment, mode === m && { backgroundColor: theme.accent }]}
style={[
styles.segment,
mode === m && { backgroundColor: theme.accent },
]}
onPress={() => {
setMode(m);
setError(null);
@@ -230,14 +222,7 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
</Text>
)}
<TextInput
style={[
styles.input,
{
backgroundColor: theme.inputBg,
borderColor: theme.borderStrong,
color: theme.text,
},
]}
style={[styles.input, { backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text }]}
placeholder="Username"
placeholderTextColor={theme.textMuted}
value={username}
@@ -246,14 +231,7 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
autoCorrect={false}
/>
<TextInput
style={[
styles.input,
{
backgroundColor: theme.inputBg,
borderColor: theme.borderStrong,
color: theme.text,
},
]}
style={[styles.input, { backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text }]}
placeholder="Password (min 8 chars)"
placeholderTextColor={theme.textMuted}
value={password}
@@ -267,15 +245,11 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
onPress={() => setShowForgotPassword(true)}
activeOpacity={0.7}
>
<Text style={[styles.forgotPasswordText, { color: theme.accent }]}>
Forgot Password?
</Text>
<Text style={[styles.forgotPasswordText, { color: theme.accent }]}>Forgot Password?</Text>
</TouchableOpacity>
)}
{error && (
<Text style={[styles.errorText, { color: theme.dangerStrong }]}>{error}</Text>
)}
{error && <Text style={[styles.errorText, { color: theme.dangerStrong }]}>{error}</Text>}
<TouchableOpacity
style={[styles.primaryButton, { backgroundColor: theme.accent }]}
@@ -294,10 +268,7 @@ export function SyncModal({ visible, onClose }: SyncModalProps) {
</View>
)}
<ForgotPasswordModal
visible={showForgotPassword}
onClose={() => setShowForgotPassword(false)}
/>
<ForgotPasswordModal visible={showForgotPassword} onClose={() => setShowForgotPassword(false)} />
<TouchableOpacity
style={[styles.secondaryButton, { borderColor: theme.borderStrong }]}
+10 -44
View File
@@ -66,37 +66,20 @@ export default function SyncStatus({ compact = false }: SyncStatusProps) {
case 'success':
return (
<Svg width={16} height={16} viewBox="0 0 24 24">
<Path
d="M5 12l5 5 9-10"
stroke={theme.success}
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
<Path d="M5 12l5 5 9-10" stroke={theme.success} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
</Svg>
);
case 'error':
return (
<Svg width={16} height={16} viewBox="0 0 24 24">
<Circle cx={12} cy={12} r={10} stroke={theme.danger} strokeWidth={2} fill="none" />
<Path
d="M12 8v4M12 16h.01"
stroke={theme.danger}
strokeWidth={2}
strokeLinecap="round"
/>
<Path d="M12 8v4M12 16h.01" stroke={theme.danger} strokeWidth={2} strokeLinecap="round" />
</Svg>
);
default:
return (
<Svg width={16} height={16} viewBox="0 0 24 24">
<Path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
stroke={theme.textFaint}
strokeWidth={1.8}
fill="none"
/>
<Path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" stroke={theme.textFaint} strokeWidth={1.8} fill="none" />
<Path d="M12 22V12" stroke={theme.textFaint} strokeWidth={1.8} strokeLinecap="round" />
</Svg>
);
@@ -105,25 +88,16 @@ export default function SyncStatus({ compact = false }: SyncStatusProps) {
const getStatusText = () => {
switch (status) {
case 'syncing':
return 'Syncing...';
case 'success':
return 'Synced';
case 'error':
return 'Sync failed';
default:
return lastSync ? `Last sync: ${formatTime(lastSync)}` : 'Not synced';
case 'syncing': return 'Syncing...';
case 'success': return 'Synced';
case 'error': return 'Sync failed';
default: return lastSync ? `Last sync: ${formatTime(lastSync)}` : 'Not synced';
}
};
if (compact) {
return (
<TouchableOpacity
style={[styles.compact, { backgroundColor: theme.sheetBg }]}
onPress={handleSync}
disabled={status === 'syncing'}
activeOpacity={0.7}
>
<TouchableOpacity style={[styles.compact, { backgroundColor: theme.sheetBg }]} onPress={handleSync} disabled={status === 'syncing'} activeOpacity={0.7}>
<View style={styles.compactRow}>
{getStatusIcon()}
<Text style={[styles.compactText, { color: theme.textMuted }]}>
@@ -142,20 +116,12 @@ export default function SyncStatus({ compact = false }: SyncStatusProps) {
<Text style={[styles.statusText, { color: theme.text }]}>{getStatusText()}</Text>
</View>
<TouchableOpacity
style={[
styles.syncButton,
{ backgroundColor: status === 'syncing' ? theme.accentSoft : theme.accent },
]}
style={[styles.syncButton, { backgroundColor: status === 'syncing' ? theme.accentSoft : theme.accent }]}
onPress={handleSync}
disabled={status === 'syncing'}
activeOpacity={0.8}
>
<Text
style={[
styles.syncButtonText,
{ color: status === 'syncing' ? theme.accent : theme.accentText },
]}
>
<Text style={[styles.syncButtonText, { color: status === 'syncing' ? theme.accent : theme.accentText }]}>
{status === 'syncing' ? 'Syncing...' : 'Sync Now'}
</Text>
</TouchableOpacity>
@@ -56,14 +56,7 @@ export function TabBarIcon({ name, focused, color, size = 24 }: TabBarIconProps)
)}
{name === 'gear' && (
<>
<Circle
cx={12}
cy={12}
r={3.5}
stroke={color}
strokeWidth={focused ? 3.5 : 3}
fill="none"
/>
<Circle cx={12} cy={12} r={3.5} stroke={color} strokeWidth={focused ? 3.5 : 3} fill="none" />
<Path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
stroke={color}
@@ -83,7 +76,9 @@ export function TabBarIcon({ name, focused, color, size = 24 }: TabBarIconProps)
strokeLinecap="round"
strokeLinejoin="round"
/>
{focused && <Circle cx={4} cy={10} r={2} fill={color} />}
{focused && (
<Circle cx={4} cy={10} r={2} fill={color} />
)}
</>
)}
</Svg>
@@ -14,15 +14,7 @@ interface TaskDeleteModalProps {
onDelete: (scope: TaskDeleteScope) => void;
}
export function TaskDeleteModal({
visible,
taskId,
taskTitle,
isRepeating,
subtask,
onClose,
onDelete,
}: TaskDeleteModalProps) {
export function TaskDeleteModal({ visible, taskId, taskTitle, isRepeating, subtask, onClose, onDelete }: TaskDeleteModalProps) {
const { theme } = useSettings();
const [counts, setCounts] = useState({ future: 1, all: 1 });
@@ -30,13 +22,11 @@ export function TaskDeleteModal({
if (!visible || !taskId || subtask) return;
let mounted = true;
getSeriesOccurrenceCounts(taskId)
.then(c => {
.then((c) => {
if (mounted) setCounts(c);
})
.catch(() => {});
return () => {
mounted = false;
};
return () => { mounted = false; };
}, [visible, taskId, subtask]);
const options: { scope: TaskDeleteScope; label: string; hint?: string }[] = subtask
@@ -44,11 +34,7 @@ export function TaskDeleteModal({
: [{ scope: 'this', label: 'This task only' }];
if (isRepeating) {
options.push({
scope: 'future',
label: 'This and future tasks',
hint: counts.future > 1 ? `${counts.future} occurrences` : undefined,
});
options.push({ scope: 'future', label: 'This and future tasks', hint: counts.future > 1 ? `${counts.future} occurrences` : undefined });
options.push({ scope: 'all', label: 'All tasks in series', hint: `${counts.all} occurrences` });
}
@@ -57,21 +43,10 @@ export function TaskDeleteModal({
<View style={styles.overlay}>
<View style={[styles.sheet, { backgroundColor: theme.sheetBg }]}>
<View style={styles.header}>
<Text style={[styles.title, { color: theme.text }]}>
{subtask ? 'Delete Subtask' : 'Delete Task'}
</Text>
<TouchableOpacity
onPress={onClose}
style={styles.closeButton}
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
>
<Text style={[styles.title, { color: theme.text }]}>{subtask ? 'Delete Subtask' : 'Delete Task'}</Text>
<TouchableOpacity onPress={onClose} style={styles.closeButton} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
<Svg width={18} height={18} viewBox="0 0 24 24">
<Path
d="M18 6L6 18M6 6l12 12"
stroke={theme.textSecondary}
strokeWidth={2.2}
strokeLinecap="round"
/>
<Path d="M18 6L6 18M6 6l12 12" stroke={theme.textSecondary} strokeWidth={2.2} strokeLinecap="round" />
</Svg>
</TouchableOpacity>
</View>
@@ -89,26 +64,19 @@ export function TaskDeleteModal({
)}
<View style={styles.actions}>
{options.map(option => (
{options.map((option) => (
<TouchableOpacity
key={option.scope}
style={[styles.actionButton, { borderColor: theme.accentBorder }]}
onPress={() => onDelete(option.scope)}
activeOpacity={0.7}
>
<Text style={[styles.actionLabel, { color: theme.accentStrong }]}>
{option.label}
</Text>
{option.hint && (
<Text style={[styles.actionHint, { color: theme.textMuted }]}>{option.hint}</Text>
)}
<Text style={[styles.actionLabel, { color: theme.accentStrong }]}>{option.label}</Text>
{option.hint && <Text style={[styles.actionHint, { color: theme.textMuted }]}>{option.hint}</Text>}
</TouchableOpacity>
))}
<TouchableOpacity
style={[
styles.cancelButton,
{ borderColor: theme.borderStrong, backgroundColor: theme.card },
]}
style={[styles.cancelButton, { borderColor: theme.borderStrong, backgroundColor: theme.card }]}
onPress={onClose}
activeOpacity={0.7}
>
+26 -118
View File
@@ -1,19 +1,6 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Animated,
Platform,
Dimensions,
} from 'react-native';
import {
Swipeable,
Gesture,
GestureDetector,
PanGestureHandler,
} from 'react-native-gesture-handler';
import { View, Text, StyleSheet, TouchableOpacity, Animated, Platform, Dimensions } from 'react-native';
import { Swipeable, Gesture, GestureDetector, PanGestureHandler } from 'react-native-gesture-handler';
import { TaskData, SubtaskData, Priority, Repeat, Reminder } from '@/types';
import { PRIORITY_COLORS } from '@/constants';
import { useSettings, mixHex } from '@/theme';
@@ -59,30 +46,7 @@ interface TaskItemProps {
categoryColors?: (string | undefined)[];
}
export const TaskItem = React.memo(function TaskItem({
task,
onToggle,
onDelete,
onPress,
onLongPress,
onMenuOpen,
selected,
selectionMode,
completedSection,
draggable,
hovered,
onDragStart,
onDragUpdate,
onDragEnd,
onReorderStart,
onReorderUpdate,
onReorderEnd,
expanded,
indented,
depth = 0,
categoryColor,
categoryColors,
}: TaskItemProps) {
export const TaskItem = React.memo(function TaskItem({ task, onToggle, onDelete, onPress, onLongPress, onMenuOpen, selected, selectionMode, completedSection, draggable, hovered, onDragStart, onDragUpdate, onDragEnd, onReorderStart, onReorderUpdate, onReorderEnd, expanded, indented, depth = 0, categoryColor, categoryColors }: TaskItemProps) {
const { theme, deleteBySwipe } = useSettings();
const styles = React.useMemo(() => createStyles(theme), [theme]);
const [opacityAnim] = React.useState(new Animated.Value(task.completed ? 0.5 : 1));
@@ -109,17 +73,17 @@ export const TaskItem = React.memo(function TaskItem({
.activateAfterLongPress(400)
.minDistance(5)
.runOnJS(true)
.onStart(e => {
.onStart((e) => {
setDragging(true);
setDragStartY(e.absoluteY);
onReorderStart?.();
})
.onUpdate(e => {
.onUpdate((e) => {
dragTranslateX.setValue(e.translationX);
dragTranslateY.setValue(e.translationY);
onReorderUpdate?.(e.absoluteY);
})
.onEnd(e => {
.onEnd((e) => {
onReorderEnd?.(e.absoluteY, e.translationY);
})
.onFinalize(() => {
@@ -140,12 +104,12 @@ export const TaskItem = React.memo(function TaskItem({
setDragging(true);
onDragStart?.();
})
.onUpdate(e => {
.onUpdate((e) => {
dragTranslateX.setValue(e.translationX);
dragTranslateY.setValue(e.translationY);
onDragUpdate?.(e.absoluteY);
})
.onEnd(e => {
.onEnd((e) => {
onDragEnd?.(e.absoluteY);
})
.onFinalize(() => {
@@ -171,11 +135,7 @@ export const TaskItem = React.memo(function TaskItem({
endOfToday.setHours(23, 59, 59, 999);
const hasDueDate = task.dueDate > 0;
const isOverdue = hasDueDate && !task.completed && task.dueDate < startOfToday.getTime();
const isDueToday =
hasDueDate &&
!task.completed &&
task.dueDate >= startOfToday.getTime() &&
task.dueDate <= endOfToday.getTime();
const isDueToday = hasDueDate && !task.completed && task.dueDate >= startOfToday.getTime() && task.dueDate <= endOfToday.getTime();
return { hasDueDate, isOverdue, isDueToday };
}, [task.dueDate, task.completed]);
@@ -189,39 +149,21 @@ export const TaskItem = React.memo(function TaskItem({
const renderRightActions = (progress: Animated.AnimatedInterpolation<number>) => {
const translateX = progress.interpolate({ inputRange: [0, 1], outputRange: [80, 0] });
return (
<Animated.View
style={[styles.swipeAction, styles.swipeDelete, { transform: [{ translateX }] }]}
>
<Animated.View style={[styles.swipeAction, styles.swipeDelete, { transform: [{ translateX }] }]}>
<Svg width={24} height={24} viewBox="0 0 24 24">
<Path
d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"
stroke="#FFFFFF"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
<Path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" stroke="#FFFFFF" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" fill="none" />
</Svg>
<Text style={styles.swipeActionText}>Delete</Text>
</Animated.View>
);
};
const renderLeftActions = (progress: Animated.AnimatedInterpolation<number>) => {
const renderLeftActions = (progress: Animated.AnimatedInterpolation<number>) => {
const translateX = progress.interpolate({ inputRange: [0, 1], outputRange: [-80, 0] });
return (
<Animated.View
style={[styles.swipeAction, styles.swipeComplete, { transform: [{ translateX }] }]}
>
<Animated.View style={[styles.swipeAction, styles.swipeComplete, { transform: [{ translateX }] }]}>
<Svg width={24} height={24} viewBox="0 0 24 24">
<Path
d="M5 12l5 5 9-10"
stroke="#FFFFFF"
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
<Path d="M5 12l5 5 9-10" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
</Svg>
<Text style={styles.swipeActionText}>{task.completed ? 'Undo' : 'Done'}</Text>
</Animated.View>
@@ -246,9 +188,7 @@ export const TaskItem = React.memo(function TaskItem({
overshootRight={false}
overshootLeft={false}
>
<GestureDetector
gesture={draggable ? (onReorderStart ? reorderGesture : dragGesture) : Gesture.Native()}
>
<GestureDetector gesture={draggable ? (onReorderStart ? reorderGesture : dragGesture) : Gesture.Native()}>
<Animated.View
style={[
styles.container,
@@ -277,7 +217,7 @@ export const TaskItem = React.memo(function TaskItem({
accessibilityState={selectionMode ? { checked: selected } : { expanded }}
accessibilityHint={selectionMode ? undefined : 'Expands the task to show subtasks'}
>
<View style={styles.content}>
<View style={styles.content}>
<View style={styles.titleRow}>
<View style={styles.categoryDotSlot}>
{categoryColor && (
@@ -296,24 +236,10 @@ export const TaskItem = React.memo(function TaskItem({
{task.completed ? (
<>
<Circle cx={12} cy={12} r={10} fill={theme.accent} />
<Path
d="M7 12l3 3 7-7"
stroke="#FFFFFF"
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
<Path d="M7 12l3 3 7-7" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
</>
) : (
<Circle
cx={12}
cy={12}
r={10}
stroke={isOverdue ? theme.danger : theme.textSecondary}
strokeWidth={2.5}
fill="none"
/>
<Circle cx={12} cy={12} r={10} stroke={isOverdue ? theme.danger : theme.textSecondary} strokeWidth={2.5} fill="none" />
)}
</Svg>
</TouchableOpacity>
@@ -334,7 +260,9 @@ export const TaskItem = React.memo(function TaskItem({
{ backgroundColor: PRIORITY_COLORS[task.priority] },
]}
>
<Text style={styles.priorityText}>{task.priority.charAt(0).toUpperCase()}</Text>
<Text style={styles.priorityText}>
{task.priority.charAt(0).toUpperCase()}
</Text>
</View>
)}
{task.assigneeId && (
@@ -368,14 +296,7 @@ export const TaskItem = React.memo(function TaskItem({
strokeLinecap="round"
fill="none"
/>
<Circle
cx={12}
cy={12}
r={4}
stroke={theme.accent}
strokeWidth={1.5}
fill="none"
/>
<Circle cx={12} cy={12} r={4} stroke={theme.accent} strokeWidth={1.5} fill="none" />
</Svg>
<Text style={styles.allDayText}>All Day</Text>
</View>
@@ -396,20 +317,8 @@ export const TaskItem = React.memo(function TaskItem({
{hasDueDate && (
<View style={styles.dueRow}>
<Svg width={14} height={14} viewBox="0 0 24 24">
<Circle
cx={12}
cy={12}
r={10}
stroke={theme.textSecondary}
strokeWidth={2}
fill="none"
/>
<Path
d="M12 6v6l4 2"
stroke={theme.textSecondary}
strokeWidth={2}
strokeLinecap="round"
/>
<Circle cx={12} cy={12} r={10} stroke={theme.textSecondary} strokeWidth={2} fill="none" />
<Path d="M12 6v6l4 2" stroke={theme.textSecondary} strokeWidth={2} strokeLinecap="round" />
</Svg>
<Animated.Text
style={[
@@ -491,8 +400,7 @@ function formatTime12(time: string): string {
return `${h}:${String(minutes).padStart(2, '0')} ${period}`;
}
const createStyles = (theme: ThemeColors) =>
StyleSheet.create({
const createStyles = (theme: ThemeColors) => StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
@@ -692,4 +600,4 @@ const createStyles = (theme: ThemeColors) =>
fontSize: 12,
fontWeight: '600',
},
});
});
+83 -309
View File
@@ -1,13 +1,5 @@
import React, { useState, useCallback, useMemo, useRef } from 'react';
import {
View,
Text,
StyleSheet,
Animated,
RefreshControl,
Alert,
TouchableOpacity,
} from 'react-native';
import { View, Text, StyleSheet, Animated, RefreshControl, Alert, TouchableOpacity } from 'react-native';
import { useTasks } from '@/hooks/useTasks';
import { useSubtasks } from '@/hooks/useSubtasks';
import { useCategories } from '@/hooks/useDatabase';
@@ -50,18 +42,10 @@ const DropIndicator = ({ theme }: { theme: any }) => (
</View>
);
export function TaskList({
categoryIds = [],
showCompleted = false,
onSelectionChange,
}: TaskListProps) {
export function TaskList({ categoryIds = [], showCompleted = false, onSelectionChange }: TaskListProps) {
const { theme, sortBy, todoAheadDays } = useSettings();
const {
tasks,
loading,
refresh: refreshTasks,
} = useTasks(categoryIds, showCompleted ? 'all' : false, todoAheadDays);
const { tasks, loading, refresh: refreshTasks } = useTasks(categoryIds, showCompleted ? 'all' : false, todoAheadDays);
const categories = useCategories();
const categoryColors = useMemo(() => {
@@ -78,30 +62,18 @@ export function TaskList({
const [hoverTaskId, setHoverTaskId] = useState<string | null>(null);
const [expandedTasks, setExpandedTasks] = useState<Set<string>>(new Set());
const { map: subtasksMap, refresh: refreshSubtasks } = useSubtasks();
const [dropIndicator, setDropIndicator] = useState<{
targetId: string | null;
position: 'above' | 'below';
} | null>(null);
const [dropIndicator, setDropIndicator] = useState<{ targetId: string | null; position: 'above' | 'below' } | null>(null);
const itemRefs = useRef<Map<string, View>>(new Map());
const subtaskRefs = useRef<Map<string, { ref: View; parentTaskId: string }>>(new Map());
const dragStateRef = useRef<{
taskId: string;
positions: Record<string, { top: number; bottom: number }>;
subPositions: Record<string, { top: number; bottom: number }>;
} | null>(null);
const subtaskDragRef = useRef<{
subtaskId: string;
parentTaskId: string;
parentSubtaskId: string | null;
positions: Record<string, { top: number; bottom: number }>;
subPositions: Record<string, { top: number; bottom: number }>;
} | null>(null);
const taskDragRef = useRef<{
taskId: string;
positions: Record<string, { top: number; bottom: number }>;
} | null>(null);
const { modals, openTaskDelete, openSubtaskDelete, openSubtaskEdit, openTaskEdit } =
useTaskModals();
const dragStateRef = useRef<{ taskId: string; positions: Record<string, { top: number; bottom: number }>; subPositions: Record<string, { top: number; bottom: number }> } | null>(null);
const subtaskDragRef = useRef<{ subtaskId: string; parentTaskId: string; parentSubtaskId: string | null; positions: Record<string, { top: number; bottom: number }>; subPositions: Record<string, { top: number; bottom: number }> } | null>(null);
const {
modals,
openTaskDelete,
openSubtaskDelete,
openSubtaskEdit,
openTaskEdit,
} = useTaskModals();
const registerRef = useCallback((taskId: string, ref: View | null) => {
if (ref) {
@@ -111,16 +83,13 @@ export function TaskList({
}
}, []);
const registerSubtaskRef = useCallback(
(subtaskId: string, parentTaskId: string, ref: View | null) => {
const registerSubtaskRef = useCallback((subtaskId: string, parentTaskId: string, ref: View | null) => {
if (ref) {
subtaskRefs.current.set(subtaskId, { ref, parentTaskId });
} else {
subtaskRefs.current.delete(subtaskId);
}
},
[]
);
}, []);
const categoryColorResolver = useCallback(
(categoryId: string | undefined) => (categoryId ? categoryColors.get(categoryId) : undefined),
@@ -131,9 +100,7 @@ export function TaskList({
const sorted = [...tasks];
switch (sortBy) {
case 'date':
sorted.sort(
(a, b) => (a.dueDate || Number.MAX_SAFE_INTEGER) - (b.dueDate || Number.MAX_SAFE_INTEGER)
);
sorted.sort((a, b) => (a.dueDate || Number.MAX_SAFE_INTEGER) - (b.dueDate || Number.MAX_SAFE_INTEGER));
break;
case 'priority':
sorted.sort((a, b) => PRIORITY_RANK[b.priority] - PRIORITY_RANK[a.priority]);
@@ -178,18 +145,14 @@ export function TaskList({
onSelectionChange?.(false);
}, [onSelectionChange]);
const enterSelection = useCallback(
(taskId: string) => {
const enterSelection = useCallback((taskId: string) => {
setSelectionMode(true);
setSelectedIds(new Set([taskId]));
onSelectionChange?.(true);
},
[onSelectionChange]
);
}, [onSelectionChange]);
const toggleSelect = useCallback(
(taskId: string) => {
setSelectedIds(prev => {
const toggleSelect = useCallback((taskId: string) => {
setSelectedIds((prev) => {
const next = new Set(prev);
if (next.has(taskId)) {
next.delete(taskId);
@@ -202,19 +165,14 @@ export function TaskList({
}
return next;
});
},
[onSelectionChange]
);
}, [onSelectionChange]);
const handleToggle = useCallback(
async (taskId: string) => {
const handleToggle = useCallback(async (taskId: string) => {
await confirmAndToggleTaskComplete(taskId, () => refreshTasks());
},
[refreshTasks]
);
}, [refreshTasks]);
const toggleExpand = useCallback(async (taskId: string) => {
setExpandedTasks(prev => {
setExpandedTasks((prev) => {
const next = new Set(prev);
if (next.has(taskId)) {
next.delete(taskId);
@@ -225,20 +183,14 @@ export function TaskList({
});
}, []);
const handleSubtaskToggle = useCallback(
async (subtaskId: string) => {
const handleSubtaskToggle = useCallback(async (subtaskId: string) => {
await toggleSubtaskComplete(subtaskId);
refreshTasks();
refreshSubtasks();
},
[refreshTasks, refreshSubtasks]
);
}, [refreshTasks, refreshSubtasks]);
const handleBulkDelete = useCallback(() => {
Alert.alert(
`Delete ${selectedIds.size} task${selectedIds.size > 1 ? 's' : ''}?`,
'This cannot be undone.',
[
Alert.alert(`Delete ${selectedIds.size} task${selectedIds.size > 1 ? 's' : ''}?`, 'This cannot be undone.', [
{ text: 'Cancel', style: 'cancel' },
{
text: 'Delete',
@@ -248,8 +200,7 @@ export function TaskList({
exitSelection();
},
},
]
);
]);
}, [selectedIds, exitSelection]);
const handleBulkComplete = useCallback(async () => {
@@ -260,16 +211,14 @@ export function TaskList({
const measureItems = useCallback(async () => {
const positions: Record<string, { top: number; bottom: number }> = {};
const entries = Array.from(itemRefs.current.entries());
await Promise.all(
entries.map(([id, ref]) => {
return new Promise<void>(resolve => {
await Promise.all(entries.map(([id, ref]) => {
return new Promise<void>((resolve) => {
ref?.measureInWindow((_x, y, _w, h) => {
positions[id] = { top: y, bottom: y + h };
resolve();
});
});
})
);
}));
return positions;
}, []);
@@ -277,49 +226,18 @@ export function TaskList({
const positions = await measureItems();
const subPositions: Record<string, { top: number; bottom: number }> = {};
const entries = Array.from(subtaskRefs.current.entries());
await Promise.all(
entries.map(([id, entry]) => {
return new Promise<void>(resolve => {
await Promise.all(entries.map(([id, entry]) => {
return new Promise<void>((resolve) => {
entry.ref?.measureInWindow((_x, y, _w, h) => {
subPositions[id] = { top: y, bottom: y + h };
resolve();
});
});
})
);
}));
return { positions, subPositions };
}, [measureItems]);
const findHoverTask = useCallback(
(
absoluteY: number,
draggedId: string,
positions: Record<string, { top: number; bottom: number }>
) => {
const entries = Object.entries(positions);
for (let i = entries.length - 1; i >= 0; i--) {
const [id, p] = entries[i];
if (id === draggedId) continue;
if (absoluteY >= p.top && absoluteY <= p.bottom) {
return id;
}
}
return null;
},
[]
);
const updateHoverTaskTarget = useCallback((target: string | null) => {
setHoverTaskId(target ?? null);
}, []);
const findHoverTarget = useCallback(
(
absoluteY: number,
draggedId: string,
positions: Record<string, { top: number; bottom: number }>,
subPositions: Record<string, { top: number; bottom: number }>
) => {
const findHoverTarget = useCallback((absoluteY: number, draggedId: string, positions: Record<string, { top: number; bottom: number }>, subPositions: Record<string, { top: number; bottom: number }>) => {
const subEntries = Object.entries(subPositions);
for (let i = subEntries.length - 1; i >= 0; i--) {
const [id, p] = subEntries[i];
@@ -335,33 +253,21 @@ export function TaskList({
}
}
return null;
},
[]
);
}, []);
const calculateDropPosition = useCallback(
(
absoluteY: number,
targetId: string,
positions: Record<string, { top: number; bottom: number }>
) => {
const calculateDropPosition = useCallback((absoluteY: number, targetId: string, positions: Record<string, { top: number; bottom: number }>) => {
const target = positions[targetId];
if (!target) return 'below' as const;
const middle = (target.top + target.bottom) / 2;
return absoluteY < middle ? 'above' : 'below';
},
[]
);
}, []);
const handleDragStart = useCallback(
async (taskId: string) => {
const handleDragStart = useCallback(async (taskId: string) => {
dragStateRef.current = { taskId, ...(await measureAll()) };
},
[measureAll]
);
}, [measureAll]);
const refreshDragPositions = useCallback(() => {
measureAll().then(m => {
measureAll().then((m) => {
if (subtaskDragRef.current) {
subtaskDragRef.current = { ...subtaskDragRef.current, ...m };
} else if (dragStateRef.current) {
@@ -370,10 +276,9 @@ export function TaskList({
});
}, [measureAll]);
const updateHoverTarget = useCallback(
(target: string | null) => {
const updateHoverTarget = useCallback((target: string | null) => {
let changed = false;
setHoverTaskId(prev => {
setHoverTaskId((prev) => {
if (prev === target) return prev;
changed = true;
return target;
@@ -381,12 +286,9 @@ export function TaskList({
if (changed && target) {
setTimeout(refreshDragPositions, 80);
}
},
[refreshDragPositions]
);
}, [refreshDragPositions]);
const handleDragUpdate = useCallback(
(absoluteY: number) => {
const handleDragUpdate = useCallback((absoluteY: number) => {
const state = dragStateRef.current;
if (!state) return;
const target = findHoverTarget(absoluteY, state.taskId, state.positions, state.subPositions);
@@ -401,22 +303,16 @@ export function TaskList({
} else {
// Check if below last item
const positions = state.positions;
const lastItem = Object.values(positions).reduce(
(max, p) => (p.bottom > max.bottom ? p : max),
{ bottom: 0 }
);
const lastItem = Object.values(positions).reduce((max, p) => p.bottom > max.bottom ? p : max, { bottom: 0 });
if (absoluteY > lastItem.bottom) {
setDropIndicator({ targetId: null, position: 'below' });
} else {
setDropIndicator(null);
}
}
},
[findHoverTarget, calculateDropPosition, updateHoverTarget]
);
}, [findHoverTarget, calculateDropPosition, updateHoverTarget]);
const handleDragEnd = useCallback(
(absoluteY: number) => {
const handleDragEnd = useCallback((absoluteY: number) => {
const state = dragStateRef.current;
dragStateRef.current = null;
setHoverTaskId(null);
@@ -436,32 +332,16 @@ export function TaskList({
})();
}
}
},
[findHoverTarget]
);
}, [findHoverTarget]);
const handleSubtaskDragStart = useCallback(
async (subtaskId: string, parentTaskId: string, parentSubtaskId: string | null = null) => {
subtaskDragRef.current = {
subtaskId,
parentTaskId,
parentSubtaskId,
...(await measureAll()),
};
},
[measureAll]
);
const handleSubtaskDragStart = useCallback(async (subtaskId: string, parentTaskId: string, parentSubtaskId: string | null = null) => {
subtaskDragRef.current = { subtaskId, parentTaskId, parentSubtaskId, ...(await measureAll()) };
}, [measureAll]);
const handleSubtaskDragUpdate = useCallback(
(absoluteY: number) => {
const handleSubtaskDragUpdate = useCallback((absoluteY: number) => {
const state = subtaskDragRef.current;
if (!state) return;
const target = findHoverTarget(
absoluteY,
state.subtaskId,
state.positions,
state.subPositions
);
const target = findHoverTarget(absoluteY, state.subtaskId, state.positions, state.subPositions);
updateHoverTarget(target);
if (target) {
if (state.subPositions[target]) {
@@ -472,34 +352,23 @@ export function TaskList({
}
} else {
const positions = state.positions;
const lastItem = Object.values(positions).reduce(
(max, p) => (p.bottom > max.bottom ? p : max),
{ bottom: 0 }
);
const lastItem = Object.values(positions).reduce((max, p) => p.bottom > max.bottom ? p : max, { bottom: 0 });
if (absoluteY > lastItem.bottom) {
setDropIndicator({ targetId: null, position: 'below' });
} else {
setDropIndicator(null);
}
}
},
[findHoverTarget, calculateDropPosition, updateHoverTarget]
);
}, [findHoverTarget, calculateDropPosition, updateHoverTarget]);
const handleSubtaskDragEnd = useCallback(
async (absoluteY: number) => {
const handleSubtaskDragEnd = useCallback(async (absoluteY: number) => {
const state = subtaskDragRef.current;
subtaskDragRef.current = null;
setHoverTaskId(null);
setDropIndicator(null);
if (!state) return;
const target = findHoverTarget(
absoluteY,
state.subtaskId,
state.positions,
state.subPositions
);
const target = findHoverTarget(absoluteY, state.subtaskId, state.positions, state.subPositions);
if (target === state.subtaskId) return;
// Only allow dropping on tasks (not subtasks) to match task behavior
@@ -510,77 +379,15 @@ export function TaskList({
// If no target or target is a subtask: do nothing (matches task behavior)
await moveSubtaskToTask(state.subtaskId, target);
}
},
[findHoverTarget, moveSubtaskToTask]
);
const handleTaskDragStart = useCallback(
async (taskId: string) => {
const positions = (await measureItems()) as Record<string, { top: number; bottom: number }>;
taskDragRef.current = { taskId, positions };
},
[measureItems]
);
const handleTaskDragUpdate = useCallback(
(absoluteY: number) => {
const state = taskDragRef.current;
if (!state) return;
const target = findHoverTask(absoluteY, state.taskId, state.positions);
updateHoverTaskTarget(target);
if (target) {
setDropIndicator({ targetId: target, position: 'below' });
} else {
const lastItem = Object.values(state.positions).reduce(
(max, p) => (p.bottom > max.bottom ? p : max),
{ bottom: 0 }
);
if (absoluteY > lastItem.bottom) {
setDropIndicator({ targetId: null, position: 'below' });
} else {
setDropIndicator(null);
}
}
},
[findHoverTask, updateHoverTaskTarget]
);
const handleTaskDragEnd = useCallback(
async (absoluteY: number) => {
const state = taskDragRef.current;
taskDragRef.current = null;
setHoverTaskId(null);
setDropIndicator(null);
if (!state) return;
const target = findHoverTask(absoluteY, state.taskId, state.positions);
if (target === state.taskId) return;
// Set drop indicator based on target position
if (target) {
setDropIndicator({ targetId: target, position: 'below' });
} else {
const lastItem = Object.values(state.positions).reduce(
(max, p) => (p.bottom > max.bottom ? p : max),
{ bottom: 0 }
);
if (absoluteY > lastItem.bottom) {
setDropIndicator({ targetId: null, position: 'below' });
}
}
},
[findHoverTask]
);
}, [findHoverTarget, moveSubtaskToTask]);
const renderItem = useCallback(
({ item, index }: { item: Task; index: number }) => {
const isExpanded = expandedTasks.has(item.id);
const itemSubtasks = subtasksMap.get(item.id) ?? [];
const showDropAbove =
dropIndicator?.targetId === item.id && dropIndicator?.position === 'above';
const showDropBelow =
dropIndicator?.targetId === item.id && dropIndicator?.position === 'below';
const tagColors = parseTaskTags(item.tags, item.categoryId).map(id => categoryColors.get(id));
const showDropAbove = dropIndicator?.targetId === item.id && dropIndicator?.position === 'above';
const showDropBelow = dropIndicator?.targetId === item.id && dropIndicator?.position === 'below';
const tagColors = parseTaskTags(item.tags, item.categoryId).map((id) => categoryColors.get(id));
return (
<View>
{showDropAbove && <DropIndicator theme={theme} />}
@@ -599,10 +406,10 @@ export function TaskList({
onExpand={toggleExpand}
onSelect={toggleSelect}
onEnterSelection={enterSelection}
onMenuOpen={task => openTaskEdit(task.id)}
onMenuOpen={(task) => openTaskEdit(task.id)}
onSubtaskToggle={handleSubtaskToggle}
onSubtaskDelete={openSubtaskDelete}
onSubtaskMenuOpen={subtask => openSubtaskEdit(subtask.id)}
onSubtaskMenuOpen={(subtask) => openSubtaskEdit(subtask.id)}
onDragStart={handleDragStart}
onDragUpdate={handleDragUpdate}
onDragEnd={handleDragEnd}
@@ -656,9 +463,7 @@ export function TaskList({
return (
<View style={styles.emptyState}>
<Text style={[styles.emptyText, { color: theme.textSecondary }]}>No tasks yet</Text>
<Text style={[styles.emptySubtext, { color: theme.textMuted }]}>
Tap + to add your first task
</Text>
<Text style={[styles.emptySubtext, { color: theme.textMuted }]}>Tap + to add your first task</Text>
</View>
);
}, [sortedTasks.length, theme.textSecondary, theme.textMuted]);
@@ -680,16 +485,9 @@ export function TaskList({
<View style={styles.container}>
<Animated.FlatList
data={sortedTasks}
keyExtractor={item => item.id}
keyExtractor={(item) => item.id}
renderItem={renderItem}
extraData={{
expandedTasks,
subtasksMap,
selectedIds,
selectionMode,
hoverTaskId,
dropIndicator,
}}
extraData={{ expandedTasks, subtasksMap, selectedIds, selectionMode, hoverTaskId, dropIndicator }}
ItemSeparatorComponent={MemoSeparator}
ListHeaderComponent={listHeader}
ListFooterComponent={listFooter}
@@ -708,36 +506,16 @@ export function TaskList({
{modals(() => {})}
{selectionMode && (
<View
style={[
styles.selectionBar,
{ backgroundColor: theme.sheetBg, borderTopColor: theme.border },
]}
>
<TouchableOpacity
onPress={exitSelection}
style={styles.selectionCancel}
activeOpacity={0.7}
>
<View style={[styles.selectionBar, { backgroundColor: theme.sheetBg, borderTopColor: theme.border }]}>
<TouchableOpacity onPress={exitSelection} style={styles.selectionCancel} activeOpacity={0.7}>
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path
d="M18 6L6 18M6 6l12 12"
stroke={theme.textSecondary}
strokeWidth={2.2}
strokeLinecap="round"
/>
<Path d="M18 6L6 18M6 6l12 12" stroke={theme.textSecondary} strokeWidth={2.2} strokeLinecap="round" />
</Svg>
<Text style={[styles.selectionCancelText, { color: theme.textFaint }]}>Cancel</Text>
</TouchableOpacity>
<Text style={[styles.selectionCount, { color: theme.text }]}>
{selectedIds.size} selected
</Text>
<Text style={[styles.selectionCount, { color: theme.text }]}>{selectedIds.size} selected</Text>
<View style={styles.selectionActions}>
<SelectionButton
label="Complete"
color={theme.successStrong}
onPress={handleBulkComplete}
/>
<SelectionButton label="Complete" color={theme.successStrong} onPress={handleBulkComplete} />
<SelectionButton label="Delete" color={theme.dangerStrong} onPress={handleBulkDelete} />
</View>
</View>
@@ -746,15 +524,7 @@ export function TaskList({
);
}
const SelectionButton = React.memo(function SelectionButton({
label,
color,
onPress,
}: {
label: string;
color: string;
onPress: () => void;
}) {
const SelectionButton = React.memo(function SelectionButton({ label, color, onPress }: { label: string; color: string; onPress: () => void }) {
return (
<TouchableOpacity
style={[styles.selectionButton, { backgroundColor: color }]}
@@ -838,7 +608,10 @@ const TaskRow = React.memo(function TaskRow({
[subtasks]
);
return (
<View ref={ref => registerRef(task.id, ref)} style={styles.dragContainer}>
<View
ref={(ref) => registerRef(task.id, ref)}
style={styles.dragContainer}
>
<TaskItem
task={task as unknown as TaskData}
onToggle={() => onToggle(task.id)}
@@ -862,19 +635,19 @@ const TaskRow = React.memo(function TaskRow({
/>
{expanded && subtasks.length > 0 && (
<View style={styles.subtaskList}>
{sortedSubtasks.map(sub => (
<SubtaskItem
{sortedSubtasks.map((sub) => (
<SubtaskItem
key={sub.id}
subtask={sub}
hoveredId={hoverTaskId}
registerRef={registerSubtaskRef}
onToggle={sub => onSubtaskToggle(sub.id, task.id)}
onToggle={(sub) => onSubtaskToggle(sub.id, task.id)}
onDelete={() => onSubtaskDelete(sub)}
onMenuOpen={() => onSubtaskMenuOpen(sub)}
selected={selectedIds.has(sub.id)}
selectionMode={selectionMode}
draggable
onDragStart={sub => onSubtaskDragStart(sub.id, task.id)}
onDragStart={(sub) => onSubtaskDragStart(sub.id, task.id)}
onDragUpdate={onSubtaskDragUpdate}
onDragEnd={onSubtaskDragEnd}
categoryColor={categoryColor}
@@ -918,7 +691,8 @@ const styles = StyleSheet.create({
paddingTop: 4,
marginBottom: 4,
},
dragContainer: {},
dragContainer: {
},
dropIndicatorContainer: {
height: 8,
justifyContent: 'center',
@@ -1,5 +1,5 @@
import React from 'react';
import { View, Text, StyleSheet, TextInput, TextInputProps } from 'react-native';
import { View, Text, StyleSheet, TextInput , TextInputProps } from 'react-native';
import { useSettings, type ThemeColors } from '@/theme';
interface TaskNameInputProps extends TextInputProps {
@@ -35,8 +35,7 @@ export function TaskNameInput({ error, ...props }: TaskNameInputProps) {
);
}
const createStyles = (theme: ThemeColors) =>
StyleSheet.create({
const createStyles = (theme: ThemeColors) => StyleSheet.create({
container: {
gap: 5,
},
@@ -69,4 +68,4 @@ const createStyles = (theme: ThemeColors) =>
color: theme.dangerStrong,
marginLeft: 4,
},
});
});
@@ -49,45 +49,19 @@ export function TaskOverflowMenu({
{
key: 'edit',
label: 'Edit',
icon: (
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path
d="M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17v3z"
stroke={theme.text}
strokeWidth={2.2}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
),
icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17v3z" stroke={theme.text} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" /></Svg>,
onPress: onEdit,
},
{
key: 'complete',
label: task.completed ? 'Mark Incomplete' : 'Mark Complete',
icon: (
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path
d="M5 12l5 5 9-10"
stroke={theme.text}
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
),
icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M5 12l5 5 9-10" stroke={theme.text} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" /></Svg>,
onPress: onToggleComplete,
},
{
key: 'duplicate',
label: 'Duplicate',
icon: (
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path d="M8 8h12v12H8zM4 16V4h12" stroke={theme.text} strokeWidth={2.2} fill="none" />
</Svg>
),
icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M8 8h12v12H8zM4 16V4h12" stroke={theme.text} strokeWidth={2.2} fill="none" /></Svg>,
onPress: onDuplicate,
},
];
@@ -96,11 +70,7 @@ export function TaskOverflowMenu({
actions.push({
key: 'category',
label: 'Change Tags',
icon: (
<Svg width={20} height={20} viewBox="0 0 24 24">
<Circle2 />
</Svg>
),
icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Circle2 /></Svg>,
onPress: onChangeCategory ?? (() => {}),
});
}
@@ -109,49 +79,23 @@ export function TaskOverflowMenu({
{
key: 'priority',
label: 'Change Priority',
icon: (
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path
d="M5 3v18M5 5h14l-3 4 3 4H5"
stroke={theme.text}
strokeWidth={2.2}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
),
icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M5 3v18M5 5h14l-3 4 3 4H5" stroke={theme.text} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" /></Svg>,
onPress: onChangePriority,
},
{
key: 'delete',
label: 'Delete',
destructive: true,
icon: (
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path
d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"
stroke={theme.danger}
strokeWidth={2.2}
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
/>
</Svg>
),
icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" stroke={theme.danger} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" /></Svg>,
onPress: onDelete,
}
},
);
if (subtask && onAddSubtask) {
actions.push({
key: 'addSubtask',
label: 'Add Subtask',
icon: (
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path d="M12 5v14M5 12h14" stroke={theme.text} strokeWidth={2.5} strokeLinecap="round" />
</Svg>
),
icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M12 5v14M5 12h14" stroke={theme.text} strokeWidth={2.5} strokeLinecap="round" /></Svg>,
onPress: onAddSubtask,
});
}
@@ -168,7 +112,7 @@ export function TaskOverflowMenu({
<Text style={[styles.title, { color: theme.text }]} numberOfLines={1}>
{task.title}
</Text>
{actions.map(action => (
{actions.map((action) => (
<TouchableOpacity
key={action.key}
style={[styles.action, { borderColor: theme.border }]}
@@ -181,12 +125,7 @@ export function TaskOverflowMenu({
accessibilityLabel={`${action.label}${action.destructive ? ' (dangerous)' : ''}`}
>
{action.icon}
<Text
style={[
styles.actionText,
action.destructive ? styles.destructiveText : { color: theme.textSecondary },
]}
>
<Text style={[styles.actionText, action.destructive ? styles.destructiveText : { color: theme.textSecondary }]}>
{action.label}
</Text>
</TouchableOpacity>
@@ -201,19 +140,13 @@ function Circle2() {
const { theme } = useSettings();
return (
<Svg width={20} height={20} viewBox="0 0 24 24">
<Path
d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"
stroke={theme.text}
strokeWidth={2.2}
fill="none"
/>
<Path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z" stroke={theme.text} strokeWidth={2.2} fill="none" />
<Path d="M12 2a10 10 0 0 1 0 20z" fill={theme.text} opacity={0.35} />
</Svg>
);
}
const createStyles = (theme: ThemeColors) =>
StyleSheet.create({
const createStyles = (theme: ThemeColors) => StyleSheet.create({
overlay: {
flex: 1,
justifyContent: 'flex-end',
@@ -257,4 +190,4 @@ const createStyles = (theme: ThemeColors) =>
color: theme.dangerStrong,
fontWeight: '600',
},
});
});
+25 -290
View File
@@ -1,295 +1,30 @@
import { useEffect, useState, useCallback } from 'react';
import { Modal, View, Text, StyleSheet, Pressable, ScrollView, Platform } from 'react-native';
import {
checkForUpdates,
wasPromptedFor,
markPrompted,
downloadAPK,
installAPK,
openReleaseUrl,
AppUpdate,
} from '@/services/updates';
import { useSettings } from '@/theme';
import { useEffect } from 'react';
import { Alert, Linking } from 'react-native';
import { checkForUpdates, wasPromptedFor, markPrompted } from '@/services/updates';
export function UpdateNotifier() {
const { theme } = useSettings();
const [update, setUpdate] = useState<AppUpdate | null>(null);
const [visible, setVisible] = useState(false);
const [downloading, setDownloading] = useState(false);
const [downloadProgress, setDownloadProgress] = useState(0);
const [downloadError, setDownloadError] = useState<string | null>(null);
const checkUpdate = useCallback(async () => {
const available = await checkForUpdates();
if (!available) return;
const prompted = await wasPromptedFor(available.tagName);
if (prompted && !available.mandatory) return;
setUpdate(available);
setVisible(true);
useEffect(() => {
const run = async () => {
const update = await checkForUpdates();
if (!update || (await wasPromptedFor(update.tagName))) return;
await markPrompted(update.tagName);
const url = update.apkUrl ?? update.releaseUrl;
Alert.alert(
'Update available',
`A new version (${update.version}) is available for download.`,
[
{ text: 'Later', style: 'cancel' },
{
text: 'Download',
onPress: () => {
if (url) Linking.openURL(url).catch(() => {});
},
},
],
);
};
run();
}, []);
useEffect(() => {
checkUpdate();
}, [checkUpdate]);
const handleDownload = async () => {
if (!update?.apkUrl) {
await openReleaseUrl(update?.releaseUrl ?? '');
return;
}
setDownloading(true);
setDownloadProgress(0);
setDownloadError(null);
try {
const uri = await downloadAPK(update.apkUrl, setDownloadProgress);
if (uri) {
const installed = await installAPK(uri);
if (!installed) {
setDownloadError('Failed to open installer. Please install manually from Downloads.');
}
} else {
setDownloadError('Download failed. Please try again or download from the release page.');
}
} catch (error) {
setDownloadError('An error occurred during download.');
} finally {
setDownloading(false);
}
};
const handleLater = async () => {
if (update) {
await markPrompted(update.tagName);
}
setVisible(false);
};
const handleReleasePage = async () => {
if (update) {
await openReleaseUrl(update.releaseUrl);
}
};
if (!visible || !update) return null;
const isMandatory = update.mandatory;
return (
<Modal
visible={visible}
transparent
animationType="fade"
onRequestClose={isMandatory ? () => {} : handleLater}
>
<View style={[styles.overlay, { backgroundColor: theme.overlay }]}>
<View style={[styles.modal, { backgroundColor: theme.card }]}>
<View style={[styles.header, { borderBottomColor: theme.border }]}>
<Text style={[styles.title, { color: theme.text }]}>Update Available</Text>
<Text style={[styles.version, { color: theme.textSecondary }]}>
Version {update.version}
</Text>
</View>
<ScrollView style={styles.content} contentContainerStyle={styles.contentContainer}>
<Text style={[styles.sectionTitle, { color: theme.text }]}>What's New</Text>
<Text style={[styles.notes, { color: theme.textSecondary }]}>
{update.notes || 'No release notes provided.'}
</Text>
{isMandatory && (
<View style={styles.mandatoryBadge}>
<Text style={styles.mandatoryText}>Mandatory Update</Text>
</View>
)}
{downloading && (
<View style={styles.progressContainer}>
<View style={[styles.progressBar, { backgroundColor: theme.border }]}>
<View
style={[
styles.progressFill,
{ backgroundColor: theme.accent, width: `${downloadProgress * 100}%` },
]}
/>
</View>
<Text style={[styles.progressText, { color: theme.textSecondary }]}>
Downloading... {Math.round(downloadProgress * 100)}%
</Text>
</View>
)}
{downloadError && (
<View style={styles.errorContainer}>
<Text style={styles.errorText}>{downloadError}</Text>
<Pressable style={styles.errorAction} onPress={handleDownload}>
<Text style={styles.errorActionText}>Retry Download</Text>
</Pressable>
</View>
)}
</ScrollView>
<View style={[styles.actions, { borderTopColor: theme.border }]}>
{!isMandatory && (
<Pressable
style={[styles.button, styles.buttonSecondary, { backgroundColor: theme.cardAlt }]}
onPress={handleLater}
>
<Text style={[styles.buttonText, { color: theme.textSecondary }]}>Later</Text>
</Pressable>
)}
<Pressable
style={[
styles.button,
styles.buttonPrimary,
{ backgroundColor: theme.accent, opacity: downloading ? 0.7 : 1 },
]}
onPress={handleDownload}
disabled={downloading}
>
<Text style={[styles.buttonText, { color: theme.accentText }]}>
{downloading
? 'Downloading...'
: update.apkUrl
? 'Download & Install'
: 'View Release'}
</Text>
</Pressable>
<Pressable
style={[styles.button, styles.buttonGhost, { backgroundColor: 'transparent' }]}
onPress={handleReleasePage}
>
<Text style={[styles.buttonText, { color: theme.textSecondary }]}>Release Notes</Text>
</Pressable>
</View>
</View>
</View>
</Modal>
);
return null;
}
const styles = StyleSheet.create({
overlay: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
modal: {
width: '100%',
maxWidth: 480,
borderRadius: 20,
overflow: 'hidden',
maxHeight: '85%',
},
header: {
padding: 20,
borderBottomWidth: 1,
},
title: {
fontSize: 20,
fontWeight: '700',
marginBottom: 4,
},
version: {
fontSize: 14,
},
content: {
maxHeight: 300,
},
contentContainer: {
padding: 20,
paddingBottom: 12,
},
sectionTitle: {
fontSize: 14,
fontWeight: '600',
marginBottom: 8,
textTransform: 'uppercase',
letterSpacing: 0.5,
},
notes: {
fontSize: 14,
lineHeight: 22,
},
mandatoryBadge: {
marginTop: 12,
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 8,
backgroundColor: '#FFEBEE',
alignSelf: 'flex-start',
},
mandatoryText: {
fontSize: 12,
fontWeight: '600',
color: '#C62828',
},
progressContainer: {
marginTop: 16,
},
progressBar: {
height: 6,
borderRadius: 3,
overflow: 'hidden',
},
progressFill: {
height: '100%',
borderRadius: 3,
},
progressText: {
fontSize: 12,
marginTop: 6,
textAlign: 'center',
},
errorContainer: {
marginTop: 16,
padding: 12,
borderRadius: 8,
backgroundColor: '#FFF3E0',
},
errorText: {
fontSize: 13,
color: '#E65100',
marginBottom: 8,
},
errorAction: {
paddingVertical: 8,
paddingHorizontal: 16,
borderRadius: 6,
backgroundColor: '#FF9800',
alignSelf: 'flex-start',
},
errorActionText: {
fontSize: 13,
fontWeight: '600',
color: '#FFF',
},
actions: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'flex-end',
gap: 8,
padding: 16,
borderTopWidth: 1,
},
button: {
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 10,
minWidth: 100,
alignItems: 'center',
},
buttonPrimary: {},
buttonSecondary: {},
buttonGhost: {},
buttonText: {
fontSize: 14,
fontWeight: '600',
},
});
@@ -53,13 +53,7 @@ interface WheelRowProps {
onPress: () => void;
}
const WheelRow = React.memo(function WheelRow({
label,
selected,
accent,
textMuted,
onPress,
}: WheelRowProps) {
const WheelRow = React.memo(function WheelRow({ label, selected, accent, textMuted, onPress }: WheelRowProps) {
return (
<TouchableOpacity
style={[styles.row, selected && styles.rowSelected]}
@@ -102,10 +96,7 @@ function WheelColumn({
const indexRef = useRef(initialIndex);
useEffect(() => {
listRef.current?.scrollToOffset({
offset: initialIndex * ITEM_HEIGHT - (ITEM_HEIGHT * VISIBLE_ITEMS - ITEM_HEIGHT) / 2,
animated: false,
});
listRef.current?.scrollToOffset({ offset: initialIndex * ITEM_HEIGHT - (ITEM_HEIGHT * VISIBLE_ITEMS - ITEM_HEIGHT) / 2, animated: false });
indexRef.current = initialIndex;
}, [initialIndex]);
@@ -114,10 +105,7 @@ function WheelColumn({
const clamped = Math.min(Math.max(index, 0), data.length - 1);
indexRef.current = clamped;
onIndexChange(clamped);
listRef.current?.scrollToOffset({
offset: clamped * ITEM_HEIGHT - (ITEM_HEIGHT * VISIBLE_ITEMS - ITEM_HEIGHT) / 2,
animated: true,
});
listRef.current?.scrollToOffset({ offset: clamped * ITEM_HEIGHT - (ITEM_HEIGHT * VISIBLE_ITEMS - ITEM_HEIGHT) / 2, animated: true });
},
[data.length, onIndexChange]
);
@@ -138,9 +126,7 @@ function WheelColumn({
const handleScroll = useCallback(
(event: NativeSyntheticEvent<NativeScrollEvent>) => {
const offset = event.nativeEvent.contentOffset.y;
const index = Math.round(
(offset + (ITEM_HEIGHT * VISIBLE_ITEMS - ITEM_HEIGHT) / 2) / ITEM_HEIGHT
);
const index = Math.round((offset + (ITEM_HEIGHT * VISIBLE_ITEMS - ITEM_HEIGHT) / 2) / ITEM_HEIGHT);
const clamped = Math.min(Math.max(index, 0), data.length - 1);
if (clamped !== indexRef.current) {
indexRef.current = clamped;
@@ -162,7 +148,7 @@ function WheelColumn({
<FlatList
ref={listRef}
data={data}
keyExtractor={item => String(item)}
keyExtractor={(item) => String(item)}
renderItem={renderItem}
getItemLayout={(_data, index) => ({
length: ITEM_HEIGHT,
@@ -178,10 +164,7 @@ function WheelColumn({
onMomentumScrollEnd={handleScrollEnd}
scrollEventThrottle={16}
style={[styles.column, { width }]}
contentContainerStyle={{
paddingBottom: (VISIBLE_ITEMS - 1) * ITEM_HEIGHT,
alignItems: 'stretch',
}}
contentContainerStyle={{ paddingBottom: (VISIBLE_ITEMS - 1) * ITEM_HEIGHT, alignItems: 'stretch' }}
snapToAlignment="center"
snapToInterval={ITEM_HEIGHT}
/>
@@ -224,10 +207,7 @@ export function WheelTimePicker({
<View style={[styles.overlay, { backgroundColor: theme.overlay }]}>
<View style={[styles.sheet, { backgroundColor: theme.sheetBg }]}>
<View style={styles.header}>
<TouchableOpacity
onPress={onDismiss}
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
>
<TouchableOpacity onPress={onDismiss} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
<Text style={[styles.headerAction, { color: theme.textMuted }]}>Cancel</Text>
</TouchableOpacity>
<View style={styles.headerCenter}>
@@ -237,16 +217,10 @@ export function WheelTimePicker({
</Text>
</View>
<TouchableOpacity
onPress={() =>
onConfirm(
`${String(hourIndex).padStart(2, '0')}:${String(minuteIndex).padStart(2, '0')}`
)
}
onPress={() => onConfirm(`${String(hourIndex).padStart(2, '0')}:${String(minuteIndex).padStart(2, '0')}`)}
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
>
<Text style={[styles.headerAction, styles.doneText, { color: theme.accentStrong }]}>
Done
</Text>
<Text style={[styles.headerAction, styles.doneText, { color: theme.accentStrong }]}>Done</Text>
</TouchableOpacity>
</View>

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