fix: make the Comments panel opt-in from Settings

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

@@ -1374,7 +1374,7 @@
       }
     });
     return () => setKmlFileImportHandler(null);
   }, [addImportedVectorLayers, confirmLargeVectorDataset, t]);
 
   const addDroppedPhotos = useCallback(
     (result: GeotaggedPhotoResult | null): number => {
@@ -1650,7 +1650,7 @@
       disposed = true;
       unlisten?.();
     };
   }, [
     clearDropMessageLater,
     finishDrop,
     addDroppedRasters,
@@ -1794,7 +1794,7 @@
         clearDropMessageLater();
       }
     },
     [
       clearDropMessageLater,
       finishDrop,
       addDroppedRasters,
@@ -2332,6 +2332,9 @@
               builtinVisible={layoutOptions.stylePanelVisible}
               builtinTitle={t("sharedRail.style")}
               builtinIcon={<SlidersHorizontal className="h-4 w-4" />}
+              // Enabling Comments from Settings adds it as a collapsed rail
+              // entry without hiding the Style workspace.
+              initialBuiltinExpanded={replaceStylePanelId === COMMENTS_PANEL_ID}
               // Mirror the standalone Style panel's autoCollapse triggers so the
               // notebook / story-map presentation collapses Style here too.
               // `autoCollapsedPanel` is omitted because it is always null in a

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

@@ -52,6 +52,7 @@ import {
   Locate,
   MapPinned,
   LayoutPanelTop,
+  MessageSquare,
   Moon,
   Palette,
   PanelLeft,
@@ -84,6 +85,7 @@ import {
 } from "../../hooks/useDesktopSettings";
 import { useLanguage } from "../../hooks/useLanguage";
 import { BROWSER_PANEL_ID } from "../../hooks/useRegisterBrowserPanel";
+import { COMMENTS_PANEL_ID } from "../../hooks/useRegisterCommentsPanel";
 import { useRightPanelState } from "../../hooks/useRightPanels";
 import type { ThemeMode } from "../../hooks/useThemeMode";
 import { isTauri } from "../../lib/is-tauri";
@@ -391,6 +393,7 @@ export function SettingsDialog({
   // persisted layout preference, so its Layout toggle acts on the live registry
   // state directly rather than through the draft settings.
   const browserPanelOpen = useRightPanelState().activeId === BROWSER_PANEL_ID;
+  const commentsPanelOpen = useRightPanelState().activeId === COMMENTS_PANEL_ID;
   // Show it collapsed on the shared Layers rail, matching its default state, so
   // re-enabling from Settings doesn't jump to an expanded panel that buries the
   // Layers panel.
@@ -402,6 +405,14 @@ export function SettingsDialog({
       closeRightPanel(BROWSER_PANEL_ID);
     }
   };
+  const toggleCommentsPanel = (show: boolean) => {
+    if (show) {
+      openRightPanel(COMMENTS_PANEL_ID);
+      collapseRightPanel(COMMENTS_PANEL_ID);
+    } else {
+      closeRightPanel(COMMENTS_PANEL_ID);
+    }
+  };
   // A field a deep-link asked us to focus once its section renders; cleared
   // after the focus lands so a later open without a focus request stays put.
   const [pendingFocus, setPendingFocus] = useState<SettingsFocusTarget | null>(null);
@@ -1264,6 +1275,13 @@ export function SettingsDialog({
               >
                 {t("settings.layout.showBrowserPanel")}
               </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem
+                checked={commentsPanelOpen}
+                onCheckedChange={(checked: boolean) => toggleCommentsPanel(checked === true)}
+                onSelect={(event: Event) => event.preventDefault()}
+              >
+                {t("settings.layout.showCommentsPanel")}
+              </DropdownMenuCheckboxItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem
                 onSelect={() => {
@@ -1738,6 +1756,16 @@ export function SettingsDialog({
                       <FolderTree className="h-4 w-4 text-muted-foreground" />
                       <span>{t("settings.layout.showBrowserPanel")}</span>
                     </label>
+                    <label className="flex items-center gap-3 rounded-md border p-3 text-sm">
+                      <input
+                        className="h-4 w-4"
+                        type="checkbox"
+                        checked={commentsPanelOpen}
+                        onChange={(event) => toggleCommentsPanel(event.target.checked)}
+                      />
+                      <MessageSquare className="h-4 w-4 text-muted-foreground" />
+                      <span>{t("settings.layout.showCommentsPanel")}</span>
+                    </label>
                   </div>
                   {showsAdvancedNotices(desktopSettings.uiProfile) ? (
                     <div className="rounded-md border bg-muted/40 p-3 text-xs text-muted-foreground">