Refine map layout and preserve viewport state

2025-10-10 11:25:47 +02:00
parent 7af75a86ba
commit a015b60b8a
6 changed files with 324 additions and 71 deletions
@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useState } from 'react'
+import { Layers, Menu, PanelRightClose, PanelRightOpen } from 'lucide-react'
 import { useTranslation } from 'react-i18next'

 import { AppHeader } from '@/components/layout/AppHeader'
@@ -16,10 +17,12 @@ import {
  AlertDialogHeader,
  AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import { useHotspotFeed } from '@/hooks/useHotspotFeed'
-import { useLeafletHeatmap } from '@/hooks/useLeafletHeatmap'
+import { useLeafletHeatmap, type TileProvider } from '@/hooks/useLeafletHeatmap'
 import { useUserLocation } from '@/hooks/useUserLocation'
-import { distanceInKm, formatCoordinate, formatRelativeTime, formatTimestamp } from '@/lib/utils'
+import { cn, distanceInKm, formatCoordinate, formatRelativeTime, formatTimestamp } from '@/lib/utils'
 import type { LatLng } from '@/types/api'

 const RADIUS_KM = 1
@@ -28,6 +31,19 @@ export default function App() {
  const [pendingSpot, setPendingSpot] = useState<LatLng | null>(null)
  const [isConfirmOpen, setIsConfirmOpen] = useState(false)
  const [isConfirming, setIsConfirming] = useState(false)
+  const [tileProvider, setTileProvider] = useState<TileProvider>('openstreetmap')
+  const [isDetailsOpen, setIsDetailsOpen] = useState(() => {
+    if (typeof window === 'undefined') {
+      return false
+    }
+    return window.innerWidth >= 1024
+  })
+  const [isHeaderCollapsed, setIsHeaderCollapsed] = useState(() => {
+    if (typeof window === 'undefined') {
+      return false
+    }
+    return window.innerWidth < 768
+  })
  const { t, i18n } = useTranslation()
  const locale = i18n.language === 'fr' ? 'fr-FR' : 'en-US'
  const distanceFormatter = useMemo(
@@ -39,6 +55,14 @@ export default function App() {
    [locale],
  )

+  const tileOptions = useMemo(
+    () => [
+      { value: 'openstreetmap' as TileProvider, label: t('map.tiles.openstreetmap') },
+      { value: 'mapbox' as TileProvider, label: t('map.tiles.mapbox') },
+    ],
+    [t],
+  )
+
  const {
    status,
    error,
@@ -108,6 +132,7 @@ export default function App() {
      setPendingSpot(position)
      setIsConfirmOpen(true)
    },
+    tileProvider,
  })

  const handleConfirmSignal = useCallback(async () => {
@@ -207,26 +232,127 @@ export default function App() {
  const confirmationLat = pendingSpot ? formatCoordinate(pendingSpot.lat, locale) : '--'
  const confirmationLng = pendingSpot ? formatCoordinate(pendingSpot.lng, locale) : '--'
  const isDialogDisabled = !pendingSpot || isConfirming
+  const detailsToggleLabel = isDetailsOpen ? t('details.close') : t('details.open')
+  const detailsPanelClassName = cn(
+    'pointer-events-auto fixed inset-x-0 bottom-0 z-40 flex max-h-[85vh] w-full flex-col overflow-hidden rounded-t-3xl border border-border/70 bg-background/95 shadow-2xl backdrop-blur transition-transform duration-300 sm:left-auto sm:right-6 sm:top-24 sm:bottom-6 sm:max-h-[calc(100vh-8rem)] sm:w-[min(380px,calc(100vw-4rem))] sm:rounded-3xl',
+    isDetailsOpen
+      ? 'translate-y-0 sm:translate-x-0'
+      : 'translate-y-[calc(100%+1rem)] sm:translate-x-[calc(100%+2rem)]',
+  )

  return (
-    <div className="flex min-h-screen flex-col bg-background text-foreground">
-      <AppHeader
-        status={status}
-        statusLabel={statusLabel}
-        lastUpdatedLabel={lastUpdatedLabel}
-        onRefresh={handleRefresh}
-        onFocusHeat={handleFocusHeat}
-        onLocateUser={handleLocateUser}
-        onFocusMySignal={handleFocusMySignal}
-        disableRefresh={isLoading || isRefreshing || isPosting}
-        disableHeat={visibleDensity.length === 0}
-        disableLocate={!hasLocation}
-        disableMySignal={!myVisibleSignal}
+    <div className="relative min-h-screen w-full overflow-hidden bg-background text-foreground">
+      <MapViewport
+        containerRef={mapContainerRef}
+        isPosting={isPosting || isConfirming}
+        isLoading={isLoading}
+        confirmationHint={isConfirmOpen ? t('map.confirmationHint') : null}
+        className="min-h-screen"
      />

-      <main className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-6 px-4 py-6 sm:px-6">
-        <section className="flex flex-col gap-6 lg:flex-row">
-          <div className="order-2 flex w-full flex-col gap-4 lg:order-1 lg:max-w-sm">
+      <div className="pointer-events-none absolute inset-0 flex flex-col">
+        <div className="flex items-start justify-between gap-3 p-4 sm:p-6">
+          <div className="pointer-events-auto">
+            <AppHeader
+              status={status}
+              statusLabel={statusLabel}
+              lastUpdatedLabel={lastUpdatedLabel}
+              onRefresh={handleRefresh}
+              onFocusHeat={handleFocusHeat}
+              onLocateUser={handleLocateUser}
+              onFocusMySignal={handleFocusMySignal}
+              disableRefresh={isLoading || isRefreshing || isPosting}
+              disableHeat={visibleDensity.length === 0}
+              disableLocate={!hasLocation}
+              disableMySignal={!myVisibleSignal}
+              collapsed={isHeaderCollapsed}
+              onToggleCollapse={() => setIsHeaderCollapsed((prev) => !prev)}
+            />
+          </div>
+          <div className="pointer-events-auto hidden sm:flex">
+            <Button
+              variant="secondary"
+              size="icon"
+              onClick={() => setIsDetailsOpen((prev) => !prev)}
+              aria-label={detailsToggleLabel}
+              aria-expanded={isDetailsOpen}
+              className="h-11 w-11 rounded-full border border-border/60 bg-background/80 shadow-lg backdrop-blur hover:bg-background"
+            >
+              {isDetailsOpen ? <PanelRightClose className="h-4 w-4" /> : <PanelRightOpen className="h-4 w-4" />}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {!isDetailsOpen && (
+        <div className="pointer-events-auto fixed bottom-4 right-4 z-30 sm:hidden">
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => setIsDetailsOpen(true)}
+            aria-label={detailsToggleLabel}
+            className="flex items-center gap-2 rounded-full border border-border/60 bg-background/85 px-4 py-2 text-xs font-semibold uppercase tracking-wide shadow-lg backdrop-blur"
+          >
+            <Menu className="h-4 w-4" />
+            <span>{t('details.open')}</span>
+          </Button>
+        </div>
+      )}
+
+      <aside
+        className={detailsPanelClassName}
+        role="complementary"
+        aria-label={t('details.title')}
+        aria-hidden={!isDetailsOpen}
+      >
+        <header className="flex items-center justify-between gap-2 border-b border-border/60 bg-background/80 px-4 py-3 backdrop-blur">
+          <div className="flex flex-col">
+            <span className="text-sm font-semibold">{t('details.title')}</span>
+            <span className="text-xs text-muted-foreground">{t('details.description')}</span>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsDetailsOpen(false)}
+            aria-label={t('details.close')}
+            className="h-9 w-9 rounded-full border border-border/60 bg-muted/60 backdrop-blur hover:bg-muted"
+          >
+            <PanelRightClose className="h-4 w-4" />
+          </Button>
+        </header>
+        <ScrollArea className="flex-1">
+          <div className="flex flex-col gap-4 p-4 pb-6">
+            <div className="rounded-2xl border border-border/60 bg-muted/40 p-4 shadow-sm">
+              <div className="flex items-start gap-3">
+                <span className="flex h-10 w-10 items-center justify-center rounded-2xl border border-border/60 bg-background/80 text-primary">
+                  <Layers className="h-5 w-5" />
+                </span>
+                <div className="flex flex-1 flex-col">
+                  <span className="text-sm font-semibold">{t('map.tiles.title')}</span>
+                  <span className="text-xs text-muted-foreground">{t('map.tiles.subtitle')}</span>
+                </div>
+              </div>
+              <div className="mt-3 flex flex-wrap gap-2">
+                {tileOptions.map((option) => (
+                  <Button
+                    key={option.value}
+                    type="button"
+                    variant={tileProvider === option.value ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setTileProvider(option.value)}
+                    className={cn(
+                      'rounded-full border border-border/60 px-4 py-1 text-xs font-medium transition-colors',
+                      tileProvider === option.value
+                        ? 'shadow-sm'
+                        : 'bg-background/80 text-muted-foreground hover:bg-background',
+                    )}
+                  >
+                    {option.label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+
            <OverviewPanel
              nearbySignals={localTotals.points}
              uniqueContributors={localTotals.contributors}
@@ -248,17 +374,8 @@ export default function App() {
            />
            <ActivityPanel items={recentActivity} emptyMessage={t('activity.empty')} />
          </div>
-
-          <div className="order-1 flex w-full flex-1 lg:order-2">
-            <MapViewport
-              containerRef={mapContainerRef}
-              isPosting={isPosting || isConfirming}
-              isLoading={isLoading}
-              confirmationHint={isConfirmOpen ? t('map.confirmationHint') : null}
-            />
-          </div>
-        </section>
-      </main>
+        </ScrollArea>
+      </aside>

      <AlertDialog
        open={isConfirmOpen}