project-nomad/admin/inertia/components
chriscrosstalk 1df6777098
fix(UI): Country Picker UX polish + auto-refresh stored files (#817)
Three UX issues from manual testing of #780 on NOMAD3.

1. Slider was unusable for multi-step zoom changes
   `setLoading(true)` fired immediately on every selection or maxzoom change,
   which disabled the slider until the request returned. Even with the 400ms
   debounce delaying the network call, the UI was locked the whole time.
   User couldn't drag through zoom levels to find the right one.

   Fix: bump debounce to 1500ms, move `setLoading(true)` inside the setTimeout
   so it only flips after the debounce expires. Slider stays interactive
   throughout the wait. Slider `disabled` now only ties to `downloading`
   (active extract dispatch), not `loading` (preflight in flight). The
   existing requestId stale-safe pattern handles concurrent changes.

2. Newly-downloaded maps didn't show in Stored Map Files until manual refresh
   `props.maps.regionFiles` is rendered server-side and passed through Inertia
   props; without a partial reload it stayed stale until the user navigated
   away and back.

   Fix: watch `useDownloads({ filetype: 'map' })` count via a ref. When the
   count drops (a download finished), trigger `router.reload({ only: ['maps'] })`
   to refresh just the maps prop. Existing pattern from elsewhere in the
   codebase.

3. Country picker didn't surface already-downloaded countries
   When a user re-opened "Choose Countries" after downloading UK, UK appeared
   unchecked with no indication it was already on disk.

   Fix: pass installed pmtiles filenames into the modal as a prop; parse with
   regex `^([a-z]{2})_[\w-]+_z\d+\.pmtiles$` to extract country codes from
   single-country extracts (matching MapService.buildRegionSlug's iso2 lowercase
   slug pattern). Render an "Installed" badge on those countries with a tooltip
   explaining they're re-selectable for redownload at a different zoom.

   Group / custom multi-country extracts don't reverse-map cleanly from
   filename and are skipped here. Could be a follow-up if useful.

Files:
  admin/inertia/components/CountryPickerModal.tsx
    - SINGLE_COUNTRY_FILENAME_RE: iso2 + flexible date + zoom
    - installedFilenames prop with default []
    - installedCountrySet derivation via useMemo
    - "Installed" badge rendering on country list rows
    - Debounce: 400ms -> 1500ms; setLoading inside setTimeout
    - Slider disabled: only on `downloading`
  admin/inertia/pages/settings/maps.tsx
    - import useEffect/useRef
    - destructure activeMapDownloads from useDownloads
    - useEffect on download count drop -> router.reload({ only: ['maps'] })
    - pass installedFilenames to CountryPickerModal

All three fixes tested end-to-end on NOMAD3.
2026-05-20 17:12:43 +00:00
..
chat fix(RAG): add start button in kb modal and ensure restart policy exists (#700) 2026-05-20 17:12:40 +00:00
file-uploader feat(KnowledgeBase): support up to 5 files upload of 100mb each per req 2026-04-03 14:26:50 -07:00
inputs feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
layout feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
maps feat(maps): add imperial/metric toggle for scale bar (#641) 2026-04-03 14:26:50 -07:00
markdoc feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
systeminfo feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
ActiveDownloads.tsx feat(downloads): rich progress, friendly names, cancel, and live status (#554) 2026-04-03 14:26:50 -07:00
ActiveEmbedJobs.tsx feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
ActiveModelDownloads.tsx fix(AI): allow cancelling in-progress model downloads and ensure consistent progress UI (#701) 2026-04-21 14:26:28 -07:00
Alert.tsx fix(UI): manual import map for DynamicIcon to avoid huge bundle of Tabler icons 2026-04-03 14:26:50 -07:00
BouncingDots.tsx feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
BouncingLogo.tsx feat: switch all PNG images to WEBP (#575) 2026-04-03 14:26:50 -07:00
BuilderTagSelector.tsx fix(UI): switch to tabler icons only for consistency 2026-01-31 20:39:49 -08:00
CategoryCard.tsx feat: curated content system overhaul 2026-02-11 15:44:46 -08:00
CountryPickerModal.tsx fix(UI): Country Picker UX polish + auto-refresh stored files (#817) 2026-05-20 17:12:43 +00:00
CuratedCollectionCard.tsx feat: curated content system overhaul 2026-02-11 15:44:46 -08:00
DebugInfoModal.tsx fix(UI): minor styling fixes for Night Ops 2026-03-20 11:46:10 -07:00
DownloadURLModal.tsx feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
DynamicIcon.tsx fix(UI): manual import map for DynamicIcon to avoid huge bundle of Tabler icons 2026-04-03 14:26:50 -07:00
Footer.tsx feat(UI): add Debug Info modal for bug reporting 2026-03-20 11:46:10 -07:00
HorizontalBarChart.tsx feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
InfoTooltip.tsx fix(UI): switch to tabler icons only for consistency 2026-01-31 20:39:49 -08:00
InstallActivityFeed.tsx fix(UI): constrain install activity feed height with auto-scroll (#611) 2026-04-03 14:26:50 -07:00
LoadingSpinner.tsx fix(ui): support proper size override of LoadingSpinner 2026-03-20 11:46:10 -07:00
MarkdocRenderer.tsx feat(docs): polish docs rendering with desert-themed components 2026-02-06 14:41:30 -08:00
ProgressBar.tsx feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
StorageProjectionBar.tsx feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
StyledButton.tsx feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
StyledModal.tsx feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
StyledSectionHeader.tsx feat: curated zim collections 2025-12-05 15:47:22 -08:00
StyledSidebar.tsx fix: cache docker list requests, aiAssistantName fetching, and ensure inertia used properly 2026-04-03 14:26:50 -07:00
StyledTable.tsx feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
ThemeToggle.tsx fix(UI): improve version display in Settings sidebar (#547) 2026-03-25 16:30:35 -07:00
TierSelectionModal.tsx fix(UI): use StyledButton in TierSelectionModal for consistency (#543) 2026-03-25 16:30:35 -07:00
UpdateServiceModal.tsx feat(UI): add Night Ops dark mode with theme toggle 2026-03-20 11:46:10 -07:00
WikipediaSelector.tsx fix(ui): support proper size override of LoadingSpinner 2026-03-20 11:46:10 -07:00