Merge pull request #234 from donetick/eslint3

ran npm run lint:fix

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())

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)

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

e2e/tests/auth.spec.js

@@ -1,12 +1,14 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
-import { signUpViaUI, loginViaUI } from '../fixtures/auth.js'
+
+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 }, () =>
+  return Array.from(
-    chars[Math.floor(Math.random() * 26)],
+    { 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!',

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(

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 = () => {

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 = () => {

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,

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={{

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

src/components/animations/LoadingScreen.jsx

@@ -65,11 +65,7 @@ const LogoContainer = styled(Box)({
 
 import { useTranslation } from 'react-i18next'
 
-const LoadingScreen = ({
+const LoadingScreen = ({ message = null, showLogo = true, size = 'lg' }) => {
-  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>

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 = {

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 = () => {

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 = ({ 
+const SmoothCard = ({
-  children, 
-  onClick,
   animationDisabled = false,
-  ...props 
+  children,
+  onClick,
+  ...props
 }) => {
   if (animationDisabled) {
     return (

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)
 

src/components/common/AppModal.jsx

@@ -17,27 +17,27 @@ const WIDTH_BY_SIZE = {
 const AppModal = forwardRef(
   (
     {
-      open,
+      backdropBlur = true,
-      onClose,
       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,
+      size = 'md',
-      closeOnEscape = true,
-      backdropBlur = true,
-      maxHeight = '90dvh',
-      contentSx,
-      footerSx,
       sx,
+      title,
       unmountDelay = 180,
       ...modalProps
     },

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)
     }

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

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,
+  onOpenChange,
-  totalCount,
+  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,
+  resultCount,
-  onOpenChange,
   showTrigger = true,
+  totalCount,
 }) => {
   const [internalOpen, setInternalOpen] = useState(false)
   const isControlled = open !== undefined

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

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' } } }

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 = ({

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 }) => {

src/contexts/SSEContext.jsx

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react'
+
 import { useSSE } from '../hooks/useSSE'
 
 export const SSEContext = createContext({

src/hooks/NetworkManager.jsx

@@ -1,4 +1,5 @@
 import { Network } from '@capacitor/network'
+
 import { isOfflineFeatureEnabled } from '../utils/OfflineFeatureToggle'
 
 class NetworkManager {

src/hooks/useAcknowledgmentModal.js

@@ -36,4 +36,4 @@ const useAcknowledgmentModal = () => {
   }
 }
 
-export default useAcknowledgmentModal
+export default useAcknowledgmentModal

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)

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'

src/hooks/useConfirmationModal.js

@@ -40,4 +40,4 @@ const useConfirmationModal = () => {
   }
 }
 
-export default useConfirmationModal
+export default useConfirmationModal

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

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 (
-  if (raw.startsWith('/') || raw.startsWith('file://')) return Capacitor.convertFileSrc(raw)
+    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,

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,

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)

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 =>

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,

src/hooks/useSSEContext.js

@@ -1,4 +1,5 @@
 import { useContext } from 'react'
+
 import { SSEContext } from '../contexts/SSEContext'
 
 export const useSSEContext = () => {

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()

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'
 

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) => {

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])

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 */
+  }
 }

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 */
+      }
     }
   }
 }

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
 

src/service/VoiceInputService.js

@@ -113,9 +113,8 @@ class VoiceInputService {
   async isSupported() {
     if (this.isNative) {
       try {
-        const { SpeechRecognition } = await import(
+        const { SpeechRecognition } =
-          '@capacitor-community/speech-recognition'
+          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(
+      const { SpeechRecognition } =
-        '@capacitor-community/speech-recognition'
+        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(
+        ;({ SpeechRecognition } =
-          '@capacitor-community/speech-recognition'
+          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(
+    const { SpeechRecognition } =
-      '@capacitor-community/speech-recognition'
+      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(
+    const { SpeechRecognition } =
-      '@capacitor-community/speech-recognition'
+      await import('@capacitor-community/speech-recognition')
-    )
     try {
       await withTimeout(SpeechRecognition.stop(), NATIVE_CALL_TIMEOUT_MS)
     } catch {

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

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()

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) {

src/utils/DateFormatter.js

@@ -1,10 +1,6 @@
 import moment from 'moment'
 
-export const createDateFormatter = (
+export const createDateFormatter = (dateFormat, timeFormat, firstDayOfWeek) => {
-  dateFormat,
-  timeFormat,
-  firstDayOfWeek,
-) => {
   moment.updateLocale('en', {
     week: {
       dow: firstDayOfWeek,

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,
 }

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) {

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',

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)
     }

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
       }

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}`
-}
+}

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'

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

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'

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'

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:
+              message: t('server.dnsFailed'),
-                t('server.dnsFailed'),
             }
           }
           return {
@@ -119,16 +119,14 @@ const LoginSettings = () => {
         // no-cors also timed out → server/host truly unreachable
         return {
           ok: false,
-          message:
+          message: t('server.unreachable'),
-            t('server.unreachable'),
         }
       }
 
       // Fallback (should rarely hit)
       return {
         ok: false,
-        message:
+        message: t('server.unreachable'),
-          t('server.unreachable'),
       }
     }
   }
@@ -145,9 +143,7 @@ const LoginSettings = () => {
 
     if (!isValidURL(trimmedURL)) {
       setStatus('error')
-      setErrorMessage(
+      setErrorMessage(t('server.invalidUrl'))
-        t('server.invalidUrl'),
-      )
       return
     }
 

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={() => {

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 =
+        const message = errorData.message || t('mfaModal.invalidCode')
-          errorData.message || t('mfaModal.invalidCode')
         setError(message)
         onError?.(message)
       }
@@ -77,9 +76,7 @@ const MFAVerificationModal = ({
       size='md'
       title={t('mfaModal.title')}
       description={
-        isBackupCode
+        isBackupCode ? t('mfaModal.backupHint') : t('mfaModal.codeHint')
-          ? 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}

src/views/Authorization/Signup.jsx

@@ -39,8 +39,7 @@ const SignupView = () => {
     if (!result.success) {
       showError({
         title: 'Almost there',
-        message:
+        message: t('signupSignInFailed'),
-          t('signupSignInFailed'),
       })
       Navigate('/login')
       return

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()
 

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'>
+      <Typography level='h5'>{t('thing.triggerHint')}</Typography>
-        {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

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 }) => {

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)

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')

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={

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,
+  trailingActions,
-  children,
   // 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>

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')

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)

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,

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',

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)

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 = () => {

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(() => {

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,
 }) => {

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,
+  k,
-  title,
+  label,
   onCreateNewFilter,
+  onItemSelect,
+  selectedFilter,
+  selectedItem,
+  setFilter,
+  setSelectedItem,
+  title,
+  useChips,
 }) => {
   const { t } = useTranslation('chores')
   const [anchorEl, setAnchorEl] = useState(null)

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')

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 }}>

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,
+  modalChore,
-  onCompleteWithPastDate,
   onAssigneeChange,
-  onCompleteWithNote,
+  onChangeDueDate,
-  onNudge,
   onClose,
+  onCompleteWithNote,
+  onCompleteWithPastDate,
+  onNudge,
 }) => {
   const { t } = useTranslation('chores')
   return (

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 = [],
+  activeFilterId,
-  labels = [],
-  projects = [],
-  tempFilter,
-  tempFilterMeta,
   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,
+  labels = [],
-  // search
+  members = [],
-  searchTerm,
+  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)

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 =
+          const displayCount = filter.count > 99 ? '99+' : (filter.count ?? 0)
-            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={

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
+                isSelected ? (
-                  ? <Check sx={{ fontSize: 14 }} />
+                  <Check sx={{ fontSize: 14 }} />
-                  : (extra.startDecorator ?? null)
+                ) : (
+                  (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'
             }

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 (
     <>

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,
+  labels = [],
-  onSelectAll,
+  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,
+  onToggleLabel,
-  members = [],
-  labels = [],
   projects = [],
-  showKeyboardShortcuts,
   selectAllDisabled,
+  selectedCount,
+  selectionSummary,
+  showKeyboardShortcuts,
 }) => {
   const { t } = useTranslation('chores')
   const [moreOpen, setMoreOpen] = useState(false)

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,

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()

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)

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'

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) && (

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,

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(

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 /> },
+  0: { labelKey: 'status.inProgress', color: 'primary', icon: <AccessTime /> },
-  1: { labelKey: 'status.completed',       color: 'success', icon: <Check /> },
+  1: { labelKey: 'status.completed', color: 'success', icon: <Check /> },
-  2: { labelKey: 'status.skipped',         color: 'warning', icon: <Redo /> },
+  2: { labelKey: 'status.skipped', color: 'warning', icon: <Redo /> },
-  3: { labelKey: 'status.pendingApproval', color: 'neutral', icon: <HourglassEmpty /> },
+  3: {
-  4: { labelKey: 'status.rejected',        color: 'danger',  icon: <ThumbDown /> },
+    labelKey: 'status.pendingApproval',
-  5: { labelKey: 'status.missed',          color: 'danger',  icon: <RunningWithErrors /> },
+    color: 'neutral',
-  6: { labelKey: 'status.rescheduled',     color: 'warning', icon: <Schedule /> },
+    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 
+          <Card
-          variant='soft'
+            variant='soft'
-          color='neutral'
+            color='neutral'
-          size='sm'
+            size='sm'
-          sx={{ mt: 0.5, whiteSpace: 'pre-wrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+            sx={{
-        >
+              mt: 0.5,
-          <Typography
+              whiteSpace: 'pre-wrap',
-            level='body-xs'
+              overflow: 'hidden',
-            sx={{ color: 'text.secondary', fontStyle: 'italic', mb: 0.25, cursor: 'pointer' }}
+              textOverflow: 'ellipsis',
-            onClick={e => { e.stopPropagation(); onViewNote?.(historyEntry.notes) }}
+            }}
           >
-            {plainTextNotes.length > 80 ? `${plainTextNotes.slice(0, 80)}…` : plainTextNotes}
+            <Typography
-          </Typography>
+              level='body-xs'
-        </Card>
+              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>

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')

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'
 

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 = () => {

src/views/Landing/DemoNotificationTemplate.jsx

@@ -1,4 +1,5 @@
 import { Card, Grid, Typography } from '@mui/joy'
+
 import NotificationTemplate from '../../components/NotificationTemplate'
 
 const DemoNotificationTemplate = () => {

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>

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'