Merge pull request #234 from donetick/eslint3

ran npm run lint:fix
2026-08-16 15:33:13 -04:00
parent e377fb5b06 292597e7c6
commit 2a4f085e18
176 changed files with 1101 additions and 767 deletions
--- a/e2e/debug.mjs
+++ b/e2e/debug.mjs
@@ -6,7 +6,9 @@ const browser = await chromium.launch()
 const context = await browser.newContext({ storageState: state })
 const page = await context.newPage()
 page.on('console', msg => console.log('[console]', msg.type(), msg.text()))
-page.on('pageerror', err => console.log('[pageerror]', err.message, '\n', err.stack))
+page.on('pageerror', err =>
+  console.log('[pageerror]', err.message, '\n', err.stack),
+)

 await page.goto('http://localhost:5173/chores/create')
 await page.getByTestId('chore-name-input').fill('Debug Chore ' + Date.now())
--- a/e2e/fixtures/auth.js
+++ b/e2e/fixtures/auth.js
@@ -1,4 +1,4 @@
-import { test as base, expect } from '@playwright/test'
+import { expect, test as base } from '@playwright/test'
 import path from 'path'
 import { fileURLToPath } from 'url'

@@ -9,7 +9,10 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
 * After successful signup the app auto-logs in and walks through the
 * onboarding flow (/circle-setup, then /ready) before landing on /chores.
 */
-export async function signUpViaUI(page, { username, email, password, displayName }) {
+export async function signUpViaUI(
+  page,
+  { displayName, email, password, username },
+) {
  await page.goto('/signup')
  await page.locator('#username').fill(username)
  await page.locator('#email').fill(email)
@@ -30,7 +33,7 @@ export async function signUpViaUI(page, { username, email, password, displayName
 * Fill and submit the login form through the UI.
 * After successful login the app redirects to /chores.
 */
-export async function loginViaUI(page, { username, password }) {
+export async function loginViaUI(page, { password, username }) {
  await page.goto('/login')
  await page.locator('#username').fill(username)
  await page.locator('#password').fill(password)
--- a/e2e/global-setup.js
+++ b/e2e/global-setup.js
@@ -1,4 +1,4 @@
-import { writeFile, mkdir } from 'fs/promises'
+import { mkdir, writeFile } from 'fs/promises'
 import path from 'path'
 import { fileURLToPath } from 'url'

@@ -56,7 +56,7 @@ export default async function globalSetup() {
    throw new Error(`Login failed (${loginRes.status}): ${body}`)
  }

-  const { token, expire } = await loginRes.json()
+  const { expire, token } = await loginRes.json()

  // Write a Playwright storage-state file containing the token in localStorage
  const stateDir = path.join(__dirname, '.auth')
@@ -84,7 +84,11 @@ export default async function globalSetup() {
 async function waitForServer(url, retries = 20, delayMs = 1000) {
  for (let i = 0; i < retries; i++) {
    try {
-      const res = await fetch(`${url}/api/v1/auth/login`, { method: 'POST', body: '{}', headers: { 'Content-Type': 'application/json' } })
+      const res = await fetch(`${url}/api/v1/auth/login`, {
+        method: 'POST',
+        body: '{}',
+        headers: { 'Content-Type': 'application/json' },
+      })
      if (res.status < 500) return
    } catch {
      // server not up yet
--- a/e2e/tests/auth.spec.js
+++ b/e2e/tests/auth.spec.js
@@ -1,12 +1,14 @@
-import { test, expect } from '@playwright/test'
-import { signUpViaUI, loginViaUI } from '../fixtures/auth.js'
+import { expect, test } from '@playwright/test'
+
+import { loginViaUI, signUpViaUI } from '../fixtures/auth.js'

 // Username must match /^[a-z.-]+$/ — no digits allowed.
 // Generate a random lowercase-only suffix for uniqueness across runs.
 function randomSuffix(len = 8) {
  const chars = 'abcdefghijklmnopqrstuvwxyz'
-  return Array.from({ length: len }, () =>
-    chars[Math.floor(Math.random() * 26)],
+  return Array.from(
+    { length: len },
+    () => chars[Math.floor(Math.random() * 26)],
  ).join('')
 }

@@ -41,7 +43,9 @@ test.describe('Auth – Sign Up', () => {

 test.describe('Auth – Login', () => {
  // Re-use the shared E2E user that global-setup already created
-  test('logs in with valid credentials and lands on /chores', async ({ page }) => {
+  test('logs in with valid credentials and lands on /chores', async ({
+    page,
+  }) => {
    await loginViaUI(page, {
      username: 'e2e.user',
      password: 'E2ePassword123!',
--- a/src/components/NotificationTemplate.jsx
+++ b/src/components/NotificationTemplate.jsx
@@ -14,6 +14,7 @@ import Select from '@mui/joy/Select'
 import Typography from '@mui/joy/Typography'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+
 import { NOTIFICATION_TYPE, TASK_COLOR } from '../utils/Colors'
 import { TIME_UNITS } from '../utils/DurationUtils'

@@ -26,7 +27,7 @@ const timingOptions = [
 ]

 function getRelativeLabel(notification, t) {
-  const { value, unit } = notification
+  const { unit, value } = notification
  const numericValue = Number(value)
  if (numericValue === 0) {
    return t('notifTemplate.onDueDate')
@@ -71,8 +72,8 @@ const NotificationTemplate = ({
  // Consumers that own an empty state themselves pass 0.
  minNotifications = 1,
  onChange,
-  value,
  showTimeline = true,
+  value,
 }) => {
  const { t } = useTranslation('chores')
  const [notifications, setNotifications] = useState(
--- a/src/components/SSEConnectionStatus.jsx
+++ b/src/components/SSEConnectionStatus.jsx
@@ -1,13 +1,14 @@
 import { Circle, SignalWifi4Bar, SignalWifiOff } from '@mui/icons-material'
 import { Box, Chip, Tooltip, Typography } from '@mui/joy'
+
 import { useSSEContext } from '../hooks/useSSEContext'

 const SSEConnectionStatus = ({
-  variant = 'minimal',
  showError = false,
  sx = {},
+  variant = 'minimal',
 }) => {
-  const { isConnected, isConnecting, error, getConnectionStatus } =
+  const { error, getConnectionStatus, isConnected, isConnecting } =
    useSSEContext()

  const getStatusColor = () => {
--- a/src/components/SSESettings.jsx
+++ b/src/components/SSESettings.jsx
@@ -9,22 +9,23 @@ import {
  Switch,
  Typography,
 } from '@mui/joy'
+import { useTranslation } from 'react-i18next'
+
 import { useSSEContext } from '../hooks/useSSEContext'
 import { useUserProfile } from '../queries/UserQueries'
 import { isPlusAccount } from '../utils/Helpers'
 import SSEConnectionStatus from './SSEConnectionStatus'
-import { useTranslation } from 'react-i18next'

 const SSESettings = () => {
  const { t } = useTranslation('settings')
  const { data: userProfile } = useUserProfile()
  const {
-    isConnected,
-    isConnecting,
    error,
    getConnectionStatus,
-    toggleSSEEnabled,
+    isConnected,
+    isConnecting,
    isSSEEnabled,
+    toggleSSEEnabled,
  } = useSSEContext()

  const handleToggle = () => {
--- a/src/components/SubscriptionModal.jsx
+++ b/src/components/SubscriptionModal.jsx
@@ -1,13 +1,14 @@
 import { Check, Star } from '@mui/icons-material'
 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'
 import { useTranslation } from 'react-i18next'

-const SubscriptionModal = ({ open, onClose }) => {
+import { useNotification } from '../service/NotificationProvider'
+import { GetSubscriptionSession } from '../utils/Fetcher'
+import AppModal from './common/AppModal'
+import ModalActions from './common/ModalActions'
+
+const SubscriptionModal = ({ onClose, open }) => {
  const { t } = useTranslation('settings')
  const [selectedPlan, setSelectedPlan] = useState('yearly')
  const [isLoading, setIsLoading] = useState(false)
@@ -81,7 +82,11 @@ const SubscriptionModal = ({ open, onClose }) => {
      footer={
        <ModalActions
          stackOnMobile
-          secondary={{ label: t('accountSettings.cancel'), onClick: onClose, disabled: isLoading }}
+          secondary={{
+            label: t('accountSettings.cancel'),
+            onClick: onClose,
+            disabled: isLoading,
+          }}
          primary={{
            label: t('subscription.subscribe'),
            onClick: handleSubscribe,
--- a/src/components/UserProfileAvatar.jsx
+++ b/src/components/UserProfileAvatar.jsx
@@ -27,7 +27,9 @@ import {
 import { useMediaQuery } from '@mui/material'
 import moment from 'moment'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
+
 import { useImpersonateUser } from '../contexts/ImpersonateUserContext'
 import useStickyState from '../hooks/useStickyState'
 import { useCircleMembers, useUserProfile } from '../queries/UserQueries'
@@ -35,7 +37,6 @@ import { apiClient } from '../utils/ApiClient'
 import { isPlusAccount, resolvePhotoURL } from '../utils/Helpers'
 import UserModal from '../views/Modals/Inputs/UserModal'
 import SubscriptionModal from './SubscriptionModal'
-import { useTranslation } from 'react-i18next'

 const UserProfileAvatar = () => {
  const { t } = useTranslation('common')
@@ -43,11 +44,11 @@ const UserProfileAvatar = () => {
  const { mode, setMode } = useColorScheme()
  const { data: userProfile } = useUserProfile()
  const {
+    canImpersonate,
+    getEffectiveUser,
    isImpersonating,
    startImpersonation,
    stopImpersonation,
-    canImpersonate,
-    getEffectiveUser,
  } = useImpersonateUser()
  const { data: circleMembersData } = useCircleMembers()
  const [isModalOpen, setIsModalOpen] = useState(false)
@@ -129,7 +130,9 @@ const UserProfileAvatar = () => {
                  }}
                />
                <Avatar
-                  src={resolvePhotoURL(userProfile?.image || userProfile?.avatar)}
+                  src={resolvePhotoURL(
+                    userProfile?.image || userProfile?.avatar,
+                  )}
                  alt={userProfile?.displayName || userProfile?.name}
                  size='sm'
                  sx={{
--- a/src/components/animations/AnimatedList.jsx
+++ b/src/components/animations/AnimatedList.jsx
@@ -1,40 +1,43 @@
-import React from 'react'
-import { Box } from '@mui/joy'
-import { CSSTransition, TransitionGroup } from 'react-transition-group'
-import { useStaggeredAnimation, useReducedMotion } from '../../hooks/useAnimations'
 import './PageTransition.css'

-const AnimatedList = ({ 
-  children, 
-  staggerDelay = 50,
-  animationType = 'stagger', // 'stagger', 'fade', 'slide'
-  direction = 'up', // 'up', 'down', 'left', 'right'
-  renderItem,
+import { Box } from '@mui/joy'
+import React from 'react'
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+
+import {
+  useReducedMotion,
+  useStaggeredAnimation,
+} from '../../hooks/useAnimations'
+
+const AnimatedList = ({
+  animationType = 'stagger',
+  children,
+  direction = 'up', // 'stagger', 'fade', 'slide'
+  items, // 'up', 'down', 'left', 'right'
  keyExtractor,
-  items,
-  ...boxProps 
+  renderItem,
+  staggerDelay = 50,
+  ...boxProps
 }) => {
  // Handle both children and items patterns
  let childrenArray
  if (items && renderItem) {
-    childrenArray = items.map((item, index) => 
-      React.cloneElement(renderItem(item, index), { 
-        key: keyExtractor ? keyExtractor(item, index) : index 
-      })
+    childrenArray = items.map((item, index) =>
+      React.cloneElement(renderItem(item, index), {
+        key: keyExtractor ? keyExtractor(item, index) : index,
+      }),
    )
  } else {
    childrenArray = React.Children.toArray(children)
  }
-  
+
  const visibleItems = useStaggeredAnimation(childrenArray.length, staggerDelay)
  const prefersReducedMotion = useReducedMotion()

  // If user prefers reduced motion, render without animations
  if (prefersReducedMotion) {
    return (
-      <Box {...boxProps}>
-        {items && renderItem ? childrenArray : children}
-      </Box>
+      <Box {...boxProps}>{items && renderItem ? childrenArray : children}</Box>
    )
  }

@@ -55,7 +58,7 @@ const AnimatedList = ({
      <TransitionGroup component={null}>
        {childrenArray.map((child, index) => {
          const isVisible = visibleItems.has(index)
-          
+
          return (
            <CSSTransition
              key={child.key || index}
--- a/src/components/animations/LoadingScreen.jsx
+++ b/src/components/animations/LoadingScreen.jsx
@@ -65,11 +65,7 @@ const LogoContainer = styled(Box)({

 import { useTranslation } from 'react-i18next'

-const LoadingScreen = ({
-  message = null,
-  showLogo = true,
-  size = 'lg',
-}) => {
+const LoadingScreen = ({ message = null, showLogo = true, size = 'lg' }) => {
  const { t } = useTranslation('common')
  return (
    <LoadingContainer>
@@ -90,7 +86,7 @@ const LoadingScreen = ({
            </Typography>
          </LogoContainer>
        )}
-        
+
        <CircularProgress
          size={size}
          sx={{
@@ -98,7 +94,7 @@ const LoadingScreen = ({
            mb: 2,
          }}
        />
-        
+
        <PulsingText level='body-md'>{message ?? t('loading')}</PulsingText>
      </LoadingContent>
    </LoadingContainer>
--- a/src/components/animations/PageTransition.jsx
+++ b/src/components/animations/PageTransition.jsx
@@ -1,7 +1,8 @@
+import './PageTransition.css'
+
 import { useLayoutEffect, useRef, useState } from 'react'
 import { flushSync } from 'react-dom'
 import { useLocation } from 'react-router-dom'
-import './PageTransition.css'

 // Route hierarchy for determining navigation direction
 const routeHierarchy = {
--- a/src/components/animations/SkeletonLoader.jsx
+++ b/src/components/animations/SkeletonLoader.jsx
@@ -1,11 +1,11 @@
 import { Box, Skeleton } from '@mui/joy'

 const SkeletonLoader = ({
-  type = 'card',
  count = 1,
  height = 100,
-  width = '100%',
+  type = 'card',
  variant = 'rectangular',
+  width = '100%',
  ...props
 }) => {
  const renderSkeleton = () => {
--- a/src/components/animations/SmoothCard.jsx
+++ b/src/components/animations/SmoothCard.jsx
@@ -1,23 +1,23 @@
-import React from 'react'
 import { Card } from '@mui/joy'
 import { styled } from '@mui/joy/styles'
+import React from 'react'

 const AnimatedCard = styled(Card)(({ theme }) => ({
  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
  transform: 'translateZ(0)', // Enable GPU acceleration
  cursor: 'pointer',
  position: 'relative',
-  
+
  '&:hover': {
    transform: 'translateY(-4px) translateZ(0)',
    boxShadow: theme.shadow.lg,
  },
-  
+
  '&:active': {
    transform: 'translateY(-2px) translateZ(0)',
    transition: 'all 0.1s cubic-bezier(0.4, 0, 0.2, 1)',
  },
-  
+
  // Subtle background animation on hover
  '&::before': {
    content: '""',
@@ -26,49 +26,50 @@ const AnimatedCard = styled(Card)(({ theme }) => ({
    left: 0,
    right: 0,
    bottom: 0,
-    background: 'linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent)',
+    background:
+      'linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent)',
    opacity: 0,
    transition: 'opacity 0.3s ease',
    pointerEvents: 'none',
    borderRadius: 'inherit',
  },
-  
+
  '&:hover::before': {
    opacity: 1,
  },
-  
+
  // Focus states for accessibility
  '&:focus-visible': {
    outline: '2px solid',
    outlineColor: theme.palette.primary[500],
    outlineOffset: '2px',
  },
-  
+
  // Reduced motion support
  '@media (prefers-reduced-motion: reduce)': {
    transition: 'none',
    transform: 'none !important',
-    
+
    '&:hover': {
      transform: 'none',
      boxShadow: theme.shadow.md, // Still provide visual feedback
    },
-    
+
    '&:active': {
      transform: 'none',
    },
-    
+
    '&::before': {
      display: 'none',
    },
  },
 }))

-const SmoothCard = ({ 
-  children, 
-  onClick,
+const SmoothCard = ({
  animationDisabled = false,
-  ...props 
+  children,
+  onClick,
+  ...props
 }) => {
  if (animationDisabled) {
    return (
--- a/src/components/animations/StaggeredList.jsx
+++ b/src/components/animations/StaggeredList.jsx
@@ -1,13 +1,14 @@
+import './PageTransition.css'
+
 import { Box } from '@mui/joy'
 import React, { useEffect, useState } from 'react'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
-import './PageTransition.css'

 const StaggeredList = ({
-  children,
-  staggerDelay = 50,
-  initialDelay = 0,
  animate = true,
+  children,
+  initialDelay = 0,
+  staggerDelay = 50,
 }) => {
  const [isVisible, setIsVisible] = useState(!animate)

--- a/src/components/common/AppModal.jsx
+++ b/src/components/common/AppModal.jsx
@@ -17,27 +17,27 @@ const WIDTH_BY_SIZE = {
 const AppModal = forwardRef(
  (
    {
-      open,
-      onClose,
+      backdropBlur = true,
      children,
-      title,
+      closeOnBackdrop = true,
+      closeOnEscape = true,
+      contentSx,
      description,
      footer,
-      size = 'md',
+      footerSx,
      fullWidth = true,
      isMobile: isMobileProp,
      keepMounted = false,
+      maxHeight = '90dvh',
      mobilePresentation = 'sheet',
+      onClose,
+      open,
      role = 'dialog',
      showCloseButton = true,
      showHandle = false,
-      closeOnBackdrop = true,
-      closeOnEscape = true,
-      backdropBlur = true,
-      maxHeight = '90dvh',
-      contentSx,
-      footerSx,
+      size = 'md',
      sx,
+      title,
      unmountDelay = 180,
      ...modalProps
    },
--- a/src/components/common/DurationInput.jsx
+++ b/src/components/common/DurationInput.jsx
@@ -1,6 +1,7 @@
 import { Add, Remove } from '@mui/icons-material'
 import { Box, IconButton, Input, Option, Select } from '@mui/joy'
 import { useEffect, useState } from 'react'
+
 import {
  secondsToValueAndUnit,
  TIME_UNITS,
@@ -16,7 +17,7 @@ import {
 *   size     – Joy UI size ('sm' | 'md')
 *   minValue – minimum numeric value (default 1)
 */
-const DurationInput = ({ value, onChange, size = 'md', minValue = 1 }) => {
+const DurationInput = ({ minValue = 1, onChange, size = 'md', value }) => {
  const derived =
    value != null && value >= 0
      ? secondsToValueAndUnit(value)
@@ -26,7 +27,7 @@ const DurationInput = ({ value, onChange, size = 'md', minValue = 1 }) => {

  useEffect(() => {
    if (value != null && value >= 0) {
-      const { value: v, unit: u } = secondsToValueAndUnit(value)
+      const { unit: u, value: v } = secondsToValueAndUnit(value)
      setDisplayValue(v)
      setUnit(u)
    }
--- a/src/components/common/EmptyState.jsx
+++ b/src/components/common/EmptyState.jsx
@@ -55,7 +55,7 @@ const SIZES = {
 }

 const ActionButton = ({ action, ...buttonProps }) => {
-  const { label, to, onClick, ...rest } = action
+  const { label, onClick, to, ...rest } = action
  return (
    <Button
      {...buttonProps}
@@ -73,15 +73,15 @@ ActionButton.propTypes = {
 }

 const EmptyState = ({
-  variant = 'empty',
-  icon,
-  title,
  description,
+  fullHeight = false,
+  icon,
  primaryAction,
  secondaryAction,
  size = 'md',
-  fullHeight = false,
  sx,
+  title,
+  variant = 'empty',
  ...rest
 }) => {
  const tone = TONES[variant] || TONES.empty
--- a/src/components/common/FilterBar.jsx
+++ b/src/components/common/FilterBar.jsx
@@ -10,9 +10,10 @@ import {
  Typography,
 } from '@mui/joy'
 import { useState } from 'react'
+
 import AppModal from './AppModal'
-import ModalActions from './ModalActions'
 import ActiveFilterChips from './filter/ActiveFilterChips'
+import ModalActions from './ModalActions'

 /**
 * Reusable filter bar component.
@@ -141,17 +142,17 @@ const fmtDisplayDate = iso => {
 // ── Component ────────────────────────────────────────────────────────────────

 const FilterBar = ({
-  filterDefs,
  activeFilters,
-  onSetFilter,
+  filterDefs,
  onClearAll,
-  resultCount,
-  totalCount,
+  onOpenChange,
+  onSetFilter,
+  open,
  // When the host renders its own trigger (e.g. an icon button in a toolbar
  // row), it drives the sheet through `open`/`onOpenChange` and hides ours.
-  open,
-  onOpenChange,
+  resultCount,
  showTrigger = true,
+  totalCount,
 }) => {
  const [internalOpen, setInternalOpen] = useState(false)
  const isControlled = open !== undefined
--- a/src/components/common/KeyboardShortcutHint.jsx
+++ b/src/components/common/KeyboardShortcutHint.jsx
@@ -9,10 +9,10 @@ import PropTypes from 'prop-types'
 function KeyboardShortcutHint({
  shortcut,
  show = true,
-  withCmd = true,
-  withCtrl, // Legacy prop for backward compatibility
-  withShift = false,
  sx = {},
+  withCmd = true, // Legacy prop for backward compatibility
+  withCtrl,
+  withShift = false,
  ...props
 }) {
  if (!show) return null
--- a/src/components/common/ModalActions.jsx
+++ b/src/components/common/ModalActions.jsx
@@ -16,12 +16,12 @@ const ActionButton = ({ action, defaults, sx }) => {
 * primary action is always the final, highest-emphasis control.
 */
 const ModalActions = ({
+  children,
  primary,
  secondary,
-  tertiary,
-  children,
  stackOnMobile = false,
  sx,
+  tertiary,
 }) => {
  const responsiveButtonStyles = stackOnMobile
    ? { '& > button': { width: { xs: '100%', sm: 'auto' } } }
--- a/src/components/common/filter/ActiveFilterChips.jsx
+++ b/src/components/common/filter/ActiveFilterChips.jsx
@@ -1,6 +1,5 @@
 import { Add, Close } from '@mui/icons-material'
 import { Box, Button, Chip, ChipDelete, Typography } from '@mui/joy'
-
 import { useTranslation } from 'react-i18next'

 const ActiveFilterChips = ({
--- a/src/contexts/QueryContext.jsx
+++ b/src/contexts/QueryContext.jsx
@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
+
 import { initWidgetSync } from '../service/WidgetService'

 const QueryContext = ({ children }) => {
--- a/src/contexts/SSEContext.jsx
+++ b/src/contexts/SSEContext.jsx
@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react'
+
 import { useSSE } from '../hooks/useSSE'

 export const SSEContext = createContext({
--- a/src/hooks/NetworkManager.jsx
+++ b/src/hooks/NetworkManager.jsx
@@ -1,4 +1,5 @@
 import { Network } from '@capacitor/network'
+
 import { isOfflineFeatureEnabled } from '../utils/OfflineFeatureToggle'

 class NetworkManager {
--- a/src/hooks/useAcknowledgmentModal.js
+++ b/src/hooks/useAcknowledgmentModal.js
@@ -36,4 +36,4 @@ const useAcknowledgmentModal = () => {
  }
 }

-export default useAcknowledgmentModal
+export default useAcknowledgmentModal
--- a/src/hooks/useAnimations.js
+++ b/src/hooks/useAnimations.js
@@ -8,7 +8,7 @@ export const useReducedMotion = () => {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
    setPrefersReducedMotion(mediaQuery.matches)

-    const handleChange = (event) => {
+    const handleChange = event => {
      setPrefersReducedMotion(event.matches)
    }

@@ -32,13 +32,13 @@ export const useStaggeredAnimation = (itemCount, delay = 50) => {
    }

    const timeouts = []
-    
+
    // Stagger the appearance of items
    for (let i = 0; i < itemCount; i++) {
      const timeout = setTimeout(() => {
        setVisibleItems(prev => new Set([...prev, i]))
      }, i * delay)
-      
+
      timeouts.push(timeout)
    }

@@ -62,7 +62,7 @@ export const useInViewAnimation = (threshold = 0.1) => {
      ([entry]) => {
        setIsInView(entry.isIntersecting)
      },
-      { threshold }
+      { threshold },
    )

    observer.observe(element)
--- a/src/hooks/useAuth.jsx
+++ b/src/hooks/useAuth.jsx
@@ -1,5 +1,6 @@
 import { createContext, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+
 import { apiClient } from '../utils/ApiClient'
 import { offlineDB } from '../utils/OfflineDB'
 import { clearAllTokens, saveTokens } from '../utils/TokenStorage'
--- a/src/hooks/useConfirmationModal.js
+++ b/src/hooks/useConfirmationModal.js
@@ -40,4 +40,4 @@ const useConfirmationModal = () => {
  }
 }

-export default useConfirmationModal
+export default useConfirmationModal
--- a/src/hooks/useDescriptionHtml.js
+++ b/src/hooks/useDescriptionHtml.js
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+
 import { patchDescriptionHtml } from '../utils/ImageCache'

 // Returns description HTML safe to render: embedded images with an expired
--- a/src/hooks/useDocumentScanner.js
+++ b/src/hooks/useDocumentScanner.js
@@ -10,8 +10,14 @@ import { Capacitor } from '@capacitor/core'
 function normalizeScannedImage(raw) {
  if (!raw) return null
  if (raw.startsWith('data:')) return raw
-  if (raw.startsWith('http://') || raw.startsWith('https://') || raw.startsWith('content://')) return raw
-  if (raw.startsWith('/') || raw.startsWith('file://')) return Capacitor.convertFileSrc(raw)
+  if (
+    raw.startsWith('http://') ||
+    raw.startsWith('https://') ||
+    raw.startsWith('content://')
+  )
+    return raw
+  if (raw.startsWith('/') || raw.startsWith('file://'))
+    return Capacitor.convertFileSrc(raw)
  // iOS base64 without prefix
  return `data:image/jpeg;base64,${raw}`
 }
@@ -25,11 +31,16 @@ function normalizeScannedImage(raw) {
 export function useDocumentScanner() {
  const isNativeScanner = Capacitor.isNativePlatform()

-  const scanDocument = async ({ maxDocuments = 1, quality = 90, letUserAdjustCrop = false } = {}) => {
+  const scanDocument = async ({
+    letUserAdjustCrop = false,
+    maxDocuments = 1,
+    quality = 90,
+  } = {}) => {
    if (!isNativeScanner) return { image: null, cancelled: false }

    try {
-      const { DocumentScanner } = await import('@capgo/capacitor-document-scanner')
+      const { DocumentScanner } =
+        await import('@capgo/capacitor-document-scanner')
      const { scannedImages } = await DocumentScanner.scanDocument({
        croppedImageQuality: quality,
        maxNumDocuments: maxDocuments,
--- a/src/hooks/useFileUpload.js
+++ b/src/hooks/useFileUpload.js
@@ -1,11 +1,11 @@
 import imageCompression from 'browser-image-compression'
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'

 import { useUserProfile } from '../queries/UserQueries'
 import { useNotification } from '../service/NotificationProvider'
 import { apiClient } from '../utils/ApiClient'
 import { isPlusAccount, resolvePhotoURL } from '../utils/Helpers'
-import { useTranslation } from 'react-i18next'

 export const useFileUpload = ({
  draftId,
--- a/src/hooks/usePendingCommands.js
+++ b/src/hooks/usePendingCommands.js
@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
+
 import { commandQueue } from '../utils/CommandQueue'

 // Hook to get pending commands for a specific chore (for showing pending badges/undo)
--- a/src/hooks/useResponsiveModal.js
+++ b/src/hooks/useResponsiveModal.js
@@ -1,5 +1,6 @@
 import useMediaQuery from '@mui/material/useMediaQuery'
 import { createElement } from 'react'
+
 import AppModal from '../components/common/AppModal'

 const MobileAppModal = props =>
--- a/src/hooks/useSSE.js
+++ b/src/hooks/useSSE.js
@@ -2,12 +2,13 @@ import { Capacitor } from '@capacitor/core'
 import { useQueryClient } from '@tanstack/react-query'
 import { EventSourcePolyfill } from 'event-source-polyfill'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import { useUserProfile } from '../queries/UserQueries'
 import { useAlerts } from '../service/AlertsProvider'
 import { useNotification } from '../service/NotificationProvider'
 import { apiClient } from '../utils/ApiClient'
 import { useAuth } from './useAuth.jsx'
-import { useTranslation } from 'react-i18next'

 const SSE_STATES = {
  CONNECTING: 0,
--- a/src/hooks/useSSEContext.js
+++ b/src/hooks/useSSEContext.js
@@ -1,4 +1,5 @@
 import { useContext } from 'react'
+
 import { SSEContext } from '../contexts/SSEContext'

 export const useSSEContext = () => {
--- a/src/queries/ResourceQueries.jsx
+++ b/src/queries/ResourceQueries.jsx
@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
+
 import { GetResource } from '../utils/Fetcher'

 // Helper to check if we have a valid token
@@ -13,7 +14,7 @@ const isTokenValid = () => {
 }

 export const useResource = () => {
-  const { data, isLoading, error, refetch } = useQuery({
+  const { data, error, isLoading, refetch } = useQuery({
    queryKey: ['resource'],
    queryFn: async () => {
      const response = await GetResource()
--- a/src/queries/SubtaskQueries.jsx
+++ b/src/queries/SubtaskQueries.jsx
@@ -1,4 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+
 import { networkManager } from '../hooks/NetworkManager'
 import { CompleteSubTask, SaveChore } from '../utils/Fetcher'

--- a/src/queries/ThingQueries.jsx
+++ b/src/queries/ThingQueries.jsx
@@ -1,4 +1,5 @@
 import { useInfiniteQuery } from '@tanstack/react-query'
+
 import { GetThingHistory } from '../utils/Fetcher'

 export const useThingHistory = (thingId, limit = 10) => {
--- a/src/queries/TimeQueries.jsx
+++ b/src/queries/TimeQueries.jsx
@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
 import {
  ClearChoreTimer,
  DeleteTimeSession,
@@ -56,7 +57,7 @@ export const useUpdateTimeSession = () => {
  const queryClient = useQueryClient()

  return useMutation({
-    mutationFn: ({ choreId, sessionId, sessionData }) =>
+    mutationFn: ({ choreId, sessionData, sessionId }) =>
      UpdateTimeSession(choreId, sessionId, sessionData),
    onSuccess: (_, { choreId }) => {
      queryClient.invalidateQueries(['choreTimer', choreId])
--- a/src/service/AIPromptCache.js
+++ b/src/service/AIPromptCache.js
@@ -22,7 +22,9 @@ export function isCacheEnabled() {
 export function setCacheEnabled(enabled) {
  try {
    localStorage.setItem(ENABLED_KEY, String(enabled))
-  } catch { /* ignore */ }
+  } catch {
+    /* ignore */
+  }
 }

 export function hashContent(content) {
@@ -56,7 +58,9 @@ export function setCached(hash, value) {
      index.push(hash)
      localStorage.setItem(INDEX_KEY, JSON.stringify(index))
    }
-  } catch { /* storage full, ignore */ }
+  } catch {
+    /* storage full, ignore */
+  }
 }

 export function getCacheStats() {
@@ -66,7 +70,15 @@ export function getCacheStats() {
 export function clearCache() {
  const index = getIndex()
  index.forEach(h => {
-    try { localStorage.removeItem(ENTRY_PREFIX + h) } catch { /* ignore */ }
+    try {
+      localStorage.removeItem(ENTRY_PREFIX + h)
+    } catch {
+      /* ignore */
+    }
  })
-  try { localStorage.removeItem(INDEX_KEY) } catch { /* ignore */ }
+  try {
+    localStorage.removeItem(INDEX_KEY)
+  } catch {
+    /* ignore */
+  }
 }
--- a/src/service/LocalAIService.js
+++ b/src/service/LocalAIService.js
@@ -1,4 +1,5 @@
 import { Capacitor } from '@capacitor/core'
+
 import { getCached, hashContent, setCached } from './AIPromptCache'

 // Native-only local AI service using @capacitor/local-llm.
@@ -74,14 +75,19 @@ class LocalAIService {
    await this.warmup()
    try {
      const { LocalLLM } = await import('@capacitor/local-llm')
-      const { text: out } = await LocalLLM.prompt({ prompt: text, sessionId: this._sessionId })
+      const { text: out } = await LocalLLM.prompt({
+        prompt: text,
+        sessionId: this._sessionId,
+      })
      return out?.trim() || null
    } finally {
      try {
        const { LocalLLM } = await import('@capacitor/local-llm')
        await LocalLLM.endSession({ sessionId: this._sessionId })
        this._warmedUp = false
-      } catch { /* ignore */ }
+      } catch {
+        /* ignore */
+      }
    }
  }

@@ -99,7 +105,9 @@ class LocalAIService {
    try {
      const systemMsg = messages.find(m => m.role === 'system')?.content || ''
      const userMsg = messages.find(m => m.role === 'user')?.content || ''
-      const result = await this._nativePrompt(`${systemMsg}\n\nUser: ${userMsg}\nAssistant:`)
+      const result = await this._nativePrompt(
+        `${systemMsg}\n\nUser: ${userMsg}\nAssistant:`,
+      )
      if (result) setCached(cacheHash, result)
      return result
    } catch (e) {
@@ -122,7 +130,10 @@ class LocalAIService {
    try {
      await this.warmup()
      const { LocalLLM } = await import('@capacitor/local-llm')
-      const { text } = await LocalLLM.prompt({ prompt, sessionId: this._sessionId })
+      const { text } = await LocalLLM.prompt({
+        prompt,
+        sessionId: this._sessionId,
+      })
      const result = text?.trim() || null
      if (result) setCached(cacheHash, result)
      return result
@@ -133,7 +144,9 @@ class LocalAIService {
        const { LocalLLM } = await import('@capacitor/local-llm')
        await LocalLLM.endSession({ sessionId: this._sessionId })
        this._warmedUp = false
-      } catch { /* ignore */ }
+      } catch {
+        /* ignore */
+      }
    }
  }
 }
--- a/src/service/NFCWriter.jsx
+++ b/src/service/NFCWriter.jsx
@@ -42,7 +42,10 @@ export const decodeNdefUrl = record => {

 // Starts a native NFC write session. Calls onWaiting once scanning is active,
 // then onSuccess or onError when the write completes. Returns a cancel function.
-export const startNativeNFCWrite = async (url, { onWaiting, onSuccess, onError }) => {
+export const startNativeNFCWrite = async (
+  url,
+  { onError, onSuccess, onWaiting },
+) => {
  let listener = null
  let done = false

@@ -86,7 +89,7 @@ export const startNativeNFCWrite = async (url, { onWaiting, onSuccess, onError }

 // Starts a native NFC scan session for reading. Calls onTag(url) when a URL
 // NDEF record is found, or onError on failure. Returns a cancel function.
-export const startNativeScan = async ({ onTag, onError }) => {
+export const startNativeScan = async ({ onError, onTag }) => {
  let listener = null
  let done = false

--- a/src/service/VoiceInputService.js
+++ b/src/service/VoiceInputService.js
@@ -113,9 +113,8 @@ class VoiceInputService {
  async isSupported() {
    if (this.isNative) {
      try {
-        const { SpeechRecognition } = await import(
-          '@capacitor-community/speech-recognition'
-        )
+        const { SpeechRecognition } =
+          await import('@capacitor-community/speech-recognition')
        const { available } = await SpeechRecognition.available()
        return !!available
      } catch {
@@ -134,9 +133,8 @@ class VoiceInputService {
      return 'granted'
    }
    try {
-      const { SpeechRecognition } = await import(
-        '@capacitor-community/speech-recognition'
-      )
+      const { SpeechRecognition } =
+        await import('@capacitor-community/speech-recognition')
      const current = await SpeechRecognition.checkPermissions()
      if (current.speechRecognition === 'granted') return 'granted'
      const res = await SpeechRecognition.requestPermissions()
@@ -189,9 +187,8 @@ class VoiceInputService {
    if (this.isNative) {
      let SpeechRecognition
      try {
-        ;({ SpeechRecognition } = await import(
-          '@capacitor-community/speech-recognition'
-        ))
+        ;({ SpeechRecognition } =
+          await import('@capacitor-community/speech-recognition'))
        await withTimeout(SpeechRecognition.stop(), NATIVE_CALL_TIMEOUT_MS)
      } catch {
        // recognizer may already be stopped
@@ -282,9 +279,8 @@ class VoiceInputService {
  }

  async _startNative() {
-    const { SpeechRecognition } = await import(
-      '@capacitor-community/speech-recognition'
-    )
+    const { SpeechRecognition } =
+      await import('@capacitor-community/speech-recognition')
    await SpeechRecognition.removeAllListeners()

    await SpeechRecognition.addListener('partialResults', ({ matches }) => {
@@ -342,9 +338,8 @@ class VoiceInputService {
  }

  async _doRestartNative() {
-    const { SpeechRecognition } = await import(
-      '@capacitor-community/speech-recognition'
-    )
+    const { SpeechRecognition } =
+      await import('@capacitor-community/speech-recognition')
    try {
      await withTimeout(SpeechRecognition.stop(), NATIVE_CALL_TIMEOUT_MS)
    } catch {
--- a/src/service/WidgetService.js
+++ b/src/service/WidgetService.js
@@ -1,4 +1,5 @@
 import { Capacitor, registerPlugin } from '@capacitor/core'
+
 import { apiClient } from '../utils/ApiClient'

 // Native bridge implemented in ios/App/App/WidgetBridgePlugin.swift and
--- a/src/utils/ChoreCardHelpers.jsx
+++ b/src/utils/ChoreCardHelpers.jsx
@@ -19,7 +19,11 @@ const allMonths = [
 * @param {Object} chore - The chore object (needed for nextDueDate null check)
 * @returns {string} The formatted due date text
 */
-export const getDueDateChipText = (nextDueDate, chore, timeFormat = 'h:mm A') => {
+export const getDueDateChipText = (
+  nextDueDate,
+  chore,
+  timeFormat = 'h:mm A',
+) => {
  if (chore?.nextDueDate === null || nextDueDate === null) return 'No Due Date'

  const dueDate = moment(nextDueDate)
@@ -34,16 +38,22 @@ export const getDueDateChipText = (nextDueDate, chore, timeFormat = 'h:mm A') =>
    sameElse: `MMM D ${timeFormat}`,
  }

-
  // if time is 23:59:59, treat as end-of-day (date only, no specific time)
-  if (dueDate.hours() === 23 && dueDate.minutes() === 59 && dueDate.seconds() === 59) {
+  if (
+    dueDate.hours() === 23 &&
+    dueDate.minutes() === 59 &&
+    dueDate.seconds() === 59
+  ) {
    if (diff < 0) {
      // For overdue dates, show calendar format for recent dates
      const absDiff = Math.abs(diff)
      if (absDiff <= 48) {
        return (
          'Overdue ' +
-          moment(nextDueDate).calendar(null, calendarFormat).split(' ')[0].toLowerCase()
+          moment(nextDueDate)
+            .calendar(null, calendarFormat)
+            .split(' ')[0]
+            .toLowerCase()
        )
      }
      return 'Overdue ' + dueDate.fromNow()
--- a/src/utils/Chores.jsx
+++ b/src/utils/Chores.jsx
@@ -1,4 +1,5 @@
 import moment from 'moment'
+
 import { TASK_COLOR } from './Colors.jsx'

 const priorityOrder = [1, 2, 3, 4, 0]
@@ -213,7 +214,7 @@ export const ChoresGrouper = (groupBy, chores, filter) => {
    }

    case 'due_date': {
-      var { dateGroups: dueDateGroups, anytime: dueAnytime } =
+      var { anytime: dueAnytime, dateGroups: dueDateGroups } =
        buildActualDateGroups(chores)
      groups = [...dueDateGroups]
      if (dueAnytime.length > 0) {
--- a/src/utils/DateFormatter.js
+++ b/src/utils/DateFormatter.js
@@ -1,10 +1,6 @@
 import moment from 'moment'

-export const createDateFormatter = (
-  dateFormat,
-  timeFormat,
-  firstDayOfWeek,
-) => {
+export const createDateFormatter = (dateFormat, timeFormat, firstDayOfWeek) => {
  moment.updateLocale('en', {
    week: {
      dow: firstDayOfWeek,
--- a/src/utils/Fetcher.jsx
+++ b/src/utils/Fetcher.jsx
@@ -740,7 +740,7 @@ const DeleteUser = (password, confirmation, transferOptions = []) => {
 const UploadChoreAttachment = (
  file,
  entityType,
-  { entityId, draftId } = {},
+  { draftId, entityId } = {},
 ) => {
  const formData = new FormData()
  formData.append('file', file)
@@ -986,11 +986,6 @@ const TrackFilterUsage = id => {

 export {
  AcceptCircleMemberRequest,
-  DeleteChoreAttachment,
-  DeleteDraftAttachment,
-  GetChoreAttachments,
-  SignAssetURL,
-  UploadChoreAttachment,
  ApproveChore,
  ArchiveChore,
  CancelSubscription,
@@ -1010,8 +1005,10 @@ export {
  CreateThing,
  DeleteChildUser,
  DeleteChore,
+  DeleteChoreAttachment,
  DeleteChoreHistory,
  DeleteCircleMember,
+  DeleteDraftAttachment,
  DeleteFilter,
  DeleteLabel,
  DeleteLongLiveToken,
@@ -1024,6 +1021,7 @@ export {
  GetAllUsers,
  GetArchivedChores,
  GetChildUsers,
+  GetChoreAttachments,
  GetChoreByID,
  GetChoreDetailById,
  GetChoreHistory,
@@ -1069,6 +1067,7 @@ export {
  SaveChore,
  SaveThing,
  SetupMFA,
+  SignAssetURL,
  signUp,
  SkipChore,
  StartChore,
@@ -1091,5 +1090,6 @@ export {
  UpdateThingState,
  UpdateTimeSession,
  UpdateUserDetails,
+  UploadChoreAttachment,
  VerifyMFA,
 }
--- a/src/utils/FilterEngine.js
+++ b/src/utils/FilterEngine.js
@@ -13,7 +13,7 @@
 * @returns {boolean} - Whether the chore matches the condition
 */
 export const evaluateCondition = (chore, condition, context = {}) => {
-  const { type, operator, value } = condition
+  const { operator, type, value } = condition

  switch (type) {
    case 'assignee':
@@ -343,7 +343,7 @@ export const getFilterOverdueCount = (chores, filter, context = {}) => {
 * @returns {Object} - { isValid: boolean, issues: Array }
 */
 export const validateFilter = (filter, context = {}) => {
-  const { members = [], labels = [], projects = [] } = context
+  const { labels = [], members = [], projects = [] } = context
  const issues = []

  if (!filter.conditions || filter.conditions.length === 0) {
--- a/src/utils/ImageCache.js
+++ b/src/utils/ImageCache.js
@@ -273,7 +273,7 @@ const patchDescriptionHtml = async (html, meta = {}) => {
  const images = extractDescriptionImages(html)
  if (images.length === 0) return html
  let patched = html
-  for (const { path, src, rawSrc } of images) {
+  for (const { path, rawSrc, src } of images) {
    try {
      const nextSrc = await getImageSrc(path, src, {
        kind: 'description',
--- a/src/utils/OfflineDB.js
+++ b/src/utils/OfflineDB.js
@@ -1,5 +1,6 @@
-import { CapacitorSQLite } from '@capacitor-community/sqlite'
 import { Capacitor } from '@capacitor/core'
+import { CapacitorSQLite } from '@capacitor-community/sqlite'
+
 import { isOfflineFeatureEnabled } from './OfflineFeatureToggle'

 const DB_NAME = 'donetick_offline'
@@ -630,7 +631,7 @@ class IndexedDBBackend {
  async saveChores(chores) {
    if (!chores.length) return

-    const { tx, store } = await this._tx('cached_chores', 'readwrite')
+    const { store, tx } = await this._tx('cached_chores', 'readwrite')

    for (const chore of chores) {
      store.put({
@@ -670,7 +671,7 @@ class IndexedDBBackend {

  async deleteChores(ids) {
    if (!ids.length) return
-    const { tx, store } = await this._tx('cached_chores', 'readwrite')
+    const { store, tx } = await this._tx('cached_chores', 'readwrite')
    for (const id of ids) {
      store.delete(id)
    }
@@ -693,7 +694,7 @@ class IndexedDBBackend {
    const choreIds = [...new Set(entries.map(e => Number(e.choreId)))]
    await this._deletePendingHistoryByChoreIds(choreIds)
    // Upsert real entries
-    const { tx, store } = await this._tx('cached_history', 'readwrite')
+    const { store, tx } = await this._tx('cached_history', 'readwrite')
    for (const entry of entries) {
      store.put({
        id: entry.id,
@@ -736,7 +737,7 @@ class IndexedDBBackend {
      .map(row => row.id)
    if (!toDelete.length) return
    // Tx 2: delete them
-    const { tx, store: writeStore } = await this._tx(
+    const { store: writeStore, tx } = await this._tx(
      'cached_history',
      'readwrite',
    )
@@ -772,7 +773,7 @@ class IndexedDBBackend {

  async deleteHistory(ids) {
    if (!ids.length) return
-    const { tx, store } = await this._tx('cached_history', 'readwrite')
+    const { store, tx } = await this._tx('cached_history', 'readwrite')
    for (const id of ids) {
      store.delete(id)
    }
--- a/src/utils/SyncEngine.js
+++ b/src/utils/SyncEngine.js
@@ -194,7 +194,7 @@ class SyncEngine {
        break

      case CommandType.COMPLETE_CHORE: {
-        const { id, body, completedDate, performer } = cmd.payload
+        const { body, completedDate, id, performer } = cmd.payload
        response = await MarkChoreComplete(
          id,
          body || {},
@@ -221,7 +221,7 @@ class SyncEngine {
        break

      case CommandType.UPDATE_CHORE_HISTORY: {
-        const { choreId, historyId, historyData } = cmd.payload
+        const { choreId, historyData, historyId } = cmd.payload
        response = await UpdateChoreHistory(choreId, historyId, historyData)
        break
      }
@@ -233,7 +233,7 @@ class SyncEngine {
      }

      case CommandType.RESCHEDULE_CHORE: {
-        const { id, dueDate } = cmd.payload
+        const { dueDate, id } = cmd.payload
        response = await UpdateDueDate(id, dueDate)
        break
      }
--- a/src/utils/UserHelpers.js
+++ b/src/utils/UserHelpers.js
@@ -5,48 +5,52 @@ export const USER_TYPES = {
  CHILD: 1,
 }

-export const isParentUser = (user) => {
+export const isParentUser = user => {
  if (!user) return false
  return user.userType === USER_TYPES.PARENT && !user.parentUserId
 }

-export const isChildUser = (user) => {
+export const isChildUser = user => {
  if (!user) return false
  return user.userType === USER_TYPES.CHILD && user.parentUserId !== null
 }

-export const canManageChildUsers = (user) => {
+export const canManageChildUsers = user => {
  return isParentUser(user)
 }

-export const canCreateChores = (user) => {
+export const canCreateChores = user => {
  // Both parent and child users can create chores
  return user && (isParentUser(user) || isChildUser(user))
 }

-export const canManageCircle = (user) => {
+export const canManageCircle = user => {
  // Only parent users can manage circle settings
  return isParentUser(user)
 }

-export const canAccessAdminSettings = (user) => {
+export const canAccessAdminSettings = user => {
  // Only parent users can access admin settings like API tokens, MFA, etc.
  return isParentUser(user)
 }

-export const getUserDisplayInfo = (user) => {
+export const getUserDisplayInfo = user => {
  if (!user) return { displayName: '', username: '', userType: 'unknown' }

  return {
    displayName: user.displayName || user.username,
    username: user.username,
-    userType: isParentUser(user) ? 'parent' : isChildUser(user) ? 'child' : 'unknown',
+    userType: isParentUser(user)
+      ? 'parent'
+      : isChildUser(user)
+        ? 'child'
+        : 'unknown',
    parentUserId: user.parentUserId,
    circleID: user.circleID,
  }
 }

-export const getChildUsernameFromCombined = (combinedUsername) => {
+export const getChildUsernameFromCombined = combinedUsername => {
  // Extract child name from format: parent_child
  const parts = combinedUsername.split('_')
  if (parts.length >= 2) {
@@ -55,7 +59,7 @@ export const getChildUsernameFromCombined = (combinedUsername) => {
  return combinedUsername
 }

-export const getParentUsernameFromCombined = (combinedUsername) => {
+export const getParentUsernameFromCombined = combinedUsername => {
  // Extract parent name from format: parent_child
  const parts = combinedUsername.split('_')
  return parts[0] || combinedUsername
@@ -63,4 +67,4 @@ export const getParentUsernameFromCombined = (combinedUsername) => {

 export const buildChildUsername = (parentUsername, childName) => {
  return `${parentUsername}_${childName}`
-}
+}
--- a/src/views/Authorization/AuthFields.jsx
+++ b/src/views/Authorization/AuthFields.jsx
@@ -13,11 +13,12 @@ import {
 } from '@mui/joy'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+
 import { authButtonSx, authInputSx } from './authStyles'

 const labelSx = { fontSize: '0.875rem', fontWeight: 600, mb: 0.75 }

-export const AuthField = ({ label, error, helper, children, ...formProps }) => (
+export const AuthField = ({ children, error, helper, label, ...formProps }) => (
  <FormControl error={Boolean(error)} {...formProps}>
    <FormLabel sx={labelSx}>{label}</FormLabel>
    {children}
@@ -34,16 +35,16 @@ export const AuthField = ({ label, error, helper, children, ...formProps }) => (
  </FormControl>
 )

-export const AuthTextField = ({ label, error, helper, sx, ...inputProps }) => (
+export const AuthTextField = ({ error, helper, label, sx, ...inputProps }) => (
  <AuthField label={label} error={error} helper={helper} id={inputProps.id}>
    <Input size='lg' sx={{ ...authInputSx, ...sx }} {...inputProps} />
  </AuthField>
 )

 export const AuthPasswordField = ({
-  label,
  error,
  helper,
+  label,
  sx,
  ...inputProps
 }) => {
@@ -92,7 +93,7 @@ export const AuthSubmitButton = ({ children, sx, ...props }) => (
  </Button>
 )

-export const SocialButton = ({ icon, children, sx, ...props }) => (
+export const SocialButton = ({ children, icon, sx, ...props }) => (
  <Button
    type='button'
    size='lg'
--- a/src/views/Authorization/AuthShell.jsx
+++ b/src/views/Authorization/AuthShell.jsx
@@ -1,5 +1,6 @@
 import { Capacitor } from '@capacitor/core'
 import { Box, Sheet, Typography } from '@mui/joy'
+
 import Logo from '../../Logo'

 /**
@@ -8,18 +9,18 @@ import Logo from '../../Logo'
 * its own safe-area padding (the top inset is already reserved by NavBar).
 */
 const AuthShell = ({
-  title,
-  subtitle,
  action,
  children,
  footer,
  logoSize = 48,
+  showLogo = !Capacitor.isNativePlatform(),
+  subtitle,
  // In the app the user already came through the app icon and the Get Started
  // mark, so repeating it here is noise. On the web these routes are the first
  // thing a visitor sees — often on a self-hosted domain, and with no navbar —
  // so the mark is the only thing identifying the app. Views reached from an
  // emailed link override this to always show it.
-  showLogo = !Capacitor.isNativePlatform(),
+  title,
 }) => {
  return (
    <Box
--- a/src/views/Authorization/Authenticating.jsx
+++ b/src/views/Authorization/Authenticating.jsx
@@ -1,16 +1,16 @@
-import { Box, Button, LinearProgress } from '@mui/joy'
-import { useEffect, useState } from 'react'
-
 import { Capacitor } from '@capacitor/core'
+import { Box, Button, LinearProgress } from '@mui/joy'
 import Cookies from 'js-cookie'
+import { useEffect, useState } from 'react'
 import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link, useNavigate, useParams } from 'react-router-dom'
+
 import { useUserProfile } from '../../queries/UserQueries'
 import { apiClient } from '../../utils/ApiClient'
-import { endOAuthExchange } from '../../utils/OAuthExchangeState'
 import { GetUserProfile } from '../../utils/Fetcher'
+import { endOAuthExchange } from '../../utils/OAuthExchangeState'
 import { saveTokens } from '../../utils/TokenStorage'
-import { useTranslation } from 'react-i18next'
 import AuthShell from './AuthShell'
 import { authButtonSx } from './authStyles'
 import MFAVerificationModal from './MFAVerificationModal'
--- a/src/views/Authorization/ForgotPasswordView.jsx
+++ b/src/views/Authorization/ForgotPasswordView.jsx
@@ -3,6 +3,7 @@ import { Box, Button, Link, Typography } from '@mui/joy'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
+
 import { useNotification } from '../../service/NotificationProvider'
 import { ResetPassword } from '../../utils/Fetcher'
 import { AuthSubmitButton, AuthTextField, LegalLinks } from './AuthFields'
--- a/src/views/Authorization/LoginSettings.jsx
+++ b/src/views/Authorization/LoginSettings.jsx
@@ -4,7 +4,9 @@ import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
 import WifiIcon from '@mui/icons-material/Wifi'
 import { Alert, Box, Button, CircularProgress, Typography } from '@mui/joy'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
+
 import { API_URL } from '../../Config'
 import { useResource } from '../../queries/ResourceQueries'
 import { apiClient } from '../../utils/ApiClient'
@@ -12,7 +14,6 @@ import { offlineDB } from '../../utils/OfflineDB'
 import { AuthSubmitButton, AuthTextField } from './AuthFields'
 import AuthShell from './AuthShell'
 import { authButtonSx } from './authStyles'
-import { useTranslation } from 'react-i18next'

 const CONNECTION_TIMEOUT_MS = 8000

@@ -106,8 +107,7 @@ const LoginSettings = () => {
          ) {
            return {
              ok: false,
-              message:
-                t('server.dnsFailed'),
+              message: t('server.dnsFailed'),
            }
          }
          return {
@@ -119,16 +119,14 @@ const LoginSettings = () => {
        // no-cors also timed out → server/host truly unreachable
        return {
          ok: false,
-          message:
-            t('server.unreachable'),
+          message: t('server.unreachable'),
        }
      }

      // Fallback (should rarely hit)
      return {
        ok: false,
-        message:
-          t('server.unreachable'),
+        message: t('server.unreachable'),
      }
    }
  }
@@ -145,9 +143,7 @@ const LoginSettings = () => {

    if (!isValidURL(trimmedURL)) {
      setStatus('error')
-      setErrorMessage(
-        t('server.invalidUrl'),
-      )
+      setErrorMessage(t('server.invalidUrl'))
      return
    }

--- a/src/views/Authorization/LoginView.jsx
+++ b/src/views/Authorization/LoginView.jsx
@@ -35,7 +35,7 @@ import AuthShell from './AuthShell'
 import { authButtonSx } from './authStyles'
 import MFAVerificationModal from './MFAVerificationModal'

-const SegmentedControl = ({ value, onChange, options }) => (
+const SegmentedControl = ({ onChange, options, value }) => (
  <Box
    role='tablist'
    sx={{
@@ -582,7 +582,7 @@ const LoginView = () => {
            discoveryDocs='claims_supported'
            access_type='online'
            isOnlyGetToken={true}
-            onResolve={({ provider, data }) => {
+            onResolve={({ data, provider }) => {
              loggedWithProvider(provider, data)
            }}
            onReject={() => {
--- a/src/views/Authorization/MFAVerificationModal.jsx
+++ b/src/views/Authorization/MFAVerificationModal.jsx
@@ -1,18 +1,18 @@
 import { Alert, Box, Input, Link, Stack, Typography } from '@mui/joy'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'

 import ModalActions from '../../components/common/ModalActions'
 import { useResponsiveModal } from '../../hooks/useResponsiveModal'
 import { VerifyMFA } from '../../utils/Fetcher'
 import { authInputSx } from './authStyles'
-import { useTranslation } from 'react-i18next'

 const MFAVerificationModal = ({
-  open,
  onClose,
-  sessionToken,
-  onSuccess,
  onError,
+  onSuccess,
+  open,
+  sessionToken,
 }) => {
  const { t } = useTranslation('auth')
  const [verificationCode, setVerificationCode] = useState('')
@@ -38,8 +38,7 @@ const MFAVerificationModal = ({
        onSuccess(data)
      } else {
        const errorData = await response.json()
-        const message =
-          errorData.message || t('mfaModal.invalidCode')
+        const message = errorData.message || t('mfaModal.invalidCode')
        setError(message)
        onError?.(message)
      }
@@ -77,9 +76,7 @@ const MFAVerificationModal = ({
      size='md'
      title={t('mfaModal.title')}
      description={
-        isBackupCode
-          ? t('mfaModal.backupHint')
-          : t('mfaModal.codeHint')
+        isBackupCode ? t('mfaModal.backupHint') : t('mfaModal.codeHint')
      }
      closeOnBackdrop={!loading}
      closeOnEscape={!loading}
@@ -112,7 +109,9 @@ const MFAVerificationModal = ({
          <Input
            id='mfa-code'
            size='lg'
-            placeholder={isBackupCode ? t('mfaModal.backupPlaceholder') : '000000'}
+            placeholder={
+              isBackupCode ? t('mfaModal.backupPlaceholder') : '000000'
+            }
            value={verificationCode}
            onChange={e => setVerificationCode(e.target.value)}
            onKeyDown={handleKeyDown}
--- a/src/views/Authorization/Signup.jsx
+++ b/src/views/Authorization/Signup.jsx
@@ -39,8 +39,7 @@ const SignupView = () => {
    if (!result.success) {
      showError({
        title: 'Almost there',
-        message:
-          t('signupSignInFailed'),
+        message: t('signupSignInFailed'),
      })
      Navigate('/login')
      return
--- a/src/views/ChoreEdit/ChoreView.jsx
+++ b/src/views/ChoreEdit/ChoreView.jsx
@@ -41,6 +41,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom'

 import { useImpersonateUser } from '../../contexts/ImpersonateUserContext.jsx'
 import { useLocalization } from '../../contexts/LocalizationContext'
+import { useDescriptionHtml } from '../../hooks/useDescriptionHtml'
 import { usePendingCommands } from '../../hooks/usePendingCommands'
 import {
  useChoreDetails,
@@ -80,12 +81,6 @@ import {
 } from '../../utils/Fetcher'
 import { offlineDB } from '../../utils/OfflineDB'
 import { getSafeBottomPadding } from '../../utils/SafeAreaUtils.js'
-import AttachmentBrowserModal from '../Modals/Inputs/AttachmentBrowserModal'
-import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
-import NoteViewerModal from '../Modals/Inputs/NoteViewerModal'
-import NudgeModal from '../Modals/Inputs/NudgeModal'
-import SelectModal from '../Modals/Inputs/SelectModal'
-import WriteNFCModal from '../Modals/Inputs/WriteNFCModal'
 import ChoreActionMenu from '../components/ChoreActionMenu'
 import DueDatePickerModal, {
  combineDueDate,
@@ -95,9 +90,14 @@ import LoadingComponent from '../components/Loading.jsx'
 import PendingBadge from '../components/PendingBadge'
 import RichTextEditor from '../components/RichTextEditor.jsx'
 import SubTasks from '../components/SubTask.jsx'
+import AttachmentBrowserModal from '../Modals/Inputs/AttachmentBrowserModal'
+import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
+import NoteViewerModal from '../Modals/Inputs/NoteViewerModal'
+import NudgeModal from '../Modals/Inputs/NudgeModal'
+import SelectModal from '../Modals/Inputs/SelectModal'
+import WriteNFCModal from '../Modals/Inputs/WriteNFCModal'
 import TimePassedCard from './TimePassedCard.jsx'
 import TimerSplitButton from './TimerSplitButton.jsx'
-import { useDescriptionHtml } from '../../hooks/useDescriptionHtml'

 const isNetworkError = err =>
  err instanceof TypeError && err.message === 'Failed to fetch'
@@ -130,7 +130,7 @@ const ChoreView = () => {
  const { choreId } = useParams()
  const [note, setNote] = useState(null)
  const queryClient = useQueryClient()
-  const { showSuccess, showError, showUndo } = useNotification()
+  const { showError, showSuccess, showUndo } = useNotification()

  const [searchParams] = useSearchParams()

--- a/src/views/ChoreEdit/ThingTriggerSection.jsx
+++ b/src/views/ChoreEdit/ThingTriggerSection.jsx
@@ -13,8 +13,8 @@ import {
  Typography,
 } from '@mui/joy'
 import { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
 const isValidTrigger = (thing, condition, triggerState) => {
  const newErrors = {}
  if (!thing || !triggerState) {
@@ -49,11 +49,11 @@ const isValidTrigger = (thing, condition, triggerState) => {
 }

 const ThingTriggerSection = ({
-  things,
+  isAttepmtingToSave,
  onTriggerUpdate,
  onValidate,
  selected,
-  isAttepmtingToSave,
+  things,
 }) => {
  const { t } = useTranslation('chores')
  const [selectedThing, setSelectedThing] = useState(null)
@@ -86,9 +86,7 @@ const ThingTriggerSection = ({

  return (
    <Card sx={{ mt: 1 }}>
-      <Typography level='h5'>
-        {t('thing.triggerHint')}
-      </Typography>
+      <Typography level='h5'>{t('thing.triggerHint')}</Typography>
      {things?.length === 0 && (
        <Typography level='body-sm'>
          it's look like you don't have any things yet, create a thing to
--- a/src/views/ChoreEdit/TimePassedCard.jsx
+++ b/src/views/ChoreEdit/TimePassedCard.jsx
@@ -8,6 +8,7 @@ import {
 import { Box, Card, Chip, Typography } from '@mui/joy'
 import { useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+
 import { useLocalization } from '../../contexts/LocalizationContext'

 const TimePassedCard = ({ chore, handleAction, onShowDetails }) => {
--- a/src/views/ChoreEdit/TimerSplitButton.jsx
+++ b/src/views/ChoreEdit/TimerSplitButton.jsx
@@ -10,12 +10,12 @@ import { useEffect, useRef, useState } from 'react'

 const TimerSplitButton = ({
  chore,
-  onAction,
-  onShowDetails,
-  onResetTimer,
-  onClearAllTime,
  disabled = false,
  fullWidth = false,
+  onAction,
+  onClearAllTime,
+  onResetTimer,
+  onShowDetails,
 }) => {
  const [anchorEl, setAnchorEl] = useState(null)
  const isMenuOpen = Boolean(anchorEl)
--- a/src/views/Chores/ActivitesCard.jsx
+++ b/src/views/Chores/ActivitesCard.jsx
@@ -27,11 +27,12 @@ import {
 } from '@mui/joy'
 import moment from 'moment'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import { useChores, useChoresHistory } from '../../queries/ChoreQueries'
 import { useCircleMembers } from '../../queries/UserQueries'
 import { resolvePhotoURL } from '../../utils/Helpers'
 import NoteViewerModal from '../Modals/Inputs/NoteViewerModal'
-import { useTranslation } from 'react-i18next'

 const ActivityItem = ({ activity, members, onViewNote }) => {
  const { t } = useTranslation('chores')
--- a/src/views/Chores/ArchivedTasks.jsx
+++ b/src/views/Chores/ArchivedTasks.jsx
@@ -1109,7 +1109,10 @@ const ArchivedTasks = () => {
            }
            primaryAction={
              searchTerm
-                ? { label: t('archived.clearSearch'), onClick: handleSearchClose }
+                ? {
+                    label: t('archived.clearSearch'),
+                    onClick: handleSearchClose,
+                  }
                : { label: t('archived.clearFilters'), onClick: clearAll }
            }
            secondaryAction={
--- a/src/views/Chores/ChoreListView.jsx
+++ b/src/views/Chores/ChoreListView.jsx
@@ -1,11 +1,12 @@
+import '@meauxt/react-swipeable-list/dist/styles.css'
+
 import {
-  Type as ListType,
  SwipeableList,
  SwipeableListItem,
  SwipeAction,
  TrailingActions,
+  Type as ListType,
 } from '@meauxt/react-swipeable-list'
-import '@meauxt/react-swipeable-list/dist/styles.css'
 import {
  Check,
  Delete,
@@ -19,6 +20,7 @@ import {
 import { Box, Typography } from '@mui/joy'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
+
 import { useLongPress } from '../../hooks/useLongPress'
 import ChoreCard from './ChoreCard'
 import CompactChoreCard from './CompactChoreCard'
@@ -28,16 +30,16 @@ import CompactChoreCard from './CompactChoreCard'
 * can't live in the render loop because it needs a hook.
 */
 const ChoreSwipeableItem = ({
-  trailingActions,
+  children,
+  longPressEnabled,
  onClick,
  onLongPress,
-  longPressEnabled,
-  children,
+  trailingActions,
  // SwipeableList clones its children to inject list-level config
  // (listType, fullSwipe, thresholds…), so it has to be passed through.
  ...listProps
 }) => {
-  const { handlers: longPressHandlers, cancel: cancelLongPress } = useLongPress(
+  const { cancel: cancelLongPress, handlers: longPressHandlers } = useLongPress(
    onLongPress,
    { enabled: longPressEnabled },
  )
@@ -75,19 +77,19 @@ const ChoreSwipeableItem = ({

 const ChoreListView = ({
  chores,
-  viewMode,
-  membersData,
-  userLabels,
-  handleLabelFiltering,
  handleChoreAction,
+  handleLabelFiltering,
  isMultiSelectMode,
-  selectedChores,
-  toggleChoreSelection,
-  userProfile,
  isOfficialInstance,
-  toggleMultiSelectMode,
+  membersData,
  onLongPressChore,
+  selectedChores,
  showActions = true,
+  toggleChoreSelection,
+  toggleMultiSelectMode,
+  userLabels,
+  userProfile,
+  viewMode,
 }) => {
  const navigate = useNavigate()
  const { t } = useTranslation('chores')
@@ -204,7 +206,9 @@ const ChoreListView = ({
                  <Check sx={{ fontSize: 20 }} />
                )}
                <Typography level='body-xs' sx={{ mt: 0.5 }}>
-                  {chore.status !== 1 ? t('choreView.start') : t('list.complete')}
+                  {chore.status !== 1
+                    ? t('choreView.start')
+                    : t('list.complete')}
                </Typography>
              </Box>
            </SwipeAction>
--- a/src/views/Chores/CompactChoreCard.jsx
+++ b/src/views/Chores/CompactChoreCard.jsx
@@ -11,6 +11,7 @@ import {
 import { Box, Checkbox, Chip, IconButton, Typography } from '@mui/joy'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
+
 import { useImpersonateUser } from '../../contexts/ImpersonateUserContext.jsx'
 import { useLocalization } from '../../contexts/LocalizationContext'
 import { usePendingCommands } from '../../hooks/usePendingCommands'
@@ -30,17 +31,17 @@ import PendingBadge from '../components/PendingBadge'

 const CompactChoreCard = ({
  chore,
-  performers,
-  sx,
-  viewOnly,
-  showActions = true,
-  onChipClick,
-  onAction,
-  // Multi-select props
  isMultiSelectMode = false,
  isSelected = false,
+  onAction,
+  onChipClick,
  onSelectionToggle,
  onlyClickable = false,
+  // Multi-select props
+  performers,
+  showActions = true,
+  sx,
+  viewOnly,
 }) => {
  const navigate = useNavigate()
  const { t } = useTranslation('chores')
--- a/src/views/Chores/IconButtonWithMenu.jsx
+++ b/src/views/Chores/IconButtonWithMenu.jsx
@@ -1,20 +1,21 @@
 import { Button, Chip, Menu, MenuItem, Typography } from '@mui/joy'
-import { useTranslation } from 'react-i18next'
 import IconButton from '@mui/joy/IconButton'
 import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import { getTextColorFromBackgroundColor } from '../../utils/Colors.jsx'

 const IconButtonWithMenu = ({
-  label,
-  k,
  icon,
-  options,
+  isActive,
+  k,
+  label,
  onItemSelect,
+  options,
  selectedItem,
  setSelectedItem,
-  isActive,
-  useChips,
  title,
+  useChips,
 }) => {
  const { t } = useTranslation('chores')
  const [anchorEl, setAnchorEl] = useState(null)
--- a/src/views/Chores/LocalNotificationScheduler.js
+++ b/src/views/Chores/LocalNotificationScheduler.js
@@ -78,7 +78,7 @@ const scheduleNotificationFromTemplate = (
    const now = new Date()
    const time = getTimeFromTemplate(template, dueDate)
    const notificationId = getIdFromTemplate(chore.id, template)
-    const { title, body } = getNotificationText(
+    const { body, title } = getNotificationText(
      chore.name,
      template,
      dueDate,
--- a/src/views/Chores/MultiSelectHelp.jsx
+++ b/src/views/Chores/MultiSelectHelp.jsx
@@ -1,9 +1,10 @@
 import { HelpOutline } from '@mui/icons-material'
 import { Box, Card, IconButton, Typography } from '@mui/joy'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import ModalActions from '../../components/common/ModalActions'
 import { useResponsiveModal } from '../../hooks/useResponsiveModal'
-import { useTranslation } from 'react-i18next'

 const MultiSelectHelp = ({ isVisible = true }) => {
  const { t } = useTranslation('chores')
@@ -102,7 +103,7 @@ const MultiSelectHelp = ({ isVisible = true }) => {
  )
 }

-const ShortcutItem = ({ keys, description }) => (
+const ShortcutItem = ({ description, keys }) => (
  <Box
    sx={{
      display: 'flex',
--- a/src/views/Chores/MyChores.jsx
+++ b/src/views/Chores/MyChores.jsx
@@ -23,6 +23,7 @@ import {
 import { useMediaQuery } from '@mui/material'
 import { useQueryClient } from '@tanstack/react-query'
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useNavigate, useSearchParams } from 'react-router-dom'

 import EmptyState from '../../components/common/EmptyState'
@@ -73,7 +74,6 @@ import {
 import NotificationAccessSnackbar from './NotificationAccessSnackbar'
 import Sidepanel from './Sidepanel'
 import { INSIGHT_FILTER_DEFS } from './SmartInsightsCard'
-import { useTranslation } from 'react-i18next'

 // Mirrors the assignee options in the toolbar, phrased to drop into a
 // sentence ("none of them are assigned to you").
@@ -1667,7 +1667,9 @@ const MyChores = () => {
            saveFilter(filter)
            showSuccess({
              title: t('list.advancedFilterCreated'),
-              message: t('list.advancedFilterCreatedMsg', { name: filter.name }),
+              message: t('list.advancedFilterCreatedMsg', {
+                name: filter.name,
+              }),
            })
          }
          setShowAdvancedFilterBuilder(false)
--- a/src/views/Chores/NotificationAccessSnackbar.jsx
+++ b/src/views/Chores/NotificationAccessSnackbar.jsx
@@ -4,6 +4,7 @@ import { Preferences } from '@capacitor/preferences'
 import { Button, Snackbar, Stack, Typography } from '@mui/joy'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+
 import { registerPushNotifications } from '../../CapacitorListener'

 const NotificationAccessSnackbar = () => {
--- a/src/views/Chores/Sidepanel.jsx
+++ b/src/views/Chores/Sidepanel.jsx
@@ -1,6 +1,7 @@
 import { Box, Sheet } from '@mui/joy'
 import { useMediaQuery } from '@mui/material'
 import { useEffect, useState } from 'react'
+
 import { useChoresHistory } from '../../queries/ChoreQueries'
 import { ChoresGrouper } from '../../utils/Chores'
 import { getSidepanelConfig } from '../../utils/SidepanelConfig'
@@ -11,9 +12,9 @@ import TasksByAssigneeCard from './TasksByAssigneeCard'
 import UserSwitcher from './UserSwitcher'

 const Sidepanel = ({
-  chores,
  allChores,
  applyTempFilter,
+  chores,
  clearTempFilter,
  tempFilter,
 }) => {
@@ -22,8 +23,8 @@ const Sidepanel = ({
  const [sidepanelConfig, setSidepanelConfig] = useState([])
  const {
    data: choresHistory,
-    isChoresHistoryLoading,
    handleLimitChange: refetchHistory,
+    isChoresHistoryLoading,
  } = useChoresHistory(7, true)

  useEffect(() => {
--- a/src/views/Chores/SmartInsightsCard.jsx
+++ b/src/views/Chores/SmartInsightsCard.jsx
@@ -8,9 +8,10 @@ import {
 } from '@mui/icons-material'
 import { Box, Button, Chip, Sheet, Typography } from '@mui/joy'
 import { useMemo } from 'react'
-import { TASK_COLOR } from '../../utils/Colors'
 import { useTranslation } from 'react-i18next'

+import { TASK_COLOR } from '../../utils/Colors'
+
 // Static insight filter definitions – used for URL restoration
 export const INSIGHT_FILTER_DEFS = {
  overdue: {
@@ -58,8 +59,8 @@ export const INSIGHT_FILTER_DEFS = {
 }

 const SmartInsightsCard = ({
-  chores,
  applyTempFilter,
+  chores,
  clearTempFilter,
  tempFilter,
 }) => {
--- a/src/views/Chores/SortAndGrouping.jsx
+++ b/src/views/Chores/SortAndGrouping.jsx
@@ -13,21 +13,22 @@ import {
 import IconButton from '@mui/joy/IconButton'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+
 import KeyboardShortcutHint from '../../components/common/KeyboardShortcutHint'

 const SortAndGrouping = ({
-  label,
-  k,
  icon,
-  onItemSelect,
-  selectedItem,
-  setSelectedItem,
-  selectedFilter,
-  setFilter,
  isActive,
-  useChips,
-  title,
+  k,
+  label,
  onCreateNewFilter,
+  onItemSelect,
+  selectedFilter,
+  selectedItem,
+  setFilter,
+  setSelectedItem,
+  title,
+  useChips,
 }) => {
  const { t } = useTranslation('chores')
  const [anchorEl, setAnchorEl] = useState(null)
--- a/src/views/Chores/TasksByAssigneeCard.jsx
+++ b/src/views/Chores/TasksByAssigneeCard.jsx
@@ -1,11 +1,12 @@
 import { BarChart, Person } from '@mui/icons-material'
 import { Avatar, Box, Sheet, Typography } from '@mui/joy'
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import EmptyState from '../../components/common/EmptyState'
 import { useCircleMembers } from '../../queries/UserQueries'
 import { TASK_COLOR } from '../../utils/Colors'
 import { resolvePhotoURL } from '../../utils/Helpers'
-import { useTranslation } from 'react-i18next'

 const TasksByAssigneeCard = ({ chores = [] }) => {
  const { t } = useTranslation('chores')
--- a/src/views/Chores/UserSwitcher.jsx
+++ b/src/views/Chores/UserSwitcher.jsx
@@ -1,19 +1,19 @@
 import { SupervisorAccount } from '@mui/icons-material'
 import { Avatar, Box, Button, Sheet, Typography } from '@mui/joy'
-
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+
 import { useImpersonateUser } from '../../contexts/ImpersonateUserContext'
 import { useCircleMembers, useUserProfile } from '../../queries/UserQueries'
 import UserModal from '../Modals/Inputs/UserModal'
 const UserSwitcher = () => {
  const { t } = useTranslation('chores')
  const {
-    impersonatedUser, 
+    canImpersonate,
+    impersonatedUser,
    isImpersonating,
-    startImpersonation, 
+    startImpersonation,
    stopImpersonation,
-    canImpersonate 
  } = useImpersonateUser()
  const { data: userProfile } = useUserProfile()
  const [isModalOpen, setIsModalOpen] = useState(false)
@@ -54,7 +54,9 @@ const UserSwitcher = () => {
              }}
            >
              <SupervisorAccount color='' />
-              <Typography level='title-md'>{t('impersonate.viewAs')}</Typography>
+              <Typography level='title-md'>
+                {t('impersonate.viewAs')}
+              </Typography>
            </Box>
          </Box>
          <Box sx={{ mb: 2 }}>
--- a/src/views/Chores/components/ChoreModals.jsx
+++ b/src/views/Chores/components/ChoreModals.jsx
@@ -1,10 +1,11 @@
 import { Capacitor } from '@capacitor/core'
 import { useTranslation } from 'react-i18next'
-import DateModal from '../../Modals/Inputs/DateModal'
+
 import DueDatePickerModal, {
  combineDueDate,
  splitDueDate,
 } from '../../components/DueDatePickerModal'
+import DateModal from '../../Modals/Inputs/DateModal'
 import NudgeModal from '../../Modals/Inputs/NudgeModal'
 import SelectModal from '../../Modals/Inputs/SelectModal'
 import TextModal from '../../Modals/Inputs/TextModal'
@@ -17,14 +18,14 @@ const getNFCUrl = choreId =>

 const ChoreModals = ({
  activeModal,
-  modalChore,
  membersData,
-  onChangeDueDate,
-  onCompleteWithPastDate,
+  modalChore,
  onAssigneeChange,
-  onCompleteWithNote,
-  onNudge,
+  onChangeDueDate,
  onClose,
+  onCompleteWithNote,
+  onCompleteWithPastDate,
+  onNudge,
 }) => {
  const { t } = useTranslation('chores')
  return (
--- a/src/views/Chores/components/ChoreToolbarPrototype.jsx
+++ b/src/views/Chores/components/ChoreToolbarPrototype.jsx
@@ -47,27 +47,28 @@ import {
  Typography,
 } from '@mui/joy'
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import AppModal from '../../../components/common/AppModal'
 import ActiveFilterChips from '../../../components/common/filter/ActiveFilterChips'
 import KeyboardShortcutHint from '../../../components/common/KeyboardShortcutHint'
 import { FILTER_COLORS } from '../../../utils/Colors'
 import Priorities from '../../../utils/Priorities'
+import ProjectSelector from '../../components/ProjectSelector'
+import CustomFilterChips from './CustomFilterChips'
 import FilterBuilderContent, {
  CHORE_STATUSES,
-  DUE_DATE_OPTIONS,
-  POINTS_OPERATORS,
  conditionsToSelections,
  defaultSelections,
+  DUE_DATE_OPTIONS,
+  POINTS_OPERATORS,
  selectionsToConditions,
 } from './FilterBuilderContent'
 import SearchBar from './SearchBar'
-import ProjectSelector from '../../components/ProjectSelector'
-import CustomFilterChips from './CustomFilterChips'
-import { useTranslation } from 'react-i18next'

 // ─── sub-components for the Display sheet ────────────────────────────────────

-const SectionHeader = ({ icon, label, badge }) => (
+const SectionHeader = ({ badge, icon, label }) => (
  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
    {icon && (
      <Box
@@ -97,7 +98,7 @@ const SectionHeader = ({ icon, label, badge }) => (
  </Box>
 )

-const OptionChips = ({ options, selected, multi, onToggle }) => (
+const OptionChips = ({ multi, onToggle, options, selected }) => (
  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
    {options.map(opt => {
      const isSelected = multi
@@ -183,48 +184,48 @@ const OptionChips = ({ options, selected, multi, onToggle }) => (
 */
 const ChoreToolbar = ({
  // advanced filter
-  members = [],
-  labels = [],
-  projects = [],
-  tempFilter,
-  tempFilterMeta,
+  activeFilterId,
  applyTempFilter,
  clearTempFilter,
-  saveFilter,
-  updateFilter,
-  onFilterSaved,
-  // result counts
-  resultCount,
-  totalCount,
-  // clear all
-  onClearAllFilters,
-  // project (for Display sheet)
-  selectedProject,
-  onProjectSelect,
-  // assignee (for Display sheet)
-  selectedAssigneeFilter = 'anyone',
-  onAssigneeFilterChange,
-  // saved / custom
-  savedFilters = [],
-  activeFilterId,
-  onSavedFilterClick,
-  onSavedFilterEdit,
-  onSavedFilterDelete,
-  onSavedFilterPin,
-  // grouping
-  selectedGroupBy = 'default',
-  onGroupBySelect,
-  // view + multiselect
-  viewMode = 'default',
-  onToggleViewMode,
  isMultiSelectMode,
-  onToggleMultiSelect,
-  // search
-  searchTerm,
+  labels = [],
+  members = [],
+  onAssigneeFilterChange,
+  onClearAllFilters,
+  onFilterSaved,
+  onGroupBySelect,
+  // result counts
+  onProjectSelect,
+  onSavedFilterClick,
+  // clear all
+  onSavedFilterDelete,
+  // project (for Display sheet)
+  onSavedFilterEdit,
+  onSavedFilterPin,
+  // assignee (for Display sheet)
  onSearchChange,
  onSearchClose,
+  // saved / custom
+  onToggleMultiSelect,
+  onToggleViewMode,
+  projects = [],
+  resultCount,
+  saveFilter,
+  savedFilters = [],
+  // grouping
  searchInputRef,
+  searchTerm,
+  // view + multiselect
+  selectedAssigneeFilter = 'anyone',
+  selectedGroupBy = 'default',
+  selectedProject,
  showKeyboardShortcuts,
+  // search
+  tempFilter,
+  tempFilterMeta,
+  totalCount,
+  updateFilter,
+  viewMode = 'default',
 }) => {
  const { t } = useTranslation('chores')
  const [filterSheetOpen, setFilterSheetOpen] = useState(false)
--- a/src/views/Chores/components/CustomFilterChips.jsx
+++ b/src/views/Chores/components/CustomFilterChips.jsx
@@ -7,7 +7,6 @@ import {
  Star,
  StarBorder,
 } from '@mui/icons-material'
-import { useTranslation } from 'react-i18next'
 import {
  Box,
  Chip,
@@ -18,16 +17,18 @@ import {
  Typography,
 } from '@mui/joy'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
+
 import { getTextColorFromBackgroundColor } from '../../../utils/Colors'

 const CustomFilterChips = ({
-  filters = [],
  activeFilterId,
+  filters = [],
  onFilterClick,
  onFilterDelete,
-  onFilterPin,
  onFilterEdit,
+  onFilterPin,
 }) => {
  const { t } = useTranslation('chores')
  const navigate = useNavigate()
@@ -98,8 +99,7 @@ const CustomFilterChips = ({
          const badgeTextColor = filter.color
            ? getTextColorFromBackgroundColor(filter.color)
            : '#ffffff'
-          const displayCount =
-            filter.count > 99 ? '99+' : (filter.count ?? 0)
+          const displayCount = filter.count > 99 ? '99+' : (filter.count ?? 0)

          return (
            <Tooltip
@@ -113,7 +113,9 @@ const CustomFilterChips = ({
            >
              <Chip
                variant={isActive ? 'solid' : 'outlined'}
-                color={hasWarning ? 'warning' : isActive ? 'primary' : 'neutral'}
+                color={
+                  hasWarning ? 'warning' : isActive ? 'primary' : 'neutral'
+                }
                size='md'
                onClick={() => !hasWarning && onFilterClick(filter.id)}
                sx={{
@@ -124,7 +126,9 @@ const CustomFilterChips = ({
                  flexShrink: 0,
                  fontWeight: isActive ? 600 : 500,
                  '&:hover': {
-                    backgroundColor: isActive ? undefined : 'neutral.softHoverBg',
+                    backgroundColor: isActive
+                      ? undefined
+                      : 'neutral.softHoverBg',
                  },
                }}
                startDecorator={
--- a/src/views/Chores/components/FilterBuilderContent.jsx
+++ b/src/views/Chores/components/FilterBuilderContent.jsx
@@ -9,6 +9,7 @@ import {
  TaskAlt,
 } from '@mui/icons-material'
 import { Avatar, Box, Chip, Divider, Input, Typography } from '@mui/joy'
+
 import Priorities from '../../../utils/Priorities'

 export const DUE_DATE_OPTIONS = [
@@ -99,7 +100,7 @@ export const selectionsToConditions = selections => {
  return conditions
 }

-const SectionHeader = ({ icon, label, children }) => (
+const SectionHeader = ({ children, icon, label }) => (
  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
    <Box
      sx={{
@@ -119,9 +120,9 @@ const SectionHeader = ({ icon, label, children }) => (
 )

 const IncludeExcludeToggle = ({
-  value,
-  onChange,
  labels = ['Include', 'Exclude'],
+  onChange,
+  value,
 }) => (
  <Box sx={{ display: 'flex', gap: 0.5, ml: 'auto' }}>
    {[
@@ -136,7 +137,11 @@ const IncludeExcludeToggle = ({
          value === o.op ? (o.op === 'isNot' ? 'danger' : 'primary') : 'neutral'
        }
        onClick={() => onChange(o.op)}
-        sx={{ cursor: 'pointer', userSelect: 'none', transition: 'all 0.15s ease' }}
+        sx={{
+          cursor: 'pointer',
+          userSelect: 'none',
+          transition: 'all 0.15s ease',
+        }}
      >
        {o.label}
      </Chip>
@@ -152,11 +157,11 @@ const IncludeExcludeToggle = ({
 * functional updater `prev => next` (same contract as React's setState setter).
 */
 const FilterBuilderContent = ({
-  selections,
-  onSelectionsChange,
-  members = [],
  labels = [],
+  members = [],
+  onSelectionsChange,
  projects = [],
+  selections,
 }) => {
  const toggleValue = (type, value) =>
    onSelectionsChange(prev => {
@@ -204,9 +209,11 @@ const FilterBuilderContent = ({
              variant={isSelected ? 'solid' : 'soft'}
              color={isSelected ? (extra.color ?? 'primary') : 'neutral'}
              startDecorator={
-                isSelected
-                  ? <Check sx={{ fontSize: 14 }} />
-                  : (extra.startDecorator ?? null)
+                isSelected ? (
+                  <Check sx={{ fontSize: 14 }} />
+                ) : (
+                  (extra.startDecorator ?? null)
+                )
              }
              onClick={() => toggleValue(type, opt.value)}
              sx={{
@@ -312,7 +319,7 @@ const FilterBuilderContent = ({
        Priorities.map(p => ({ value: p.value, label: p.name })),
        (opt, isSelected) => ({
          color: isSelected
-            ? (Priorities.find(p => p.value === opt.value)?.color || 'primary')
+            ? Priorities.find(p => p.value === opt.value)?.color || 'primary'
            : 'neutral',
          startDecorator: !isSelected
            ? Priorities.find(p => p.value === opt.value)?.icon
@@ -331,7 +338,9 @@ const FilterBuilderContent = ({
              key={opt.value}
              variant={isSelected ? 'solid' : 'soft'}
              color={isSelected ? (opt.color ?? 'primary') : 'neutral'}
-              startDecorator={isSelected ? <Check sx={{ fontSize: 14 }} /> : null}
+              startDecorator={
+                isSelected ? <Check sx={{ fontSize: 14 }} /> : null
+              }
              onClick={() => toggleDueDate(opt.value)}
              sx={{
                cursor: 'pointer',
@@ -375,7 +384,9 @@ const FilterBuilderContent = ({
                      }}
                    />
                  }
-                  endDecorator={isSelected ? <Check sx={{ fontSize: 12 }} /> : null}
+                  endDecorator={
+                    isSelected ? <Check sx={{ fontSize: 12 }} /> : null
+                  }
                  onClick={() => toggleValue('label', lbl.id)}
                  sx={{
                    cursor: 'pointer',
@@ -425,12 +436,14 @@ const FilterBuilderContent = ({
            key={op.value}
            size='sm'
            variant={
-              selections.points.operator === op.value && selections.points.active
+              selections.points.operator === op.value &&
+              selections.points.active
                ? 'solid'
                : 'soft'
            }
            color={
-              selections.points.operator === op.value && selections.points.active
+              selections.points.operator === op.value &&
+              selections.points.active
                ? 'primary'
                : 'neutral'
            }
--- a/src/views/Chores/components/FilterSection.jsx
+++ b/src/views/Chores/components/FilterSection.jsx
@@ -1,14 +1,15 @@
 import { Box } from '@mui/joy'
+
 import CustomFilterChips from './CustomFilterChips'

 const FilterSection = ({
-  savedFilters,
  activeFilterId,
-
  onFilterClick,
+
  onFilterDelete,
-  onFilterPin,
  onFilterEdit,
+  onFilterPin,
+  savedFilters,
 }) => {
  return (
    <>
--- a/src/views/Chores/components/MultiSelectToolbar.jsx
+++ b/src/views/Chores/components/MultiSelectToolbar.jsx
@@ -32,6 +32,7 @@ import {
 import moment from 'moment'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+
 import AppModal from '../../../components/common/AppModal'
 import KeyboardShortcutHint from '../../../components/common/KeyboardShortcutHint'
 import LABEL_COLORS, {
@@ -134,26 +135,26 @@ const selectableChipSx = {

 const MultiSelectToolbar = ({
  isVisible,
-  selectedCount,
-  onSelectAll,
+  labels = [],
+  members = [],
+  onArchive,
  onClear,
  onComplete,
-  onSkip,
-  onArchive,
  onDelete,
  onMoveToProject,
-  onSetDueDate,
+  onSelectAll,
  onSetAssignee,
+  onSetDueDate,
  onSetPriority,
-  onToggleLabel,
+  onSkip,
  // Shape produced by useMultiSelect.getSelectionSummary — drives which value
  // each control shows as current, and which labels can be added vs removed.
-  selectionSummary,
-  members = [],
-  labels = [],
+  onToggleLabel,
  projects = [],
-  showKeyboardShortcuts,
  selectAllDisabled,
+  selectedCount,
+  selectionSummary,
+  showKeyboardShortcuts,
 }) => {
  const { t } = useTranslation('chores')
  const [moreOpen, setMoreOpen] = useState(false)
--- a/src/views/Chores/components/MyChoreHeader.jsx
+++ b/src/views/Chores/components/MyChoreHeader.jsx
@@ -1,10 +1,11 @@
 import { FilterAlt } from '@mui/icons-material'
 import { Box, Stack, Typography } from '@mui/joy'
+
 import { getIconComponent } from '../../../utils/ProjectIcons.jsx'

 const MyChoreHeader = ({
-  activeFilterId,
  activeFilter,
+  activeFilterId,
  selectedProject,
  tempFilter,
  tempFilterMeta,
--- a/src/views/Chores/hooks/useChoreActions.js
+++ b/src/views/Chores/hooks/useChoreActions.js
@@ -1,6 +1,8 @@
 import { useQueryClient } from '@tanstack/react-query'
 import moment from 'moment'
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import {
  useArchiveChore,
  useUnArchiveChore,
@@ -22,7 +24,6 @@ import {
 } from '../../../utils/Fetcher'
 import { offlineDB } from '../../../utils/OfflineDB'
 import { isOfflineFeatureEnabled } from '../../../utils/OfflineFeatureToggle'
-import { useTranslation } from 'react-i18next'

 // Effectively "can this action be queued offline?" — requires the offline
 // feature, otherwise there is no command queue to replay it later.
@@ -55,22 +56,22 @@ const expectOk = async request => {

 export const useChoreActions = ({
  chores,
-  filteredChores,
-  setChores,
-  setFilteredChores,
-  userProfile,
-  impersonatedUser,
-  showSuccess,
-  showError,
-  showWarning,
-  showUndo,
-  refetchChores,
-  setConfirmModelConfig,
-  openModal,
-  closeModal,
-  modalChore,
-  getSelectedChoresData,
  clearSelection,
+  closeModal,
+  filteredChores,
+  getSelectedChoresData,
+  impersonatedUser,
+  modalChore,
+  openModal,
+  refetchChores,
+  setChores,
+  setConfirmModelConfig,
+  setFilteredChores,
+  showError,
+  showSuccess,
+  showUndo,
+  showWarning,
+  userProfile,
 }) => {
  const { t } = useTranslation('chores')
  const queryClient = useQueryClient()
--- a/src/views/Chores/hooks/useChoreModals.js
+++ b/src/views/Chores/hooks/useChoreModals.js
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react'
+import { useCallback, useState } from 'react'

 export const useChoreModals = () => {
  const [activeModal, setActiveModal] = useState(null)
--- a/src/views/ChoresOverview.jsx
+++ b/src/views/ChoresOverview.jsx
@@ -9,7 +9,6 @@ import {
  SearchRounded,
  Warning,
 } from '@mui/icons-material'
-import { useTranslation } from 'react-i18next'
 import {
  Avatar,
  Button,
@@ -25,6 +24,7 @@ import {
 } from '@mui/joy'
 import moment from 'moment'
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'

 import { GetAllUsers, GetChores, MarkChoreComplete } from '../utils/Fetcher'
--- a/src/views/Error.jsx
+++ b/src/views/Error.jsx
@@ -11,6 +11,7 @@ import {
 } from '@mui/icons-material'
 import { Box, Button, IconButton, Snackbar, Typography } from '@mui/joy'
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link, useRouteError } from 'react-router-dom'

 import {
@@ -18,7 +19,6 @@ import {
  formatErrorReport,
 } from '../service/ErrorReportService'
 import ErrorReportModal from './Modals/ErrorReportModal'
-import { useTranslation } from 'react-i18next'

 const getErrorKind = error => {
  if (!error)
@@ -274,7 +274,8 @@ const Error = () => {
          textAlign='center'
          sx={{ color: 'text.tertiary', mb: 1.5 }}
        >
-          If this keeps happening, send us a report please consider sending us report so we can take a look. 
+          If this keeps happening, send us a report please consider sending us
+          report so we can take a look.
        </Typography>

        {(error?.stack || message) && (
--- a/src/views/Filters/FilterView.jsx
+++ b/src/views/Filters/FilterView.jsx
@@ -33,6 +33,7 @@ import {
 } from '@mui/joy'
 import Fuse from 'fuse.js'
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useNavigate, useSearchParams } from 'react-router-dom'

 import EmptyState from '../../components/common/EmptyState'
@@ -52,7 +53,6 @@ import {
  useToggleFilterPin,
  useUpdateFilter,
 } from './FilterQueries'
-import { useTranslation } from 'react-i18next'

 const FilterCardContent = ({
  filter,
--- a/src/views/History/ChoreHistory.jsx
+++ b/src/views/History/ChoreHistory.jsx
@@ -1,11 +1,12 @@
+import '@meauxt/react-swipeable-list/dist/styles.css'
+
 import {
-  Type as ListType,
  SwipeableList,
  SwipeableListItem,
  SwipeAction,
  TrailingActions,
+  Type as ListType,
 } from '@meauxt/react-swipeable-list'
-import '@meauxt/react-swipeable-list/dist/styles.css'
 import {
  Analytics,
  CalendarMonth,
@@ -31,7 +32,9 @@ import EditIcon from '@mui/icons-material/Edit'
 import { Box, Card, Container, Grid, Sheet, Typography } from '@mui/joy'
 import moment from 'moment'
 import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
+
 import EmptyState from '../../components/common/EmptyState'
 import FilterBar from '../../components/common/FilterBar'
 import { useLocalization } from '../../contexts/LocalizationContext'
@@ -52,7 +55,6 @@ import HistoryDetailModal from '../Modals/HistoryDetailModal'
 import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
 import NoteViewerModal from '../Modals/Inputs/NoteViewerModal'
 import HistoryCard from './HistoryCard'
-import { useTranslation } from 'react-i18next'

 const ChoreHistory = () => {
  const { t } = useTranslation('history')
@@ -66,7 +68,7 @@ const ChoreHistory = () => {
  const [showMoreInfoId, setShowMoreInfoId] = useState(null)
  const [noteViewerConfig, setNoteViewerConfig] = useState({ isOpen: false })
  const [detailModalConfig, setDetailModalConfig] = useState({ isOpen: false })
-  const { showSuccess, showError } = useNotification()
+  const { showError, showSuccess } = useNotification()
  // React Query hooks
  const { data: choreHistoryData, isLoading } = useChoreHistory(choreId)
  const { data: circleMembersData } = useCircleMembers()
@@ -177,11 +179,11 @@ const ChoreHistory = () => {
  )

  const {
-    filteredData: filteredHistory,
-    activeFilters,
-    setFilter,
-    clearAll,
    activeFilterCount,
+    activeFilters,
+    clearAll,
+    filteredData: filteredHistory,
+    setFilter,
  } = useFilter(choreHistory, filterDefs)

  const sortedHistory = useMemo(
--- a/src/views/History/HistoryCard.jsx
+++ b/src/views/History/HistoryCard.jsx
@@ -11,6 +11,7 @@ import {
 import { Avatar, Box, Card, Chip, IconButton, Typography } from '@mui/joy'
 import moment from 'moment'
 import { useTranslation } from 'react-i18next'
+
 import { useLocalization } from '../../contexts/LocalizationContext'
 import { TASK_COLOR } from '../../utils/Colors.jsx'
 import PendingBadge from '../components/PendingBadge'
@@ -34,24 +35,32 @@ const stripHtmlTags = html => {
 }

 const statusConfig = {
-  0: { labelKey: 'status.inProgress',      color: 'primary', icon: <AccessTime /> },
-  1: { labelKey: 'status.completed',       color: 'success', icon: <Check /> },
-  2: { labelKey: 'status.skipped',         color: 'warning', icon: <Redo /> },
-  3: { labelKey: 'status.pendingApproval', color: 'neutral', icon: <HourglassEmpty /> },
-  4: { labelKey: 'status.rejected',        color: 'danger',  icon: <ThumbDown /> },
-  5: { labelKey: 'status.missed',          color: 'danger',  icon: <RunningWithErrors /> },
-  6: { labelKey: 'status.rescheduled',     color: 'warning', icon: <Schedule /> },
+  0: { labelKey: 'status.inProgress', color: 'primary', icon: <AccessTime /> },
+  1: { labelKey: 'status.completed', color: 'success', icon: <Check /> },
+  2: { labelKey: 'status.skipped', color: 'warning', icon: <Redo /> },
+  3: {
+    labelKey: 'status.pendingApproval',
+    color: 'neutral',
+    icon: <HourglassEmpty />,
+  },
+  4: { labelKey: 'status.rejected', color: 'danger', icon: <ThumbDown /> },
+  5: {
+    labelKey: 'status.missed',
+    color: 'danger',
+    icon: <RunningWithErrors />,
+  },
+  6: { labelKey: 'status.rescheduled', color: 'warning', icon: <Schedule /> },
 }

 const HistoryCard = ({
  allHistory,
-  performers,
  historyEntry,
  index,
-  pendingCommands,
  onToggleActions,
-  onViewNote,
  onViewDetails,
+  onViewNote,
+  pendingCommands,
+  performers,
 }) => {
  const { t } = useTranslation('history')
  const { fmt } = useLocalization()
@@ -65,7 +74,7 @@ const HistoryCard = ({
  const actionDate = historyEntry.performedAt || historyEntry.updatedAt

  const getTimingLine = () => {
-    const { status, performedAt, dueDate } = historyEntry
+    const { dueDate, performedAt, status } = historyEntry
    if (!dueDate) return null

    if (status === 6 || status === 5) {
@@ -90,14 +99,18 @@ const HistoryCard = ({
  }

  const timingLine = getTimingLine()
-  const plainTextNotes = historyEntry.notes ? stripHtmlTags(historyEntry.notes) : ''
+  const plainTextNotes = historyEntry.notes
+    ? stripHtmlTags(historyEntry.notes)
+    : ''

  const metaTextParts = [
    fmt.dateTime(actionDate),
    historyEntry.completedBy !== historyEntry.assignedTo && assignedTo
      ? t('card.assignedTo', { name: assignedTo.displayName })
      : null,
-    historyEntry?.duration > 0 ? `⏱ ${formatTime(historyEntry.duration)}` : null,
+    historyEntry?.duration > 0
+      ? `⏱ ${formatTime(historyEntry.duration)}`
+      : null,
    historyEntry?.points > 0
      ? t('card.points', { count: historyEntry.points })
      : null,
@@ -120,7 +133,14 @@ const HistoryCard = ({
    >
      <Box sx={{ flex: 1, minWidth: 0, px: 2, py: 1.5 }}>
        {/* Status + timing chip */}
-        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.5 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            mb: 0.5,
+          }}
+        >
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
            <Avatar
              size='sm'
@@ -130,7 +150,11 @@ const HistoryCard = ({
            >
              {config.icon}
            </Avatar>
-            <Typography level='title-sm' fontWeight='lg' sx={{ color: `${config.color}.plainColor` }}>
+            <Typography
+              level='title-sm'
+              fontWeight='lg'
+              sx={{ color: `${config.color}.plainColor` }}
+            >
              {displayLabel}
            </Typography>
          </Box>
@@ -146,31 +170,58 @@ const HistoryCard = ({
        {/* Notes inline */}

        {plainTextNotes && (
-        <Card 
-          variant='soft'
-          color='neutral'
-          size='sm'
-          sx={{ mt: 0.5, whiteSpace: 'pre-wrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
-        >
-          <Typography
-            level='body-xs'
-            sx={{ color: 'text.secondary', fontStyle: 'italic', mb: 0.25, cursor: 'pointer' }}
-            onClick={e => { e.stopPropagation(); onViewNote?.(historyEntry.notes) }}
+          <Card
+            variant='soft'
+            color='neutral'
+            size='sm'
+            sx={{
+              mt: 0.5,
+              whiteSpace: 'pre-wrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
          >
-            {plainTextNotes.length > 80 ? `${plainTextNotes.slice(0, 80)}…` : plainTextNotes}
-          </Typography>
-        </Card>
+            <Typography
+              level='body-xs'
+              sx={{
+                color: 'text.secondary',
+                fontStyle: 'italic',
+                mb: 0.25,
+                cursor: 'pointer',
+              }}
+              onClick={e => {
+                e.stopPropagation()
+                onViewNote?.(historyEntry.notes)
+              }}
+            >
+              {plainTextNotes.length > 80
+                ? `${plainTextNotes.slice(0, 80)}…`
+                : plainTextNotes}
+            </Typography>
+          </Card>
        )}

        {/* Metadata strip: performer chip + date + extras */}
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mt: 0.5, flexWrap: 'wrap' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.75,
+            mt: 0.5,
+            flexWrap: 'wrap',
+          }}
+        >
          {performer && (
            <Chip
              size='sm'
              variant='soft'
              color='neutral'
              startDecorator={
-                <Avatar src={performer.image} alt={performer.displayName} sx={{ width: 14, height: 14 }} />
+                <Avatar
+                  src={performer.image}
+                  alt={performer.displayName}
+                  sx={{ width: 14, height: 14 }}
+                />
              }
            >
              {performer.displayName}
@@ -184,13 +235,19 @@ const HistoryCard = ({
        </Box>
      </Box>

-      <Box sx={{ display: 'flex', alignItems: 'center', pr: 0.5 }} onClick={e => e.stopPropagation()}>
+      <Box
+        sx={{ display: 'flex', alignItems: 'center', pr: 0.5 }}
+        onClick={e => e.stopPropagation()}
+      >
        {onToggleActions && (
          <IconButton
            color='neutral'
            variant='plain'
            size='sm'
-            onClick={e => { e.stopPropagation(); onToggleActions() }}
+            onClick={e => {
+              e.stopPropagation()
+              onToggleActions()
+            }}
          >
            <MoreVert sx={{ fontSize: 18 }} />
          </IconButton>
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -1,9 +1,9 @@
 import { Box, Button, Container, Typography } from '@mui/joy'
-import { useTranslation } from 'react-i18next'
 import { useEffect } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'

-import { useState } from 'react'
 import Logo from '../Logo'
 const Home = () => {
  const { t } = useTranslation('common')
--- a/src/views/Labels/LabelQueries.jsx
+++ b/src/views/Labels/LabelQueries.jsx
@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
+
 import { CreateLabel, GetLabels } from '../../utils/Fetcher'
 import { offlineDB } from '../../utils/OfflineDB'

--- a/src/views/Landing/DemoCalendar.jsx
+++ b/src/views/Landing/DemoCalendar.jsx
@@ -1,5 +1,6 @@
 import { Card, Grid, Typography } from '@mui/joy'
 import moment from 'moment'
+
 import CalendarMonthly from '../components/CalendarMonthly'

 const DemoCalendar = () => {
--- a/src/views/Landing/DemoNotificationTemplate.jsx
+++ b/src/views/Landing/DemoNotificationTemplate.jsx
@@ -1,4 +1,5 @@
 import { Card, Grid, Typography } from '@mui/joy'
+
 import NotificationTemplate from '../../components/NotificationTemplate'

 const DemoNotificationTemplate = () => {
--- a/src/views/Landing/Footer.jsx
+++ b/src/views/Landing/Footer.jsx
@@ -1,4 +1,3 @@
-import LogoSVG from '@/assets/logo.svg'
 import { Email, GitHub } from '@mui/icons-material'
 import {
  Box,
@@ -9,6 +8,9 @@ import {
  Link,
  Typography,
 } from '@mui/joy'
+
+import LogoSVG from '@/assets/logo.svg'
+
 import { version } from '../../../package.json'
 import DiscordIcon from '../../components/icons/DiscordIcon'
 import RedditIcon from '../../components/icons/RedditIcon'
@@ -333,7 +335,6 @@ const Footer = () => {
            <Typography level='body-sm' sx={{ color: 'text.secondary' }}>
              Version {version}
            </Typography>
-         
          </Box>
        </Box>
      </Container>
--- a/src/views/Landing/GettingStarted.jsx
+++ b/src/views/Landing/GettingStarted.jsx
@@ -11,7 +11,7 @@ import {
 import { Box, Button, Card, Container, Grid, Typography } from '@mui/joy'
 import { useNavigate } from 'react-router-dom'

-function StartOptionCard({ icon: Icon, title, description, button, index }) {
+function StartOptionCard({ button, description, icon: Icon, index, title }) {
  return (
    <Card
      data-aos='fade-up'
--- a/Show More
+++ b/Show More