Add Update section to Settings page as toast fallback

[Copilot]

• Understand existing code structure
• Update useAppUpdateAvailable.ts to return { needsUpdate, applyUpdate }
• Add "Update" section to Settings.tsx that conditionally renders when needsUpdate is true
• Extract SettingsSection wrapper component to consolidate repeating section + SectionHeader + card div pattern
• Fix != null (loose equality) for storage null checks — guard clause before storagePercent eliminates duplicate check
• Extract section bodies into their own components (LocationsSection, StorageSectionBody, UpdateSectionBody, AboutSectionBody)
• Add dontToast = false parameter to useAppUpdateAvailable; UpdateSectionBody passes true to suppress toast
• Move useAppUpdateAvailable call from Settings.tsx into UpdateSectionBody (self-contained)
• Always show Update section — "App is up to date" or reload button
• Wrap LocationsSectionBody inside SettingsSection in Settings.tsx
• Drop window. ref from confirm() in LocationsSection
• Replace alert() on delete failure with persistent error toast
• Replace inline <button> in UpdateSectionBody with shared Button component

Original prompt

Background

The app recently introduced a toast messaging system, and the "app update available" notification was moved to use a persistent info toast (via useAppUpdateAvailable hook in src/hooks/useAppUpdateAvailable.ts). This toast is dismissible, which means if a user dismisses it, they currently have no way to trigger the update again.

Goal

Add an "Update" section to the Settings page (src/pages/settings/Settings.tsx) that surfaces the app update UI inline, so a user can still apply a pending update even after dismissing the toast.

What to do

1. Update src/hooks/useAppUpdateAvailable.ts

The hook currently only handles showing the toast. It should also return needsUpdate and applyUpdate so consumers (like the Settings page) can read update state and trigger the update directly.

Refactor the hook to expose { needsUpdate, applyUpdate } in its return value (similar to what useServiceWorkerUpdate.ts already does), while keeping the toast behavior intact.

2. Update src/pages/settings/Settings.tsx

Add a new "Update" section (likely between "Storage" and "About", or at the top — use your best judgement for placement) that:

• Uses useAppUpdateAvailable() (or useServiceWorkerUpdate()) to get needsUpdate and applyUpdate.
• Conditionally renders an update card/row only when needsUpdate is true, showing:
  • A message like "A new version is available"
  • A button labeled "Reload" (or "Update") that calls applyUpdate()
• When no update is available, the section (or at least the card) should not be shown (i.e. don't show an empty section).

The UI should match the existing style of the Settings page (use bg-surface border border-default rounded-lg cards, SectionHeader, Icon, Tailwind classes consistent with the rest of the page).

Existing relevant files

• src/hooks/useAppUpdateAvailable.ts — toast-based update hook
• src/hooks/useServiceWorkerUpdate.ts — lower-level hook exposing { needsUpdate, applyUpdate }
• src/pages/settings/Settings.tsx — the Settings page to update
• src/components/SectionHeader.tsx — used for section titles in Settings
• src/components/Icon.tsx — icon component used throughout Settings

Notes

• Do not remove the toast notification from useAppUpdateAvailable — it should still show the toast as before.
• The Settings page update section is a fallback for users who dismissed the toast.
• Keep all existing sections (Locations, Storage, About) intact.

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	evchargetracker	feec08c	Commit Preview URL Branch Preview URL	Mar 04 2026, 11:56 AM

[vanister]

Should you handle null and undefined with != null?

[Copilot]

Done in 5b5a77b. The null check now uses != null (covers both null and undefined). It's a single guard clause at the top of StorageSectionBody, so storagePercent is computed after and only needs to check storageQuota > 0.

[vanister]

Move this into the update app section.

[Copilot]

Done in 2e220be. UpdateSectionBody now owns the hook call (useAppUpdateAvailable(true)). Settings.tsx no longer imports or calls it.

[vanister]

Let's always show this section and show an app is up to date or the reload button when there's a new version

[Copilot]

Done in 2e220be. The Update section always renders. UpdateSectionBody shows "App is up to date" with a check-circle icon when !needsUpdate, and the reload button when a new version is available.

[vanister]

Why is this location section not a child of settings section?

[Copilot]

Done in 2e220be. LocationsSection had its own <section> + <SectionHeader> from when it wasn't a SettingsSection child — that was the previous design where Locations didn't follow the card pattern. Now it's <SettingsSection title="Locations"><LocationsSectionBody /></SettingsSection> just like the other sections.

[vanister]

@copilot