-
-
-
-
-
- Layers
-
- {isApplying && }
-
-
- {status === "ready" && leafIds.length > 0 && (
- <>
-
-
-
-
-
-
-
- )}
+ const layerHeaderActions = (
+ <>
+ {isApplying &&
}
+ {status === "ready" && leafIds.length > 0 && (
+ <>
-
+
+
+
+
+
+ )}
+
+ );
+
+ return (
+
}
+ rightOffset={`${rightOffset}rem`}
+ visible={visible}
+ onClose={toggleLayerSidebar}
+ closeLabel={t("viewer.layers.closeSidebar", "Close layers sidebar")}
+ headerActions={layerHeaderActions}
+ >
+ {status === "idle" && (
+
+
+ Open a PDF to view its layers.
+
-
+ )}
- {/* Content */}
-
-
- {status === "idle" && (
-
-
- Open a PDF to view its layers.
-
-
- )}
+ {status === "loading" && (
+
+
+
+ Loading layers...
+
+
+ )}
- {status === "loading" && (
-
-
-
- Loading layers...
-
-
- )}
+ {status === "error" && (
+
+
+ {loadError ?? "Failed to load layers."}
+
+
+ )}
- {status === "error" && (
-
-
- {loadError ?? "Failed to load layers."}
-
-
- )}
+ {status === "no-layers" && (
+
+
+ This document has no layers.
+
+
+ )}
- {status === "no-layers" && (
-
-
- This document has no layers.
-
-
- )}
-
- {status === "ready" && layers.length > 0 && (
-
- {layers.map((layer) => renderLayer({ ...layer, depth: 0 }))}
-
- )}
-
-
-
+ {status === "ready" && layers.length > 0 && (
+
+ {layers.map((layer) => renderLayer({ ...layer, depth: 0 }))}
+
+ )}
+
);
}
diff --git a/frontend/editor/src/core/components/viewer/SidebarBase.tsx b/frontend/editor/src/core/components/viewer/SidebarBase.tsx
new file mode 100644
index 0000000000..7cdcc34d97
--- /dev/null
+++ b/frontend/editor/src/core/components/viewer/SidebarBase.tsx
@@ -0,0 +1,121 @@
+import type { ReactNode } from "react";
+import { Box, ScrollArea, Text, TextInput } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { ActionIcon } from "@app/ui/ActionIcon";
+import "@app/components/viewer/SidebarBase.css";
+
+export const SIDEBAR_WIDTH = "15rem";
+
+export interface SidebarBaseProps {
+ /** Sidebar title string or React element. */
+ title: ReactNode;
+ /** Header icon (ReactNode or string icon name for LocalIcon). */
+ icon: ReactNode;
+ /** Right offset position string (e.g. "15rem" or "0rem"). */
+ rightOffset?: string;
+ /** Sidebar visibility flag. */
+ visible?: boolean;
+ /** Additional CSS class names. */
+ className?: string;
+ /** Callback fired when user clicks the header close button. */
+ onClose?: () => void;
+ /** Accessible label for the close button. */
+ closeLabel?: string;
+ /** Extra buttons/elements to render in the header right actions area. */
+ headerActions?: ReactNode;
+ /** Current search input term. */
+ searchTerm?: string;
+ /** Search input placeholder text. */
+ searchPlaceholder?: string;
+ /** Callback fired when search query changes. */
+ onSearchChange?: (value: string) => void;
+ /** Optional ref for the ScrollArea viewport element. */
+ viewportRef?: React.Ref
;
+ /** Sidebar content children. */
+ children: ReactNode;
+}
+
+export function SidebarBase({
+ title,
+ icon,
+ rightOffset = "0rem",
+ visible = true,
+ className = "",
+ onClose,
+ closeLabel = "Close sidebar",
+ headerActions,
+ searchTerm,
+ searchPlaceholder,
+ onSearchChange,
+ viewportRef,
+ children,
+}: SidebarBaseProps) {
+ if (!visible) {
+ return null;
+ }
+
+ const renderIcon =
+ typeof icon === "string" ? (
+
+ ) : (
+ icon
+ );
+
+ return (
+
+
+
+ {renderIcon}
+
+ {title}
+
+
+
+ {headerActions}
+ {onClose && (
+
+
+
+ )}
+
+