Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b8e88bca6d | ||
|
|
41eaef92b0 | ||
|
|
93738a07ac | ||
|
|
55e21c06d9 | ||
|
|
eeab4d1221 | ||
|
|
c5f129bb42 | ||
|
|
4d3d741563 | ||
|
|
95c69d35e2 | ||
|
|
bc4903e3b8 | ||
|
|
beb6cc5715 | ||
|
|
4c6adc7117 | ||
|
|
c787b87cc5 | ||
|
|
0685735c74 | ||
|
|
064650a585 | ||
|
|
bdfe53fa83 | ||
|
|
f6abf628e3 | ||
|
|
40077da57f | ||
|
|
aa57d07dc0 | ||
|
|
89c85ed7c0 | ||
|
|
ee6af8fb26 | ||
|
|
c6e441d449 | ||
|
|
5043d9cdff | ||
|
|
7e36244478 | ||
|
|
157fc8d95b | ||
|
|
4d2f92b144 | ||
|
|
8e805316fb | ||
|
|
77051e5206 | ||
|
|
7e06415db4 | ||
|
|
cfb987a305 | ||
|
|
3dad9e93ec | ||
|
|
2be4d5aa4e | ||
|
|
e91251759b | ||
|
|
0093c4aec2 | ||
|
|
0563521887 | ||
|
|
9ade0fa0ca | ||
|
|
3ec934a54c | ||
|
|
39fd491d24 | ||
|
|
381fef8502 | ||
|
|
c4cc2712ee | ||
|
|
152d07f21e | ||
|
|
49ef8ae82f | ||
|
|
261a6d4d40 | ||
|
|
0b87f3e4ed | ||
|
|
7f8a764131 |
@@ -0,0 +1,158 @@
|
|||||||
|
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
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build-android:
|
||||||
|
name: Build Android
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
timeout-minutes: 45
|
||||||
|
|
||||||
|
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: npx expo prebuild --platform android --clean
|
||||||
|
|
||||||
|
- name: Build Android Debug APK
|
||||||
|
working-directory: carry-your-live/android
|
||||||
|
run: ./gradlew assembleDebug --no-daemon
|
||||||
|
|
||||||
|
- name: Build Android Release APK
|
||||||
|
working-directory: carry-your-live/android
|
||||||
|
run: ./gradlew assembleRelease --no-daemon
|
||||||
|
|
||||||
|
- name: Build Android Bundle (AAB)
|
||||||
|
working-directory: carry-your-live/android
|
||||||
|
run: ./gradlew bundleRelease --no-daemon
|
||||||
|
|
||||||
|
- name: Run Unit 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 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: 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 Debug APK
|
||||||
|
uses: actions/upload-artifact@v4
|
||||||
|
with:
|
||||||
|
name: android-debug-apk
|
||||||
|
path: ${{ steps.find-debug-apk.outputs.apk_path }}
|
||||||
|
retention-days: 30
|
||||||
|
|
||||||
|
- 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
|
||||||
|
|
||||||
|
- 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
|
||||||
@@ -1,74 +0,0 @@
|
|||||||
name: Build APK
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches: [main]
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
env:
|
|
||||||
ANDROID_HOME: ${{ runner.tool_cache }}/android-sdk
|
|
||||||
ANDROID_SDK_ROOT: ${{ runner.tool_cache }}/android-sdk
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- name: Checkout
|
|
||||||
uses: actions/checkout@v4
|
|
||||||
|
|
||||||
- name: Set up Node
|
|
||||||
uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: 22
|
|
||||||
|
|
||||||
- name: Set up JDK
|
|
||||||
uses: actions/setup-java@v4
|
|
||||||
with:
|
|
||||||
distribution: temurin
|
|
||||||
java-version: 17
|
|
||||||
|
|
||||||
- name: Install Android SDK
|
|
||||||
run: |
|
|
||||||
if [ -x "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" ]; then
|
|
||||||
echo "Android SDK already present in cache"
|
|
||||||
else
|
|
||||||
rm -rf "$ANDROID_HOME/cmdline-tools"
|
|
||||||
mkdir -p "$ANDROID_HOME/cmdline-tools"
|
|
||||||
wget -q https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip -O /tmp/cmdtools.zip
|
|
||||||
unzip -q /tmp/cmdtools.zip -d "$ANDROID_HOME/cmdline-tools"
|
|
||||||
mv "$ANDROID_HOME/cmdline-tools/cmdline-tools" "$ANDROID_HOME/cmdline-tools/latest"
|
|
||||||
fi
|
|
||||||
printf 'y\n' | "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" --licenses > /dev/null
|
|
||||||
"$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" \
|
|
||||||
"platform-tools" \
|
|
||||||
"platforms;android-35" \
|
|
||||||
"platforms;android-36" \
|
|
||||||
"build-tools;35.0.0" \
|
|
||||||
"build-tools;36.0.0" \
|
|
||||||
"ndk;27.1.12297006"
|
|
||||||
mkdir -p carry-your-live/android/app
|
|
||||||
echo "sdk.dir=$ANDROID_HOME" > carry-your-live/android/app/local.properties
|
|
||||||
|
|
||||||
- name: Install JS dependencies
|
|
||||||
working-directory: carry-your-live
|
|
||||||
run: npm ci
|
|
||||||
|
|
||||||
- name: Generate debug keystore (signs the release APK)
|
|
||||||
run: |
|
|
||||||
mkdir -p carry-your-live/android/app
|
|
||||||
keytool -genkeypair -v \
|
|
||||||
-keystore carry-your-live/android/app/debug.keystore \
|
|
||||||
-alias androiddebugkey -storepass android -keypass android \
|
|
||||||
-keyalg RSA -keysize 2048 -validity 10000 \
|
|
||||||
-dname "CN=Android Debug,O=Android,C=US"
|
|
||||||
|
|
||||||
- name: Build release APK
|
|
||||||
run: |
|
|
||||||
cd carry-your-live/android
|
|
||||||
./gradlew assembleRelease
|
|
||||||
|
|
||||||
- name: Upload APK
|
|
||||||
uses: actions/upload-artifact@v4
|
|
||||||
with:
|
|
||||||
name: carry-your-live-release
|
|
||||||
path: carry-your-live/android/app/build/outputs/release/app-release.apk
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
name: Build Desktop (deb)
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches: [main]
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- name: Checkout
|
|
||||||
uses: actions/checkout@v4
|
|
||||||
|
|
||||||
- name: Set up Node
|
|
||||||
uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: 22
|
|
||||||
|
|
||||||
- name: Install JS dependencies
|
|
||||||
working-directory: carry-your-live
|
|
||||||
run: npm ci
|
|
||||||
|
|
||||||
- name: Export web bundle
|
|
||||||
working-directory: carry-your-live
|
|
||||||
run: npx expo export --platform web
|
|
||||||
|
|
||||||
- name: Build deb package
|
|
||||||
working-directory: carry-your-live
|
|
||||||
run: npx electron-builder --linux deb --config electron-builder.config.js
|
|
||||||
|
|
||||||
- name: Upload deb
|
|
||||||
uses: actions/upload-artifact@v4
|
|
||||||
with:
|
|
||||||
name: carry-your-live-desktop-deb
|
|
||||||
path: carry-your-live/desktop-build/*.deb
|
|
||||||
@@ -1,56 +1,237 @@
|
|||||||
name: release
|
name: Build and Release Android
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
branches:
|
tags:
|
||||||
- main
|
- 'v*'
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
permissions:
|
env:
|
||||||
contents: write
|
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"
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
release:
|
build:
|
||||||
|
name: Build Android
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
timeout-minutes: 45
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout
|
- name: Checkout repository
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v4
|
||||||
with:
|
with:
|
||||||
fetch-depth: 0
|
fetch-depth: 0
|
||||||
|
|
||||||
- name: Compute next version
|
- name: Setup Node.js
|
||||||
id: version
|
uses: actions/setup-node@v4
|
||||||
run: |
|
|
||||||
latest=$(git tag --list 'v[0-9]*' --sort=-v:refname | head -n 1)
|
|
||||||
if [ -z "$latest" ]; then
|
|
||||||
next="v1.0.0"
|
|
||||||
else
|
|
||||||
latest=${latest#v}
|
|
||||||
IFS='.' read -r major minor patch <<< "$latest"
|
|
||||||
next="v${major}.${minor}.$((patch + 1))"
|
|
||||||
fi
|
|
||||||
echo "next=${next}" >> "$GITHUB_OUTPUT"
|
|
||||||
|
|
||||||
- name: Build changelog
|
|
||||||
id: changelog
|
|
||||||
run: |
|
|
||||||
prev_tag=$(git describe --tags --abbrev=0 2>/dev/null || echo "")
|
|
||||||
if [ -z "$prev_tag" ]; then
|
|
||||||
log=$(git log --oneline --no-merges main | head -n 40)
|
|
||||||
else
|
|
||||||
log=$(git log --oneline --no-merges "$prev_tag"..main | head -n 40)
|
|
||||||
fi
|
|
||||||
{
|
|
||||||
echo "body<<EOF"
|
|
||||||
echo "## What's new in this release"
|
|
||||||
echo ""
|
|
||||||
echo "$log" | sed 's/^/- /'
|
|
||||||
echo "EOF"
|
|
||||||
} >> "$GITHUB_OUTPUT"
|
|
||||||
|
|
||||||
- name: Create release
|
|
||||||
uses: softprops/action-gh-release@v2
|
|
||||||
with:
|
with:
|
||||||
tag_name: ${{ steps.version.outputs.next }}
|
node-version: ${{ env.NODE_VERSION }}
|
||||||
name: ${{ steps.version.outputs.next }}
|
cache: 'npm'
|
||||||
body: ${{ steps.changelog.outputs.body }}
|
cache-dependency-path: carry-your-live/package-lock.json
|
||||||
generate_release_notes: false
|
|
||||||
|
- 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: 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
|
||||||
|
else
|
||||||
|
./gradlew assembleRelease --no-daemon
|
||||||
|
fi
|
||||||
|
|
||||||
|
- 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
|
||||||
|
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
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
# Architekt Agent
|
||||||
|
|
||||||
|
## Role
|
||||||
|
System architecture design, technical strategy, and scalability planning.
|
||||||
|
|
||||||
|
## Responsibilities
|
||||||
|
- High-level system design
|
||||||
|
- Technology stack selection
|
||||||
|
- Performance optimization
|
||||||
|
- Architecture documentation
|
||||||
|
- Trade-off analysis
|
||||||
|
|
||||||
|
## Key Metrics
|
||||||
|
- System scalability
|
||||||
|
- Performance benchmarks
|
||||||
|
- Technical debt ratio
|
||||||
|
- Architecture compliance
|
||||||
|
|
||||||
|
## Android Design Guidelines
|
||||||
|
- Material Design elevation patterns (0-12dp shadows)
|
||||||
|
- Tab bar height: 56dp (standard Android)
|
||||||
|
- Status bar: dark style for light backgrounds, light style for dark
|
||||||
|
- System back button: router.back() or goBack() with confirmation on home screen
|
||||||
|
- Touch ripple: opacity scaling on press (44dp touch targets, 8dp border radius)
|
||||||
|
- Safe area insets: account for bottom navigation bar (84px + system insets)
|
||||||
|
- Theme: primary accent color with complementary supporting colors
|
||||||
|
- Typography: Roboto-inspired font weights (600 for labels, 400/500 for body)
|
||||||
|
- Scaling: 8dp grid system for spacing and margins
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"agents": {
|
||||||
|
"manager": ".opencode/manager.md",
|
||||||
|
"architekt": ".opencode/architekt.md",
|
||||||
|
"software_engineer": ".opencode/software_engineer.md",
|
||||||
|
"hardware_engineer": ".opencode/hardware_engineer.md",
|
||||||
|
"tester": ".opencode/tester.md",
|
||||||
|
"docs": ".opencode/docs.md",
|
||||||
|
"deployment": ".opencode/deployment.md",
|
||||||
|
"vla": ".opencode/vla.md"
|
||||||
|
},
|
||||||
|
"subagent_depth": 999999
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
# Deployment Agent
|
||||||
|
|
||||||
|
## Role
|
||||||
|
CI/CD, infrastructure, and release management.
|
||||||
|
|
||||||
|
## Responsibilities
|
||||||
|
- CI/CD pipeline management
|
||||||
|
- Infrastructure as code
|
||||||
|
- Release orchestration
|
||||||
|
- Environment management
|
||||||
|
- Monitoring and alerting
|
||||||
|
|
||||||
|
## Key Metrics
|
||||||
|
- Deployment frequency
|
||||||
|
- Lead time for changes
|
||||||
|
- Mean time to recovery
|
||||||
|
- Change success rate
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
# Docs Agent
|
||||||
|
|
||||||
|
## Role
|
||||||
|
Technical documentation, API docs, and knowledge management.
|
||||||
|
|
||||||
|
## Responsibilities
|
||||||
|
- API documentation
|
||||||
|
- User guides
|
||||||
|
- Architecture docs
|
||||||
|
- Change logs
|
||||||
|
- Knowledge base maintenance
|
||||||
|
|
||||||
|
## Key Metrics
|
||||||
|
- Documentation completeness
|
||||||
|
- Update frequency
|
||||||
|
- User satisfaction
|
||||||
|
- Searchability
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
# Hardware Engineer Agent
|
||||||
|
|
||||||
|
## Role
|
||||||
|
Hardware integration, device management, and embedded systems.
|
||||||
|
|
||||||
|
## Responsibilities
|
||||||
|
- Hardware selection and integration
|
||||||
|
- Device driver development
|
||||||
|
- Embedded firmware
|
||||||
|
- Prototyping and testing
|
||||||
|
- Hardware-software interface
|
||||||
|
|
||||||
|
## Key Metrics
|
||||||
|
- Hardware compatibility rate
|
||||||
|
- Power consumption
|
||||||
|
- Latency measurements
|
||||||
|
- Component reliability
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
# Manager Agent
|
||||||
|
|
||||||
|
## Role
|
||||||
|
Project management, task coordination, prioritization, and team oversight.
|
||||||
|
|
||||||
|
## Responsibilities
|
||||||
|
- Task decomposition and assignment
|
||||||
|
- Progress tracking and status reporting
|
||||||
|
- Risk identification and mitigation
|
||||||
|
- Resource allocation
|
||||||
|
- Stakeholder communication
|
||||||
|
|
||||||
|
## Key Metrics
|
||||||
|
- Sprint velocity
|
||||||
|
- Task completion rate
|
||||||
|
- Blockers resolved
|
||||||
|
- Timeline adherence
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
# Carry Your Live - Project Summary
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
A minimalist, offline-first task management app built with Expo, React Native, and WatermelonDB. Features three primary screens: To-Do List, Add New Task, and Calendar with bottom navigation.
|
||||||
|
|
||||||
|
## Core Features
|
||||||
|
- **Offline-First Architecture**: Full CRUD operations work offline with WatermelonDB + SQLite
|
||||||
|
- **Auto-Sync**: Background synchronization with custom Postgres API when online
|
||||||
|
- **Cross-Platform**: iOS, Android, and Web from single codebase
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
| Layer | Technology |
|
||||||
|
|-------|------------|
|
||||||
|
| Framework | Expo (React Native) |
|
||||||
|
| Language | TypeScript |
|
||||||
|
| Navigation | Expo Router (file-based) |
|
||||||
|
| Database | WatermelonDB + SQLite |
|
||||||
|
| State | WatermelonDB (reactive queries, no Redux needed) |
|
||||||
|
| Forms | React Hook Form + Zod validation |
|
||||||
|
| UI Components | React Native Paper + Custom SVG icons |
|
||||||
|
| Animations | React Native Reanimated |
|
||||||
|
| Date/Time | @react-native-community/datetimepicker + date-fns |
|
||||||
|
| Build | Gradle (local APK) |
|
||||||
|
| CI/CD | Gitea Actions |
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
```
|
||||||
|
carry-your-live/
|
||||||
|
├ app/
|
||||||
|
│ ├── _layout.tsx # Root layout + DatabaseProvider
|
||||||
|
│ ├── (tabs)/
|
||||||
|
│ │ ├── _layout.tsx # Bottom tab navigator
|
||||||
|
│ │ ├── index.tsx # Tasks screen
|
||||||
|
│ │ ├── calendar.tsx # Calendar screen
|
||||||
|
│ │ └── settings.tsx # Settings screen
|
||||||
|
│ └── add-task.tsx # Add Task screen
|
||||||
|
├ src/
|
||||||
|
│ ├── components/ # Reusable UI components
|
||||||
|
│ ├── database/
|
||||||
|
│ │ ├── schema.ts # WatermelonDB schema
|
||||||
|
│ │ ├── index.ts # Database instance + collections
|
||||||
|
│ │ └── sync.ts # Custom API sync adapter
|
||||||
|
│ ├── models/
|
||||||
|
│ │ ├── Task.ts
|
||||||
|
│ │ ├── Category.ts
|
||||||
|
│ │ └── Subtask.ts
|
||||||
|
│ ├── hooks/
|
||||||
|
│ │ ├── useDatabase.tsx # Database context & providers
|
||||||
|
│ │ └── useTasks.tsx # Task queries with reactive state
|
||||||
|
│ ├── constants/
|
||||||
|
│ │ └── index.ts # Categories, priorities, colors
|
||||||
|
│ └── types/
|
||||||
|
│ └── index.ts # TypeScript interfaces
|
||||||
|
```
|
||||||
|
|
||||||
|
## Data Models
|
||||||
|
- **Task**: id, title, description, categoryId, priority, completed, dueDate, dueTime, createdAt, updatedAt, subtasks
|
||||||
|
- **Category**: id, name, color, order
|
||||||
|
- **Subtask**: id, taskId, title, completed, order, createdAt, updatedAt
|
||||||
|
|
||||||
|
## Default Categories
|
||||||
|
| Name | Color | Order |
|
||||||
|
|------|-------|-------|
|
||||||
|
| Work | #E53935 (Red) | 0 |
|
||||||
|
| Personal | #43A047 (Green) | 1 |
|
||||||
|
| School | #1E88E5 (Blue) | 2 |
|
||||||
|
| Shopping | #FB8C00 (Orange) | 3 |
|
||||||
|
| Health | #8E24AA (Purple) | 4 |
|
||||||
|
| Finance | #FDD835 (Yellow) | 5 |
|
||||||
|
|
||||||
|
## Priority Colors
|
||||||
|
| Priority | Color |
|
||||||
|
|----------|-------|
|
||||||
|
| None | #9E9E9E |
|
||||||
|
| Low | #43A047 |
|
||||||
|
| Medium | #FB8C00 |
|
||||||
|
| High | #E53935 |
|
||||||
|
| Critical | #B71C1C |
|
||||||
|
|
||||||
|
## Sync API
|
||||||
|
Custom API at `http://localhost:3000/api` (configurable in `src/database/sync.ts`):
|
||||||
|
- **Pull**: GET /sync?since={timestamp} - returns categories, tasks, subtasks, timestamp
|
||||||
|
- **Push**: POST /sync/push - body with changes { categories, tasks, subtasks } + lastPulledAt
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npx expo start
|
||||||
|
# Platform-specific:
|
||||||
|
npx expo start --ios
|
||||||
|
npx expo start --android
|
||||||
|
npx expo start --web
|
||||||
|
```
|
||||||
|
|
||||||
|
## Build Commands
|
||||||
|
- `cd android && ./gradlew assembleDebug` - Debug APK
|
||||||
|
- `cd android && ./gradlew assembleRelease` - Release APK
|
||||||
|
- `npm run desktop` - Electron desktop app
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
# Software Engineer Agent
|
||||||
|
|
||||||
|
## Role
|
||||||
|
Code implementation, feature development, and software quality.
|
||||||
|
|
||||||
|
## Responsibilities
|
||||||
|
- Feature implementation
|
||||||
|
- Code reviews
|
||||||
|
- Bug fixing
|
||||||
|
- Refactoring
|
||||||
|
- Unit testing
|
||||||
|
|
||||||
|
## Key Metrics
|
||||||
|
- Code quality score
|
||||||
|
- Test coverage
|
||||||
|
- Pull request throughput
|
||||||
|
- Bug resolution time
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
# Tester Agent
|
||||||
|
|
||||||
|
## Role
|
||||||
|
Quality assurance, test automation, and test strategy.
|
||||||
|
|
||||||
|
## Responsibilities
|
||||||
|
- Test case design
|
||||||
|
- Automated test execution
|
||||||
|
- Regression testing
|
||||||
|
- Performance testing
|
||||||
|
- Test coverage analysis
|
||||||
|
|
||||||
|
## Key Metrics
|
||||||
|
- Test pass rate
|
||||||
|
- Defect detection rate
|
||||||
|
- Test execution time
|
||||||
|
- Bug leakage
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
# VLA Agent
|
||||||
|
|
||||||
|
## Role
|
||||||
|
Vision-Language-Action models and multimodal understanding.
|
||||||
|
|
||||||
|
## Responsibilities
|
||||||
|
- VLA model development
|
||||||
|
- Multimodal perception
|
||||||
|
- Action prediction
|
||||||
|
- Policy learning
|
||||||
|
- Sim-to-real transfer
|
||||||
|
|
||||||
|
## Key Metrics
|
||||||
|
- Task success rate
|
||||||
|
- Sample efficiency
|
||||||
|
- Generalization ability
|
||||||
|
- Simulation-to-real transfer rate
|
||||||
@@ -1,6 +1,40 @@
|
|||||||
# Carry Your Live - Mobile To-Do & Calendar App
|
# Carry Your Live - Mobile To-Do & Calendar App
|
||||||
|
|
||||||
A minimalist, offline-first task management app built with Expo, React Native, and WatermelonDB. Features three primary screens: To-Do List, Add New Task, and Calendar with bottom navigation.
|
A minimalist, offline-first task management app built with Expo, React Native, and WatermelonDB. Features multiple screens with bottom navigation, social features, and a full-featured backend API.
|
||||||
|
|
||||||
|
## 📝 Recent Progress (v1.1.0 - Unreleased)
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- **Friends feature**: Friend requests, accept/decline/remove, user search, full backend routes
|
||||||
|
- **Assignee field on tasks**: Schema v7, model, types, forms, sync, task actions
|
||||||
|
- **AssigneeSelector component** and assignee display in TaskItem
|
||||||
|
- **QuickAddBar** on tasks overview (copied from calendar)
|
||||||
|
- **Backend**: Mounted friends route, added assigneeId to task validation and sync
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
- Due date prefilled from Calendar "+" button
|
||||||
|
- 12-hour time formatting across task rows and pickers
|
||||||
|
- Calendar strip scrolls to selected day when navigating months
|
||||||
|
- Calendar completion toggle now handles repeating tasks and reminders
|
||||||
|
- Task color strips now use the task's category color
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
- WheelTimePicker FlatList scroll clamping - all hours (0-23) and minutes (0-59) reachable
|
||||||
|
- WheelTimePicker selection highlight background connecting selected item with colon separator
|
||||||
|
- WheelTimePicker number alignment in scroll list
|
||||||
|
- Tasks without a due date no longer get overdue styling
|
||||||
|
- `useOverdueTasks` infinite re-subscription loop (Date.now in effect deps)
|
||||||
|
- Web/Android crashes from decorator transform ordering (babel config)
|
||||||
|
- FormButtons crash outside FormProvider; Cancel navigation fallback
|
||||||
|
- Task repeat settings, reminders and series info now sync to backend
|
||||||
|
|
||||||
|
### Removed
|
||||||
|
- Task color picker (task color now comes from its category)
|
||||||
|
- Drag lift popup from TaskItem (scale + shadow on drag)
|
||||||
|
- Checkbox from task items
|
||||||
|
- Selection bar overlapping QuickAddBar on tasks overview
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
@@ -8,97 +42,145 @@ A minimalist, offline-first task management app built with Expo, React Native, a
|
|||||||
- **Offline-First Architecture**: Full CRUD operations work offline with WatermelonDB + SQLite
|
- **Offline-First Architecture**: Full CRUD operations work offline with WatermelonDB + SQLite
|
||||||
- **Auto-Sync**: Background synchronization with custom Postgres API when online
|
- **Auto-Sync**: Background synchronization with custom Postgres API when online
|
||||||
- **Cross-Platform**: iOS, Android, and Web from single codebase
|
- **Cross-Platform**: iOS, Android, and Web from single codebase
|
||||||
|
- **Desktop Support**: Electron wrapper for desktop app distribution
|
||||||
|
|
||||||
### Screens
|
### Screens
|
||||||
|
|
||||||
#### 1. To-Do List Screen
|
#### 1. Tasks Screen (To-Do List)
|
||||||
- **Header**: App logo + "TODO" title with rounded corners
|
- **Header**: App logo + "TODO" title with rounded corners
|
||||||
- **Category Filter**: Horizontal scrollable chips (Work, Personal, School, Shopping, Health, Finance, All)
|
- **Category Filter**: Horizontal scrollable chips (Work, Personal, School, Shopping, Health, Finance, All)
|
||||||
- Single selection with visual feedback (thicker border, shadow, scale animation)
|
- Single selection with visual feedback (thicker border, shadow, scale animation)
|
||||||
- Instant task filtering
|
- Instant task filtering
|
||||||
- **Task List**: Vertical scrolling with:
|
- **QuickAddBar**: Quick task creation from list view
|
||||||
- Checkbox (empty/checked states with animation)
|
- **Task List**: Virtualized FlatList with sections (Pending/Completed)
|
||||||
- Task title (truncated with ellipsis)
|
- Task title (truncated with ellipsis)
|
||||||
- Three-dot overflow menu (Edit, Delete, Duplicate, Mark Complete, Change Category, Change Priority)
|
- Three-dot overflow menu (Edit, Delete, Duplicate, Mark Complete, Change Category, Change Priority)
|
||||||
- Priority badges with colors
|
- Priority badges with colors
|
||||||
- Due date/time with overdue/due-today highlighting
|
- Due date/time with overdue/due-today highlighting
|
||||||
- Completed section (collapsible)
|
- Category color indicator strip
|
||||||
- **Floating Action Button**: Bottom-right, opens Add Task screen with press animation
|
- Assignee display
|
||||||
|
- Swipe actions (left: delete, right: complete)
|
||||||
|
- Drag-to-reorder with visual drop indicators
|
||||||
|
- Long press → Selection mode (multi-delete, multi-complete, change category/priority)
|
||||||
|
- **Floating Action Button**: Bottom-right, opens Add Task screen
|
||||||
|
|
||||||
#### 2. Add New Task Screen
|
#### 2. Calendar Screen
|
||||||
|
- **Date Strip**: Horizontal scrollable days of current month
|
||||||
|
- Current day highlighted, scrolls to selected day on month change
|
||||||
|
- **Month Label**: Centered (e.g., "JAN 2026")
|
||||||
|
- **QuickAddBar**: Quick task creation for selected date
|
||||||
|
- **Task List**: Tasks for selected day with category color, title, time, completion status
|
||||||
|
- **Analog Clock Widget**: Decorative analog clock display
|
||||||
|
- **Empty State**: "No tasks scheduled."
|
||||||
|
- **Day View**: Detailed view for selected day (pushes to stack)
|
||||||
|
|
||||||
|
#### 3. Stats Screen
|
||||||
|
- Client-side statistics (`useStats` hook)
|
||||||
|
- Task completion metrics
|
||||||
|
- Category and priority breakdowns
|
||||||
|
|
||||||
|
#### 4. Settings Screen
|
||||||
|
- **Account**: Login/Register/Sign Out (SyncModal)
|
||||||
|
- **Server URL Override**: Custom API endpoint configuration
|
||||||
|
- **Appearance**: Accent color picker (dark mode toggle planned)
|
||||||
|
- **Task Defaults**: Default category, sort order (Date, Priority, Alphabetically, Creation Date), show completed toggle
|
||||||
|
- **Calendar**: Days ahead to display
|
||||||
|
- **Reminders**: Global reminder preference (stored, wiring in progress)
|
||||||
|
- **Notifications**: Toggle (stored, wiring in progress)
|
||||||
|
- **Legal**: Privacy Policy, Terms of Service
|
||||||
|
- **About**: Version info
|
||||||
|
|
||||||
|
#### 5. Add New Task Screen
|
||||||
- **Category Selector**: Horizontal row of colored circles (required)
|
- **Category Selector**: Horizontal row of colored circles (required)
|
||||||
- **Task Name**: Single-line input, 100 char max (required)
|
- **Task Name**: Single-line input, 100 char max (required)
|
||||||
- **Subtasks**: Unlimited, add/remove individually
|
- **Subtasks**: Unlimited, add/remove individually, nested subtask support
|
||||||
- **Date & Time**: Date picker, time picker, calendar button
|
- **Date & Time**: Date picker, time picker (WheelTimePicker), calendar button
|
||||||
- **Priority**: Dropdown (None, Low, Medium, High, Critical) with color indicators
|
- **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
|
- **Description**: Multi-line text area, 1000 char max
|
||||||
- **Bottom Actions**: Submit (primary) / Cancel (secondary) fixed buttons
|
- **Bottom Actions**: Submit (primary) / Cancel (secondary) fixed buttons
|
||||||
|
|
||||||
#### 3. Calendar Screen
|
#### 6. Task Detail Screen
|
||||||
- **Date Strip**: Horizontal scrollable days of current month
|
- Full task view with all fields
|
||||||
- **Month Label**: Centered (e.g., "JAN 2026")
|
- Subtask management (add, complete, reorder, convert to task)
|
||||||
- **Task List**: Tasks for selected day with category color, title, time, completion status
|
- Edit functionality
|
||||||
- **Empty State**: "No tasks scheduled."
|
- Repeat profile configuration
|
||||||
|
|
||||||
#### 4. Settings Screen
|
#### 7. Subtask Detail Screen
|
||||||
- Dark Mode toggle
|
- Nested subtask management
|
||||||
- Push Notifications toggle
|
- Convert subtask ↔ task
|
||||||
- Reminder Preferences
|
- Re-parent subtasks
|
||||||
- Default Category selector
|
|
||||||
- Sort Tasks By (Date, Priority, Alphabetically, Creation Date)
|
|
||||||
- Backup & Sync
|
|
||||||
- Version, Privacy Policy, Terms of Service
|
|
||||||
|
|
||||||
### Task States
|
#### 8. Sync Modal
|
||||||
- **Pending**: Empty checkbox, normal text
|
- Login/Register forms
|
||||||
- **Completed**: Checked checkbox, strikethrough, reduced opacity
|
- Forgot/Reset password flow
|
||||||
- **Overdue**: Red due date, warning indicator
|
- Server URL configuration
|
||||||
- **Due Today**: Blue highlight
|
- Sync status display
|
||||||
- **High Priority**: Priority badge
|
|
||||||
|
|
||||||
### Interactions
|
### Task Features
|
||||||
- Tap task → Edit screen
|
- **Nested Subtasks**: Unlimited depth, re-parenting, drag reorder
|
||||||
- Long press → Selection mode (multi-delete, multi-complete, change category/priority)
|
- **Repeating Tasks**: Repeat profiles, series IDs, this/future/all delete scopes, undo-complete
|
||||||
- Swipe left → Delete
|
- **Categories/Tags**: 6 default categories with colors, custom category editor
|
||||||
- Swipe right → Complete
|
- **Priorities**: None, Low, Medium, High, Critical with color badges
|
||||||
- Pull down → Refresh
|
- **Due Dates/Times**: With all-day option
|
||||||
|
- **Reminders**: Per-task reminder offsets
|
||||||
|
- **Assignees**: Assign tasks to friends
|
||||||
|
- **Overdue/Due Today**: Visual highlighting
|
||||||
|
|
||||||
|
### Social Features
|
||||||
|
- **Friends System**: Send/accept/decline/remove friend requests
|
||||||
|
- **User Search**: Find users by username/email
|
||||||
|
- **Task Assignment**: Assign tasks to friends (client-side, backend schema ready)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Tech Stack
|
## Tech Stack
|
||||||
|
|
||||||
| Layer | Technology |
|
| Layer | Technology |
|
||||||
|-------|------------|
|
|-------|------------|
|
||||||
| Framework | Expo (React Native) |
|
| Framework | Expo (React Native) / Expo Router v3 |
|
||||||
| Language | TypeScript |
|
| Language | TypeScript (strict mode) |
|
||||||
| Navigation | Expo Router (file-based) |
|
| Navigation | Expo Router (file-based) |
|
||||||
| Database | WatermelonDB + SQLite |
|
| Database | WatermelonDB + SQLite (expo-sqlite) |
|
||||||
| State | WatermelonDB (reactive queries, no Redux needed) |
|
| State | WatermelonDB reactive queries (no Redux) |
|
||||||
| Forms | React Hook Form + Zod validation |
|
| Forms | React Hook Form + Zod validation |
|
||||||
| UI Components | React Native Paper + Custom SVG icons |
|
| UI Components | React Native Paper + Custom components |
|
||||||
| Animations | React Native Reanimated |
|
| Animations | React Native Reanimated v3 |
|
||||||
| Date/Time | @react-native-community/datetimepicker + date-fns |
|
| Date/Time | @react-native-community/datetimepicker + date-fns + WheelTimePicker |
|
||||||
| Build | EAS Build / Gradle (local APK) |
|
| Build | EAS Build / Gradle (local APK) / Electron Builder (desktop) |
|
||||||
| CI/CD | Gitea Actions (`.gitea/workflows/build-apk.yml`) |
|
| 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
|
## Project Structure
|
||||||
|
|
||||||
```
|
```
|
||||||
carry-your-live/
|
carry-your-live/
|
||||||
├── app/
|
├── app/
|
||||||
│ ├── _layout.tsx # Root layout + DatabaseProvider
|
│ ├── _layout.tsx # Root layout + DatabaseProvider + AuthProvider
|
||||||
│ ├── (tabs)/
|
│ ├── (tabs)/
|
||||||
│ │ ├── _layout.tsx # Bottom tab navigator
|
│ │ ├── _layout.tsx # Bottom tab navigator
|
||||||
│ │ ├── index.tsx # Tasks screen
|
│ │ ├── index.tsx # Tasks screen
|
||||||
│ │ ├── calendar.tsx # Calendar screen
|
│ │ ├── calendar.tsx # Calendar screen
|
||||||
|
│ │ ├── stats.tsx # Stats screen
|
||||||
│ │ └── settings.tsx # Settings screen
|
│ │ └── settings.tsx # Settings screen
|
||||||
│ └── add-task.tsx # Add Task screen
|
│ ├── add-task.tsx # Add Task screen
|
||||||
|
│ ├── day-view.tsx # Calendar day detail
|
||||||
|
│ ├── task-detail.tsx # Task view/edit
|
||||||
|
│ └── subtask-detail.tsx # Subtask view/edit
|
||||||
├── src/
|
├── src/
|
||||||
│ ├── components/ # Reusable UI components
|
│ ├── components/ # Reusable UI components (30+)
|
||||||
│ │ ├── Header.tsx
|
│ │ ├── Header.tsx
|
||||||
│ │ ├── CategoryFilter.tsx
|
│ │ ├── CategoryFilter.tsx
|
||||||
│ │ ├── TaskList.tsx
|
│ │ ├── TaskList.tsx
|
||||||
│ │ ├── TaskItem.tsx
|
│ │ ├── TaskItem.tsx
|
||||||
│ │ ├── FloatingActionButton.tsx
|
│ │ ├── FloatingActionButton.tsx
|
||||||
│ │ ├── TabBarIcon.tsx
|
|
||||||
│ │ ├── CategorySelector.tsx
|
│ │ ├── CategorySelector.tsx
|
||||||
│ │ ├── TaskNameInput.tsx
|
│ │ ├── TaskNameInput.tsx
|
||||||
│ │ ├── SubtasksSection.tsx
|
│ │ ├── SubtasksSection.tsx
|
||||||
@@ -106,24 +188,102 @@ carry-your-live/
|
|||||||
│ │ ├── PrioritySelector.tsx
|
│ │ ├── PrioritySelector.tsx
|
||||||
│ │ ├── DescriptionInput.tsx
|
│ │ ├── DescriptionInput.tsx
|
||||||
│ │ ├── FormButtons.tsx
|
│ │ ├── FormButtons.tsx
|
||||||
│ │ └── ListItem.tsx
|
│ │ ├── ListItem.tsx
|
||||||
|
│ │ ├── AnalogClock.tsx
|
||||||
|
│ │ ├── AssigneeSelector.tsx
|
||||||
|
│ │ ├── CategoryEditorModal.tsx
|
||||||
|
│ │ ├── ColorPickerInput.tsx
|
||||||
|
│ │ ├── ColorWheel.tsx
|
||||||
|
│ │ ├── DateTimeInput.tsx
|
||||||
|
│ │ ├── ForgotPasswordModal.tsx
|
||||||
|
│ │ ├── FriendsModal.tsx
|
||||||
|
│ │ ├── LegalModal.tsx
|
||||||
|
│ │ ├── OptionPickerModal.tsx
|
||||||
|
│ │ ├── QuickAddBar.tsx
|
||||||
|
│ │ ├── ReminderSelector.tsx
|
||||||
|
│ │ ├── RepeatSelector.tsx
|
||||||
|
│ │ ├── ServerUrlModal.tsx
|
||||||
|
│ │ ├── SubtaskItem.tsx
|
||||||
|
│ │ ├── SyncModal.tsx
|
||||||
|
│ │ ├── SyncStatus.tsx
|
||||||
|
│ │ ├── TabBarIcon.tsx
|
||||||
|
│ │ ├── TaskDeleteModal.tsx
|
||||||
|
│ │ ├── TaskOverflowMenu.tsx
|
||||||
|
│ │ ├── UpdateNotifier.tsx
|
||||||
|
│ │ └── WheelTimePicker.tsx
|
||||||
|
│ ├── constants/
|
||||||
|
│ │ └── index.ts # Categories, priorities, colors, reminder options
|
||||||
│ ├── database/
|
│ ├── database/
|
||||||
│ │ ├── schema.ts # WatermelonDB schema
|
│ │ ├── schema.ts # WatermelonDB schema (v21)
|
||||||
│ │ ├── index.ts # Database instance + collections
|
│ │ ├── index.ts # Database instance + collections
|
||||||
│ │ └── sync.ts # Custom API sync adapter
|
│ │ ├── sync.ts # Custom API sync adapter (25KB)
|
||||||
│ ├── models/
|
│ │ ├── migrations.ts # Schema migrations
|
||||||
│ │ ├── Task.ts
|
│ │ ├── adapter.ts # Platform-specific adapters
|
||||||
│ │ ├── Category.ts
|
│ │ └── tombstones.ts # Deleted record tracking
|
||||||
│ │ └── Subtask.ts
|
|
||||||
│ ├── hooks/
|
│ ├── hooks/
|
||||||
│ │ ├── useDatabase.tsx # Database context & providers
|
│ │ ├── useDatabase.tsx # Database context & providers
|
||||||
│ │ └── useTasks.tsx # Task queries with reactive state
|
│ │ ├── useTasks.tsx # Task queries with reactive state
|
||||||
│ ├── constants/
|
│ │ ├── useCategories.tsx # Category queries
|
||||||
│ │ └── index.ts # Categories, priorities, colors
|
│ │ ├── useTasksByDate.tsx # Calendar date queries
|
||||||
│ └── types/
|
│ │ ├── useFriends.tsx # Friends state & actions
|
||||||
│ └── index.ts # TypeScript interfaces
|
│ │ ├── useAuth.tsx # Authentication state
|
||||||
|
│ │ └── useStats.tsx # Statistics computation
|
||||||
|
│ ├── models/
|
||||||
|
│ │ ├── Task.ts # Task model (assigneeId, repeat, reminders)
|
||||||
|
│ │ ├── Category.ts
|
||||||
|
│ │ ├── Subtask.ts
|
||||||
|
│ │ ├── RepeatProfile.ts
|
||||||
|
│ │ ├── Friendship.ts
|
||||||
|
│ │ └── Tombstone.ts
|
||||||
|
│ ├── services/
|
||||||
|
│ │ ├── api.ts # API client with auth
|
||||||
|
│ │ ├── auth.ts # Auth token management
|
||||||
|
│ │ ├── friends.ts # Friends API calls
|
||||||
|
│ │ ├── notifications.ts # Reminder scheduling (expo-notifications)
|
||||||
|
│ │ ├── repeat.ts # Repeat task generation
|
||||||
|
│ │ └── taskActions.ts # Task CRUD + sync operations
|
||||||
|
│ ├── theme/
|
||||||
|
│ │ ├── index.ts # Theme context, colors, spacing
|
||||||
|
│ │ └── theme.tsx # Accent color picker, settings sync
|
||||||
|
│ ├── types/
|
||||||
|
│ │ └── index.ts # TypeScript interfaces
|
||||||
|
│ └── utils/
|
||||||
|
│ ├── date.ts # Date formatting utilities
|
||||||
|
│ ├── format.ts # General formatting
|
||||||
|
│ └── validation.ts # Zod schemas
|
||||||
|
├── backend/ # Backend API (separate package)
|
||||||
|
│ ├── src/
|
||||||
|
│ │ ├── index.ts # Express app entry
|
||||||
|
│ │ ├── db/
|
||||||
|
│ │ │ ├── schema.ts # Drizzle schema (Postgres)
|
||||||
|
│ │ │ └── index.ts # DB connection
|
||||||
|
│ │ ├── routes/
|
||||||
|
│ │ │ ├── auth.ts # Register, login, me, forgot/reset password
|
||||||
|
│ │ │ ├── categories.ts # Category CRUD
|
||||||
|
│ │ │ ├── tasks.ts # Task CRUD + batch
|
||||||
|
│ │ │ ├── subtasks.ts # Subtask CRUD
|
||||||
|
│ │ │ ├── sync.ts # Pull/push sync endpoints
|
||||||
|
│ │ │ ├── users.ts # User profile & settings
|
||||||
|
│ │ │ ├── friends.ts # Friend requests, search, management
|
||||||
|
│ │ │ ├── repeatProfiles.ts# Repeat profile CRUD
|
||||||
|
│ │ │ └── pushNotifications.ts
|
||||||
|
│ │ ├── middleware/
|
||||||
|
│ │ │ ├── auth.ts # JWT verification
|
||||||
|
│ │ │ ├── errorHandler.ts
|
||||||
|
│ │ │ └── validation.ts # Zod validation middleware
|
||||||
|
│ │ ├── services/
|
||||||
|
│ │ └── utils/
|
||||||
|
│ ├── drizzle.config.ts
|
||||||
|
│ └── Dockerfile
|
||||||
|
├── electron/ # Desktop app entry
|
||||||
|
├── android/ # Native Android project
|
||||||
|
├── assets/ # Images, fonts
|
||||||
|
├── patches/ # patch-package fixes
|
||||||
|
└── plugins/ # Expo config plugins
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Data Models
|
## Data Models
|
||||||
|
|
||||||
### Task
|
### Task
|
||||||
@@ -135,8 +295,14 @@ carry-your-live/
|
|||||||
categoryId: string;
|
categoryId: string;
|
||||||
priority: 'none' | 'low' | 'medium' | 'high' | 'critical';
|
priority: 'none' | 'low' | 'medium' | 'high' | 'critical';
|
||||||
completed: boolean;
|
completed: boolean;
|
||||||
dueDate: number; // timestamp
|
dueDate: number; // timestamp (ms)
|
||||||
dueTime: string; // "HH:MM"
|
dueTime: string; // "HH:MM" (24h stored, 12h displayed)
|
||||||
|
allDay: boolean;
|
||||||
|
assigneeId: string | null;
|
||||||
|
repeatProfileId: string | null;
|
||||||
|
seriesId: string | null; // For repeating tasks
|
||||||
|
isTemplate: boolean; // Series template
|
||||||
|
reminderOffset: string | null; // e.g., "5m", "1h", "1d"
|
||||||
createdAt: Date;
|
createdAt: Date;
|
||||||
updatedAt: Date;
|
updatedAt: Date;
|
||||||
subtasks: Subtask[];
|
subtasks: Subtask[];
|
||||||
@@ -150,6 +316,8 @@ carry-your-live/
|
|||||||
name: string;
|
name: string;
|
||||||
color: '#HEX';
|
color: '#HEX';
|
||||||
order: number;
|
order: number;
|
||||||
|
createdAt: Date;
|
||||||
|
updatedAt: Date;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -158,14 +326,47 @@ carry-your-live/
|
|||||||
{
|
{
|
||||||
id: string;
|
id: string;
|
||||||
taskId: string;
|
taskId: string;
|
||||||
|
parentSubtaskId: string | null; // For nesting
|
||||||
title: string;
|
title: string;
|
||||||
completed: boolean;
|
completed: boolean;
|
||||||
order: number;
|
order: number;
|
||||||
|
assigneeId: string | null;
|
||||||
createdAt: Date;
|
createdAt: Date;
|
||||||
updatedAt: 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
|
## Default Categories
|
||||||
| Name | Color | Order |
|
| Name | Color | Order |
|
||||||
|------|-------|-------|
|
|------|-------|-------|
|
||||||
@@ -176,6 +377,8 @@ carry-your-live/
|
|||||||
| Health | #8E24AA (Purple) | 4 |
|
| Health | #8E24AA (Purple) | 4 |
|
||||||
| Finance | #FDD835 (Yellow) | 5 |
|
| Finance | #FDD835 (Yellow) | 5 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Priority Colors
|
## Priority Colors
|
||||||
| Priority | Color |
|
| Priority | Color |
|
||||||
|----------|-------|
|
|----------|-------|
|
||||||
@@ -185,6 +388,8 @@ carry-your-live/
|
|||||||
| High | #E53935 |
|
| High | #E53935 |
|
||||||
| Critical | #B71C1C |
|
| Critical | #B71C1C |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Getting Started
|
## Getting Started
|
||||||
|
|
||||||
### Prerequisites
|
### Prerequisites
|
||||||
@@ -192,15 +397,23 @@ carry-your-live/
|
|||||||
- npm or yarn
|
- npm or yarn
|
||||||
- Expo CLI (`npm install -g expo-cli`)
|
- Expo CLI (`npm install -g expo-cli`)
|
||||||
- iOS Simulator (Mac) / Android Studio for mobile testing
|
- iOS Simulator (Mac) / Android Studio for mobile testing
|
||||||
|
- PostgreSQL 16+ (or Docker)
|
||||||
|
|
||||||
### Installation
|
### Installation
|
||||||
```bash
|
```bash
|
||||||
cd carry-your-live
|
cd carry-your-live
|
||||||
npm install
|
npm install
|
||||||
|
|
||||||
|
cd ../backend
|
||||||
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
### Development
|
### Development
|
||||||
|
|
||||||
|
#### Frontend
|
||||||
```bash
|
```bash
|
||||||
|
cd carry-your-live
|
||||||
|
|
||||||
# Start Expo dev server
|
# Start Expo dev server
|
||||||
npx expo start
|
npx expo start
|
||||||
|
|
||||||
@@ -210,6 +423,37 @@ npx expo start --android
|
|||||||
npx expo start --web
|
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
|
### Building
|
||||||
|
|
||||||
#### EAS Build (cloud)
|
#### EAS Build (cloud)
|
||||||
@@ -225,18 +469,16 @@ eas build --platform ios
|
|||||||
eas build --platform android
|
eas build --platform android
|
||||||
eas build --platform web
|
eas build --platform web
|
||||||
```
|
```
|
||||||
Profiles are defined in `eas.json` (`development`, `preview`, `production`; production auto-increments version code).
|
Profiles defined in `eas.json` (`development`, `preview`, `production`; production auto-increments version code).
|
||||||
|
|
||||||
#### Gradle (local Android APK)
|
#### 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
|
```bash
|
||||||
cd carry-your-live/android
|
cd carry-your-live/android
|
||||||
|
|
||||||
# Debug APK (unsigned)
|
# Debug APK (unsigned)
|
||||||
./gradlew assembleDebug
|
./gradlew assembleDebug
|
||||||
|
|
||||||
# Release APK (currently signed with the debug keystore)
|
# Release APK (signed with debug keystore)
|
||||||
./gradlew assembleRelease
|
./gradlew assembleRelease
|
||||||
```
|
```
|
||||||
Output:
|
Output:
|
||||||
@@ -244,24 +486,21 @@ Output:
|
|||||||
android/app/build/outputs/apk/debug/app-debug.apk
|
android/app/build/outputs/apk/debug/app-debug.apk
|
||||||
android/app/build/outputs/apk/release/app-release.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)
|
## 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)
|
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`
|
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/`
|
3. **JS deps**: `npm ci` in `carry-your-live/`
|
||||||
4. **Debug keystore**: generates `carry-your-live/android/app/debug.keystore` with `keytool` (alias `androiddebugkey`, passwords `android`)
|
4. **Debug keystore**: generates `carry-your-live/android/app/debug.keystore` with `keytool`
|
||||||
5. **Build**: `./gradlew assembleRelease` in `carry-your-live/android/`
|
5. **Build**: `./gradlew assembleRelease` in `carry-your-live/android/`
|
||||||
6. **Upload**: the APK is saved as the `carry-your-live-release` artifact (downloadable from the run's artifacts page)
|
6. **Upload**: APK saved as `carry-your-live-release` artifact
|
||||||
|
|
||||||
To run the build locally exactly as CI does:
|
|
||||||
|
|
||||||
|
To run locally exactly as CI does:
|
||||||
```bash
|
```bash
|
||||||
keytool -genkeypair -v \
|
keytool -genkeypair -v \
|
||||||
-keystore carry-your-live/android/app/debug.keystore \
|
-keystore carry-your-live/android/app/debug.keystore \
|
||||||
@@ -271,48 +510,119 @@ keytool -genkeypair -v \
|
|||||||
cd carry-your-live/android && ./gradlew assembleRelease
|
cd carry-your-live/android && ./gradlew assembleRelease
|
||||||
```
|
```
|
||||||
|
|
||||||
## Sync API Specification
|
---
|
||||||
|
|
||||||
The app expects a custom API at `http://localhost:3000/api` (configurable in `src/database/sync.ts`):
|
## Backend API Specification
|
||||||
|
|
||||||
### Pull Changes
|
Server runs at `http://localhost:3000/api` (configurable in `src/services/api.ts` and `src/database/sync.ts`):
|
||||||
```
|
|
||||||
GET /sync?since={timestamp}
|
|
||||||
```
|
|
||||||
Response:
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"categories": [{ "id", "name", "color", "order", "createdAt", "updatedAt" }],
|
|
||||||
"tasks": [{ "id", "title", "description", "categoryId", "priority", "completed", "dueDate", "dueTime", "createdAt", "updatedAt" }],
|
|
||||||
"subtasks": [{ "id", "taskId", "title", "completed", "order", "createdAt", "updatedAt" }],
|
|
||||||
"timestamp": 1234567890
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Push Changes
|
### Authentication
|
||||||
```
|
- `POST /api/auth/register` - Register new user
|
||||||
POST /sync/push
|
- `POST /api/auth/login` - Login (returns access + refresh tokens)
|
||||||
```
|
- `POST /api/auth/refresh` - Refresh access token
|
||||||
Body:
|
- `POST /api/auth/forgot-password` - Request password reset
|
||||||
```json
|
- `POST /api/auth/reset-password` - Reset password with token
|
||||||
{
|
- `GET /api/auth/me` - Get current user
|
||||||
"changes": {
|
|
||||||
"categories": [...],
|
### Categories
|
||||||
"tasks": [...],
|
- `GET /api/categories` - List categories
|
||||||
"subtasks": [...]
|
- `POST /api/categories` - Create category
|
||||||
},
|
- `PATCH /api/categories/:id` - Update category
|
||||||
"lastPulledAt": 1234567890
|
- `DELETE /api/categories/:id` - Delete category
|
||||||
}
|
|
||||||
```
|
### Tasks
|
||||||
|
- `GET /api/tasks` - List tasks (with filters: category, completed, due date range, assignee)
|
||||||
|
- `GET /api/tasks/:id` - Get task with subtasks
|
||||||
|
- `POST /api/tasks` - Create task
|
||||||
|
- `PATCH /api/tasks/:id` - Update task
|
||||||
|
- `DELETE /api/tasks/:id` - Delete task (scopes: this/future/all for repeating)
|
||||||
|
- `POST /api/tasks/batch` - Batch operations
|
||||||
|
|
||||||
|
### Subtasks
|
||||||
|
- `GET /api/subtasks/task/:taskId` - List subtasks for task
|
||||||
|
- `POST /api/subtasks/task/:taskId` - Create subtask
|
||||||
|
- `PATCH /api/subtasks/:id` - Update subtask
|
||||||
|
- `DELETE /api/subtasks/:id` - Delete subtask
|
||||||
|
|
||||||
|
### Repeat Profiles
|
||||||
|
- `GET /api/repeat-profiles` - List repeat profiles
|
||||||
|
- `POST /api/repeat-profiles` - Create repeat profile
|
||||||
|
- `PATCH /api/repeat-profiles/:id` - Update repeat profile
|
||||||
|
- `DELETE /api/repeat-profiles/:id` - Delete repeat profile
|
||||||
|
|
||||||
|
### Users
|
||||||
|
- `GET /api/users/me` - Get user with settings
|
||||||
|
- `PATCH /api/users/me/settings` - Update settings (darkMode, defaultCategoryId, sortOrder, etc.)
|
||||||
|
- `GET /api/users/search` - Search users (for friends)
|
||||||
|
|
||||||
|
### Friends
|
||||||
|
- `GET /api/friends` - List accepted friends
|
||||||
|
- `GET /api/friends/requests` - List pending requests (incoming/outgoing)
|
||||||
|
- `POST /api/friends/request` - Send friend request
|
||||||
|
- `PATCH /api/friends/request/:id/accept` - Accept request
|
||||||
|
- `PATCH /api/friends/request/:id/decline` - Decline request
|
||||||
|
- `DELETE /api/friends/:id` - Remove friend
|
||||||
|
|
||||||
|
### Sync (Offline-first)
|
||||||
|
- `GET /api/sync?since=<timestamp>` - Pull changes since timestamp
|
||||||
|
- `POST /api/sync/push` - Push local changes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Sync Protocol
|
||||||
|
|
||||||
|
The sync endpoint uses a cursor-based approach with tombstones:
|
||||||
|
|
||||||
|
1. **Pull**: Client sends `since` timestamp, server returns all changes since then
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"categories": [...],
|
||||||
|
"tasks": [...],
|
||||||
|
"subtasks": [...],
|
||||||
|
"repeatProfiles": [...],
|
||||||
|
"friendships": [...],
|
||||||
|
"tombstones": [...],
|
||||||
|
"timestamp": 1234567890
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Push**: Client sends batched changes with `lastPulledAt`
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"changes": {
|
||||||
|
"categories": [...],
|
||||||
|
"tasks": [...],
|
||||||
|
"subtasks": [...],
|
||||||
|
"repeatProfiles": [...],
|
||||||
|
"friendships": [...]
|
||||||
|
},
|
||||||
|
"tombstones": [...],
|
||||||
|
"lastPulledAt": 1234567890
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Conflict Resolution**: Last-write-wins based on `updatedAt` (customizable in `src/database/sync.ts`)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
### Environment Variables
|
### Frontend Environment Variables
|
||||||
Create `.env` file:
|
Create `.env` file in `carry-your-live/`:
|
||||||
```
|
```
|
||||||
EXPO_PUBLIC_API_URL=http://your-api-url/api
|
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
|
### App Config
|
||||||
Modify `app.json` for:
|
Modify `app.json` for:
|
||||||
- App name, slug, version
|
- App name, slug, version
|
||||||
@@ -320,10 +630,12 @@ Modify `app.json` for:
|
|||||||
- Permissions (notifications, etc.)
|
- Permissions (notifications, etc.)
|
||||||
- Orientation, theme
|
- Orientation, theme
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Visual Style Guide
|
## Visual Style Guide
|
||||||
|
|
||||||
- **Background**: White (#FFFFFF)
|
- **Background**: White (#FFFFFF) / Dark mode (planned)
|
||||||
- **Primary Accent**: #E53935 (Pink/Red)
|
- **Primary Accent**: #E53935 (Pink/Red) - customizable
|
||||||
- **Typography**: Black (#212121) primary, #757575 secondary, #9E9E9E tertiary
|
- **Typography**: Black (#212121) primary, #757575 secondary, #9E9E9E tertiary
|
||||||
- **Borders**: Thin (#E0E0E0), selected #E53935
|
- **Borders**: Thin (#E0E0E0), selected #E53935
|
||||||
- **Radius**: 16-20px for cards/buttons/inputs
|
- **Radius**: 16-20px for cards/buttons/inputs
|
||||||
@@ -331,11 +643,13 @@ Modify `app.json` for:
|
|||||||
- **Shadows**: Minimal (elevation 1-3)
|
- **Shadows**: Minimal (elevation 1-3)
|
||||||
- **Animations**: 150-250ms, cubic easing
|
- **Animations**: 150-250ms, cubic easing
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Offline-First Architecture
|
## Offline-First Architecture
|
||||||
|
|
||||||
```
|
```
|
||||||
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
|
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
|
||||||
│ Expo App │────▶│ WatermelonDB │────▶│ Your API │
|
│ Expo App │────▶│ WatermelonDB │────▶│ Backend │
|
||||||
│ (iOS/Android│ │ (SQLite) │ │ (Postgres) │
|
│ (iOS/Android│ │ (SQLite) │ │ (Postgres) │
|
||||||
│ Web) │◀───▶│ + Sync │◀───▶│ │
|
│ Web) │◀───▶│ + Sync │◀───▶│ │
|
||||||
└─────────────┘ └──────────────┘ └─────────────┘
|
└─────────────┘ └──────────────┘ └─────────────┘
|
||||||
@@ -345,6 +659,79 @@ Modify `app.json` for:
|
|||||||
2. Reactive queries update UI instantly
|
2. Reactive queries update UI instantly
|
||||||
3. Background sync pushes/pulls changes
|
3. Background sync pushes/pulls changes
|
||||||
4. Conflict resolution: last-write-wins (customizable)
|
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
|
## Contributing
|
||||||
|
|
||||||
@@ -353,6 +740,9 @@ Modify `app.json` for:
|
|||||||
3. Write components with React Hook Form + Zod
|
3. Write components with React Hook Form + Zod
|
||||||
4. Use WatermelonDB decorators for models
|
4. Use WatermelonDB decorators for models
|
||||||
5. Test offline scenarios
|
5. Test offline scenarios
|
||||||
|
6. Run `npm run lint` and `npm run typecheck` before committing
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
@@ -41,4 +41,3 @@ yarn-error.*
|
|||||||
|
|
||||||
# generated native folders
|
# generated native folders
|
||||||
/ios
|
/ios
|
||||||
/android
|
|
||||||
|
|||||||
@@ -0,0 +1,19 @@
|
|||||||
|
# OSX
|
||||||
|
#
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Android/IntelliJ
|
||||||
|
#
|
||||||
|
build/
|
||||||
|
.idea
|
||||||
|
.gradle
|
||||||
|
local.properties
|
||||||
|
*.iml
|
||||||
|
*.hprof
|
||||||
|
.cxx/
|
||||||
|
|
||||||
|
# generated inline modules
|
||||||
|
app/src/main/java/inline/
|
||||||
|
|
||||||
|
# Bundle artifacts
|
||||||
|
*.jsbundle
|
||||||
@@ -0,0 +1,194 @@
|
|||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
# Add project specific ProGuard rules here.
|
||||||
|
# By default, the flags in this file are appended to flags specified
|
||||||
|
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
|
||||||
|
# You can edit the include path and order by changing the proguardFiles
|
||||||
|
# directive in build.gradle.
|
||||||
|
#
|
||||||
|
# For more details, see
|
||||||
|
# http://developer.android.com/guide/developing/tools/proguard.html
|
||||||
|
|
||||||
|
# react-native-reanimated
|
||||||
|
-keep class com.swmansion.reanimated.** { *; }
|
||||||
|
-keep class com.facebook.react.turbomodule.** { *; }
|
||||||
|
|
||||||
|
# Add any project specific keep options here:
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
xmlns:tools="http://schemas.android.com/tools">
|
||||||
|
|
||||||
|
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
|
||||||
|
|
||||||
|
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
|
||||||
|
</manifest>
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
xmlns:tools="http://schemas.android.com/tools">
|
||||||
|
|
||||||
|
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
|
||||||
|
|
||||||
|
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
|
||||||
|
</manifest>
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
|
||||||
|
<uses-permission android:name="android.permission.INTERNET"/>
|
||||||
|
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" tools:replace="android:maxSdkVersion"/>
|
||||||
|
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
|
||||||
|
<uses-permission android:name="android.permission.VIBRATE"/>
|
||||||
|
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" tools:replace="android:maxSdkVersion"/>
|
||||||
|
<queries>
|
||||||
|
<intent>
|
||||||
|
<action android:name="android.intent.action.VIEW"/>
|
||||||
|
<category android:name="android.intent.category.BROWSABLE"/>
|
||||||
|
<data android:scheme="https"/>
|
||||||
|
</intent>
|
||||||
|
</queries>
|
||||||
|
<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false" android:usesCleartextTraffic="true">
|
||||||
|
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/notification_icon_color"/>
|
||||||
|
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon"/>
|
||||||
|
<meta-data android:name="expo.modules.notifications.default_notification_color" android:resource="@color/notification_icon_color"/>
|
||||||
|
<meta-data android:name="expo.modules.notifications.default_notification_icon" android:resource="@drawable/notification_icon"/>
|
||||||
|
<meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
|
||||||
|
<meta-data android:name="expo.modules.updates.ENABLE_BSDIFF_PATCH_SUPPORT" android:value="true"/>
|
||||||
|
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
|
||||||
|
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
|
||||||
|
<activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode|smallestScreenSize|assetsPaths" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
|
||||||
|
<intent-filter>
|
||||||
|
<action android:name="android.intent.action.MAIN"/>
|
||||||
|
<category android:name="android.intent.category.LAUNCHER"/>
|
||||||
|
</intent-filter>
|
||||||
|
<intent-filter>
|
||||||
|
<action android:name="android.intent.action.VIEW"/>
|
||||||
|
<category android:name="android.intent.category.DEFAULT"/>
|
||||||
|
<category android:name="android.intent.category.BROWSABLE"/>
|
||||||
|
<data android:scheme="exp+carry-your-live"/>
|
||||||
|
</intent-filter>
|
||||||
|
</activity>
|
||||||
|
</application>
|
||||||
|
</manifest>
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
package com.anonymous.carryyourlive
|
||||||
|
|
||||||
|
import android.os.Build
|
||||||
|
import android.os.Bundle
|
||||||
|
|
||||||
|
import com.facebook.react.ReactActivity
|
||||||
|
import com.facebook.react.ReactActivityDelegate
|
||||||
|
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
|
||||||
|
import com.facebook.react.defaults.DefaultReactActivityDelegate
|
||||||
|
|
||||||
|
import expo.modules.ReactActivityDelegateWrapper
|
||||||
|
|
||||||
|
class MainActivity : ReactActivity() {
|
||||||
|
override fun onCreate(savedInstanceState: Bundle?) {
|
||||||
|
// Set the theme to AppTheme BEFORE onCreate to support
|
||||||
|
// coloring the background, status bar, and navigation bar.
|
||||||
|
// This is required for expo-splash-screen.
|
||||||
|
setTheme(R.style.AppTheme);
|
||||||
|
super.onCreate(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the name of the main component registered from JavaScript. This is used to schedule
|
||||||
|
* rendering of the component.
|
||||||
|
*/
|
||||||
|
override fun getMainComponentName(): String = "main"
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
|
||||||
|
* which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
|
||||||
|
*/
|
||||||
|
override fun createReactActivityDelegate(): ReactActivityDelegate {
|
||||||
|
return ReactActivityDelegateWrapper(
|
||||||
|
this,
|
||||||
|
BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
|
||||||
|
object : DefaultReactActivityDelegate(
|
||||||
|
this,
|
||||||
|
mainComponentName,
|
||||||
|
fabricEnabled
|
||||||
|
){})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Align the back button behavior with Android S
|
||||||
|
* where moving root activities to background instead of finishing activities.
|
||||||
|
* @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
|
||||||
|
*/
|
||||||
|
override fun invokeDefaultOnBackPressed() {
|
||||||
|
if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
|
||||||
|
if (!moveTaskToBack(false)) {
|
||||||
|
// For non-root activities, use the default implementation to finish them.
|
||||||
|
super.invokeDefaultOnBackPressed()
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use the default back button implementation on Android S
|
||||||
|
// because it's doing more than [Activity.moveTaskToBack] in fact.
|
||||||
|
super.invokeDefaultOnBackPressed()
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
package com.anonymous.carryyourlive
|
||||||
|
|
||||||
|
import android.app.Application
|
||||||
|
import android.content.res.Configuration
|
||||||
|
|
||||||
|
import com.facebook.react.PackageList
|
||||||
|
import com.facebook.react.ReactApplication
|
||||||
|
import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
|
||||||
|
import com.facebook.react.ReactPackage
|
||||||
|
import com.facebook.react.ReactHost
|
||||||
|
import com.facebook.react.common.ReleaseLevel
|
||||||
|
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
|
||||||
|
|
||||||
|
import expo.modules.ApplicationLifecycleDispatcher
|
||||||
|
import expo.modules.ExpoReactHostFactory
|
||||||
|
|
||||||
|
class MainApplication : Application(), ReactApplication {
|
||||||
|
|
||||||
|
override val reactHost: ReactHost by lazy {
|
||||||
|
ExpoReactHostFactory.getDefaultReactHost(
|
||||||
|
context = applicationContext,
|
||||||
|
packageList =
|
||||||
|
PackageList(this).packages.apply {
|
||||||
|
// Packages that cannot be autolinked yet can be added manually here, for example:
|
||||||
|
// add(MyReactNativePackage())
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun onCreate() {
|
||||||
|
super.onCreate()
|
||||||
|
DefaultNewArchitectureEntryPoint.releaseLevel = try {
|
||||||
|
ReleaseLevel.valueOf(BuildConfig.REACT_NATIVE_RELEASE_LEVEL.uppercase())
|
||||||
|
} catch (e: IllegalArgumentException) {
|
||||||
|
ReleaseLevel.STABLE
|
||||||
|
}
|
||||||
|
loadReactNative(this)
|
||||||
|
ApplicationLifecycleDispatcher.onApplicationCreate(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
override fun onConfigurationChanged(newConfig: Configuration) {
|
||||||
|
super.onConfigurationChanged(newConfig)
|
||||||
|
ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 1010 B |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 584 B |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 65 KiB |
@@ -0,0 +1,6 @@
|
|||||||
|
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
|
<item android:drawable="@color/splashscreen_background"/>
|
||||||
|
<item>
|
||||||
|
<bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
|
||||||
|
</item>
|
||||||
|
</layer-list>
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Copyright (C) 2014 The Android Open Source Project
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
-->
|
||||||
|
<inset xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
|
||||||
|
android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
|
||||||
|
android:insetTop="@dimen/abc_edit_text_inset_top_material"
|
||||||
|
android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
|
||||||
|
>
|
||||||
|
|
||||||
|
<selector>
|
||||||
|
<!--
|
||||||
|
This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
|
||||||
|
The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
|
||||||
|
NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
|
||||||
|
|
||||||
|
<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
|
||||||
|
|
||||||
|
For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
|
||||||
|
-->
|
||||||
|
<item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
|
||||||
|
<item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
|
||||||
|
</selector>
|
||||||
|
|
||||||
|
</inset>
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
|
<background android:drawable="@mipmap/ic_launcher_background"/>
|
||||||
|
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
|
||||||
|
<monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
|
||||||
|
</adaptive-icon>
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
|
<background android:drawable="@mipmap/ic_launcher_background"/>
|
||||||
|
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
|
||||||
|
<monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
|
||||||
|
</adaptive-icon>
|
||||||
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 31 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
<resources>
|
||||||
|
<color name="appBackground">#121212</color>
|
||||||
|
</resources>
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
<resources>
|
||||||
|
<color name="splashscreen_background">#FFFFFF</color>
|
||||||
|
<color name="iconBackground">#E6F4FE</color>
|
||||||
|
<color name="colorPrimary">#023c69</color>
|
||||||
|
<color name="notification_icon_color">#1E88E5</color>
|
||||||
|
<color name="appBackground">#121212</color>
|
||||||
|
</resources>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
<resources>
|
||||||
|
<string name="app_name">carry-your-live</string>
|
||||||
|
</resources>
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
<resources xmlns:tools="http://schemas.android.com/tools">
|
||||||
|
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
|
||||||
|
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
|
||||||
|
<item name="colorPrimary">@color/colorPrimary</item>
|
||||||
|
<item name="android:statusBarColor">@android:color/transparent</item>
|
||||||
|
<item name="android:navigationBarColor">@android:color/transparent</item>
|
||||||
|
<item name="android:windowBackground">@color/appBackground</item>
|
||||||
|
</style>
|
||||||
|
<style name="Theme.App.SplashScreen" parent="AppTheme">
|
||||||
|
<item name="android:windowBackground">@drawable/splashscreen_logo</item>
|
||||||
|
</style>
|
||||||
|
</resources>
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
// Top-level build file where you can add configuration options common to all sub-projects/modules.
|
||||||
|
|
||||||
|
buildscript {
|
||||||
|
repositories {
|
||||||
|
google()
|
||||||
|
mavenCentral()
|
||||||
|
}
|
||||||
|
dependencies {
|
||||||
|
classpath('com.android.tools.build:gradle')
|
||||||
|
classpath('com.facebook.react:react-native-gradle-plugin')
|
||||||
|
classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
allprojects {
|
||||||
|
repositories {
|
||||||
|
google()
|
||||||
|
mavenCentral()
|
||||||
|
maven { url = 'https://www.jitpack.io' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
apply plugin: "expo-root-project"
|
||||||
|
apply plugin: "com.facebook.react.rootproject"
|
||||||
|
|
||||||
|
subprojects {
|
||||||
|
plugins.withId("com.android.library") {
|
||||||
|
extensions.configure(com.android.build.api.dsl.LibraryExtension) {
|
||||||
|
ndkVersion = rootProject.ext.ndkVersion
|
||||||
|
}
|
||||||
|
}
|
||||||
|
plugins.withId("com.android.application") {
|
||||||
|
extensions.configure(com.android.build.api.dsl.ApplicationExtension) {
|
||||||
|
ndkVersion = rootProject.ext.ndkVersion
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
# Project-wide Gradle settings.
|
||||||
|
|
||||||
|
# IDE (e.g. Android Studio) users:
|
||||||
|
# Gradle settings configured through the IDE *will override*
|
||||||
|
# any settings specified in this file.
|
||||||
|
|
||||||
|
# For more details on how to configure your build environment visit
|
||||||
|
# http://www.gradle.org/docs/current/userguide/build_environment.html
|
||||||
|
|
||||||
|
# Specifies the JVM arguments used for the daemon process.
|
||||||
|
# The setting is particularly useful for tweaking memory settings.
|
||||||
|
# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
|
||||||
|
org.gradle.jvmargs=-Xmx1536m -XX:MaxMetaspaceSize=1024m --add-opens=java.base/java.lang=ALL-UNNAMED --add-opens=java.base/java.io=ALL-UNNAMED
|
||||||
|
org.gradle.workers.max=2
|
||||||
|
|
||||||
|
# When configured, Gradle will run in incubating parallel mode.
|
||||||
|
# This option should only be used with decoupled projects. More details, visit
|
||||||
|
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
|
||||||
|
org.gradle.parallel=true
|
||||||
|
|
||||||
|
# AndroidX package structure to make it clearer which packages are bundled with the
|
||||||
|
# Android operating system, and which packages are packaged with your app's APK
|
||||||
|
# https://developer.android.com/topic/libraries/support-library/androidx-rn
|
||||||
|
android.useAndroidX=true
|
||||||
|
|
||||||
|
# Enable AAPT2 PNG crunching
|
||||||
|
android.enablePngCrunchInReleaseBuilds=true
|
||||||
|
|
||||||
|
# Use this property to specify which architecture you want to build.
|
||||||
|
# You can also override it from the CLI using
|
||||||
|
# ./gradlew <task> -PreactNativeArchitectures=x86_64
|
||||||
|
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
|
||||||
|
|
||||||
|
# Use this property to enable support to the new architecture.
|
||||||
|
# This will allow you to use TurboModules and the Fabric render in
|
||||||
|
# your application. You should enable this flag either if you want
|
||||||
|
# to write custom TurboModules/Fabric components OR use libraries that
|
||||||
|
# are providing them. React Native 0.82+ always runs with the New
|
||||||
|
# Architecture, so this flag is no longer honored and was removed.
|
||||||
|
|
||||||
|
# Use this property to enable or disable the Hermes JS engine.
|
||||||
|
# If set to false, you will be using JSC instead.
|
||||||
|
hermesEnabled=true
|
||||||
|
|
||||||
|
# Enable edge-to-edge display support.
|
||||||
|
# This allows your app to draw behind system bars for an immersive UI.
|
||||||
|
# Note: Only works with ReactActivity and should not be used with custom Activity.
|
||||||
|
edgeToEdgeEnabled=true
|
||||||
|
|
||||||
|
# Enable GIF support in React Native images (~200 B increase)
|
||||||
|
expo.gif.enabled=true
|
||||||
|
# Enable webp support in React Native images (~85 KB increase)
|
||||||
|
expo.webp.enabled=true
|
||||||
|
# Enable animated webp support (~3.4 MB increase)
|
||||||
|
# Disabled by default because iOS doesn't support animated webp
|
||||||
|
expo.webp.animated=false
|
||||||
|
|
||||||
|
# Enable network inspector
|
||||||
|
EX_DEV_CLIENT_NETWORK_INSPECTOR=true
|
||||||
|
|
||||||
|
# Use legacy packaging to compress native libraries in the resulting APK.
|
||||||
|
expo.useLegacyPackaging=false
|
||||||
|
|
||||||
|
expo.inlineModules.watchedDirectories=[]
|
||||||
|
# Enabled parallel sync for Gradle 9.4+
|
||||||
|
org.gradle.tooling.parallel=true
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
#This file is generated by updateDaemonJvm
|
||||||
|
toolchainVersion=17
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
distributionBase=GRADLE_USER_HOME
|
||||||
|
distributionPath=wrapper/dists
|
||||||
|
distributionUrl=https\://services.gradle.org/distributions/gradle-9.3.1-bin.zip
|
||||||
|
networkTimeout=10000
|
||||||
|
validateDistributionUrl=true
|
||||||
|
zipStoreBase=GRADLE_USER_HOME
|
||||||
|
zipStorePath=wrapper/dists
|
||||||
@@ -0,0 +1,248 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
#
|
||||||
|
# Copyright © 2015 the original authors.
|
||||||
|
#
|
||||||
|
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
# you may not use this file except in compliance with the License.
|
||||||
|
# You may obtain a copy of the License at
|
||||||
|
#
|
||||||
|
# https://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
#
|
||||||
|
# Unless required by applicable law or agreed to in writing, software
|
||||||
|
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
# See the License for the specific language governing permissions and
|
||||||
|
# limitations under the License.
|
||||||
|
#
|
||||||
|
# SPDX-License-Identifier: Apache-2.0
|
||||||
|
#
|
||||||
|
|
||||||
|
##############################################################################
|
||||||
|
#
|
||||||
|
# Gradle start up script for POSIX generated by Gradle.
|
||||||
|
#
|
||||||
|
# Important for running:
|
||||||
|
#
|
||||||
|
# (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
|
||||||
|
# noncompliant, but you have some other compliant shell such as ksh or
|
||||||
|
# bash, then to run this script, type that shell name before the whole
|
||||||
|
# command line, like:
|
||||||
|
#
|
||||||
|
# ksh Gradle
|
||||||
|
#
|
||||||
|
# Busybox and similar reduced shells will NOT work, because this script
|
||||||
|
# requires all of these POSIX shell features:
|
||||||
|
# * functions;
|
||||||
|
# * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
|
||||||
|
# «${var#prefix}», «${var%suffix}», and «$( cmd )»;
|
||||||
|
# * compound commands having a testable exit status, especially «case»;
|
||||||
|
# * various built-in commands including «command», «set», and «ulimit».
|
||||||
|
#
|
||||||
|
# Important for patching:
|
||||||
|
#
|
||||||
|
# (2) This script targets any POSIX shell, so it avoids extensions provided
|
||||||
|
# by Bash, Ksh, etc; in particular arrays are avoided.
|
||||||
|
#
|
||||||
|
# The "traditional" practice of packing multiple parameters into a
|
||||||
|
# space-separated string is a well documented source of bugs and security
|
||||||
|
# problems, so this is (mostly) avoided, by progressively accumulating
|
||||||
|
# options in "$@", and eventually passing that to Java.
|
||||||
|
#
|
||||||
|
# Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
|
||||||
|
# and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
|
||||||
|
# see the in-line comments for details.
|
||||||
|
#
|
||||||
|
# There are tweaks for specific operating systems such as AIX, CygWin,
|
||||||
|
# Darwin, MinGW, and NonStop.
|
||||||
|
#
|
||||||
|
# (3) This script is generated from the Groovy template
|
||||||
|
# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
|
||||||
|
# within the Gradle project.
|
||||||
|
#
|
||||||
|
# You can find Gradle at https://github.com/gradle/gradle/.
|
||||||
|
#
|
||||||
|
##############################################################################
|
||||||
|
|
||||||
|
# Attempt to set APP_HOME
|
||||||
|
|
||||||
|
# Resolve links: $0 may be a link
|
||||||
|
app_path=$0
|
||||||
|
|
||||||
|
# Need this for daisy-chained symlinks.
|
||||||
|
while
|
||||||
|
APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
|
||||||
|
[ -h "$app_path" ]
|
||||||
|
do
|
||||||
|
ls=$( ls -ld "$app_path" )
|
||||||
|
link=${ls#*' -> '}
|
||||||
|
case $link in #(
|
||||||
|
/*) app_path=$link ;; #(
|
||||||
|
*) app_path=$APP_HOME$link ;;
|
||||||
|
esac
|
||||||
|
done
|
||||||
|
|
||||||
|
# This is normally unused
|
||||||
|
# shellcheck disable=SC2034
|
||||||
|
APP_BASE_NAME=${0##*/}
|
||||||
|
# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
|
||||||
|
APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
|
||||||
|
|
||||||
|
# Use the maximum available, or set MAX_FD != -1 to use that value.
|
||||||
|
MAX_FD=maximum
|
||||||
|
|
||||||
|
warn () {
|
||||||
|
echo "$*"
|
||||||
|
} >&2
|
||||||
|
|
||||||
|
die () {
|
||||||
|
echo
|
||||||
|
echo "$*"
|
||||||
|
echo
|
||||||
|
exit 1
|
||||||
|
} >&2
|
||||||
|
|
||||||
|
# OS specific support (must be 'true' or 'false').
|
||||||
|
cygwin=false
|
||||||
|
msys=false
|
||||||
|
darwin=false
|
||||||
|
nonstop=false
|
||||||
|
case "$( uname )" in #(
|
||||||
|
CYGWIN* ) cygwin=true ;; #(
|
||||||
|
Darwin* ) darwin=true ;; #(
|
||||||
|
MSYS* | MINGW* ) msys=true ;; #(
|
||||||
|
NONSTOP* ) nonstop=true ;;
|
||||||
|
esac
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Determine the Java command to use to start the JVM.
|
||||||
|
if [ -n "$JAVA_HOME" ] ; then
|
||||||
|
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
|
||||||
|
# IBM's JDK on AIX uses strange locations for the executables
|
||||||
|
JAVACMD=$JAVA_HOME/jre/sh/java
|
||||||
|
else
|
||||||
|
JAVACMD=$JAVA_HOME/bin/java
|
||||||
|
fi
|
||||||
|
if [ ! -x "$JAVACMD" ] ; then
|
||||||
|
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
|
||||||
|
|
||||||
|
Please set the JAVA_HOME variable in your environment to match the
|
||||||
|
location of your Java installation."
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
JAVACMD=java
|
||||||
|
if ! command -v java >/dev/null 2>&1
|
||||||
|
then
|
||||||
|
die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
|
||||||
|
|
||||||
|
Please set the JAVA_HOME variable in your environment to match the
|
||||||
|
location of your Java installation."
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Increase the maximum file descriptors if we can.
|
||||||
|
if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
|
||||||
|
case $MAX_FD in #(
|
||||||
|
max*)
|
||||||
|
# In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
|
||||||
|
# shellcheck disable=SC2039,SC3045
|
||||||
|
MAX_FD=$( ulimit -H -n ) ||
|
||||||
|
warn "Could not query maximum file descriptor limit"
|
||||||
|
esac
|
||||||
|
case $MAX_FD in #(
|
||||||
|
'' | soft) :;; #(
|
||||||
|
*)
|
||||||
|
# In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
|
||||||
|
# shellcheck disable=SC2039,SC3045
|
||||||
|
ulimit -n "$MAX_FD" ||
|
||||||
|
warn "Could not set maximum file descriptor limit to $MAX_FD"
|
||||||
|
esac
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Collect all arguments for the java command, stacking in reverse order:
|
||||||
|
# * args from the command line
|
||||||
|
# * the main class name
|
||||||
|
# * -classpath
|
||||||
|
# * -D...appname settings
|
||||||
|
# * --module-path (only if needed)
|
||||||
|
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
|
||||||
|
|
||||||
|
# For Cygwin or MSYS, switch paths to Windows format before running java
|
||||||
|
if "$cygwin" || "$msys" ; then
|
||||||
|
APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
|
||||||
|
|
||||||
|
JAVACMD=$( cygpath --unix "$JAVACMD" )
|
||||||
|
|
||||||
|
# Now convert the arguments - kludge to limit ourselves to /bin/sh
|
||||||
|
for arg do
|
||||||
|
if
|
||||||
|
case $arg in #(
|
||||||
|
-*) false ;; # don't mess with options #(
|
||||||
|
/?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
|
||||||
|
[ -e "$t" ] ;; #(
|
||||||
|
*) false ;;
|
||||||
|
esac
|
||||||
|
then
|
||||||
|
arg=$( cygpath --path --ignore --mixed "$arg" )
|
||||||
|
fi
|
||||||
|
# Roll the args list around exactly as many times as the number of
|
||||||
|
# args, so each arg winds up back in the position where it started, but
|
||||||
|
# possibly modified.
|
||||||
|
#
|
||||||
|
# NB: a `for` loop captures its iteration list before it begins, so
|
||||||
|
# changing the positional parameters here affects neither the number of
|
||||||
|
# iterations, nor the values presented in `arg`.
|
||||||
|
shift # remove old arg
|
||||||
|
set -- "$@" "$arg" # push replacement arg
|
||||||
|
done
|
||||||
|
fi
|
||||||
|
|
||||||
|
|
||||||
|
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
|
||||||
|
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
|
||||||
|
|
||||||
|
# Collect all arguments for the java command:
|
||||||
|
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
|
||||||
|
# and any embedded shellness will be escaped.
|
||||||
|
# * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
|
||||||
|
# treated as '${Hostname}' itself on the command line.
|
||||||
|
|
||||||
|
set -- \
|
||||||
|
"-Dorg.gradle.appname=$APP_BASE_NAME" \
|
||||||
|
-jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
|
||||||
|
"$@"
|
||||||
|
|
||||||
|
# Stop when "xargs" is not available.
|
||||||
|
if ! command -v xargs >/dev/null 2>&1
|
||||||
|
then
|
||||||
|
die "xargs is not available"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Use "xargs" to parse quoted args.
|
||||||
|
#
|
||||||
|
# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
|
||||||
|
#
|
||||||
|
# In Bash we could simply go:
|
||||||
|
#
|
||||||
|
# readarray ARGS < <( xargs -n1 <<<"$var" ) &&
|
||||||
|
# set -- "${ARGS[@]}" "$@"
|
||||||
|
#
|
||||||
|
# but POSIX shell has neither arrays nor command substitution, so instead we
|
||||||
|
# post-process each arg (as a line of input to sed) to backslash-escape any
|
||||||
|
# character that might be a shell metacharacter, then use eval to reverse
|
||||||
|
# that process (while maintaining the separation between arguments), and wrap
|
||||||
|
# the whole thing up as a single "set" statement.
|
||||||
|
#
|
||||||
|
# This will of course break if any of these variables contains a newline or
|
||||||
|
# an unmatched quote.
|
||||||
|
#
|
||||||
|
|
||||||
|
eval "set -- $(
|
||||||
|
printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
|
||||||
|
xargs -n1 |
|
||||||
|
sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
|
||||||
|
tr '\n' ' '
|
||||||
|
)" '"$@"'
|
||||||
|
|
||||||
|
exec "$JAVACMD" "$@"
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
@rem
|
||||||
|
@rem Copyright 2015 the original author or authors.
|
||||||
|
@rem
|
||||||
|
@rem Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
@rem you may not use this file except in compliance with the License.
|
||||||
|
@rem You may obtain a copy of the License at
|
||||||
|
@rem
|
||||||
|
@rem https://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
@rem
|
||||||
|
@rem Unless required by applicable law or agreed to in writing, software
|
||||||
|
@rem distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
@rem See the License for the specific language governing permissions and
|
||||||
|
@rem limitations under the License.
|
||||||
|
@rem
|
||||||
|
@rem SPDX-License-Identifier: Apache-2.0
|
||||||
|
@rem
|
||||||
|
|
||||||
|
@if "%DEBUG%"=="" @echo off
|
||||||
|
@rem ##########################################################################
|
||||||
|
@rem
|
||||||
|
@rem Gradle startup script for Windows
|
||||||
|
@rem
|
||||||
|
@rem ##########################################################################
|
||||||
|
|
||||||
|
@rem Set local scope for the variables with windows NT shell
|
||||||
|
if "%OS%"=="Windows_NT" setlocal
|
||||||
|
|
||||||
|
set DIRNAME=%~dp0
|
||||||
|
if "%DIRNAME%"=="" set DIRNAME=.
|
||||||
|
@rem This is normally unused
|
||||||
|
set APP_BASE_NAME=%~n0
|
||||||
|
set APP_HOME=%DIRNAME%
|
||||||
|
|
||||||
|
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
|
||||||
|
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
|
||||||
|
|
||||||
|
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
|
||||||
|
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
|
||||||
|
|
||||||
|
@rem Find java.exe
|
||||||
|
if defined JAVA_HOME goto findJavaFromJavaHome
|
||||||
|
|
||||||
|
set JAVA_EXE=java.exe
|
||||||
|
%JAVA_EXE% -version >NUL 2>&1
|
||||||
|
if %ERRORLEVEL% equ 0 goto execute
|
||||||
|
|
||||||
|
echo. 1>&2
|
||||||
|
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
|
||||||
|
echo. 1>&2
|
||||||
|
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
|
||||||
|
echo location of your Java installation. 1>&2
|
||||||
|
|
||||||
|
goto fail
|
||||||
|
|
||||||
|
:findJavaFromJavaHome
|
||||||
|
set JAVA_HOME=%JAVA_HOME:"=%
|
||||||
|
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
|
||||||
|
|
||||||
|
if exist "%JAVA_EXE%" goto execute
|
||||||
|
|
||||||
|
echo. 1>&2
|
||||||
|
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
|
||||||
|
echo. 1>&2
|
||||||
|
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
|
||||||
|
echo location of your Java installation. 1>&2
|
||||||
|
|
||||||
|
goto fail
|
||||||
|
|
||||||
|
:execute
|
||||||
|
@rem Setup the command line
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@rem Execute Gradle
|
||||||
|
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
|
||||||
|
|
||||||
|
:end
|
||||||
|
@rem End local scope for the variables with windows NT shell
|
||||||
|
if %ERRORLEVEL% equ 0 goto mainEnd
|
||||||
|
|
||||||
|
:fail
|
||||||
|
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
|
||||||
|
rem the _cmd.exe /c_ return code!
|
||||||
|
set EXIT_CODE=%ERRORLEVEL%
|
||||||
|
if %EXIT_CODE% equ 0 set EXIT_CODE=1
|
||||||
|
if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
|
||||||
|
exit /b %EXIT_CODE%
|
||||||
|
|
||||||
|
:mainEnd
|
||||||
|
if "%OS%"=="Windows_NT" endlocal
|
||||||
|
|
||||||
|
:omega
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
pluginManagement {
|
||||||
|
repositories {
|
||||||
|
gradlePluginPortal()
|
||||||
|
}
|
||||||
|
def reactNativeGradlePlugin = new File(
|
||||||
|
providers.exec {
|
||||||
|
workingDir(rootDir)
|
||||||
|
commandLine("node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })")
|
||||||
|
}.standardOutput.asText.get().trim()
|
||||||
|
).getParentFile().absolutePath
|
||||||
|
includeBuild(reactNativeGradlePlugin)
|
||||||
|
|
||||||
|
def expoPluginsPath = new File(
|
||||||
|
providers.exec {
|
||||||
|
workingDir(rootDir)
|
||||||
|
commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
|
||||||
|
}.standardOutput.asText.get().trim(),
|
||||||
|
"../android/expo-gradle-plugin"
|
||||||
|
).absolutePath
|
||||||
|
includeBuild(expoPluginsPath)
|
||||||
|
}
|
||||||
|
|
||||||
|
plugins {
|
||||||
|
id("com.facebook.react.settings")
|
||||||
|
id("expo-autolinking-settings")
|
||||||
|
}
|
||||||
|
|
||||||
|
extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
|
||||||
|
if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
|
||||||
|
ex.autolinkLibrariesFromCommand()
|
||||||
|
} else {
|
||||||
|
ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
expoAutolinking.useExpoModules()
|
||||||
|
|
||||||
|
rootProject.name = 'carry-your-live'
|
||||||
|
|
||||||
|
expoAutolinking.useExpoVersionCatalog()
|
||||||
|
|
||||||
|
include ':app'
|
||||||
|
includeBuild(expoAutolinking.reactNativeGradlePlugin)
|
||||||
@@ -34,7 +34,9 @@
|
|||||||
"color": "#1E88E5"
|
"color": "#1E88E5"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"./plugins/withQuickAddWidget"
|
"./plugins/withQuickAddWidget",
|
||||||
|
"expo-router",
|
||||||
|
"expo-sqlite"
|
||||||
],
|
],
|
||||||
"extra": {
|
"extra": {
|
||||||
"eas": {
|
"eas": {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { Tabs } from 'expo-router';
|
import { Tabs } from 'expo-router';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
import { View, StyleSheet, TouchableOpacity } from 'react-native';
|
import { View, StyleSheet, TouchableOpacity, Animated } from 'react-native';
|
||||||
import { TabBarIcon } from '@/components/TabBarIcon';
|
import { TabBarIcon } from '@/components/TabBarIcon';
|
||||||
import { useSettings } from '@/theme';
|
import { useSettings } from '@/theme';
|
||||||
import { setLastVisitedTab } from '@/utils/tabHistory';
|
import { setLastVisitedTab } from '@/utils/tabHistory';
|
||||||
@@ -18,64 +18,80 @@ export default function TabLayout() {
|
|||||||
tabBarStyle: {
|
tabBarStyle: {
|
||||||
backgroundColor: theme.tabBarBg,
|
backgroundColor: theme.tabBarBg,
|
||||||
borderTopWidth: 0,
|
borderTopWidth: 0,
|
||||||
height: 84 + insets.bottom,
|
height: 56,
|
||||||
paddingBottom: insets.bottom,
|
paddingBottom: insets.bottom,
|
||||||
paddingTop: 12,
|
paddingTop: insets.top,
|
||||||
paddingHorizontal: 16,
|
paddingHorizontal: 16,
|
||||||
elevation: 0,
|
elevation: 4,
|
||||||
shadowColor: '#000',
|
shadowColor: '#000',
|
||||||
shadowOffset: { width: 0, height: -4 },
|
shadowOffset: { width: 0, height: 2 },
|
||||||
shadowOpacity: 0.12,
|
shadowOpacity: 0.1,
|
||||||
shadowRadius: 20,
|
shadowRadius: 8,
|
||||||
},
|
},
|
||||||
tabBarItemStyle: {
|
tabBarItemStyle: {
|
||||||
paddingVertical: 0,
|
paddingVertical: 6,
|
||||||
|
paddingHorizontal: 12,
|
||||||
},
|
},
|
||||||
tabBarLabelStyle: {
|
tabBarLabelStyle: {
|
||||||
fontSize: 11,
|
fontSize: 12,
|
||||||
fontWeight: '700',
|
fontWeight: '600',
|
||||||
marginTop: 4,
|
marginTop: 2,
|
||||||
},
|
},
|
||||||
headerShown: false,
|
headerShown: false,
|
||||||
sceneStyle: { backgroundColor: theme.background },
|
sceneStyle: { backgroundColor: theme.background },
|
||||||
}}
|
}}
|
||||||
tabBar={(props) => {
|
tabBar={props => {
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
style={[
|
style={[
|
||||||
styles.tabBarContainer,
|
styles.tabBarContainer,
|
||||||
{
|
{
|
||||||
backgroundColor: theme.tabBarBg,
|
backgroundColor: theme.tabBarBg,
|
||||||
paddingBottom: Math.max(props.insets.bottom, 8),
|
paddingBottom: Math.max(props.insets.bottom, 8),
|
||||||
shadowColor: '#000',
|
shadowColor: '#000',
|
||||||
shadowOffset: { width: 0, height: -4 },
|
shadowOffset: { width: 0, height: 4 },
|
||||||
shadowOpacity: 0.12,
|
shadowOpacity: 0.1,
|
||||||
shadowRadius: 20,
|
shadowRadius: 8,
|
||||||
elevation: 8,
|
elevation: 4,
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
{props.navigation.getState().routes.map((route) => {
|
{props.navigation.getState().routes.map(route => {
|
||||||
const focused = props.navigation.getState().index === props.navigation.getState().routes.indexOf(route);
|
const focused =
|
||||||
|
props.navigation.getState().index ===
|
||||||
|
props.navigation.getState().routes.indexOf(route);
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
key={route.name}
|
key={route.name}
|
||||||
style={[
|
style={[
|
||||||
styles.tabItem,
|
styles.tabItem,
|
||||||
focused && styles.tabItemActive,
|
|
||||||
{ backgroundColor: focused ? theme.accentSoft : 'transparent' },
|
{ backgroundColor: focused ? theme.accentSoft : 'transparent' },
|
||||||
]}
|
]}
|
||||||
onPress={() => props.navigation.navigate(route.name as never)}
|
onPress={() => props.navigation.navigate(route.name as never)}
|
||||||
accessibilityRole="button"
|
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 }}
|
accessibilityState={{ selected: focused }}
|
||||||
>
|
>
|
||||||
<TabBarIcon
|
<Animated.View style={[styles.rippleContainer, { opacity: focused ? 1 : 0.5 }]}>
|
||||||
name={route.name === 'index' ? 'checklist' : route.name === 'calendar' ? 'calendar' : route.name === 'stats' ? 'stats' : 'gear'}
|
<TabBarIcon
|
||||||
focused={focused}
|
name={
|
||||||
color={focused ? theme.accent : theme.textSecondary}
|
route.name === 'index'
|
||||||
size={24}
|
? 'checklist'
|
||||||
/>
|
: route.name === 'calendar'
|
||||||
|
? 'calendar'
|
||||||
|
: route.name === 'stats'
|
||||||
|
? 'stats'
|
||||||
|
: 'gear'
|
||||||
|
}
|
||||||
|
focused={focused}
|
||||||
|
color={focused ? theme.accent : theme.textSecondary}
|
||||||
|
size={24}
|
||||||
|
/>
|
||||||
|
</Animated.View>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@@ -103,22 +119,23 @@ const styles = StyleSheet.create({
|
|||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'space-around',
|
justifyContent: 'space-around',
|
||||||
paddingTop: 10,
|
paddingTop: 6,
|
||||||
paddingHorizontal: 16,
|
paddingHorizontal: 16,
|
||||||
},
|
},
|
||||||
tabItem: {
|
tabItem: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
paddingVertical: 8,
|
paddingVertical: 6,
|
||||||
paddingHorizontal: 8,
|
paddingHorizontal: 12,
|
||||||
borderRadius: 16,
|
borderRadius: 8,
|
||||||
minWidth: 70,
|
minWidth: 70,
|
||||||
},
|
},
|
||||||
tabItemActive: {
|
rippleContainer: {
|
||||||
shadowColor: '#000',
|
width: 44,
|
||||||
shadowOffset: { width: 0, height: 2 },
|
height: 44,
|
||||||
shadowOpacity: 0.1,
|
borderRadius: 22,
|
||||||
shadowRadius: 8,
|
alignItems: 'center',
|
||||||
elevation: 4,
|
justifyContent: 'center',
|
||||||
|
position: 'relative',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,5 +1,15 @@
|
|||||||
import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
|
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 { useRouter, useFocusEffect } from 'expo-router';
|
||||||
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
||||||
import { Header } from '@/components/Header';
|
import { Header } from '@/components/Header';
|
||||||
@@ -15,7 +25,15 @@ import { OptionPickerModal } from '@/components/OptionPickerModal';
|
|||||||
import { TaskItem } from '@/components/TaskItem';
|
import { TaskItem } from '@/components/TaskItem';
|
||||||
import { SubtaskItem } from '@/components/SubtaskItem';
|
import { SubtaskItem } from '@/components/SubtaskItem';
|
||||||
import Task from '@/models/Task';
|
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 Svg, { Path } from 'react-native-svg';
|
||||||
import type { ThemeColors } from '@/theme';
|
import type { ThemeColors } from '@/theme';
|
||||||
import type { TaskData, SubtaskData } from '@/types';
|
import type { TaskData, SubtaskData } from '@/types';
|
||||||
@@ -24,8 +42,18 @@ const WIDTH = Dimensions.get('window').width;
|
|||||||
const GERMAN_WEEKDAYS = ['mo', 'di', 'mi', 'do', 'fr', 'sa', 'so'];
|
const 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 PRIORITY_RANK: Record<string, number> = { none: 0, low: 1, medium: 2, high: 3, critical: 4 };
|
||||||
const MONTH_NAMES = [
|
const MONTH_NAMES = [
|
||||||
'January', 'February', 'March', 'April', 'May', 'June',
|
'January',
|
||||||
'July', 'August', 'September', 'October', 'November', 'December',
|
'February',
|
||||||
|
'March',
|
||||||
|
'April',
|
||||||
|
'May',
|
||||||
|
'June',
|
||||||
|
'July',
|
||||||
|
'August',
|
||||||
|
'September',
|
||||||
|
'October',
|
||||||
|
'November',
|
||||||
|
'December',
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function CalendarScreen() {
|
export default function CalendarScreen() {
|
||||||
@@ -70,7 +98,9 @@ export default function CalendarScreen() {
|
|||||||
const sorted = [...selectedDayTasks];
|
const sorted = [...selectedDayTasks];
|
||||||
switch (sortBy) {
|
switch (sortBy) {
|
||||||
case 'date':
|
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;
|
break;
|
||||||
case 'priority':
|
case 'priority':
|
||||||
sorted.sort((a, b) => PRIORITY_RANK[b.priority] - PRIORITY_RANK[a.priority]);
|
sorted.sort((a, b) => PRIORITY_RANK[b.priority] - PRIORITY_RANK[a.priority]);
|
||||||
@@ -118,10 +148,18 @@ export default function CalendarScreen() {
|
|||||||
animatingRef.current = true;
|
animatingRef.current = true;
|
||||||
const w = gridWidthRef.current || WIDTH;
|
const w = gridWidthRef.current || WIDTH;
|
||||||
const target = dir === 1 ? -w : w;
|
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);
|
setVisibleMonth(next);
|
||||||
translateX.current.setValue(-target);
|
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;
|
animatingRef.current = false;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -148,11 +186,11 @@ export default function CalendarScreen() {
|
|||||||
.minDistance(6)
|
.minDistance(6)
|
||||||
.runOnJS(true)
|
.runOnJS(true)
|
||||||
// eslint-disable-next-line react-hooks/refs
|
// eslint-disable-next-line react-hooks/refs
|
||||||
.onUpdate((e) => {
|
.onUpdate(e => {
|
||||||
if (!animatingRef.current) translateX.current.setValue(e.translationX);
|
if (!animatingRef.current) translateX.current.setValue(e.translationX);
|
||||||
})
|
})
|
||||||
// eslint-disable-next-line react-hooks/refs
|
// eslint-disable-next-line react-hooks/refs
|
||||||
.onEnd((e) => {
|
.onEnd(e => {
|
||||||
if (animatingRef.current) return;
|
if (animatingRef.current) return;
|
||||||
const w = gridWidthRef.current || WIDTH;
|
const w = gridWidthRef.current || WIDTH;
|
||||||
const dx = e.translationX;
|
const dx = e.translationX;
|
||||||
@@ -183,22 +221,26 @@ export default function CalendarScreen() {
|
|||||||
const monthOptions = MONTH_NAMES.map((label, i) => ({ value: String(i), label }));
|
const monthOptions = MONTH_NAMES.map((label, i) => ({ value: String(i), label }));
|
||||||
const yearOptions = useMemo(() => {
|
const yearOptions = useMemo(() => {
|
||||||
const options: { value: string; label: string }[] = [];
|
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;
|
return options;
|
||||||
}, [currentYear]);
|
}, [currentYear]);
|
||||||
|
|
||||||
const handleToggleComplete = useCallback(async (taskId: string) => {
|
const handleToggleComplete = useCallback(
|
||||||
await confirmAndToggleTaskComplete(taskId, () => {
|
async (taskId: string) => {
|
||||||
refreshDayTasks();
|
await confirmAndToggleTaskComplete(taskId, () => {
|
||||||
refreshMonthTasks();
|
refreshDayTasks();
|
||||||
refreshSubtasks();
|
refreshMonthTasks();
|
||||||
});
|
refreshSubtasks();
|
||||||
}, [refreshDayTasks, refreshMonthTasks, refreshSubtasks]);
|
});
|
||||||
|
},
|
||||||
|
[refreshDayTasks, refreshMonthTasks, refreshSubtasks]
|
||||||
|
);
|
||||||
|
|
||||||
const [expandedTasks, setExpandedTasks] = useState<Set<string>>(new Set());
|
const [expandedTasks, setExpandedTasks] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
const toggleExpand = useCallback((taskId: string) => {
|
const toggleExpand = useCallback((taskId: string) => {
|
||||||
setExpandedTasks((prev) => {
|
setExpandedTasks(prev => {
|
||||||
const next = new Set(prev);
|
const next = new Set(prev);
|
||||||
if (next.has(taskId)) {
|
if (next.has(taskId)) {
|
||||||
next.delete(taskId);
|
next.delete(taskId);
|
||||||
@@ -209,58 +251,126 @@ export default function CalendarScreen() {
|
|||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleSubtaskToggle = useCallback(async (subtaskId: string) => {
|
const handleSubtaskToggle = useCallback(
|
||||||
await toggleSubtaskComplete(subtaskId);
|
async (subtaskId: string) => {
|
||||||
refreshDayTasks();
|
await toggleSubtaskComplete(subtaskId);
|
||||||
refreshMonthTasks();
|
refreshDayTasks();
|
||||||
refreshSubtasks();
|
refreshMonthTasks();
|
||||||
}, [refreshDayTasks, refreshMonthTasks, refreshSubtasks]);
|
refreshSubtasks();
|
||||||
|
},
|
||||||
|
[refreshDayTasks, refreshMonthTasks, refreshSubtasks]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
|
<SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
|
||||||
<Header title="Calendar" showLogo={false} />
|
<Header
|
||||||
|
title="Calendar"
|
||||||
|
showLogo={false}
|
||||||
|
rightAction={
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => router.back()}
|
||||||
|
style={styles.backButton}
|
||||||
|
accessible={true}
|
||||||
|
accessibilityLabel="Back"
|
||||||
|
>
|
||||||
|
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||||
|
<Path
|
||||||
|
d="M15 18l-6-6 6-6"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth={2.5}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
</Svg>
|
||||||
|
</TouchableOpacity>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
<KeyboardAvoidingView style={styles.kbAvoid} behavior="padding">
|
<KeyboardAvoidingView style={styles.kbAvoid} behavior="padding">
|
||||||
<ScrollView style={styles.scrollBody} showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>
|
<ScrollView
|
||||||
<GestureDetector gesture={pan}>
|
style={styles.scrollBody}
|
||||||
<Animated.View
|
showsVerticalScrollIndicator={false}
|
||||||
onLayout={(e) => {
|
contentContainerStyle={styles.scrollContent}
|
||||||
gridWidthRef.current = e.nativeEvent.layout.width;
|
>
|
||||||
}}
|
<GestureDetector gesture={pan}>
|
||||||
// eslint-disable-next-line react-hooks/refs
|
<Animated.View
|
||||||
style={[styles.calendarArea, { transform: [{ translateX: translateX.current }] }]}
|
onLayout={e => {
|
||||||
>
|
gridWidthRef.current = e.nativeEvent.layout.width;
|
||||||
|
}}
|
||||||
|
// eslint-disable-next-line react-hooks/refs
|
||||||
|
style={[styles.calendarArea, { transform: [{ translateX: translateX.current }] }]}
|
||||||
|
>
|
||||||
<View style={styles.monthRow}>
|
<View style={styles.monthRow}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
onPress={() => transitionTo(-1)}
|
onPress={() => transitionTo(-1)}
|
||||||
style={[styles.monthNav, { borderColor: theme.borderStrong, backgroundColor: theme.card }]}
|
style={[
|
||||||
|
styles.monthNav,
|
||||||
|
{ borderColor: theme.borderStrong, backgroundColor: theme.card },
|
||||||
|
]}
|
||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
>
|
>
|
||||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
<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>
|
</Svg>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
||||||
<View style={styles.monthSelectorGroup}>
|
<View style={styles.monthSelectorGroup}>
|
||||||
<TouchableOpacity onPress={() => setMonthPickerVisible(true)} activeOpacity={0.7} style={styles.monthButton}>
|
<TouchableOpacity
|
||||||
<Text style={[styles.monthLabel, { color: theme.text }]}>{format(visibleMonth, 'MMMM')}</Text>
|
onPress={() => setMonthPickerVisible(true)}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
style={styles.monthButton}
|
||||||
|
>
|
||||||
|
<Text style={[styles.monthLabel, { color: theme.text }]}>
|
||||||
|
{format(visibleMonth, 'MMMM')}
|
||||||
|
</Text>
|
||||||
<Svg width={14} height={14} viewBox="0 0 24 24">
|
<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>
|
</Svg>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<TouchableOpacity onPress={() => setYearPickerVisible(true)} activeOpacity={0.7} style={styles.yearButton}>
|
<TouchableOpacity
|
||||||
<Text style={[styles.yearLabel, { color: theme.textMuted }]}>{format(visibleMonth, 'yyyy')}</Text>
|
onPress={() => setYearPickerVisible(true)}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
style={styles.yearButton}
|
||||||
|
>
|
||||||
|
<Text style={[styles.yearLabel, { color: theme.textMuted }]}>
|
||||||
|
{format(visibleMonth, 'yyyy')}
|
||||||
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
onPress={() => transitionTo(1)}
|
onPress={() => transitionTo(1)}
|
||||||
style={[styles.monthNav, { borderColor: theme.borderStrong, backgroundColor: theme.card }]}
|
style={[
|
||||||
|
styles.monthNav,
|
||||||
|
{ borderColor: theme.borderStrong, backgroundColor: theme.card },
|
||||||
|
]}
|
||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
>
|
>
|
||||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
<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>
|
</Svg>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
@@ -275,7 +385,7 @@ export default function CalendarScreen() {
|
|||||||
|
|
||||||
{weeks.map((week, wi) => (
|
{weeks.map((week, wi) => (
|
||||||
<View key={wi} style={styles.weekRow}>
|
<View key={wi} style={styles.weekRow}>
|
||||||
{week.map((day) => (
|
{week.map(day => (
|
||||||
<DayCell
|
<DayCell
|
||||||
key={day.toISOString()}
|
key={day.toISOString()}
|
||||||
day={day}
|
day={day}
|
||||||
@@ -291,52 +401,58 @@ export default function CalendarScreen() {
|
|||||||
</View>
|
</View>
|
||||||
))}
|
))}
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
</GestureDetector>
|
</GestureDetector>
|
||||||
|
|
||||||
<View style={styles.panelHeader}>
|
<View style={styles.panelHeader}>
|
||||||
<Text style={[styles.panelDate, { color: theme.text }]}>{format(selectedDate, 'EEEE, MMMM d')}</Text>
|
<Text style={[styles.panelDate, { color: theme.text }]}>
|
||||||
{sortedDayTasks.length > 0 && (
|
{format(selectedDate, 'EEEE, MMMM d')}
|
||||||
<Text style={[styles.panelCount, { color: theme.textFaint }]}>
|
</Text>
|
||||||
{sortedDayTasks.length} event{sortedDayTasks.length === 1 ? '' : 's'}
|
{sortedDayTasks.length > 0 && (
|
||||||
</Text>
|
<Text style={[styles.panelCount, { color: theme.textFaint }]}>
|
||||||
)}
|
{sortedDayTasks.length} event{sortedDayTasks.length === 1 ? '' : 's'}
|
||||||
</View>
|
</Text>
|
||||||
|
|
||||||
{sortedDayTasks.length === 0 ? (
|
|
||||||
<View style={styles.emptyState}>
|
|
||||||
<Text style={[styles.emptyText, { color: theme.textSecondary }]}>No events on this day</Text>
|
|
||||||
<Text style={[styles.emptySubtext, { color: theme.textMuted }]}>Tap a date or use the bar below</Text>
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
sortedDayTasks.map((task) => {
|
|
||||||
const isExpanded = expandedTasks.has(task.id);
|
|
||||||
const itemSubtasks = subtasksByTask.get(task.id) ?? [];
|
|
||||||
return (
|
|
||||||
<View key={task.id} style={styles.eventCard}>
|
|
||||||
<CalendarTaskRow
|
|
||||||
task={task}
|
|
||||||
expanded={isExpanded}
|
|
||||||
subtasks={itemSubtasks}
|
|
||||||
categoryColor={categoryColors.get(task.categoryId)}
|
|
||||||
onToggle={() => handleToggleComplete(task.id)}
|
|
||||||
onPress={(id) =>
|
|
||||||
expandedTasks.has(id)
|
|
||||||
? router.push({ pathname: '/task-detail', params: { id } })
|
|
||||||
: toggleExpand(id)
|
|
||||||
}
|
|
||||||
onMenuOpen={(id) => openTaskEdit(id)}
|
|
||||||
onSubtaskToggle={handleSubtaskToggle}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
)}
|
||||||
</ScrollView>
|
</View>
|
||||||
|
|
||||||
<QuickAddBar
|
{sortedDayTasks.length === 0 ? (
|
||||||
dueDate={selectedDate.getTime()}
|
<View style={styles.emptyState}>
|
||||||
placeholder={`Add event for ${format(selectedDate, 'MMM d')}`}
|
<Text style={[styles.emptyText, { color: theme.textSecondary }]}>
|
||||||
/>
|
No events on this day
|
||||||
|
</Text>
|
||||||
|
<Text style={[styles.emptySubtext, { color: theme.textMuted }]}>
|
||||||
|
Tap a date or use the bar below
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
sortedDayTasks.map(task => {
|
||||||
|
const isExpanded = expandedTasks.has(task.id);
|
||||||
|
const itemSubtasks = subtasksByTask.get(task.id) ?? [];
|
||||||
|
return (
|
||||||
|
<View key={task.id} style={styles.eventCard}>
|
||||||
|
<CalendarTaskRow
|
||||||
|
task={task}
|
||||||
|
expanded={isExpanded}
|
||||||
|
subtasks={itemSubtasks}
|
||||||
|
categoryColor={categoryColors.get(task.categoryId)}
|
||||||
|
onToggle={() => handleToggleComplete(task.id)}
|
||||||
|
onPress={id =>
|
||||||
|
expandedTasks.has(id)
|
||||||
|
? router.push({ pathname: '/task-detail', params: { id } })
|
||||||
|
: toggleExpand(id)
|
||||||
|
}
|
||||||
|
onMenuOpen={id => openTaskEdit(id)}
|
||||||
|
onSubtaskToggle={handleSubtaskToggle}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</ScrollView>
|
||||||
|
|
||||||
|
<QuickAddBar
|
||||||
|
dueDate={selectedDate.getTime()}
|
||||||
|
placeholder={`Add event for ${format(selectedDate, 'MMM d')}`}
|
||||||
|
/>
|
||||||
</KeyboardAvoidingView>
|
</KeyboardAvoidingView>
|
||||||
|
|
||||||
{modals(() => {})}
|
{modals(() => {})}
|
||||||
@@ -404,7 +520,7 @@ const CalendarTaskRow = React.memo(function CalendarTaskRow({
|
|||||||
/>
|
/>
|
||||||
{expanded && sortedSubtasks.length > 0 && (
|
{expanded && sortedSubtasks.length > 0 && (
|
||||||
<View style={styles.subtaskList}>
|
<View style={styles.subtaskList}>
|
||||||
{sortedSubtasks.map((sub) => (
|
{sortedSubtasks.map(sub => (
|
||||||
<SubtaskItem
|
<SubtaskItem
|
||||||
key={sub.id}
|
key={sub.id}
|
||||||
subtask={sub}
|
subtask={sub}
|
||||||
@@ -425,7 +541,11 @@ function cellTitle(tasks: Task[]): string | null {
|
|||||||
return `${tasks[0].title} +${tasks.length - 1}`;
|
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;
|
if (tasks.length === 0) return theme.textMuted;
|
||||||
return theme.accent;
|
return theme.accent;
|
||||||
}
|
}
|
||||||
@@ -441,11 +561,23 @@ interface DayCellProps {
|
|||||||
onPress: (day: Date) => void;
|
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]);
|
const styles = React.useMemo(() => createStyles(theme), [theme]);
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[styles.dayCell, selected && { backgroundColor: theme.accentSoft, borderColor: theme.accentBorder }]}
|
style={[
|
||||||
|
styles.dayCell,
|
||||||
|
selected && { backgroundColor: theme.accentSoft, borderColor: theme.accentBorder },
|
||||||
|
]}
|
||||||
onPress={() => onPress(day)}
|
onPress={() => onPress(day)}
|
||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
>
|
>
|
||||||
@@ -473,149 +605,153 @@ const DayCell = React.memo(function DayCell({ day, label, dotColor, selected, to
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
const createStyles = (theme: ThemeColors) => StyleSheet.create({
|
const createStyles = (theme: ThemeColors) =>
|
||||||
container: {
|
StyleSheet.create({
|
||||||
flex: 1,
|
container: {
|
||||||
},
|
flex: 1,
|
||||||
scrollContent: {
|
},
|
||||||
paddingBottom: 16,
|
scrollContent: {
|
||||||
flexGrow: 1,
|
paddingBottom: 16,
|
||||||
},
|
flexGrow: 1,
|
||||||
scrollBody: {
|
},
|
||||||
flex: 1,
|
scrollBody: {
|
||||||
},
|
flex: 1,
|
||||||
kbAvoid: {
|
},
|
||||||
flex: 1,
|
kbAvoid: {
|
||||||
},
|
flex: 1,
|
||||||
calendarArea: {
|
},
|
||||||
paddingHorizontal: 12,
|
calendarArea: {
|
||||||
paddingTop: 6,
|
paddingHorizontal: 12,
|
||||||
paddingBottom: 4,
|
paddingTop: 6,
|
||||||
},
|
paddingBottom: 4,
|
||||||
monthRow: {
|
},
|
||||||
flexDirection: 'row',
|
monthRow: {
|
||||||
alignItems: 'center',
|
flexDirection: 'row',
|
||||||
justifyContent: 'space-between',
|
alignItems: 'center',
|
||||||
paddingHorizontal: 4,
|
justifyContent: 'space-between',
|
||||||
paddingBottom: 14,
|
paddingHorizontal: 4,
|
||||||
},
|
paddingBottom: 14,
|
||||||
monthNav: {
|
},
|
||||||
width: 36,
|
monthNav: {
|
||||||
height: 36,
|
width: 36,
|
||||||
borderRadius: 12,
|
height: 36,
|
||||||
borderWidth: 1,
|
borderRadius: 12,
|
||||||
alignItems: 'center',
|
borderWidth: 1,
|
||||||
justifyContent: 'center',
|
alignItems: 'center',
|
||||||
},
|
justifyContent: 'center',
|
||||||
monthSelectorGroup: {
|
},
|
||||||
alignItems: 'flex-start',
|
monthSelectorGroup: {
|
||||||
flex: 1,
|
alignItems: 'flex-start',
|
||||||
},
|
flex: 1,
|
||||||
monthButton: {
|
},
|
||||||
flexDirection: 'row',
|
monthButton: {
|
||||||
alignItems: 'center',
|
flexDirection: 'row',
|
||||||
justifyContent: 'center',
|
alignItems: 'center',
|
||||||
gap: 6,
|
justifyContent: 'center',
|
||||||
paddingHorizontal: 10,
|
gap: 6,
|
||||||
},
|
paddingHorizontal: 10,
|
||||||
monthLabel: {
|
},
|
||||||
fontSize: 22,
|
monthLabel: {
|
||||||
fontWeight: '700',
|
fontSize: 22,
|
||||||
},
|
fontWeight: '700',
|
||||||
yearButton: {
|
},
|
||||||
marginTop: -2,
|
yearButton: {
|
||||||
paddingHorizontal: 6,
|
marginTop: -2,
|
||||||
},
|
paddingHorizontal: 6,
|
||||||
yearLabel: {
|
},
|
||||||
fontSize: 17,
|
yearLabel: {
|
||||||
fontWeight: '700',
|
fontSize: 17,
|
||||||
},
|
fontWeight: '700',
|
||||||
weekdayRow: {
|
},
|
||||||
flexDirection: 'row',
|
weekdayRow: {
|
||||||
marginBottom: 4,
|
flexDirection: 'row',
|
||||||
paddingHorizontal: 2,
|
marginBottom: 4,
|
||||||
},
|
paddingHorizontal: 2,
|
||||||
weekday: {
|
},
|
||||||
flex: 1,
|
weekday: {
|
||||||
textAlign: 'center',
|
flex: 1,
|
||||||
fontSize: 11,
|
textAlign: 'center',
|
||||||
fontWeight: '600',
|
fontSize: 11,
|
||||||
textTransform: 'uppercase',
|
fontWeight: '600',
|
||||||
},
|
textTransform: 'uppercase',
|
||||||
weekRow: {
|
},
|
||||||
flexDirection: 'row',
|
weekRow: {
|
||||||
gap: 6,
|
flexDirection: 'row',
|
||||||
marginBottom: 6,
|
gap: 6,
|
||||||
},
|
marginBottom: 6,
|
||||||
dayCell: {
|
},
|
||||||
flex: 1,
|
dayCell: {
|
||||||
height: 56,
|
flex: 1,
|
||||||
borderRadius: 12,
|
height: 56,
|
||||||
borderWidth: 1,
|
borderRadius: 12,
|
||||||
borderColor: 'transparent',
|
borderWidth: 1,
|
||||||
paddingVertical: 4,
|
borderColor: 'transparent',
|
||||||
alignItems: 'center',
|
paddingVertical: 4,
|
||||||
},
|
alignItems: 'center',
|
||||||
dayNumber: {
|
},
|
||||||
fontSize: 14,
|
dayNumber: {
|
||||||
fontWeight: '600',
|
fontSize: 14,
|
||||||
},
|
fontWeight: '600',
|
||||||
dayNumberSelected: {
|
},
|
||||||
color: theme.text,
|
dayNumberSelected: {
|
||||||
},
|
color: theme.text,
|
||||||
chip: {
|
},
|
||||||
marginTop: 3,
|
chip: {
|
||||||
paddingHorizontal: 4,
|
marginTop: 3,
|
||||||
paddingVertical: 2,
|
paddingHorizontal: 4,
|
||||||
borderRadius: 5,
|
paddingVertical: 2,
|
||||||
maxWidth: '92%',
|
borderRadius: 5,
|
||||||
},
|
maxWidth: '92%',
|
||||||
chipText: {
|
},
|
||||||
color: '#FFFFFF',
|
chipText: {
|
||||||
fontSize: 8,
|
color: '#FFFFFF',
|
||||||
fontWeight: '600',
|
fontSize: 8,
|
||||||
},
|
fontWeight: '600',
|
||||||
chipPlaceholder: {
|
},
|
||||||
marginTop: 3,
|
chipPlaceholder: {
|
||||||
width: 6,
|
marginTop: 3,
|
||||||
height: 2,
|
width: 6,
|
||||||
borderRadius: 1,
|
height: 2,
|
||||||
opacity: 0.4,
|
borderRadius: 1,
|
||||||
},
|
opacity: 0.4,
|
||||||
panelHeader: {
|
},
|
||||||
flexDirection: 'row',
|
panelHeader: {
|
||||||
alignItems: 'center',
|
flexDirection: 'row',
|
||||||
justifyContent: 'space-between',
|
alignItems: 'center',
|
||||||
paddingHorizontal: 18,
|
justifyContent: 'space-between',
|
||||||
paddingTop: 15,
|
paddingHorizontal: 18,
|
||||||
paddingBottom: 4,
|
paddingTop: 15,
|
||||||
},
|
paddingBottom: 4,
|
||||||
panelDate: {
|
},
|
||||||
fontSize: 16,
|
panelDate: {
|
||||||
fontWeight: '700',
|
fontSize: 16,
|
||||||
},
|
fontWeight: '700',
|
||||||
panelCount: {
|
},
|
||||||
fontSize: 13,
|
panelCount: {
|
||||||
},
|
fontSize: 13,
|
||||||
emptyState: {
|
},
|
||||||
alignItems: 'center',
|
emptyState: {
|
||||||
paddingVertical: 36,
|
alignItems: 'center',
|
||||||
},
|
paddingVertical: 36,
|
||||||
emptyText: {
|
},
|
||||||
fontSize: 15,
|
emptyText: {
|
||||||
fontWeight: '600',
|
fontSize: 15,
|
||||||
marginBottom: 4,
|
fontWeight: '600',
|
||||||
},
|
marginBottom: 4,
|
||||||
emptySubtext: {
|
},
|
||||||
fontSize: 13,
|
emptySubtext: {
|
||||||
},
|
fontSize: 13,
|
||||||
eventCard: {
|
},
|
||||||
marginHorizontal: 16,
|
backButton: {
|
||||||
marginTop: 6,
|
padding: 8,
|
||||||
},
|
},
|
||||||
subtaskList: {
|
eventCard: {
|
||||||
paddingLeft: 8,
|
marginHorizontal: 16,
|
||||||
paddingRight: 4,
|
marginTop: 6,
|
||||||
paddingTop: 4,
|
},
|
||||||
},
|
subtaskList: {
|
||||||
});
|
paddingLeft: 8,
|
||||||
|
paddingRight: 4,
|
||||||
|
paddingTop: 4,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|||||||
@@ -1,5 +1,13 @@
|
|||||||
import React, { useCallback, useMemo, useState } from 'react';
|
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 { useFocusEffect } from 'expo-router';
|
||||||
import { Header } from '@/components/Header';
|
import { Header } from '@/components/Header';
|
||||||
import { CategoryFilter } from '@/components/CategoryFilter';
|
import { CategoryFilter } from '@/components/CategoryFilter';
|
||||||
@@ -39,7 +47,10 @@ export default function TasksScreen() {
|
|||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[
|
style={[
|
||||||
styles.completedToggle,
|
styles.completedToggle,
|
||||||
{ backgroundColor: theme.card, borderColor: showCompleted ? theme.accent : theme.borderStrong },
|
{
|
||||||
|
backgroundColor: theme.card,
|
||||||
|
borderColor: showCompleted ? theme.accent : theme.borderStrong,
|
||||||
|
},
|
||||||
]}
|
]}
|
||||||
onPress={() => setShowCompleted(!showCompleted)}
|
onPress={() => setShowCompleted(!showCompleted)}
|
||||||
activeOpacity={0.8}
|
activeOpacity={0.8}
|
||||||
@@ -57,18 +68,27 @@ export default function TasksScreen() {
|
|||||||
fill="none"
|
fill="none"
|
||||||
/>
|
/>
|
||||||
{showCompleted && (
|
{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>
|
</Svg>
|
||||||
<Text style={[styles.completedToggleText, { color: showCompleted ? theme.text : theme.textMuted }]}>
|
<Text
|
||||||
|
style={[
|
||||||
|
styles.completedToggleText,
|
||||||
|
{ color: showCompleted ? theme.text : theme.textMuted },
|
||||||
|
]}
|
||||||
|
>
|
||||||
Completed
|
Completed
|
||||||
</Text>
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
<KeyboardAvoidingView
|
<KeyboardAvoidingView style={styles.kbAvoid} behavior="padding">
|
||||||
style={styles.kbAvoid}
|
|
||||||
behavior="padding"
|
|
||||||
>
|
|
||||||
<TaskList categoryIds={categoryIds} showCompleted={showCompleted} />
|
<TaskList categoryIds={categoryIds} showCompleted={showCompleted} />
|
||||||
<QuickAddBar />
|
<QuickAddBar />
|
||||||
</KeyboardAvoidingView>
|
</KeyboardAvoidingView>
|
||||||
@@ -103,4 +123,4 @@ const styles = StyleSheet.create({
|
|||||||
kbAvoid: {
|
kbAvoid: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,5 +1,18 @@
|
|||||||
import React, { useState, useCallback } from 'react';
|
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 { useFocusEffect, useRouter } from 'expo-router';
|
||||||
import { Header } from '@/components/Header';
|
import { Header } from '@/components/Header';
|
||||||
import { ListItem } from '@/components/ListItem';
|
import { ListItem } from '@/components/ListItem';
|
||||||
@@ -10,7 +23,15 @@ import { FriendsModal } from '@/components/FriendsModal';
|
|||||||
import { LegalModal } from '@/components/LegalModal';
|
import { LegalModal } from '@/components/LegalModal';
|
||||||
import { ServerUrlModal } from '@/components/ServerUrlModal';
|
import { ServerUrlModal } from '@/components/ServerUrlModal';
|
||||||
import SyncStatus from '@/components/SyncStatus';
|
import SyncStatus from '@/components/SyncStatus';
|
||||||
import { useSettings, SORT_OPTIONS, REMINDER_OPTIONS, ACCENT_PRESETS, DEFAULT_ACCENT } from '@/theme';
|
import {
|
||||||
|
useSettings,
|
||||||
|
SORT_OPTIONS,
|
||||||
|
REMINDER_OPTIONS,
|
||||||
|
ACCENT_PRESETS,
|
||||||
|
DEFAULT_ACCENT,
|
||||||
|
DEFAULT_ACCENT_OPACITY,
|
||||||
|
ThemeMode,
|
||||||
|
} from '@/theme';
|
||||||
import { useCategories } from '@/hooks/useDatabase';
|
import { useCategories } from '@/hooks/useDatabase';
|
||||||
import { getAuthUser, getAuthToken } from '@/services/auth';
|
import { getAuthUser, getAuthToken } from '@/services/auth';
|
||||||
import { checkForUpdates, getCurrentAppVersion } from '@/services/updates';
|
import { checkForUpdates, getCurrentAppVersion } from '@/services/updates';
|
||||||
@@ -24,9 +45,38 @@ import { getLastVisitedTab, tabHref } from '@/utils/tabHistory';
|
|||||||
|
|
||||||
export default function SettingsScreen() {
|
export default function SettingsScreen() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { theme, notifications, setNotifications, defaultCategoryId, setDefaultCategoryId, sortBy, setSortBy, reminderPreference, setReminderPreference, tagReminderPreferences, setTagReminderPreferences, apiUrl, accentColor, setAccentColor, todoAheadDays, setTodoAheadDays, showCompleted, setShowCompleted, deleteBySwipe, setDeleteBySwipe } = useSettings();
|
const {
|
||||||
|
theme,
|
||||||
|
notifications,
|
||||||
|
setNotifications,
|
||||||
|
defaultCategoryId,
|
||||||
|
setDefaultCategoryId,
|
||||||
|
sortBy,
|
||||||
|
setSortBy,
|
||||||
|
reminderPreference,
|
||||||
|
setReminderPreference,
|
||||||
|
tagReminderPreferences,
|
||||||
|
setTagReminderPreferences,
|
||||||
|
apiUrl,
|
||||||
|
accentColor,
|
||||||
|
setAccentColor,
|
||||||
|
accentOpacity,
|
||||||
|
setAccentOpacity,
|
||||||
|
todoAheadDays,
|
||||||
|
setTodoAheadDays,
|
||||||
|
showCompleted,
|
||||||
|
setShowCompleted,
|
||||||
|
deleteBySwipe,
|
||||||
|
setDeleteBySwipe,
|
||||||
|
themeMode,
|
||||||
|
setThemeMode,
|
||||||
|
syncSettingsToServer,
|
||||||
|
loadSettingsFromServer,
|
||||||
|
} = useSettings();
|
||||||
const categories = useCategories();
|
const categories = useCategories();
|
||||||
const [picker, setPicker] = useState<null | 'category' | 'sort' | 'reminder' | 'todoAhead'>(null);
|
const [picker, setPicker] = useState<
|
||||||
|
null | 'category' | 'sort' | 'reminder' | 'todoAhead' | 'themeMode'
|
||||||
|
>(null);
|
||||||
const [reminderTagPicker, setReminderTagPicker] = useState<Category | null>(null);
|
const [reminderTagPicker, setReminderTagPicker] = useState<Category | null>(null);
|
||||||
const [editingCategory, setEditingCategory] = useState<Category | null | 'new'>(null);
|
const [editingCategory, setEditingCategory] = useState<Category | null | 'new'>(null);
|
||||||
const [syncVisible, setSyncVisible] = useState(false);
|
const [syncVisible, setSyncVisible] = useState(false);
|
||||||
@@ -35,18 +85,22 @@ export default function SettingsScreen() {
|
|||||||
const [serverUrlVisible, setServerUrlVisible] = useState(false);
|
const [serverUrlVisible, setServerUrlVisible] = useState(false);
|
||||||
const [customAccentVisible, setCustomAccentVisible] = useState(false);
|
const [customAccentVisible, setCustomAccentVisible] = useState(false);
|
||||||
const [draftAccent, setDraftAccent] = useState(accentColor);
|
const [draftAccent, setDraftAccent] = useState(accentColor);
|
||||||
|
const [draftAccentOpacity, setDraftAccentOpacity] = useState(accentOpacity);
|
||||||
const [syncSubtitle, setSyncSubtitle] = useState('Checking...');
|
const [syncSubtitle, setSyncSubtitle] = useState('Checking...');
|
||||||
const [updateSubtitle, setUpdateSubtitle] = useState('Tap to check');
|
const [updateSubtitle, setUpdateSubtitle] = useState('Tap to check');
|
||||||
|
const [lastUpdateCheck, setLastUpdateCheck] = useState<string | null>(null);
|
||||||
|
|
||||||
const handleCheckUpdates = async () => {
|
const handleCheckUpdates = async () => {
|
||||||
setUpdateSubtitle('Checking...');
|
setUpdateSubtitle('Checking...');
|
||||||
const update = await checkForUpdates();
|
const update = await checkForUpdates();
|
||||||
if (!update) {
|
if (!update) {
|
||||||
setUpdateSubtitle('Up to date');
|
setUpdateSubtitle('Up to date');
|
||||||
|
setLastUpdateCheck(new Date().toLocaleString());
|
||||||
Alert.alert('Up to date', `You're running the latest version (${getCurrentAppVersion()}).`);
|
Alert.alert('Up to date', `You're running the latest version (${getCurrentAppVersion()}).`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setUpdateSubtitle(`${update.version} available`);
|
setUpdateSubtitle(`${update.version} available`);
|
||||||
|
setLastUpdateCheck(new Date().toLocaleString());
|
||||||
const url = update.apkUrl ?? update.releaseUrl;
|
const url = update.apkUrl ?? update.releaseUrl;
|
||||||
Alert.alert('Update available', `Version ${update.version} is available for download.`, [
|
Alert.alert('Update available', `Version ${update.version} is available for download.`, [
|
||||||
{ text: 'Later', style: 'cancel' },
|
{ text: 'Later', style: 'cancel' },
|
||||||
@@ -59,6 +113,17 @@ export default function SettingsScreen() {
|
|||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const checkForUpdatesOnLoad = async () => {
|
||||||
|
const update = await checkForUpdates();
|
||||||
|
if (!update) {
|
||||||
|
setUpdateSubtitle('Up to date');
|
||||||
|
setLastUpdateCheck(new Date().toLocaleString());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setUpdateSubtitle(`${update.version} available`);
|
||||||
|
setLastUpdateCheck(new Date().toLocaleString());
|
||||||
|
};
|
||||||
|
|
||||||
const refreshSyncStatus = async () => {
|
const refreshSyncStatus = async () => {
|
||||||
const token = await getAuthToken();
|
const token = await getAuthToken();
|
||||||
if (!token) {
|
if (!token) {
|
||||||
@@ -69,7 +134,9 @@ export default function SettingsScreen() {
|
|||||||
const lastSync = await getLastSyncTime();
|
const lastSync = await getLastSyncTime();
|
||||||
if (user) {
|
if (user) {
|
||||||
setSyncSubtitle(
|
setSyncSubtitle(
|
||||||
lastSync ? `Signed in · synced ${formatSyncTime(lastSync)}` : `Signed in as ${user.username}`
|
lastSync
|
||||||
|
? `Signed in · synced ${formatSyncTime(lastSync)}`
|
||||||
|
: `Signed in as ${user.username}`
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
setSyncSubtitle('Not signed in');
|
setSyncSubtitle('Not signed in');
|
||||||
@@ -83,6 +150,8 @@ export default function SettingsScreen() {
|
|||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
|
refreshSyncStatus();
|
||||||
|
checkForUpdatesOnLoad();
|
||||||
const sub = BackHandler.addEventListener('hardwareBackPress', () => {
|
const sub = BackHandler.addEventListener('hardwareBackPress', () => {
|
||||||
const target = getLastVisitedTab();
|
const target = getLastVisitedTab();
|
||||||
if (target && target !== 'settings') {
|
if (target && target !== 'settings') {
|
||||||
@@ -91,19 +160,18 @@ export default function SettingsScreen() {
|
|||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
return () => sub.remove();
|
return () => sub.remove();
|
||||||
}, [router])
|
}, [refreshSyncStatus, router])
|
||||||
);
|
);
|
||||||
|
|
||||||
const defaultCategory = categories.find((c) => c.id === defaultCategoryId);
|
const defaultCategory = categories.find(c => c.id === defaultCategoryId);
|
||||||
const defaultCategoryLabel = defaultCategory?.name ?? 'None';
|
const 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 tagReminderLabel = (categoryId: string) => {
|
||||||
const selected = tagReminderPreferences[categoryId] ?? [];
|
const selected = tagReminderPreferences[categoryId] ?? [];
|
||||||
if (selected.length === 0) return `Default (${reminderLabel})`;
|
if (selected.length === 0) return `Default (${reminderLabel})`;
|
||||||
return selected
|
return selected.map(v => REMINDER_OPTIONS.find(o => o.value === v)?.label ?? v).join(', ');
|
||||||
.map((v) => REMINDER_OPTIONS.find((o) => o.value === v)?.label ?? v)
|
|
||||||
.join(', ');
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const openCustomAccent = () => {
|
const openCustomAccent = () => {
|
||||||
@@ -145,14 +213,12 @@ export default function SettingsScreen() {
|
|||||||
<Header title="Settings" showLogo={false} />
|
<Header title="Settings" showLogo={false} />
|
||||||
<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
|
<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
|
||||||
<Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Tags</Text>
|
<Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Tags</Text>
|
||||||
{categories.map((category) => (
|
{categories.map(category => (
|
||||||
<ListItem
|
<ListItem
|
||||||
key={category.id}
|
key={category.id}
|
||||||
title={category.name}
|
title={category.name}
|
||||||
subtitle={category.id === defaultCategoryId ? 'Default tag' : undefined}
|
subtitle={category.id === defaultCategoryId ? 'Default tag' : undefined}
|
||||||
leftElement={
|
leftElement={<View style={[styles.categoryDot, { backgroundColor: category.color }]} />}
|
||||||
<View style={[styles.categoryDot, { backgroundColor: category.color }]} />
|
|
||||||
}
|
|
||||||
onPress={() => setEditingCategory(category)}
|
onPress={() => setEditingCategory(category)}
|
||||||
showChevron
|
showChevron
|
||||||
/>
|
/>
|
||||||
@@ -164,7 +230,12 @@ export default function SettingsScreen() {
|
|||||||
>
|
>
|
||||||
<View style={[styles.addIcon, { backgroundColor: theme.accentSoft }]}>
|
<View style={[styles.addIcon, { backgroundColor: theme.accentSoft }]}>
|
||||||
<Svg width={16} height={16} viewBox="0 0 24 24">
|
<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>
|
</Svg>
|
||||||
</View>
|
</View>
|
||||||
<Text style={[styles.addCategoryText, { color: theme.accent }]}>Add Tag</Text>
|
<Text style={[styles.addCategoryText, { color: theme.accent }]}>Add Tag</Text>
|
||||||
@@ -176,7 +247,18 @@ export default function SettingsScreen() {
|
|||||||
rightElement={
|
rightElement={
|
||||||
<Switch
|
<Switch
|
||||||
value={notifications}
|
value={notifications}
|
||||||
onValueChange={setNotifications}
|
onValueChange={async value => {
|
||||||
|
setNotifications(value);
|
||||||
|
if (!value) {
|
||||||
|
const { cancelAllReminders } = await import('@/services/notifications');
|
||||||
|
await cancelAllReminders();
|
||||||
|
} else {
|
||||||
|
const { rescheduleAllReminders } = await import('@/services/notifications');
|
||||||
|
const { collections } = await import('@/database');
|
||||||
|
const tasks = await collections.tasks.query().fetch();
|
||||||
|
await rescheduleAllReminders(tasks, true, reminderPreference);
|
||||||
|
}
|
||||||
|
}}
|
||||||
thumbColor="#FFFFFF"
|
thumbColor="#FFFFFF"
|
||||||
trackColor={{ false: theme.borderStrong, true: theme.accent }}
|
trackColor={{ false: theme.borderStrong, true: theme.accent }}
|
||||||
/>
|
/>
|
||||||
@@ -188,14 +270,12 @@ export default function SettingsScreen() {
|
|||||||
onPress={() => notifications && setPicker('reminder')}
|
onPress={() => notifications && setPicker('reminder')}
|
||||||
showChevron
|
showChevron
|
||||||
/>
|
/>
|
||||||
{categories.map((category) => (
|
{categories.map(category => (
|
||||||
<ListItem
|
<ListItem
|
||||||
key={`tag-reminder-${category.id}`}
|
key={`tag-reminder-${category.id}`}
|
||||||
title={category.name}
|
title={category.name}
|
||||||
subtitle={notifications ? tagReminderLabel(category.id) : 'Enable notifications first'}
|
subtitle={notifications ? tagReminderLabel(category.id) : 'Enable notifications first'}
|
||||||
leftElement={
|
leftElement={<View style={[styles.categoryDot, { backgroundColor: category.color }]} />}
|
||||||
<View style={[styles.categoryDot, { backgroundColor: category.color }]} />
|
|
||||||
}
|
|
||||||
onPress={() => notifications && setReminderTagPicker(category)}
|
onPress={() => notifications && setReminderTagPicker(category)}
|
||||||
showChevron
|
showChevron
|
||||||
/>
|
/>
|
||||||
@@ -209,7 +289,7 @@ export default function SettingsScreen() {
|
|||||||
/>
|
/>
|
||||||
<ListItem
|
<ListItem
|
||||||
title="Sort Tasks By"
|
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')}
|
onPress={() => setPicker('sort')}
|
||||||
showChevron
|
showChevron
|
||||||
/>
|
/>
|
||||||
@@ -247,7 +327,7 @@ export default function SettingsScreen() {
|
|||||||
<Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Appearance</Text>
|
<Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Appearance</Text>
|
||||||
<Text style={[styles.sectionHint, { color: theme.textFaint }]}>Accent color</Text>
|
<Text style={[styles.sectionHint, { color: theme.textFaint }]}>Accent color</Text>
|
||||||
<View style={styles.accentPresets}>
|
<View style={styles.accentPresets}>
|
||||||
{ACCENT_PRESETS.map((c) => (
|
{ACCENT_PRESETS.map(c => (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
key={c}
|
key={c}
|
||||||
style={[
|
style={[
|
||||||
@@ -260,7 +340,14 @@ export default function SettingsScreen() {
|
|||||||
>
|
>
|
||||||
{accentColor.toUpperCase() === c && (
|
{accentColor.toUpperCase() === c && (
|
||||||
<Svg width={16} height={16} viewBox="0 0 24 24">
|
<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>
|
</Svg>
|
||||||
)}
|
)}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
@@ -273,6 +360,15 @@ export default function SettingsScreen() {
|
|||||||
onPress={openCustomAccent}
|
onPress={openCustomAccent}
|
||||||
showChevron
|
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>
|
<Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Data</Text>
|
||||||
<SyncStatus />
|
<SyncStatus />
|
||||||
<ListItem
|
<ListItem
|
||||||
@@ -281,6 +377,32 @@ export default function SettingsScreen() {
|
|||||||
onPress={() => setSyncVisible(true)}
|
onPress={() => setSyncVisible(true)}
|
||||||
showChevron
|
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
|
<ListItem
|
||||||
title="Friends"
|
title="Friends"
|
||||||
subtitle="Manage friends and requests"
|
subtitle="Manage friends and requests"
|
||||||
@@ -301,26 +423,19 @@ export default function SettingsScreen() {
|
|||||||
onPress={handleCheckUpdates}
|
onPress={handleCheckUpdates}
|
||||||
showChevron
|
showChevron
|
||||||
/>
|
/>
|
||||||
<ListItem
|
<ListItem title="Last checked" subtitle={lastUpdateCheck ?? 'Never'} />
|
||||||
title="Version"
|
<ListItem title="Version" subtitle={getCurrentAppVersion()} />
|
||||||
subtitle={getCurrentAppVersion()}
|
<ListItem title="Privacy Policy" onPress={() => setLegalVisible('privacy')} showChevron />
|
||||||
/>
|
<ListItem title="Terms of Service" onPress={() => setLegalVisible('terms')} showChevron />
|
||||||
<ListItem
|
|
||||||
title="Privacy Policy"
|
|
||||||
onPress={() => setLegalVisible('privacy')}
|
|
||||||
showChevron
|
|
||||||
/>
|
|
||||||
<ListItem
|
|
||||||
title="Terms of Service"
|
|
||||||
onPress={() => setLegalVisible('terms')}
|
|
||||||
showChevron
|
|
||||||
/>
|
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
|
|
||||||
<OptionPickerModal
|
<OptionPickerModal
|
||||||
visible={picker === 'category'}
|
visible={picker === 'category'}
|
||||||
title="Default Tag"
|
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}
|
selectedValue={defaultCategoryId}
|
||||||
onSelect={handleDefaultCategory}
|
onSelect={handleDefaultCategory}
|
||||||
onClose={() => setPicker(null)}
|
onClose={() => setPicker(null)}
|
||||||
@@ -331,7 +446,7 @@ export default function SettingsScreen() {
|
|||||||
title="Sort Tasks By"
|
title="Sort Tasks By"
|
||||||
options={SORT_OPTIONS}
|
options={SORT_OPTIONS}
|
||||||
selectedValue={sortBy}
|
selectedValue={sortBy}
|
||||||
onSelect={(value) => setSortBy(value as typeof sortBy)}
|
onSelect={value => setSortBy(value as typeof sortBy)}
|
||||||
onClose={() => setPicker(null)}
|
onClose={() => setPicker(null)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -344,15 +459,15 @@ export default function SettingsScreen() {
|
|||||||
onClose={() => setPicker(null)}
|
onClose={() => setPicker(null)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{categories.map((category) => (
|
{categories.map(category => (
|
||||||
<OptionPickerModal
|
<OptionPickerModal
|
||||||
key={`tag-reminder-picker-${category.id}`}
|
key={`tag-reminder-picker-${category.id}`}
|
||||||
visible={reminderTagPicker?.id === category.id}
|
visible={reminderTagPicker?.id === category.id}
|
||||||
title={`Reminders · ${category.name}`}
|
title={`Reminders · ${category.name}`}
|
||||||
options={REMINDER_OPTIONS.filter((o) => o.value !== 'none')}
|
options={REMINDER_OPTIONS.filter(o => o.value !== 'none')}
|
||||||
selectedValue={tagReminderPreferences[category.id] ?? []}
|
selectedValue={tagReminderPreferences[category.id] ?? []}
|
||||||
multiSelect
|
multiSelect
|
||||||
onSelect={(value) => handleTagReminderPreference(category.id, value)}
|
onSelect={value => handleTagReminderPreference(category.id, value)}
|
||||||
onClose={() => setReminderTagPicker(null)}
|
onClose={() => setReminderTagPicker(null)}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
@@ -366,6 +481,15 @@ export default function SettingsScreen() {
|
|||||||
onClose={() => setPicker(null)}
|
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
|
<CategoryEditorModal
|
||||||
visible={editorVisible}
|
visible={editorVisible}
|
||||||
category={editorCategory}
|
category={editorCategory}
|
||||||
@@ -373,41 +497,86 @@ export default function SettingsScreen() {
|
|||||||
onClose={() => setEditingCategory(null)}
|
onClose={() => setEditingCategory(null)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<SyncModal visible={syncVisible} onClose={() => { setSyncVisible(false); refreshSyncStatus(); }} />
|
<SyncModal
|
||||||
|
visible={syncVisible}
|
||||||
|
onClose={() => {
|
||||||
|
setSyncVisible(false);
|
||||||
|
refreshSyncStatus();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
<FriendsModal visible={friendsVisible} onClose={() => setFriendsVisible(false)} />
|
<FriendsModal visible={friendsVisible} onClose={() => setFriendsVisible(false)} />
|
||||||
|
|
||||||
<ServerUrlModal visible={serverUrlVisible} onClose={() => setServerUrlVisible(false)} />
|
<ServerUrlModal visible={serverUrlVisible} onClose={() => setServerUrlVisible(false)} />
|
||||||
|
|
||||||
<Modal visible={customAccentVisible} transparent animationType="fade" onRequestClose={() => setCustomAccentVisible(false)}>
|
<Modal
|
||||||
<Pressable
|
visible={customAccentVisible}
|
||||||
style={styles.accentModalOverlay}
|
transparent
|
||||||
onPress={() => setCustomAccentVisible(false)}
|
animationType="fade"
|
||||||
>
|
onRequestClose={() => setCustomAccentVisible(false)}
|
||||||
<Pressable style={[styles.accentModalSheet, { backgroundColor: theme.sheetBg }]} onPress={() => {}}>
|
>
|
||||||
|
<Pressable style={styles.accentModalOverlay} onPress={() => setCustomAccentVisible(false)}>
|
||||||
|
<Pressable
|
||||||
|
style={[styles.accentModalSheet, { backgroundColor: theme.sheetBg }]}
|
||||||
|
onPress={() => {}}
|
||||||
|
>
|
||||||
<View style={styles.accentModalHeader}>
|
<View style={styles.accentModalHeader}>
|
||||||
<Text style={[styles.accentModalTitle, { color: theme.text }]}>Custom Accent Color</Text>
|
<Text style={[styles.accentModalTitle, { color: theme.text }]}>
|
||||||
<TouchableOpacity onPress={() => setCustomAccentVisible(false)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
|
Custom Accent Color
|
||||||
|
</Text>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => setCustomAccentVisible(false)}
|
||||||
|
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
|
||||||
|
>
|
||||||
<Svg width={18} height={18} viewBox="0 0 24 24">
|
<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>
|
</Svg>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
<ColorWheel color={draftAccent} onChange={setDraftAccent} />
|
<ColorWheel
|
||||||
|
color={draftAccent}
|
||||||
|
opacity={draftAccentOpacity}
|
||||||
|
onChange={(color, opacity) => {
|
||||||
|
setDraftAccent(color);
|
||||||
|
setDraftAccentOpacity(opacity);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<View style={styles.accentModalActions}>
|
<View style={styles.accentModalActions}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[styles.accentModalButton, { borderColor: theme.borderStrong }]}
|
style={[styles.accentModalButton, { borderColor: theme.borderStrong }]}
|
||||||
onPress={() => { setDraftAccent(DEFAULT_ACCENT); setAccentColor(DEFAULT_ACCENT); }}
|
onPress={() => {
|
||||||
|
setDraftAccent(DEFAULT_ACCENT);
|
||||||
|
setDraftAccentOpacity(DEFAULT_ACCENT_OPACITY);
|
||||||
|
setAccentColor(DEFAULT_ACCENT);
|
||||||
|
setAccentOpacity(DEFAULT_ACCENT_OPACITY);
|
||||||
|
}}
|
||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
>
|
>
|
||||||
<Text style={[styles.accentModalButtonText, { color: theme.textSecondary }]}>Reset</Text>
|
<Text style={[styles.accentModalButtonText, { color: theme.textSecondary }]}>
|
||||||
|
Reset
|
||||||
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[styles.accentModalButton, styles.accentModalButtonPrimary, { backgroundColor: theme.accent }]}
|
style={[
|
||||||
onPress={() => { setAccentColor(draftAccent); setCustomAccentVisible(false); }}
|
styles.accentModalButton,
|
||||||
|
styles.accentModalButtonPrimary,
|
||||||
|
{ backgroundColor: theme.accent },
|
||||||
|
]}
|
||||||
|
onPress={() => {
|
||||||
|
setAccentColor(draftAccent);
|
||||||
|
setAccentOpacity(draftAccentOpacity);
|
||||||
|
setCustomAccentVisible(false);
|
||||||
|
}}
|
||||||
activeOpacity={0.8}
|
activeOpacity={0.8}
|
||||||
>
|
>
|
||||||
<Text style={[styles.accentModalButtonText, { color: theme.accentText }]}>Apply</Text>
|
<Text style={[styles.accentModalButtonText, { color: theme.accentText }]}>
|
||||||
|
Apply
|
||||||
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
@@ -428,6 +597,12 @@ const AHEAD_OPTIONS: { value: string; label: string }[] = Array.from({ length: 2
|
|||||||
label: i === 0 ? 'Only today' : `${i} day${i === 1 ? '' : 's'}`,
|
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 {
|
function formatSyncTime(timestamp: number): string {
|
||||||
const seconds = Math.floor((Date.now() - timestamp) / 1000);
|
const seconds = Math.floor((Date.now() - timestamp) / 1000);
|
||||||
if (seconds < 60) return 'just now';
|
if (seconds < 60) return 'just now';
|
||||||
|
|||||||
@@ -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 (
|
return (
|
||||||
<SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
|
<SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
|
||||||
@@ -25,27 +25,42 @@ export default function StatsScreen() {
|
|||||||
<Text style={[styles.cardTitle, { color: theme.textMuted }]}>Overview</Text>
|
<Text style={[styles.cardTitle, { color: theme.textMuted }]}>Overview</Text>
|
||||||
<View style={styles.summaryGrid}>
|
<View style={styles.summaryGrid}>
|
||||||
<View style={styles.summaryItem}>
|
<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>
|
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Completed</Text>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.summaryItem}>
|
<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>
|
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Last 7 days</Text>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.summaryItem}>
|
<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>
|
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Last 30 days</Text>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.summaryItem}>
|
<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>
|
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Success rate</Text>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.summaryItem}>
|
<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>
|
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Day streak</Text>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.summaryItem}>
|
<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}
|
{stats.overdueCount}
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Overdue</Text>
|
<Text style={[styles.summaryLabel, { color: theme.textMuted }]}>Overdue</Text>
|
||||||
@@ -64,7 +79,10 @@ export default function StatsScreen() {
|
|||||||
<View
|
<View
|
||||||
style={[
|
style={[
|
||||||
styles.chartBar,
|
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>
|
</View>
|
||||||
@@ -78,9 +96,11 @@ export default function StatsScreen() {
|
|||||||
<View style={[styles.card, { backgroundColor: theme.card }]}>
|
<View style={[styles.card, { backgroundColor: theme.card }]}>
|
||||||
<Text style={[styles.cardTitle, { color: theme.textMuted }]}>By tags</Text>
|
<Text style={[styles.cardTitle, { color: theme.textMuted }]}>By tags</Text>
|
||||||
{stats.byCategory.length === 0 ? (
|
{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 key={c.id} style={styles.row}>
|
||||||
<View style={[styles.dot, { backgroundColor: c.color }]} />
|
<View style={[styles.dot, { backgroundColor: c.color }]} />
|
||||||
<Text style={[styles.rowLabel, { color: theme.text }]}>{c.name}</Text>
|
<Text style={[styles.rowLabel, { color: theme.text }]}>{c.name}</Text>
|
||||||
@@ -93,9 +113,11 @@ export default function StatsScreen() {
|
|||||||
<View style={[styles.card, { backgroundColor: theme.card }]}>
|
<View style={[styles.card, { backgroundColor: theme.card }]}>
|
||||||
<Text style={[styles.cardTitle, { color: theme.textMuted }]}>By priority</Text>
|
<Text style={[styles.cardTitle, { color: theme.textMuted }]}>By priority</Text>
|
||||||
{stats.byPriority.length === 0 ? (
|
{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 key={p.priority} style={styles.row}>
|
||||||
<View style={[styles.dot, { backgroundColor: priorityColor(theme, p.priority) }]} />
|
<View style={[styles.dot, { backgroundColor: priorityColor(theme, p.priority) }]} />
|
||||||
<Text style={[styles.rowLabel, { color: theme.text }]}>{p.label}</Text>
|
<Text style={[styles.rowLabel, { color: theme.text }]}>{p.label}</Text>
|
||||||
@@ -206,4 +228,4 @@ const styles = StyleSheet.create({
|
|||||||
emptyText: {
|
emptyText: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -8,9 +8,13 @@ import { UpdateNotifier } from '@/components/UpdateNotifier';
|
|||||||
import { Linking } from 'react-native';
|
import { Linking } from 'react-native';
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { requestQuickAddFocus } from '@/utils/quickAddFocus';
|
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 * as Notifications from 'expo-notifications';
|
||||||
import { Platform } from 'react-native';
|
|
||||||
|
|
||||||
Notifications.setNotificationHandler({
|
Notifications.setNotificationHandler({
|
||||||
handleNotification: async () => ({
|
handleNotification: async () => ({
|
||||||
@@ -29,7 +33,7 @@ function RootNavigator() {
|
|||||||
setupNotificationChannels();
|
setupNotificationChannels();
|
||||||
registerForPushNotificationsAsync().catch(() => {});
|
registerForPushNotificationsAsync().catch(() => {});
|
||||||
|
|
||||||
const responseListener = addNotificationResponseReceivedListener((response) => {
|
const responseListener = addNotificationResponseReceivedListener(response => {
|
||||||
const data = response.notification.request.content.data as Record<string, any> | undefined;
|
const data = response.notification.request.content.data as Record<string, any> | undefined;
|
||||||
if (!data) return;
|
if (!data) return;
|
||||||
|
|
||||||
@@ -54,18 +58,29 @@ function RootNavigator() {
|
|||||||
requestQuickAddFocus();
|
requestQuickAddFocus();
|
||||||
};
|
};
|
||||||
|
|
||||||
Linking.getInitialURL().then(handleUrl).catch(() => {});
|
Linking.getInitialURL()
|
||||||
|
.then(handleUrl)
|
||||||
|
.catch(() => {});
|
||||||
const subscription = Linking.addEventListener('url', ({ url }) => handleUrl(url));
|
const subscription = Linking.addEventListener('url', ({ url }) => handleUrl(url));
|
||||||
|
|
||||||
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
router.back();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('keydown', handleKeyDown);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
subscription.remove();
|
subscription.remove();
|
||||||
removeNotificationSubscription(responseListener);
|
removeNotificationSubscription(responseListener);
|
||||||
|
window.removeEventListener('keydown', handleKeyDown);
|
||||||
};
|
};
|
||||||
}, [router]);
|
}, [router]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GestureHandlerRootView style={{ flex: 1 }}>
|
<GestureHandlerRootView style={{ flex: 1 }}>
|
||||||
<StatusBar style="light" />
|
<StatusBar style="dark" />
|
||||||
<Stack screenOptions={{ headerShown: false }}>
|
<Stack screenOptions={{ headerShown: false }}>
|
||||||
<Stack.Screen name="(tabs)" />
|
<Stack.Screen name="(tabs)" />
|
||||||
<Stack.Screen name="add-task" />
|
<Stack.Screen name="add-task" />
|
||||||
|
|||||||
@@ -1,5 +1,14 @@
|
|||||||
import React, { useMemo, useRef } from 'react';
|
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 { Header } from '@/components/Header';
|
||||||
import { CategorySelector } from '@/components/CategorySelector';
|
import { CategorySelector } from '@/components/CategorySelector';
|
||||||
import { TaskNameInput } from '@/components/TaskNameInput';
|
import { TaskNameInput } from '@/components/TaskNameInput';
|
||||||
@@ -112,15 +121,16 @@ export default function AddTaskScreen() {
|
|||||||
|
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const dueDateTimestamp = data.dueDate ? data.dueDate.getTime() : 0;
|
const dueDateTimestamp = data.dueDate ? data.dueDate.getTime() : 0;
|
||||||
const seriesId = data.repeat !== 'none'
|
const seriesId =
|
||||||
? `series_${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36)}`
|
data.repeat !== 'none'
|
||||||
: '';
|
? `series_${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36)}`
|
||||||
|
: '';
|
||||||
const resolvedCategoryId = (data.tags && data.tags[0]) || '';
|
const resolvedCategoryId = (data.tags && data.tags[0]) || '';
|
||||||
|
|
||||||
let createdTask: any = null;
|
let createdTask: any = null;
|
||||||
|
|
||||||
await database.write(async () => {
|
await database.write(async () => {
|
||||||
const task = await collections.tasks.create((t) => {
|
const task = await collections.tasks.create(t => {
|
||||||
t.title = data.title.trim();
|
t.title = data.title.trim();
|
||||||
t.description = data.description || '';
|
t.description = data.description || '';
|
||||||
t.categoryId = resolvedCategoryId;
|
t.categoryId = resolvedCategoryId;
|
||||||
@@ -146,7 +156,7 @@ export default function AddTaskScreen() {
|
|||||||
for (let i = 0; i < data.subtasks.length; i++) {
|
for (let i = 0; i < data.subtasks.length; i++) {
|
||||||
const subtask = data.subtasks[i];
|
const subtask = data.subtasks[i];
|
||||||
if (subtask.title.trim()) {
|
if (subtask.title.trim()) {
|
||||||
await collections.subtasks.create((s) => {
|
await collections.subtasks.create(s => {
|
||||||
s.taskId = task.id;
|
s.taskId = task.id;
|
||||||
s.title = subtask.title.trim();
|
s.title = subtask.title.trim();
|
||||||
s.description = '';
|
s.description = '';
|
||||||
@@ -198,7 +208,7 @@ export default function AddTaskScreen() {
|
|||||||
>
|
>
|
||||||
<CategorySelector
|
<CategorySelector
|
||||||
value={tags}
|
value={tags}
|
||||||
onChange={(value) => setValue('tags', value)}
|
onChange={value => setValue('tags', value)}
|
||||||
error={errors.categoryId?.message}
|
error={errors.categoryId?.message}
|
||||||
/>
|
/>
|
||||||
<Controller
|
<Controller
|
||||||
@@ -214,10 +224,7 @@ export default function AddTaskScreen() {
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<SubtasksSection control={control} />
|
<SubtasksSection control={control} />
|
||||||
<PrioritySelector
|
<PrioritySelector value={priority} onChange={value => setValue('priority', value)} />
|
||||||
value={priority}
|
|
||||||
onChange={(value) => setValue('priority', value)}
|
|
||||||
/>
|
|
||||||
<DateTimePickerComponent control={control} />
|
<DateTimePickerComponent control={control} />
|
||||||
<RepeatSelector
|
<RepeatSelector
|
||||||
value={repeat}
|
value={repeat}
|
||||||
@@ -232,12 +239,12 @@ export default function AddTaskScreen() {
|
|||||||
<ReminderSelector
|
<ReminderSelector
|
||||||
value={reminders}
|
value={reminders}
|
||||||
hasDueDate={!!dueDate}
|
hasDueDate={!!dueDate}
|
||||||
onChange={(value) => setValue('reminders', value)}
|
onChange={value => setValue('reminders', value)}
|
||||||
/>
|
/>
|
||||||
<AssigneeSelector
|
<AssigneeSelector
|
||||||
value={assigneeId}
|
value={assigneeId}
|
||||||
onChange={(value: string | null) => setValue('assigneeId', value)}
|
onChange={(value: string | null) => setValue('assigneeId', value)}
|
||||||
friends={friends.map((f) => f.username)}
|
friends={friends.map(f => f.username)}
|
||||||
/>
|
/>
|
||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
|
|||||||
@@ -1,5 +1,14 @@
|
|||||||
import React, { useCallback, useMemo } from 'react';
|
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 { useRouter, useLocalSearchParams, useFocusEffect } from 'expo-router';
|
||||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
import { Header } from '@/components/Header';
|
import { Header } from '@/components/Header';
|
||||||
@@ -17,7 +26,11 @@ import { desaturate, type ThemeColors } from '@/theme';
|
|||||||
|
|
||||||
function isDayMatch(timestamp: number, day: Date): boolean {
|
function isDayMatch(timestamp: number, day: Date): boolean {
|
||||||
const d = new Date(timestamp);
|
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() {
|
export default function DayViewScreen() {
|
||||||
@@ -53,45 +66,68 @@ export default function DayViewScreen() {
|
|||||||
const subtasksOnDay = useMemo(() => {
|
const subtasksOnDay = useMemo(() => {
|
||||||
const map = new Map<string, SubtaskData[]>();
|
const map = new Map<string, SubtaskData[]>();
|
||||||
for (const [taskId, roots] of subtasksByTask) {
|
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);
|
if (due.length > 0) map.set(taskId, due);
|
||||||
}
|
}
|
||||||
return map;
|
return map;
|
||||||
}, [subtasksByTask, day]);
|
}, [subtasksByTask, day]);
|
||||||
|
|
||||||
const handleToggleComplete = useCallback(async (taskId: string) => {
|
const handleToggleComplete = useCallback(
|
||||||
await confirmAndToggleTaskComplete(taskId, () => {
|
async (taskId: string) => {
|
||||||
refresh();
|
await confirmAndToggleTaskComplete(taskId, () => {
|
||||||
refreshSubtasks();
|
refresh();
|
||||||
});
|
refreshSubtasks();
|
||||||
}, [refresh, refreshSubtasks]);
|
});
|
||||||
|
},
|
||||||
|
[refresh, refreshSubtasks]
|
||||||
|
);
|
||||||
|
|
||||||
const handleToggleSubtask = useCallback(async (subtaskId: string) => {
|
const handleToggleSubtask = useCallback(
|
||||||
await toggleSubtaskComplete(subtaskId);
|
async (subtaskId: string) => {
|
||||||
refreshSubtasks();
|
await toggleSubtaskComplete(subtaskId);
|
||||||
}, [refreshSubtasks]);
|
refreshSubtasks();
|
||||||
|
},
|
||||||
|
[refreshSubtasks]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
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" />
|
<Header title={format(day, 'EEEE, MMM d')} showLogo={false} rightAction="Back" />
|
||||||
<KeyboardAvoidingView style={styles.kbAvoid} behavior="padding">
|
<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 ? (
|
{loading ? (
|
||||||
<View style={styles.emptyState}>
|
<View style={styles.emptyState}>
|
||||||
<Text style={[styles.emptyText, { color: theme.textSecondary }]}>Loading...</Text>
|
<Text style={[styles.emptyText, { color: theme.textSecondary }]}>Loading...</Text>
|
||||||
</View>
|
</View>
|
||||||
) : dayTasks.length === 0 && subtasksOnDay.size === 0 ? (
|
) : dayTasks.length === 0 && subtasksOnDay.size === 0 ? (
|
||||||
<View style={styles.emptyState}>
|
<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>
|
</View>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{dayTasks.map((task) => {
|
{dayTasks.map(task => {
|
||||||
const subs = subtasksOnDay.get(task.id) ?? [];
|
const subs = subtasksOnDay.get(task.id) ?? [];
|
||||||
const openCount = subs.filter((s) => !s.completed).length;
|
const openCount = subs.filter(s => !s.completed).length;
|
||||||
const cat = categories.find((c) => c.id === task.categoryId);
|
const cat = categories.find(c => c.id === task.categoryId);
|
||||||
return (
|
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}>
|
<View style={styles.eventRow}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.checkCircle}
|
style={styles.checkCircle}
|
||||||
@@ -104,41 +140,76 @@ export default function DayViewScreen() {
|
|||||||
{task.completed ? (
|
{task.completed ? (
|
||||||
<>
|
<>
|
||||||
<Circle cx={12} cy={12} r={10} fill={theme.accent} />
|
<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>
|
</Svg>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.eventTouch}
|
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}
|
activeOpacity={0.7}
|
||||||
>
|
>
|
||||||
<Text
|
<Text
|
||||||
style={[styles.eventTitle, { color: theme.text }, task.completed && styles.eventCompleted]}
|
style={[
|
||||||
|
styles.eventTitle,
|
||||||
|
{ color: theme.text },
|
||||||
|
task.completed && styles.eventCompleted,
|
||||||
|
]}
|
||||||
numberOfLines={1}
|
numberOfLines={1}
|
||||||
>
|
>
|
||||||
{task.title}
|
{task.title}
|
||||||
</Text>
|
</Text>
|
||||||
{openCount > 0 && (
|
{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'}
|
{openCount} open subtask{openCount === 1 ? '' : 's'}
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
{!task.completed && (
|
{!task.completed && (
|
||||||
<View style={styles.metaRow}>
|
<View style={styles.metaRow}>
|
||||||
{cat && (
|
{cat && (
|
||||||
<View style={[styles.tagChip, { backgroundColor: desaturate(cat.color, 0.3) }]}>
|
<View
|
||||||
<Text style={styles.tagText} numberOfLines={1}>{cat.name}</Text>
|
style={[
|
||||||
|
styles.tagChip,
|
||||||
|
{ backgroundColor: desaturate(cat.color, 0.3) },
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Text style={styles.tagText} numberOfLines={1}>
|
||||||
|
{cat.name}
|
||||||
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
{task.dueTime ? (
|
{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 ? (
|
) : 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}
|
) : null}
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
@@ -152,7 +223,14 @@ export default function DayViewScreen() {
|
|||||||
accessibilityLabel={`Edit ${task.title}`}
|
accessibilityLabel={`Edit ${task.title}`}
|
||||||
>
|
>
|
||||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
<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>
|
</Svg>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
@@ -160,10 +238,16 @@ export default function DayViewScreen() {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{Array.from(subtasksOnDay.entries()).flatMap(([taskId, subs]) => {
|
{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 [];
|
if (parent) return [];
|
||||||
return subs.map((sub) => (
|
return subs.map(sub => (
|
||||||
<View key={sub.id} style={[styles.eventCard, { backgroundColor: theme.card, borderColor: theme.border }]}>
|
<View
|
||||||
|
key={sub.id}
|
||||||
|
style={[
|
||||||
|
styles.eventCard,
|
||||||
|
{ backgroundColor: theme.card, borderColor: theme.border },
|
||||||
|
]}
|
||||||
|
>
|
||||||
<View style={styles.eventRow}>
|
<View style={styles.eventRow}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.checkCircle}
|
style={styles.checkCircle}
|
||||||
@@ -176,26 +260,49 @@ export default function DayViewScreen() {
|
|||||||
{sub.completed ? (
|
{sub.completed ? (
|
||||||
<>
|
<>
|
||||||
<Circle cx={12} cy={12} r={10} fill={theme.accent} />
|
<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>
|
</Svg>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.eventTouch}
|
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}
|
activeOpacity={0.7}
|
||||||
>
|
>
|
||||||
<Text
|
<Text
|
||||||
style={[styles.eventTitle, { color: theme.text }, sub.completed && styles.eventCompleted]}
|
style={[
|
||||||
|
styles.eventTitle,
|
||||||
|
{ color: theme.text },
|
||||||
|
sub.completed && styles.eventCompleted,
|
||||||
|
]}
|
||||||
numberOfLines={1}
|
numberOfLines={1}
|
||||||
>
|
>
|
||||||
{sub.title}
|
{sub.title}
|
||||||
</Text>
|
</Text>
|
||||||
{sub.dueTime ? (
|
{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}
|
) : null}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
@@ -205,89 +312,93 @@ export default function DayViewScreen() {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</ScrollView>
|
</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>
|
</KeyboardAvoidingView>
|
||||||
{modals(() => {})}
|
{modals(() => {})}
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const createStyles = (theme: ThemeColors) => StyleSheet.create({
|
const createStyles = (theme: ThemeColors) =>
|
||||||
container: {
|
StyleSheet.create({
|
||||||
flex: 1,
|
container: {
|
||||||
},
|
flex: 1,
|
||||||
kbAvoid: {
|
},
|
||||||
flex: 1,
|
kbAvoid: {
|
||||||
},
|
flex: 1,
|
||||||
scrollBody: {
|
},
|
||||||
flex: 1,
|
scrollBody: {
|
||||||
},
|
flex: 1,
|
||||||
scrollContent: {
|
},
|
||||||
paddingTop: 12,
|
scrollContent: {
|
||||||
paddingBottom: 16,
|
paddingTop: 12,
|
||||||
},
|
paddingBottom: 16,
|
||||||
emptyState: {
|
},
|
||||||
alignItems: 'center',
|
emptyState: {
|
||||||
paddingVertical: 64,
|
alignItems: 'center',
|
||||||
},
|
paddingVertical: 64,
|
||||||
emptyText: {
|
},
|
||||||
fontSize: 15,
|
emptyText: {
|
||||||
fontWeight: '600',
|
fontSize: 15,
|
||||||
},
|
fontWeight: '600',
|
||||||
eventCard: {
|
},
|
||||||
marginHorizontal: 16,
|
eventCard: {
|
||||||
marginBottom: 8,
|
marginHorizontal: 16,
|
||||||
borderRadius: 16,
|
marginBottom: 8,
|
||||||
borderWidth: 1,
|
borderRadius: 16,
|
||||||
paddingHorizontal: 14,
|
borderWidth: 1,
|
||||||
paddingVertical: 12,
|
paddingHorizontal: 14,
|
||||||
},
|
paddingVertical: 12,
|
||||||
eventRow: {
|
},
|
||||||
flexDirection: 'row',
|
eventRow: {
|
||||||
alignItems: 'center',
|
flexDirection: 'row',
|
||||||
},
|
alignItems: 'center',
|
||||||
checkCircle: {
|
},
|
||||||
width: 30,
|
checkCircle: {
|
||||||
marginRight: 12,
|
width: 30,
|
||||||
},
|
marginRight: 12,
|
||||||
eventTouch: {
|
},
|
||||||
flex: 1,
|
eventTouch: {
|
||||||
},
|
flex: 1,
|
||||||
eventTitle: {
|
},
|
||||||
fontSize: 15,
|
eventTitle: {
|
||||||
fontWeight: '500',
|
fontSize: 15,
|
||||||
},
|
fontWeight: '500',
|
||||||
eventCompleted: {
|
},
|
||||||
textDecorationLine: 'line-through',
|
eventCompleted: {
|
||||||
color: theme.textMuted,
|
textDecorationLine: 'line-through',
|
||||||
},
|
color: theme.textMuted,
|
||||||
eventSub: {
|
},
|
||||||
fontSize: 13,
|
eventSub: {
|
||||||
marginTop: 2,
|
fontSize: 13,
|
||||||
},
|
marginTop: 2,
|
||||||
metaRow: {
|
},
|
||||||
flexDirection: 'row',
|
metaRow: {
|
||||||
alignItems: 'center',
|
flexDirection: 'row',
|
||||||
gap: 8,
|
alignItems: 'center',
|
||||||
marginTop: 4,
|
gap: 8,
|
||||||
},
|
marginTop: 4,
|
||||||
tagChip: {
|
},
|
||||||
paddingHorizontal: 7,
|
tagChip: {
|
||||||
paddingVertical: 2,
|
paddingHorizontal: 7,
|
||||||
borderRadius: 6,
|
paddingVertical: 2,
|
||||||
maxWidth: 140,
|
borderRadius: 6,
|
||||||
},
|
maxWidth: 140,
|
||||||
tagText: {
|
},
|
||||||
color: '#FFFFFF',
|
tagText: {
|
||||||
fontSize: 10,
|
color: '#FFFFFF',
|
||||||
fontWeight: '600',
|
fontSize: 10,
|
||||||
},
|
fontWeight: '600',
|
||||||
timeText: {
|
},
|
||||||
fontSize: 12.5,
|
timeText: {
|
||||||
fontWeight: '500',
|
fontSize: 12.5,
|
||||||
},
|
fontWeight: '500',
|
||||||
menuButton: {
|
},
|
||||||
padding: 4,
|
menuButton: {
|
||||||
marginLeft: 6,
|
padding: 4,
|
||||||
},
|
marginLeft: 6,
|
||||||
});
|
},
|
||||||
|
});
|
||||||
|
|||||||
@@ -1,5 +1,15 @@
|
|||||||
import React from 'react';
|
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 { useLocalSearchParams, useRouter } from 'expo-router';
|
||||||
import { Header } from '@/components/Header';
|
import { Header } from '@/components/Header';
|
||||||
import { TaskNameInput } from '@/components/TaskNameInput';
|
import { TaskNameInput } from '@/components/TaskNameInput';
|
||||||
@@ -15,7 +25,14 @@ import { zodResolver } from '@hookform/resolvers/zod';
|
|||||||
import { z } from 'zod';
|
import { z } from 'zod';
|
||||||
import { useDatabase } from '@/hooks/useDatabase';
|
import { useDatabase } from '@/hooks/useDatabase';
|
||||||
import { collections } from '@/database';
|
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 { useSettings } from '@/theme';
|
||||||
import { updateSubtask, deleteSubtask } from '@/utils/taskActions';
|
import { updateSubtask, deleteSubtask } from '@/utils/taskActions';
|
||||||
import { CategorySelector } from '@/components/CategorySelector';
|
import { CategorySelector } from '@/components/CategorySelector';
|
||||||
@@ -68,7 +85,14 @@ export default function SubtaskDetailScreen() {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { handleSubmit, watch, setValue, control, reset, formState: { errors } } = methods;
|
const {
|
||||||
|
handleSubmit,
|
||||||
|
watch,
|
||||||
|
setValue,
|
||||||
|
control,
|
||||||
|
reset,
|
||||||
|
formState: { errors },
|
||||||
|
} = methods;
|
||||||
|
|
||||||
const priority = watch('priority');
|
const priority = watch('priority');
|
||||||
const tags = watch('tags') ?? [];
|
const tags = watch('tags') ?? [];
|
||||||
@@ -98,7 +122,10 @@ export default function SubtaskDetailScreen() {
|
|||||||
allDay: subtask.allDay ?? false,
|
allDay: subtask.allDay ?? false,
|
||||||
repeat: subtask.repeat,
|
repeat: subtask.repeat,
|
||||||
repeatInterval: subtask.repeatInterval || 1,
|
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,
|
reminder: (subtask.reminder || 'none') as Reminder,
|
||||||
reminders: subtask.reminders || '',
|
reminders: subtask.reminders || '',
|
||||||
assigneeId: subtask.assigneeId ?? null,
|
assigneeId: subtask.assigneeId ?? null,
|
||||||
@@ -160,7 +187,9 @@ export default function SubtaskDetailScreen() {
|
|||||||
if (!isReady || !loaded) {
|
if (!isReady || !loaded) {
|
||||||
return (
|
return (
|
||||||
<View style={[styles.loadingContainer, { backgroundColor: theme.background }]}>
|
<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>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -171,9 +200,23 @@ export default function SubtaskDetailScreen() {
|
|||||||
title="Edit Subtask"
|
title="Edit Subtask"
|
||||||
showLogo={true}
|
showLogo={true}
|
||||||
rightAction={
|
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">
|
<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>
|
</Svg>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
}
|
}
|
||||||
@@ -201,14 +244,8 @@ export default function SubtaskDetailScreen() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<CategorySelector
|
<CategorySelector value={tags} onChange={value => setValue('tags', value)} />
|
||||||
value={tags}
|
<PrioritySelector value={priority} onChange={value => setValue('priority', value)} />
|
||||||
onChange={(value) => setValue('tags', value)}
|
|
||||||
/>
|
|
||||||
<PrioritySelector
|
|
||||||
value={priority}
|
|
||||||
onChange={(value) => setValue('priority', value)}
|
|
||||||
/>
|
|
||||||
<DateTimePickerComponent control={control as any} />
|
<DateTimePickerComponent control={control as any} />
|
||||||
<RepeatSelector
|
<RepeatSelector
|
||||||
value={repeat}
|
value={repeat}
|
||||||
@@ -223,12 +260,12 @@ export default function SubtaskDetailScreen() {
|
|||||||
<ReminderSelector
|
<ReminderSelector
|
||||||
value={reminders}
|
value={reminders}
|
||||||
hasDueDate={!!dueDate}
|
hasDueDate={!!dueDate}
|
||||||
onChange={(value) => setValue('reminders', value)}
|
onChange={value => setValue('reminders', value)}
|
||||||
/>
|
/>
|
||||||
<AssigneeSelector
|
<AssigneeSelector
|
||||||
value={assigneeId}
|
value={assigneeId}
|
||||||
onChange={(value: string | null) => setValue('assigneeId', value)}
|
onChange={(value: string | null) => setValue('assigneeId', value)}
|
||||||
friends={friends.map((f) => f.username)}
|
friends={friends.map(f => f.username)}
|
||||||
/>
|
/>
|
||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
|
|||||||
@@ -1,5 +1,15 @@
|
|||||||
import React, { useRef } from 'react';
|
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 { useLocalSearchParams, useRouter } from 'expo-router';
|
||||||
import { Header } from '@/components/Header';
|
import { Header } from '@/components/Header';
|
||||||
import { CategorySelector } from '@/components/CategorySelector';
|
import { CategorySelector } from '@/components/CategorySelector';
|
||||||
@@ -47,13 +57,27 @@ const taskSchema = z.object({
|
|||||||
subtasks: z.array(z.object({ title: z.string(), _key: z.string().optional() })).optional(),
|
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 { theme } = useSettings();
|
||||||
const [expanded, setExpanded] = React.useState(defaultExpanded);
|
const [expanded, setExpanded] = React.useState(defaultExpanded);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.section}>
|
<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}>
|
<View style={styles.sectionHeaderLeft}>
|
||||||
{icon}
|
{icon}
|
||||||
<Text style={[styles.sectionTitle, { color: theme.text }]}>{title}</Text>
|
<Text style={[styles.sectionTitle, { color: theme.text }]}>{title}</Text>
|
||||||
@@ -106,7 +130,14 @@ export default function TaskDetailScreen() {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { handleSubmit, watch, setValue, control, reset, formState: { errors } } = methods;
|
const {
|
||||||
|
handleSubmit,
|
||||||
|
watch,
|
||||||
|
setValue,
|
||||||
|
control,
|
||||||
|
reset,
|
||||||
|
formState: { errors },
|
||||||
|
} = methods;
|
||||||
|
|
||||||
const tags = watch('tags') ?? [];
|
const tags = watch('tags') ?? [];
|
||||||
const priority = watch('priority');
|
const priority = watch('priority');
|
||||||
@@ -129,7 +160,8 @@ export default function TaskDetailScreen() {
|
|||||||
const subtasks = await collections.subtasks.query(Q.where('task_id', id)).fetch();
|
const subtasks = await collections.subtasks.query(Q.where('task_id', id)).fetch();
|
||||||
|
|
||||||
if (!mounted) return;
|
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({
|
reset({
|
||||||
title: task.title,
|
title: task.title,
|
||||||
@@ -143,11 +175,14 @@ export default function TaskDetailScreen() {
|
|||||||
allDay: task.allDay ?? false,
|
allDay: task.allDay ?? false,
|
||||||
repeat: task.repeat,
|
repeat: task.repeat,
|
||||||
repeatInterval: task.repeatInterval || 1,
|
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'],
|
reminder: (task.reminder || 'none') as TaskFormData['reminder'],
|
||||||
reminders: remindersValue,
|
reminders: remindersValue,
|
||||||
assigneeId: task.assigneeId ?? null,
|
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);
|
setLoaded(true);
|
||||||
} catch {
|
} catch {
|
||||||
@@ -155,7 +190,9 @@ export default function TaskDetailScreen() {
|
|||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
return () => { mounted = false; };
|
return () => {
|
||||||
|
mounted = false;
|
||||||
|
};
|
||||||
}, [id, isReady, reset]);
|
}, [id, isReady, reset]);
|
||||||
|
|
||||||
const onSubmit = async (data: TaskFormData) => {
|
const onSubmit = async (data: TaskFormData) => {
|
||||||
@@ -174,7 +211,7 @@ export default function TaskDetailScreen() {
|
|||||||
savedTask = task;
|
savedTask = task;
|
||||||
const existingSubtasks = await collections.subtasks.query(Q.where('task_id', id)).fetch();
|
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.title = data.title.trim();
|
||||||
t.description = data.description || '';
|
t.description = data.description || '';
|
||||||
t.categoryId = (data.tags && data.tags[0]) || task.categoryId || '';
|
t.categoryId = (data.tags && data.tags[0]) || task.categoryId || '';
|
||||||
@@ -202,10 +239,10 @@ export default function TaskDetailScreen() {
|
|||||||
const trimmed = formItem.title.trim();
|
const trimmed = formItem.title.trim();
|
||||||
if (!trimmed) continue;
|
if (!trimmed) continue;
|
||||||
if (formItem._key) {
|
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) {
|
if (existing) {
|
||||||
keptIds.add(existing.id);
|
keptIds.add(existing.id);
|
||||||
await existing.update((s) => {
|
await existing.update(s => {
|
||||||
s.title = trimmed;
|
s.title = trimmed;
|
||||||
s.order = order;
|
s.order = order;
|
||||||
s.updatedAt = now;
|
s.updatedAt = now;
|
||||||
@@ -214,7 +251,7 @@ export default function TaskDetailScreen() {
|
|||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
await collections.subtasks.create((s) => {
|
await collections.subtasks.create(s => {
|
||||||
s.taskId = task.id;
|
s.taskId = task.id;
|
||||||
s.categoryId = task.categoryId || '';
|
s.categoryId = task.categoryId || '';
|
||||||
s.tags = task.tags || '';
|
s.tags = task.tags || '';
|
||||||
@@ -244,9 +281,11 @@ export default function TaskDetailScreen() {
|
|||||||
if (existing.parentSubtaskId) continue;
|
if (existing.parentSubtaskId) continue;
|
||||||
if (keptIds.has(existing.id)) continue;
|
if (keptIds.has(existing.id)) continue;
|
||||||
removedIds.push(existing.id);
|
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) {
|
for (const child of children) {
|
||||||
await child.update((c) => {
|
await child.update(c => {
|
||||||
c.parentSubtaskId = null;
|
c.parentSubtaskId = null;
|
||||||
c.updatedAt = now;
|
c.updatedAt = now;
|
||||||
});
|
});
|
||||||
@@ -288,9 +327,23 @@ export default function TaskDetailScreen() {
|
|||||||
title="Edit Task"
|
title="Edit Task"
|
||||||
showLogo={true}
|
showLogo={true}
|
||||||
rightAction={
|
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">
|
<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>
|
</Svg>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
}
|
}
|
||||||
@@ -310,7 +363,7 @@ export default function TaskDetailScreen() {
|
|||||||
>
|
>
|
||||||
<CategorySelector
|
<CategorySelector
|
||||||
value={tags}
|
value={tags}
|
||||||
onChange={(value) => setValue('tags', value)}
|
onChange={value => setValue('tags', value)}
|
||||||
error={errors.categoryId?.message}
|
error={errors.categoryId?.message}
|
||||||
/>
|
/>
|
||||||
<Controller
|
<Controller
|
||||||
@@ -326,32 +379,49 @@ export default function TaskDetailScreen() {
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<SubtasksSection control={control} />
|
<SubtasksSection control={control} />
|
||||||
<PrioritySelector
|
<PrioritySelector value={priority} onChange={value => setValue('priority', value)} />
|
||||||
value={priority}
|
|
||||||
onChange={(value) => setValue('priority', value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<CollapsibleSection title="Date & Time" icon={
|
<CollapsibleSection
|
||||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
title="Date & Time"
|
||||||
<Circle cx={12} cy={12} r={10} stroke={theme.accent} strokeWidth={1.8} fill="none" />
|
icon={
|
||||||
<Path d="M12 6v6l4 2" stroke={theme.accent} strokeWidth={1.8} strokeLinecap="round" />
|
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||||
</Svg>
|
<Circle
|
||||||
} defaultExpanded={!!dueDate}>
|
cx={12}
|
||||||
|
cy={12}
|
||||||
|
r={10}
|
||||||
|
stroke={theme.accent}
|
||||||
|
strokeWidth={1.8}
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
<Path
|
||||||
|
d="M12 6v6l4 2"
|
||||||
|
stroke={theme.accent}
|
||||||
|
strokeWidth={1.8}
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
|
</Svg>
|
||||||
|
}
|
||||||
|
defaultExpanded={!!dueDate}
|
||||||
|
>
|
||||||
<DateTimePickerComponent control={control} />
|
<DateTimePickerComponent control={control} />
|
||||||
</CollapsibleSection>
|
</CollapsibleSection>
|
||||||
|
|
||||||
<CollapsibleSection title="Repeat" icon={
|
<CollapsibleSection
|
||||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
title="Repeat"
|
||||||
<Path
|
icon={
|
||||||
d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3"
|
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||||
stroke={theme.accent}
|
<Path
|
||||||
strokeWidth={1.8}
|
d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3"
|
||||||
strokeLinecap="round"
|
stroke={theme.accent}
|
||||||
strokeLinejoin="round"
|
strokeWidth={1.8}
|
||||||
fill="none"
|
strokeLinecap="round"
|
||||||
/>
|
strokeLinejoin="round"
|
||||||
</Svg>
|
fill="none"
|
||||||
} defaultExpanded={repeat !== 'none'}>
|
/>
|
||||||
|
</Svg>
|
||||||
|
}
|
||||||
|
defaultExpanded={repeat !== 'none'}
|
||||||
|
>
|
||||||
<RepeatSelector
|
<RepeatSelector
|
||||||
value={repeat}
|
value={repeat}
|
||||||
interval={repeatInterval}
|
interval={repeatInterval}
|
||||||
@@ -364,43 +434,74 @@ export default function TaskDetailScreen() {
|
|||||||
/>
|
/>
|
||||||
</CollapsibleSection>
|
</CollapsibleSection>
|
||||||
|
|
||||||
<CollapsibleSection title="Reminder" icon={
|
<CollapsibleSection
|
||||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
title="Reminder"
|
||||||
<Path
|
icon={
|
||||||
d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"
|
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||||
stroke={theme.accent}
|
<Path
|
||||||
strokeWidth={1.8}
|
d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"
|
||||||
strokeLinecap="round"
|
stroke={theme.accent}
|
||||||
strokeLinejoin="round"
|
strokeWidth={1.8}
|
||||||
fill="none"
|
strokeLinecap="round"
|
||||||
/>
|
strokeLinejoin="round"
|
||||||
</Svg>
|
fill="none"
|
||||||
} defaultExpanded={!!reminders && reminders !== ''}>
|
/>
|
||||||
|
</Svg>
|
||||||
|
}
|
||||||
|
defaultExpanded={!!reminders && reminders !== ''}
|
||||||
|
>
|
||||||
<ReminderSelector
|
<ReminderSelector
|
||||||
value={reminders}
|
value={reminders}
|
||||||
hasDueDate={!!dueDate}
|
hasDueDate={!!dueDate}
|
||||||
onChange={(value) => setValue('reminders', value)}
|
onChange={value => setValue('reminders', value)}
|
||||||
/>
|
/>
|
||||||
</CollapsibleSection>
|
</CollapsibleSection>
|
||||||
|
|
||||||
<CollapsibleSection title="Assignee" icon={
|
<CollapsibleSection
|
||||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
title="Assignee"
|
||||||
<Circle cx={12} cy={12} r={10} stroke={theme.accent} strokeWidth={1.8} fill="none" />
|
icon={
|
||||||
<Path d="M12 10v6M12 19v1" stroke={theme.accent} strokeWidth={1.8} strokeLinecap="round" />
|
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||||
</Svg>
|
<Circle
|
||||||
} defaultExpanded={!!assigneeId}>
|
cx={12}
|
||||||
|
cy={12}
|
||||||
|
r={10}
|
||||||
|
stroke={theme.accent}
|
||||||
|
strokeWidth={1.8}
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
<Path
|
||||||
|
d="M12 10v6M12 19v1"
|
||||||
|
stroke={theme.accent}
|
||||||
|
strokeWidth={1.8}
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
|
</Svg>
|
||||||
|
}
|
||||||
|
defaultExpanded={!!assigneeId}
|
||||||
|
>
|
||||||
<AssigneeSelector
|
<AssigneeSelector
|
||||||
value={assigneeId}
|
value={assigneeId}
|
||||||
onChange={(value: string | null) => setValue('assigneeId', value)}
|
onChange={(value: string | null) => setValue('assigneeId', value)}
|
||||||
friends={friends.map((f) => f.username)}
|
friends={friends.map(f => f.username)}
|
||||||
/>
|
/>
|
||||||
</CollapsibleSection>
|
</CollapsibleSection>
|
||||||
|
|
||||||
<CollapsibleSection title="Description" icon={
|
<CollapsibleSection
|
||||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
title="Description"
|
||||||
<Path d="M4 6h16M4 12h16M4 18h10" stroke={theme.accent} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
icon={
|
||||||
</Svg>
|
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||||
} defaultExpanded={!!methods.getValues('description')}>
|
<Path
|
||||||
|
d="M4 6h16M4 12h16M4 18h10"
|
||||||
|
stroke={theme.accent}
|
||||||
|
strokeWidth={1.8}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
</Svg>
|
||||||
|
}
|
||||||
|
defaultExpanded={!!methods.getValues('description')}
|
||||||
|
>
|
||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
name="description"
|
name="description"
|
||||||
|
|||||||
@@ -9,22 +9,23 @@
|
|||||||
"@react-native-async-storage/async-storage": "2.2.0",
|
"@react-native-async-storage/async-storage": "2.2.0",
|
||||||
"@react-native-community/datetimepicker": "9.1.0",
|
"@react-native-community/datetimepicker": "9.1.0",
|
||||||
"date-fns": "^3.6.0",
|
"date-fns": "^3.6.0",
|
||||||
"expo": "~57.0.10",
|
"expo": "~57.0.18",
|
||||||
"expo-blur": "~57.0.2",
|
"expo-blur": "~57.0.2",
|
||||||
"expo-constants": "~57.0.9",
|
"expo-constants": "~57.0.9",
|
||||||
"expo-dev-client": "~57.0.1",
|
"expo-dev-client": "~57.0.16",
|
||||||
"expo-device": "^57.0.1",
|
"expo-device": "^57.0.1",
|
||||||
"expo-linking": "~57.0.5",
|
"expo-intent-launcher": "~57.0.1",
|
||||||
"expo-notifications": "~57.0.8",
|
"expo-linking": "~57.0.8",
|
||||||
"expo-router": "~57.0.10",
|
"expo-notifications": "~57.0.15",
|
||||||
"expo-sqlite": "~57.0.1",
|
"expo-router": "~57.0.17",
|
||||||
|
"expo-sqlite": "~57.0.2",
|
||||||
"expo-status-bar": "~57.0.1",
|
"expo-status-bar": "~57.0.1",
|
||||||
"expo-system-ui": "~57.0.2",
|
"expo-system-ui": "~57.0.3",
|
||||||
"expo-updates": "~57.0.12",
|
"expo-updates": "~57.0.19",
|
||||||
"react": "19.2.3",
|
"react": "19.2.3",
|
||||||
"react-dom": "19.2.3",
|
"react-dom": "19.2.3",
|
||||||
"react-hook-form": "^7.51.5",
|
"react-hook-form": "^7.51.5",
|
||||||
"react-native": "0.86.2",
|
"react-native": "0.86.3",
|
||||||
"react-native-gesture-handler": "2.32.0",
|
"react-native-gesture-handler": "2.32.0",
|
||||||
"react-native-keyboard-controller": "1.21.9",
|
"react-native-keyboard-controller": "1.21.9",
|
||||||
"react-native-safe-area-context": "5.7.0",
|
"react-native-safe-area-context": "5.7.0",
|
||||||
@@ -40,7 +41,7 @@
|
|||||||
"electron": "^41.7.1",
|
"electron": "^41.7.1",
|
||||||
"electron-builder": "^26.15.3",
|
"electron-builder": "^26.15.3",
|
||||||
"eslint": "^9.0.0",
|
"eslint": "^9.0.0",
|
||||||
"eslint-config-expo": "~57.0.1",
|
"eslint-config-expo": "~57.0.2",
|
||||||
"patch-package": "^8.0.1",
|
"patch-package": "^8.0.1",
|
||||||
"prettier": "^3.9.6",
|
"prettier": "^3.9.6",
|
||||||
"typescript": "~6.0.3"
|
"typescript": "~6.0.3"
|
||||||
|
|||||||
@@ -0,0 +1,78 @@
|
|||||||
|
diff --git a/node_modules/react-native/src/private/webapis/dom/events/Event.js b/node_modules/react-native/src/private/webapis/dom/events/Event.js
|
||||||
|
index f918f97..5deab46 100644
|
||||||
|
--- a/node_modules/react-native/src/private/webapis/dom/events/Event.js
|
||||||
|
+++ b/node_modules/react-native/src/private/webapis/dom/events/Event.js
|
||||||
|
@@ -70,7 +70,7 @@ export default class Event {
|
||||||
|
[CURRENT_TARGET_KEY]: EventTarget | null = null;
|
||||||
|
|
||||||
|
// $FlowExpectedError[unsupported-syntax]
|
||||||
|
- [EVENT_PHASE_KEY]: boolean = Event.NONE;
|
||||||
|
+ [EVENT_PHASE_KEY]: boolean = 0;
|
||||||
|
|
||||||
|
// $FlowExpectedError[unsupported-syntax]
|
||||||
|
[IN_PASSIVE_LISTENER_FLAG_KEY]: boolean = false;
|
||||||
|
@@ -193,48 +193,64 @@ export default class Event {
|
||||||
|
|
||||||
|
// $FlowExpectedError[cannot-write]
|
||||||
|
Object.defineProperty(Event, 'NONE', {
|
||||||
|
+ writable: true,
|
||||||
|
+ configurable: true,
|
||||||
|
enumerable: true,
|
||||||
|
value: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
// $FlowExpectedError[cannot-write]
|
||||||
|
Object.defineProperty(Event.prototype, 'NONE', {
|
||||||
|
+ writable: true,
|
||||||
|
+ configurable: true,
|
||||||
|
enumerable: true,
|
||||||
|
value: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
// $FlowExpectedError[cannot-write]
|
||||||
|
Object.defineProperty(Event, 'CAPTURING_PHASE', {
|
||||||
|
+ writable: true,
|
||||||
|
+ configurable: true,
|
||||||
|
enumerable: true,
|
||||||
|
value: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
// $FlowExpectedError[cannot-write]
|
||||||
|
Object.defineProperty(Event.prototype, 'CAPTURING_PHASE', {
|
||||||
|
+ writable: true,
|
||||||
|
+ configurable: true,
|
||||||
|
enumerable: true,
|
||||||
|
value: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
// $FlowExpectedError[cannot-write]
|
||||||
|
Object.defineProperty(Event, 'AT_TARGET', {
|
||||||
|
+ writable: true,
|
||||||
|
+ configurable: true,
|
||||||
|
enumerable: true,
|
||||||
|
value: 2,
|
||||||
|
});
|
||||||
|
|
||||||
|
// $FlowExpectedError[cannot-write]
|
||||||
|
Object.defineProperty(Event.prototype, 'AT_TARGET', {
|
||||||
|
+ writable: true,
|
||||||
|
+ configurable: true,
|
||||||
|
enumerable: true,
|
||||||
|
value: 2,
|
||||||
|
});
|
||||||
|
|
||||||
|
// $FlowExpectedError[cannot-write]
|
||||||
|
Object.defineProperty(Event, 'BUBBLING_PHASE', {
|
||||||
|
+ writable: true,
|
||||||
|
+ configurable: true,
|
||||||
|
enumerable: true,
|
||||||
|
value: 3,
|
||||||
|
});
|
||||||
|
|
||||||
|
// $FlowExpectedError[cannot-write]
|
||||||
|
Object.defineProperty(Event.prototype, 'BUBBLING_PHASE', {
|
||||||
|
+ writable: true,
|
||||||
|
+ configurable: true,
|
||||||
|
enumerable: true,
|
||||||
|
value: 3,
|
||||||
|
});
|
||||||
@@ -49,9 +49,9 @@ export function AnalogClock({ value, is24Hour = false, onChange }: AnalogClockPr
|
|||||||
let hour: number;
|
let hour: number;
|
||||||
if (is24Hour) {
|
if (is24Hour) {
|
||||||
const inner = distance < INNER_NUM_RADIUS + 14;
|
const inner = distance < INNER_NUM_RADIUS + 14;
|
||||||
hour = inner ? base + 12 : (base === 0 ? 12 : base);
|
hour = inner ? base + 12 : base === 0 ? 12 : base;
|
||||||
} else {
|
} else {
|
||||||
hour = isPM ? base + 12 : (base === 0 ? 0 : base);
|
hour = isPM ? base + 12 : base === 0 ? 0 : base;
|
||||||
}
|
}
|
||||||
emit(hour, minutes);
|
emit(hour, minutes);
|
||||||
setMode('minute');
|
setMode('minute');
|
||||||
@@ -135,23 +135,24 @@ export function AnalogClock({ value, is24Hour = false, onChange }: AnalogClockPr
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
const minuteDots = mode === 'minute'
|
const minuteDots =
|
||||||
? Array.from({ length: 12 }, (_, i) => {
|
mode === 'minute'
|
||||||
const angle = (i * 30 * Math.PI) / 180;
|
? Array.from({ length: 12 }, (_, i) => {
|
||||||
const x = CENTER + RADIUS * 0.82 * Math.sin(angle);
|
const angle = (i * 30 * Math.PI) / 180;
|
||||||
const y = CENTER - RADIUS * 0.82 * Math.cos(angle);
|
const x = CENTER + RADIUS * 0.82 * Math.sin(angle);
|
||||||
const active = Math.round(minutes / 5) % 12 === i;
|
const y = CENTER - RADIUS * 0.82 * Math.cos(angle);
|
||||||
return (
|
const active = Math.round(minutes / 5) % 12 === i;
|
||||||
<Circle
|
return (
|
||||||
key={`min-dot-${i}`}
|
<Circle
|
||||||
cx={x}
|
key={`min-dot-${i}`}
|
||||||
cy={y}
|
cx={x}
|
||||||
r={active ? 5 : 3}
|
cy={y}
|
||||||
fill={active ? theme.accent : theme.accentBorder}
|
r={active ? 5 : 3}
|
||||||
/>
|
fill={active ? theme.accent : theme.accentBorder}
|
||||||
);
|
/>
|
||||||
})
|
);
|
||||||
: null;
|
})
|
||||||
|
: null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
@@ -181,7 +182,7 @@ export function AnalogClock({ value, is24Hour = false, onChange }: AnalogClockPr
|
|||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
{!is24Hour && (
|
{!is24Hour && (
|
||||||
<View style={styles.periodGroup}>
|
<View style={styles.periodGroup}>
|
||||||
{(['AM', 'PM'] as const).map((period) => {
|
{(['AM', 'PM'] as const).map(period => {
|
||||||
const active = isPM === (period === 'PM');
|
const active = isPM === (period === 'PM');
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
@@ -215,15 +216,15 @@ export function AnalogClock({ value, is24Hour = false, onChange }: AnalogClockPr
|
|||||||
style={styles.clockSurface}
|
style={styles.clockSurface}
|
||||||
onStartShouldSetResponder={() => true}
|
onStartShouldSetResponder={() => true}
|
||||||
onMoveShouldSetResponder={() => true}
|
onMoveShouldSetResponder={() => true}
|
||||||
onResponderGrant={(e) => {
|
onResponderGrant={e => {
|
||||||
movedRef.current = false;
|
movedRef.current = false;
|
||||||
onLocation(e, false);
|
onLocation(e, false);
|
||||||
}}
|
}}
|
||||||
onResponderMove={(e) => {
|
onResponderMove={e => {
|
||||||
movedRef.current = true;
|
movedRef.current = true;
|
||||||
onLocation(e, true);
|
onLocation(e, true);
|
||||||
}}
|
}}
|
||||||
onResponderRelease={(e) => {
|
onResponderRelease={e => {
|
||||||
if (!movedRef.current) {
|
if (!movedRef.current) {
|
||||||
onLocation(e, false);
|
onLocation(e, false);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,15 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { View, Text, TouchableOpacity, StyleSheet, Modal, FlatList, ActivityIndicator, TextInput, KeyboardAvoidingView } from 'react-native';
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
StyleSheet,
|
||||||
|
Modal,
|
||||||
|
FlatList,
|
||||||
|
ActivityIndicator,
|
||||||
|
TextInput,
|
||||||
|
KeyboardAvoidingView,
|
||||||
|
} from 'react-native';
|
||||||
import { useSettings } from '@/theme';
|
import { useSettings } from '@/theme';
|
||||||
import { useFriends } from '@/hooks/useFriends';
|
import { useFriends } from '@/hooks/useFriends';
|
||||||
|
|
||||||
@@ -82,19 +92,14 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
|
|||||||
<Text style={[styles.selectorIcon, { color: theme.accentStrong }]}>👤</Text>
|
<Text style={[styles.selectorIcon, { color: theme.accentStrong }]}>👤</Text>
|
||||||
<View style={styles.selectorContent}>
|
<View style={styles.selectorContent}>
|
||||||
<Text style={[styles.selectorLabel, { color: theme.textMuted }]}>Assignee</Text>
|
<Text style={[styles.selectorLabel, { color: theme.textMuted }]}>Assignee</Text>
|
||||||
<Text
|
<Text style={[styles.selectorValue, { color: value ? theme.text : theme.textMuted }]}>
|
||||||
style={[
|
|
||||||
styles.selectorValue,
|
|
||||||
{ color: value ? theme.text : theme.textMuted },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{selectedFriend ? selectedFriend.username : 'Unassigned'}
|
{selectedFriend ? selectedFriend.username : 'Unassigned'}
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
{value && !disabled && (
|
{value && !disabled && (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.clearButton}
|
style={styles.clearButton}
|
||||||
onPress={(e) => {
|
onPress={e => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
handleClear();
|
handleClear();
|
||||||
}}
|
}}
|
||||||
@@ -105,7 +110,12 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
|
|||||||
)}
|
)}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
||||||
<Modal visible={showModal} transparent animationType="fade" onRequestClose={() => setShowModal(false)}>
|
<Modal
|
||||||
|
visible={showModal}
|
||||||
|
transparent
|
||||||
|
animationType="fade"
|
||||||
|
onRequestClose={() => setShowModal(false)}
|
||||||
|
>
|
||||||
<KeyboardAvoidingView
|
<KeyboardAvoidingView
|
||||||
style={[styles.modalOverlay, { backgroundColor: 'rgba(0,0,0,0.5)' }]}
|
style={[styles.modalOverlay, { backgroundColor: 'rgba(0,0,0,0.5)' }]}
|
||||||
behavior="padding"
|
behavior="padding"
|
||||||
@@ -113,7 +123,10 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
|
|||||||
<View style={[styles.modalSheet, { backgroundColor: theme.sheetBg }]}>
|
<View style={[styles.modalSheet, { backgroundColor: theme.sheetBg }]}>
|
||||||
<View style={styles.modalHeader}>
|
<View style={styles.modalHeader}>
|
||||||
<Text style={[styles.modalTitle, { color: theme.text }]}>Assign Task</Text>
|
<Text style={[styles.modalTitle, { color: theme.text }]}>Assign Task</Text>
|
||||||
<TouchableOpacity onPress={() => setShowModal(false)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
|
<TouchableOpacity
|
||||||
|
onPress={() => setShowModal(false)}
|
||||||
|
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
|
||||||
|
>
|
||||||
<Text style={[styles.closeText, { color: theme.textMuted }]}>✕</Text>
|
<Text style={[styles.closeText, { color: theme.textMuted }]}>✕</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
@@ -122,7 +135,10 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
|
|||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[
|
style={[
|
||||||
styles.optionRow,
|
styles.optionRow,
|
||||||
{ backgroundColor: selectedFriend ? theme.accentSoft : 'transparent', borderColor: selectedFriend ? theme.accent : 'transparent' },
|
{
|
||||||
|
backgroundColor: selectedFriend ? theme.accentSoft : 'transparent',
|
||||||
|
borderColor: selectedFriend ? theme.accent : 'transparent',
|
||||||
|
},
|
||||||
]}
|
]}
|
||||||
onPress={() => handleClear()}
|
onPress={() => handleClear()}
|
||||||
>
|
>
|
||||||
@@ -143,7 +159,9 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
|
|||||||
<ActivityIndicator color={theme.accent} size="large" />
|
<ActivityIndicator color={theme.accent} size="large" />
|
||||||
</View>
|
</View>
|
||||||
) : friends.length === 0 ? (
|
) : friends.length === 0 ? (
|
||||||
<Text style={[styles.emptyText, { color: theme.textFaint }]}>No friends yet. Add friends to assign tasks.</Text>
|
<Text style={[styles.emptyText, { color: theme.textFaint }]}>
|
||||||
|
No friends yet. Add friends to assign tasks.
|
||||||
|
</Text>
|
||||||
) : (
|
) : (
|
||||||
<FlatList
|
<FlatList
|
||||||
data={friends}
|
data={friends}
|
||||||
@@ -152,14 +170,19 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
|
|||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[
|
style={[
|
||||||
styles.optionRow,
|
styles.optionRow,
|
||||||
{ backgroundColor: value === item.id ? theme.accentSoft : 'transparent', borderColor: value === item.id ? theme.accent : 'transparent' },
|
{
|
||||||
|
backgroundColor: value === item.id ? theme.accentSoft : 'transparent',
|
||||||
|
borderColor: value === item.id ? theme.accent : 'transparent',
|
||||||
|
},
|
||||||
]}
|
]}
|
||||||
onPress={() => handleSelectFriend(item.id)}
|
onPress={() => handleSelectFriend(item.id)}
|
||||||
>
|
>
|
||||||
<View style={styles.optionIcon}>
|
<View style={styles.optionIcon}>
|
||||||
<Text style={styles.optionIconText}>👤</Text>
|
<Text style={styles.optionIconText}>👤</Text>
|
||||||
</View>
|
</View>
|
||||||
<Text style={[styles.optionText, { color: theme.text }]}>{item.username}</Text>
|
<Text style={[styles.optionText, { color: theme.text }]}>
|
||||||
|
{item.username}
|
||||||
|
</Text>
|
||||||
{value === item.id && (
|
{value === item.id && (
|
||||||
<Text style={[styles.checkmark, { color: theme.accentStrong }]}>✓</Text>
|
<Text style={[styles.checkmark, { color: theme.accentStrong }]}>✓</Text>
|
||||||
)}
|
)}
|
||||||
@@ -172,7 +195,14 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
|
|||||||
<View style={styles.modalSection}>
|
<View style={styles.modalSection}>
|
||||||
<View style={styles.searchContainer}>
|
<View style={styles.searchContainer}>
|
||||||
<TextInput
|
<TextInput
|
||||||
style={[styles.searchInput, { backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text }]}
|
style={[
|
||||||
|
styles.searchInput,
|
||||||
|
{
|
||||||
|
backgroundColor: theme.inputBg,
|
||||||
|
borderColor: theme.borderStrong,
|
||||||
|
color: theme.text,
|
||||||
|
},
|
||||||
|
]}
|
||||||
placeholder="Search users by username"
|
placeholder="Search users by username"
|
||||||
placeholderTextColor={theme.textMuted}
|
placeholderTextColor={theme.textMuted}
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
@@ -197,15 +227,21 @@ export function AssigneeSelector({ value, onChange, disabled = false }: Assignee
|
|||||||
<View style={styles.optionIcon}>
|
<View style={styles.optionIcon}>
|
||||||
<Text style={styles.optionIconText}>➕</Text>
|
<Text style={styles.optionIconText}>➕</Text>
|
||||||
</View>
|
</View>
|
||||||
<Text style={[styles.optionText, { color: theme.text }]}>{item.username}</Text>
|
<Text style={[styles.optionText, { color: theme.text }]}>
|
||||||
<Text style={[styles.optionSubtext, { color: theme.textMuted }]}>Add as friend & assign</Text>
|
{item.username}
|
||||||
|
</Text>
|
||||||
|
<Text style={[styles.optionSubtext, { color: theme.textMuted }]}>
|
||||||
|
Add as friend & assign
|
||||||
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
) : searchQuery.length >= 2 && searchResults.length === 0 && !searching ? (
|
) : searchQuery.length >= 2 && searchResults.length === 0 && !searching ? (
|
||||||
<Text style={[styles.emptyText, { color: theme.textFaint }]}>No users found</Text>
|
<Text style={[styles.emptyText, { color: theme.textFaint }]}>No users found</Text>
|
||||||
) : searchQuery.length < 2 ? (
|
) : searchQuery.length < 2 ? (
|
||||||
<Text style={[styles.emptyText, { color: theme.textFaint }]}>Type at least 2 characters to search</Text>
|
<Text style={[styles.emptyText, { color: theme.textFaint }]}>
|
||||||
|
Type at least 2 characters to search
|
||||||
|
</Text>
|
||||||
) : null}
|
) : null}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
@@ -348,4 +384,4 @@ const styles = StyleSheet.create({
|
|||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,5 +1,17 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { Modal, View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform, Pressable, useWindowDimensions } from 'react-native';
|
import {
|
||||||
|
Modal,
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
TextInput,
|
||||||
|
TouchableOpacity,
|
||||||
|
ScrollView,
|
||||||
|
KeyboardAvoidingView,
|
||||||
|
Platform,
|
||||||
|
Pressable,
|
||||||
|
useWindowDimensions,
|
||||||
|
} from 'react-native';
|
||||||
import Category from '@/models/Category';
|
import Category from '@/models/Category';
|
||||||
import { useSettings } from '@/theme';
|
import { useSettings } from '@/theme';
|
||||||
import { CATEGORY_COLORS } from '@/constants';
|
import { CATEGORY_COLORS } from '@/constants';
|
||||||
@@ -15,7 +27,12 @@ interface CategoryEditorModalProps {
|
|||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function CategoryEditorModal({ visible, category, categoryCount, onClose }: CategoryEditorModalProps) {
|
export function CategoryEditorModal({
|
||||||
|
visible,
|
||||||
|
category,
|
||||||
|
categoryCount,
|
||||||
|
onClose,
|
||||||
|
}: CategoryEditorModalProps) {
|
||||||
const { theme } = useSettings();
|
const { theme } = useSettings();
|
||||||
const [name, setName] = useState('');
|
const [name, setName] = useState('');
|
||||||
const [color, setColor] = useState(CATEGORY_COLORS[0]);
|
const [color, setColor] = useState(CATEGORY_COLORS[0]);
|
||||||
@@ -64,15 +81,8 @@ export function CategoryEditorModal({ visible, category, categoryCount, onClose
|
|||||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||||
keyboardVerticalOffset={0}
|
keyboardVerticalOffset={0}
|
||||||
>
|
>
|
||||||
<Pressable
|
<Pressable style={styles.overlay} onPress={onClose} accessibilityRole="none">
|
||||||
style={styles.overlay}
|
<Pressable style={[styles.sheet, { backgroundColor: theme.sheetBg }]} onPress={() => {}}>
|
||||||
onPress={onClose}
|
|
||||||
accessibilityRole="none"
|
|
||||||
>
|
|
||||||
<Pressable
|
|
||||||
style={[styles.sheet, { backgroundColor: theme.sheetBg }]}
|
|
||||||
onPress={() => {}}
|
|
||||||
>
|
|
||||||
<ScrollView
|
<ScrollView
|
||||||
showsVerticalScrollIndicator={false}
|
showsVerticalScrollIndicator={false}
|
||||||
keyboardShouldPersistTaps="handled"
|
keyboardShouldPersistTaps="handled"
|
||||||
@@ -82,10 +92,21 @@ export function CategoryEditorModal({ visible, category, categoryCount, onClose
|
|||||||
<Text style={[styles.title, { color: theme.text }]}>
|
<Text style={[styles.title, { color: theme.text }]}>
|
||||||
{category ? 'Edit Tag' : 'New Tag'}
|
{category ? 'Edit Tag' : 'New Tag'}
|
||||||
</Text>
|
</Text>
|
||||||
<TouchableOpacity onPress={onClose} style={styles.closeButton} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} accessibilityRole="button" accessibilityLabel="Close tag editor">
|
<TouchableOpacity
|
||||||
|
onPress={onClose}
|
||||||
|
style={styles.closeButton}
|
||||||
|
hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel="Close tag editor"
|
||||||
|
>
|
||||||
<Svg width={22} height={22} viewBox="0 0 24 24">
|
<Svg width={22} height={22} viewBox="0 0 24 24">
|
||||||
<Circle cx={12} cy={12} r={10} fill={theme.cardAlt} />
|
<Circle cx={12} cy={12} r={10} fill={theme.cardAlt} />
|
||||||
<Path d="M18 6L6 18M6 6l12 12" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" />
|
<Path
|
||||||
|
d="M18 6L6 18M6 6l12 12"
|
||||||
|
stroke={theme.textSecondary}
|
||||||
|
strokeWidth={2.5}
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
</Svg>
|
</Svg>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
@@ -94,7 +115,11 @@ export function CategoryEditorModal({ visible, category, categoryCount, onClose
|
|||||||
<TextInput
|
<TextInput
|
||||||
style={[
|
style={[
|
||||||
styles.input,
|
styles.input,
|
||||||
{ backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text },
|
{
|
||||||
|
backgroundColor: theme.inputBg,
|
||||||
|
borderColor: theme.borderStrong,
|
||||||
|
color: theme.text,
|
||||||
|
},
|
||||||
]}
|
]}
|
||||||
placeholder="Tag name"
|
placeholder="Tag name"
|
||||||
placeholderTextColor={theme.textMuted}
|
placeholderTextColor={theme.textMuted}
|
||||||
@@ -107,7 +132,7 @@ export function CategoryEditorModal({ visible, category, categoryCount, onClose
|
|||||||
|
|
||||||
<Text style={[styles.label, { color: theme.textSecondary }]}>Color</Text>
|
<Text style={[styles.label, { color: theme.textSecondary }]}>Color</Text>
|
||||||
<View style={styles.colorGrid}>
|
<View style={styles.colorGrid}>
|
||||||
{CATEGORY_COLORS.map((c) => (
|
{CATEGORY_COLORS.map(c => (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
key={c}
|
key={c}
|
||||||
style={[
|
style={[
|
||||||
@@ -123,13 +148,20 @@ export function CategoryEditorModal({ visible, category, categoryCount, onClose
|
|||||||
>
|
>
|
||||||
{color === c && (
|
{color === c && (
|
||||||
<Svg width={16} height={16} viewBox="0 0 24 24">
|
<Svg width={16} height={16} viewBox="0 0 24 24">
|
||||||
<Path d="M5 12l5 5 9-10" stroke="#FFFFFF" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
<Path
|
||||||
|
d="M5 12l5 5 9-10"
|
||||||
|
stroke="#FFFFFF"
|
||||||
|
strokeWidth={3}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
</Svg>
|
</Svg>
|
||||||
)}
|
)}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
))}
|
))}
|
||||||
</View>
|
</View>
|
||||||
<ColorWheel color={color} onChange={setColor} />
|
<ColorWheel color={color} opacity={1} onChange={setColor} />
|
||||||
|
|
||||||
<View style={styles.actions}>
|
<View style={styles.actions}>
|
||||||
{category && (
|
{category && (
|
||||||
@@ -139,13 +171,22 @@ export function CategoryEditorModal({ visible, category, categoryCount, onClose
|
|||||||
disabled={!canDelete}
|
disabled={!canDelete}
|
||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
>
|
>
|
||||||
<Text style={[styles.deleteButtonText, { color: canDelete ? theme.accent : theme.textMuted }]}>
|
<Text
|
||||||
|
style={[
|
||||||
|
styles.deleteButtonText,
|
||||||
|
{ color: canDelete ? theme.accent : theme.textMuted },
|
||||||
|
]}
|
||||||
|
>
|
||||||
Delete
|
Delete
|
||||||
</Text>
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
)}
|
)}
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[styles.saveButton, { backgroundColor: theme.accent }, !name.trim() && styles.saveButtonDisabled]}
|
style={[
|
||||||
|
styles.saveButton,
|
||||||
|
{ backgroundColor: theme.accent },
|
||||||
|
!name.trim() && styles.saveButtonDisabled,
|
||||||
|
]}
|
||||||
onPress={handleSave}
|
onPress={handleSave}
|
||||||
disabled={!name.trim()}
|
disabled={!name.trim()}
|
||||||
activeOpacity={0.8}
|
activeOpacity={0.8}
|
||||||
|
|||||||
@@ -57,7 +57,7 @@ export function CategoryFilter({ selected, onSelect }: CategoryFilterProps) {
|
|||||||
isAllCategory={true}
|
isAllCategory={true}
|
||||||
scaleAnim={scaleAnim}
|
scaleAnim={scaleAnim}
|
||||||
/>
|
/>
|
||||||
{categories.map((category) => (
|
{categories.map(category => (
|
||||||
<CategoryButton
|
<CategoryButton
|
||||||
key={category.id}
|
key={category.id}
|
||||||
id={category.id}
|
id={category.id}
|
||||||
@@ -72,7 +72,10 @@ export function CategoryFilter({ selected, onSelect }: CategoryFilterProps) {
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[styles.manageButton, { borderColor: theme.borderStrong, backgroundColor: theme.cardAlt }]}
|
style={[
|
||||||
|
styles.manageButton,
|
||||||
|
{ borderColor: theme.borderStrong, backgroundColor: theme.cardAlt },
|
||||||
|
]}
|
||||||
onPress={() => router.push('/settings')}
|
onPress={() => router.push('/settings')}
|
||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
accessibilityRole="button"
|
accessibilityRole="button"
|
||||||
@@ -80,10 +83,22 @@ export function CategoryFilter({ selected, onSelect }: CategoryFilterProps) {
|
|||||||
hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
|
hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
|
||||||
>
|
>
|
||||||
<Svg width={14} height={14} viewBox="0 0 24 24">
|
<Svg width={14} height={14} viewBox="0 0 24 24">
|
||||||
<Circle cx={12} cy={12} r={9} stroke={theme.textSecondary} strokeWidth={2.2} fill="none" />
|
<Circle
|
||||||
|
cx={12}
|
||||||
|
cy={12}
|
||||||
|
r={9}
|
||||||
|
stroke={theme.textSecondary}
|
||||||
|
strokeWidth={2.2}
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
<Circle cx={12} cy={8.5} r={1.2} fill={theme.textSecondary} />
|
<Circle cx={12} cy={8.5} r={1.2} fill={theme.textSecondary} />
|
||||||
<Circle cx={12} cy={15.5} r={1.2} fill={theme.textSecondary} />
|
<Circle cx={12} cy={15.5} r={1.2} fill={theme.textSecondary} />
|
||||||
<Path d="M7.8 6.2l1 1.7M16.2 16.1l1 1.7M7.8 17.8l1-1.7M16.2 7.9l1-1.7" stroke={theme.textSecondary} strokeWidth={1.8} strokeLinecap="round" />
|
<Path
|
||||||
|
d="M7.8 6.2l1 1.7M16.2 16.1l1 1.7M7.8 17.8l1-1.7M16.2 7.9l1-1.7"
|
||||||
|
stroke={theme.textSecondary}
|
||||||
|
strokeWidth={1.8}
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
</Svg>
|
</Svg>
|
||||||
<Text style={[styles.manageLabel, { color: theme.textSecondary }]}>Manage</Text>
|
<Text style={[styles.manageLabel, { color: theme.textSecondary }]}>Manage</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
@@ -104,7 +119,16 @@ interface CategoryButtonProps {
|
|||||||
scaleAnim: Animated.Value;
|
scaleAnim: Animated.Value;
|
||||||
}
|
}
|
||||||
|
|
||||||
function CategoryButton({ color, selected, onPress, onPressIn, onPressOut, theme, isAllCategory, scaleAnim }: CategoryButtonProps) {
|
function CategoryButton({
|
||||||
|
color,
|
||||||
|
selected,
|
||||||
|
onPress,
|
||||||
|
onPressIn,
|
||||||
|
onPressOut,
|
||||||
|
theme,
|
||||||
|
isAllCategory,
|
||||||
|
scaleAnim,
|
||||||
|
}: CategoryButtonProps) {
|
||||||
const animatedStyle = {
|
const animatedStyle = {
|
||||||
transform: [{ scale: scaleAnim }],
|
transform: [{ scale: scaleAnim }],
|
||||||
shadowColor: selected ? theme.accent : '#000',
|
shadowColor: selected ? theme.accent : '#000',
|
||||||
@@ -130,8 +154,24 @@ function CategoryButton({ color, selected, onPress, onPressIn, onPressOut, theme
|
|||||||
>
|
>
|
||||||
{isAllCategory ? (
|
{isAllCategory ? (
|
||||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||||
<Circle cx={12} cy={12} r={9} stroke="#FFFFFF" strokeWidth={2.5} fill="none" opacity={0.9} />
|
<Circle
|
||||||
<Path d="M6 12l4 4 8-8" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" opacity={0.9} />
|
cx={12}
|
||||||
|
cy={12}
|
||||||
|
r={9}
|
||||||
|
stroke="#FFFFFF"
|
||||||
|
strokeWidth={2.5}
|
||||||
|
fill="none"
|
||||||
|
opacity={0.9}
|
||||||
|
/>
|
||||||
|
<Path
|
||||||
|
d="M6 12l4 4 8-8"
|
||||||
|
stroke="#FFFFFF"
|
||||||
|
strokeWidth={2.5}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
fill="none"
|
||||||
|
opacity={0.9}
|
||||||
|
/>
|
||||||
</Svg>
|
</Svg>
|
||||||
) : null}
|
) : null}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
@@ -187,4 +227,4 @@ const styles = StyleSheet.create({
|
|||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
fontWeight: '600',
|
fontWeight: '600',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,5 +1,14 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Modal, Pressable, KeyboardAvoidingView } from 'react-native';
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
TouchableOpacity,
|
||||||
|
ScrollView,
|
||||||
|
Modal,
|
||||||
|
Pressable,
|
||||||
|
KeyboardAvoidingView,
|
||||||
|
} from 'react-native';
|
||||||
import { useCategories } from '@/hooks/useDatabase';
|
import { useCategories } from '@/hooks/useDatabase';
|
||||||
import { useSettings } from '@/theme';
|
import { useSettings } from '@/theme';
|
||||||
import Svg, { Path } from 'react-native-svg';
|
import Svg, { Path } from 'react-native-svg';
|
||||||
@@ -16,7 +25,7 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
|
|||||||
const [showModal, setShowModal] = useState(false);
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
|
||||||
const selected = new Set(value);
|
const selected = new Set(value);
|
||||||
const selectedCategories = categories.filter((c) => selected.has(c.id));
|
const selectedCategories = categories.filter(c => selected.has(c.id));
|
||||||
|
|
||||||
const toggle = (id: string) => {
|
const toggle = (id: string) => {
|
||||||
const next = new Set(selected);
|
const next = new Set(selected);
|
||||||
@@ -33,7 +42,7 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
|
|||||||
? 'None'
|
? 'None'
|
||||||
: selectedCategories
|
: selectedCategories
|
||||||
.slice(0, 2)
|
.slice(0, 2)
|
||||||
.map((c) => c.name)
|
.map(c => c.name)
|
||||||
.join(', ') + (selectedCategories.length > 2 ? ` +${selectedCategories.length - 2}` : '');
|
.join(', ') + (selectedCategories.length > 2 ? ` +${selectedCategories.length - 2}` : '');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -53,10 +62,18 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
|
|||||||
<View style={styles.selectorContent}>
|
<View style={styles.selectorContent}>
|
||||||
{selectedCategories.length > 0 ? (
|
{selectedCategories.length > 0 ? (
|
||||||
<View style={styles.chipRow}>
|
<View style={styles.chipRow}>
|
||||||
{selectedCategories.slice(0, 3).map((c) => (
|
{selectedCategories.slice(0, 3).map(c => (
|
||||||
<View key={c.id} style={[styles.chip, { backgroundColor: theme.cardAlt, borderColor: theme.border }]}>
|
<View
|
||||||
|
key={c.id}
|
||||||
|
style={[
|
||||||
|
styles.chip,
|
||||||
|
{ backgroundColor: theme.cardAlt, borderColor: theme.border },
|
||||||
|
]}
|
||||||
|
>
|
||||||
<View style={[styles.colorCircle, { backgroundColor: c.color }]} />
|
<View style={[styles.colorCircle, { backgroundColor: c.color }]} />
|
||||||
<Text style={[styles.chipText, { color: theme.textSecondary }]} numberOfLines={1}>{c.name}</Text>
|
<Text style={[styles.chipText, { color: theme.textSecondary }]} numberOfLines={1}>
|
||||||
|
{c.name}
|
||||||
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
))}
|
))}
|
||||||
</View>
|
</View>
|
||||||
@@ -65,12 +82,24 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
|
|||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||||
<Path d="M9 18l6-6-6-6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
<Path
|
||||||
|
d="M9 18l6-6-6-6"
|
||||||
|
stroke={theme.textSecondary}
|
||||||
|
strokeWidth={2.5}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
</Svg>
|
</Svg>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
{error && <Text style={[styles.errorText, { color: theme.dangerStrong }]}>{error}</Text>}
|
{error && <Text style={[styles.errorText, { color: theme.dangerStrong }]}>{error}</Text>}
|
||||||
|
|
||||||
<Modal visible={showModal} transparent animationType="fade" onRequestClose={() => setShowModal(false)}>
|
<Modal
|
||||||
|
visible={showModal}
|
||||||
|
transparent
|
||||||
|
animationType="fade"
|
||||||
|
onRequestClose={() => setShowModal(false)}
|
||||||
|
>
|
||||||
<KeyboardAvoidingView
|
<KeyboardAvoidingView
|
||||||
style={[styles.modalOverlay, { backgroundColor: 'rgba(0,0,0,0.5)' }]}
|
style={[styles.modalOverlay, { backgroundColor: 'rgba(0,0,0,0.5)' }]}
|
||||||
behavior="padding"
|
behavior="padding"
|
||||||
@@ -81,7 +110,10 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
|
|||||||
<Text style={[styles.modalTitle, { color: theme.text }]}>Select Tags</Text>
|
<Text style={[styles.modalTitle, { color: theme.text }]}>Select Tags</Text>
|
||||||
<View style={styles.modalHeaderRight}>
|
<View style={styles.modalHeaderRight}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
onPress={() => { onChange([]); setShowModal(false); }}
|
onPress={() => {
|
||||||
|
onChange([]);
|
||||||
|
setShowModal(false);
|
||||||
|
}}
|
||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
accessibilityRole="button"
|
accessibilityRole="button"
|
||||||
accessibilityLabel="Clear all tags"
|
accessibilityLabel="Clear all tags"
|
||||||
@@ -102,7 +134,7 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
|
|||||||
<Text style={[styles.modalHint, { color: theme.textMuted }]}>
|
<Text style={[styles.modalHint, { color: theme.textMuted }]}>
|
||||||
A task can have multiple tags. Selected: {selected.size}
|
A task can have multiple tags. Selected: {selected.size}
|
||||||
</Text>
|
</Text>
|
||||||
{categories.map((category) => {
|
{categories.map(category => {
|
||||||
const isSelected = selected.has(category.id);
|
const isSelected = selected.has(category.id);
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
@@ -110,7 +142,11 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
|
|||||||
style={[
|
style={[
|
||||||
styles.modalOption,
|
styles.modalOption,
|
||||||
{ backgroundColor: theme.card, borderColor: theme.borderStrong },
|
{ backgroundColor: theme.card, borderColor: theme.borderStrong },
|
||||||
isSelected && { borderColor: theme.accent, backgroundColor: theme.accentSoft, borderWidth: 2 },
|
isSelected && {
|
||||||
|
borderColor: theme.accent,
|
||||||
|
backgroundColor: theme.accentSoft,
|
||||||
|
borderWidth: 2,
|
||||||
|
},
|
||||||
]}
|
]}
|
||||||
onPress={() => toggle(category.id)}
|
onPress={() => toggle(category.id)}
|
||||||
activeOpacity={0.8}
|
activeOpacity={0.8}
|
||||||
@@ -118,17 +154,32 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
|
|||||||
accessibilityLabel={`Tag ${category.name}`}
|
accessibilityLabel={`Tag ${category.name}`}
|
||||||
accessibilityState={{ checked: isSelected }}
|
accessibilityState={{ checked: isSelected }}
|
||||||
>
|
>
|
||||||
<View style={[styles.colorCircle, { backgroundColor: category.color }, isSelected && styles.colorCircleSelected]} />
|
<View
|
||||||
<Text style={[
|
style={[
|
||||||
styles.categoryName,
|
styles.colorCircle,
|
||||||
{ color: theme.textSecondary },
|
{ backgroundColor: category.color },
|
||||||
isSelected && { color: theme.text, fontWeight: '600' },
|
isSelected && styles.colorCircleSelected,
|
||||||
]}>
|
]}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
style={[
|
||||||
|
styles.categoryName,
|
||||||
|
{ color: theme.textSecondary },
|
||||||
|
isSelected && { color: theme.text, fontWeight: '600' },
|
||||||
|
]}
|
||||||
|
>
|
||||||
{category.name}
|
{category.name}
|
||||||
</Text>
|
</Text>
|
||||||
{isSelected && (
|
{isSelected && (
|
||||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||||
<Path d="M5 12l5 5 9-10" stroke={theme.accent} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
<Path
|
||||||
|
d="M5 12l5 5 9-10"
|
||||||
|
stroke={theme.accent}
|
||||||
|
strokeWidth={2.5}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
</Svg>
|
</Svg>
|
||||||
)}
|
)}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
@@ -262,4 +313,4 @@ const styles = StyleSheet.create({
|
|||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -20,16 +20,21 @@ export default function NativeColorPickerInput({ value, onChange }: ColorPickerI
|
|||||||
const valid = isValidHex(hex);
|
const valid = isValidHex(hex);
|
||||||
|
|
||||||
const handleChange = (raw: string) => {
|
const handleChange = (raw: string) => {
|
||||||
const cleaned = raw.replace(/[^0-9a-fA-F]/g, '').slice(0, 6).toUpperCase();
|
const cleaned = raw
|
||||||
|
.replace(/[^0-9a-fA-F]/g, '')
|
||||||
|
.slice(0, 6)
|
||||||
|
.toUpperCase();
|
||||||
onChange(`#${cleaned}`);
|
onChange(`#${cleaned}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.row}>
|
<View style={styles.row}>
|
||||||
<View style={[
|
<View
|
||||||
styles.preview,
|
style={[
|
||||||
{ backgroundColor: valid ? value : theme.accentSoft, borderColor: theme.accent },
|
styles.preview,
|
||||||
]} />
|
{ backgroundColor: valid ? value : theme.accentSoft, borderColor: theme.accent },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
<View style={styles.inputWrap}>
|
<View style={styles.inputWrap}>
|
||||||
<Text style={styles.hash}>#{/**/}</Text>
|
<Text style={styles.hash}>#{/**/}</Text>
|
||||||
<TextInput
|
<TextInput
|
||||||
|
|||||||
@@ -33,23 +33,48 @@ function hsvToHex(h: number, s: number, v: number) {
|
|||||||
const c = v * s;
|
const c = v * s;
|
||||||
const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
|
const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
|
||||||
const m = v - c;
|
const m = v - c;
|
||||||
let r = 0, g = 0, b = 0;
|
let r = 0,
|
||||||
if (h < 60) { r = c; g = x; b = 0; }
|
g = 0,
|
||||||
else if (h < 120) { r = x; g = c; b = 0; }
|
b = 0;
|
||||||
else if (h < 180) { r = 0; g = c; b = x; }
|
if (h < 60) {
|
||||||
else if (h < 240) { r = 0; g = x; b = c; }
|
r = c;
|
||||||
else if (h < 300) { r = x; g = 0; b = c; }
|
g = x;
|
||||||
else { r = c; g = 0; b = x; }
|
b = 0;
|
||||||
const toHex = (n: number) => Math.round((n + m) * 255).toString(16).padStart(2, '0');
|
} else if (h < 120) {
|
||||||
|
r = x;
|
||||||
|
g = c;
|
||||||
|
b = 0;
|
||||||
|
} else if (h < 180) {
|
||||||
|
r = 0;
|
||||||
|
g = c;
|
||||||
|
b = x;
|
||||||
|
} else if (h < 240) {
|
||||||
|
r = 0;
|
||||||
|
g = x;
|
||||||
|
b = c;
|
||||||
|
} else if (h < 300) {
|
||||||
|
r = x;
|
||||||
|
g = 0;
|
||||||
|
b = c;
|
||||||
|
} else {
|
||||||
|
r = c;
|
||||||
|
g = 0;
|
||||||
|
b = x;
|
||||||
|
}
|
||||||
|
const toHex = (n: number) =>
|
||||||
|
Math.round((n + m) * 255)
|
||||||
|
.toString(16)
|
||||||
|
.padStart(2, '0');
|
||||||
return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
|
return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ColorWheelProps {
|
interface ColorWheelProps {
|
||||||
color: string;
|
color: string;
|
||||||
onChange: (color: string) => void;
|
opacity: number;
|
||||||
|
onChange: (color: string, opacity: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ColorWheel({ color, onChange }: ColorWheelProps) {
|
export default function ColorWheel({ color, opacity, onChange }: ColorWheelProps) {
|
||||||
const { theme } = useSettings();
|
const { theme } = useSettings();
|
||||||
const initialHsv = useMemo(() => hexToHsv(color), [color]);
|
const initialHsv = useMemo(() => hexToHsv(color), [color]);
|
||||||
const [hue, setHue] = useState(initialHsv.h);
|
const [hue, setHue] = useState(initialHsv.h);
|
||||||
@@ -66,8 +91,8 @@ export default function ColorWheel({ color, onChange }: ColorWheelProps) {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const newColor = hsvToHex(hue, saturation, value);
|
const newColor = hsvToHex(hue, saturation, value);
|
||||||
onChange(newColor);
|
onChange(newColor, opacity);
|
||||||
}, [hue, saturation, value, onChange]);
|
}, [hue, saturation, value, opacity, onChange]);
|
||||||
|
|
||||||
const updateFromWheel = (locationX: number, locationY: number) => {
|
const updateFromWheel = (locationX: number, locationY: number) => {
|
||||||
const center = WHEEL_SIZE / 2;
|
const center = WHEEL_SIZE / 2;
|
||||||
@@ -84,35 +109,49 @@ export default function ColorWheel({ color, onChange }: ColorWheelProps) {
|
|||||||
setValue(1 - distance / radius);
|
setValue(1 - distance / radius);
|
||||||
};
|
};
|
||||||
|
|
||||||
const wheelPanResponder = React.useMemo(() => PanResponder.create({
|
const wheelPanResponder = React.useMemo(
|
||||||
onStartShouldSetPanResponder: () => true,
|
() =>
|
||||||
onMoveShouldSetPanResponder: () => true,
|
PanResponder.create({
|
||||||
onPanResponderGrant: (event) => {
|
onStartShouldSetPanResponder: () => true,
|
||||||
updateFromWheel(event.nativeEvent.locationX, event.nativeEvent.locationY);
|
onMoveShouldSetPanResponder: () => true,
|
||||||
},
|
onPanResponderGrant: event => {
|
||||||
onPanResponderMove: (event) => {
|
updateFromWheel(event.nativeEvent.locationX, event.nativeEvent.locationY);
|
||||||
updateFromWheel(event.nativeEvent.locationX, event.nativeEvent.locationY);
|
},
|
||||||
},
|
onPanResponderMove: event => {
|
||||||
}), []);
|
updateFromWheel(event.nativeEvent.locationX, event.nativeEvent.locationY);
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
const setHueFromLocation = (locationX: number) => {
|
const setHueFromLocation = (locationX: number) => {
|
||||||
setHue(Math.min(360, Math.max(0, (locationX / WHEEL_SIZE) * 360)));
|
setHue(Math.min(360, Math.max(0, (locationX / WHEEL_SIZE) * 360)));
|
||||||
};
|
};
|
||||||
|
|
||||||
const huePanResponder = React.useMemo(() => PanResponder.create({
|
const huePanResponder = React.useMemo(
|
||||||
onStartShouldSetPanResponder: () => true,
|
() =>
|
||||||
onMoveShouldSetPanResponder: () => true,
|
PanResponder.create({
|
||||||
onPanResponderGrant: (event) => {
|
onStartShouldSetPanResponder: () => true,
|
||||||
setHueFromLocation(event.nativeEvent.locationX);
|
onMoveShouldSetPanResponder: () => true,
|
||||||
},
|
onPanResponderGrant: event => {
|
||||||
onPanResponderMove: (event) => {
|
setHueFromLocation(event.nativeEvent.locationX);
|
||||||
setHueFromLocation(event.nativeEvent.locationX);
|
},
|
||||||
},
|
onPanResponderMove: event => {
|
||||||
}), []);
|
setHueFromLocation(event.nativeEvent.locationX);
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
const thumbX = ((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.cos((hue - 180) * Math.PI / 180) + (WHEEL_SIZE / 2) - (THUMB_SIZE / 2);
|
const thumbX =
|
||||||
const thumbY = ((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.sin((hue - 180) * Math.PI / 180) + (WHEEL_SIZE / 2) - (THUMB_SIZE / 2);
|
((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.cos(((hue - 180) * Math.PI) / 180) +
|
||||||
const hueThumbX = (hue / 360) * WHEEL_SIZE - (THUMB_SIZE / 2);
|
WHEEL_SIZE / 2 -
|
||||||
|
THUMB_SIZE / 2;
|
||||||
|
const thumbY =
|
||||||
|
((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.sin(((hue - 180) * Math.PI) / 180) +
|
||||||
|
WHEEL_SIZE / 2 -
|
||||||
|
THUMB_SIZE / 2;
|
||||||
|
const hueThumbX = (hue / 360) * WHEEL_SIZE - THUMB_SIZE / 2;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
@@ -180,7 +219,9 @@ export default function ColorWheel({ color, onChange }: ColorWheelProps) {
|
|||||||
|
|
||||||
<View style={styles.previewContainer}>
|
<View style={styles.previewContainer}>
|
||||||
<View style={[styles.preview, { backgroundColor: hsvToHex(hue, saturation, value) }]} />
|
<View style={[styles.preview, { backgroundColor: hsvToHex(hue, saturation, value) }]} />
|
||||||
<RNText style={[styles.previewText, { color: theme.text }]}>{hsvToHex(hue, saturation, value)}</RNText>
|
<RNText style={[styles.previewText, { color: theme.text }]}>
|
||||||
|
{hsvToHex(hue, saturation, value)}
|
||||||
|
</RNText>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
@@ -215,4 +256,4 @@ const styles = StyleSheet.create({
|
|||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
fontFamily: 'monospace',
|
fontFamily: 'monospace',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
export { default } from './ColorWheel.native';
|
export { default } from './ColorWheel.native';
|
||||||
|
|||||||
@@ -32,23 +32,48 @@ function hsvToHex(h: number, s: number, v: number) {
|
|||||||
const c = v * s;
|
const c = v * s;
|
||||||
const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
|
const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
|
||||||
const m = v - c;
|
const m = v - c;
|
||||||
let r = 0, g = 0, b = 0;
|
let r = 0,
|
||||||
if (h < 60) { r = c; g = x; b = 0; }
|
g = 0,
|
||||||
else if (h < 120) { r = x; g = c; b = 0; }
|
b = 0;
|
||||||
else if (h < 180) { r = 0; g = c; b = x; }
|
if (h < 60) {
|
||||||
else if (h < 240) { r = 0; g = x; b = c; }
|
r = c;
|
||||||
else if (h < 300) { r = x; g = 0; b = c; }
|
g = x;
|
||||||
else { r = c; g = 0; b = x; }
|
b = 0;
|
||||||
const toHex = (n: number) => Math.round((n + m) * 255).toString(16).padStart(2, '0');
|
} else if (h < 120) {
|
||||||
|
r = x;
|
||||||
|
g = c;
|
||||||
|
b = 0;
|
||||||
|
} else if (h < 180) {
|
||||||
|
r = 0;
|
||||||
|
g = c;
|
||||||
|
b = x;
|
||||||
|
} else if (h < 240) {
|
||||||
|
r = 0;
|
||||||
|
g = x;
|
||||||
|
b = c;
|
||||||
|
} else if (h < 300) {
|
||||||
|
r = x;
|
||||||
|
g = 0;
|
||||||
|
b = c;
|
||||||
|
} else {
|
||||||
|
r = c;
|
||||||
|
g = 0;
|
||||||
|
b = x;
|
||||||
|
}
|
||||||
|
const toHex = (n: number) =>
|
||||||
|
Math.round((n + m) * 255)
|
||||||
|
.toString(16)
|
||||||
|
.padStart(2, '0');
|
||||||
return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
|
return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ColorWheelProps {
|
interface ColorWheelProps {
|
||||||
color: string;
|
color: string;
|
||||||
onChange: (color: string) => void;
|
opacity: number;
|
||||||
|
onChange: (color: string, opacity: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ColorWheel({ color, onChange }: ColorWheelProps) {
|
export default function ColorWheel({ color, opacity, onChange }: ColorWheelProps) {
|
||||||
const { theme } = useSettings();
|
const { theme } = useSettings();
|
||||||
const initialHsv = useMemo(() => hexToHsv(color), [color]);
|
const initialHsv = useMemo(() => hexToHsv(color), [color]);
|
||||||
const [hue, setHue] = useState(initialHsv.h);
|
const [hue, setHue] = useState(initialHsv.h);
|
||||||
@@ -65,8 +90,8 @@ export default function ColorWheel({ color, onChange }: ColorWheelProps) {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const newColor = hsvToHex(hue, saturation, value);
|
const newColor = hsvToHex(hue, saturation, value);
|
||||||
onChange(newColor);
|
onChange(newColor, opacity);
|
||||||
}, [hue, saturation, value, onChange]);
|
}, [hue, saturation, value, opacity, onChange]);
|
||||||
|
|
||||||
const handleWheelMouseDown = (e: React.MouseEvent) => {
|
const handleWheelMouseDown = (e: React.MouseEvent) => {
|
||||||
const rect = e.currentTarget.getBoundingClientRect();
|
const rect = e.currentTarget.getBoundingClientRect();
|
||||||
@@ -108,15 +133,25 @@ export default function ColorWheel({ color, onChange }: ColorWheelProps) {
|
|||||||
handleMove(e.nativeEvent);
|
handleMove(e.nativeEvent);
|
||||||
};
|
};
|
||||||
|
|
||||||
const thumbX = ((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.cos((hue - 180) * Math.PI / 180) + (WHEEL_SIZE / 2) - (THUMB_SIZE / 2);
|
const thumbX =
|
||||||
const thumbY = ((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.sin((hue - 180) * Math.PI / 180) + (WHEEL_SIZE / 2) - (THUMB_SIZE / 2);
|
((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.cos(((hue - 180) * Math.PI) / 180) +
|
||||||
const hueThumbX = (hue / 360) * WHEEL_SIZE - (THUMB_SIZE / 2);
|
WHEEL_SIZE / 2 -
|
||||||
|
THUMB_SIZE / 2;
|
||||||
|
const thumbY =
|
||||||
|
((WHEEL_SIZE - THUMB_SIZE) / 2) * saturation * Math.sin(((hue - 180) * Math.PI) / 180) +
|
||||||
|
WHEEL_SIZE / 2 -
|
||||||
|
THUMB_SIZE / 2;
|
||||||
|
const hueThumbX = (hue / 360) * WHEEL_SIZE - THUMB_SIZE / 2;
|
||||||
const currentColor = hsvToHex(hue, saturation, value);
|
const currentColor = hsvToHex(hue, saturation, value);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<View style={styles.wheelContainer}>
|
<View style={styles.wheelContainer}>
|
||||||
<Svg width={WHEEL_SIZE} height={WHEEL_SIZE} {...({ onMouseDown: handleWheelMouseDown } as object)}>
|
<Svg
|
||||||
|
width={WHEEL_SIZE}
|
||||||
|
height={WHEEL_SIZE}
|
||||||
|
{...({ onMouseDown: handleWheelMouseDown } as object)}
|
||||||
|
>
|
||||||
<DefsElement>
|
<DefsElement>
|
||||||
<LinearGradient id="satGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
<LinearGradient id="satGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
<Stop offset="0%" stopColor={`hsl(${hue}, 100%, 50%)`} stopOpacity={1} />
|
<Stop offset="0%" stopColor={`hsl(${hue}, 100%, 50%)`} stopOpacity={1} />
|
||||||
@@ -209,4 +244,4 @@ const styles = StyleSheet.create({
|
|||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
fontFamily: 'monospace',
|
fontFamily: 'monospace',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -48,4 +48,4 @@ const styles = StyleSheet.create({
|
|||||||
width: 0,
|
width: 0,
|
||||||
height: 0,
|
height: 0,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||