Refine map layout and preserve viewport state

client/src/components/layout/AppHeader.tsx

@@ -1,10 +1,11 @@
-import { Flame, Focus, LocateFixed, MapPin, RefreshCw } from 'lucide-react'
+import { ChevronDown, ChevronUp, Flame, Focus, LocateFixed, MapPin, RefreshCw } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { LanguageToggle } from '@/components/layout/LanguageToggle'
 import { ThemeToggle } from '@/components/layout/ThemeToggle'
+import { cn } from '@/lib/utils'
 import type { FeedStatus } from '@/types/api'
 
 interface AppHeaderProps {
@@ -19,6 +20,9 @@ interface AppHeaderProps {
   disableHeat: boolean
   disableLocate: boolean
   disableMySignal: boolean
+  collapsed: boolean
+  onToggleCollapse: () => void
+  className?: string
 }
 
 export function AppHeader({
@@ -33,42 +37,69 @@ export function AppHeader({
   disableHeat,
   disableLocate,
   disableMySignal,
+  collapsed,
+  onToggleCollapse,
+  className,
 }: AppHeaderProps) {
   const { t } = useTranslation()
   const isError = status === 'error'
 
+  const statusBadge = (
+    <Badge
+      variant="secondary"
+      className={cn(
+        'inline-flex items-center gap-2 rounded-full border border-border/60 bg-muted/60 px-3 py-1 text-xs font-medium uppercase tracking-wide',
+        collapsed && 'px-2 py-1 text-[11px] font-semibold',
+      )}
+    >
+      <span
+        className={`flex items-center gap-2 ${isError ? 'text-destructive' : 'text-primary'}`}
+        aria-live="polite"
+      >
+        <span className="relative block h-2.5 w-2.5 rounded-full bg-current">
+          <span className="absolute inset-[-0.35rem] rounded-full border border-current opacity-40 animate-status-pulse" />
+        </span>
+        {statusLabel}
+      </span>
+      {!collapsed && (
+        <span className="text-[10px] uppercase text-muted-foreground">
+          {t('header.badge.updated', { time: lastUpdatedLabel })}
+        </span>
+      )}
+    </Badge>
+  )
+
   return (
-    <header className="sticky top-0 z-40 border-b border-border/60 bg-background/80 backdrop-blur">
-      <div className="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6">
+    <header
+      className={cn(
+        'flex w-full max-w-[420px] flex-col gap-3 rounded-3xl border border-border/60 bg-background/90 p-4 text-sm shadow-xl backdrop-blur transition-all',
+        collapsed && 'max-w-[240px] bg-background/80 p-3',
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between gap-3">
         <div className="flex items-center gap-3">
           <span className="flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-primary/10 text-primary">
             <Flame className="h-5 w-5" />
           </span>
           <div className="flex flex-col">
-            <span className="text-lg font-semibold sm:text-xl">{t('app.name')}</span>
-            <span className="text-xs text-muted-foreground sm:text-sm">{t('app.tagline')}</span>
+            <span className="text-base font-semibold sm:text-lg">{t('app.name')}</span>
+            {!collapsed && <span className="text-xs text-muted-foreground sm:text-sm">{t('app.tagline')}</span>}
           </div>
         </div>
-        <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
-          <Badge
-            variant="secondary"
-            className={
-              'inline-flex items-center gap-2 rounded-full border border-border/60 bg-muted/60 px-3 py-1 text-xs font-medium uppercase tracking-wide'
-            }
-          >
-            <span
-              className={`flex items-center gap-2 ${isError ? 'text-destructive' : 'text-primary'}`}
-              aria-live="polite"
-            >
-              <span className="relative block h-2.5 w-2.5 rounded-full bg-current">
-                <span className="absolute inset-[-0.35rem] rounded-full border border-current opacity-40 animate-status-pulse" />
-              </span>
-              {statusLabel}
-            </span>
-            <span className="text-[10px] uppercase text-muted-foreground">
-              {t('header.badge.updated', { time: lastUpdatedLabel })}
-            </span>
-          </Badge>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onToggleCollapse}
+          aria-label={collapsed ? t('header.actions.expand') : t('header.actions.collapse')}
+          className="h-9 w-9 rounded-full border border-border/50 bg-muted/60 backdrop-blur hover:bg-muted"
+        >
+          {collapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
+        </Button>
+      </div>
+      <div className="flex items-center gap-2">{statusBadge}</div>
+      {!collapsed && (
+        <div className="flex flex-wrap items-center gap-2">
           <Button
             variant="ghost"
             size="icon"
@@ -108,7 +139,7 @@ export function AppHeader({
           <LanguageToggle />
           <ThemeToggle />
         </div>
-      </div>
+      )}
     </header>
   )
 }