Move theme, guide and GitHub actions onto the map

src/components/layout/MapToolbar.tsx

@@ -1,8 +1,18 @@
 "use client";
 
 import Image from "next/image";
-import { ChartLine, CircleQuestionMark, Settings } from "lucide-react";
+import {
+  ChartLine,
+  CircleQuestionMark,
+  Compass,
+  Moon,
+  Settings,
+  Sun,
+} from "lucide-react";
 import { SITE_NAME } from "@/lib/constants/site";
+import { requestGuide } from "@/lib/tour";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardTitle } from "@/components/ui/card";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
@@ -14,6 +24,73 @@ const PANELS = [
   { value: "help", label: "Help", Icon: CircleQuestionMark },
 ] as const;
 
+const REPO_URL = "https://github.com/EarthyScience/EarthPrints";
+
+function GitHubMark({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+      className={className}
+    >
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+    </svg>
+  );
+}
+
+const actionClass =
+  "max-md:size-12 max-md:rounded-full max-md:border-border max-md:bg-background max-md:shadow-lg dark:max-md:border-input";
+
+export function MapActions({ onBeforeGuide }: { onBeforeGuide: () => void }) {
+  const { isLight, toggleTheme } = useTheme();
+  const ThemeIcon = isLight ? Moon : Sun;
+
+  return (
+    <Card
+      role="group"
+      aria-label="Display and links"
+      className="[--card-spacing:--spacing(1)] max-md:contents"
+    >
+      <CardContent className="flex gap-1 max-md:flex-col max-md:gap-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={isLight ? "Switch to dark mode" : "Switch to light mode"}
+          onClick={toggleTheme}
+          className={actionClass}
+        >
+          <ThemeIcon className="size-4 max-md:size-5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Start the guide"
+          onClick={() => {
+            onBeforeGuide();
+            requestGuide();
+          }}
+          className={actionClass}
+        >
+          <Compass className="size-4 max-md:size-5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Source on GitHub"
+          nativeButton={false}
+          render={
+            <a href={REPO_URL} target="_blank" rel="noreferrer noopener" />
+          }
+          className={actionClass}
+        >
+          <GitHubMark className="size-3.5 max-md:size-4.5" />
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
 type MapToolbarProps = {
   openPanel: ToolbarPanel | null;
   onOpenPanelChange: (panel: ToolbarPanel | null) => void;

src/components/map/ReliefMap.tsx

@@ -30,7 +30,11 @@ import { useTheme } from "@/providers/ThemeProvider";
 import { useCellSeries } from "@/hooks/useCellSeries";
 import { useGeolocation } from "@/hooks/useGeolocation";
 import { useMapSettings } from "@/hooks/useMapSettings";
-import { MapToolbar, type ToolbarPanel } from "@/components/layout/MapToolbar";
+import {
+  MapActions,
+  MapToolbar,
+  type ToolbarPanel,
+} from "@/components/layout/MapToolbar";
 import { MapControls } from "@/components/map/MapControls";
 import { MapSearch } from "@/components/map/MapSearch";
 import { MapTour } from "@/components/map/MapTour";
@@ -303,6 +307,10 @@ export function ReliefMap() {
             </Alert>
           ) : null}
         </div>
+
+        <div className="pointer-events-auto ml-auto">
+          <MapActions onBeforeGuide={() => setOpenPanel(null)} />
+        </div>
       </div>
 
       <div

src/components/panels/HelpPanel.tsx

@@ -1,9 +1,7 @@
 "use client";
 
 import { Fragment } from "react";
-import { Compass } from "lucide-react";
 import { TEAM_MEMBERS } from "@/lib/constants/about";
-import { requestGuide } from "@/lib/tour";
 import { SiteMark } from "@/components/layout/MapToolbar";
 import { FloatingPanel } from "@/components/panels/FloatingPanel";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -18,16 +16,6 @@ import {
 } from "@/components/ui/item";
 import { Separator } from "@/components/ui/separator";
 
-const REPO_URL = "https://github.com/EarthyScience/EarthPrints";
-
-function GitHubMark() {
-  return (
-    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-    </svg>
-  );
-}
-
 function initials(name: string): string {
   return name
     .split(" ")
@@ -41,34 +29,11 @@ export function HelpPanel({ onClose }: { onClose: () => void }) {
   return (
     <FloatingPanel label="Help" onClose={onClose}>
       <div className="grid gap-4">
-        <div className="flex items-center gap-2 md:grid md:grid-cols-2">
-          <div className="mr-auto md:hidden [&_img]:size-7 [&_[data-slot=card-title]]:text-xl">
-            <SiteMark />
-          </div>
-          <Button
-            variant="outline"
-            onClick={() => {
-              onClose();
-              requestGuide();
-            }}
-          >
-            <Compass />
-            Guide
-          </Button>
-          <Button
-            variant="outline"
-            nativeButton={false}
-            render={
-              <a href={REPO_URL} target="_blank" rel="noreferrer noopener" />
-            }
-          >
-            <GitHubMark />
-            Source
-          </Button>
+        <div className="grid gap-4 md:hidden [&_img]:size-7 [&_[data-slot=card-title]]:text-xl">
+          <SiteMark />
+          <Separator />
         </div>
 
-        <Separator />
-
         {TEAM_MEMBERS.map((member, index) => (
           <Fragment key={member.name}>
             {index > 0 && <Separator />}

src/components/panels/SettingsPanel.tsx

@@ -1,17 +1,14 @@
 "use client";
 
-import { Moon, Sun } from "lucide-react";
 import {
   allYearsBytesFor,
   formatBytes,
   PATCH_WINDOW_SIZES,
   type PatchWindowSize,
 } from "@/lib/settings/patchWindow";
-import type { Theme } from "@/lib/theme";
 import type { TimeBasis } from "@/lib/zarr/localTime";
 import type { MapViewMode } from "@/types/map";
 import type { MapSettings } from "@/hooks/useMapSettings";
-import { useTheme } from "@/providers/ThemeProvider";
 import { FloatingPanel } from "@/components/panels/FloatingPanel";
 import { ViewModeTabs } from "@/components/map/ViewModeTabs";
 import {
@@ -28,11 +25,6 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { SegmentedTabs } from "@/components/ui/segmented-tabs";
 import { Switch } from "@/components/ui/switch";
 
-const THEMES = [
-  { value: "light", label: "Light", icon: Sun },
-  { value: "dark", label: "Dark", icon: Moon },
-] as const;
-
 const TIME_BASES = [
   { value: "local", label: "Local" },
   { value: "utc", label: "UTC" },
@@ -55,38 +47,24 @@ export function SettingsPanel({
   onViewModeChange,
   onClose,
 }: SettingsPanelProps) {
-  const { theme, toggleTheme } = useTheme();
-
   return (
     <FloatingPanel label="Settings" onClose={onClose}>
       <FieldGroup>
-        <FieldSet>
-          <FieldLegend variant="label">Appearance</FieldLegend>
-          <div className="grid grid-cols-2 gap-2">
+        <div className="grid grid-cols-2 gap-4">
+          <FieldSet>
+            <FieldLegend variant="label">Projection</FieldLegend>
             <ViewModeTabs value={viewMode} onChange={onViewModeChange} />
-            <SegmentedTabs<Theme>
-              value={theme}
-              onChange={(next) => {
-                if (next !== theme) toggleTheme();
-              }}
-              options={THEMES}
-              aria-label="Theme"
+          </FieldSet>
+          <FieldSet>
+            <FieldLegend variant="label">Plot hours in</FieldLegend>
+            <SegmentedTabs<TimeBasis>
+              value={settings.timeBasis}
+              onChange={settings.setTimeBasis}
+              options={TIME_BASES}
+              aria-label="Time basis"
             />
-          </div>
-        </FieldSet>
-
-        <FieldSeparator />
-
-        <Field orientation="horizontal">
-          <FieldLabel>Plot hours in</FieldLabel>
-          <SegmentedTabs<TimeBasis>
-            value={settings.timeBasis}
-            onChange={settings.setTimeBasis}
-            options={TIME_BASES}
-            aria-label="Time basis"
-            className="w-32 shrink-0"
-          />
-        </Field>
+          </FieldSet>
+        </div>
 
         <FieldSeparator />