Release 1.2.45

Search improvments

.eslintrc.cjs

@@ -1,36 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
-    'plugin:prettier/recommended',
-    'plugin:tailwindcss/recommended',
-  ],
-  ignorePatterns: [
-    'dist',
-    '.eslintrc.cjs',
-    'tailwind.config.js',
-    'postcss.config.js',
-  ],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: [
-    'react-refresh',
-    'simple-import-sort',
-    'sort-destructure-keys',
-    'sort-keys-fix',
-    'prettier',
-
-    'tailwindcss',
-  ],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-    'react/prop-types': 'off',
-  },
-}

.github/workflows/build.yml

@@ -2,7 +2,6 @@ name: Build validation
 
 on:
   push:
-    branches: [main]
   pull_request:
 
 jobs:
@@ -19,3 +18,4 @@ jobs:
     - name: Install dependencies
       run: npm i
     - run: npm run build
+    - run: npm run lint:ci

.prettierignore

@@ -0,0 +1,2 @@
+LICENSE.md
+dist/

.prettierrc

@@ -1,13 +0,0 @@
-{
-  "arrowParens": "avoid",
-  "bracketSpacing": true,
-  "endOfLine": "auto",
-  "jsxBracketSameLine": false,
-  "printWidth": 80,
-  "semi": false,
-  "singleQuote": true,
-  "jsxSingleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "plugins": ["prettier-plugin-tailwindcss"]
-}

android/app/build.gradle

@@ -13,8 +13,8 @@ android {
         applicationId "com.donetick.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 55
-        versionName "1.2.34"
+        versionCode 66
+        versionName "1.2.45"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

android/app/capacitor.build.gradle

@@ -9,6 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-community-in-app-review')
     implementation project(':capacitor-community-speech-recognition')
     implementation project(':capacitor-community-sqlite')
     implementation project(':capacitor-app')
@@ -20,6 +21,7 @@ dependencies {
     implementation project(':capacitor-network')
     implementation project(':capacitor-preferences')
     implementation project(':capacitor-push-notifications')
+    implementation project(':capacitor-share')
     implementation project(':capacitor-status-bar')
     implementation project(':capgo-capacitor-document-scanner')
     implementation project(':capgo-capacitor-nfc')

android/app/src/main/AndroidManifest.xml

@@ -30,6 +30,17 @@
                 <data android:scheme="donetick" />
             </intent-filter>
 
+            <!-- Verified App Link for Circle invites hosted by Donetick Cloud. -->
+            <intent-filter android:autoVerify="true">
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data
+                    android:scheme="https"
+                    android:host="app.donetick.com"
+                    android:pathPrefix="/circle/join" />
+            </intent-filter>
+
             <!-- NFC NDEF dispatch: open app directly when a donetick:// tag is scanned -->
             <intent-filter>
                 <action android:name="android.nfc.action.NDEF_DISCOVERED" />

android/capacitor.settings.gradle

@@ -2,6 +2,9 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
+include ':capacitor-community-in-app-review'
+project(':capacitor-community-in-app-review').projectDir = new File('../node_modules/@capacitor-community/in-app-review/android')
+
 include ':capacitor-community-speech-recognition'
 project(':capacitor-community-speech-recognition').projectDir = new File('../node_modules/@capacitor-community/speech-recognition/android')
 
@@ -35,6 +38,9 @@ project(':capacitor-preferences').projectDir = new File('../node_modules/@capaci
 include ':capacitor-push-notifications'
 project(':capacitor-push-notifications').projectDir = new File('../node_modules/@capacitor/push-notifications/android')
 
+include ':capacitor-share'
+project(':capacitor-share').projectDir = new File('../node_modules/@capacitor/share/android')
+
 include ':capacitor-status-bar'
 project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
 

eslint.config.mjs

@@ -0,0 +1,187 @@
+import js from '@eslint/js'
+import stylistic from '@stylistic/eslint-plugin'
+import queryPlugin from '@tanstack/eslint-plugin-query'
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import eslintConfigPrettier from 'eslint-config-prettier/flat'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import simpleImportSort from 'eslint-plugin-simple-import-sort'
+import sortDestructureKeys from 'eslint-plugin-sort-destructure-keys'
+import tailwind from 'eslint-plugin-tailwindcss'
+import globals from 'globals'
+
+export default [
+  {
+    ignores: ['dist'],
+  },
+  js.configs.recommended,
+  react.configs.flat.recommended,
+  {
+    ...react.configs.flat['jsx-runtime'],
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  reactHooks.configs.flat.recommended,
+  reactRefresh.configs.recommended,
+  {
+    plugins: {
+      'simple-import-sort': simpleImportSort,
+    },
+    rules: {
+      'simple-import-sort/exports': 'error',
+      'simple-import-sort/imports': 'error',
+    },
+  },
+  {
+    plugins: {
+      'sort-destructure-keys': sortDestructureKeys,
+    },
+    rules: {
+      'sort-destructure-keys/sort-destructure-keys': 'error',
+    },
+  },
+  ...tailwind.configs['flat/recommended'],
+  ...queryPlugin.configs['flat/recommended'],
+  eslintConfigPrettier, // Disable any rules that conflict with prettier
+  eslintPluginPrettierRecommended,
+  {
+    files: ['*.{js,ts}'],
+    languageOptions: {
+      globals: globals.node,
+    },
+  },
+  {
+    files: ['*.config.{mjs,ts}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    },
+    rules: {
+      eqeqeq: 'error',
+      indent: ['error', 2],
+      'space-infix-ops': ['error', { int32Hint: false }],
+    },
+  },
+  {
+    files: ['src/**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      globals: globals.browser,
+      sourceType: 'module',
+    },
+    plugins: {
+      '@stylistic': stylistic,
+    },
+    rules: {
+      '@stylistic/brace-style': 'error',
+      '@stylistic/comma-dangle': ['error', 'always-multiline'],
+      '@stylistic/keyword-spacing': 'error',
+      '@stylistic/no-multiple-empty-lines': ['error', { max: 1 }],
+      '@stylistic/no-trailing-spaces': 'error',
+      '@stylistic/object-curly-spacing': ['error', 'always'],
+      '@stylistic/semi': ['error', 'never'],
+      '@stylistic/space-in-parens': 'error',
+      '@stylistic/space-infix-ops': ['error', { int32Hint: false }],
+      '@stylistic/type-annotation-spacing': [
+        'error',
+        {
+          after: true,
+          before: true,
+          overrides: {
+            colon: {
+              before: false,
+            },
+          },
+        },
+      ],
+      eqeqeq: 'warn',
+      'max-depth': ['error', { max: 5 }],
+      'max-len': ['warn', { code: 120 }],
+      'max-lines': [
+        'error',
+        { max: 2000, skipBlankLines: true, skipComments: true },
+      ],
+      'max-lines-per-function': ['warn', { max: 500 }],
+      'no-constant-condition': 'warn',
+      'no-loss-of-precision': 'error',
+      'no-undef': 'warn',
+      'no-unused-vars': 'off', // @typescript-eslint/no-unused-vars
+      'space-infix-ops': 'off', // @stylistic/space-infix-ops
+    },
+  },
+  {
+    files: ['*.{ts,tsx}'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: 'tsconfig.json',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+    },
+    rules: {
+      '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+      '@typescript-eslint/no-duplicate-enum-values': 'error',
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-inferrable-types': 'error',
+      '@typescript-eslint/no-mixed-enums': 'error',
+      '@typescript-eslint/no-require-imports': 'error',
+      '@typescript-eslint/no-type-alias': [
+        'error',
+        {
+          allowAliases: 'always',
+          allowCallbacks: 'always',
+          allowConditionalTypes: 'never',
+          allowConstructors: 'never',
+          allowGenerics: 'always',
+          allowLiterals: 'always',
+          allowMappedTypes: 'never',
+          allowTupleTypes: 'always',
+        },
+      ],
+      '@typescript-eslint/no-unnecessary-type-assertion': 'error',
+      '@typescript-eslint/no-unsafe-argument': 'warn',
+      '@typescript-eslint/no-unsafe-assignment': 'warn',
+      '@typescript-eslint/no-unsafe-member-access': 'warn',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { argsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/prefer-as-const': 'error',
+      '@typescript-eslint/prefer-for-of': 'warn',
+      '@typescript-eslint/prefer-function-type': 'error',
+      '@typescript-eslint/prefer-includes': 'error',
+      '@typescript-eslint/prefer-literal-enum-member': 'error',
+      '@typescript-eslint/prefer-nullish-coalescing': 'warn',
+    },
+  },
+  {
+    // Reduce existing errors to warnings
+    plugins: {
+      '@tanstack/query': queryPlugin,
+    },
+    rules: {
+      '@tanstack/query/exhaustive-deps': 'warn',
+      'no-case-declarations': 'warn',
+      'no-empty': 'warn',
+      'no-redeclare': 'warn',
+      'react-hooks/immutability': 'warn',
+      'react-hooks/preserve-manual-memoization': 'warn',
+      'react-hooks/purity': 'warn',
+      'react-hooks/refs': 'warn',
+      'react-hooks/set-state-in-effect': 'warn',
+      'react-hooks/static-components': 'warn',
+      'react-refresh/only-export-components': 'warn',
+      'react/jsx-no-undef': 'warn',
+      'react/no-unescaped-entities': 'warn',
+      'react/prop-types': 'warn',
+    },
+  },
+]

ios/App/App.xcodeproj/project.pbxproj

@@ -462,12 +462,12 @@
 				CODE_SIGN_ALLOW_ENTITLEMENTS_MODIFICATION = YES;
 				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 55;
+				CURRENT_PROJECT_VERSION = 66;
 				DEVELOPMENT_TEAM = 6UJJ78R3BS;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.2.34;
+				MARKETING_VERSION = 1.2.45;
 				PRODUCT_BUNDLE_IDENTIFIER = com.donetick.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_VERSION = 5.0;
@@ -485,12 +485,12 @@
 				CODE_SIGN_IDENTITY = "Apple Distribution";
 				CODE_SIGN_STYLE = Manual;
 				PROVISIONING_PROFILE_SPECIFIER = "Donetick App Store(fastline)";
-				CURRENT_PROJECT_VERSION = 55;
+				CURRENT_PROJECT_VERSION = 66;
 				DEVELOPMENT_TEAM = 6UJJ78R3BS;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.2.34;
+				MARKETING_VERSION = 1.2.45;
 				PRODUCT_BUNDLE_IDENTIFIER = com.donetick.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
@@ -504,12 +504,12 @@
 			buildSettings = {
 				CODE_SIGN_ENTITLEMENTS = DonetickWidget/DonetickWidget.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 55;
+				CURRENT_PROJECT_VERSION = 66;
 				DEVELOPMENT_TEAM = 6UJJ78R3BS;
 				INFOPLIST_FILE = DonetickWidget/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 17.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
-				MARKETING_VERSION = 1.2.34;
+				MARKETING_VERSION = 1.2.45;
 				PRODUCT_BUNDLE_IDENTIFIER = com.donetick.app.widget;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SKIP_INSTALL = YES;
@@ -527,12 +527,12 @@
 				CODE_SIGN_IDENTITY = "Apple Distribution";
 				CODE_SIGN_STYLE = Manual;
 				PROVISIONING_PROFILE_SPECIFIER = "Donetick Widget App Store(fastline)";
-				CURRENT_PROJECT_VERSION = 55;
+				CURRENT_PROJECT_VERSION = 66;
 				DEVELOPMENT_TEAM = 6UJJ78R3BS;
 				INFOPLIST_FILE = DonetickWidget/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 17.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
-				MARKETING_VERSION = 1.2.34;
+				MARKETING_VERSION = 1.2.45;
 				PRODUCT_BUNDLE_IDENTIFIER = com.donetick.app.widget;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SKIP_INSTALL = YES;

ios/App/App/App.entitlements

@@ -4,6 +4,10 @@
 <dict>
 	<key>aps-environment</key>
 	<string>development</string>
+	<key>com.apple.developer.associated-domains</key>
+	<array>
+		<string>applinks:app.donetick.com</string>
+	</array>
 	<key>com.apple.security.application-groups</key>
 	<array>
 		<string>group.com.donetick.app</string>

ios/App/Podfile

@@ -11,6 +11,7 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorCommunityInAppReview', :path => '../../node_modules/@capacitor-community/in-app-review'
   pod 'CapacitorCommunitySpeechRecognition', :path => '../../node_modules/@capacitor-community/speech-recognition'
   pod 'CapacitorCommunitySqlite', :path => '../../node_modules/@capacitor-community/sqlite'
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
@@ -22,6 +23,7 @@ def capacitor_pods
   pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network'
   pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences'
   pod 'CapacitorPushNotifications', :path => '../../node_modules/@capacitor/push-notifications'
+  pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
   pod 'CapgoCapacitorDocumentScanner', :path => '../../node_modules/@capgo/capacitor-document-scanner'
   pod 'CapgoCapacitorNfc', :path => '../../node_modules/@capgo/capacitor-nfc'

ios/App/Podfile.lock

@@ -12,11 +12,13 @@ PODS:
     - PromisesObjC (~> 2.4)
     - PromisesSwift (~> 2.4)
     - RecaptchaInterop (~> 101.0)
-  - Capacitor (8.4.1):
+  - Capacitor (8.4.2):
     - CapacitorCordova
-  - CapacitorApp (8.1.0):
+  - CapacitorApp (8.1.1):
     - Capacitor
-  - CapacitorBrowser (8.0.3):
+  - CapacitorBrowser (8.0.4):
+    - Capacitor
+  - CapacitorCommunityInAppReview (8.0.0):
     - Capacitor
   - CapacitorCommunitySpeechRecognition (7.0.1):
     - Capacitor
@@ -24,14 +26,14 @@ PODS:
     - Capacitor
     - SQLCipher
     - ZIPFoundation
-  - CapacitorCordova (8.4.1)
-  - CapacitorDevice (8.0.2):
+  - CapacitorCordova (8.4.2)
+  - CapacitorDevice (8.0.3):
     - Capacitor
   - CapacitorHaptics (8.0.2):
     - Capacitor
   - CapacitorLocalLlm (1.0.0):
     - Capacitor
-  - CapacitorLocalNotifications (8.2.0):
+  - CapacitorLocalNotifications (8.2.1):
     - Capacitor
   - CapacitorNetwork (8.0.1):
     - Capacitor
@@ -39,15 +41,17 @@ PODS:
     - Capacitor
   - CapacitorPreferences (8.0.1):
     - Capacitor
-  - CapacitorPushNotifications (8.1.1):
+  - CapacitorPushNotifications (8.1.2):
     - Capacitor
-  - CapacitorStatusBar (8.0.2):
+  - CapacitorShare (8.0.1):
     - Capacitor
-  - CapgoCapacitorDocumentScanner (8.4.0):
+  - CapacitorStatusBar (8.0.3):
+    - Capacitor
+  - CapgoCapacitorDocumentScanner (8.4.2):
     - Capacitor
   - CapgoCapacitorNfc (8.2.2):
     - Capacitor
-  - CapgoCapacitorSocialLogin (8.3.38):
+  - CapgoCapacitorSocialLogin (8.3.39):
     - Alamofire (~> 5.10.2)
     - Capacitor
     - GoogleSignIn (~> 9.0.0)
@@ -143,6 +147,7 @@ DEPENDENCIES:
   - "Capacitor (from `../../node_modules/@capacitor/ios`)"
   - "CapacitorApp (from `../../node_modules/@capacitor/app`)"
   - "CapacitorBrowser (from `../../node_modules/@capacitor/browser`)"
+  - "CapacitorCommunityInAppReview (from `../../node_modules/@capacitor-community/in-app-review`)"
   - "CapacitorCommunitySpeechRecognition (from `../../node_modules/@capacitor-community/speech-recognition`)"
   - "CapacitorCommunitySqlite (from `../../node_modules/@capacitor-community/sqlite`)"
   - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
@@ -154,6 +159,7 @@ DEPENDENCIES:
   - CapacitorPluginSafeArea (from `../../node_modules/capacitor-plugin-safe-area`)
   - "CapacitorPreferences (from `../../node_modules/@capacitor/preferences`)"
   - "CapacitorPushNotifications (from `../../node_modules/@capacitor/push-notifications`)"
+  - "CapacitorShare (from `../../node_modules/@capacitor/share`)"
   - "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)"
   - "CapgoCapacitorDocumentScanner (from `../../node_modules/@capgo/capacitor-document-scanner`)"
   - "CapgoCapacitorNfc (from `../../node_modules/@capgo/capacitor-nfc`)"
@@ -195,6 +201,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/app"
   CapacitorBrowser:
     :path: "../../node_modules/@capacitor/browser"
+  CapacitorCommunityInAppReview:
+    :path: "../../node_modules/@capacitor-community/in-app-review"
   CapacitorCommunitySpeechRecognition:
     :path: "../../node_modules/@capacitor-community/speech-recognition"
   CapacitorCommunitySqlite:
@@ -217,6 +225,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/preferences"
   CapacitorPushNotifications:
     :path: "../../node_modules/@capacitor/push-notifications"
+  CapacitorShare:
+    :path: "../../node_modules/@capacitor/share"
   CapacitorStatusBar:
     :path: "../../node_modules/@capacitor/status-bar"
   CapgoCapacitorDocumentScanner:
@@ -236,24 +246,26 @@ SPEC CHECKSUMS:
   Alamofire: 7193b3b92c74a07f85569e1a6c4f4237291e7496
   AppAuth: ef4da5a3fc2e10b90c09a0a94a9baeaedc0341d5
   AppCheckCore: 214137f5c378d1dec88a68425c467fe65aaff637
-  Capacitor: 35242afe195b1e53c58ca1b827d1b444c5e6602b
-  CapacitorApp: 449ffe26375e96f8aaaee625ac6e01e5c57c8650
-  CapacitorBrowser: c987c73d09d8bd3b5ec13f06338b1e14d5d2be69
+  Capacitor: 52f999235b8bd6a7d01694753f4f4d54d182e3a3
+  CapacitorApp: 305bd13c44f6f9d164e2ee66a4faa956ed8c0e06
+  CapacitorBrowser: 752e0208aa07c7aa63d1f7cde895a3e9519b2656
+  CapacitorCommunityInAppReview: 4492bdd34aad4d27ed87949376022cc93b294ea1
   CapacitorCommunitySpeechRecognition: 3e03566c44c2bb3b52391a33d4518b1adbdeb38f
   CapacitorCommunitySqlite: eac6acfb852f46e7988fc59604d7f900498d354e
-  CapacitorCordova: eebe6bcf807b1b06f3f48237650f96bbcd0eef09
-  CapacitorDevice: 14cba6f88d1c3074cbf825fea977c8c526453ff8
+  CapacitorCordova: 345eacdc4c8282415446aea4acd8c77d82480bd4
+  CapacitorDevice: 708e742b60a61572cd593e44c809592e8f31da14
   CapacitorHaptics: 296f771ecd89c7a1bd92a7b6826a7d268e2e70f5
   CapacitorLocalLlm: a05516151a02923a9e7dae9949d3817e85e321f0
-  CapacitorLocalNotifications: 2615aa008f608b95d3921a778ee1988abf1e6148
+  CapacitorLocalNotifications: 908a69a3cf7ae345426de3223d4980befb0103c6
   CapacitorNetwork: 8812ce60d11fb63d8f2e4ba51a49b2e59892ebe2
   CapacitorPluginSafeArea: 874619c00586248f1694210e72038123d422c2d9
   CapacitorPreferences: cca2021f386efb75947c850334447d9ff22b14f1
-  CapacitorPushNotifications: ec08d589c226a2c0db7c032ec1bf5b044ec85f8e
-  CapacitorStatusBar: 01d5763b4ed720de5ce2edbc938de6a98f4c8f32
-  CapgoCapacitorDocumentScanner: 7ad9e8ed9c054d551bfc948660d995b9545723d8
+  CapacitorPushNotifications: 32a7f840815f319fd9ba1c1c9b0b914be9d95237
+  CapacitorShare: 0c58305114538568059bfc07111f22dcb9cb2a82
+  CapacitorStatusBar: eca7bc2b58d9f886f1ef9edb66e57a9b29c121af
+  CapgoCapacitorDocumentScanner: 262bb84b73707f9e2e59071ca58013e3f9acf942
   CapgoCapacitorNfc: 8ea158143c441e1cf6d231a971e375511558d027
-  CapgoCapacitorSocialLogin: 5de0c9295188cbd9116d13e4581494f3bbaa3414
+  CapgoCapacitorSocialLogin: 5ea6b14b8e9b1bd74533e580d4cf0e2b85d80793
   FirebaseCore: 2e86a4ea1684d4381707069e4a6d89ac808e901e
   FirebaseCoreInternal: 6ab6a02c94446c026d2cf35cf5383842ebaa4992
   FirebaseInstallations: eb29ccbf64eaedf86fd5b2ccc7fabde567660b52
@@ -277,6 +289,6 @@ SPEC CHECKSUMS:
   SQLCipher: eb79c64049cb002b4e9fcb30edb7979bf4706dfc
   ZIPFoundation: dfd3d681c4053ff7e2f7350bc4e53b5dba3f5351
 
-PODFILE CHECKSUM: 1099083fe561f8852fcef1bfcff4051f45db9770
+PODFILE CHECKSUM: 0170e6b548e03117ef7d6814596b8b140a6acce4
 
 COCOAPODS: 1.16.2

package.json

@@ -1,7 +1,7 @@
 {
   "name": "donetick",
   "private": true,
-  "version": "1.2.34",
+  "version": "1.2.45",
   "type": "module",
   "engines": {
     "node": ">=20.0.0",
@@ -20,7 +20,9 @@
     "build-cf": "rm -rf  package-lock.json && npm install && npm install --force @rollup/rollup-linux-x64-gnu@4.34.9 @swc/core-linux-x64-gnu && vite build",
     "build-selfhosted": "rm -rf  package-lock.json && npm install && npm install --force @rollup/rollup-linux-x64-gnu@4.34.9 @swc/core-linux-x64-gnu && vite build --mode selfhosted",
     "build-win": "del package-lock.json && npm install && npm install --force @rollup/rollup-win32-x64-msvc @swc/core-win32-x64-msvc && vite build --mode selfhosted",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint && prettier -c .",
+    "lint:ci": "true # TODO: eslint -f gha && prettier -c .",
+    "lint:fix": "eslint --fix && prettier -w .",
     "preview": "vite preview",
     "setup-m1": "rm -rf node_modules package-lock.json && npm install && npm install --force @rollup/rollup-darwin-arm64 @swc/core-darwin-arm64",
     "setup-apple-silicon": "npm install --no-optional && npm install --force @rollup/rollup-darwin-arm64 @swc/core-darwin-arm64",
@@ -39,6 +41,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
+    "@capacitor-community/in-app-review": "^8.0.0",
     "@capacitor-community/speech-recognition": "^7.0.1",
     "@capacitor-community/sqlite": "^8.0.0",
     "@capacitor/android": "^8.0.0",
@@ -53,6 +56,7 @@
     "@capacitor/network": "^8.0.0",
     "@capacitor/preferences": "^8.0.0",
     "@capacitor/push-notifications": "^8.0.0",
+    "@capacitor/share": "^8.0.1",
     "@capacitor/status-bar": "^8.0.0",
     "@capgo/capacitor-document-scanner": "^8.4.0",
     "@capgo/capacitor-nfc": "^8.0.0",
@@ -71,8 +75,11 @@
     "@openreplay/tracker": "^14.0.4",
     "@revenuecat/purchases-capacitor": "^12.0.0",
     "@revenuecat/purchases-capacitor-ui": "^12.0.0",
+    "@stylistic/eslint-plugin": "^5.10.0",
     "@swc/core": "^1.12.5",
     "@tanstack/react-query": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.59.4",
+    "@typescript-eslint/parser": "^8.59.4",
     "aos": "^2.3.4",
     "browser-image-compression": "^2.0.2",
     "caniuse-lite": "^1.0.30001769",
@@ -116,20 +123,20 @@
     "autoprefixer": "^10.4.16",
     "baseline-browser-mapping": "^2.9.19",
     "capacitor-set-version": "^2.2.0",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.2",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-sort-destructure-keys": "^1.5.0",
-    "eslint-plugin-sort-keys-fix": "^1.1.2",
-    "eslint-plugin-tailwindcss": "^3.13.1",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-formatter-gha": "^2.0.1",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "eslint-plugin-sort-destructure-keys": "^3.0.0",
+    "eslint-plugin-tailwindcss": "^3.18.3",
     "husky": "^8.0.3",
     "patch-package": "^8.0.1",
     "postcss": "^8.4.32",
-    "prettier": "^3.1.1",
+    "prettier": "^3.8.3",
     "prettier-plugin-tailwindcss": "^0.5.10",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.8.0",

postcss.config.mjs

@@ -1,6 +1,6 @@
 export default {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
+    tailwindcss: {},
   },
 }

prettier.config.mjs

@@ -0,0 +1,13 @@
+export default {
+  arrowParens: 'avoid',
+  bracketSpacing: true,
+  endOfLine: 'auto',
+  jsxBracketSameLine: false,
+  jsxSingleQuote: true,
+  plugins: ['prettier-plugin-tailwindcss'],
+  printWidth: 80,
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'all',
+}

public/.well-known/apple-app-site-association

@@ -0,0 +1,11 @@
+{
+  "applinks": {
+    "apps": [],
+    "details": [
+      {
+        "appID": "6UJJ78R3BS.com.donetick.app",
+        "paths": ["/circle/join*"]
+      }
+    ]
+  }
+}

public/.well-known/apple-app-site-association.json

@@ -0,0 +1,11 @@
+{
+  "applinks": {
+    "apps": [],
+    "details": [
+      {
+        "appID": "6UJJ78R3BS.com.donetick.app",
+        "paths": ["/circle/join*"]
+      }
+    ]
+  }
+}

public/.well-known/assetlinks.json

@@ -0,0 +1,13 @@
+[
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.donetick.app",
+      "sha256_cert_fingerprints": [
+        "EF:45:27:40:A2:D2:11:E4:27:AB:9A:7A:C6:E1:3B:CA:D4:DE:6A:0A:C3:81:05:58:D8:89:F1:FA:4E:CB:44:F3",
+        "67:0B:E5:30:FB:8A:7F:E6:9A:54:51:7F:06:AA:B0:1D:1A:26:61:5B:2A:60:53:4A:31:75:72:DA:F6:FA:EC:5A"
+      ]
+    }
+  }
+]

public/_headers

@@ -0,0 +1,8 @@
+/.well-known/apple-app-site-association
+  Content-Type: application/json
+
+/.well-known/apple-app-site-association.json
+  Content-Type: application/json
+
+/.well-known/assetlinks.json
+  Content-Type: application/json

public/_redirects

@@ -0,0 +1 @@
+/.well-known/apple-app-site-association /.well-known/apple-app-site-association.json 200

public/locales/ar-SA/chores.json

@@ -0,0 +1,75 @@
+{
+  "title": "المهام",
+  "myChores": "مهامي",
+  "allChores": "جميع المهام",
+  "addChore": "إضافة مهمة",
+  "editChore": "تعديل مهمة",
+  "deleteChore": "حذف مهمة",
+  "completeChore": "إكمال مهمة",
+  "dueDate": "تاريخ الاستحقاق",
+  "assignedTo": "مُسند إلى",
+  "priority": "الأولوية",
+  "status": "الحالة",
+  "description": "الوصف",
+  "choreView": {
+    "assignment": "التعيين",
+    "assigned": "المعين",
+    "last": "الأخير",
+    "schedule": "الجدول",
+    "due": "الاستحقاق",
+    "statistics": "الإحصائيات",
+    "completed": "مكتمل",
+    "times": "مرات",
+    "details": "التفاصيل",
+    "createdBy": "أنشئ بواسطة",
+    "na": "غير متوفر",
+    "taskCompleted": "المهمة مكتملة",
+    "taskCompletedMessage": "تم وضع علامة مكتملة على مهمتك",
+    "taskCompletionUndone": "تم التراجع عن إكمال المهمة.",
+    "taskSkipUndone": "تم التراجع عن تخطي المهمة.",
+    "undoSuccessful": "التراجع ناجح",
+    "undoFailed": "فشل التراجع",
+    "undoFailedMessage": "تعذر التراجع عن الإجراء. يرجى المحاولة مرة أخرى.",
+    "resetTimer": "إعادة تعيين المؤقت",
+    "resetTimerConfirmation": "هل أنت متأكد من أنك تريد إعادة تعيين المؤقت؟ سيؤدي هذا إلى مسح جميع سجلات الوقت منذ بدء المهمة.",
+    "clearAllTimeRecords": "مسح جميع سجلات الوقت",
+    "clearAllTimeConfirmation": "سيؤدي هذا إلى حذف جميع المؤقتات لهذه المهمة بشكل دائم وإعادتها إلى حالة \"لم تبدأ\".",
+    "descriptionTitle": "الوصف",
+    "description": "الوصف :",
+    "previousNote": "الملاحظة السابقة",
+    "previousNoteLabel": "الملاحظة السابقة:",
+    "subtasksLabel": "المهام الفرعية :",
+    "taskActions": "إجراءات المهمة",
+    "addNote": "أضف ملاحظة",
+    "additionalNotes": "ملاحظات إضافية:",
+    "notePlaceholder": "أضف ملاحظة حول الإكمال...",
+    "setCustomCompletionTime": "تعيين وقت إكمال مخصص",
+    "skipTask": "تخطي المهمة",
+    "skipTaskConfirmation": "هل أنت متأكد من أنك تريد تخطي هذه المهمة؟",
+    "markComplete": "وضع علامة مكتمل",
+    "markAsDone": "وضع علامة كمنجز",
+    "edit": "تعديل",
+    "archive": "أرشفة",
+    "unarchive": "إلغاء الأرشفة",
+    "viewHistory": "عرض السجل",
+    "history": "السجل",
+    "startTimer": "بدء المؤقت",
+    "start": "بدء",
+    "pauseTimer": "إيقاف المؤقت مؤقتاً",
+    "approve": "موافقة",
+    "reject": "رفض",
+    "pendingApproval": "في انتظار الموافقة",
+    "undo": "تراجع",
+    "skip": "تخطي",
+    "cancel": "إلغاء",
+    "noPriority": "بدون أولوية",
+    "subtasks": "المهام الفرعية",
+    "noDescription": "لا يوجد وصف متاح",
+    "timer": {
+      "active": "المؤقت نشط",
+      "paused": "المؤقت متوقف مؤقتاً",
+      "reset": "إعادة تعيين المؤقت",
+      "delete": "حذف الجلسة"
+    }
+  }
+}

public/locales/ar-SA/common.json

@@ -0,0 +1,33 @@
+{
+  "save": "حفظ",
+  "cancel": "إلغاء",
+  "delete": "حذف",
+  "edit": "تعديل",
+  "close": "إغلاق",
+  "confirm": "تأكيد",
+  "loading": "جارٍ التحميل...",
+  "error": "خطأ",
+  "success": "نجح",
+  "warning": "تحذير",
+  "refresh": "تحديث",
+  "copy": "نسخ",
+  "copied": "تم النسخ!",
+  "settings": "الإعدادات",
+  "yes": "نعم",
+  "no": "لا",
+  "back": "رجوع",
+  "backToCalendar": "العودة إلى التقويم",
+  "logout": "تسجيل الخروج",
+  "version": "النسخة",
+  "navigation": {
+    "allTasks": "جميع المهام",
+    "archived": "المؤرشفة",
+    "things": "الأشياء",
+    "labels": "التسميات",
+    "projects": "المشاريع",
+    "filters": "الفلاتر",
+    "activities": "الأنشطة",
+    "points": "النقاط",
+    "settings": "الإعدادات"
+  }
+}

public/locales/ar-SA/settings.json

@@ -0,0 +1,174 @@
+{
+  "title": "الإعدادات",
+  "circleSettings": {
+    "title": "إعدادات الدائرة",
+    "description": "يتم ربط حسابك تلقائيًا بدائرة عند إنشاء واحدة أو الانضمام إليها. ادعُ الأصدقاء بسهولة من خلال مشاركة رمز الدائرة الفريد أو الرابط أدناه. ستتلقى إشعارًا أدناه عندما يطلب شخص ما الانضمام إلى دائرتك. إذا كنت ترغب في المغادرة، فما عليك سوى الضغط على زر 'مغادرة الدائرة'.",
+    "circleCode": "رمز الدائرة",
+    "copyCode": "نسخ الرمز",
+    "copyLink": "نسخ الرابط",
+    "codeCopied": "تم نسخ رمز الدائرة!",
+    "linkCopied": "تم نسخ الرابط!",
+    "joinCircle": "الانضمام إلى دائرة",
+    "joinCirclePlaceholder": "أدخل رمز الدائرة",
+    "join": "انضمام",
+    "leave": "مغادرة الدائرة",
+    "leaveConfirmTitle": "مغادرة الدائرة",
+    "leaveConfirmMessage": "هل أنت متأكد من أنك تريد مغادرة هذه الدائرة؟",
+    "circleMembers": "أعضاء الدائرة",
+    "circleMemberRequests": "طلبات انضمام الأعضاء",
+    "admin": "مشرف",
+    "member": "عضو",
+    "pending": "قيد الانتظار",
+    "accept": "قبول",
+    "reject": "رفض",
+    "makeAdmin": "جعله مشرف",
+    "makeMember": "جعله عضو",
+    "remove": "إزالة",
+    "webhookURL": "رابط Webhook",
+    "webhookDescription": "أدخل رابط webhook لتلقي إشعارات أحداث الدائرة",
+    "webhookPlaceholder": "https://your-webhook-url.com"
+  },
+  "accountSettings": {
+    "title": "إعدادات الحساب",
+    "subscription": "الاشتراك",
+    "subscriptionStatus": "الخطة الحالية",
+    "free": "مجاني",
+    "plus": "بلس",
+    "upgrade": "ترقية",
+    "cancel": "إلغاء",
+    "changePassword": "تغيير كلمة المرور",
+    "password": "كلمة المرور",
+    "dangerZone": "منطقة الخطر",
+    "dangerZoneDescription": "بمجرد حذف حسابك، لا يمكن التراجع. يرجى التأكد.",
+    "deleteAccount": "حذف الحساب"
+  },
+  "localization": {
+    "title": "التوطين",
+    "description": "تخصيص اللغة وتنسيق التاريخ والتفضيلات الإقليمية لحسابك.",
+    "language": "اللغة",
+    "languageDescription": "اختر لغتك المفضلة",
+    "dateFormat": "تنسيق التاريخ",
+    "dateFormatDescription": "اختر كيفية عرض التواريخ في التطبيق",
+    "timeFormat": "تنسيق الوقت",
+    "timeFormatDescription": "اختر تنسيق 12 أو 24 ساعة",
+    "12hour": "12 ساعة (ص/م)",
+    "24hour": "24 ساعة",
+    "firstDayOfWeek": "أول يوم في الأسبوع",
+    "firstDayOfWeekDescription": "اختر اليوم الذي يبدأ به أسبوعك",
+    "sunday": "الأحد",
+    "monday": "الاثنين",
+    "saturday": "السبت",
+    "formats": {
+      "mdy": "MM/DD/YYYY (الولايات المتحدة)",
+      "dmy": "DD/MM/YYYY (أوروبا)",
+      "ymd": "YYYY-MM-DD (ISO)",
+      "long": "تنسيق طويل (مثل 1 يناير 2024)",
+      "short": "تنسيق قصير (مثل 1 يناير 2024)"
+    }
+  },
+  "sidepanel": {
+    "title": "تخصيص اللوحة الجانبية",
+    "description": "قم بتخصيص تخطيط ورؤية البطاقات في اللوحة الجانبية. هذا القسم متاح فقط على أجهزة الشاشة الكبيرة مثل الأجهزة اللوحية وأجهزة سطح المكتب."
+  },
+  "theme": {
+    "title": "تفضيلات المظهر",
+    "description": "اختر كيف يبدو الموقع لك. حدد مظهرًا واحدًا أو قم بالمزامنة مع نظامك والتبديل تلقائيًا بين مظاهر النهار والليل.",
+    "themeMode": "وضع المظهر",
+    "light": "فاتح",
+    "dark": "داكن",
+    "system": "النظام"
+  },
+  "notifications": {
+    "settingsSaved": "تم حفظ الإعدادات بنجاح",
+    "settingsSaveFailed": "فشل حفظ الإعدادات",
+    "invalidWebhook": "رابط webhook غير صالح"
+  },
+  "profile": {
+    "title": "إعدادات الملف الشخصي",
+    "description": "تحديث اسم العرض وصورة الملف الشخصي.",
+    "photoUpdated": "تم تحديث الصورة",
+    "photoUpdatedMessage": "تم تحديث صورة ملفك الشخصي بنجاح!",
+    "uploadFailed": "فشل التحميل",
+    "uploadFailedMessage": "فشل تحميل صورتك. يرجى المحاولة مرة أخرى.",
+    "profileUpdated": "تم تحديث الملف الشخصي",
+    "profileUpdatedMessage": "تم حفظ معلومات ملفك الشخصي بنجاح!",
+    "updateFailed": "فشل التحديث",
+    "updateFailedMessage": "تعذر تحديث ملفك الشخصي. يرجى التحقق من اتصالك والمحاولة مرة أخرى.",
+    "changePhoto": "تغيير الصورة",
+    "displayName": "اسم العرض",
+    "displayNamePlaceholder": "أدخل اسم العرض الخاص بك",
+    "timezone": "المنطقة الزمنية",
+    "timezonePlaceholder": "اختر منطقتك الزمنية",
+    "save": "حفظ",
+    "cancel": "إلغاء"
+  },
+  "overview": {
+    "title": "الإعدادات",
+    "subtitle": "قم بتخصيص تجربتك وإدارة تفضيلات حسابك",
+    "upgrade": {
+      "title": "الترقية إلى بلس",
+      "description": "افتح ميزات قوية لتعزيز إنتاجيتك",
+      "button": "الترقية الآن",
+      "features": {
+        "richText": "أوصاف نصية منسقة",
+        "notifications": "إشعارات المهام",
+        "apiIntegrations": "تكاملات API",
+        "advancedAutomation": "أتمتة متقدمة"
+      }
+    },
+    "sections": {
+      "profile": {
+        "title": "إعدادات الملف الشخصي",
+        "description": "تحديث معلومات ملفك الشخصي والصورة واسم العرض وتفضيلات المنطقة الزمنية."
+      },
+      "circle": {
+        "title": "إعدادات الدائرة",
+        "description": "إدارة دائرتك ودعوة الأعضاء والتعامل مع طلبات الانضمام."
+      },
+      "account": {
+        "title": "إعدادات الحساب",
+        "description": "إدارة اشتراكك وتغيير كلمة المرور وخيارات حذف الحساب."
+      },
+      "subaccounts": {
+        "title": "الحسابات المُدارة",
+        "description": "إنشاء وإدارة حسابات فرعية لتسجيل الدخول وإكمال المهام المعينة."
+      },
+      "notifications": {
+        "title": "الإشعارات",
+        "description": "تكوين الإشعارات الفورية وتنبيهات البريد الإلكتروني ووجهات الإشعارات للمهام."
+      },
+      "mfa": {
+        "title": "المصادقة متعددة العوامل",
+        "description": "إضافة طبقة إضافية من الأمان باستخدام MFA مع تطبيقات المصادقة."
+      },
+      "apitokens": {
+        "title": "رموز API",
+        "description": "إنشاء وإدارة رموز الوصول لتكاملات الطرف الثالث والوصول إلى API."
+      },
+      "storage": {
+        "title": "إعدادات التخزين",
+        "description": "نسخ احتياطي واستعادة بياناتك وإدارة التخزين المحلي وتفضيلات المزامنة."
+      },
+      "sidepanel": {
+        "title": "تخصيص اللوحة الجانبية",
+        "description": "قم بتخصيص تخطيط ورؤية البطاقات في واجهة اللوحة الجانبية."
+      },
+      "theme": {
+        "title": "تفضيلات المظهر",
+        "description": "اختر مظهرك المفضل وقم بتكوين إعدادات الوضع الداكن/الفاتح."
+      },
+      "localization": {
+        "title": "التوطين",
+        "description": "تخصيص اللغة وتنسيق التاريخ وتنسيق الوقت والتفضيلات الإقليمية."
+      },
+      "advanced": {
+        "title": "الإعدادات المتقدمة",
+        "description": "تكوين webhooks والتحديثات في الوقت الفعلي وميزات متقدمة أخرى لتعزيز الإنتاجية."
+      },
+      "developer": {
+        "title": "إعدادات المطور",
+        "description": "عرض المعلومات الفنية حول رموز المصادقة واتصالات SSE وبيانات التصحيح."
+      }
+    }
+  }
+}

public/locales/ar/common.json

@@ -29,5 +29,51 @@
     "activities": "الأنشطة",
     "points": "النقاط",
     "settings": "الإعدادات"
+  },
+  "feedback": {
+    "later": "Maybe later",
+    "sentiment": {
+      "title": "How's Donetick working for you?",
+      "subtitle": "Your answer helps us decide what to build next.",
+      "options": {
+        "love": "Love it",
+        "okay": "It's okay",
+        "issues": "Having issues"
+      }
+    },
+    "categories": {
+      "bugs": "Bugs",
+      "missingFeature": "Missing feature",
+      "tooComplicated": "Too complicated",
+      "slow": "Slow",
+      "notifications": "Notifications",
+      "ai": "AI",
+      "other": "Other"
+    },
+    "details": {
+      "title": "What could we improve?",
+      "messageLabel": "Tell us more",
+      "messagePlaceholder": "What happened, or what would make this better?",
+      "contextNote": "We'll include your app version, device and platform so we can reproduce issues.",
+      "submit": "Send feedback",
+      "contextNoteSelfHosted": "You're on a self-hosted instance, so nothing is sent from your server — we'll open a pre-filled GitHub issue you can review and edit first.",
+      "submitSelfHosted": "Continue to GitHub"
+    },
+    "review": {
+      "title": "Glad you're enjoying it!",
+      "subtitle": "A rating or a star helps other people find Donetick.",
+      "github": "Star on GitHub",
+      "appStore": "Rate on the App Store",
+      "playStore": "Rate on Google Play"
+    },
+    "thanks": {
+      "title": "Thanks for the feedback",
+      "subtitle": "We read every response and it shapes what we work on next."
+    },
+    "github": {
+      "title": "Report it on GitHub",
+      "subtitle": "We've filled in an issue with your notes and version details. Nothing has been sent yet — review it and post when you're ready.",
+      "open": "Open the issue"
+    }
   }
 }

public/locales/ar/settings.json

@@ -168,6 +168,10 @@
       "developer": {
         "title": "إعدادات المطور",
         "description": "عرض المعلومات الفنية حول رموز المصادقة واتصالات SSE وبيانات التصحيح."
+      },
+      "feedback": {
+        "title": "Send Feedback",
+        "description": "Tell us how Donetick is working for you, report a bug, or request a feature."
       }
     }
   }

public/locales/de/chores.json

@@ -33,7 +33,7 @@
     "resetTimer": "Timer zurücksetzen",
     "resetTimerConfirmation": "Bist du sicher, dass du den Timer zurücksetzen möchtest? Dies löscht alle Zeitaufzeichnungen seit du die Aufgabe gestartet hast.",
     "clearAllTimeRecords": "Alle Zeitaufzeichnungen löschen",
-    "clearAllTimeConfirmation": "Dies löscht dauerhaft alle Timer für diese Aufgabe und setzt sie zurück auf \"nicht gestartet\".",
+    "clearAllTimeConfirmation": "Dies löscht dauerhaft alle Timer für diese Aufgabe und setzt sie zurück auf „nicht gestartet“.",
     "descriptionTitle": "Beschreibung",
     "description": "Beschreibung:",
     "previousNote": "Vorherige Notiz",

public/locales/de/common.json

@@ -22,7 +22,7 @@
   "navigation": {
     "allTasks": "Alle Aufgaben",
     "archived": "Archiviert",
-    "things": "Things",
+    "things": "Dinge",
     "labels": "Beschriftungen",
     "projects": "Projekte",
     "filters": "Filter",

public/locales/de/settings.json

@@ -168,7 +168,11 @@
       "developer": {
         "title": "Entwickler-Einstellungen",
         "description": "Zeige technische Informationen über Authentifizierungs-Token, SSE-Verbindungen und Debug-Daten an."
+      },
+      "feedback": {
+        "title": "Send Feedback",
+        "description": "Tell us how Donetick is working for you, report a bug, or request a feature."
       }
     }
   }
-}
+}

public/locales/en/common.json

@@ -20,6 +20,7 @@
   "logout": "Logout",
   "version": "Version",
   "navigation": {
+    "search": "Search",
     "allTasks": "All Tasks",
     "archived": "Archived",
     "things": "Things",
@@ -29,5 +30,51 @@
     "activities": "Activities",
     "points": "Points",
     "settings": "Settings"
+  },
+  "feedback": {
+    "later": "Maybe later",
+    "sentiment": {
+      "title": "How's Donetick working for you?",
+      "subtitle": "Your answer helps us decide what to build next.",
+      "options": {
+        "love": "Love it",
+        "okay": "It's okay",
+        "issues": "Having issues"
+      }
+    },
+    "categories": {
+      "bugs": "Bugs",
+      "missingFeature": "Missing feature",
+      "tooComplicated": "Too complicated",
+      "slow": "Slow",
+      "notifications": "Notifications",
+      "ai": "AI",
+      "other": "Other"
+    },
+    "details": {
+      "title": "What could we improve?",
+      "messageLabel": "Tell us more",
+      "messagePlaceholder": "What happened, or what would make this better?",
+      "contextNote": "We'll include your app version, device and platform so we can reproduce issues.",
+      "submit": "Send feedback",
+      "contextNoteSelfHosted": "You're on a self-hosted instance, so nothing is sent from your server — we'll open a pre-filled GitHub issue you can review and edit first.",
+      "submitSelfHosted": "Continue to GitHub"
+    },
+    "review": {
+      "title": "Glad you're enjoying it!",
+      "subtitle": "A rating or a star helps other people find Donetick.",
+      "github": "Star on GitHub",
+      "appStore": "Rate on the App Store",
+      "playStore": "Rate on Google Play"
+    },
+    "thanks": {
+      "title": "Thanks for the feedback",
+      "subtitle": "We read every response and it shapes what we work on next."
+    },
+    "github": {
+      "title": "Report it on GitHub",
+      "subtitle": "We've filled in an issue with your notes and version details. Nothing has been sent yet — review it and post when you're ready.",
+      "open": "Open the issue"
+    }
   }
 }

public/locales/en/settings.json

@@ -168,6 +168,14 @@
       "developer": {
         "title": "Developer Settings",
         "description": "View technical information about authentication tokens, SSE connections, and debug data."
+      },
+      "feedback": {
+        "title": "Send Feedback",
+        "description": "Tell us how Donetick is working for you or request a feature."
+      },
+      "bugReport": {
+        "title": "Report a Bug",
+        "description": "Something not working right? Send us the details along with a technical snapshot."
       }
     }
   }

public/locales/es-ES/chores.json

@@ -0,0 +1,75 @@
+{
+  "title": "Tareas",
+  "myChores": "Mis Tareas",
+  "allChores": "Todas las Tareas",
+  "addChore": "Agregar Tarea",
+  "editChore": "Editar Tarea",
+  "deleteChore": "Eliminar Tarea",
+  "completeChore": "Completar Tarea",
+  "dueDate": "Fecha de Vencimiento",
+  "assignedTo": "Asignado a",
+  "priority": "Prioridad",
+  "status": "Estado",
+  "description": "Descripción",
+  "choreView": {
+    "assignment": "Asignación",
+    "assigned": "Asignado",
+    "last": "Último",
+    "schedule": "Horario",
+    "due": "Vencimiento",
+    "statistics": "Estadísticas",
+    "completed": "Completado",
+    "times": "veces",
+    "details": "Detalles",
+    "createdBy": "Creado por",
+    "na": "N/D",
+    "taskCompleted": "Tarea Completada",
+    "taskCompletedMessage": "Tu tarea ha sido marcada como completada",
+    "taskCompletionUndone": "La finalización de la tarea ha sido deshecha.",
+    "taskSkipUndone": "El salto de tarea ha sido deshecho.",
+    "undoSuccessful": "Deshacer Exitoso",
+    "undoFailed": "Deshacer Fallido",
+    "undoFailedMessage": "No se pudo deshacer la acción. Por favor, inténtalo de nuevo.",
+    "resetTimer": "Reiniciar Temporizador",
+    "resetTimerConfirmation": "¿Estás seguro de que quieres reiniciar el temporizador? Esto borrará todos los registros de tiempo desde que iniciaste la tarea.",
+    "clearAllTimeRecords": "Borrar Todos los Registros de Tiempo",
+    "clearAllTimeConfirmation": "Esto eliminará permanentemente todos los temporizadores de esta tarea y la volverá al estado \"no iniciada\".",
+    "descriptionTitle": "Descripción",
+    "description": "Descripción :",
+    "previousNote": "Nota Anterior",
+    "previousNoteLabel": "Nota anterior:",
+    "subtasksLabel": "Subtareas :",
+    "taskActions": "Acciones de Tarea",
+    "addNote": "Agregar una nota",
+    "additionalNotes": "Notas Adicionales:",
+    "notePlaceholder": "Agregar una nota sobre la finalización...",
+    "setCustomCompletionTime": "Establecer hora de finalización personalizada",
+    "skipTask": "Saltar Tarea",
+    "skipTaskConfirmation": "¿Estás seguro de que quieres saltar esta tarea?",
+    "markComplete": "Marcar como Completada",
+    "markAsDone": "Marcar como hecha",
+    "edit": "Editar",
+    "archive": "Archivar",
+    "unarchive": "Desarchivar",
+    "viewHistory": "Ver Historial",
+    "history": "Historial",
+    "startTimer": "Iniciar Temporizador",
+    "start": "Iniciar",
+    "pauseTimer": "Pausar Temporizador",
+    "approve": "Aprobar",
+    "reject": "Rechazar",
+    "pendingApproval": "Pendiente de Aprobación",
+    "undo": "Deshacer",
+    "skip": "Saltar",
+    "cancel": "Cancelar",
+    "noPriority": "Sin Prioridad",
+    "subtasks": "Subtareas",
+    "noDescription": "No hay descripción disponible",
+    "timer": {
+      "active": "Temporizador Activo",
+      "paused": "Temporizador Pausado",
+      "reset": "Reiniciar Temporizador",
+      "delete": "Eliminar Sesión"
+    }
+  }
+}

public/locales/es-ES/common.json

@@ -0,0 +1,33 @@
+{
+  "save": "Guardar",
+  "cancel": "Cancelar",
+  "delete": "Eliminar",
+  "edit": "Editar",
+  "close": "Cerrar",
+  "confirm": "Confirmar",
+  "loading": "Cargando...",
+  "error": "Error",
+  "success": "Éxito",
+  "warning": "Advertencia",
+  "refresh": "Actualizar",
+  "copy": "Copiar",
+  "copied": "¡Copiado!",
+  "settings": "Configuración",
+  "yes": "Sí",
+  "no": "No",
+  "back": "Atrás",
+  "backToCalendar": "Volver al Calendario",
+  "logout": "Cerrar Sesión",
+  "version": "Versión",
+  "navigation": {
+    "allTasks": "Todas las Tareas",
+    "archived": "Archivadas",
+    "things": "Cosas",
+    "labels": "Etiquetas",
+    "projects": "Proyectos",
+    "filters": "Filtros",
+    "activities": "Actividades",
+    "points": "Puntos",
+    "settings": "Configuración"
+  }
+}

public/locales/es-ES/settings.json

@@ -0,0 +1,174 @@
+{
+  "title": "Configuración",
+  "circleSettings": {
+    "title": "Configuración del círculo",
+    "description": "Tu cuenta se conecta automáticamente a un Círculo cuando creas o te unes a uno. Invita fácilmente a amigos compartiendo el código único del Círculo o el enlace a continuación.",
+    "circleCode": "Código del Círculo",
+    "copyCode": "Copiar Código",
+    "copyLink": "Copiar Enlace",
+    "codeCopied": "¡Código del círculo copiado!",
+    "linkCopied": "¡Enlace copiado!",
+    "joinCircle": "Unirse a un Círculo",
+    "joinCirclePlaceholder": "Ingresa el Código del Círculo",
+    "join": "Unirse",
+    "leave": "Salir del Círculo",
+    "leaveConfirmTitle": "Salir del Círculo",
+    "leaveConfirmMessage": "¿Estás seguro de que quieres salir de este círculo?",
+    "circleMembers": "Miembros del Círculo",
+    "circleMemberRequests": "Solicitudes de Miembros del Círculo",
+    "admin": "Administrador",
+    "member": "Miembro",
+    "pending": "Pendiente",
+    "accept": "Aceptar",
+    "reject": "Rechazar",
+    "makeAdmin": "Hacer Administrador",
+    "makeMember": "Hacer Miembro",
+    "remove": "Eliminar",
+    "webhookURL": "URL del Webhook",
+    "webhookDescription": "Ingresa una URL de webhook para recibir notificaciones de eventos del círculo",
+    "webhookPlaceholder": "https://tu-url-webhook.com"
+  },
+  "accountSettings": {
+    "title": "Configuración de la Cuenta",
+    "subscription": "Suscripción",
+    "subscriptionStatus": "Plan Actual",
+    "free": "Gratis",
+    "plus": "Plus",
+    "upgrade": "Actualizar",
+    "cancel": "Cancelar",
+    "changePassword": "Cambiar Contraseña",
+    "password": "Contraseña",
+    "dangerZone": "Zona de Peligro",
+    "dangerZoneDescription": "Una vez que elimines tu cuenta, no hay vuelta atrás. Por favor, está seguro.",
+    "deleteAccount": "Eliminar Cuenta"
+  },
+  "localization": {
+    "title": "Localización",
+    "description": "Personaliza el idioma, formato de fecha y preferencias regionales para tu cuenta.",
+    "language": "Idioma",
+    "languageDescription": "Selecciona tu idioma preferido",
+    "dateFormat": "Formato de Fecha",
+    "dateFormatDescription": "Elige cómo se deben mostrar las fechas en toda la aplicación",
+    "timeFormat": "Formato de Hora",
+    "timeFormatDescription": "Selecciona formato de 12 o 24 horas",
+    "12hour": "12 horas (AM/PM)",
+    "24hour": "24 horas",
+    "firstDayOfWeek": "Primer Día de la Semana",
+    "firstDayOfWeekDescription": "Selecciona qué día comienza tu semana",
+    "sunday": "Domingo",
+    "monday": "Lunes",
+    "saturday": "Sábado",
+    "formats": {
+      "mdy": "MM/DD/AAAA (EE.UU.)",
+      "dmy": "DD/MM/AAAA (Europa)",
+      "ymd": "AAAA-MM-DD (ISO)",
+      "long": "Formato largo (ej., 1 de enero de 2024)",
+      "short": "Formato corto (ej., 1 ene 2024)"
+    }
+  },
+  "sidepanel": {
+    "title": "Personalización del Panel Lateral",
+    "description": "Personaliza el diseño y la visibilidad de las tarjetas en el panel lateral. Esta sección solo está disponible en dispositivos de pantalla grande como tabletas y computadoras de escritorio."
+  },
+  "theme": {
+    "title": "Preferencias de tema",
+    "description": "Elige cómo se ve el sitio para ti. Selecciona un solo tema o sincronízalo con tu sistema y cambia automáticamente entre temas de día y noche.",
+    "themeMode": "Modo de tema",
+    "light": "Claro",
+    "dark": "Oscuro",
+    "system": "Sistema"
+  },
+  "notifications": {
+    "settingsSaved": "Configuración guardada con éxito",
+    "settingsSaveFailed": "Error al guardar la configuración",
+    "invalidWebhook": "URL de webhook no válida"
+  },
+  "profile": {
+    "title": "Configuración del Perfil",
+    "description": "Actualiza tu nombre para mostrar y foto de perfil.",
+    "photoUpdated": "Foto Actualizada",
+    "photoUpdatedMessage": "¡Tu foto de perfil ha sido actualizada con éxito!",
+    "uploadFailed": "Error al Subir",
+    "uploadFailedMessage": "Error al subir tu foto. Por favor, inténtalo de nuevo.",
+    "profileUpdated": "Perfil Actualizado",
+    "profileUpdatedMessage": "¡Tu información de perfil ha sido guardada con éxito!",
+    "updateFailed": "Error al Actualizar",
+    "updateFailedMessage": "No se pudo actualizar tu perfil. Por favor, verifica tu conexión e inténtalo de nuevo.",
+    "changePhoto": "Cambiar Foto",
+    "displayName": "Nombre para Mostrar",
+    "displayNamePlaceholder": "Ingresa tu nombre para mostrar",
+    "timezone": "Zona Horaria",
+    "timezonePlaceholder": "Selecciona tu zona horaria",
+    "save": "Guardar",
+    "cancel": "Cancelar"
+  },
+  "overview": {
+    "title": "Configuración",
+    "subtitle": "Personaliza tu experiencia y administra las preferencias de tu cuenta",
+    "upgrade": {
+      "title": "Actualizar a Plus",
+      "description": "Desbloquea funciones potentes para mejorar tu productividad",
+      "button": "Actualizar Ahora",
+      "features": {
+        "richText": "Descripciones en texto enriquecido",
+        "notifications": "Notificaciones de tareas",
+        "apiIntegrations": "Integraciones API",
+        "advancedAutomation": "Automatización avanzada"
+      }
+    },
+    "sections": {
+      "profile": {
+        "title": "Configuración del Perfil",
+        "description": "Actualiza tu información de perfil, foto, nombre para mostrar y preferencias de zona horaria."
+      },
+      "circle": {
+        "title": "Configuración del Círculo",
+        "description": "Administra tu círculo, invita miembros y gestiona solicitudes de unión."
+      },
+      "account": {
+        "title": "Configuración de la Cuenta",
+        "description": "Administra tu suscripción, cambia la contraseña y opciones de eliminación de cuenta."
+      },
+      "subaccounts": {
+        "title": "Cuentas Administradas",
+        "description": "Crea y administra subcuentas para iniciar sesión y completar tareas asignadas."
+      },
+      "notifications": {
+        "title": "Notificaciones",
+        "description": "Configura notificaciones push, alertas por correo electrónico y destinos de notificación para tareas."
+      },
+      "mfa": {
+        "title": "Autenticación Multifactor",
+        "description": "Agrega una capa adicional de seguridad con MFA usando aplicaciones de autenticación."
+      },
+      "apitokens": {
+        "title": "Tokens API",
+        "description": "Genera y administra tokens de acceso para integraciones de terceros y acceso a la API."
+      },
+      "storage": {
+        "title": "Configuración de Almacenamiento",
+        "description": "Respalda y restaura tus datos, administra el almacenamiento local y las preferencias de sincronización."
+      },
+      "sidepanel": {
+        "title": "Personalización del Panel Lateral",
+        "description": "Personaliza el diseño y la visibilidad de las tarjetas en la interfaz del panel lateral."
+      },
+      "theme": {
+        "title": "Preferencias de Tema",
+        "description": "Elige tu tema preferido y configura los ajustes de modo oscuro/claro."
+      },
+      "localization": {
+        "title": "Localización",
+        "description": "Personaliza el idioma, formato de fecha, formato de hora y preferencias regionales."
+      },
+      "advanced": {
+        "title": "Configuración Avanzada",
+        "description": "Configura webhooks, actualizaciones en tiempo real y otras funciones avanzadas para mejorar la productividad."
+      },
+      "developer": {
+        "title": "Configuración de Desarrollador",
+        "description": "Ver información técnica sobre tokens de autenticación, conexiones SSE y datos de depuración."
+      }
+    }
+  }
+}

public/locales/es/common.json

@@ -29,5 +29,51 @@
     "activities": "Actividades",
     "points": "Puntos",
     "settings": "Configuración"
+  },
+  "feedback": {
+    "later": "Maybe later",
+    "sentiment": {
+      "title": "How's Donetick working for you?",
+      "subtitle": "Your answer helps us decide what to build next.",
+      "options": {
+        "love": "Love it",
+        "okay": "It's okay",
+        "issues": "Having issues"
+      }
+    },
+    "categories": {
+      "bugs": "Bugs",
+      "missingFeature": "Missing feature",
+      "tooComplicated": "Too complicated",
+      "slow": "Slow",
+      "notifications": "Notifications",
+      "ai": "AI",
+      "other": "Other"
+    },
+    "details": {
+      "title": "What could we improve?",
+      "messageLabel": "Tell us more",
+      "messagePlaceholder": "What happened, or what would make this better?",
+      "contextNote": "We'll include your app version, device and platform so we can reproduce issues.",
+      "submit": "Send feedback",
+      "contextNoteSelfHosted": "You're on a self-hosted instance, so nothing is sent from your server — we'll open a pre-filled GitHub issue you can review and edit first.",
+      "submitSelfHosted": "Continue to GitHub"
+    },
+    "review": {
+      "title": "Glad you're enjoying it!",
+      "subtitle": "A rating or a star helps other people find Donetick.",
+      "github": "Star on GitHub",
+      "appStore": "Rate on the App Store",
+      "playStore": "Rate on Google Play"
+    },
+    "thanks": {
+      "title": "Thanks for the feedback",
+      "subtitle": "We read every response and it shapes what we work on next."
+    },
+    "github": {
+      "title": "Report it on GitHub",
+      "subtitle": "We've filled in an issue with your notes and version details. Nothing has been sent yet — review it and post when you're ready.",
+      "open": "Open the issue"
+    }
   }
 }

public/locales/es/settings.json

@@ -168,6 +168,10 @@
       "developer": {
         "title": "Configuración de Desarrollador",
         "description": "Ver información técnica sobre tokens de autenticación, conexiones SSE y datos de depuración."
+      },
+      "feedback": {
+        "title": "Send Feedback",
+        "description": "Tell us how Donetick is working for you, report a bug, or request a feature."
       }
     }
   }

public/locales/fr-FR/chores.json

@@ -0,0 +1,75 @@
+{
+  "title": "Tâches",
+  "myChores": "Mes Tâches",
+  "allChores": "Toutes les Tâches",
+  "addChore": "Ajouter une Tâche",
+  "editChore": "Modifier la Tâche",
+  "deleteChore": "Supprimer la Tâche",
+  "completeChore": "Terminer la Tâche",
+  "dueDate": "Date d'Échéance",
+  "assignedTo": "Assigné à",
+  "priority": "Priorité",
+  "status": "Statut",
+  "description": "Description",
+  "choreView": {
+    "assignment": "Attribution",
+    "assigned": "Assigné",
+    "last": "Dernier",
+    "schedule": "Calendrier",
+    "due": "Échéance",
+    "statistics": "Statistiques",
+    "completed": "Terminé",
+    "times": "fois",
+    "details": "Détails",
+    "createdBy": "Créé par",
+    "na": "N/A",
+    "taskCompleted": "Tâche Terminée",
+    "taskCompletedMessage": "Votre tâche a été marquée comme terminée",
+    "taskCompletionUndone": "La complétion de la tâche a été annulée.",
+    "taskSkipUndone": "Le saut de tâche a été annulé.",
+    "undoSuccessful": "Annulation Réussie",
+    "undoFailed": "Annulation Échouée",
+    "undoFailedMessage": "Impossible d'annuler l'action. Veuillez réessayer.",
+    "resetTimer": "Réinitialiser le Minuteur",
+    "resetTimerConfirmation": "Êtes-vous sûr de vouloir réinitialiser le minuteur ? Cela effacera tous les enregistrements de temps depuis le début de la tâche.",
+    "clearAllTimeRecords": "Effacer Tous les Enregistrements de Temps",
+    "clearAllTimeConfirmation": "Cela supprimera définitivement tous les minuteurs de cette tâche et la remettra à l'état \"non démarrée\".",
+    "descriptionTitle": "Description",
+    "description": "Description :",
+    "previousNote": "Note Précédente",
+    "previousNoteLabel": "Note précédente :",
+    "subtasksLabel": "Sous-tâches :",
+    "taskActions": "Actions de Tâche",
+    "addNote": "Ajouter une note",
+    "additionalNotes": "Notes Supplémentaires :",
+    "notePlaceholder": "Ajouter une note sur la complétion...",
+    "setCustomCompletionTime": "Définir une heure de complétion personnalisée",
+    "skipTask": "Passer la Tâche",
+    "skipTaskConfirmation": "Êtes-vous sûr de vouloir passer cette tâche ?",
+    "markComplete": "Marquer comme Terminée",
+    "markAsDone": "Marquer comme fait",
+    "edit": "Modifier",
+    "archive": "Archiver",
+    "unarchive": "Désarchiver",
+    "viewHistory": "Voir l'Historique",
+    "history": "Historique",
+    "startTimer": "Démarrer le Minuteur",
+    "start": "Démarrer",
+    "pauseTimer": "Mettre en Pause le Minuteur",
+    "approve": "Approuver",
+    "reject": "Rejeter",
+    "pendingApproval": "En Attente d'Approbation",
+    "undo": "Annuler",
+    "skip": "Passer",
+    "cancel": "Annuler",
+    "noPriority": "Aucune Priorité",
+    "subtasks": "Sous-tâches",
+    "noDescription": "Aucune description disponible",
+    "timer": {
+      "active": "Minuteur Actif",
+      "paused": "Minuteur en Pause",
+      "reset": "Réinitialiser le Minuteur",
+      "delete": "Supprimer la Session"
+    }
+  }
+}

public/locales/fr-FR/common.json

@@ -0,0 +1,33 @@
+{
+  "save": "Enregistrer",
+  "cancel": "Annuler",
+  "delete": "Supprimer",
+  "edit": "Modifier",
+  "close": "Fermer",
+  "confirm": "Confirmer",
+  "loading": "Chargement...",
+  "error": "Erreur",
+  "success": "Succès",
+  "warning": "Avertissement",
+  "refresh": "Actualiser",
+  "copy": "Copier",
+  "copied": "Copié !",
+  "settings": "Paramètres",
+  "yes": "Oui",
+  "no": "Non",
+  "back": "Retour",
+  "backToCalendar": "Retour au Calendrier",
+  "logout": "Déconnexion",
+  "version": "Version",
+  "navigation": {
+    "allTasks": "Toutes les Tâches",
+    "archived": "Archivées",
+    "things": "Objets",
+    "labels": "Étiquettes",
+    "projects": "Projets",
+    "filters": "Filtres",
+    "activities": "Activités",
+    "points": "Points",
+    "settings": "Paramètres"
+  }
+}

public/locales/fr-FR/settings.json

@@ -0,0 +1,174 @@
+{
+  "title": "Paramètres",
+  "circleSettings": {
+    "title": "Paramètres du cercle",
+    "description": "Votre compte est automatiquement connecté à un Cercle lorsque vous en créez un ou en rejoignez un. Invitez facilement des amis en partageant le code unique du Cercle ou le lien ci-dessous.",
+    "circleCode": "Code du Cercle",
+    "copyCode": "Copier le Code",
+    "copyLink": "Copier le Lien",
+    "codeCopied": "Code du cercle copié !",
+    "linkCopied": "Lien copié !",
+    "joinCircle": "Rejoindre un Cercle",
+    "joinCirclePlaceholder": "Entrer le Code du Cercle",
+    "join": "Rejoindre",
+    "leave": "Quitter le Cercle",
+    "leaveConfirmTitle": "Quitter le Cercle",
+    "leaveConfirmMessage": "Êtes-vous sûr de vouloir quitter ce cercle ?",
+    "circleMembers": "Membres du Cercle",
+    "circleMemberRequests": "Demandes de Membres du Cercle",
+    "admin": "Administrateur",
+    "member": "Membre",
+    "pending": "En attente",
+    "accept": "Accepter",
+    "reject": "Rejeter",
+    "makeAdmin": "Nommer Administrateur",
+    "makeMember": "Nommer Membre",
+    "remove": "Supprimer",
+    "webhookURL": "URL du Webhook",
+    "webhookDescription": "Entrez une URL de webhook pour recevoir des notifications pour les événements du cercle",
+    "webhookPlaceholder": "https://votre-url-webhook.com"
+  },
+  "accountSettings": {
+    "title": "Paramètres du Compte",
+    "subscription": "Abonnement",
+    "subscriptionStatus": "Plan Actuel",
+    "free": "Gratuit",
+    "plus": "Plus",
+    "upgrade": "Mettre à Niveau",
+    "cancel": "Annuler",
+    "changePassword": "Changer le Mot de Passe",
+    "password": "Mot de passe",
+    "dangerZone": "Zone Dangereuse",
+    "dangerZoneDescription": "Une fois votre compte supprimé, il n'y a pas de retour en arrière. Veuillez être certain.",
+    "deleteAccount": "Supprimer le Compte"
+  },
+  "localization": {
+    "title": "Localisation",
+    "description": "Personnalisez la langue, le format de date et les préférences régionales pour votre compte.",
+    "language": "Langue",
+    "languageDescription": "Sélectionnez votre langue préférée",
+    "dateFormat": "Format de Date",
+    "dateFormatDescription": "Choisissez comment les dates doivent être affichées dans l'application",
+    "timeFormat": "Format de l'Heure",
+    "timeFormatDescription": "Sélectionnez le format 12 heures ou 24 heures",
+    "12hour": "12 heures (AM/PM)",
+    "24hour": "24 heures",
+    "firstDayOfWeek": "Premier Jour de la Semaine",
+    "firstDayOfWeekDescription": "Sélectionnez quel jour commence votre semaine",
+    "sunday": "Dimanche",
+    "monday": "Lundi",
+    "saturday": "Samedi",
+    "formats": {
+      "mdy": "MM/JJ/AAAA (États-Unis)",
+      "dmy": "JJ/MM/AAAA (Europe)",
+      "ymd": "AAAA-MM-JJ (ISO)",
+      "long": "Format long (ex., 1 janvier 2024)",
+      "short": "Format court (ex., 1 janv. 2024)"
+    }
+  },
+  "sidepanel": {
+    "title": "Personnalisation du Panneau Latéral",
+    "description": "Personnalisez la disposition et la visibilité des cartes dans le panneau latéral. Cette section n'est disponible que sur les grands écrans comme les tablettes et les ordinateurs de bureau."
+  },
+  "theme": {
+    "title": "Préférences de thème",
+    "description": "Choisissez comment le site vous apparaît. Sélectionnez un thème unique ou synchronisez avec votre système pour basculer automatiquement entre les thèmes jour et nuit.",
+    "themeMode": "Mode de thème",
+    "light": "Clair",
+    "dark": "Sombre",
+    "system": "Système"
+  },
+  "notifications": {
+    "settingsSaved": "Paramètres enregistrés avec succès",
+    "settingsSaveFailed": "Échec de l'enregistrement des paramètres",
+    "invalidWebhook": "URL de webhook invalide"
+  },
+  "profile": {
+    "title": "Paramètres du Profil",
+    "description": "Mettez à jour votre nom d'affichage et votre photo de profil.",
+    "photoUpdated": "Photo Mise à Jour",
+    "photoUpdatedMessage": "Votre photo de profil a été mise à jour avec succès !",
+    "uploadFailed": "Échec du Téléchargement",
+    "uploadFailedMessage": "Échec du téléchargement de votre photo. Veuillez réessayer.",
+    "profileUpdated": "Profil Mis à Jour",
+    "profileUpdatedMessage": "Vos informations de profil ont été enregistrées avec succès !",
+    "updateFailed": "Échec de la Mise à Jour",
+    "updateFailedMessage": "Impossible de mettre à jour votre profil. Veuillez vérifier votre connexion et réessayer.",
+    "changePhoto": "Changer la Photo",
+    "displayName": "Nom d'Affichage",
+    "displayNamePlaceholder": "Entrez votre nom d'affichage",
+    "timezone": "Fuseau Horaire",
+    "timezonePlaceholder": "Sélectionnez votre fuseau horaire",
+    "save": "Enregistrer",
+    "cancel": "Annuler"
+  },
+  "overview": {
+    "title": "Paramètres",
+    "subtitle": "Personnalisez votre expérience et gérez les préférences de votre compte",
+    "upgrade": {
+      "title": "Passer à Plus",
+      "description": "Débloquez des fonctionnalités puissantes pour améliorer votre productivité",
+      "button": "Mettre à Niveau Maintenant",
+      "features": {
+        "richText": "Descriptions en texte enrichi",
+        "notifications": "Notifications de tâches",
+        "apiIntegrations": "Intégrations API",
+        "advancedAutomation": "Automatisation avancée"
+      }
+    },
+    "sections": {
+      "profile": {
+        "title": "Paramètres du Profil",
+        "description": "Mettez à jour vos informations de profil, photo, nom d'affichage et préférences de fuseau horaire."
+      },
+      "circle": {
+        "title": "Paramètres du Cercle",
+        "description": "Gérez votre cercle, invitez des membres et gérez les demandes d'adhésion."
+      },
+      "account": {
+        "title": "Paramètres du Compte",
+        "description": "Gérez votre abonnement, changez le mot de passe et les options de suppression de compte."
+      },
+      "subaccounts": {
+        "title": "Comptes Gérés",
+        "description": "Créez et gérez des sous-comptes pour vous connecter et accomplir les tâches assignées."
+      },
+      "notifications": {
+        "title": "Notifications",
+        "description": "Configurez les notifications push, les alertes par e-mail et les cibles de notification pour les tâches."
+      },
+      "mfa": {
+        "title": "Authentification Multi-Facteurs",
+        "description": "Ajoutez une couche de sécurité supplémentaire avec MFA en utilisant des applications d'authentification."
+      },
+      "apitokens": {
+        "title": "Jetons API",
+        "description": "Générez et gérez des jetons d'accès pour les intégrations tierces et l'accès à l'API."
+      },
+      "storage": {
+        "title": "Paramètres de Stockage",
+        "description": "Sauvegardez et restaurez vos données, gérez le stockage local et les préférences de synchronisation."
+      },
+      "sidepanel": {
+        "title": "Personnalisation du Panneau Latéral",
+        "description": "Personnalisez la disposition et la visibilité des cartes dans l'interface du panneau latéral."
+      },
+      "theme": {
+        "title": "Préférences de Thème",
+        "description": "Choisissez votre thème préféré et configurez les paramètres de mode sombre/clair."
+      },
+      "localization": {
+        "title": "Localisation",
+        "description": "Personnalisez la langue, le format de date, le format de l'heure et les préférences régionales."
+      },
+      "advanced": {
+        "title": "Paramètres Avancés",
+        "description": "Configurez les webhooks, les mises à jour en temps réel et d'autres fonctionnalités avancées pour améliorer la productivité."
+      },
+      "developer": {
+        "title": "Paramètres Développeur",
+        "description": "Consultez les informations techniques sur les jetons d'authentification, les connexions SSE et les données de débogage."
+      }
+    }
+  }
+}

public/locales/fr/common.json

@@ -29,5 +29,51 @@
     "activities": "Activités",
     "points": "Points",
     "settings": "Paramètres"
+  },
+  "feedback": {
+    "later": "Maybe later",
+    "sentiment": {
+      "title": "How's Donetick working for you?",
+      "subtitle": "Your answer helps us decide what to build next.",
+      "options": {
+        "love": "Love it",
+        "okay": "It's okay",
+        "issues": "Having issues"
+      }
+    },
+    "categories": {
+      "bugs": "Bugs",
+      "missingFeature": "Missing feature",
+      "tooComplicated": "Too complicated",
+      "slow": "Slow",
+      "notifications": "Notifications",
+      "ai": "AI",
+      "other": "Other"
+    },
+    "details": {
+      "title": "What could we improve?",
+      "messageLabel": "Tell us more",
+      "messagePlaceholder": "What happened, or what would make this better?",
+      "contextNote": "We'll include your app version, device and platform so we can reproduce issues.",
+      "submit": "Send feedback",
+      "contextNoteSelfHosted": "You're on a self-hosted instance, so nothing is sent from your server — we'll open a pre-filled GitHub issue you can review and edit first.",
+      "submitSelfHosted": "Continue to GitHub"
+    },
+    "review": {
+      "title": "Glad you're enjoying it!",
+      "subtitle": "A rating or a star helps other people find Donetick.",
+      "github": "Star on GitHub",
+      "appStore": "Rate on the App Store",
+      "playStore": "Rate on Google Play"
+    },
+    "thanks": {
+      "title": "Thanks for the feedback",
+      "subtitle": "We read every response and it shapes what we work on next."
+    },
+    "github": {
+      "title": "Report it on GitHub",
+      "subtitle": "We've filled in an issue with your notes and version details. Nothing has been sent yet — review it and post when you're ready.",
+      "open": "Open the issue"
+    }
   }
 }

public/locales/fr/settings.json

@@ -25,7 +25,7 @@
     "makeMember": "Nommer Membre",
     "remove": "Supprimer",
     "webhookURL": "URL du Webhook",
-    "webhookDescription": "Entrez une URL de webhook pour recevoir des notifications pour les événements du cercle",
+    "webhookDescription": "Entrez une URL de Webhook pour recevoir des notifications pour les événements du cercle",
     "webhookPlaceholder": "https://votre-url-webhook.com"
   },
   "accountSettings": {
@@ -168,6 +168,10 @@
       "developer": {
         "title": "Paramètres Développeur",
         "description": "Consultez les informations techniques sur les jetons d'authentification, les connexions SSE et les données de débogage."
+      },
+      "feedback": {
+        "title": "Send Feedback",
+        "description": "Tell us how Donetick is working for you, report a bug, or request a feature."
       }
     }
   }

public/locales/ja/common.json

@@ -29,5 +29,51 @@
     "activities": "アクティビティ",
     "points": "ポイント",
     "settings": "設定"
+  },
+  "feedback": {
+    "later": "Maybe later",
+    "sentiment": {
+      "title": "How's Donetick working for you?",
+      "subtitle": "Your answer helps us decide what to build next.",
+      "options": {
+        "love": "Love it",
+        "okay": "It's okay",
+        "issues": "Having issues"
+      }
+    },
+    "categories": {
+      "bugs": "Bugs",
+      "missingFeature": "Missing feature",
+      "tooComplicated": "Too complicated",
+      "slow": "Slow",
+      "notifications": "Notifications",
+      "ai": "AI",
+      "other": "Other"
+    },
+    "details": {
+      "title": "What could we improve?",
+      "messageLabel": "Tell us more",
+      "messagePlaceholder": "What happened, or what would make this better?",
+      "contextNote": "We'll include your app version, device and platform so we can reproduce issues.",
+      "submit": "Send feedback",
+      "contextNoteSelfHosted": "You're on a self-hosted instance, so nothing is sent from your server — we'll open a pre-filled GitHub issue you can review and edit first.",
+      "submitSelfHosted": "Continue to GitHub"
+    },
+    "review": {
+      "title": "Glad you're enjoying it!",
+      "subtitle": "A rating or a star helps other people find Donetick.",
+      "github": "Star on GitHub",
+      "appStore": "Rate on the App Store",
+      "playStore": "Rate on Google Play"
+    },
+    "thanks": {
+      "title": "Thanks for the feedback",
+      "subtitle": "We read every response and it shapes what we work on next."
+    },
+    "github": {
+      "title": "Report it on GitHub",
+      "subtitle": "We've filled in an issue with your notes and version details. Nothing has been sent yet — review it and post when you're ready.",
+      "open": "Open the issue"
+    }
   }
 }

public/locales/ja/settings.json

@@ -168,6 +168,10 @@
       "developer": {
         "title": "開発者設定",
         "description": "認証トークン、SSE 接続、デバッグデータなどの技術情報を確認できます。"
+      },
+      "feedback": {
+        "title": "Send Feedback",
+        "description": "Tell us how Donetick is working for you, report a bug, or request a feature."
       }
     }
   }

public/locales/nl/common.json

@@ -29,5 +29,51 @@
     "activities": "Activiteiten",
     "points": "Punten",
     "settings": "Instellingen"
+  },
+  "feedback": {
+    "later": "Maybe later",
+    "sentiment": {
+      "title": "How's Donetick working for you?",
+      "subtitle": "Your answer helps us decide what to build next.",
+      "options": {
+        "love": "Love it",
+        "okay": "It's okay",
+        "issues": "Having issues"
+      }
+    },
+    "categories": {
+      "bugs": "Bugs",
+      "missingFeature": "Missing feature",
+      "tooComplicated": "Too complicated",
+      "slow": "Slow",
+      "notifications": "Notifications",
+      "ai": "AI",
+      "other": "Other"
+    },
+    "details": {
+      "title": "What could we improve?",
+      "messageLabel": "Tell us more",
+      "messagePlaceholder": "What happened, or what would make this better?",
+      "contextNote": "We'll include your app version, device and platform so we can reproduce issues.",
+      "submit": "Send feedback",
+      "contextNoteSelfHosted": "You're on a self-hosted instance, so nothing is sent from your server — we'll open a pre-filled GitHub issue you can review and edit first.",
+      "submitSelfHosted": "Continue to GitHub"
+    },
+    "review": {
+      "title": "Glad you're enjoying it!",
+      "subtitle": "A rating or a star helps other people find Donetick.",
+      "github": "Star on GitHub",
+      "appStore": "Rate on the App Store",
+      "playStore": "Rate on Google Play"
+    },
+    "thanks": {
+      "title": "Thanks for the feedback",
+      "subtitle": "We read every response and it shapes what we work on next."
+    },
+    "github": {
+      "title": "Report it on GitHub",
+      "subtitle": "We've filled in an issue with your notes and version details. Nothing has been sent yet — review it and post when you're ready.",
+      "open": "Open the issue"
+    }
   }
 }

public/locales/nl/settings.json

@@ -168,6 +168,10 @@
       "developer": {
         "title": "Ontwikkelaarsinstellingen",
         "description": "Bekijk technische informatie over authenticatietokens, SSE-verbindingen en foutopsporingsgegevens."
+      },
+      "feedback": {
+        "title": "Send Feedback",
+        "description": "Tell us how Donetick is working for you, report a bug, or request a feature."
       }
     }
   }

public/locales/pt/common.json

@@ -29,5 +29,51 @@
     "activities": "Atividades",
     "points": "Pontos",
     "settings": "Configurações"
+  },
+  "feedback": {
+    "later": "Maybe later",
+    "sentiment": {
+      "title": "How's Donetick working for you?",
+      "subtitle": "Your answer helps us decide what to build next.",
+      "options": {
+        "love": "Love it",
+        "okay": "It's okay",
+        "issues": "Having issues"
+      }
+    },
+    "categories": {
+      "bugs": "Bugs",
+      "missingFeature": "Missing feature",
+      "tooComplicated": "Too complicated",
+      "slow": "Slow",
+      "notifications": "Notifications",
+      "ai": "AI",
+      "other": "Other"
+    },
+    "details": {
+      "title": "What could we improve?",
+      "messageLabel": "Tell us more",
+      "messagePlaceholder": "What happened, or what would make this better?",
+      "contextNote": "We'll include your app version, device and platform so we can reproduce issues.",
+      "submit": "Send feedback",
+      "contextNoteSelfHosted": "You're on a self-hosted instance, so nothing is sent from your server — we'll open a pre-filled GitHub issue you can review and edit first.",
+      "submitSelfHosted": "Continue to GitHub"
+    },
+    "review": {
+      "title": "Glad you're enjoying it!",
+      "subtitle": "A rating or a star helps other people find Donetick.",
+      "github": "Star on GitHub",
+      "appStore": "Rate on the App Store",
+      "playStore": "Rate on Google Play"
+    },
+    "thanks": {
+      "title": "Thanks for the feedback",
+      "subtitle": "We read every response and it shapes what we work on next."
+    },
+    "github": {
+      "title": "Report it on GitHub",
+      "subtitle": "We've filled in an issue with your notes and version details. Nothing has been sent yet — review it and post when you're ready.",
+      "open": "Open the issue"
+    }
   }
 }

public/locales/pt/settings.json

@@ -168,6 +168,10 @@
       "developer": {
         "title": "Configurações de desenvolvedor",
         "description": "Veja informações técnicas sobre tokens de autenticação, conexões SSE e dados de depuração."
+      },
+      "feedback": {
+        "title": "Send Feedback",
+        "description": "Tell us how Donetick is working for you, report a bug, or request a feature."
       }
     }
   }

public/locales/zh/chores.json

@@ -0,0 +1,75 @@
+{
+  "title": "Chores",
+  "myChores": "My Chores",
+  "allChores": "All Chores",
+  "addChore": "Add Chore",
+  "editChore": "Edit Chore",
+  "deleteChore": "Delete Chore",
+  "completeChore": "Complete Task",
+  "dueDate": "Due Date",
+  "assignedTo": "Assigned To",
+  "priority": "Priority",
+  "status": "Status",
+  "description": "Description",
+  "choreView": {
+    "assignment": "Assignment",
+    "assigned": "Assigned",
+    "last": "Last",
+    "schedule": "Schedule",
+    "due": "Due",
+    "statistics": "Statistics",
+    "completed": "Completed",
+    "times": "times",
+    "details": "Details",
+    "createdBy": "Created By",
+    "na": "N/A",
+    "taskCompleted": "Task Completed",
+    "taskCompletedMessage": "Your task has been marked as complete",
+    "taskCompletionUndone": "Task completion has been undone.",
+    "taskSkipUndone": "Task skip has been undone.",
+    "undoSuccessful": "Undo Successful",
+    "undoFailed": "Undo Failed",
+    "undoFailedMessage": "Unable to undo the action. Please try again.",
+    "resetTimer": "Reset Timer",
+    "resetTimerConfirmation": "Are you sure you want to reset the timer? This will clear all time records since you started the task.",
+    "clearAllTimeRecords": "Clear All Time Records",
+    "clearAllTimeConfirmation": "This will permanently delete all timers for this task and set it back to \"not started\".",
+    "descriptionTitle": "Description",
+    "description": "Description :",
+    "previousNote": "Previous Note",
+    "previousNoteLabel": "Previous note:",
+    "subtasksLabel": "Subtasks :",
+    "taskActions": "Task Actions",
+    "addNote": "Add a note",
+    "additionalNotes": "Additional Notes:",
+    "notePlaceholder": "Add a note about the completion...",
+    "setCustomCompletionTime": "Set custom completion time",
+    "skipTask": "Skip Task",
+    "skipTaskConfirmation": "Are you sure you want to skip this task?",
+    "markComplete": "Mark Complete",
+    "markAsDone": "Mark as done",
+    "edit": "Edit",
+    "archive": "Archive",
+    "unarchive": "Unarchive",
+    "viewHistory": "View History",
+    "history": "History",
+    "startTimer": "Start Timer",
+    "start": "Start",
+    "pauseTimer": "Pause Timer",
+    "approve": "Approve",
+    "reject": "Reject",
+    "pendingApproval": "Pending Approval",
+    "undo": "Undo",
+    "skip": "Skip",
+    "cancel": "Cancel",
+    "noPriority": "No Priority",
+    "subtasks": "Subtasks",
+    "noDescription": "No description available",
+    "timer": {
+      "active": "Timer Active",
+      "paused": "Timer Paused",
+      "reset": "Reset Timer",
+      "delete": "Delete Session"
+    }
+  }
+}

public/locales/zh/common.json

@@ -0,0 +1,79 @@
+{
+  "save": "Save",
+  "cancel": "Cancel",
+  "delete": "Delete",
+  "edit": "Edit",
+  "close": "Close",
+  "confirm": "Confirm",
+  "loading": "Loading...",
+  "error": "Error",
+  "success": "Success",
+  "warning": "Warning",
+  "refresh": "Refresh",
+  "copy": "Copy",
+  "copied": "Copied!",
+  "settings": "Settings",
+  "yes": "Yes",
+  "no": "No",
+  "back": "Back",
+  "backToCalendar": "Back to Calendar",
+  "logout": "Logout",
+  "version": "Version",
+  "navigation": {
+    "allTasks": "All Tasks",
+    "archived": "Archived",
+    "things": "Things",
+    "labels": "Labels",
+    "projects": "Projects",
+    "filters": "Filters",
+    "activities": "Activities",
+    "points": "Points",
+    "settings": "Settings"
+  },
+  "feedback": {
+    "later": "Maybe later",
+    "sentiment": {
+      "title": "How's Donetick working for you?",
+      "subtitle": "Your answer helps us decide what to build next.",
+      "options": {
+        "love": "Love it",
+        "okay": "It's okay",
+        "issues": "Having issues"
+      }
+    },
+    "categories": {
+      "bugs": "Bugs",
+      "missingFeature": "Missing feature",
+      "tooComplicated": "Too complicated",
+      "slow": "Slow",
+      "notifications": "Notifications",
+      "ai": "AI",
+      "other": "Other"
+    },
+    "details": {
+      "title": "What could we improve?",
+      "messageLabel": "Tell us more",
+      "messagePlaceholder": "What happened, or what would make this better?",
+      "contextNote": "We'll include your app version, device and platform so we can reproduce issues.",
+      "submit": "Send feedback",
+      "contextNoteSelfHosted": "You're on a self-hosted instance, so nothing is sent from your server — we'll open a pre-filled GitHub issue you can review and edit first.",
+      "submitSelfHosted": "Continue to GitHub"
+    },
+    "review": {
+      "title": "Glad you're enjoying it!",
+      "subtitle": "A rating or a star helps other people find Donetick.",
+      "github": "Star on GitHub",
+      "appStore": "Rate on the App Store",
+      "playStore": "Rate on Google Play"
+    },
+    "thanks": {
+      "title": "Thanks for the feedback",
+      "subtitle": "We read every response and it shapes what we work on next."
+    },
+    "github": {
+      "title": "Report it on GitHub",
+      "subtitle": "We've filled in an issue with your notes and version details. Nothing has been sent yet — review it and post when you're ready.",
+      "open": "Open the issue"
+    }
+  }
+}

public/locales/zh/settings.json

@@ -0,0 +1,178 @@
+{
+  "title": "Settings",
+  "circleSettings": {
+    "title": "Circle settings",
+    "description": "Your account is automatically connected to a Circle when you create or join one. Easily invite friends by sharing the unique Circle code or link below. You'll receive a notification below when someone requests to join your Circle. If you'd like to leave, simply hit the 'Leave Circle' button.",
+    "circleCode": "Circle Code",
+    "copyCode": "Copy Code",
+    "copyLink": "Copy Link",
+    "codeCopied": "Circle code copied!",
+    "linkCopied": "Circle link copied!",
+    "joinCircle": "Join a Circle",
+    "joinCirclePlaceholder": "Enter Circle Code",
+    "join": "Join",
+    "leave": "Leave Circle",
+    "leaveConfirmTitle": "Leave Circle",
+    "leaveConfirmMessage": "Are you sure you want to leave this circle?",
+    "circleMembers": "Circle Members",
+    "circleMemberRequests": "Circle Member Requests",
+    "admin": "Admin",
+    "member": "Member",
+    "pending": "Pending",
+    "accept": "Accept",
+    "reject": "Reject",
+    "makeAdmin": "Make Admin",
+    "makeMember": "Make Member",
+    "remove": "Remove",
+    "webhookURL": "Webhook URL",
+    "webhookDescription": "Enter a webhook URL to receive notifications for circle events",
+    "webhookPlaceholder": "https://your-webhook-url.com"
+  },
+  "accountSettings": {
+    "title": "Account Settings",
+    "subscription": "Subscription",
+    "subscriptionStatus": "Current Plan",
+    "free": "Free",
+    "plus": "Plus",
+    "upgrade": "Upgrade",
+    "cancel": "Cancel",
+    "changePassword": "Change Password",
+    "password": "Password",
+    "dangerZone": "Danger Zone",
+    "dangerZoneDescription": "Once you delete your account, there is no going back. Please be certain.",
+    "deleteAccount": "Delete Account"
+  },
+  "localization": {
+    "title": "Localization",
+    "description": "Customize language, date format, and regional preferences for your account.",
+    "language": "Language",
+    "languageDescription": "Select your preferred language",
+    "dateFormat": "Date Format",
+    "dateFormatDescription": "Choose how dates should be displayed throughout the application",
+    "timeFormat": "Time Format",
+    "timeFormatDescription": "Select 12-hour or 24-hour time format",
+    "12hour": "12-hour (AM/PM)",
+    "24hour": "24-hour",
+    "firstDayOfWeek": "First Day of Week",
+    "firstDayOfWeekDescription": "Select which day starts your week",
+    "sunday": "Sunday",
+    "monday": "Monday",
+    "saturday": "Saturday",
+    "formats": {
+      "mdy": "MM/DD/YYYY (US)",
+      "dmy": "DD/MM/YYYY (Europe)",
+      "ymd": "YYYY-MM-DD (ISO)",
+      "long": "Long format (e.g., January 1, 2024)",
+      "short": "Short format (e.g., Jan 1, 2024)"
+    }
+  },
+  "sidepanel": {
+    "title": "Sidepanel Customization",
+    "description": "Customize the layout and visibility of cards in the sidepanel. This section is only available on large screen devices such as tablets and desktops."
+  },
+  "theme": {
+    "title": "Theme preferences",
+    "description": "Choose how the site looks to you. Select a single theme, or sync with your system and automatically switch between day and night themes.",
+    "themeMode": "Theme mode",
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System"
+  },
+  "notifications": {
+    "settingsSaved": "Settings saved successfully",
+    "settingsSaveFailed": "Failed to save settings",
+    "invalidWebhook": "Invalid webhook URL"
+  },
+  "profile": {
+    "title": "Profile Settings",
+    "description": "Update your display name and profile photo.",
+    "photoUpdated": "Photo Updated",
+    "photoUpdatedMessage": "Your profile photo has been updated successfully!",
+    "uploadFailed": "Upload Failed",
+    "uploadFailedMessage": "Failed to upload your photo. Please try again.",
+    "profileUpdated": "Profile Updated",
+    "profileUpdatedMessage": "Your profile information has been saved successfully!",
+    "updateFailed": "Update Failed",
+    "updateFailedMessage": "Unable to update your profile. Please check your connection and try again.",
+    "changePhoto": "Change Photo",
+    "displayName": "Display Name",
+    "displayNamePlaceholder": "Enter your display name",
+    "timezone": "Timezone",
+    "timezonePlaceholder": "Select your timezone",
+    "save": "Save",
+    "cancel": "Cancel"
+  },
+  "overview": {
+    "title": "Settings",
+    "subtitle": "Customize your experience and manage your account preferences",
+    "upgrade": {
+      "title": "Upgrade to Plus",
+      "description": "Unlock powerful features to enhance your productivity",
+      "button": "Upgrade Now",
+      "features": {
+        "richText": "Rich text descriptions",
+        "notifications": "Task notifications",
+        "apiIntegrations": "API integrations",
+        "advancedAutomation": "Advanced automation"
+      }
+    },
+    "sections": {
+      "profile": {
+        "title": "Profile Settings",
+        "description": "Update your profile information, photo, display name, and timezone preferences."
+      },
+      "circle": {
+        "title": "Circle Settings",
+        "description": "Manage your circle, invite members, and handle join requests."
+      },
+      "account": {
+        "title": "Account Settings",
+        "description": "Manage your subscription, change password, and account deletion options."
+      },
+      "subaccounts": {
+        "title": "Managed Accounts",
+        "description": "Create and manage sub accounts to log in and complete assigned tasks."
+      },
+      "notifications": {
+        "title": "Notifications",
+        "description": "Configure push notifications, email alerts, and notification targets for tasks."
+      },
+      "mfa": {
+        "title": "Multi-Factor Authentication",
+        "description": "Add an extra layer of security with MFA using authenticator apps."
+      },
+      "apitokens": {
+        "title": "API Tokens",
+        "description": "Generate and manage access tokens for third-party integrations and API access."
+      },
+      "storage": {
+        "title": "Storage Settings",
+        "description": "Backup and restore your data, manage local storage and sync preferences."
+      },
+      "sidepanel": {
+        "title": "Sidepanel Customization",
+        "description": "Customize the layout and visibility of cards in the sidepanel interface."
+      },
+      "theme": {
+        "title": "Theme Preferences",
+        "description": "Choose your preferred theme and configure dark/light mode settings."
+      },
+      "localization": {
+        "title": "Localization",
+        "description": "Customize language, date format, time format, and regional preferences."
+      },
+      "advanced": {
+        "title": "Advanced Settings",
+        "description": "Configure webhooks, real-time updates, and other advanced features for enhanced productivity."
+      },
+      "developer": {
+        "title": "Developer Settings",
+        "description": "View technical information about authentication tokens, SSE connections, and debug data."
+      },
+      "feedback": {
+        "title": "Send Feedback",
+        "description": "Tell us how Donetick is working for you, report a bug, or request a feature."
+      }
+    }
+  }
+}

scripts/release.sh

@@ -8,11 +8,12 @@ PLATFORM="both"
 BUMP="patch"
 SKIP_BUMP=false
 UPLOAD=false
+UPLOAD_ONLY=false
 ANDROID_TRACK="internal"
 
 usage() {
   cat <<EOF
-Usage: $(basename "$0") [--android|--ios] [--bump patch|minor|major] [--skip-bump] [--upload] [--track TRACK]
+Usage: $(basename "$0") [--android|--ios] [--bump patch|minor|major] [--skip-bump] [--upload|--upload-only] [--track TRACK]
 
 Builds signed release artifacts for Android (.aab) and/or iOS (.ipa).
 
@@ -21,6 +22,7 @@ Builds signed release artifacts for Android (.aab) and/or iOS (.ipa).
   --bump TYPE      Version bump type before building (default: patch)
   --skip-bump      Don't bump the version, build with the current one
   --upload         Also upload: Android to Play Store, iOS to TestFlight
+  --upload-only    Skip bump/build entirely, just upload the artifacts already built
   --track TRACK    Play Store track for --upload (default: internal)
   -h, --help       Show this help
 
@@ -38,6 +40,7 @@ while [[ $# -gt 0 ]]; do
     --bump) BUMP="$2"; shift 2 ;;
     --skip-bump) SKIP_BUMP=true; shift ;;
     --upload) UPLOAD=true; shift ;;
+    --upload-only) UPLOAD=true; UPLOAD_ONLY=true; shift ;;
     --track) ANDROID_TRACK="$2"; shift 2 ;;
     -h|--help) usage; exit 0 ;;
     *) echo "Unknown option: $1" >&2; usage; exit 1 ;;
@@ -51,17 +54,19 @@ if [ -f "$REPO_ROOT/.env.production" ]; then
   set +a
 fi
 
-if [ "$SKIP_BUMP" = false ]; then
-  echo "→ Bumping version ($BUMP)"
-  node bump-version.js "$BUMP"
+if [ "$UPLOAD_ONLY" = false ]; then
+  if [ "$SKIP_BUMP" = false ]; then
+    echo "→ Bumping version ($BUMP)"
+    node bump-version.js "$BUMP"
+  fi
+
+  echo "→ Building web assets"
+  npm run build
+
+  echo "→ Syncing Capacitor"
+  npx cap sync
 fi
 
-echo "→ Building web assets"
-npm run build
-
-echo "→ Syncing Capacitor"
-npx cap sync
-
 if [ -f Gemfile ] && command -v bundle >/dev/null 2>&1; then
   RUN="bundle exec fastlane"
 else
@@ -69,8 +74,10 @@ else
 fi
 
 if [ "$PLATFORM" = "android" ] || [ "$PLATFORM" = "both" ]; then
-  echo "→ Building signed Android release (.aab)"
-  $RUN android release
+  if [ "$UPLOAD_ONLY" = false ]; then
+    echo "→ Building signed Android release (.aab)"
+    $RUN android release
+  fi
 
   if [ "$UPLOAD" = true ]; then
     echo "→ Uploading Android release to Play Store ($ANDROID_TRACK track)"
@@ -79,8 +86,10 @@ if [ "$PLATFORM" = "android" ] || [ "$PLATFORM" = "both" ]; then
 fi
 
 if [ "$PLATFORM" = "ios" ] || [ "$PLATFORM" = "both" ]; then
-  echo "→ Building signed iOS release (.ipa)"
-  $RUN ios release
+  if [ "$UPLOAD_ONLY" = false ]; then
+    echo "→ Building signed iOS release (.ipa)"
+    $RUN ios release
+  fi
 
   if [ "$UPLOAD" = true ]; then
     echo "→ Uploading iOS release to TestFlight"

src/App.jsx

@@ -1,21 +1,24 @@
-import NavBar from '@/views/components/NavBar'
+import './styles/safe-area.css'
+
 import { Button, Typography, useColorScheme } from '@mui/joy'
 import { useCallback, useEffect } from 'react'
-import { Outlet, useNavigate } from 'react-router-dom'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 import { useRegisterSW } from 'virtual:pwa-register/react'
+
+import NavBar from '@/views/components/NavBar'
+
 import { registerCapacitorListeners } from './CapacitorListener'
 import PageTransition from './components/animations/PageTransition'
 import { ImpersonateUserProvider } from './contexts/ImpersonateUserContext'
-import { AuthProvider } from './hooks/useAuth.jsx'
-
-import useStatusBar from './hooks/useStatusBar'
-import { useResource } from './queries/ResourceQueries'
-import './styles/safe-area.css'
-
 import SSEProvider from './contexts/SSEContext'
-import { useNotification } from './service/NotificationProvider'
-
+import { AuthProvider } from './hooks/useAuth.jsx'
+import useOnboardingGate from './hooks/useOnboardingGate'
+import useStatusBar from './hooks/useStatusBar'
 import { useSyncOnReconnect } from './hooks/useSyncOnReconnect'
+import { useResource } from './queries/ResourceQueries'
+import { GlobalSearchProvider } from './search/GlobalSearchContext'
+import { recordRoute } from './service/DiagnosticsSession'
+import { useNotification } from './service/NotificationProvider'
 import NetworkBanner from './views/components/NetworkBanner'
 
 const add = className => {
@@ -31,14 +34,24 @@ const intervalMS = 5 * 60 * 1000 // 5 minutes
 
 const AppContent = () => {
   const { showNotification } = useNotification()
+  const location = useLocation()
   useSyncOnReconnect()
 
+  // Every route renders through this Outlet, so one listener here gives crash
+  // reports the trail that led to the failure.
+  useEffect(() => {
+    recordRoute(location.pathname)
+  }, [location.pathname])
+
+  // First-launch native users see the onboarding flow before anything else.
+  const isRedirectingToOnboarding = useOnboardingGate()
+
   // Initialize status bar with theme-aware configuration
   useStatusBar()
 
   const {
-    offlineReady: [offlineReady, setOfflineReady], // eslint-disable-line no-unused-vars
     needRefresh: [needRefresh, setNeedRefresh],
+    offlineReady: [offlineReady, setOfflineReady],
     updateServiceWorker,
   } = useRegisterSW({
     onRegistered(r) {
@@ -83,6 +96,8 @@ const AppContent = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [needRefresh])
 
+  if (isRedirectingToOnboarding) return null
+
   return (
     <div>
       <ImpersonateUserProvider>
@@ -96,7 +111,7 @@ const AppContent = () => {
 }
 
 function App() {
-  const resource = useResource() // eslint-disable-line no-unused-vars
+  const resource = useResource()
   const { mode, systemMode } = useColorScheme()
   const navigate = useNavigate()
 
@@ -133,7 +148,9 @@ function App() {
 
       <AuthProvider>
         <SSEProvider>
-          <AppContent />
+          <GlobalSearchProvider>
+            <AppContent />
+          </GlobalSearchProvider>
         </SSEProvider>
       </AuthProvider>
     </div>

src/Application.jsx

@@ -0,0 +1,10 @@
+import App from './App.jsx'
+import Contexts from './contexts/Contexts.jsx'
+
+const Application = () => (
+  <Contexts>
+    <App />
+  </Contexts>
+)
+
+export default Application

src/CapacitorListener.js

@@ -6,8 +6,11 @@ import { LocalNotifications } from '@capacitor/local-notifications'
 import { Preferences } from '@capacitor/preferences'
 import { PushNotifications } from '@capacitor/push-notifications'
 import { focusManager } from '@tanstack/react-query'
+
 import { RegisterDeviceToken } from './utils/Fetcher'
 import { beginOAuthExchange } from './utils/OAuthExchangeState'
+import { hasSeenOnboarding } from './utils/Onboarding'
+import { setPendingInvite } from './utils/PendingInvite'
 
 // React Router navigate(), injected by <App /> once the router is mounted.
 // Using client-side navigation (instead of window.location.href) avoids a full
@@ -63,7 +66,27 @@ const handleNFCChoreDeepLink = (url, isColdStart) => {
 
 const handleUrlOpen = (url, isColdStart = false) => {
   console.log('[NFC] handleUrlOpen:', url)
-  if (url.startsWith('donetick://chores/add')) {
+  let parsedUrl
+  try {
+    parsedUrl = new URL(url)
+  } catch {
+    return
+  }
+
+  const isCircleInvite =
+    (parsedUrl.protocol === 'donetick:' &&
+      parsedUrl.host === 'circle' &&
+      parsedUrl.pathname === '/join') ||
+    (parsedUrl.protocol === 'https:' && parsedUrl.pathname === '/circle/join')
+
+  if (isCircleInvite) {
+    setPendingInvite(parsedUrl.searchParams.get('code'))
+    const needsOnboarding =
+      !hasSeenOnboarding() && !localStorage.getItem('token')
+    routerNavigate(
+      needsOnboarding ? '/onboarding' : `/circle/join${parsedUrl.search}`,
+    )
+  } else if (url.startsWith('donetick://chores/add')) {
     // Widget "+" / quick-capture buttons: land on the chore list with the
     // quick-add modal open (MyChores watches for the add_task param and
     // consumes it). ?mode=scan|voice opens straight into that capture panel.

src/Config.js

@@ -1,4 +1,3 @@
-/* eslint-env node */
 export const API_URL =
   import.meta.env.VITE_APP_API_URL === 'AUTO'
     ? `${window.location.hostname}/api`

src/Logo.jsx

@@ -1,8 +1,8 @@
 import LogoSVG from '@/assets/logo.svg'
-const Logo = () => {
+const Logo = ({ size = '128px' }) => {
   return (
     <div className='logo'>
-      <img src={LogoSVG} alt='logo' width='128px' height='128px' />
+      <img src={LogoSVG} alt='logo' width={size} height={size} />
     </div>
   )
 }

src/MarketingApp.jsx

@@ -0,0 +1,66 @@
+import { useColorScheme } from '@mui/joy'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+
+import { ImpersonateUserProvider } from './contexts/ImpersonateUserContext'
+import { LocalizationProvider } from './contexts/LocalizationContext'
+import ThemeContext from './contexts/ThemeContext'
+import Landing from './views/Landing/Landing'
+import PrivacyPolicyView from './views/PrivacyPolicy/PrivacyPolicyView'
+import TermsView from './views/Terms/TermsView'
+
+const AppRedirect = () => {
+  useEffect(() => {
+    const { hash, pathname, search } = window.location
+    window.location.replace(
+      `https://app.donetick.com${pathname}${search}${hash}`,
+    )
+  }, [])
+
+  return null
+}
+
+const router = createBrowserRouter([
+  { path: '/', element: <Landing /> },
+  { path: '/privacy', element: <PrivacyPolicyView /> },
+  { path: '/terms', element: <TermsView /> },
+  { path: '*', element: <AppRedirect /> },
+])
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { enabled: false, refetchOnWindowFocus: false, retry: false },
+  },
+})
+
+const ThemeClass = () => {
+  const { mode, systemMode } = useColorScheme()
+
+  useEffect(() => {
+    const storedMode = JSON.parse(localStorage.getItem('themeMode') || 'null')
+    const selectedMode = storedMode || mode
+    const isDark =
+      selectedMode === 'dark' ||
+      (selectedMode === 'system' && systemMode === 'dark')
+
+    document.getElementById('root').classList.toggle('dark', isDark)
+  }, [mode, systemMode])
+
+  return null
+}
+
+const MarketingApp = () => (
+  <ThemeContext>
+    <ThemeClass />
+    <QueryClientProvider client={queryClient}>
+      <LocalizationProvider>
+        <ImpersonateUserProvider>
+          <RouterProvider router={router} />
+        </ImpersonateUserProvider>
+      </LocalizationProvider>
+    </QueryClientProvider>
+  </ThemeContext>
+)
+
+export default MarketingApp

src/components/NotificationTemplate.jsx

@@ -63,6 +63,10 @@ function getInternalValue(timing, displayValue) {
 
 const NotificationTemplate = ({
   maxNotifications = 5,
+  // ChoreEdit gates this editor behind its own on/off switch, so the last row
+  // must stay put — `notification: true` with no templates is not a valid task.
+  // Consumers that own an empty state themselves pass 0.
+  minNotifications = 1,
   onChange,
   value,
   showTimeline = true,
@@ -259,7 +263,8 @@ const NotificationTemplate = ({
       return next
     })
 
-    onChange && onChange(updated)
+    // No direct onChange here: consumers expect { notifications }, and the
+    // effect below already emits that shape once the state settles.
     setShowSaveDefault(true)
   }
 
@@ -307,9 +312,6 @@ const NotificationTemplate = ({
 
     return (
       <Box sx={{ mt: 3, mb: 2 }}>
-        <Typography level={'body-md'} sx={{ mb: 1 }}>
-          Notification Timeline
-        </Typography>
         <Box
           sx={{
             display: 'flex',
@@ -642,7 +644,7 @@ const NotificationTemplate = ({
                   </Select>
                   <IconButton
                     onClick={() => removeNotification(idx)}
-                    disabled={notifications.length === 1}
+                    disabled={notifications.length <= minNotifications}
                     color={'danger'}
                     size={'sm'}
                     variant={'soft'}

src/components/SubscriptionModal.jsx

@@ -1,16 +1,8 @@
 import { Check, Star } from '@mui/icons-material'
-import {
-  Box,
-  Button,
-  Card,
-  Chip,
-  Divider,
-  Modal,
-  ModalDialog,
-  Radio,
-  Typography,
-} from '@mui/joy'
+import { Box, Card, Chip, Divider, Radio, Typography } from '@mui/joy'
 import { useState } from 'react'
+import AppModal from './common/AppModal'
+import ModalActions from './common/ModalActions'
 import { useNotification } from '../service/NotificationProvider'
 import { GetSubscriptionSession } from '../utils/Fetcher'
 
@@ -76,183 +68,158 @@ const SubscriptionModal = ({ open, onClose }) => {
   }
 
   return (
-    <Modal open={open} onClose={onClose}>
-      <ModalDialog
-        layout='center'
-        sx={{
-          width: 600,
-          maxWidth: '95vw',
-          maxHeight: '95vh',
-          overflow: 'auto',
-          p: 0,
-        }}
-      >
-        <Box sx={{ p: 4 }}>
-          {/* Header */}
-          <Box sx={{ textAlign: 'center', mb: 4 }}>
-            <Typography level='h3' sx={{ mb: 1 }}>
-              Upgrade to Plus
-            </Typography>
-          </Box>
-
-          {/* Features List */}
-          <Box sx={{ mb: 2 }}>
-            <Typography level='title-lg' sx={{ mb: 2 }}>
-              What&apos;s included:
-            </Typography>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
-              {features.map((feature, index) => (
-                <Box
-                  key={index}
-                  sx={{ display: 'flex', alignItems: 'center', gap: 2 }}
-                >
-                  <Check color='success' sx={{ fontSize: 20 }} />
-                  <Typography level='body-md'>{feature}</Typography>
-                </Box>
-              ))}
+    <AppModal
+      open={open}
+      onClose={onClose}
+      title='Upgrade to Plus'
+      description='Unlock reminders, rich task details, and advanced automation.'
+      size='lg'
+      closeOnBackdrop={!isLoading}
+      closeOnEscape={!isLoading}
+      footer={
+        <ModalActions
+          stackOnMobile
+          secondary={{ label: 'Cancel', onClick: onClose, disabled: isLoading }}
+          primary={{
+            label: 'Subscribe',
+            onClick: handleSubscribe,
+            loading: isLoading,
+          }}
+        />
+      }
+    >
+      {/* Features List */}
+      <Box sx={{ mb: 2 }}>
+        <Typography level='title-lg' sx={{ mb: 2 }}>
+          What&apos;s included:
+        </Typography>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+          {features.map((feature, index) => (
+            <Box
+              key={index}
+              sx={{ display: 'flex', alignItems: 'center', gap: 2 }}
+            >
+              <Check color='success' sx={{ fontSize: 20 }} />
+              <Typography level='body-md'>{feature}</Typography>
             </Box>
-          </Box>
-          <Divider sx={{ my: 3 }} />
-
-          {/* Plan Selection */}
-          <Box
-            sx={{ display: 'flex', flexDirection: 'column', gap: 1.2, mb: 4 }}
-          >
-            {Object.entries(plans).map(([key, plan]) => (
-              <Card
-                key={key}
-                color={selectedPlan === key ? 'primary' : 'neutral'}
-                onClick={() => setSelectedPlan(key)}
-                sx={{
-                  width: '100%',
-                  minHeight: 48,
-                  maxHeight: 64,
-                  cursor: 'pointer',
-                  transition: 'all 0.2s',
-                  mb: 0.2,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  px: 2.5,
-                  py: 1.2,
-                  position: 'relative',
-                  overflow: 'visible',
-                }}
-              >
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    justifyContent: 'flex-start',
-                    width: '100%',
-                  }}
-                >
-                  <Radio
-                    checked={selectedPlan === key}
-                    onChange={() => setSelectedPlan(key)}
-                    value={key}
-                    name='subscription-plan'
-                    color='primary'
-                    sx={{ mr: 1 }}
-                  />
-                  <Typography level='body-md' sx={{ fontWeight: 600 }}>
-                    {key.charAt(0).toUpperCase() + key.slice(1)}
-                  </Typography>
-                  <Typography level='body-sm' sx={{ fontWeight: 500, ml: 1 }}>
-                    {plan.price}
-                    <span style={{ color: '#888', fontWeight: 400 }}>
-                      {' '}
-                      / {plan.period}
-                    </span>
-                  </Typography>
-                </Box>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 0.5,
-                    position: 'absolute',
-                    right: 16,
-                    top: -18,
-                  }}
-                >
-                  {plan.popular && (
-                    <Chip
-                      variant='solid'
-                      color='warning'
-                      size='sm'
-                      startDecorator={<Star />}
-                      sx={{
-                        fontWeight: 600,
-                        fontSize: 12,
-                        px: 1,
-                        py: 0.1,
-                        boxShadow: 2,
-                        mt: 0.8,
-                      }}
-                    >
-                      Most Popular
-                    </Chip>
-                  )}
-                  {plan.savings && (
-                    <Chip
-                      variant='soft'
-                      color='success'
-                      size='sm'
-                      sx={{
-                        fontWeight: 600,
-                        fontSize: 12,
-                        px: 1,
-                        py: 0.1,
-                        boxShadow: 2,
-                        mt: 0.8,
-                      }}
-                    >
-                      {plan.savings}
-                    </Chip>
-                  )}
-                </Box>
-              </Card>
-            ))}
-          </Box>
-
-          {/* Action Buttons */}
-          <Box
-            sx={{ display: 'flex', flexDirection: 'column', gap: 1.2, mt: 2 }}
-          >
-            <Button
-              variant='solid'
-              color='primary'
-              onClick={handleSubscribe}
-              loading={isLoading}
-              fullWidth
-              size='lg'
-              sx={{ mb: 1 }}
-            >
-              Subscribe
-            </Button>
-            <Button
-              variant='plain'
-              onClick={onClose}
-              disabled={isLoading}
-              fullWidth
-            >
-              Cancel
-            </Button>
-          </Box>
-
-          {/* Footer */}
-          <Typography
-            level='body-xs'
-            color='neutral'
-            sx={{ textAlign: 'center', mt: 3 }}
-          >
-            Cancel anytime. No hidden fees. Secure payment powered by Stripe.
-          </Typography>
+          ))}
         </Box>
-      </ModalDialog>
-    </Modal>
+      </Box>
+      <Divider sx={{ my: 3 }} />
+
+      {/* Plan Selection */}
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.2, mb: 4 }}>
+        {Object.entries(plans).map(([key, plan]) => (
+          <Card
+            component='label'
+            htmlFor={`subscription-plan-${key}`}
+            key={key}
+            color={selectedPlan === key ? 'primary' : 'neutral'}
+            onClick={() => setSelectedPlan(key)}
+            sx={{
+              width: '100%',
+              minHeight: 48,
+              maxHeight: 64,
+              cursor: 'pointer',
+              transition: 'all 0.2s',
+              mb: 0.2,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              px: 2.5,
+              py: 1.2,
+              position: 'relative',
+              overflow: 'visible',
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2,
+                justifyContent: 'flex-start',
+                width: '100%',
+              }}
+            >
+              <Radio
+                id={`subscription-plan-${key}`}
+                checked={selectedPlan === key}
+                onChange={() => setSelectedPlan(key)}
+                value={key}
+                name='subscription-plan'
+                color='primary'
+                sx={{ mr: 1 }}
+              />
+              <Typography level='body-md' sx={{ fontWeight: 600 }}>
+                {key.charAt(0).toUpperCase() + key.slice(1)}
+              </Typography>
+              <Typography level='body-sm' sx={{ fontWeight: 500, ml: 1 }}>
+                {plan.price}
+                <span style={{ color: '#888', fontWeight: 400 }}>
+                  {' '}
+                  / {plan.period}
+                </span>
+              </Typography>
+            </Box>
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+                position: 'absolute',
+                right: 16,
+                top: -18,
+              }}
+            >
+              {plan.popular && (
+                <Chip
+                  variant='solid'
+                  color='warning'
+                  size='sm'
+                  startDecorator={<Star />}
+                  sx={{
+                    fontWeight: 600,
+                    fontSize: 12,
+                    px: 1,
+                    py: 0.1,
+                    boxShadow: 2,
+                    mt: 0.8,
+                  }}
+                >
+                  Most Popular
+                </Chip>
+              )}
+              {plan.savings && (
+                <Chip
+                  variant='soft'
+                  color='success'
+                  size='sm'
+                  sx={{
+                    fontWeight: 600,
+                    fontSize: 12,
+                    px: 1,
+                    py: 0.1,
+                    boxShadow: 2,
+                    mt: 0.8,
+                  }}
+                >
+                  {plan.savings}
+                </Chip>
+              )}
+            </Box>
+          </Card>
+        ))}
+      </Box>
+
+      {/* Footer */}
+      <Typography
+        level='body-xs'
+        color='neutral'
+        sx={{ textAlign: 'center', mt: 3 }}
+      >
+        Cancel anytime. No hidden fees. Secure payment powered by Stripe.
+      </Typography>
+    </AppModal>
   )
 }
 

src/components/animations/PageTransition.jsx

@@ -85,6 +85,9 @@ const PageTransition = ({ children }) => {
       location.pathname.includes('/login') ||
       location.pathname.includes('/signup') ||
       location.pathname.includes('/landing') ||
+      location.pathname.includes('/onboarding') ||
+      location.pathname.includes('/get-started') ||
+      location.pathname.includes('/ready') ||
       location.pathname.includes('/auth/')
 
     // Apply transition type as data attribute for CSS

src/components/common/AppModal.jsx

@@ -0,0 +1,230 @@
+import { Close } from '@mui/icons-material'
+import { Box, Divider, IconButton, Modal, Sheet, Typography } from '@mui/joy'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { forwardRef, useId } from 'react'
+import { Z_INDEX } from '../../constants/zIndex'
+
+const WIDTH_BY_SIZE = {
+  sm: 400,
+  md: 520,
+  lg: 680,
+  xl: 840,
+}
+
+/**
+ * The app's modal primitive. It owns modal layout, spacing, accessibility,
+ * responsive presentation, and motion so feature components only own content.
+ */
+const AppModal = forwardRef(
+  (
+    {
+      open,
+      onClose,
+      children,
+      title,
+      description,
+      footer,
+      size = 'md',
+      fullWidth = true,
+      isMobile: isMobileProp,
+      mobilePresentation = 'sheet',
+      role = 'dialog',
+      showCloseButton = true,
+      showHandle = false,
+      closeOnBackdrop = true,
+      closeOnEscape = true,
+      backdropBlur = true,
+      maxHeight = '90dvh',
+      contentSx,
+      footerSx,
+      sx,
+      unmountDelay = 180,
+      ...modalProps
+    },
+    ref,
+  ) => {
+    const generatedId = useId()
+    const detectedMobile = useMediaQuery('(max-width:768px)')
+    const isMobile = isMobileProp ?? detectedMobile
+    const titleId = title ? `${generatedId}-title` : undefined
+    const descriptionId = description ? `${generatedId}-description` : undefined
+    const isSheet = isMobile && mobilePresentation === 'sheet'
+    const isFullscreen = isMobile && mobilePresentation === 'fullscreen'
+
+    const handleClose = (event, reason) => {
+      if (reason === 'backdropClick' && !closeOnBackdrop) return
+      if (reason === 'escapeKeyDown' && !closeOnEscape) return
+      onClose?.(event, reason)
+    }
+
+    return (
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
+        keepMounted
+        sx={{
+          zIndex: Z_INDEX.MODAL_BACKDROP,
+          display: 'flex',
+          alignItems: isSheet ? 'flex-end' : 'center',
+          justifyContent: 'center',
+          p: isMobile ? 0 : 2,
+          '& .MuiModal-backdrop': {
+            backgroundColor: 'rgba(8, 15, 24, 0.52)',
+            backdropFilter: backdropBlur ? 'blur(4px)' : 'none',
+          },
+        }}
+        {...modalProps}
+      >
+        <Sheet
+          ref={ref}
+          role={role}
+          aria-modal='true'
+          aria-labelledby={titleId}
+          aria-describedby={descriptionId}
+          variant='outlined'
+          sx={{
+            zIndex: Z_INDEX.MODAL_CONTENT,
+            display: 'flex',
+            flexDirection: 'column',
+            width: isFullscreen
+              ? '100%'
+              : isSheet
+                ? '100%'
+                : fullWidth
+                  ? `min(calc(100vw - 32px), ${WIDTH_BY_SIZE[size] || WIDTH_BY_SIZE.md}px)`
+                  : 'auto',
+            maxWidth: isMobile
+              ? 'none'
+              : WIDTH_BY_SIZE[size] || WIDTH_BY_SIZE.md,
+            height: isFullscreen ? '100dvh' : 'auto',
+            maxHeight: isFullscreen ? '100dvh' : maxHeight,
+            overflow: 'hidden',
+            borderRadius: isFullscreen ? 0 : isSheet ? '16px 16px 0 0' : '16px',
+            borderBottom: isSheet ? 0 : undefined,
+            boxShadow: 'lg',
+            outline: 0,
+            pb: isMobile ? 'env(safe-area-inset-bottom)' : 0,
+            animation: open
+              ? `${isSheet ? 'appSheetEnter' : 'appModalEnter'} ${Math.min(unmountDelay, 300)}ms cubic-bezier(0.2, 0.8, 0.2, 1)`
+              : undefined,
+            '@keyframes appModalEnter': {
+              from: { opacity: 0, transform: 'translateY(8px) scale(0.99)' },
+              to: { opacity: 1, transform: 'translateY(0) scale(1)' },
+            },
+            '@keyframes appSheetEnter': {
+              from: { transform: 'translateY(24px)' },
+              to: { transform: 'translateY(0)' },
+            },
+            '@media (prefers-reduced-motion: reduce)': {
+              animation: 'none',
+            },
+            ...sx,
+          }}
+        >
+          {isSheet && showHandle && (
+            <Box
+              aria-hidden='true'
+              sx={{ display: 'flex', justifyContent: 'center', pt: 1.25 }}
+            >
+              <Box
+                sx={{
+                  width: 36,
+                  height: 4,
+                  borderRadius: 999,
+                  bgcolor: 'neutral.300',
+                }}
+              />
+            </Box>
+          )}
+
+          {(title || description || showCloseButton) && (
+            <Box
+              component='header'
+              sx={{
+                position: 'relative',
+                flexShrink: 0,
+                px: { xs: 2, sm: 3 },
+                pt: isSheet && showHandle ? 1.25 : { xs: 2, sm: 2.5 },
+                pb: description ? 1.5 : 2,
+                pr: showCloseButton ? { xs: 7, sm: 8 } : { xs: 2, sm: 3 },
+              }}
+            >
+              {title && (
+                <Typography
+                  id={titleId}
+                  level='title-lg'
+                  sx={{ fontWeight: 650 }}
+                >
+                  {title}
+                </Typography>
+              )}
+              {description && (
+                <Typography
+                  id={descriptionId}
+                  level='body-sm'
+                  sx={{ color: 'text.tertiary', mt: 0.5 }}
+                >
+                  {description}
+                </Typography>
+              )}
+              {showCloseButton && (
+                <IconButton
+                  aria-label='Close dialog'
+                  variant='plain'
+                  color='neutral'
+                  onClick={handleClose}
+                  sx={{
+                    position: 'absolute',
+                    top: isSheet && showHandle ? 6 : 12,
+                    right: { xs: 10, sm: 16 },
+                    borderRadius: '50%',
+                  }}
+                >
+                  <Close />
+                </IconButton>
+              )}
+            </Box>
+          )}
+
+          <Box
+            sx={{
+              flex: 1,
+              minHeight: 0,
+              overflowY: 'auto',
+              overscrollBehavior: 'contain',
+              px: { xs: 2, sm: 3 },
+              pb: { xs: 2.5, sm: 3 },
+              ...contentSx,
+            }}
+          >
+            {children}
+          </Box>
+
+          {footer && (
+            <>
+              <Divider />
+              <Box
+                component='footer'
+                sx={{
+                  flexShrink: 0,
+                  px: { xs: 2, sm: 3 },
+                  py: 2,
+                  bgcolor: 'background.surface',
+                  ...footerSx,
+                }}
+              >
+                {footer}
+              </Box>
+            </>
+          )}
+        </Sheet>
+      </Modal>
+    )
+  },
+)
+
+AppModal.displayName = 'AppModal'
+
+export default AppModal

src/components/common/BottomSheetModal.jsx

@@ -1,254 +0,0 @@
-import { Close } from '@mui/icons-material'
-import { Divider, IconButton, Modal, Sheet, Typography } from '@mui/joy'
-import { forwardRef, useEffect, useState } from 'react'
-import { Z_INDEX } from '../../constants/zIndex'
-
-const BottomSheetModal = forwardRef(
-  (
-    {
-      open,
-      onClose,
-      children,
-      title,
-      footer,
-      height = 'auto',
-      maxHeight = '90vh',
-      expandedHeight = '95vh',
-      backdropBlur = true,
-      showHandle = true,
-      showCloseButton = true,
-      ...props
-    },
-    ref,
-  ) => {
-    const [isExpanded, setIsExpanded] = useState(false)
-    const [isClosing, setIsClosing] = useState(false)
-    const [internalOpen, setInternalOpen] = useState(open)
-
-    // Handle opening
-    useEffect(() => {
-      if (open) {
-        setInternalOpen(true)
-        setIsClosing(false)
-      }
-    }, [open])
-
-    // Handle closing with animation
-    useEffect(() => {
-      if (!open && internalOpen) {
-        setIsClosing(true)
-        // Wait for animation to complete before hiding modal
-        const timer = setTimeout(() => {
-          setInternalOpen(false)
-          setIsClosing(false)
-          setIsExpanded(false)
-        }, 250) // Match transition duration
-
-        return () => clearTimeout(timer)
-      }
-    }, [open, internalOpen])
-
-    // Handle toggle expansion
-    const handleToggleExpansion = () => {
-      setIsExpanded(prev => !prev)
-    }
-
-    // Close on escape key
-    useEffect(() => {
-      const handleEscape = event => {
-        if (event.key === 'Escape' && internalOpen) {
-          onClose?.()
-        }
-      }
-
-      if (internalOpen) {
-        document.addEventListener('keydown', handleEscape)
-        // Prevent body scroll when modal is open
-        // document.body.style.overflow = 'hidden'
-      } else {
-        // Restore scroll immediately when modal starts closing
-        // document.body.style.overflow = 'unset'
-      }
-
-      return () => {
-        document.removeEventListener('keydown', handleEscape)
-        document.body.style.overflow = 'unset'
-      }
-    }, [internalOpen, onClose])
-
-    // Calculate current height
-    const currentHeight = isExpanded ? expandedHeight : height
-
-    // Filter out DOM props that shouldn't be passed to Modal
-    const {
-      fullWidth: _fullWidth,
-      unmountDelay: _unmountDelay,
-      ...modalProps
-    } = props
-
-    return (
-      <Modal
-        open={internalOpen}
-        onClose={onClose}
-        sx={{
-          '& .MuiModal-backdrop': {
-            backdropFilter: backdropBlur ? 'blur(3px)' : 'none',
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-          },
-          display: 'flex',
-          alignItems: 'flex-end',
-          justifyContent: 'center',
-        }}
-        keepMounted
-        {...modalProps}
-      >
-        <Sheet
-          ref={ref}
-          sx={{
-            zIndex: Z_INDEX.MODAL_CONTENT,
-            minHeight: '20%',
-            width: '100%',
-            height: currentHeight,
-            maxHeight: isExpanded ? expandedHeight : maxHeight,
-            borderTopLeftRadius: 16,
-            borderTopRightRadius: 16,
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-            p: 0,
-            overflow: 'hidden',
-            display: 'flex',
-            flexDirection: 'column',
-            transition:
-              'height 0.3s cubic-bezier(0.32, 0.72, 0, 1), max-height 0.3s cubic-bezier(0.32, 0.72, 0, 1), transform 0.3s cubic-bezier(0.32, 0.72, 0, 1)',
-            transform:
-              open && !isClosing ? 'translateY(0)' : 'translateY(100%)',
-            // Handle safe area on mobile devices
-            paddingBottom: 'env(safe-area-inset-bottom)',
-          }}
-        >
-          {/* Header Section with drag handle, title, and close button */}
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              backgroundColor: 'inherit',
-              borderTopLeftRadius: 16,
-              borderTopRightRadius: 16,
-              position: 'relative',
-            }}
-          >
-            {/* Close button positioned absolutely in top-right */}
-            {showCloseButton && (
-              <IconButton
-                variant='soft'
-                color='neutral'
-                size='sm'
-                onClick={onClose}
-                sx={{
-                  position: 'absolute',
-                  top: 8,
-                  right: 16,
-                  zIndex: 1,
-                  borderRadius: '50%',
-                  width: 32,
-                  height: 32,
-                  backgroundColor: 'neutral.softBg',
-                  color: 'neutral.softColor',
-                  '&:hover': {
-                    backgroundColor: 'neutral.softHoverBg',
-                    transform: 'scale(1.05)',
-                  },
-                  transition: 'all 0.2s ease',
-                  flexShrink: 0,
-                }}
-              >
-                <Close fontSize='small' />
-              </IconButton>
-            )}
-
-            {/* Drag Handle */}
-            {showHandle && (
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  padding: '12px 0 8px 0',
-                  cursor: 'pointer',
-                  userSelect: 'none',
-                  marginBottom: 16,
-                }}
-                onClick={handleToggleExpansion}
-                title={isExpanded ? 'Collapse' : 'Expand'}
-              >
-                <div
-                  style={{
-                    width: 30,
-                    height: 4,
-                    borderRadius: 2,
-                    backgroundColor: 'var(--joy-palette-neutral-300)',
-                    transition: 'background-color 0.2s ease',
-                  }}
-                />
-              </div>
-            )}
-
-            {/* Title Row */}
-            {title && (
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  padding: showHandle
-                    ? '0 20px 16px 20px'
-                    : '16px 20px 16px 20px',
-                  paddingRight: showCloseButton ? '60px' : '20px', // Add space for close button
-                  minHeight: 24,
-                }}
-              >
-                <Typography
-                  level='title-lg'
-                  sx={{
-                    fontWeight: 600,
-                    flex: 1,
-                  }}
-                >
-                  {title}
-                </Typography>
-              </div>
-            )}
-          </div>
-          {/* Content area */}
-          <div
-            style={{
-              flex: 1,
-              overflow: 'auto',
-              padding: '0 20px 20px 20px',
-              minHeight: 0, // Important for flex child with overflow
-            }}
-          >
-            {children}
-          </div>
-
-          {footer && (
-            <>
-              <Divider />
-              <footer
-                style={{
-                  flexShrink: 0,
-                  // borderTop: '1px solid var(--joy-palette-divider)',
-                  padding: '16px 20px',
-                }}
-              >
-                {footer}
-              </footer>
-            </>
-          )}
-        </Sheet>
-      </Modal>
-    )
-  },
-)
-
-BottomSheetModal.displayName = 'BottomSheetModal'
-
-export default BottomSheetModal

src/components/common/EmptyState.jsx

@@ -0,0 +1,231 @@
+import { Box, Button, Typography } from '@mui/joy'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
+
+/**
+ * The single empty/error surface for the app.
+ *
+ * variant drives the tone, the icon tile color and the a11y role:
+ *   - 'empty'      nothing exists yet. Teach the feature, offer the way in.
+ *   - 'no-results' something exists, the current search/filter hides it.
+ *   - 'error'      we failed to load. Say what happened, offer a retry.
+ *
+ * Actions are objects instead of nodes so every call site gets the same
+ * button vocabulary (solid primary lead, plain neutral follow).
+ */
+
+const TONES = {
+  empty: {
+    tileBg: 'primary.softHoverBg',
+    halo: 'primary.softBg',
+    iconColor: 'primary.softColor',
+    role: 'status',
+  },
+  'no-results': {
+    tileBg: 'neutral.softHoverBg',
+    halo: 'neutral.softBg',
+    iconColor: 'neutral.softColor',
+    role: 'status',
+  },
+  error: {
+    tileBg: 'danger.softHoverBg',
+    halo: 'danger.softBg',
+    iconColor: 'danger.softColor',
+    role: 'alert',
+  },
+}
+
+const SIZES = {
+  sm: {
+    tile: 48,
+    icon: '1.375rem',
+    halo: 6,
+    py: 5,
+    title: 'title-sm',
+    titleSize: '1rem',
+  },
+  md: {
+    tile: 68,
+    icon: '1.875rem',
+    halo: 10,
+    py: 8,
+    title: 'title-md',
+    titleSize: '1.25rem',
+  },
+}
+
+const ActionButton = ({ action, ...buttonProps }) => {
+  const { label, to, onClick, ...rest } = action
+  return (
+    <Button
+      {...buttonProps}
+      {...rest}
+      onClick={onClick}
+      {...(to ? { component: Link, to } : {})}
+    >
+      {label}
+    </Button>
+  )
+}
+
+ActionButton.propTypes = {
+  action: PropTypes.object.isRequired,
+}
+
+const EmptyState = ({
+  variant = 'empty',
+  icon,
+  title,
+  description,
+  primaryAction,
+  secondaryAction,
+  size = 'md',
+  fullHeight = false,
+  sx,
+  ...rest
+}) => {
+  const tone = TONES[variant] || TONES.empty
+  const dimensions = SIZES[size] || SIZES.md
+  const buttonSize = size === 'sm' ? 'sm' : 'md'
+
+  return (
+    <Box
+      role={tone.role}
+      aria-live={variant === 'error' ? 'assertive' : 'polite'}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlign: 'center',
+        gap: 0.75,
+        px: 3,
+        py: dimensions.py,
+        ...(fullHeight && { minHeight: '55vh' }),
+        animation: 'dt-empty-state-in 200ms cubic-bezier(0.16, 1, 0.3, 1)',
+        '@keyframes dt-empty-state-in': {
+          from: { opacity: 0, transform: 'translateY(4px)' },
+          to: { opacity: 1, transform: 'none' },
+        },
+        '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
+        ...sx,
+      }}
+      {...rest}
+    >
+      {icon && (
+        <Box
+          aria-hidden='true'
+          sx={{
+            // Two concentric tints: a wide, pale halo with a deeper medallion
+            // inside it, so the icon reads as an object rather than a chip.
+            width: dimensions.tile + dimensions.halo * 2,
+            height: dimensions.tile + dimensions.halo * 2,
+            mb: 1.5,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '50%',
+            bgcolor: tone.halo,
+          }}
+        >
+          <Box
+            sx={{
+              width: dimensions.tile,
+              height: dimensions.tile,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: '50%',
+              bgcolor: tone.tileBg,
+              color: tone.iconColor,
+              '& > svg': { fontSize: dimensions.icon },
+            }}
+          >
+            {icon}
+          </Box>
+        </Box>
+      )}
+
+      <Typography
+        level={dimensions.title}
+        sx={{
+          color: 'text.primary',
+          fontSize: dimensions.titleSize,
+          fontWeight: 'lg',
+          letterSpacing: '-0.01em',
+          textWrap: 'balance',
+        }}
+      >
+        {title}
+      </Typography>
+
+      {description && (
+        <Typography
+          level='body-sm'
+          sx={{
+            color: 'text.secondary',
+            maxWidth: '38ch',
+            lineHeight: 1.55,
+            textWrap: 'pretty',
+          }}
+        >
+          {description}
+        </Typography>
+      )}
+
+      {(primaryAction || secondaryAction) && (
+        <Box
+          sx={{
+            mt: 1.5,
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            gap: 1,
+          }}
+        >
+          {primaryAction && (
+            <ActionButton
+              action={primaryAction}
+              variant='solid'
+              color='primary'
+              size={buttonSize}
+              sx={{ minWidth: size === 'sm' ? 0 : 148 }}
+            />
+          )}
+          {secondaryAction && (
+            <ActionButton
+              action={secondaryAction}
+              variant='plain'
+              color='neutral'
+              size={buttonSize}
+            />
+          )}
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+EmptyState.propTypes = {
+  variant: PropTypes.oneOf(['empty', 'no-results', 'error']),
+  icon: PropTypes.node,
+  title: PropTypes.node.isRequired,
+  description: PropTypes.node,
+  primaryAction: PropTypes.shape({
+    label: PropTypes.node.isRequired,
+    onClick: PropTypes.func,
+    to: PropTypes.string,
+    startDecorator: PropTypes.node,
+  }),
+  secondaryAction: PropTypes.shape({
+    label: PropTypes.node.isRequired,
+    onClick: PropTypes.func,
+    to: PropTypes.string,
+    startDecorator: PropTypes.node,
+  }),
+  size: PropTypes.oneOf(['sm', 'md']),
+  fullHeight: PropTypes.bool,
+  sx: PropTypes.object,
+}
+
+export default EmptyState

src/components/common/FadeModal.jsx

@@ -1,95 +0,0 @@
-import { Modal, ModalClose, ModalDialog, ModalOverflow, Typography } from '@mui/joy'
-import { Z_INDEX } from '../../constants/zIndex'
-
-/**
- * FadeModal component with consistent fade-in/out animations
- * Can be used as a drop-in replacement for Joy UI's Modal component
- */
-const FadeModal = ({
-  open,
-  onClose,
-  children,
-  size = 'md',
-  fullWidth = true,
-  backdropBlur = true,
-  title,
-  footer,
-  ...props
-}) => {
-  // Filter out props that shouldn't be passed to Modal
-  const { unmountDelay: _unmountDelay, ...modalProps } = props
-  return (
-    <Modal
-      open={open}
-      onClose={onClose}
-      sx={{
-        '& .MuiModal-backdrop': {
-          backdropFilter: backdropBlur ? 'blur(3px)' : 'none',
-        },
-      }}
-      keepMounted
-      // These transition properties create a smooth fade + slide effect
-      transition={{
-        mount: { opacity: 1, transform: 'translateY(0px)' },
-        unmount: { opacity: 0, transform: 'translateY(20px)' },
-        duration: 250, // Animation duration in ms
-        easing: {
-          enter: 'cubic-bezier(0.34, 1.56, 0.64, 1)', // Slight overshoot for natural feel
-          exit: 'cubic-bezier(0.4, 0, 0.2, 1)', // Standard ease out
-        },
-      }}
-      {...modalProps}
-    >
-      <ModalOverflow>
-        <ModalDialog
-          size={size}
-          sx={{
-            zIndex: Z_INDEX.MODAL_CONTENT,
-            minWidth: fullWidth ? '90%' : 'auto',
-            animation: open
-              ? 'modalFadeIn 0.35s forwards'
-              : 'modalFadeOut 0.25s forwards',
-            '@keyframes modalFadeIn': {
-              from: { opacity: 0, transform: 'translateY(8px)' },
-              to: { opacity: 1, transform: 'translateY(0)' },
-            },
-            '@keyframes modalFadeOut': {
-              from: { opacity: 1, transform: 'translateY(0)' },
-              to: { opacity: 0, transform: 'translateY(8px)' },
-            },
-            // Add staggered animation for child elements
-            '& > *': {
-              opacity: 0,
-              animation: open
-                ? 'contentFadeIn 0.35s forwards'
-                : 'contentFadeOut 0.2s forwards',
-            },
-            // Stagger child animations
-            '& > *:nth-of-type(1)': { animationDelay: '0.05s' },
-            '& > *:nth-of-type(2)': { animationDelay: '0.1s' },
-            '& > *:nth-of-type(3)': { animationDelay: '0.15s' },
-            '& > *:nth-of-type(4)': { animationDelay: '0.2s' },
-            '& > *:nth-of-type(5)': { animationDelay: '0.25s' },
-            '@keyframes contentFadeIn': {
-              to: { opacity: 1 },
-            },
-            '@keyframes contentFadeOut': {
-              to: { opacity: 0 },
-            },
-          }}
-        >
-          <ModalClose />
-          {title && (
-            <Typography level='title-lg' sx={{ fontWeight: 600, mb: 2 }}>
-              {title}
-            </Typography>
-          )}
-          <div style={{ flex: 1, overflow: 'auto' }}>{children}</div>
-          {footer && <div style={{ marginTop: 16 }}>{footer}</div>}
-        </ModalDialog>
-      </ModalOverflow>
-    </Modal>
-  )
-}
-
-export default FadeModal

src/components/common/FilterBar.jsx

@@ -10,7 +10,8 @@ import {
   Typography,
 } from '@mui/joy'
 import { useState } from 'react'
-import BottomSheetModal from './BottomSheetModal'
+import AppModal from './AppModal'
+import ModalActions from './ModalActions'
 import ActiveFilterChips from './filter/ActiveFilterChips'
 
 /**
@@ -41,7 +42,10 @@ const DATE_RANGE_PRESETS = [
     label: 'Today',
     getRange: () => {
       const t = d(new Date())
-      return { from: t.toISOString(), to: d(new Date(), 23, 59, 59, 999).toISOString() }
+      return {
+        from: t.toISOString(),
+        to: d(new Date(), 23, 59, 59, 999).toISOString(),
+      }
     },
   },
   {
@@ -49,8 +53,12 @@ const DATE_RANGE_PRESETS = [
     label: 'Yesterday',
     getRange: () => {
       const t = d(new Date())
-      const y = new Date(t); y.setDate(t.getDate() - 1)
-      return { from: d(y).toISOString(), to: d(y, 23, 59, 59, 999).toISOString() }
+      const y = new Date(t)
+      y.setDate(t.getDate() - 1)
+      return {
+        from: d(y).toISOString(),
+        to: d(y, 23, 59, 59, 999).toISOString(),
+      }
     },
   },
   {
@@ -58,9 +66,14 @@ const DATE_RANGE_PRESETS = [
     label: 'This Week',
     getRange: () => {
       const t = d(new Date())
-      const start = new Date(t); start.setDate(t.getDate() - t.getDay())
-      const end = new Date(start); end.setDate(start.getDate() + 6)
-      return { from: d(start).toISOString(), to: d(end, 23, 59, 59, 999).toISOString() }
+      const start = new Date(t)
+      start.setDate(t.getDate() - t.getDay())
+      const end = new Date(start)
+      end.setDate(start.getDate() + 6)
+      return {
+        from: d(start).toISOString(),
+        to: d(end, 23, 59, 59, 999).toISOString(),
+      }
     },
   },
   {
@@ -68,8 +81,12 @@ const DATE_RANGE_PRESETS = [
     label: 'Last 7 Days',
     getRange: () => {
       const t = d(new Date())
-      const start = new Date(t); start.setDate(t.getDate() - 6)
-      return { from: d(start).toISOString(), to: d(new Date(), 23, 59, 59, 999).toISOString() }
+      const start = new Date(t)
+      start.setDate(t.getDate() - 6)
+      return {
+        from: d(start).toISOString(),
+        to: d(new Date(), 23, 59, 59, 999).toISOString(),
+      }
     },
   },
   {
@@ -79,7 +96,10 @@ const DATE_RANGE_PRESETS = [
       const n = new Date()
       const start = new Date(n.getFullYear(), n.getMonth(), 1)
       const end = new Date(n.getFullYear(), n.getMonth() + 1, 0)
-      return { from: start.toISOString(), to: d(end, 23, 59, 59, 999).toISOString() }
+      return {
+        from: start.toISOString(),
+        to: d(end, 23, 59, 59, 999).toISOString(),
+      }
     },
   },
   {
@@ -87,8 +107,12 @@ const DATE_RANGE_PRESETS = [
     label: 'Last 30 Days',
     getRange: () => {
       const t = d(new Date())
-      const start = new Date(t); start.setDate(t.getDate() - 29)
-      return { from: d(start).toISOString(), to: d(new Date(), 23, 59, 59, 999).toISOString() }
+      const start = new Date(t)
+      start.setDate(t.getDate() - 29)
+      return {
+        from: d(start).toISOString(),
+        to: d(new Date(), 23, 59, 59, 999).toISOString(),
+      }
     },
   },
   {
@@ -96,8 +120,12 @@ const DATE_RANGE_PRESETS = [
     label: 'Last 3 Months',
     getRange: () => {
       const t = d(new Date())
-      const start = new Date(t); start.setMonth(t.getMonth() - 3)
-      return { from: d(start).toISOString(), to: d(new Date(), 23, 59, 59, 999).toISOString() }
+      const start = new Date(t)
+      start.setMonth(t.getMonth() - 3)
+      return {
+        from: d(start).toISOString(),
+        to: d(new Date(), 23, 59, 59, 999).toISOString(),
+      }
     },
   },
 ]
@@ -127,7 +155,8 @@ const FilterBar = ({
   const activeFilterCount = filterDefs.filter(def => {
     const value = activeFilters[def.id]
     if (value === undefined || value === null) return false
-    if (def.defaultValue !== undefined && value === def.defaultValue) return false
+    if (def.defaultValue !== undefined && value === def.defaultValue)
+      return false
     if (Array.isArray(value) && value.length === 0) return false
     if (def.type === 'date-range') return !!(value?.from || value?.to)
     return true
@@ -183,13 +212,18 @@ const FilterBar = ({
     if (value === undefined || value === null) return null
 
     if (def.type === 'single-select') {
-      if (def.defaultValue !== undefined && value === def.defaultValue) return null
+      if (def.defaultValue !== undefined && value === def.defaultValue)
+        return null
       return def.options?.find(o => o.value === value)?.label ?? def.label
     }
 
     if (def.type === 'boolean') return def.label
 
-    if (def.type === 'multi-select' && Array.isArray(value) && value.length > 0) {
+    if (
+      def.type === 'multi-select' &&
+      Array.isArray(value) &&
+      value.length > 0
+    ) {
       if (value.length === 1) {
         return def.options?.find(o => o.value === value[0])?.label ?? def.label
       }
@@ -199,7 +233,10 @@ const FilterBar = ({
     if (def.type === 'date-range') {
       if (!value?.from && !value?.to) return null
       if (value.preset) {
-        return DATE_RANGE_PRESETS.find(p => p.value === value.preset)?.label ?? 'Date Range'
+        return (
+          DATE_RANGE_PRESETS.find(p => p.value === value.preset)?.label ??
+          'Date Range'
+        )
       }
       const from = fmtDisplayDate(value.from)
       const to = fmtDisplayDate(value.to)
@@ -259,7 +296,15 @@ const FilterBar = ({
   return (
     <>
       {/* ── Inline bar ─────────────────────────────────────── */}
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', mb: 2 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          flexWrap: 'wrap',
+          mb: 2,
+        }}
+      >
         <Badge
           badgeContent={activeFilterCount || null}
           color='primary'
@@ -309,37 +354,42 @@ const FilterBar = ({
       </Box>
 
       {/* ── Bottom sheet ────────────────────────────────────── */}
-      <BottomSheetModal
+      <AppModal
         open={isOpen}
+        isMobile
         onClose={() => setIsOpen(false)}
         title={
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <Tune sx={{ fontSize: 20 }} />
             Filters
             {hasActive && (
-              <Chip size='sm' variant='solid' color='primary' sx={modalCountChipSx}>
+              <Chip
+                size='sm'
+                variant='solid'
+                color='primary'
+                sx={modalCountChipSx}
+              >
                 {activeFilterCount}
               </Chip>
             )}
           </Box>
         }
         footer={
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 1 }}>
-            <Button
-              variant='plain'
-              color='danger'
-              size='sm'
-              disabled={!hasActive}
-              onClick={onClearAll}
-            >
-              Clear all
-            </Button>
-            <Button onClick={() => setIsOpen(false)} sx={{ minWidth: 140 }}>
-              {resultCount !== undefined
-                ? `Show ${resultCount} result${resultCount !== 1 ? 's' : ''}`
-                : 'Done'}
-            </Button>
-          </Box>
+          <ModalActions
+            tertiary={{
+              label: 'Clear all',
+              color: 'danger',
+              disabled: !hasActive,
+              onClick: onClearAll,
+            }}
+            primary={{
+              label:
+                resultCount !== undefined
+                  ? `Show ${resultCount} result${resultCount !== 1 ? 's' : ''}`
+                  : 'Done',
+              onClick: () => setIsOpen(false),
+            }}
+          />
         }
       >
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
@@ -348,9 +398,18 @@ const FilterBar = ({
               {idx > 0 && <Divider sx={{ my: 2.5 }} />}
 
               {/* Section header */}
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+              <Box
+                sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}
+              >
                 {def.icon && (
-                  <Box sx={{ color: 'text.secondary', display: 'flex', alignItems: 'center', '& svg': { fontSize: 18 } }}>
+                  <Box
+                    sx={{
+                      color: 'text.secondary',
+                      display: 'flex',
+                      alignItems: 'center',
+                      '& svg': { fontSize: 18 },
+                    }}
+                  >
                     {def.icon}
                   </Box>
                 )}
@@ -359,21 +418,41 @@ const FilterBar = ({
                 </Typography>
 
                 {/* active badge in header */}
-                {def.type === 'multi-select' && (activeFilters[def.id]?.length ?? 0) > 0 && (
-                  <Chip size='sm' variant='solid' color='primary' sx={sectionBadgeChipSx}>
-                    {activeFilters[def.id].length} selected
-                  </Chip>
-                )}
-                {def.type === 'single-select' && activeFilters[def.id] != null && (() => {
-                  const opt = def.options?.find(o => o.value === activeFilters[def.id])
-                  return opt ? (
-                    <Chip size='sm' variant='solid' color='primary' sx={sectionBadgeChipSx}>
-                      {opt.label}
+                {def.type === 'multi-select' &&
+                  (activeFilters[def.id]?.length ?? 0) > 0 && (
+                    <Chip
+                      size='sm'
+                      variant='solid'
+                      color='primary'
+                      sx={sectionBadgeChipSx}
+                    >
+                      {activeFilters[def.id].length} selected
                     </Chip>
-                  ) : null
-                })()}
+                  )}
+                {def.type === 'single-select' &&
+                  activeFilters[def.id] != null &&
+                  (() => {
+                    const opt = def.options?.find(
+                      o => o.value === activeFilters[def.id],
+                    )
+                    return opt ? (
+                      <Chip
+                        size='sm'
+                        variant='solid'
+                        color='primary'
+                        sx={sectionBadgeChipSx}
+                      >
+                        {opt.label}
+                      </Chip>
+                    ) : null
+                  })()}
                 {def.type === 'date-range' && getActiveChipLabel(def) && (
-                  <Chip size='sm' variant='solid' color='primary' sx={sectionBadgeChipSx}>
+                  <Chip
+                    size='sm'
+                    variant='solid'
+                    color='primary'
+                    sx={sectionBadgeChipSx}
+                  >
                     {getActiveChipLabel(def)}
                   </Chip>
                 )}
@@ -383,18 +462,28 @@ const FilterBar = ({
               {def.type === 'multi-select' && (
                 <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
                   {def.options?.map(opt => {
-                    const isSelected = (activeFilters[def.id] || []).includes(opt.value)
+                    const isSelected = (activeFilters[def.id] || []).includes(
+                      opt.value,
+                    )
                     return (
                       <Chip
                         key={opt.value}
                         variant={isSelected ? 'solid' : 'soft'}
-                        color={isSelected ? (opt.color ?? 'primary') : 'neutral'}
+                        color={
+                          isSelected ? (opt.color ?? 'primary') : 'neutral'
+                        }
                         startDecorator={
                           opt.avatar ? (
-                            <Avatar src={opt.avatar} alt={opt.label} sx={{ '--Avatar-size': '20px' }} />
+                            <Avatar
+                              src={opt.avatar}
+                              alt={opt.label}
+                              sx={{ '--Avatar-size': '20px' }}
+                            />
                           ) : isSelected ? (
                             <Check sx={{ fontSize: 14 }} />
-                          ) : (opt.icon ?? null)
+                          ) : (
+                            (opt.icon ?? null)
+                          )
                         }
                         onClick={() => handleMultiToggle(def.id, opt.value)}
                         sx={selectableChipSx}
@@ -415,13 +504,21 @@ const FilterBar = ({
                       <Chip
                         key={opt.value}
                         variant={isSelected ? 'solid' : 'soft'}
-                        color={isSelected ? (opt.color ?? 'primary') : 'neutral'}
+                        color={
+                          isSelected ? (opt.color ?? 'primary') : 'neutral'
+                        }
                         startDecorator={
                           opt.avatar ? (
-                            <Avatar src={opt.avatar} alt={opt.label} sx={{ '--Avatar-size': '20px' }} />
+                            <Avatar
+                              src={opt.avatar}
+                              alt={opt.label}
+                              sx={{ '--Avatar-size': '20px' }}
+                            />
                           ) : isSelected ? (
                             <Check sx={{ fontSize: 14 }} />
-                          ) : (opt.icon ?? null)
+                          ) : (
+                            (opt.icon ?? null)
+                          )
                         }
                         onClick={() => handleSingleToggle(def.id, opt.value)}
                         sx={selectableChipSx}
@@ -438,7 +535,11 @@ const FilterBar = ({
                 <Chip
                   variant={activeFilters[def.id] ? 'solid' : 'soft'}
                   color={activeFilters[def.id] ? 'primary' : 'neutral'}
-                  startDecorator={activeFilters[def.id] ? <Check sx={{ fontSize: 14 }} /> : null}
+                  startDecorator={
+                    activeFilters[def.id] ? (
+                      <Check sx={{ fontSize: 14 }} />
+                    ) : null
+                  }
                   onClick={() => handleBoolToggle(def.id)}
                   sx={selectableChipSx}
                 >
@@ -447,58 +548,84 @@ const FilterBar = ({
               )}
 
               {/* date-range */}
-              {def.type === 'date-range' && (() => {
-                const val = activeFilters[def.id] || {}
-                return (
-                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
-                    {/* Preset chips */}
-                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
-                      {DATE_RANGE_PRESETS.map(preset => {
-                        const isSelected = val.preset === preset.value
-                        return (
-                          <Chip
-                            key={preset.value}
-                            variant={isSelected ? 'solid' : 'soft'}
-                            color={isSelected ? 'primary' : 'neutral'}
-                            startDecorator={isSelected ? <Check sx={{ fontSize: 14 }} /> : null}
-                            onClick={() => handleDateRangePreset(def.id, preset.value)}
-                            sx={selectableChipSx}
-                          >
-                            {preset.label}
-                          </Chip>
-                        )
-                      })}
-                    </Box>
+              {def.type === 'date-range' &&
+                (() => {
+                  const val = activeFilters[def.id] || {}
+                  return (
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 1.5,
+                      }}
+                    >
+                      {/* Preset chips */}
+                      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                        {DATE_RANGE_PRESETS.map(preset => {
+                          const isSelected = val.preset === preset.value
+                          return (
+                            <Chip
+                              key={preset.value}
+                              variant={isSelected ? 'solid' : 'soft'}
+                              color={isSelected ? 'primary' : 'neutral'}
+                              startDecorator={
+                                isSelected ? (
+                                  <Check sx={{ fontSize: 14 }} />
+                                ) : null
+                              }
+                              onClick={() =>
+                                handleDateRangePreset(def.id, preset.value)
+                              }
+                              sx={selectableChipSx}
+                            >
+                              {preset.label}
+                            </Chip>
+                          )
+                        })}
+                      </Box>
 
-                    {/* Custom date inputs */}
-                    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-                      <Input
-                        type='date'
-                        size='sm'
-                        value={toInputDate(val.from)}
-                        onChange={e => handleDateRangeInput(def.id, 'from', e.target.value)}
-                        slotProps={{ input: { max: toInputDate(val.to) || undefined } }}
-                        sx={{ flex: 1, fontSize: '0.8rem' }}
-                      />
-                      <Typography level='body-xs' sx={{ color: 'text.tertiary', flexShrink: 0 }}>
-                        –
-                      </Typography>
-                      <Input
-                        type='date'
-                        size='sm'
-                        value={toInputDate(val.to)}
-                        onChange={e => handleDateRangeInput(def.id, 'to', e.target.value)}
-                        slotProps={{ input: { min: toInputDate(val.from) || undefined } }}
-                        sx={{ flex: 1, fontSize: '0.8rem' }}
-                      />
+                      {/* Custom date inputs */}
+                      <Box
+                        sx={{ display: 'flex', gap: 1, alignItems: 'center' }}
+                      >
+                        <Input
+                          type='date'
+                          size='sm'
+                          value={toInputDate(val.from)}
+                          onChange={e =>
+                            handleDateRangeInput(def.id, 'from', e.target.value)
+                          }
+                          slotProps={{
+                            input: { max: toInputDate(val.to) || undefined },
+                          }}
+                          sx={{ flex: 1, fontSize: '0.8rem' }}
+                        />
+                        <Typography
+                          level='body-xs'
+                          sx={{ color: 'text.tertiary', flexShrink: 0 }}
+                        >
+                          –
+                        </Typography>
+                        <Input
+                          type='date'
+                          size='sm'
+                          value={toInputDate(val.to)}
+                          onChange={e =>
+                            handleDateRangeInput(def.id, 'to', e.target.value)
+                          }
+                          slotProps={{
+                            input: { min: toInputDate(val.from) || undefined },
+                          }}
+                          sx={{ flex: 1, fontSize: '0.8rem' }}
+                        />
+                      </Box>
                     </Box>
-                  </Box>
-                )
-              })()}
+                  )
+                })()}
             </Box>
           ))}
         </Box>
-      </BottomSheetModal>
+      </AppModal>
     </>
   )
 }

src/components/common/ModalActions.jsx

@@ -0,0 +1,61 @@
+import { Box, Button } from '@mui/joy'
+
+const ActionButton = ({ action, defaults, sx }) => {
+  if (!action) return null
+
+  const { label, sx: actionSx, ...props } = action
+  return (
+    <Button {...defaults} {...props} sx={{ ...sx, ...actionSx }}>
+      {label}
+    </Button>
+  )
+}
+
+/**
+ * Consistent modal action row. Secondary actions are rendered first and the
+ * primary action is always the final, highest-emphasis control.
+ */
+const ModalActions = ({
+  primary,
+  secondary,
+  tertiary,
+  children,
+  stackOnMobile = false,
+  sx,
+}) => {
+  const responsiveButtonStyles = stackOnMobile
+    ? { '& > button': { width: { xs: '100%', sm: 'auto' } } }
+    : undefined
+
+  const layoutSx = {
+    display: 'flex',
+    flexDirection: stackOnMobile ? { xs: 'column-reverse', sm: 'row' } : 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: 1,
+    ...responsiveButtonStyles,
+    ...sx,
+  }
+
+  if (children) return <Box sx={layoutSx}>{children}</Box>
+
+  return (
+    <Box sx={layoutSx}>
+      <ActionButton
+        action={tertiary}
+        defaults={{ color: 'neutral', variant: 'plain' }}
+        sx={{ mr: { sm: 'auto' } }}
+      />
+      <ActionButton
+        action={secondary}
+        defaults={{ color: 'neutral', variant: 'outlined' }}
+      />
+      <ActionButton
+        action={primary}
+        defaults={{ color: 'primary', variant: 'solid' }}
+      />
+    </Box>
+  )
+}
+
+export default ModalActions

src/components/common/README.md

@@ -0,0 +1,52 @@
+# UI foundations
+
+## Modals
+
+Use `AppModal` for new work. Existing features may continue using
+`useResponsiveModal`; it now renders the same primitive.
+
+### Presentations
+
+- Desktop: centered, constrained dialog (`sm` 400, `md` 520, `lg` 680,
+  `xl` 840 pixels).
+- Mobile default: bottom sheet.
+- Long mobile workflows: `mobilePresentation='fullscreen'`.
+- Destructive confirmation: `size='sm'`, `role='alertdialog'`, and
+  `closeOnBackdrop={false}`.
+
+`AppModal` owns the header, close control, content scrolling, safe-area spacing,
+and footer. Do not add another close button or duplicate the title inside the
+content.
+
+```jsx
+<AppModal
+  open={open}
+  onClose={onClose}
+  title='Create item'
+  description='Add a recognizable name.'
+  footer={
+    <ModalActions
+      secondary={{ label: 'Cancel', onClick: onClose }}
+      primary={{ label: 'Create', onClick: onCreate, loading: isSaving }}
+    />
+  }
+>
+  {content}
+</AppModal>
+```
+
+## Buttons
+
+- Primary: `solid primary`; one primary action per surface.
+- Secondary: `outlined neutral`.
+- Tertiary: `plain neutral`.
+- Destructive confirmation: `solid danger`.
+- Destructive trigger: usually `outlined danger` or `plain danger`.
+- Modal order: secondary first, primary last.
+- Every icon-only button requires an `aria-label`.
+- Use the built-in `loading` state to prevent repeated submission.
+
+Button heights, radii, focus states, and reduced-motion behavior are defined in
+`src/contexts/ThemeContext.jsx`. Avoid local overrides for those properties.
+
+The live reference is available at `/test`.

src/components/common/filter/ActiveFilterChips.jsx

@@ -1,20 +1,22 @@
-import { Close } from '@mui/icons-material'
-import { Box, Button, Chip, Typography } from '@mui/joy'
+import { Add, Close } from '@mui/icons-material'
+import { Box, Button, Chip, ChipDelete, Typography } from '@mui/joy'
 
 const ActiveFilterChips = ({
-  chips = [],
-  onOpen,
-  onClearAll,
-  resultCount,
-  totalCount,
-  maxVisible = 2,
   chipSize = 'md',
+  chipSx,
+  chips = [],
   clearButtonSize = 'sm',
   clearButtonSx,
   containerSx,
-  chipSx,
+  maxVisible = 2,
+  onAdd,
+  onClearAll,
+  onOpen,
   overflowChipSx,
+  resultCount,
   resultSx,
+  showAddChip = false,
+  totalCount,
 }) => {
   if (!chips.length) {
     return null
@@ -37,20 +39,31 @@ const ActiveFilterChips = ({
         ...containerSx,
       }}
     >
-      {visible.map(({ key, label, onClear, color = 'primary' }) => (
+      {visible.map(({ color = 'primary', key, label, onClear }) => (
         <Chip
           key={key}
           size={chipSize}
           variant='soft'
           color={color}
           endDecorator={
-            <Close
-              sx={{ cursor: 'pointer', fontSize: chipSize === 'sm' ? 12 : 16 }}
-              onClick={e => {
-                e.stopPropagation()
+            // ChipDelete rather than a bare icon: Joy's chip end decorator is
+            // `pointer-events: none`, so anything else here is swallowed by the
+            // chip's own click surface and can never clear the condition.
+            <ChipDelete
+              variant='plain'
+              color={color}
+              onDelete={event => {
+                event.stopPropagation()
                 onClear?.()
               }}
-            />
+              aria-label={`Remove ${label} filter`}
+              sx={{
+                '--Chip-deleteSize': chipSize === 'sm' ? '1.1rem' : '1.4rem',
+                '--Icon-fontSize': chipSize === 'sm' ? '12px' : '16px',
+              }}
+            >
+              <Close />
+            </ChipDelete>
           }
           onClick={onOpen}
           sx={{
@@ -74,7 +87,10 @@ const ActiveFilterChips = ({
         </Chip>
       ))}
 
-      {overflow > 0 && (
+      {/* Everything already visible → spend that slot on a "+" for appending
+          another condition instead. With overflow, the count chip opens the
+          same sheet anyway. */}
+      {overflow > 0 ? (
         <Chip
           size={chipSize}
           variant='soft'
@@ -90,6 +106,30 @@ const ActiveFilterChips = ({
         >
           +{overflow} more
         </Chip>
+      ) : (
+        showAddChip &&
+        (onAdd || onOpen) && (
+          <Chip
+            size={chipSize}
+            variant='outlined'
+            color='neutral'
+            onClick={onAdd || onOpen}
+            aria-label='Add filter condition'
+            title='Add filter condition'
+            sx={{
+              cursor: 'pointer',
+              flexShrink: 0,
+              px: 0.75,
+              transition: 'all 0.15s ease',
+              '&:hover': { opacity: 0.85 },
+              ...overflowChipSx,
+            }}
+          >
+            <Add
+              sx={{ fontSize: chipSize === 'sm' ? 12 : 16, display: 'block' }}
+            />
+          </Chip>
+        )
       )}
 
       {resultCount != null && totalCount != null && (

src/constants/theme.js

@@ -1,6 +1,12 @@
 import resolveConfig from 'tailwindcss/resolveConfig'
-import tailwindConfig from '/tailwind.config.js'
+
+import tailwindConfig from '/tailwind.config.mjs'
 
 export const { theme: THEME } = resolveConfig(tailwindConfig)
 
 export const COLORS = THEME.colors
+
+export const THEME_BACKGROUND = {
+  dark: '#000000',
+  light: '#FFFFFF',
+}

src/constants/zIndex.js

@@ -22,6 +22,8 @@ export const Z_INDEX = {
   MODAL_BACKDROP: 2000,
   MODAL_CONTENT: 2001,
   MODAL_CLOSE_BUTTON: 2002,
+  // Popups that must float above open modals (portaled to document.body)
+  MODAL_POPOVER: 2100,
   TOAST: 3000,
 
   // Critical System UI (9000-9999)

src/contexts/LocalizationContext.jsx

@@ -28,7 +28,7 @@ export const AVAILABLE_LANGUAGES = [
   { code: 'nl', name: 'Dutch', nativeName: 'Nederlands' },
   { code: 'ja', name: 'Japanese', nativeName: '日本語' },
   { code: 'pt', name: 'Portuguese (Brazil)', nativeName: 'Português (Brasil)' },
-  { code: 'ja', name: 'Japanese', nativeName: '日本語' },
+  { code: 'zh-CN', name: 'Chinese (Simplified)', nativeName: '简体中文' },
 ]
 
 export const LocalizationProvider = ({ children }) => {

src/contexts/RouterContext.jsx

@@ -1,3 +1,5 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+
 import App from '@/App'
 import ChoreEdit from '@/views/ChoreEdit/ChoreEdit'
 import Error from '@/views/Error'
@@ -10,7 +12,8 @@ import Settings from '@/views/Settings/Settings'
 import SettingsOverview from '@/views/Settings/SettingsOverview'
 import SettingsRoutes from '@/views/Settings/SettingsRoutes'
 import ThemeSettings from '@/views/Settings/ThemeSettings'
-import { RouterProvider, createBrowserRouter } from 'react-router-dom'
+
+import GlobalSearchPage from '../search/GlobalSearchPage'
 import AuthenticationLoading from '../views/Authorization/Authenticating'
 import ForgotPasswordView from '../views/Authorization/ForgotPasswordView'
 import LoginSettings from '../views/Authorization/LoginSettings'
@@ -26,6 +29,11 @@ import FilterView from '../views/Filters/FilterView'
 import ChoreHistory from '../views/History/ChoreHistory'
 import LabelView from '../views/Labels/LabelView'
 import Landing from '../views/Landing/Landing'
+import CircleSetupView from '../views/Onboarding/CircleSetupView'
+import GetStartedView from '../views/Onboarding/GetStartedView'
+import HeardAboutView from '../views/Onboarding/HeardAboutView'
+import OnboardingView from '../views/Onboarding/OnboardingView'
+import WorkspaceReadyView from '../views/Onboarding/WorkspaceReadyView'
 import PaymentCancelledView from '../views/Payments/PaymentFailView'
 import PaymentSuccessView from '../views/Payments/PaymentSuccessView'
 import PrivacyPolicyView from '../views/PrivacyPolicy/PrivacyPolicyView'
@@ -44,16 +52,6 @@ import ThingsView from '../views/Things/ThingsView'
 import TimerDetails from '../views/Timer/TimerDetails'
 import UserActivities from '../views/User/UserActivities'
 import UserPoints from '../views/User/UserPoints'
-const getMainRoute = () => {
-  if (
-    // if domain is www.donetick.com or donetick.com  then show landing page:
-    window.location.hostname === 'www.donetick.com' ||
-    window.location.hostname === 'donetick.com'
-  ) {
-    return <Landing />
-  }
-  return <MyChores />
-}
 const Router = createBrowserRouter([
   {
     path: '/',
@@ -62,7 +60,7 @@ const Router = createBrowserRouter([
     children: [
       {
         path: '/',
-        element: getMainRoute(),
+        element: <MyChores />,
       },
       {
         path: '/settings',
@@ -134,6 +132,10 @@ const Router = createBrowserRouter([
         path: '/chores',
         element: <MyChores />,
       },
+      {
+        path: '/search',
+        element: <GlobalSearchPage />,
+      },
       {
         path: '/archived',
         element: <ArchivedTasks />,
@@ -182,6 +184,26 @@ const Router = createBrowserRouter([
         path: '/signup',
         element: <SignupView />,
       },
+      {
+        path: '/onboarding',
+        element: <OnboardingView />,
+      },
+      {
+        path: '/get-started',
+        element: <GetStartedView />,
+      },
+      {
+        path: '/ready',
+        element: <WorkspaceReadyView />,
+      },
+      {
+        path: '/circle-setup',
+        element: <CircleSetupView />,
+      },
+      {
+        path: '/heard-about',
+        element: <HeardAboutView />,
+      },
 
       {
         path: '/auth/:provider',

src/contexts/ThemeContext.jsx

@@ -1,28 +1,43 @@
-import { COLORS } from '@/constants/theme'
 import { CssBaseline } from '@mui/joy'
 import { CssVarsProvider, extendTheme } from '@mui/joy/styles'
 import PropType from 'prop-types'
 
-const primaryColor = 'cyan'
+import { COLORS, THEME_BACKGROUND } from '@/constants/theme'
 
+const primaryColor = 'cyan'
 const shades = [
   '50',
   ...Array.from({ length: 9 }, (_, i) => String((i + 1) * 100)),
 ]
 
-const getPallete = (key = primaryColor) => {
-  return shades.reduce((acc, shade) => {
-    acc[shade] = COLORS[key][shade]
-    return acc
+const getPalette = (key = primaryColor) =>
+  shades.reduce((palette, shade) => {
+    palette[shade] = COLORS[key][shade]
+    return palette
   }, {})
-}
 
-const primaryPalette = getPallete(primaryColor)
+const primaryPalette = getPalette(primaryColor)
+
+// Fallbacks only. A parent that owns the radius (ButtonGroup, Input/Select
+// decorator slots, CardActions) sets --Button-radius / --IconButton-radius and
+// takes precedence, which is what keeps connected groups looking connected.
+const CONTROL_RADIUS = '12px'
+const ICON_BUTTON_RADIUS = '10px'
 
 const theme = extendTheme({
+  radius: {
+    xs: '6px',
+    sm: '8px',
+    md: '10px',
+    lg: '12px',
+    xl: '16px',
+  },
   colorSchemes: {
     light: {
       palette: {
+        background: {
+          body: THEME_BACKGROUND.light,
+        },
         primary: primaryPalette,
         success: {
           50: '#f3faf7',
@@ -42,42 +57,103 @@ const theme = extendTheme({
           200: '#fbd5d5',
           300: '#f9c1c1',
           400: '#f6a8a8',
-          500: '',
-          600: '#f47272',
-          700: '#e33434',
-          800: '#cc1f1a',
-          900: '#b91c1c',
+          500: '#ef4444',
+          600: '#dc2626',
+          700: '#b91c1c',
+          800: '#991b1b',
+          900: '#7f1d1d',
+        },
+        warning: {
+          50: '#fffdf7',
+          100: '#fef8e1',
+          200: '#fdecb2',
+          300: '#fcd982',
+          400: '#fbcf52',
+          500: '#f9c222',
+          600: '#f6b81e',
+          700: '#f3ae1a',
+          800: '#f0a416',
+          900: '#e99b0e',
         },
       },
-      warning: {
-        50: '#fffdf7',
-        100: '#fef8e1',
-        200: '#fdecb2',
-        300: '#fcd982',
-        400: '#fbcf52',
-        500: '#f9c222',
-        600: '#f6b81e',
-        700: '#f3ae1a',
-        800: '#f0a416',
-        900: '#e99b0e',
+    },
+    dark: {
+      palette: {
+        background: {
+          body: THEME_BACKGROUND.dark,
+        },
+        primary: primaryPalette,
       },
     },
   },
-  dark: {
-    palette: {
-      primary: primaryPalette,
+  components: {
+    JoyButton: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          minHeight:
+            ownerState.size === 'lg'
+              ? '44px'
+              : ownerState.size === 'sm'
+                ? '36px'
+                : '40px',
+          // Read through the CSS variable so parents that own the radius
+          // (ButtonGroup, Input/Select decorators, Card actions) still win.
+          borderRadius: `var(--Button-radius, ${CONTROL_RADIUS})`,
+          fontWeight: 600,
+          transition:
+            'background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 100ms ease',
+          '&:active:not(:disabled)': {
+            transform: 'scale(0.98)',
+          },
+          '@media (prefers-reduced-motion: reduce)': {
+            transition: 'none',
+            '&:active:not(:disabled)': { transform: 'none' },
+          },
+        }),
+      },
+    },
+    JoyIconButton: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          borderRadius: `var(--IconButton-radius, ${ICON_BUTTON_RADIUS})`,
+          transition:
+            'background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease',
+          '&:active:not(:disabled)': {
+            transform: 'scale(0.96)',
+          },
+          // Touch target only for the default size. `sm`/`lg` are explicit
+          // choices by the call site and keep Joy's own sizing.
+          ...(ownerState.size === 'md' && {
+            minWidth: '40px',
+            minHeight: '40px',
+            '@media (max-width: 768px)': {
+              minWidth: '44px',
+              minHeight: '44px',
+            },
+          }),
+          '@media (prefers-reduced-motion: reduce)': {
+            transition: 'none',
+            '&:active:not(:disabled)': { transform: 'none' },
+          },
+        }),
+      },
+    },
+    JoyButtonGroup: {
+      styleOverrides: {
+        root: {
+          '--ButtonGroup-radius': CONTROL_RADIUS,
+        },
+      },
     },
   },
 })
 
-const ThemeContext = ({ children }) => {
-  return (
-    <CssVarsProvider theme={theme}>
-      <CssBaseline />
-      {children}
-    </CssVarsProvider>
-  )
-}
+const ThemeContext = ({ children }) => (
+  <CssVarsProvider theme={theme}>
+    <CssBaseline />
+    {children}
+  </CssVarsProvider>
+)
 
 ThemeContext.propTypes = {
   children: PropType.node,

src/hooks/useAuth.jsx

@@ -59,7 +59,13 @@ export const AuthProvider = ({ children }) => {
 
       if (!response.ok) {
         const res = await response.json()
-        return { success: false, error: res?.error || 'Login failed' }
+        // `status` is passed back so callers can tell a rejected password from
+        // an unreachable or broken server without parsing the message.
+        return {
+          success: false,
+          status: response.status,
+          error: res?.error || 'Login failed',
+        }
       }
 
       const data = await response.json()

src/hooks/useFileUpload.js

@@ -1,14 +1,15 @@
 import imageCompression from 'browser-image-compression'
 import { useCallback } from 'react'
+
 import { useUserProfile } from '../queries/UserQueries'
 import { useNotification } from '../service/NotificationProvider'
 import { apiClient } from '../utils/ApiClient'
 import { isPlusAccount, resolvePhotoURL } from '../utils/Helpers'
 
 export const useFileUpload = ({
-  entityType = 'chore_attachment',
-  entityId,
   draftId,
+  entityId,
+  entityType = 'chore_attachment',
 } = {}) => {
   const { showError } = useNotification()
   const { data: userProfile } = useUserProfile()
@@ -19,28 +20,36 @@ export const useFileUpload = ({
         showError({
           title: 'Plus Feature',
           message:
-            'Image uploads are not available in the Basic plan. Upgrade to Plus to add images to your content.',
+            'File uploads are not available in the Basic plan. Upgrade to Plus to add files to your content.',
         })
         return null
       }
 
       try {
-        const compressionOptions = {
-          maxSizeMB: entityType === 'profile' ? 0.5 : 1,
-          maxWidthOrHeight: entityType === 'profile' ? 320 : 1200,
-          useWebWorker: true,
-          fileType: 'image/jpeg',
+        // Only images go through compression — anything else (PDFs, docs)
+        // would be destroyed by re-encoding it as a JPEG.
+        let fileToUpload = file
+        if (file.type?.startsWith('image/')) {
+          const compressionOptions = {
+            maxSizeMB: entityType === 'profile' ? 0.5 : 1,
+            maxWidthOrHeight: entityType === 'profile' ? 320 : 1200,
+            useWebWorker: true,
+            fileType: 'image/jpeg',
+          }
+
+          const compressedFile = await imageCompression(
+            file,
+            compressionOptions,
+          )
+          fileToUpload = new File(
+            [compressedFile],
+            `${file.name.split('.')[0]}.jpg`,
+            { type: 'image/jpeg' },
+          )
         }
 
-        const compressedFile = await imageCompression(file, compressionOptions)
-        const compressedJpegFile = new File(
-          [compressedFile],
-          `${file.name.split('.')[0]}.jpg`,
-          { type: 'image/jpeg' },
-        )
-
         const formData = new FormData()
-        formData.append('file', compressedJpegFile)
+        formData.append('file', fileToUpload)
         formData.append('entityType', entityType)
         if (entityId) formData.append('entityId', String(entityId))
         if (draftId) formData.append('draftId', draftId)
@@ -62,7 +71,7 @@ export const useFileUpload = ({
         } else if (response.status === 403 && !isPlusAccount(userProfile)) {
           showError({
             title: 'Upgrade Required',
-            message: 'Image uploads are only available for Plus accounts.',
+            message: 'File uploads are only available for Plus accounts.',
           })
           return null
         } else if (response.status === 403) {
@@ -74,7 +83,7 @@ export const useFileUpload = ({
         } else if (!response.ok) {
           showError({
             title: 'Upload Failed',
-            message: 'Failed to upload image.',
+            message: 'Failed to upload file.',
           })
           return null
         }
@@ -91,7 +100,7 @@ export const useFileUpload = ({
       } catch {
         showError({
           title: 'Upload Failed',
-          message: 'An error occurred while processing the image.',
+          message: 'An error occurred while processing the file.',
         })
         return null
       }

src/hooks/useLongPress.js

@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+const DEFAULT_DELAY_MS = 450
+// Deliberately smaller than the swipe list's swipeStartThreshold (10px) so the
+// hold is abandoned before a swipe is even recognized.
+const MOVE_TOLERANCE_PX = 6
+
+const haptic = async () => {
+  try {
+    const { Haptics, ImpactStyle } = await import('@capacitor/haptics')
+    await Haptics.impact({ style: ImpactStyle.Medium })
+  } catch {
+    // no haptics on this platform
+  }
+}
+
+/**
+ * Press-and-hold gesture that works for both touch and mouse.
+ *
+ * Returns `handlers` to spread on the element and a `cancel` function so the
+ * owner can abandon a pending hold when another gesture wins (e.g. the swipe
+ * list reports a swipe start). A press that drifts more than
+ * MOVE_TOLERANCE_PX, scrolls, or gets cancelled by the browser never fires,
+ * and the click that follows a successful hold is swallowed so the element's
+ * normal click action doesn't also run.
+ */
+export const useLongPress = (
+  onLongPress,
+  { delay = DEFAULT_DELAY_MS, enabled = true } = {},
+) => {
+  const timerRef = useRef(null)
+  const originRef = useRef(null)
+  const firedRef = useRef(false)
+
+  const clear = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+    originRef.current = null
+  }, [])
+
+  // Watch movement on the window rather than only on the element: while the
+  // swipe list drags the row it translates under the finger, and the pointer
+  // can end up over a different element than the one we started on.
+  useEffect(() => {
+    const handleWindowMove = event => {
+      if (!timerRef.current || !originRef.current) return
+      const point = event.touches?.[0] ?? event
+      if (point.clientX === undefined) return
+      const dx = Math.abs(point.clientX - originRef.current.x)
+      const dy = Math.abs(point.clientY - originRef.current.y)
+      if (dx > MOVE_TOLERANCE_PX || dy > MOVE_TOLERANCE_PX) {
+        clear()
+      }
+    }
+
+    window.addEventListener('pointermove', handleWindowMove, {
+      capture: true,
+      passive: true,
+    })
+    window.addEventListener('touchmove', handleWindowMove, {
+      capture: true,
+      passive: true,
+    })
+    window.addEventListener('scroll', clear, { capture: true, passive: true })
+
+    return () => {
+      window.removeEventListener('pointermove', handleWindowMove, true)
+      window.removeEventListener('touchmove', handleWindowMove, true)
+      window.removeEventListener('scroll', clear, true)
+      clear()
+    }
+  }, [clear])
+
+  const start = useCallback(
+    event => {
+      if (!enabled || !onLongPress) return
+      // Ignore right/middle mouse buttons
+      if (event.pointerType === 'mouse' && event.button !== 0) return
+
+      clear()
+      firedRef.current = false
+      originRef.current = { x: event.clientX, y: event.clientY }
+      timerRef.current = setTimeout(() => {
+        firedRef.current = true
+        timerRef.current = null
+        haptic()
+        onLongPress(event)
+      }, delay)
+    },
+    [enabled, onLongPress, delay, clear],
+  )
+
+  const handlers = {
+    onPointerDown: start,
+    onPointerUp: clear,
+    onPointerCancel: clear,
+    onPointerLeave: clear,
+    onDragStart: clear,
+    // Swallow the click that the browser fires after the finger lifts
+    onClickCapture: event => {
+      if (firedRef.current) {
+        firedRef.current = false
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    },
+    onContextMenu: event => {
+      // A touch long-press otherwise pops the native context menu on top
+      if (firedRef.current) {
+        event.preventDefault()
+      }
+    },
+  }
+
+  return { handlers, cancel: clear }
+}
+
+export default useLongPress

src/hooks/useOnboardingGate.js

@@ -0,0 +1,51 @@
+import { useEffect } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { hasSeenOnboarding, isNativeApp } from '../utils/Onboarding'
+import { setPendingInvite } from '../utils/PendingInvite'
+
+// Routes a first-run user may legitimately be on without having gone through
+// onboarding: the flow itself, deep-link auth callbacks, and the legal pages
+// linked from it.
+const ALLOWED_PATHS = [
+  '/onboarding',
+  '/get-started',
+  '/login/settings',
+  '/privacy',
+  '/terms',
+  // An invite link is a legitimate first launch: the join view explains itself
+  // and routes to sign-in, so onboarding must not swallow the code.
+  '/circle/join',
+]
+
+const isAllowed = pathname =>
+  ALLOWED_PATHS.includes(pathname) || pathname.startsWith('/auth/')
+
+/**
+ * Sends first-launch native users to the onboarding flow. Runs on every
+ * navigation because an expired session hard-redirects to /login through
+ * `window.location`, which remounts the app.
+ */
+const useOnboardingGate = () => {
+  const navigate = useNavigate()
+  const { pathname, search } = useLocation()
+  const isRedirecting =
+    isNativeApp() &&
+    !hasSeenOnboarding() &&
+    !localStorage.getItem('token') &&
+    !isAllowed(pathname)
+
+  useEffect(() => {
+    if (!isRedirecting) return
+
+    if (pathname === '/circle/join') {
+      setPendingInvite(new URLSearchParams(search).get('code'))
+    }
+
+    navigate('/onboarding', { replace: true })
+  }, [isRedirecting, pathname, search, navigate])
+
+  return isRedirecting
+}
+
+export default useOnboardingGate

src/hooks/useResponsiveModal.js

@@ -1,18 +1,23 @@
-import BottomSheetModal from '../components/common/BottomSheetModal'
-import FadeModal from '../components/common/FadeModal'
-import useWindowWidth from './useWindowWidth'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { createElement } from 'react'
+import AppModal from '../components/common/AppModal'
+
+const MobileAppModal = props =>
+  createElement(AppModal, { ...props, isMobile: true })
+const DesktopAppModal = props =>
+  createElement(AppModal, { ...props, isMobile: false })
 
 /**
- * Hook that returns the appropriate modal component based on screen size
- * @param {number} breakpoint - Screen width breakpoint to switch between modals (default: 768px)
- * @returns {Object} - { Modal: Component, isMobile: boolean }
+ * Backwards-compatible access to the app modal system.
+ *
+ * New code may render AppModal directly when it already knows the desired
+ * presentation. Existing callers can continue using ResponsiveModal.
  */
 export const useResponsiveModal = (breakpoint = 768) => {
-  const windowWidth = useWindowWidth()
-  const isMobile = windowWidth <= breakpoint
+  const isMobile = useMediaQuery(`(max-width:${breakpoint}px)`)
 
   return {
-    ResponsiveModal: isMobile ? BottomSheetModal : FadeModal,
+    ResponsiveModal: isMobile ? MobileAppModal : DesktopAppModal,
     isMobile,
   }
 }

src/hooks/useStatusBar.js

@@ -1,5 +1,6 @@
 import { useColorScheme } from '@mui/joy'
 import { useEffect } from 'react'
+
 import statusBarManager from '../utils/StatusBarManager'
 
 /**
@@ -35,10 +36,7 @@ export const useStatusBar = () => {
 
       // Update the status bar with the resolved theme
       await statusBarManager.updateResolvedTheme(resolvedTheme)
-      
-      // Also update the base theme for future reference
-      await statusBarManager.setTheme(mode)
-      
+
       // Notify any custom listeners
       statusBarManager.notifyThemeChange(resolvedTheme)
     }

src/hooks/useSyncOnReconnect.js

@@ -2,9 +2,10 @@ import { App as capacitorApp } from '@capacitor/app'
 import { Capacitor } from '@capacitor/core'
 import { useQueryClient } from '@tanstack/react-query'
 import { useEffect, useRef } from 'react'
+
 import { commandQueue } from '../utils/CommandQueue'
-import { offlineDB } from '../utils/OfflineDB'
 import { isOAuthExchangeInProgress } from '../utils/OAuthExchangeState'
+import { offlineDB } from '../utils/OfflineDB'
 import { isOfflineFeatureEnabled } from '../utils/OfflineFeatureToggle'
 import { syncEngine } from '../utils/SyncEngine'
 import { networkManager } from './NetworkManager'
@@ -91,11 +92,18 @@ export function useSyncOnReconnect() {
 
     const runSync = async () => {
       if (!isOfflineFeatureEnabled()) return
+      // Public routes (onboarding, login, signup) have no session to sync.
+      // Calling /sync/changes here returns 401 and the global auth handler
+      // hard-navigates to /login, which reloads the WebView mid-onboarding.
+      if (!localStorage.getItem('token')) return
       // Skip while the OAuth code exchange is in flight — there's no session
       // yet, so a sync here just 401s. Note the app-resume listener fires in
       // the same tick as the deep link, before the route changes, so this has
       // to test the shared flag rather than the pathname.
       if (isOAuthExchangeInProgress()) return
+      // No session, nothing to sync — and a 401 here would force a logout that
+      // hard-navigates signed-out visitors (invite links) away to /login.
+      if (!localStorage.getItem('token')) return
       const wasOffline = !networkManager.isOnline
       const didSync = await syncEngine.sync()
       if (didSync) {

src/main.jsx

@@ -1,14 +1,23 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import Contexts from './contexts/Contexts.jsx'
 import './i18n/config'
 import './index.css'
 
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+const marketingHosts = new Set(['donetick.com', 'www.donetick.com'])
+const isMarketingSite =
+  marketingHosts.has(window.location.hostname) ||
+  (import.meta.env.DEV &&
+    new URLSearchParams(window.location.search).get('site') === 'marketing')
+
+export const Site = React.lazy(() =>
+  isMarketingSite ? import('./MarketingApp.jsx') : import('./Application.jsx'),
+)
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <Contexts>
-      <App />
-    </Contexts>
+    <React.Suspense fallback={null}>
+      <Site />
+    </React.Suspense>
   </React.StrictMode>,
 )

src/queries/ChoreQueries.jsx

@@ -67,6 +67,24 @@ const isNetworkError = error =>
   ((error instanceof TypeError && error.message === 'Failed to fetch') ||
     error?.name === 'AbortError')
 
+// The backend returns { error: "..." } on failures. Surface that message when
+// it is there, flagged so callers can tell it apart from our generic fallback.
+const errorFromResponse = async (resp, fallbackMessage) => {
+  if (!resp) return new Error(fallbackMessage)
+  let serverMessage = null
+  try {
+    const body = await resp.json()
+    if (typeof body?.error === 'string' && body.error.trim() !== '') {
+      serverMessage = body.error
+    }
+  } catch {
+    // body was empty or not JSON, keep the fallback
+  }
+  const error = new Error(serverMessage || fallbackMessage)
+  error.isServerMessage = Boolean(serverMessage)
+  return error
+}
+
 const buildOfflineChore = task => ({
   ...task,
   id: 'temp_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9),
@@ -81,7 +99,8 @@ export const useChores = (includeArchive = false) => {
     queryFn: async () => {
       if (isOfflineFeatureEnabled()) {
         try {
-          // Sync from server first (no-op if already syncing or offline)
+          // Sync from server first (coalesced with any run already in flight,
+          // so a just-created chore can't be missed by a stale cursor)
           if (networkManager.isOnline) {
             await syncEngine.sync()
           }
@@ -201,7 +220,7 @@ export const useCreateChore = () => {
       try {
         const resp = await CreateChore(newTask)
         if (!resp || !resp.ok) {
-          throw new Error('Failed to create chore')
+          throw await errorFromResponse(resp, 'Failed to create chore')
         }
         const createdChore = await resp.json()
         if (!createdChore) {
@@ -254,7 +273,7 @@ export const useUpdateChore = () => {
       try {
         const resp = await SaveChore(updatedChore)
         if (!resp || !resp.ok) {
-          throw new Error('Failed to save chore')
+          throw await errorFromResponse(resp, 'Failed to save chore')
         }
         const updatedChoreRes = await resp.json()
         if (!updatedChoreRes) {

src/queries/UserQueries.jsx

@@ -1,4 +1,5 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
+
 import {
   GetAllCircleMembers,
   GetAllUsers,
@@ -28,6 +29,7 @@ export const useAllUsers = () => {
 
 export const useCircleMembers = () => {
   const queryClient = useQueryClient()
+  const token = localStorage.getItem('token')
 
   const { data, error, isLoading } = useQuery({
     queryKey: ['allCircleMembers'],
@@ -45,6 +47,10 @@ export const useCircleMembers = () => {
         return { res: [] }
       }
     },
+    // NavBar's avatar mounts this on every route, including the signed-out
+    // ones. Without the gate the 401 tips ApiClient into a forced logout that
+    // hard-navigates to /login — which is what used to eat circle invites.
+    enabled: !!token,
   })
 
   const handleRefetch = () => {
@@ -54,7 +60,7 @@ export const useCircleMembers = () => {
   return { data, error, isLoading, handleRefetch }
 }
 
-export const useUserProfile = () => {
+export const useUserProfile = ({ enabled = true } = {}) => {
   const queryClient = useQueryClient()
   const token = localStorage.getItem('token')
 
@@ -80,7 +86,7 @@ export const useUserProfile = () => {
     },
     staleTime: 30 * 60 * 1000,
     gcTime: 30 * 60 * 1000,
-    enabled: !!token,
+    enabled: enabled && !!token,
   })
   return {
     data,

src/search/GlobalSearchContext.jsx

@@ -0,0 +1,192 @@
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { useQueryClient } from '@tanstack/react-query'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { offlineDB } from '../utils/OfflineDB'
+import { isParentUser } from '../utils/UserHelpers'
+import GlobalSearchPalette from './GlobalSearchPalette'
+import { getSearchProviders } from './searchProviders'
+
+const GlobalSearchContext = createContext(null)
+const BLOCKED_ROUTES = [
+  '/login',
+  '/signup',
+  '/welcome',
+  '/onboarding',
+  '/get-started',
+  '/ready',
+]
+
+const unwrap = value => (Array.isArray(value) ? value : value?.res || [])
+const uniqueBy = (items, getId) => [
+  ...new Map(
+    items.filter(Boolean).map(item => [String(getId(item)), item]),
+  ).values(),
+]
+
+export const GlobalSearchProvider = ({ children }) => {
+  const queryClient = useQueryClient()
+  const location = useLocation()
+  const navigate = useNavigate()
+  const isMobile = useMediaQuery('(max-width:768px)')
+  const [isOpen, setIsOpen] = useState(false)
+  const [initialQuery, setInitialQuery] = useState('')
+  const [documents, setDocuments] = useState([])
+  const [isLoading, setIsLoading] = useState(false)
+
+  const loadDocuments = useCallback(async () => {
+    setIsLoading(true)
+    try {
+      const cachedChores = queryClient
+        .getQueriesData({ queryKey: ['chores'] })
+        .flatMap(([, data]) => unwrap(data))
+      const cachedHistory = [
+        ...queryClient.getQueriesData({ queryKey: ['choresHistory'] }),
+        ...queryClient.getQueriesData({ queryKey: ['choreHistory'] }),
+      ].flatMap(([, data]) => unwrap(data))
+
+      const [
+        offlineChores,
+        offlineHistory,
+        offlineProjects,
+        offlineLabels,
+        offlineMembers,
+        offlineProfile,
+      ] = await Promise.all([
+        offlineDB.getChores(true).catch(() => []),
+        offlineDB.getHistoryByDays(365).catch(() => []),
+        offlineDB.getKV('projects').catch(() => []),
+        offlineDB.getKV('labels').catch(() => []),
+        offlineDB.getKV('circle_members').catch(() => []),
+        offlineDB.getKV('user_profile').catch(() => null),
+      ])
+
+      const projects = uniqueBy(
+        [
+          ...unwrap(queryClient.getQueryData(['projects'])),
+          ...unwrap(offlineProjects),
+        ],
+        item => item.id,
+      )
+      const labels = uniqueBy(
+        [
+          ...unwrap(queryClient.getQueryData(['labels'])),
+          ...unwrap(offlineLabels),
+        ],
+        item => item.id,
+      )
+      const members = uniqueBy(
+        [
+          ...unwrap(queryClient.getQueryData(['allCircleMembers'])),
+          ...unwrap(offlineMembers),
+        ],
+        item => item.userId,
+      )
+      const chores = uniqueBy(
+        [...cachedChores, ...unwrap(offlineChores)],
+        item => item.id,
+      )
+      const history = uniqueBy(
+        [...cachedHistory, ...unwrap(offlineHistory)],
+        item => item.id,
+      )
+      const profile =
+        queryClient
+          .getQueriesData({ queryKey: ['userProfile'] })
+          .find(([, data]) => data)?.[1] || offlineProfile
+
+      const sources = {
+        chores,
+        history,
+        projects,
+        labels,
+        members,
+        isParent: isParentUser(profile),
+        choresById: new Map(chores.map(item => [String(item.id), item])),
+        projectsById: new Map(projects.map(item => [String(item.id), item])),
+        membersById: new Map(members.map(item => [String(item.userId), item])),
+      }
+
+      const nextDocuments = getSearchProviders().flatMap(provider => {
+        try {
+          return provider.getDocuments(sources) || []
+        } catch (error) {
+          console.warn(`Search provider ${provider.id} failed`, error)
+          return []
+        }
+      })
+      setDocuments(nextDocuments)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [queryClient])
+
+  const openSearch = useCallback(
+    (query = '') => {
+      if (BLOCKED_ROUTES.some(route => location.pathname.startsWith(route)))
+        return
+      if (isMobile) {
+        loadDocuments()
+        navigate('/search', { state: { initialQuery: query } })
+        return
+      }
+      setInitialQuery(query)
+      setIsOpen(true)
+      loadDocuments()
+    },
+    [isMobile, loadDocuments, location.pathname, navigate],
+  )
+
+  const closeSearch = useCallback(() => setIsOpen(false), [])
+
+  useEffect(() => {
+    const onKeyDown = event => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'f') {
+        event.preventDefault()
+        isOpen ? closeSearch() : openSearch()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [closeSearch, isOpen, openSearch])
+
+  const value = useMemo(
+    () => ({
+      closeSearch,
+      documents,
+      isLoading,
+      loadDocuments,
+      openSearch,
+    }),
+    [closeSearch, documents, isLoading, loadDocuments, openSearch],
+  )
+
+  return (
+    <GlobalSearchContext.Provider value={value}>
+      {children}
+      {isOpen && (
+        <GlobalSearchPalette
+          documents={documents}
+          initialQuery={initialQuery}
+          isLoading={isLoading}
+          onClose={closeSearch}
+        />
+      )}
+    </GlobalSearchContext.Provider>
+  )
+}
+
+export const useGlobalSearch = () => {
+  const context = useContext(GlobalSearchContext)
+  if (!context)
+    throw new Error('useGlobalSearch must be used inside GlobalSearchProvider')
+  return context
+}

src/search/GlobalSearchPage.jsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { useGlobalSearch } from './GlobalSearchContext'
+import GlobalSearchPalette from './GlobalSearchPalette'
+
+const GlobalSearchPage = () => {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const { documents, isLoading, loadDocuments } = useGlobalSearch()
+
+  useEffect(() => {
+    loadDocuments()
+  }, [loadDocuments])
+
+  const handleClose = () => {
+    if (window.history.state?.idx > 0) navigate(-1)
+    else navigate('/chores', { replace: true })
+  }
+
+  return (
+    <GlobalSearchPalette
+      documents={documents}
+      initialQuery={location.state?.initialQuery || ''}
+      isLoading={isLoading}
+      onClose={handleClose}
+      presentation='page'
+    />
+  )
+}
+
+export default GlobalSearchPage

src/search/GlobalSearchPalette.jsx

@@ -0,0 +1,468 @@
+import {
+  AddRounded,
+  CheckCircleOutline,
+  FolderOutlined,
+  HistoryRounded,
+  InboxOutlined,
+  LabelOutlined,
+  PersonOutline,
+  SearchRounded,
+  SettingsOutlined,
+} from '@mui/icons-material'
+import {
+  Box,
+  Chip,
+  CircularProgress,
+  Divider,
+  Input,
+  List,
+  ListItemButton,
+  ListItemContent,
+  ListItemDecorator,
+  Typography,
+} from '@mui/joy'
+import Fuse from 'fuse.js'
+import PropTypes from 'prop-types'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import AppModal from '../components/common/AppModal'
+
+const RECENTS_KEY = 'donetick.globalSearch.recents'
+const GROUPS = [
+  'tasks',
+  'history',
+  'projects',
+  'labels',
+  'people',
+  'settings',
+  'actions',
+]
+const GROUP_LABELS = {
+  tasks: 'Tasks',
+  history: 'Notes',
+  projects: 'Projects',
+  labels: 'Labels',
+  people: 'People',
+  settings: 'Settings',
+  actions: 'Quick actions',
+}
+
+const ICONS = {
+  tasks: <CheckCircleOutline />,
+  history: <HistoryRounded />,
+  projects: <FolderOutlined />,
+  labels: <LabelOutlined />,
+  people: <PersonOutline />,
+  settings: <SettingsOutlined />,
+  actions: <AddRounded />,
+}
+
+const QUICK_ACTIONS = [
+  {
+    id: 'action:create',
+    provider: 'actions',
+    title: 'Create a task',
+    subtitle: 'Quick action',
+    route: '/chores/create',
+  },
+  {
+    id: 'action:tasks',
+    provider: 'actions',
+    title: 'View all tasks',
+    subtitle: 'Navigation',
+    route: '/chores',
+  },
+  {
+    id: 'action:archived',
+    provider: 'actions',
+    title: 'View archived tasks',
+    subtitle: 'Navigation',
+    route: '/archived',
+  },
+  {
+    id: 'action:settings',
+    provider: 'actions',
+    title: 'Open settings',
+    subtitle: 'Navigation',
+    route: '/settings',
+  },
+]
+
+const readRecents = () => {
+  try {
+    return JSON.parse(localStorage.getItem(RECENTS_KEY)) || []
+  } catch {
+    return []
+  }
+}
+
+const saveRecent = result => {
+  if (result.provider === 'actions') return
+  const recent = {
+    id: result.id,
+    provider: result.provider,
+    route: result.route,
+    title: result.title,
+    subtitle: result.subtitle,
+  }
+  localStorage.setItem(
+    RECENTS_KEY,
+    JSON.stringify(
+      [recent, ...readRecents().filter(item => item.id !== result.id)].slice(
+        0,
+        6,
+      ),
+    ),
+  )
+}
+
+const Highlight = ({ query, text }) => {
+  if (!text || !query.trim()) return text || null
+  const words = query.trim().split(/\s+/).filter(Boolean)
+  const escaped = words.map(word => word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+  if (!escaped.length) return text
+  const pattern = new RegExp(`(${escaped.join('|')})`, 'ig')
+  const isMatch = new RegExp(`^(${escaped.join('|')})$`, 'i')
+  return String(text)
+    .split(pattern)
+    .map((part, index) =>
+      isMatch.test(part) ? (
+        <Box
+          component='mark'
+          key={index}
+          sx={{ bgcolor: 'warning.softBg', color: 'inherit', borderRadius: 2 }}
+        >
+          {part}
+        </Box>
+      ) : (
+        part
+      ),
+    )
+}
+
+const SearchContainer = ({ children, onClose, presentation }) => {
+  if (presentation === 'page') {
+    return (
+      <Box
+        component='main'
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          height: 'calc(100dvh - 56px)',
+          minHeight: 0,
+          overflow: 'hidden',
+          bgcolor: 'background.body',
+        }}
+      >
+        {children}
+      </Box>
+    )
+  }
+
+  return (
+    <AppModal
+      open
+      onClose={onClose}
+      disableRestoreFocus
+      title='Search'
+      size='lg'
+      maxHeight='min(720px, calc(100dvh - 48px))'
+      contentSx={{
+        p: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+      }}
+      sx={{ height: 'min(720px, calc(100dvh - 48px))' }}
+    >
+      {children}
+    </AppModal>
+  )
+}
+
+const GlobalSearchPalette = ({
+  documents,
+  initialQuery,
+  isLoading,
+  onClose,
+  presentation = 'modal',
+}) => {
+  const navigate = useNavigate()
+  const focusInputRef = useCallback(node => {
+    if (node) requestAnimationFrame(() => node.focus())
+  }, [])
+  const [query, setQuery] = useState(initialQuery || '')
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [recents] = useState(readRecents)
+  const selectedResultRef = useRef(null)
+
+  const searchIndexes = useMemo(
+    () =>
+      new Map(
+        GROUPS.filter(group => group !== 'actions').map(group => [
+          group,
+          new Fuse(
+            documents.filter(item => item.provider === group),
+            {
+              threshold: 0.38,
+              distance: 120,
+              ignoreLocation: true,
+              includeScore: true,
+              keys:
+                group === 'history'
+                  ? [{ name: 'body', weight: 1 }]
+                  : [
+                      { name: 'title', weight: 0.5 },
+                      { name: 'keywords', weight: 0.25 },
+                      { name: 'body', weight: 0.17 },
+                      { name: 'subtitle', weight: 0.08 },
+                    ],
+            },
+          ),
+        ]),
+      ),
+    [documents],
+  )
+
+  const results = useMemo(() => {
+    const normalized = query.trim().toLocaleLowerCase()
+    if (!normalized) {
+      const currentById = new Map(documents.map(item => [item.id, item]))
+      const recentResults = recents
+        .map(item => currentById.get(item.id) || item)
+        .filter(item => item.provider !== 'history' || currentById.has(item.id))
+      return [...recentResults, ...QUICK_ACTIONS]
+    }
+
+    const grouped = GROUPS.filter(group => group !== 'actions').flatMap(group =>
+      (searchIndexes.get(group)?.search(normalized, { limit: 7 }) || [])
+        .map(match => {
+          const title = match.item.title?.toLocaleLowerCase() ?? ''
+          let score = match.score ?? 1
+
+          if (group !== 'history') {
+            if (title === normalized) {
+              score -= 1
+            } else if (title.startsWith(normalized)) {
+              score -= 0.15
+            } else if (title.includes(normalized)) {
+              score -= 0.08
+            }
+          }
+
+          return { ...match.item, score }
+        })
+        .sort((a, b) => a.score - b.score),
+    )
+    grouped.push({
+      id: 'action:filter-tasks',
+      provider: 'actions',
+      title: `Show tasks matching “${query.trim()}”`,
+      subtitle: 'Filter the task list',
+      route: `/chores?search=${encodeURIComponent(query.trim())}`,
+    })
+    return grouped
+  }, [documents, query, recents, searchIndexes])
+
+  useEffect(() => {
+    selectedResultRef.current?.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest',
+    })
+  }, [selectedIndex, results])
+
+  const selectResult = result => {
+    saveRecent(result)
+    navigate(result.route)
+    if (presentation === 'modal') onClose()
+  }
+
+  const onInputKeyDown = event => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      setSelectedIndex(index => Math.min(index + 1, results.length - 1))
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      setSelectedIndex(index => Math.max(index - 1, 0))
+    } else if (event.key === 'Enter' && results[selectedIndex]) {
+      event.preventDefault()
+      selectResult(results[selectedIndex])
+    } else if (event.key === 'Escape') {
+      event.preventDefault()
+      onClose()
+    }
+  }
+
+  return (
+    <SearchContainer onClose={onClose} presentation={presentation}>
+      <Box sx={{ p: { xs: 1.5, sm: 2 } }}>
+        <Input
+          autoFocus
+          slotProps={{
+            input: {
+              ref: focusInputRef,
+              'aria-label':
+                'Search tasks, history, projects, labels and settings',
+            },
+          }}
+          value={query}
+          onChange={event => {
+            setQuery(event.target.value)
+            setSelectedIndex(0)
+          }}
+          onKeyDown={onInputKeyDown}
+          placeholder='Search Donetick'
+          startDecorator={<SearchRounded />}
+          endDecorator={
+            isLoading ? (
+              <CircularProgress size='sm' />
+            ) : presentation === 'modal' ? (
+              <Chip size='sm' variant='outlined'>
+                Esc
+              </Chip>
+            ) : null
+          }
+          sx={{
+            '--Input-minHeight': '48px',
+            fontSize: 'md',
+            borderRadius: 'lg',
+          }}
+        />
+        <Typography
+          level='body-xs'
+          sx={{ color: 'text.tertiary', mt: 1, px: 0.5 }}
+        >
+          Searching content available on this device
+        </Typography>
+      </Box>
+      <Divider />
+
+      <Box
+        sx={{
+          overflowY: 'auto',
+          flex: 1,
+          pb: 'var(--safe-area-inset-bottom, 0px)',
+        }}
+      >
+        {!isLoading && query.trim() && results.length === 1 && (
+          <Box sx={{ px: 3, py: 6, textAlign: 'center' }}>
+            <InboxOutlined
+              sx={{ fontSize: 36, color: 'text.tertiary', mb: 1 }}
+            />
+            <Typography level='title-md'>No direct matches</Typography>
+            <Typography level='body-sm' sx={{ color: 'text.secondary' }}>
+              You can still filter the task list with this search.
+            </Typography>
+          </Box>
+        )}
+
+        <List aria-live='polite' sx={{ px: 1, py: 1 }}>
+          {results.map((result, index) => {
+            const hasQuery = Boolean(query.trim())
+            const showHeading = hasQuery
+              ? index === 0 || result.provider !== results[index - 1].provider
+              : index === 0 ||
+                (result.provider === 'actions' &&
+                  results[index - 1].provider !== 'actions')
+            return (
+              <Box key={result.id}>
+                {showHeading && (
+                  <Typography
+                    level='body-xs'
+                    sx={{
+                      color: 'text.tertiary',
+                      fontWeight: 'lg',
+                      px: 1.5,
+                      pt: index ? 2 : 0.5,
+                      pb: 0.5,
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.08em',
+                    }}
+                  >
+                    {!query.trim() && result.provider !== 'actions'
+                      ? 'Recent'
+                      : GROUP_LABELS[result.provider]}
+                  </Typography>
+                )}
+                <ListItemButton
+                  ref={index === selectedIndex ? selectedResultRef : null}
+                  selected={index === selectedIndex}
+                  onMouseMove={() => setSelectedIndex(index)}
+                  onClick={() => selectResult(result)}
+                  sx={{
+                    borderRadius: 'md',
+                    py: 1.1,
+                    alignItems: 'flex-start',
+                  }}
+                >
+                  <ListItemDecorator
+                    sx={{ mt: 0.25, color: result.color || 'text.secondary' }}
+                  >
+                    {ICONS[result.provider]}
+                  </ListItemDecorator>
+                  <ListItemContent>
+                    <Typography
+                      level='title-sm'
+                      sx={{ overflowWrap: 'anywhere' }}
+                    >
+                      <Highlight query={query} text={result.title} />
+                    </Typography>
+                    <Typography
+                      level='body-xs'
+                      sx={{ color: 'text.secondary' }}
+                      noWrap
+                    >
+                      {[result.subtitle, result.body]
+                        .filter(Boolean)
+                        .join(' · ')}
+                    </Typography>
+                  </ListItemContent>
+                </ListItemButton>
+              </Box>
+            )
+          })}
+        </List>
+      </Box>
+      <Divider />
+      <Box
+        sx={{
+          display: { xs: 'none', sm: 'flex' },
+          gap: 2,
+          px: 2,
+          py: 1,
+          color: 'text.tertiary',
+        }}
+      >
+        <Typography level='body-xs'>↑↓ Navigate</Typography>
+        <Typography level='body-xs'>↵ Open</Typography>
+        <Typography level='body-xs' sx={{ ml: 'auto' }}>
+          {query.trim()
+            ? `${Math.max(0, results.length - 1)} results`
+            : 'Type to search'}
+        </Typography>
+      </Box>
+    </SearchContainer>
+  )
+}
+
+SearchContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  onClose: PropTypes.func.isRequired,
+  presentation: PropTypes.oneOf(['modal', 'page']).isRequired,
+}
+
+Highlight.propTypes = {
+  query: PropTypes.string.isRequired,
+  text: PropTypes.string,
+}
+
+GlobalSearchPalette.propTypes = {
+  documents: PropTypes.arrayOf(PropTypes.object).isRequired,
+  initialQuery: PropTypes.string,
+  isLoading: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  presentation: PropTypes.oneOf(['modal', 'page']),
+}
+
+export default GlobalSearchPalette

src/search/searchProviders.js

@@ -0,0 +1,182 @@
+const stripHtml = value => {
+  if (!value) return ''
+  if (typeof globalThis.document === 'undefined')
+    return String(value).replace(/<[^>]*>/g, ' ')
+  const element = globalThis.document.createElement('div')
+  element.innerHTML = String(value)
+  return element.textContent || element.innerText || ''
+}
+
+const HISTORY_STATUS = {
+  0: 'in progress',
+  1: 'completed',
+  2: 'skipped',
+  3: 'pending approval',
+  4: 'rejected',
+  5: 'missed',
+  6: 'rescheduled',
+}
+
+const SETTINGS = [
+  ['profile', 'Profile', 'Name, avatar and personal details'],
+  ['circle', 'Circle', 'Members and household settings', true],
+  ['account', 'Account', 'Subscription and account management', true],
+  ['subaccounts', 'Subaccounts', 'Manage child accounts'],
+  ['notifications', 'Notifications', 'Reminders and notification preferences'],
+  ['mfa', 'Multi-factor authentication', 'Secure your account', true],
+  ['apitokens', 'API tokens', 'Manage integrations and access tokens', true],
+  ['storage', 'Storage', 'Files, backups and device storage'],
+  ['sidepanel', 'Side panel', 'Customize navigation'],
+  ['theme', 'Appearance', 'Theme, dark mode and colors'],
+  ['localization', 'Language and region', 'Language, dates and time formats'],
+  [
+    'advanced',
+    'Advanced settings',
+    'Offline support, webhooks and application behavior',
+  ],
+  ['developer', 'Developer settings', 'Diagnostics and experimental tools'],
+]
+
+const providers = []
+
+export const registerSearchProvider = provider => {
+  if (!provider?.id || typeof provider.getDocuments !== 'function') {
+    throw new Error('A search provider needs an id and getDocuments function')
+  }
+  const existing = providers.findIndex(item => item.id === provider.id)
+  if (existing >= 0) providers.splice(existing, 1, provider)
+  else providers.push(provider)
+  return () => {
+    const index = providers.indexOf(provider)
+    if (index >= 0) providers.splice(index, 1)
+  }
+}
+
+export const getSearchProviders = () => [...providers]
+
+const document = (provider, item) => ({ provider, ...item })
+
+registerSearchProvider({
+  id: 'tasks',
+  getDocuments: ({ chores, membersById, projectsById }) =>
+    chores.map(chore => {
+      const labels =
+        chore.labelsV2?.map(label => label.name).filter(Boolean) || []
+      const project = projectsById.get(String(chore.projectId))
+      const assignees = (chore.assignees || [])
+        .map(assignee => membersById.get(String(assignee.userId))?.displayName)
+        .filter(Boolean)
+      const description = stripHtml(chore.description)
+      return document('tasks', {
+        id: `task:${chore.id}`,
+        entityId: chore.id,
+        title: chore.name || 'Untitled task',
+        subtitle:
+          [project?.name, ...labels].filter(Boolean).join(' · ') || 'Task',
+        body: description,
+        keywords: [...labels, project?.name, ...assignees]
+          .filter(Boolean)
+          .join(' '),
+        route: `/chores/${chore.id}`,
+        updatedAt: chore.updatedAt || chore.createdAt,
+      })
+    }),
+})
+
+registerSearchProvider({
+  id: 'history',
+  getDocuments: ({ choresById, history, membersById }) =>
+    history.flatMap(entry => {
+      const note = stripHtml(entry.notes).trim()
+      if (!note) return []
+
+      const chore = choresById.get(String(entry.choreId))
+      const member = membersById.get(String(entry.completedBy))
+      return [
+        document('history', {
+          id: `history:${entry.id}`,
+          entityId: entry.id,
+          title: chore?.name || entry.choreName || 'Task note',
+          subtitle: [
+            member?.displayName,
+            entry.performedAt
+              ? new Date(entry.performedAt).toLocaleDateString()
+              : null,
+          ]
+            .filter(Boolean)
+            .join(' · '),
+          body: note,
+          keywords: `${HISTORY_STATUS[entry.status] || 'activity'} ${member?.displayName || ''}`,
+          route: entry.choreId
+            ? `/chores/${entry.choreId}/history`
+            : '/activities',
+          updatedAt: entry.performedAt || entry.updatedAt,
+        }),
+      ]
+    }),
+})
+
+registerSearchProvider({
+  id: 'projects',
+  getDocuments: ({ projects }) =>
+    projects.map(project =>
+      document('projects', {
+        id: `project:${project.id}`,
+        entityId: project.id,
+        title: project.name || 'Untitled project',
+        subtitle: 'Project',
+        body: stripHtml(project.description),
+        keywords: 'folder project',
+        route: `/chores?project=${encodeURIComponent(project.id)}`,
+        updatedAt: project.updatedAt,
+      }),
+    ),
+})
+
+registerSearchProvider({
+  id: 'labels',
+  getDocuments: ({ labels }) =>
+    labels.map(label =>
+      document('labels', {
+        id: `label:${label.id}`,
+        entityId: label.id,
+        title: label.name || 'Untitled label',
+        subtitle: 'Label',
+        keywords: 'tag label',
+        route: '/labels',
+        color: label.color,
+      }),
+    ),
+})
+
+registerSearchProvider({
+  id: 'people',
+  getDocuments: ({ members }) =>
+    members.map(member =>
+      document('people', {
+        id: `person:${member.userId}`,
+        entityId: member.userId,
+        title: member.displayName || member.username || 'Circle member',
+        subtitle: 'Circle member',
+        keywords: `${member.username || ''} person member assignee`,
+        route: '/chores',
+      }),
+    ),
+})
+
+registerSearchProvider({
+  id: 'settings',
+  getDocuments: ({ isParent }) =>
+    SETTINGS.filter(([, , , parentOnly]) => !parentOnly || isParent).map(
+      ([id, title, description]) =>
+        document('settings', {
+          id: `setting:${id}`,
+          entityId: id,
+          title,
+          subtitle: 'Settings',
+          body: description,
+          keywords: `preferences configuration ${id}`,
+          route: `/settings/${id}`,
+        }),
+    ),
+})

src/service/DiagnosticsSession.js

@@ -0,0 +1,189 @@
+/**
+ * Ambient session state worth having the moment something breaks: how long the
+ * user has been in the app, how they got to the screen that failed, which
+ * server they were talking to and what it had already refused.
+ *
+ * Deliberately dependency-free — ApiClient imports it on the request path, so
+ * anything imported here would risk a module cycle. Everything is in memory
+ * and dies with the tab; nothing is persisted.
+ */
+
+const SESSION_STARTED_AT = Date.now()
+const SESSION_ID = `${SESSION_STARTED_AT.toString(36)}-${Math.random()
+  .toString(36)
+  .slice(2, 8)}`
+
+// A cold start (vs. a reload of an already-running app) changes what a crash
+// means: a reload loop looks very different from a first-launch failure.
+const NAVIGATION_TYPE =
+  performance.getEntriesByType?.('navigation')?.[0]?.type ?? 'unknown'
+
+const MAX_ROUTES = 10
+const MAX_API_FAILURES = 8
+
+const routeTrail = []
+const apiFailures = []
+let backgroundedCount = 0
+let serverVersion = null
+
+// ---------------------------------------------------------------------------
+// Route trail
+// ---------------------------------------------------------------------------
+
+/**
+ * Records a navigation and closes out the dwell time on the previous screen.
+ * "The crash happened 400ms after landing on /chores/12 from /chores" is a
+ * far better bug report than "the crash happened on /chores/12".
+ */
+export const recordRoute = path => {
+  if (!path) return
+  const now = Date.now()
+  const previous = routeTrail[routeTrail.length - 1]
+  if (previous) {
+    if (previous.path === path) return
+    previous.dwellMs = now - previous.at
+  }
+  routeTrail.push({ path, at: now })
+  if (routeTrail.length > MAX_ROUTES) routeTrail.shift()
+}
+
+export const getRouteTrail = () => {
+  const now = Date.now()
+  return routeTrail.map((entry, index) => ({
+    path: entry.path,
+    // The current screen has no closing dwell yet; measure it up to now.
+    dwellMs:
+      entry.dwellMs ??
+      (index === routeTrail.length - 1 ? now - entry.at : null),
+    msAgo: now - entry.at,
+  }))
+}
+
+/** The screen the user came from, which is usually where the bug was planted. */
+export const getPreviousRoute = () =>
+  routeTrail.length > 1 ? routeTrail[routeTrail.length - 2].path : null
+
+// ---------------------------------------------------------------------------
+// Server identity
+// ---------------------------------------------------------------------------
+
+/**
+ * Picks the server build out of response headers. Costs nothing when the
+ * server doesn't send them — the field simply stays null.
+ */
+export const recordServerVersionFromResponse = response => {
+  if (serverVersion) return
+  try {
+    serverVersion =
+      response?.headers?.get?.('x-donetick-version') ||
+      response?.headers?.get?.('x-api-version') ||
+      null
+  } catch {
+    // headers may be inaccessible on opaque responses; not worth reporting
+  }
+}
+
+export const setServerVersion = version => {
+  if (version) serverVersion = version
+}
+
+export const getServerVersion = () => serverVersion
+
+// ---------------------------------------------------------------------------
+// API failures
+// ---------------------------------------------------------------------------
+
+/** Strips ids and query strings so failures group by endpoint, not by row. */
+const normalizeEndpoint = endpoint =>
+  String(endpoint || '')
+    .split('?')[0]
+    .replace(/\/\d+/g, '/:id')
+
+export const recordApiFailure = ({ endpoint, method, status }) => {
+  apiFailures.push({
+    at: Date.now(),
+    method: method || 'GET',
+    endpoint: normalizeEndpoint(endpoint),
+    status: status ?? 'network',
+  })
+  if (apiFailures.length > MAX_API_FAILURES) apiFailures.shift()
+}
+
+export const getApiFailures = () => {
+  const now = Date.now()
+  return apiFailures.map(failure => ({
+    method: failure.method,
+    endpoint: failure.endpoint,
+    status: failure.status,
+    msAgo: now - failure.at,
+  }))
+}
+
+// ---------------------------------------------------------------------------
+// Lifecycle
+// ---------------------------------------------------------------------------
+
+if (typeof document !== 'undefined') {
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'hidden') backgroundedCount += 1
+  })
+}
+
+// ---------------------------------------------------------------------------
+// Snapshot
+// ---------------------------------------------------------------------------
+
+const getServiceWorkerState = async () => {
+  if (!('serviceWorker' in navigator)) return { supported: false }
+  try {
+    const registration = await navigator.serviceWorker.getRegistration()
+    return {
+      supported: true,
+      controlled: Boolean(navigator.serviceWorker.controller),
+      // A waiting worker means the user is running a stale bundle against a
+      // newer deploy — the usual cause of chunk-load failures after a release.
+      updateWaiting: Boolean(registration?.waiting),
+    }
+  } catch {
+    return { supported: true, controlled: null, updateWaiting: null }
+  }
+}
+
+const getStorageState = async () => {
+  try {
+    const { quota, usage } = await navigator.storage.estimate()
+    return {
+      usageMb: Math.round((usage / 1048576) * 10) / 10,
+      quotaMb: Math.round(quota / 1048576),
+      // Storage pressure produces failures that look like anything but.
+      pressure: quota ? Math.round((usage / quota) * 100) : null,
+    }
+  } catch {
+    return null
+  }
+}
+
+export const getSessionDiagnostics = async () => {
+  const [serviceWorker, storage] = await Promise.all([
+    getServiceWorkerState(),
+    getStorageState(),
+  ])
+
+  return {
+    sessionId: SESSION_ID,
+    sessionStartedAt: new Date(SESSION_STARTED_AT).toISOString(),
+    sessionDurationMs: Date.now() - SESSION_STARTED_AT,
+    navigationType: NAVIGATION_TYPE,
+    backgroundedCount,
+    serverVersion,
+    previousRoute: getPreviousRoute(),
+    routeTrail: getRouteTrail(),
+    apiFailures: getApiFailures(),
+    // Chromium only; absent elsewhere rather than faked.
+    heapUsedMb: performance.memory
+      ? Math.round(performance.memory.usedJSHeapSize / 1048576)
+      : null,
+    storage,
+    serviceWorker,
+  }
+}

src/service/ErrorReportService.js

@@ -0,0 +1,305 @@
+import { getSessionDiagnostics } from './DiagnosticsSession'
+import { collectFeedbackContext } from './FeedbackService'
+
+const GITHUB_URL = 'https://github.com/donetick/donetick'
+
+// Reports go to the same relay as feedback unless a dedicated one is set, so
+// self-hosters who point at their own Worker get both for the price of one.
+const REPORT_URL =
+  import.meta.env.VITE_ERROR_REPORT_WEBHOOK_URL ||
+  import.meta.env.VITE_FEEDBACK_WEBHOOK_URL
+
+// Same trap as feedback: a chat webhook pasted straight in would reject our
+// schema and ship inside the public bundle. Relay through the Worker instead.
+const isRawChatWebhook = url =>
+  /^https:\/\/(discord(app)?\.com\/api\/webhooks|hooks\.slack\.com)/i.test(
+    url || '',
+  )
+
+export const SUBMIT_RESULT = {
+  SENT: 'sent',
+  FAILED: 'failed',
+  UNCONFIGURED: 'unconfigured',
+  MISCONFIGURED: 'misconfigured',
+  SELF_HOSTED: 'self-hosted',
+}
+
+const MAX_STACK = 4000
+
+const clamp = (value, max) =>
+  typeof value === 'string' && value.length > max
+    ? `${value.slice(0, max)}\n… truncated`
+    : value
+
+/** Short, human-readable handle the user can quote back to support. */
+export const newReportId = () =>
+  `DT-${Date.now().toString(36).toUpperCase().slice(-5)}-${Math.random()
+    .toString(36)
+    .toUpperCase()
+    .slice(2, 6)}`
+
+const safeMessage = error => {
+  const message = error?.message ?? error?.statusText
+  if (!message || message === '[object Object]') return null
+  return message
+}
+
+/** Everything about the failure itself, normalised across throw shapes. */
+const describeError = (error, errorInfo) => {
+  if (!error) return { name: 'Unknown', message: null }
+  return {
+    name: error.name ?? error.constructor?.name ?? typeof error,
+    message: safeMessage(error) ?? String(error).slice(0, 500),
+    // react-router route errors carry an HTTP shape instead of a stack.
+    status: error.status ?? error.response?.status ?? null,
+    statusText: error.statusText ?? null,
+    // Vite/react-router attach a digest to server-side thrown responses.
+    digest: error.digest ?? null,
+    stack: clamp(error.stack ?? null, MAX_STACK),
+    componentStack: clamp(errorInfo?.componentStack ?? null, MAX_STACK),
+  }
+}
+
+/** Everything about the environment the failure happened in. */
+const describeRuntime = () => {
+  const connection =
+    navigator.connection ||
+    navigator.mozConnection ||
+    navigator.webkitConnection
+
+  return {
+    url: window.location.href,
+    route: window.location.pathname + window.location.search,
+    referrer: document.referrer || null,
+    viewport: `${window.innerWidth}×${window.innerHeight}`,
+    screen: `${window.screen?.width}×${window.screen?.height}`,
+    devicePixelRatio: window.devicePixelRatio,
+    online: navigator.onLine,
+    connectionType: connection?.effectiveType ?? null,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    colorScheme: window.matchMedia?.('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light',
+    standalone: window.matchMedia?.('(display-mode: standalone)').matches,
+    userAgent: navigator.userAgent,
+  }
+}
+
+const cachedUser = () => {
+  try {
+    return JSON.parse(localStorage.getItem('user') || 'null')
+  } catch {
+    return null
+  }
+}
+
+/**
+ * The full diagnostic bundle. Deliberately assembled in one place so the copy
+ * button, the GitHub fallback and the webhook all describe the same crash.
+ *
+ * Reads the signed-in user from cache rather than the network: by the time
+ * this runs the app has already failed, and a fetch may be exactly what broke.
+ */
+export const collectErrorReport = async ({ error, errorInfo, reportId }) => {
+  const user = cachedUser()
+  const [context, session] = await Promise.all([
+    collectFeedbackContext({
+      feature: window.location.pathname,
+      userProfile: user,
+    }).catch(() => ({})),
+    getSessionDiagnostics().catch(() => ({})),
+  ])
+
+  return {
+    reportId: reportId ?? newReportId(),
+    occurredAt: new Date().toISOString(),
+    // No error means the user came here deliberately from settings rather than
+    // off the back of a crash — same diagnostics, different story to tell.
+    kind: error ? 'crash' : 'bug',
+    error: describeError(error, errorInfo),
+    runtime: describeRuntime(),
+    app: context,
+    session,
+  }
+}
+
+/** The plain-text rendering used by the copy button and the details panel. */
+const formatDuration = ms => {
+  if (ms == null) return 'unknown'
+  if (ms < 1000) return `${ms}ms`
+  if (ms < 60_000) return `${Math.round(ms / 1000)}s`
+  const minutes = Math.floor(ms / 60_000)
+  if (minutes < 60) return `${minutes}m ${Math.round((ms % 60_000) / 1000)}s`
+  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`
+}
+
+export const formatErrorReport = report => {
+  if (!report) return ''
+  const { app, error, runtime, session = {} } = report
+  const lines = [
+    `Report ID: ${report.reportId}`,
+    `Time: ${report.occurredAt}`,
+    '',
+    // A user-initiated report has no throw behind it; "Error: Unknown" would
+    // only be noise in the panel the user is being asked to read.
+    report.kind === 'bug'
+      ? 'Reported manually (no crash)'
+      : `Error: ${error.name}${error.message ? `: ${error.message}` : ''}`,
+    error.status
+      ? `HTTP: ${error.status} ${error.statusText ?? ''}`.trim()
+      : null,
+    '',
+    `URL: ${runtime.url}`,
+    session.previousRoute ? `Came from: ${session.previousRoute}` : null,
+    '',
+    `App: ${app.appVersion} · ${app.platform}${app.isNative ? ' (native)' : ''}`,
+    `Server: ${session.serverVersion ?? 'not reported'}`,
+    `Session: ${formatDuration(session.sessionDurationMs)} active · ${
+      session.navigationType ?? 'unknown'
+    } start · backgrounded ${session.backgroundedCount ?? 0}×`,
+    `Device: ${app.deviceModel} · ${app.osVersion}`,
+    `Viewport: ${runtime.viewport} @${runtime.devicePixelRatio}x · ${runtime.colorScheme}`,
+    `Locale: ${app.locale} · ${runtime.timezone}`,
+    `Network: ${runtime.online ? 'online' : 'offline'}${
+      runtime.connectionType ? ` (${runtime.connectionType})` : ''
+    }`,
+    `Hosting: ${app.hosting}`,
+    app.userId ? `User: ${app.userId}` : null,
+    session.storage
+      ? `Storage: ${session.storage.usageMb}MB / ${session.storage.quotaMb}MB (${session.storage.pressure}%)`
+      : null,
+    session.heapUsedMb ? `Heap: ${session.heapUsedMb}MB` : null,
+    session.serviceWorker?.supported
+      ? `Service worker: ${
+          session.serviceWorker.controlled ? 'controlling' : 'not controlling'
+        }${session.serviceWorker.updateWaiting ? ' · UPDATE WAITING' : ''}`
+      : null,
+  ].filter(Boolean)
+
+  if (session.routeTrail?.length) {
+    lines.push(
+      '',
+      'Route trail (oldest first):',
+      ...session.routeTrail.map(
+        entry =>
+          `- ${entry.path} · ${formatDuration(entry.dwellMs)} · ${formatDuration(
+            entry.msAgo,
+          )} ago`,
+      ),
+    )
+  }
+  if (session.apiFailures?.length) {
+    lines.push(
+      '',
+      'Recent API failures:',
+      ...session.apiFailures.map(
+        failure =>
+          `- ${failure.method} ${failure.endpoint} → ${
+            failure.status
+          } (${formatDuration(failure.msAgo)} ago)`,
+      ),
+    )
+  }
+  if (app.recentErrors?.length) {
+    lines.push('', 'Recent errors:', ...app.recentErrors.map(e => `- ${e}`))
+  }
+  if (error.componentStack) {
+    lines.push('', 'Component stack:', error.componentStack.trim())
+  }
+  if (error.stack) {
+    lines.push('', 'Stack:', error.stack)
+  }
+  return lines.join('\n')
+}
+
+/**
+ * Pre-filled GitHub issue for self-hosted instances — their crash data never
+ * leaves infrastructure they control, and they see it before it is published.
+ */
+export const buildErrorIssueUrl = ({ description, report }) => {
+  const isBug = report.kind === 'bug'
+  const title = isBug
+    ? `[bug] ${description?.trim().slice(0, 80) || 'Reported from the app'}`
+    : `[crash] ${
+        report.error.message?.slice(0, 80) ||
+        report.error.name ||
+        'Unexpected error'
+      }`
+  const body = [
+    '### What happened',
+    description?.trim() || '_no description provided_',
+    '',
+    '### Diagnostics',
+    '```',
+    formatErrorReport(report),
+    '```',
+  ].join('\n')
+
+  return `${GITHUB_URL}/issues/new?labels=bug&title=${encodeURIComponent(
+    title,
+  )}&body=${encodeURIComponent(body)}`
+}
+
+/**
+ * Posts the report to the relay. Never throws — a failed crash report must not
+ * produce a second crash, so every path resolves to a result the UI can show.
+ */
+export const submitErrorReport = async ({
+  contactEmail,
+  description,
+  report,
+}) => {
+  const payload = {
+    source: 'donetick-app',
+    kind: report.kind === 'bug' ? 'bug-report' : 'error-report',
+    reportId: report.reportId,
+    description: description?.trim() || null,
+    contactEmail: contactEmail?.trim() || null,
+    report,
+  }
+
+  // Enforced here, not only in the UI, so no future caller can relay a
+  // self-hosted instance's stack traces to the hosted endpoint.
+  if (report.app?.hosting !== 'cloud') {
+    return {
+      result: SUBMIT_RESULT.SELF_HOSTED,
+      githubUrl: buildErrorIssueUrl({ description, report }),
+    }
+  }
+
+  if (!REPORT_URL) {
+    console.info('ErrorReportService: no endpoint configured, report:', payload)
+    return {
+      result: SUBMIT_RESULT.UNCONFIGURED,
+      githubUrl: buildErrorIssueUrl({ description, report }),
+    }
+  }
+
+  if (isRawChatWebhook(REPORT_URL)) {
+    console.error(
+      'ErrorReportService: the report URL points directly at a Discord/Slack ' +
+        'webhook. Deploy the relay Worker and point the variable at it.',
+      payload,
+    )
+    return {
+      result: SUBMIT_RESULT.MISCONFIGURED,
+      githubUrl: buildErrorIssueUrl({ description, report }),
+    }
+  }
+
+  try {
+    const response = await fetch(REPORT_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+    if (response.ok) return { result: SUBMIT_RESULT.SENT }
+  } catch (submitError) {
+    console.warn('ErrorReportService: submission failed', submitError)
+  }
+
+  return {
+    result: SUBMIT_RESULT.FAILED,
+    githubUrl: buildErrorIssueUrl({ description, report }),
+  }
+}

src/service/FeedbackService.js

@@ -0,0 +1,475 @@
+import { InAppReview } from '@capacitor-community/in-app-review'
+import { Capacitor } from '@capacitor/core'
+import { Device } from '@capacitor/device'
+import { Preferences } from '@capacitor/preferences'
+import { isOfficialDonetickInstance } from '../utils/FeatureToggle'
+
+const STATE_KEY = 'feedbackState'
+
+// Eligibility thresholds for the automatic sentiment prompt.
+const MIN_COMPLETIONS = 10
+const MIN_DAYS_SINCE_SIGNUP = 7
+const COOLDOWN_DAYS = 120
+// A recent crash/API failure poisons the sentiment reading, so hold off.
+const ERROR_QUIET_PERIOD_MS = 10 * 60 * 1000
+
+const APP_STORE_URL =
+  'https://apps.apple.com/app/apple-store/id6742807441?pt=127258663&ct=website&mt=8'
+const PLAY_STORE_URL =
+  'https://play.google.com/store/apps/details?id=com.donetick.app'
+const GITHUB_URL = 'https://github.com/donetick/donetick'
+
+const DAY_MS = 24 * 60 * 60 * 1000
+
+const defaultState = {
+  completions: 0,
+  // null until the first prompt is shown/snoozed.
+  lastPromptedAt: null,
+  lastPromptedVersion: null,
+  dismissCount: 0,
+  reviewRequestedAt: null,
+  lastSentiment: null,
+  optedOut: false,
+  // Developer Settings escape hatch; never set in normal use.
+  devForced: false,
+}
+
+let cachedState = null
+
+const readState = async () => {
+  if (cachedState) return cachedState
+  try {
+    const { value } = await Preferences.get({ key: STATE_KEY })
+    cachedState = { ...defaultState, ...(value ? JSON.parse(value) : {}) }
+  } catch (error) {
+    console.warn('FeedbackService: unable to read state', error)
+    cachedState = { ...defaultState }
+  }
+  return cachedState
+}
+
+const writeState = async patch => {
+  const current = await readState()
+  cachedState = { ...current, ...patch }
+  try {
+    await Preferences.set({
+      key: STATE_KEY,
+      value: JSON.stringify(cachedState),
+    })
+  } catch (error) {
+    console.warn('FeedbackService: unable to persist state', error)
+  }
+  return cachedState
+}
+
+export const getFeedbackState = () => readState()
+
+/**
+ * Counts a completed task towards prompt eligibility. Called from the single
+ * network choke point for completions so offline completions are counted when
+ * they sync rather than twice.
+ */
+export const recordTaskCompleted = async () => {
+  const state = await readState()
+  // Stop writing once we are well past the threshold; nothing reads the exact
+  // number beyond reporting it as context.
+  if (state.completions > MIN_COMPLETIONS * 100) return
+  await writeState({ completions: state.completions + 1 })
+}
+
+// ---------------------------------------------------------------------------
+// Recent error breadcrumbs (in memory only, never persisted)
+// ---------------------------------------------------------------------------
+
+const recentErrors = []
+const MAX_ERRORS = 5
+
+export const recordFeedbackError = message => {
+  if (!message) return
+  recentErrors.push({ at: Date.now(), message: String(message).slice(0, 300) })
+  if (recentErrors.length > MAX_ERRORS) recentErrors.shift()
+}
+
+let errorListenersInstalled = false
+
+export const installFeedbackErrorListeners = () => {
+  if (errorListenersInstalled || typeof window === 'undefined') return
+  errorListenersInstalled = true
+  window.addEventListener('error', event => {
+    recordFeedbackError(event?.message)
+  })
+  window.addEventListener('unhandledrejection', event => {
+    recordFeedbackError(event?.reason?.message || event?.reason)
+  })
+}
+
+const hasRecentError = () =>
+  recentErrors.some(error => Date.now() - error.at < ERROR_QUIET_PERIOD_MS)
+
+// ---------------------------------------------------------------------------
+// Context collection
+// ---------------------------------------------------------------------------
+
+const getAppVersion = async () => {
+  if (Capacitor.isNativePlatform()) {
+    try {
+      const { App } = await import('@capacitor/app')
+      const info = await App.getInfo()
+      return `${info.version} (${info.build})`
+    } catch {
+      // fall through to the web bundle version
+    }
+  }
+  return import.meta.env.VITE_APP_VERSION || 'web'
+}
+
+const getDeviceContext = async () => {
+  try {
+    const info = await Device.getInfo()
+    return {
+      deviceModel: [info.manufacturer, info.model].filter(Boolean).join(' '),
+      osVersion: `${info.operatingSystem} ${info.osVersion}`,
+    }
+  } catch {
+    return { deviceModel: 'unknown', osVersion: 'unknown' }
+  }
+}
+
+/**
+ * Everything we attach to a submission without asking the user for it.
+ */
+export const collectFeedbackContext = async ({ feature, userProfile } = {}) => {
+  const [version, device, state, isCloud] = await Promise.all([
+    getAppVersion(),
+    getDeviceContext(),
+    readState(),
+    isOfficialDonetickInstance().catch(() => false),
+  ])
+
+  const signupDate = userProfile?.created_at
+  const daysSinceSignup = signupDate
+    ? Math.floor((Date.now() - new Date(signupDate).getTime()) / DAY_MS)
+    : null
+
+  return {
+    appVersion: version,
+    platform: Capacitor.getPlatform(),
+    isNative: Capacitor.isNativePlatform(),
+    deviceModel: device.deviceModel,
+    osVersion: device.osVersion,
+    locale:
+      localStorage.getItem('i18nextLng') || navigator.language || 'unknown',
+    hosting: isCloud ? 'cloud' : 'self-hosted',
+    feature: feature || 'unknown',
+    tasksCompleted: state.completions,
+    daysSinceSignup,
+    userId: userProfile?.id ?? null,
+    subscription: userProfile?.subscription ?? null,
+    recentErrors: recentErrors.map(error => error.message),
+    submittedAt: new Date().toISOString(),
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Eligibility
+// ---------------------------------------------------------------------------
+
+/**
+ * Runs every gate and reports which ones failed, so Developer Settings can
+ * explain why the prompt is or isn't showing rather than just saying "no".
+ */
+export const evaluatePromptEligibility = async ({ userProfile } = {}) => {
+  const state = await readState()
+  const version = await getAppVersion()
+
+  if (state.devForced) {
+    return { eligible: true, forced: true, blockers: [], state, version }
+  }
+
+  const blockers = []
+
+  if (state.optedOut) {
+    blockers.push('User opted out (chose a sentiment, or dismissed 3 times)')
+  }
+  if (state.completions < MIN_COMPLETIONS) {
+    blockers.push(
+      `Only ${state.completions} completions, needs ${MIN_COMPLETIONS}`,
+    )
+  }
+  if (hasRecentError()) {
+    blockers.push('An error occurred in the last 10 minutes')
+  }
+
+  const signupDate = userProfile?.createdAt
+  if (signupDate) {
+    const days = (Date.now() - new Date(signupDate).getTime()) / DAY_MS
+    if (days < MIN_DAYS_SINCE_SIGNUP) {
+      blockers.push(
+        `Account is ${Math.floor(days)} days old, needs ${MIN_DAYS_SINCE_SIGNUP}`,
+      )
+    }
+  }
+
+  if (state.lastPromptedAt) {
+    const daysSincePrompt = (Date.now() - state.lastPromptedAt) / DAY_MS
+    if (daysSincePrompt < COOLDOWN_DAYS) {
+      blockers.push(
+        `Cooldown: ${Math.ceil(COOLDOWN_DAYS - daysSincePrompt)} days remaining`,
+      )
+    }
+  }
+
+  // Never ask twice on the same build, even after the cooldown expires.
+  if (state.lastPromptedVersion && state.lastPromptedVersion === version) {
+    blockers.push(`Already prompted on this version (${version})`)
+  }
+
+  return {
+    eligible: blockers.length === 0,
+    forced: false,
+    blockers,
+    state,
+    version,
+  }
+}
+
+export const shouldShowSentimentPrompt = async options =>
+  (await evaluatePromptEligibility(options)).eligible
+
+/** Developer Settings: bypass every gate on the next eligibility check. */
+export const setDevForcedPrompt = forced => writeState({ devForced: !!forced })
+
+/** Developer Settings: back to a never-prompted, zero-completions user. */
+export const resetFeedbackState = async () => {
+  cachedState = { ...defaultState }
+  try {
+    await Preferences.remove({ key: STATE_KEY })
+  } catch (error) {
+    console.warn('FeedbackService: unable to clear state', error)
+  }
+  return cachedState
+}
+
+export const markPromptShown = async () => {
+  const version = await getAppVersion()
+  return writeState({
+    lastPromptedAt: Date.now(),
+    lastPromptedVersion: version,
+    // A forced prompt is spent once shown, otherwise it would fire on every
+    // visit to My Chores.
+    devForced: false,
+  })
+}
+
+export const markPromptDismissed = async () => {
+  const state = await readState()
+  const dismissCount = state.dismissCount + 1
+  // Three dismissals in a row is an answer: stop asking automatically.
+  return writeState({ dismissCount, optedOut: dismissCount >= 3 })
+}
+
+export const markSentiment = async sentiment =>
+  writeState({ lastSentiment: sentiment, dismissCount: 0 })
+
+export const optOutOfFeedbackPrompts = () => writeState({ optedOut: true })
+
+// ---------------------------------------------------------------------------
+// Store review + submission
+// ---------------------------------------------------------------------------
+
+export const getStoreUrl = () => {
+  const platform = Capacitor.getPlatform()
+  if (platform === 'ios') return APP_STORE_URL
+  if (platform === 'android') return PLAY_STORE_URL
+  return GITHUB_URL
+}
+
+export const storeLinks = {
+  appStore: APP_STORE_URL,
+  playStore: PLAY_STORE_URL,
+  github: GITHUB_URL,
+}
+
+/**
+ * Asks the OS to show its native review dialog. The OS decides whether to
+ * actually display it and gives no feedback either way, so this resolves true
+ * only to mean "the request went through".
+ */
+export const requestStoreReview = async () => {
+  if (!Capacitor.isNativePlatform()) return false
+  try {
+    await InAppReview.requestReview()
+    await writeState({ reviewRequestedAt: Date.now(), optedOut: true })
+    return true
+  } catch (error) {
+    console.warn('FeedbackService: review request failed', error)
+    return false
+  }
+}
+
+const WEBHOOK_URL = import.meta.env.VITE_FEEDBACK_WEBHOOK_URL
+
+/**
+ * A chat-provider webhook pasted straight into the env var. That can't work —
+ * the app posts its own schema, which Discord rejects with "Cannot send an
+ * empty message" (50006) — and it would publish the webhook to every user,
+ * since VITE_ vars are baked into the bundle. Relay through workers/feedback.
+ */
+const isRawChatWebhook = url =>
+  /^https:\/\/(discord(app)?\.com\/api\/webhooks|hooks\.slack\.com)/i.test(
+    url || '',
+  )
+
+export const isFeedbackSubmissionConfigured = () =>
+  Boolean(WEBHOOK_URL) && !isRawChatWebhook(WEBHOOK_URL)
+
+/** Developer Settings: flag the misconfiguration in the UI, not just the log. */
+export const isRawChatWebhookConfigured = () => isRawChatWebhook(WEBHOOK_URL)
+
+/**
+ * Whether this app is talking to the hosted donetick.com service. Self-hosted
+ * instances route feedback to GitHub instead of the webhook, so their data
+ * never leaves infrastructure they control.
+ */
+export const isCloudInstance = () =>
+  isOfficialDonetickInstance().catch(() => false)
+
+export const SUBMIT_RESULT = {
+  SENT: 'sent',
+  FAILED: 'failed',
+  UNCONFIGURED: 'unconfigured',
+  MISCONFIGURED: 'misconfigured',
+  SELF_HOSTED: 'self-hosted',
+}
+
+/**
+ * Builds a pre-filled GitHub issue for self-hosted users. Everything the
+ * webhook would have collected goes into the issue body, where the user can
+ * see and edit it before anything is published.
+ */
+export const buildGithubIssueUrl = ({
+  sentiment,
+  category,
+  message,
+  context,
+}) => {
+  const labelFor = {
+    bugs: 'bug',
+    missingFeature: 'feature request',
+    tooComplicated: 'usability',
+    slow: 'performance',
+    notifications: 'notifications',
+    ai: 'ai',
+    other: 'feedback',
+  }
+  const title = `[${labelFor[category] || 'feedback'}] ${
+    message?.split('\n')[0]?.slice(0, 80) || 'App feedback'
+  }`
+
+  const body = [
+    message?.trim() || '_no description_',
+    '',
+    '---',
+    '',
+    '<details><summary>Environment</summary>',
+    '',
+    `- App version: ${context.appVersion}`,
+    `- Platform: ${context.platform}${context.isNative ? ' (native)' : ''}`,
+    `- Device: ${context.deviceModel}`,
+    `- OS: ${context.osVersion}`,
+    `- Locale: ${context.locale}`,
+    `- Hosting: ${context.hosting}`,
+    `- Screen: ${context.feature}`,
+    `- Sentiment: ${sentiment}`,
+    ...(context.recentErrors.length
+      ? ['', 'Recent errors:', '```', ...context.recentErrors, '```']
+      : []),
+    '',
+    '</details>',
+  ].join('\n')
+
+  return `${GITHUB_URL}/issues/new?title=${encodeURIComponent(
+    title,
+  )}&body=${encodeURIComponent(body)}`
+}
+
+/**
+ * Posts the structured feedback plus the auto-collected context to the
+ * configured webhook. Never throws, so the UI can show a soft failure without
+ * losing what the user typed.
+ *
+ * Self-hosted instances are never relayed: the caller gets SELF_HOSTED plus a
+ * pre-filled GitHub issue URL to send the user to instead.
+ */
+export const submitFeedback = async ({
+  sentiment,
+  category,
+  message,
+  feature,
+  userProfile,
+}) => {
+  const context = await collectFeedbackContext({ feature, userProfile })
+  const payload = {
+    source: 'donetick-app',
+    sentiment,
+    category: category || null,
+    message: message?.trim() || null,
+    context,
+  }
+
+  // Enforced here rather than only in the UI so no future caller can leak a
+  // self-hosted user's feedback to the hosted relay.
+  if (context.hosting !== 'cloud') {
+    return {
+      result: SUBMIT_RESULT.SELF_HOSTED,
+      githubUrl: buildGithubIssueUrl({ sentiment, category, message, context }),
+    }
+  }
+
+  if (!WEBHOOK_URL) {
+    console.info('FeedbackService: no webhook configured, feedback:', payload)
+    return { result: SUBMIT_RESULT.UNCONFIGURED }
+  }
+
+  if (isRawChatWebhook(WEBHOOK_URL)) {
+    console.error(
+      'FeedbackService: VITE_FEEDBACK_WEBHOOK_URL points directly at a ' +
+        'Discord/Slack webhook. Discord will reject this with 50006 ' +
+        '("Cannot send an empty message") because the app posts its own ' +
+        'schema, and the URL would ship inside the public bundle. Deploy ' +
+        'workers/feedback and point the variable at the Worker instead.',
+      payload,
+    )
+    return { result: SUBMIT_RESULT.MISCONFIGURED }
+  }
+
+  try {
+    const response = await fetch(WEBHOOK_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+    return {
+      result: response.ok ? SUBMIT_RESULT.SENT : SUBMIT_RESULT.FAILED,
+    }
+  } catch (error) {
+    console.warn('FeedbackService: submission failed', error)
+    return { result: SUBMIT_RESULT.FAILED }
+  }
+}
+
+export const FEEDBACK_CATEGORIES = [
+  'bugs',
+  'missingFeature',
+  'tooComplicated',
+  'slow',
+  'notifications',
+  'ai',
+  'other',
+]
+
+export const SENTIMENTS = {
+  LOVE: 'love',
+  OKAY: 'okay',
+  ISSUES: 'issues',
+}

src/utils/ApiClient.js

@@ -1,6 +1,11 @@
 import { Preferences } from '@capacitor/preferences'
+
 import { API_URL } from '../Config'
 import { networkManager } from '../hooks/NetworkManager'
+import {
+  recordApiFailure,
+  recordServerVersionFromResponse,
+} from '../service/DiagnosticsSession'
 import { logout, RefreshToken } from './Fetcher'
 import { isOAuthExchangeInProgress } from './OAuthExchangeState'
 import { offlineDB } from './OfflineDB'
@@ -129,7 +134,7 @@ class ApiClient {
 
   // Process queued requests after refresh attempt
   processQueue(error, token = null) {
-    this.failedQueue.forEach(({ resolve, reject }) => {
+    this.failedQueue.forEach(({ reject, resolve }) => {
       if (error) {
         reject(error)
       } else {
@@ -150,6 +155,21 @@ class ApiClient {
       return
     }
 
+    // An expired session on an invite link would otherwise drop the code on the
+    // way to /login. Stash it first so sign-in returns to the join.
+    try {
+      const { pathname, search } = window.location
+      if (pathname === '/circle/join') {
+        const code = new URLSearchParams(search).get('code')
+        if (code) {
+          const { setPendingInvite } = await import('./PendingInvite')
+          setPendingInvite(code)
+        }
+      }
+    } catch (e) {
+      console.error('Error preserving pending invite on logout', e)
+    }
+
     await clearAllTokens()
     try {
       await offlineDB.clearAll()
@@ -199,6 +219,17 @@ class ApiClient {
       let response = await fetch(url, config)
       clearTimeout(timeoutId)
 
+      // Passive diagnostics: learn the server build from whatever it already
+      // answers, and keep the last few refusals for crash reports.
+      recordServerVersionFromResponse(response)
+      if (!response.ok) {
+        recordApiFailure({
+          endpoint,
+          method: config.method,
+          status: response.status,
+        })
+      }
+
       // 2. Check for 401 (Unauthorized)
       if (response.status === 401) {
         // Always queue this request first
@@ -280,6 +311,7 @@ class ApiClient {
         error?.name === 'AbortError' && options.signal?.aborted
       if (!externalAbort) {
         networkManager.setServerUnreachable()
+        recordApiFailure({ endpoint, method: config.method, status: 'network' })
       }
       console.error('Request failed', error)
       throw error

src/utils/Chores.jsx

@@ -89,6 +89,8 @@ const buildActualDateGroups = chores => {
 export const ChoresGrouper = (groupBy, chores, filter) => {
   if (filter) {
     chores = chores.filter(chore => filter(chore))
+  } else {
+    chores = [...chores]
   }
 
   // sort by priority then due date:

src/utils/Fetcher.jsx

@@ -166,6 +166,15 @@ const MarkChoreComplete = (id, body, completedDate, performer) => {
     method: 'POST',
     headers: HEADERS(),
     body: JSON.stringify(body),
+  }).then(response => {
+    if (response?.ok) {
+      // Single choke point for completions, so queued offline completions are
+      // counted once, when they sync.
+      import('../service/FeedbackService')
+        .then(({ recordTaskCompleted }) => recordTaskCompleted())
+        .catch(() => {})
+    }
+    return response
   })
 }
 

src/utils/FileConvert.js

@@ -0,0 +1,17 @@
+/**
+ * Turns an image source the scanners produce — a base64 data URI on iOS/web,
+ * a Capacitor localhost URL on Android — into a File the upload endpoint
+ * accepts. Both forms are fetchable, so one path covers them.
+ */
+export async function imageSourceToFile(source, fileName = 'scan.jpg') {
+  if (!source) return null
+  try {
+    const response = await fetch(source)
+    const blob = await response.blob()
+    const type = blob.type && blob.type !== '' ? blob.type : 'image/jpeg'
+    return new File([blob], fileName, { type })
+  } catch (e) {
+    console.error('[FileConvert] failed to convert image source:', e)
+    return null
+  }
+}

src/utils/Onboarding.js

@@ -0,0 +1,114 @@
+import { Capacitor } from '@capacitor/core'
+
+// First-run onboarding is a native-app-only flow. On the web the user already
+// chose to visit a URL, so we drop them straight on the auth screens.
+const STORAGE_KEY = 'onboardingCompletedAt'
+
+export const isNativeApp = () => {
+  try {
+    return Capacitor.isNativePlatform()
+  } catch {
+    return false
+  }
+}
+
+export const hasSeenOnboarding = () => {
+  try {
+    return Boolean(localStorage.getItem(STORAGE_KEY))
+  } catch {
+    // Private-mode / storage-disabled webviews: never trap the user in a loop.
+    return true
+  }
+}
+
+export const markOnboardingSeen = () => {
+  try {
+    localStorage.setItem(STORAGE_KEY, new Date().toISOString())
+  } catch {
+    // ignore, worst case the flow is shown once more
+  }
+}
+
+export const resetOnboarding = () => {
+  try {
+    localStorage.removeItem(STORAGE_KEY)
+  } catch {
+    // ignore
+  }
+}
+
+const ACQUISITION_SOURCE_KEY = 'acquisitionSource'
+
+/**
+ * Stashes the "where'd you hear about us" answer locally for now. No
+ * analytics pipeline is wired up yet — this is the single place that'll
+ * change once there is one, so the survey screen itself never has to.
+ */
+export const recordAcquisitionSource = source => {
+  try {
+    localStorage.setItem(ACQUISITION_SOURCE_KEY, source)
+  } catch {
+    // ignore, this is best-effort telemetry
+  }
+}
+
+const PRIVACY_PREFERENCES_KEY = 'privacyPreferences'
+
+/**
+ * Stashes the self-hosted privacy opt-ins locally, same stub-for-now
+ * treatment as recordAcquisitionSource: no crash reporter or PostHog is wired
+ * up yet, so this is just the one place that'll change once there is one.
+ */
+export const recordPrivacyPreferences = ({ crashReports, analytics }) => {
+  try {
+    localStorage.setItem(
+      PRIVACY_PREFERENCES_KEY,
+      JSON.stringify({ crashReports, analytics }),
+    )
+  } catch {
+    // ignore, this is best-effort telemetry
+  }
+}
+
+/**
+ * Asks the OS for notification permission during onboarding and records the
+ * answer under the same `notificationPreferences` key NotificationAccessSnackbar
+ * reads, so a user who says yes here is never asked again after signing in.
+ *
+ * Only the permission is requested: registering the push token needs a session,
+ * and there isn't one yet. The snackbar picks that up once the user is in.
+ */
+export const requestNotificationPermission = async () => {
+  if (!isNativeApp()) return false
+  try {
+    const { LocalNotifications } = await import(
+      '@capacitor/local-notifications'
+    )
+    const { Preferences } = await import('@capacitor/preferences')
+
+    const result = await LocalNotifications.requestPermissions()
+    const granted = result?.display === 'granted'
+
+    await Preferences.set({
+      key: 'notificationPreferences',
+      value: JSON.stringify({ optOut: false, granted }),
+    })
+    return granted
+  } catch {
+    // Permission plugins are missing or the prompt was dismissed: carry on,
+    // the in-app snackbar can still ask later.
+    return false
+  }
+}
+
+export const haptic = async (kind = 'light') => {
+  if (!isNativeApp()) return
+  try {
+    const { Haptics, ImpactStyle } = await import('@capacitor/haptics')
+    await Haptics.impact({
+      style: kind === 'medium' ? ImpactStyle.Medium : ImpactStyle.Light,
+    })
+  } catch {
+    // no haptics on this platform
+  }
+}

src/utils/PendingInvite.js

@@ -0,0 +1,46 @@
+import Cookies from 'js-cookie'
+
+// A circle invite link is often the very first thing a new user opens, so the
+// code has to survive the trip through login/signup (including OAuth, which
+// leaves and re-enters the app) and be replayed once a session exists.
+const INVITE_KEY = 'pending_circle_invite'
+const REDIRECT_COOKIE = 'ca_redirect'
+
+// `auto=1` tells the join view this visit is the return leg of an auth
+// round-trip, so it can submit the request instead of asking a second time.
+export const joinCirclePath = code =>
+  `/circle/join?code=${encodeURIComponent(code)}&auto=1`
+
+export const setPendingInvite = code => {
+  if (!code) return
+
+  try {
+    localStorage.setItem(INVITE_KEY, code)
+  } catch {
+    // The redirect cookie still preserves the invite through authentication.
+  }
+  // Every post-auth landing point (password login, OAuth callback, MFA) already
+  // consumes `ca_redirect`, so reusing it is all the routing this needs.
+  Cookies.set(REDIRECT_COOKIE, joinCirclePath(code), { expires: 1 })
+}
+
+export const getPendingInvite = () => {
+  try {
+    return localStorage.getItem(INVITE_KEY)
+  } catch {
+    return null
+  }
+}
+
+export const clearPendingInvite = () => {
+  try {
+    localStorage.removeItem(INVITE_KEY)
+  } catch {
+    // Ignore unavailable storage during cleanup.
+  }
+
+  const redirect = Cookies.get(REDIRECT_COOKIE)
+  if (redirect?.startsWith('/circle/join')) {
+    Cookies.remove(REDIRECT_COOKIE)
+  }
+}

src/utils/StatusBarManager.js

@@ -2,6 +2,8 @@ import { Capacitor } from '@capacitor/core'
 import { StatusBar, Style } from '@capacitor/status-bar'
 import { SafeArea } from 'capacitor-plugin-safe-area'
 
+import { THEME_BACKGROUND } from '@/constants/theme'
+
 /**
  * StatusBarManager - A utility class to handle status bar configuration
  * following Capacitor best practices and theme-aware styling
@@ -52,17 +54,18 @@ class StatusBarManager {
     this.currentTheme = theme
 
     try {
-      let style = Style.Light // Default to light content (dark status bar)
-
-      if (theme === 'dark') {
-        style = Style.Dark // Dark content (light status bar)
-      } else if (theme === 'system') {
-        // For system theme, we need to detect the actual system preference
-        // Joy UI's useColorScheme will handle this, but we default to light
-        style = Style.Light
-      }
+      const resolvedTheme =
+        theme === 'system'
+          ? window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light'
+          : theme
+      const style = resolvedTheme === 'dark' ? Style.Dark : Style.Light
 
       await StatusBar.setStyle({ style })
+      await StatusBar.setBackgroundColor({
+        color: THEME_BACKGROUND[resolvedTheme],
+      })
       console.log(`StatusBarManager: Theme set to ${theme}, style: ${style}`)
     } catch (error) {
       console.error('StatusBarManager: Failed to set theme:', error)
@@ -162,15 +165,7 @@ class StatusBarManager {
   async updateResolvedTheme(resolvedTheme) {
     if (!this.isNativePlatform) return
 
-    try {
-      const style = resolvedTheme === 'dark' ? Style.Dark : Style.Light
-      await StatusBar.setStyle({ style })
-      console.log(
-        `StatusBarManager: Resolved theme updated to ${resolvedTheme}`,
-      )
-    } catch (error) {
-      console.error('StatusBarManager: Failed to update resolved theme:', error)
-    }
+    await this.setTheme(resolvedTheme)
   }
 
   /**

src/utils/SyncEngine.js

@@ -28,6 +28,10 @@ class SyncEngine {
   constructor() {
     this.isSyncing = false
     this.listeners = []
+    // The run currently in flight, and the single follow-up run queued behind
+    // it. See sync() for why a follow-up is needed rather than just waiting.
+    this.inFlight = null
+    this.queued = null
   }
 
   // Register listener for sync state changes
@@ -42,10 +46,38 @@ class SyncEngine {
     this.listeners.forEach(cb => cb(state))
   }
 
-  // Main sync entry point — returns true if sync succeeded, false otherwise
+  // Main sync entry point — returns true if sync succeeded, false otherwise.
+  //
+  // Concurrent callers are coalesced rather than dropped. Returning early while
+  // another run is in flight used to lose writes: that run's /sync/changes
+  // request may have been issued *before* the caller's change reached the
+  // server, so its cursor skips past the change and the caller reads a cache
+  // that will never contain it until something else triggers a sync. That is
+  // why a task created from the modal could vanish on the refetch right after
+  // it was created. Waiting for the in-flight run is not enough for the same
+  // reason, so callers that arrive mid-run share one follow-up run instead.
   async sync() {
     if (!isOfflineFeatureEnabled()) return false
-    if (this.isSyncing) return false
+
+    if (this.inFlight) {
+      if (!this.queued) {
+        this.queued = this.inFlight
+          .catch(() => false)
+          .then(() => {
+            this.queued = null
+            return this.sync()
+          })
+      }
+      return this.queued
+    }
+
+    this.inFlight = this._runSync().finally(() => {
+      this.inFlight = null
+    })
+    return this.inFlight
+  }
+
+  async _runSync() {
     this.isSyncing = true
     this._notify({ syncing: true, error: null })