diff --git a/packages/web/src/components/layout/Sidebar.tsx b/packages/web/src/components/layout/Sidebar.tsx index 8c4ddf1..4615861 100644 --- a/packages/web/src/components/layout/Sidebar.tsx +++ b/packages/web/src/components/layout/Sidebar.tsx @@ -2,6 +2,7 @@ import { Link, useMatchRoute } from "@tanstack/react-router"; import { AnimatePresence, motion } from "framer-motion"; import { Boxes, + Braces, Check, ChevronRight, ChevronsUpDown, @@ -21,6 +22,7 @@ import { HealthDot } from "@/components/shared/HealthDot"; import { useDemo } from "@/hooks/useDemo"; import { useHealthStatus } from "@/hooks/useHealthStatus"; import { useInstances } from "@/hooks/useInstances"; +import { useMetadata } from "@/hooks/useMetadata"; import { useTheme } from "@/hooks/useTheme"; import { COLOR } from "@/lib/constants"; @@ -42,6 +44,7 @@ export function Sidebar() { const { instances, active, activate } = useInstances(); const { theme, toggle } = useTheme(); const { demo, toggle: toggleDemo, mask } = useDemo(); + const { showMetadata, toggle: toggleMeta } = useMetadata(); const { data: health } = useHealthStatus(); const [switcherOpen, setSwitcherOpen] = useState(false); const switcherRef = useRef(null); @@ -285,7 +288,7 @@ export function Sidebar() { - {/* Theme toggle + footer */} + {/* Footer — version, demo, metadata, theme */}
)} + - - {metaExpanded && ( - -
- -
- - )} - - + Metadata + +
+ + )} + )} diff --git a/packages/web/src/components/workspaces/WorkspaceDetail.tsx b/packages/web/src/components/workspaces/WorkspaceDetail.tsx index 81b2216..a08d0f3 100644 --- a/packages/web/src/components/workspaces/WorkspaceDetail.tsx +++ b/packages/web/src/components/workspaces/WorkspaceDetail.tsx @@ -1,7 +1,6 @@ import { Link, useNavigate, useParams } from "@tanstack/react-router"; import { AnimatePresence, motion } from "framer-motion"; import { - ArrowLeft, Boxes, ChevronDown, CircleDot, @@ -14,6 +13,7 @@ import { } from "lucide-react"; import { useState } from "react"; import { useDeleteWorkspace, useQueueStatus, useScheduleDream, useWorkspace } from "@/api/queries"; +import { Breadcrumb } from "@/components/layout/Breadcrumb"; import { ConfirmDialog } from "@/components/shared/ConfirmDialog"; import { ErrorAlert } from "@/components/shared/ErrorAlert"; import { JsonViewer } from "@/components/shared/JsonViewer"; @@ -22,6 +22,7 @@ import { Button } from "@/components/ui/button"; import { Body, Caption, PageTitle, SectionHeading } from "@/components/ui/typography"; import { ScheduleDreamModal } from "@/components/workspaces/ScheduleDreamModal"; import { useDemo } from "@/hooks/useDemo"; +import { useMetadata } from "@/hooks/useMetadata"; import { COLOR } from "@/lib/constants"; const NAV_SECTIONS = [ @@ -53,6 +54,7 @@ const NAV_SECTIONS = [ export function WorkspaceDetail() { const { mask } = useDemo(); + const { showMetadata } = useMetadata(); const { workspaceId } = useParams({ strict: false }) as { workspaceId: string }; const navigate = useNavigate(); @@ -74,14 +76,7 @@ export function WorkspaceDetail() { return (
- - - Workspaces - +
)} - {/* Metadata */} - - Metadata - - + {/* Metadata — global toggle */} + + {showMetadata && ( + +
+ Metadata + +
+ + )} +
)}
diff --git a/packages/web/src/context/MetadataContext.tsx b/packages/web/src/context/MetadataContext.tsx new file mode 100644 index 0000000..b383abe --- /dev/null +++ b/packages/web/src/context/MetadataContext.tsx @@ -0,0 +1,34 @@ +import { createContext, type ReactNode, useContext, useState } from "react"; + +const STORAGE_KEY = "openconcho:show-metadata"; + +interface MetadataContextValue { + showMetadata: boolean; + toggle: () => void; +} + +const MetadataContext = createContext(null); + +export function MetadataProvider({ children }: { children: ReactNode }) { + const [showMetadata, setShowMetadata] = useState( + () => localStorage.getItem(STORAGE_KEY) === "true", + ); + + function toggle() { + setShowMetadata((v) => { + const next = !v; + localStorage.setItem(STORAGE_KEY, String(next)); + return next; + }); + } + + return ( + {children} + ); +} + +export function useMetadataContext(): MetadataContextValue { + const ctx = useContext(MetadataContext); + if (!ctx) throw new Error("useMetadataContext must be used within MetadataProvider"); + return ctx; +} diff --git a/packages/web/src/hooks/useMetadata.ts b/packages/web/src/hooks/useMetadata.ts new file mode 100644 index 0000000..3901f9e --- /dev/null +++ b/packages/web/src/hooks/useMetadata.ts @@ -0,0 +1 @@ +export { useMetadataContext as useMetadata } from "@/context/MetadataContext"; diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx index 039f8da..7b1b7d1 100644 --- a/packages/web/src/main.tsx +++ b/packages/web/src/main.tsx @@ -3,6 +3,7 @@ import { createRouter, RouterProvider } from "@tanstack/react-router"; import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { DemoProvider } from "./context/DemoContext"; +import { MetadataProvider } from "./context/MetadataContext"; import { initDeepLinks } from "./lib/deep-link"; import { routeTree } from "./routeTree.gen"; import "./index.css"; @@ -37,7 +38,9 @@ createRoot(root).render( - + + + ,