Update TopToolbar.tsx

Author: thangqd

apps/geolibre-desktop/src/components/layout/TopToolbar.tsx

@@ -33,6 +33,8 @@ import {
   setMapillaryLabels,
   setEarthdataGisLabels,
   setOpenAerialMapLabels,
+  setArcGisHubLabels,
+  setOpenDataCatalogLabels,
   setHuggingFaceLabels,
   setSourceCoopLabels,
   setReverseGeocodeLabels,
@@ -45,6 +47,7 @@ import {
   PRECIPITATION_PLUGIN_ID,
   REVERSE_GEOCODE_PLUGIN_ID,
   EFFECTS_PLUGIN_ID,
+  openRightPanel,
 } from "@geolibre/plugins";
 import { Button, cn, Input } from "@geolibre/ui";
 import {
@@ -82,7 +85,7 @@ import {
   ZoomIn,
   ZoomOut,
 } from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { createAppAPI, getPluginManager, usePluginRegistry } from "../../hooks/usePlugins";
 import { useConsentGatedActions } from "../../hooks/useConsentGatedActions";
@@ -172,10 +175,12 @@ interface TopToolbarProps {
   // instance — two would not coordinate their in-flight "open recent" aborts.
   projectFiles: ProjectFileActions;
   onOpenDiagnostics: () => void;
+  onOpenProjectHistory: () => void;
   onToggleThemeMode: () => void;
   // Opens the Offline Basemap Extract panel, mounted in DesktopShell over the
   // map so it can stay non-modal (the map is interactive for drawing a bbox).
   onOpenBasemapExtract: () => void;
+  viewer?: boolean;
 }
 
 export function TopToolbar({
@@ -189,8 +194,10 @@ export function TopToolbar({
   collaboration,
   projectFiles,
   onOpenDiagnostics,
+  onOpenProjectHistory,
   onToggleThemeMode,
   onOpenBasemapExtract,
+  viewer = false,
 }: TopToolbarProps) {
   const { t, i18n } = useTranslation();
   // The reverse-geocode plugin lives in the framework-agnostic plugins package
@@ -299,6 +306,52 @@ export function TopToolbar({
       metaSource: t("openAerialMap.metaSource"),
       metaRaw: t("openAerialMap.metaRaw"),
     });
+    setArcGisHubLabels({
+      hint: t("arcgisHub.hint"),
+      searchPlaceholder: t("arcgisHub.searchPlaceholder"),
+      search: t("arcgisHub.search"),
+      searchCurrentView: t("arcgisHub.searchCurrentView"),
+      enterKeyword: t("arcgisHub.enterKeyword"),
+      loadMore: t("arcgisHub.loadMore"),
+      searching: t("arcgisHub.searching"),
+      loadingMore: t("arcgisHub.loadingMore"),
+      noResults: t("arcgisHub.noResults"),
+      searchError: t("arcgisHub.searchError"),
+      showing: (shown, total) => t("arcgisHub.showing", { shown, total }),
+      noDescription: t("arcgisHub.noDescription"),
+      add: t("arcgisHub.add"),
+      adding: (title) => t("arcgisHub.adding", { title }),
+      added: (title) => t("arcgisHub.added", { title }),
+      addError: t("arcgisHub.addError"),
+      zoom: t("arcgisHub.zoom"),
+      download: t("arcgisHub.download"),
+      preparing: (title) => t("arcgisHub.preparing", { title }),
+      downloading: (completed, total, title) =>
+        t("arcgisHub.downloading", { completed, total, title }),
+      downloadStarted: (title) => t("arcgisHub.downloadStarted", { title }),
+      downloadFirstLayer: (title, layerCount) =>
+        t("arcgisHub.downloadFirstLayer", { title, layerCount }),
+      downloadError: t("arcgisHub.downloadError"),
+      details: t("arcgisHub.details"),
+    });
+    setOpenDataCatalogLabels({
+      socrataHint: t("openDataCatalogs.socrataHint"),
+      ckanHint: t("openDataCatalogs.ckanHint"),
+      searchPlaceholder: (name) => t("openDataCatalogs.searchPlaceholder", { name }),
+      search: t("openDataCatalogs.search"),
+      enterKeyword: t("openDataCatalogs.enterKeyword"),
+      loadMore: t("openDataCatalogs.loadMore"),
+      searching: t("openDataCatalogs.searching"),
+      noResults: t("openDataCatalogs.noResults"),
+      showing: (shown, total) => t("openDataCatalogs.showing", { shown, total }),
+      noDescription: t("openDataCatalogs.noDescription"),
+      add: t("openDataCatalogs.add"),
+      details: t("openDataCatalogs.details"),
+      adding: (title) => t("openDataCatalogs.adding", { title }),
+      added: (title) => t("openDataCatalogs.added", { title }),
+      addError: t("openDataCatalogs.addError"),
+      searchError: t("openDataCatalogs.searchError"),
+    });
     setEarthdataGisLabels({
       hint: t("earthdataGis.hint"),
       searchPlaceholder: t("earthdataGis.searchPlaceholder"),
@@ -964,6 +1017,17 @@ export function TopToolbar({
     ),
   );
   const [addDataKind, setAddDataKind] = useState<AddDataKind | null>(null);
+  const [addDataTargetGroupId, setAddDataTargetGroupId] = useState<string | null>(null);
+  const addDataInitialLayerIdsRef = useRef<Set<string>>(new Set());
+  // Every path that opens the dialog outside the OPEN_ADD_DATA_EVENT listener
+  // (the Add Data menu, the command palette, the 3D-model button) is ungrouped,
+  // so it must drop any group target a previous open left behind — otherwise
+  // this session's layers would be swept into that stale, unrelated group when
+  // the dialog closes. Only the listener sets a target, and it sets both.
+  const openAddDataKind = useCallback((kind: AddDataKind) => {
+    setAddDataTargetGroupId(null);
+    setAddDataKind(kind);
+  }, []);
   // PostgreSQL prefill (saved connection / clicked table) from the Browser panel.
   const [addDataPostgres, setAddDataPostgres] = useState<OpenAddDataPostgres | undefined>(
     undefined,
@@ -986,6 +1050,10 @@ export function TopToolbar({
       // open a dialog whose backing service is compiled out.
       if (detail?.kind && !masHidesDataSource(detail.kind)) {
         setAddDataPostgres(detail.postgres);
+        setAddDataTargetGroupId(detail.groupId ?? null);
+        addDataInitialLayerIdsRef.current = new Set(
+          useAppStore.getState().layers.map((layer) => layer.id),
+        );
         setAddDataKind(detail.kind);
       }
     };
@@ -1180,7 +1248,7 @@ export function TopToolbar({
         id: `add.${kind}`,
         title: t("toolbar.command.addLayer", { name: t(titleKey) }),
         group: t("toolbar.commandGroup.addData"),
-        run: () => setAddDataKind(kind),
+        run: () => openAddDataKind(kind),
       }),
     ),
     {
@@ -1509,6 +1577,14 @@ export function TopToolbar({
       icon: Crosshair,
       run: () => setSetViewOpen(true),
     },
+    {
+      id: "view.comments",
+      title: "View Comments",
+      group: t("toolbar.commandGroup.view"),
+      keywords: "comments review threads notes annotations pins",
+      icon: MessageSquare,
+      run: () => openRightPanel("comments"),
+    },
     {
       id: "view.theme",
       title:
@@ -1629,10 +1705,27 @@ export function TopToolbar({
     },
   ];
 
+  // The viewer preset hides every authoring menu, so the surfaces that reach
+  // those commands without a menu go with them: the command palette
+  // (Ctrl/Cmd+K) and the cheat sheet (?) are not mounted, and the Help menu
+  // drops its entries for them (see `viewer` on HelpMenu). Otherwise a
+  // `layout=viewer` embed would still answer Ctrl+N with "New Project", or
+  // overwrite the host's project on Ctrl+S — exactly what the read-only chrome
+  // promises it cannot do.
+  //
+  // The shortcut layer is narrowed rather than switched off, because the View
+  // menu *does* stay visible in this mode: `view.*` is camera and theme work
+  // only, so dropping its keys would leave those items clickable but silently
+  // keyless. Every command carrying a `shortcut` is either `view.*` or
+  // `project.*`, so this is the whole authoring keyboard surface.
+  const shortcutCommands = useMemo(
+    () => (viewer ? commands.filter((command) => command.id.startsWith("view.")) : commands),
+    [commands, viewer],
+  );
   useGlobalShortcuts({
-    commands,
-    onOpenPalette: () => setCommandPaletteOpen(true),
-    onOpenShortcuts: () => setShortcutsOpen(true),
+    commands: shortcutCommands,
+    onOpenPalette: viewer ? undefined : () => setCommandPaletteOpen(true),
+    onOpenShortcuts: viewer ? undefined : () => setShortcutsOpen(true),
   });
 
   const toolbarButtonSize = compact ? "icon" : "sm";
@@ -1672,7 +1765,7 @@ export function TopToolbar({
         <Map className="h-4 w-4" />
         {showProjectInfo ? <span className="hidden sm:inline">{appTitle}</span> : null}
       </span>
-      {isMenuVisible(uiProfile, "project") && (
+      {!viewer && isMenuVisible(uiProfile, "project") && (
         <ProjectMenu
           chrome={chrome}
           collaborationEnabled={collaboration.enabled}
@@ -1681,11 +1774,13 @@ export function TopToolbar({
           onOpenFromUrl={() => projectFiles.setProjectUrlDialogOpen(true)}
           onOpenGallery={() => setGalleryDialogOpen(true)}
           onImportQgisProject={() => void projectFiles.handleImportQgisProject()}
+          onImportArcgisProject={() => void projectFiles.handleImportArcgisProject()}
           onOpenRecent={(path) => {
             void projectFiles.handleOpenRecent(path).then((error) => {
               if (error) projectFiles.setActionError(error);
             });
           }}
+          onOpenHistory={onOpenProjectHistory}
           onSave={() => void projectFiles.handleSave()}
           onSaveAs={() => void projectFiles.handleSaveAs()}
           onDuplicate={() => projectFiles.handleDuplicate()}
@@ -1697,7 +1792,7 @@ export function TopToolbar({
           onOpenOfflineBasemap={onOpenBasemapExtract}
         />
       )}
-      {isMenuVisible(uiProfile, "edit") && (
+      {!viewer && isMenuVisible(uiProfile, "edit") && (
         <EditMenu chrome={chrome} mapControllerRef={mapControllerRef} />
       )}
       {isMenuVisible(uiProfile, "view") && (
@@ -1741,20 +1836,20 @@ export function TopToolbar({
         onSaveCurrentProject={projectFiles.handleSave}
         onProjectCreated={resetRuntimeControlsForNewProject}
       />
-      {isMenuVisible(uiProfile, "addData") && (
+      {!viewer && isMenuVisible(uiProfile, "addData") && (
         <AddDataMenu
           chrome={chrome}
           addLayer={addLayer}
           osmPbfBusy={osmPbf.busy}
-          onSetAddDataKind={setAddDataKind}
+          onSetAddDataKind={openAddDataKind}
           onAddGltfModel={() => {
             setAddDataDeckVizKind("scenegraph");
-            setAddDataKind("deckgl-viz");
+            openAddDataKind("deckgl-viz");
           }}
           onOpenOsmPbfDialog={() => osmPbf.setDialogOpen(true)}
         />
       )}
-      {isMenuVisible(uiProfile, "processing") && (
+      {!viewer && isMenuVisible(uiProfile, "processing") && (
         <ProcessingMenu
           chrome={chrome}
           earthEnginePanel={panels.earthEngine}
@@ -1766,6 +1861,7 @@ export function TopToolbar({
       {isMenuVisible(uiProfile, "controls") && (
         <ControlsMenu
           chrome={chrome}
+          viewer={viewer}
           controlsVisible={controlsVisible}
           panels={panels}
           effectsActive={isActive(EFFECTS_PLUGIN_ID)}
@@ -1790,7 +1886,7 @@ export function TopToolbar({
           onOpenRecordVideo={() => setRecordVideoOpen(true)}
         />
       )}
-      {isMenuVisible(uiProfile, "plugins") && (
+      {!viewer && isMenuVisible(uiProfile, "plugins") && (
         <PluginsMenu
           chrome={chrome}
           appApi={appApi}
@@ -1805,18 +1901,20 @@ export function TopToolbar({
       {/* Top-level toolbar menus registered by built-in plugins via
           app.registerToolbarMenu(); external plugin menus render after Help
           (below). Renders nothing when none exist. */}
-      <PluginToolbarMenus chrome={chrome} placement="builtin" />
-      <SettingsDialog
-        buttonClassName={toolbarButtonClass}
-        buttonSize={toolbarButtonSize}
-        iconClassName={toolbarIconClassName}
-        mapControllerRef={mapControllerRef}
-        showLabels={showLabels}
-        onOpenManagePlugins={() => setManagePluginsOpen(true)}
-        profilePlugins={profilePlugins}
-        themeMode={themeMode}
-        onToggleThemeMode={onToggleThemeMode}
-      />
+      {!viewer ? <PluginToolbarMenus chrome={chrome} placement="builtin" /> : null}
+      {!viewer ? (
+        <SettingsDialog
+          buttonClassName={toolbarButtonClass}
+          buttonSize={toolbarButtonSize}
+          iconClassName={toolbarIconClassName}
+          mapControllerRef={mapControllerRef}
+          showLabels={showLabels}
+          onOpenManagePlugins={() => setManagePluginsOpen(true)}
+          profilePlugins={profilePlugins}
+          themeMode={themeMode}
+          onToggleThemeMode={onToggleThemeMode}
+        />
+      ) : null}
       {/* No plugin marketplace in the Mac App Store build (all its entry
           points are hidden too; this keeps the install surface out of the
           bundle). */}
@@ -1832,16 +1930,24 @@ export function TopToolbar({
         onOpenChange={setPrintLayoutOpen}
         mapControllerRef={mapControllerRef}
       />
-      <FieldCollectionDialog
-        open={fieldCollectionOpen}
-        onOpenChange={setFieldCollectionOpen}
-        mapControllerRef={mapControllerRef}
-      />
-      <GpsTrackingDialog
-        open={gpsTrackingOpen}
-        onOpenChange={setGpsTrackingOpen}
-        mapControllerRef={mapControllerRef}
-      />
+      {/* Field Collection and GPS Tracking add features and layers to the
+          project, so they follow the Controls menu entries that open them out
+          of the read-only viewer preset. Record Tour and Record Video below
+          only read the map, so they stay. */}
+      {!viewer && (
+        <FieldCollectionDialog
+          open={fieldCollectionOpen}
+          onOpenChange={setFieldCollectionOpen}
+          mapControllerRef={mapControllerRef}
+        />
+      )}
+      {!viewer && (
+        <GpsTrackingDialog
+          open={gpsTrackingOpen}
+          onOpenChange={setGpsTrackingOpen}
+          mapControllerRef={mapControllerRef}
+        />
+      )}
       <RecordTourDialog
         open={recordTourOpen}
         onOpenChange={setRecordTourOpen}
@@ -1896,6 +2002,7 @@ export function TopToolbar({
       {isMenuVisible(uiProfile, "help") && (
         <HelpMenu
           chrome={chrome}
+          viewer={viewer}
           diagnosticsErrorCount={diagnosticsErrorCount}
           onOpenCommandPalette={() => setCommandPaletteOpen(true)}
           onOpenShortcuts={() => setShortcutsOpen(true)}
@@ -1909,15 +2016,25 @@ export function TopToolbar({
       )}
       {/* External plugin toolbar menus render after Help so third-party menus
           sit at the end of the banner, past the built-in menus. */}
-      <PluginToolbarMenus chrome={chrome} placement="external" />
+      {!viewer ? <PluginToolbarMenus chrome={chrome} placement="external" /> : null}
       <AddDataDialog
         kind={addDataKind}
         mapControllerRef={mapControllerRef}
         initialDeckVizKind={addDataDeckVizKind}
         initialPostgres={addDataPostgres}
         onOpenChange={(open: boolean) => {
           if (!open) {
+            if (addDataTargetGroupId) {
+              const state = useAppStore.getState();
+              const addedIds = state.layers
+                .filter((layer) => !addDataInitialLayerIdsRef.current.has(layer.id))
+                .map((layer) => layer.id);
+              if (addedIds.length > 0) {
+                state.moveLayersToGroup(addedIds, addDataTargetGroupId);
+              }
+            }
             setAddDataKind(null);
+            setAddDataTargetGroupId(null);
             setAddDataDeckVizKind(undefined);
             setAddDataPostgres(undefined);
           }
@@ -1933,16 +2050,20 @@ export function TopToolbar({
         renderTrigger={false}
         onOpenChange={setAboutOpen}
       />
-      <CommandPalette
-        open={commandPaletteOpen}
-        commands={commands}
-        onOpenChange={setCommandPaletteOpen}
-      />
-      <KeyboardShortcutsDialog
-        open={shortcutsOpen}
-        commands={commands}
-        onOpenChange={setShortcutsOpen}
-      />
+      {!viewer && (
+        <CommandPalette
+          open={commandPaletteOpen}
+          commands={commands}
+          onOpenChange={setCommandPaletteOpen}
+        />
+      )}
+      {!viewer && (
+        <KeyboardShortcutsDialog
+          open={shortcutsOpen}
+          commands={commands}
+          onOpenChange={setShortcutsOpen}
+        />
+      )}
       <div className="ms-auto flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
         <Button
           aria-label={