Jerry
1324 lines
46 KiB
JavaScript
1324 lines
46 KiB
JavaScript
import { Fragment, useEffect, useRef, useState } from "react";
|
|
import {
|
|
Bot,
|
|
Boxes,
|
|
Check,
|
|
CircleCheck,
|
|
Code,
|
|
Copy,
|
|
Cuboid,
|
|
DraftingCompass,
|
|
FileBox,
|
|
Folder,
|
|
Layers3,
|
|
LoaderCircle,
|
|
Moon,
|
|
Package,
|
|
Route,
|
|
SlidersHorizontal,
|
|
Sun
|
|
} from "lucide-react";
|
|
import {
|
|
DEFAULT_VIEWER_SKILLS_INSTALL_COMMAND,
|
|
isViewerReleaseMajorMinorNewer,
|
|
isViewerReleaseNewer,
|
|
viewerGithubLatestReleaseApiUrl,
|
|
viewerGithubLatestReleaseUrl,
|
|
normalizeViewerDiscordUrl,
|
|
normalizeViewerGithubUrl,
|
|
viewerGithubReleaseUrl,
|
|
viewerSkillsInstallCommandFromText
|
|
} from "../../../shared/viewerConfig.mjs";
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbList,
|
|
BreadcrumbSeparator
|
|
} from "@/components/ui/breadcrumb";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuTrigger
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { SidebarTrigger } from "@/components/ui/sidebar";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger
|
|
} from "@/components/ui/tooltip";
|
|
import { cn } from "@/ui/utils";
|
|
import { copyTextToClipboard } from "@/ui/clipboard";
|
|
import {
|
|
themeSettingsSupportsSystemColorMode
|
|
} from "cadjs/lib/themeSettings";
|
|
import {
|
|
DARK_COLOR_SCHEME_ID,
|
|
LIGHT_COLOR_SCHEME_ID
|
|
} from "@/ui/colorScheme";
|
|
import {
|
|
ENTRY_ICON_KIND,
|
|
entryIconKind
|
|
} from "@/workbench/entryIconKind";
|
|
import { entryIconStatus } from "@/workbench/entryIconStatus";
|
|
import { ThemePresetDropdown } from "./ThemeSettingsPopover";
|
|
import FileAccessContextMenu from "./FileAccessContextMenu";
|
|
import {
|
|
fileKey,
|
|
listSidebarItems,
|
|
} from "@/workbench/sidebar";
|
|
import {
|
|
buildBreadcrumbNodes,
|
|
collapsedBreadcrumbNodes,
|
|
directoryTitle,
|
|
ellipsisBreadcrumbMenuDirectory
|
|
} from "@/workbench/breadcrumbs";
|
|
|
|
function fileSheetLabel(fileSheetKind) {
|
|
if (fileSheetKind === "dxf") {
|
|
return "DXF sheet";
|
|
}
|
|
if (fileSheetKind === "urdf") {
|
|
return "URDF sheet";
|
|
}
|
|
if (fileSheetKind === "srdf") {
|
|
return "SRDF sheet";
|
|
}
|
|
if (fileSheetKind === "sdf") {
|
|
return "SDF sheet";
|
|
}
|
|
if (fileSheetKind === "step") {
|
|
return "STEP sheet";
|
|
}
|
|
if (fileSheetKind === "implicit") {
|
|
return "Implicit CAD sheet";
|
|
}
|
|
return "file sheet";
|
|
}
|
|
|
|
function sourceFormatForEntry(entry, entrySourceFormat) {
|
|
const sourceFormat = typeof entrySourceFormat === "function"
|
|
? entrySourceFormat(entry)
|
|
: (entry?.kind || "");
|
|
return String(sourceFormat || "").trim().toLowerCase();
|
|
}
|
|
|
|
function entryStatusForMenu(entry, {
|
|
entrySourceFormat,
|
|
entryHasMesh,
|
|
entryHasDxf,
|
|
entryHasGcode,
|
|
entryHasUrdf,
|
|
activeGenerationFiles = [],
|
|
activeStepArtifactGenerationFile = "",
|
|
stepArtifactGenerationAvailable = true
|
|
}) {
|
|
const sourceFormat = sourceFormatForEntry(entry, entrySourceFormat);
|
|
const hasDxf = typeof entryHasDxf === "function" ? entryHasDxf(entry) : true;
|
|
const hasGcode = typeof entryHasGcode === "function" ? entryHasGcode(entry) : true;
|
|
const hasUrdf = typeof entryHasUrdf === "function" ? entryHasUrdf(entry) : true;
|
|
const hasMesh = typeof entryHasMesh === "function" ? entryHasMesh(entry) : true;
|
|
|
|
return entryIconStatus(entry, {
|
|
sourceFormat,
|
|
entryKey: fileKey(entry),
|
|
hasMesh,
|
|
hasDxf,
|
|
hasGcode,
|
|
hasUrdf,
|
|
activeGenerationFiles,
|
|
activeStepArtifactGenerationFile,
|
|
stepArtifactGenerationAvailable
|
|
});
|
|
}
|
|
|
|
const ENTRY_ICON_COMPONENTS = {
|
|
[ENTRY_ICON_KIND.LOADING]: LoaderCircle,
|
|
[ENTRY_ICON_KIND.ASSEMBLY]: Boxes,
|
|
[ENTRY_ICON_KIND.DXF]: DraftingCompass,
|
|
[ENTRY_ICON_KIND.GCODE]: Route,
|
|
[ENTRY_ICON_KIND.IMPLICIT]: Code,
|
|
[ENTRY_ICON_KIND.ROBOT]: Bot,
|
|
[ENTRY_ICON_KIND.STEP_PART]: Package,
|
|
[ENTRY_ICON_KIND.STL_MESH]: Cuboid,
|
|
[ENTRY_ICON_KIND.THREE_MF_MESH]: Layers3,
|
|
[ENTRY_ICON_KIND.GLB_MESH]: FileBox
|
|
};
|
|
|
|
function iconForEntry(entry, sourceFormat, status) {
|
|
return ENTRY_ICON_COMPONENTS[entryIconKind(entry, { sourceFormat, status })] || Package;
|
|
}
|
|
|
|
function BreadcrumbEntryMenuItem({
|
|
entry,
|
|
selectedKey,
|
|
onSelectEntry,
|
|
sidebarLabelForEntry,
|
|
entrySourceFormat,
|
|
entryHasMesh,
|
|
entryHasDxf,
|
|
entryHasGcode,
|
|
entryHasUrdf,
|
|
activeGenerationFiles = [],
|
|
activeStepArtifactGenerationFile = "",
|
|
stepArtifactGenerationAvailable = true
|
|
}) {
|
|
const key = fileKey(entry);
|
|
const active = key === selectedKey;
|
|
const label = typeof sidebarLabelForEntry === "function"
|
|
? sidebarLabelForEntry(entry)
|
|
: key;
|
|
const status = entryStatusForMenu(entry, {
|
|
entrySourceFormat,
|
|
entryHasMesh,
|
|
entryHasDxf,
|
|
entryHasGcode,
|
|
entryHasUrdf,
|
|
activeGenerationFiles,
|
|
activeStepArtifactGenerationFile,
|
|
stepArtifactGenerationAvailable
|
|
});
|
|
const { sourceFormat } = status;
|
|
const EntryIcon = iconForEntry(entry, sourceFormat, status);
|
|
const title = [
|
|
label,
|
|
status.statusLabel,
|
|
entry?.kind,
|
|
String(entry?.file || key)
|
|
].filter(Boolean).join(" | ");
|
|
|
|
return (
|
|
<DropdownMenuItem
|
|
data-active={active}
|
|
className={cn(
|
|
"min-w-0 max-w-80 text-xs focus:bg-sidebar-accent focus:text-sidebar-accent-foreground",
|
|
"data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground"
|
|
)}
|
|
title={title}
|
|
disabled={!key || typeof onSelectEntry !== "function"}
|
|
aria-current={active ? "page" : undefined}
|
|
onSelect={() => {
|
|
if (key && typeof onSelectEntry === "function") {
|
|
onSelectEntry(key);
|
|
}
|
|
}}
|
|
>
|
|
<EntryIcon
|
|
className={cn(
|
|
"size-3.5 shrink-0",
|
|
status.loading && "animate-spin"
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
<span className="block min-w-0 flex-1 truncate">{label}</span>
|
|
</DropdownMenuItem>
|
|
);
|
|
}
|
|
|
|
function BreadcrumbDirectoryMenuItems({
|
|
directory,
|
|
selectedKey,
|
|
onSelectEntry,
|
|
sidebarLabelForEntry,
|
|
entrySourceFormat,
|
|
entryHasMesh,
|
|
entryHasDxf,
|
|
entryHasGcode,
|
|
entryHasUrdf,
|
|
activeGenerationFiles = [],
|
|
activeStepArtifactGenerationFile = "",
|
|
stepArtifactGenerationAvailable = true,
|
|
canRevealFileAssets = false,
|
|
canCopyFileAssetLinks = false,
|
|
canCopyFileAssetPaths = false,
|
|
fileAccessBusyKey = "",
|
|
onDownloadFileAsset,
|
|
onExportImplicitFile,
|
|
onRevealFileAsset,
|
|
onCopyFileAssetReference
|
|
}) {
|
|
const items = listSidebarItems(directory);
|
|
|
|
if (!items.length) {
|
|
return (
|
|
<DropdownMenuItem disabled className="max-w-80 text-xs">
|
|
<Folder className="size-3.5 shrink-0" aria-hidden="true" />
|
|
<span className="block min-w-0 truncate">{String(directory?.name || "Empty")}</span>
|
|
</DropdownMenuItem>
|
|
);
|
|
}
|
|
|
|
return items.map((item) => {
|
|
if (item.type === "directory") {
|
|
return (
|
|
<BreadcrumbDirectorySubMenu
|
|
key={item.key}
|
|
directory={item.value}
|
|
selectedKey={selectedKey}
|
|
onSelectEntry={onSelectEntry}
|
|
sidebarLabelForEntry={sidebarLabelForEntry}
|
|
entrySourceFormat={entrySourceFormat}
|
|
entryHasMesh={entryHasMesh}
|
|
entryHasDxf={entryHasDxf}
|
|
entryHasGcode={entryHasGcode}
|
|
entryHasUrdf={entryHasUrdf}
|
|
activeGenerationFiles={activeGenerationFiles}
|
|
activeStepArtifactGenerationFile={activeStepArtifactGenerationFile}
|
|
stepArtifactGenerationAvailable={stepArtifactGenerationAvailable}
|
|
canRevealFileAssets={canRevealFileAssets}
|
|
canCopyFileAssetLinks={canCopyFileAssetLinks}
|
|
canCopyFileAssetPaths={canCopyFileAssetPaths}
|
|
fileAccessBusyKey={fileAccessBusyKey}
|
|
onDownloadFileAsset={onDownloadFileAsset}
|
|
onExportImplicitFile={onExportImplicitFile}
|
|
onRevealFileAsset={onRevealFileAsset}
|
|
onCopyFileAssetReference={onCopyFileAssetReference}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<BreadcrumbEntryMenuItem
|
|
key={item.key}
|
|
entry={item.value}
|
|
selectedKey={selectedKey}
|
|
onSelectEntry={onSelectEntry}
|
|
sidebarLabelForEntry={sidebarLabelForEntry}
|
|
entrySourceFormat={entrySourceFormat}
|
|
entryHasMesh={entryHasMesh}
|
|
entryHasDxf={entryHasDxf}
|
|
entryHasGcode={entryHasGcode}
|
|
entryHasUrdf={entryHasUrdf}
|
|
activeGenerationFiles={activeGenerationFiles}
|
|
activeStepArtifactGenerationFile={activeStepArtifactGenerationFile}
|
|
stepArtifactGenerationAvailable={stepArtifactGenerationAvailable}
|
|
canRevealFileAssets={canRevealFileAssets}
|
|
canCopyFileAssetLinks={canCopyFileAssetLinks}
|
|
canCopyFileAssetPaths={canCopyFileAssetPaths}
|
|
fileAccessBusyKey={fileAccessBusyKey}
|
|
onDownloadFileAsset={onDownloadFileAsset}
|
|
onExportImplicitFile={onExportImplicitFile}
|
|
onRevealFileAsset={onRevealFileAsset}
|
|
onCopyFileAssetReference={onCopyFileAssetReference}
|
|
/>
|
|
);
|
|
});
|
|
}
|
|
|
|
function DropdownMenuScrollArea({ children }) {
|
|
return (
|
|
<ScrollArea
|
|
className="max-h-96 w-full"
|
|
type="auto"
|
|
viewportClassName="max-h-96"
|
|
>
|
|
{children}
|
|
</ScrollArea>
|
|
);
|
|
}
|
|
|
|
function BreadcrumbDirectorySubMenu({
|
|
directory,
|
|
label = "",
|
|
title: titleProp = "",
|
|
selectedKey,
|
|
onSelectEntry,
|
|
sidebarLabelForEntry,
|
|
entrySourceFormat,
|
|
entryHasMesh,
|
|
entryHasDxf,
|
|
entryHasGcode,
|
|
entryHasUrdf,
|
|
activeGenerationFiles = [],
|
|
activeStepArtifactGenerationFile = "",
|
|
stepArtifactGenerationAvailable = true,
|
|
canRevealFileAssets = false,
|
|
canCopyFileAssetLinks = false,
|
|
canCopyFileAssetPaths = false,
|
|
fileAccessBusyKey = "",
|
|
onDownloadFileAsset,
|
|
onExportImplicitFile,
|
|
onRevealFileAsset,
|
|
onCopyFileAssetReference
|
|
}) {
|
|
const labelText = String(label || directory?.name || "Folder");
|
|
const title = String(titleProp || directoryTitle(directory));
|
|
|
|
return (
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger
|
|
className="min-w-0 max-w-80 text-xs"
|
|
title={title}
|
|
>
|
|
<Folder className="size-3.5 shrink-0" aria-hidden="true" />
|
|
<span className="block min-w-0 flex-1 truncate">{labelText}</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuSubContent className="w-max max-w-80">
|
|
<DropdownMenuScrollArea>
|
|
<BreadcrumbDirectoryMenuItems
|
|
directory={directory}
|
|
selectedKey={selectedKey}
|
|
onSelectEntry={onSelectEntry}
|
|
sidebarLabelForEntry={sidebarLabelForEntry}
|
|
entrySourceFormat={entrySourceFormat}
|
|
entryHasMesh={entryHasMesh}
|
|
entryHasDxf={entryHasDxf}
|
|
entryHasGcode={entryHasGcode}
|
|
entryHasUrdf={entryHasUrdf}
|
|
activeGenerationFiles={activeGenerationFiles}
|
|
activeStepArtifactGenerationFile={activeStepArtifactGenerationFile}
|
|
stepArtifactGenerationAvailable={stepArtifactGenerationAvailable}
|
|
canRevealFileAssets={canRevealFileAssets}
|
|
canCopyFileAssetLinks={canCopyFileAssetLinks}
|
|
canCopyFileAssetPaths={canCopyFileAssetPaths}
|
|
fileAccessBusyKey={fileAccessBusyKey}
|
|
onDownloadFileAsset={onDownloadFileAsset}
|
|
onExportImplicitFile={onExportImplicitFile}
|
|
onRevealFileAsset={onRevealFileAsset}
|
|
onCopyFileAssetReference={onCopyFileAssetReference}
|
|
/>
|
|
</DropdownMenuScrollArea>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuSub>
|
|
);
|
|
}
|
|
|
|
function BreadcrumbNodeDropdown({
|
|
node,
|
|
current,
|
|
selectedKey,
|
|
onSelectEntry,
|
|
sidebarLabelForEntry,
|
|
entrySourceFormat,
|
|
entryHasMesh,
|
|
entryHasDxf,
|
|
entryHasGcode,
|
|
entryHasUrdf,
|
|
activeGenerationFiles = [],
|
|
activeStepArtifactGenerationFile = "",
|
|
stepArtifactGenerationAvailable = true,
|
|
selectedStepSourceStatus = null,
|
|
canRevealFileAssets = false,
|
|
canCopyFileAssetLinks = false,
|
|
canCopyFileAssetPaths = false,
|
|
fileAccessBusyKey = "",
|
|
onDownloadFileAsset,
|
|
onExportImplicitFile,
|
|
onRevealFileAsset,
|
|
onRevealInExplorerView,
|
|
onCopyFileAssetReference,
|
|
filenameLoadActivity
|
|
}) {
|
|
const label = String(node?.label || "");
|
|
const title = String(node?.title || label);
|
|
const menuDirectory = node?.type === "directory" || node?.type === "placeholder" || node?.type === "entry"
|
|
? node?.menuDirectory || null
|
|
: null;
|
|
const canBrowse = !!menuDirectory && listSidebarItems(menuDirectory).length > 0;
|
|
|
|
if (!canBrowse) {
|
|
const labelNode = (
|
|
<span
|
|
className={cn(
|
|
"inline-flex min-w-0 items-center gap-2 text-xs font-medium",
|
|
current ? "max-w-[min(36rem,55vw)] text-foreground" : "max-w-32"
|
|
)}
|
|
title={title}
|
|
>
|
|
<span className="block min-w-0 truncate">{label}</span>
|
|
{current && node?.type === "entry" ? (
|
|
<FilenameLoadStatus activity={filenameLoadActivity} />
|
|
) : null}
|
|
</span>
|
|
);
|
|
|
|
if (node?.type !== "entry" || !node?.entry) {
|
|
return labelNode;
|
|
}
|
|
|
|
return (
|
|
<FileAccessContextMenu
|
|
entry={node.entry}
|
|
stepSourceStatus={selectedStepSourceStatus}
|
|
canRevealFileAssets={canRevealFileAssets}
|
|
canCopyFileAssetLinks={canCopyFileAssetLinks}
|
|
canCopyFileAssetPaths={canCopyFileAssetPaths}
|
|
busyKey={fileAccessBusyKey}
|
|
onDownloadFileAsset={onDownloadFileAsset}
|
|
onExportImplicitFile={onExportImplicitFile}
|
|
onRevealFileAsset={onRevealFileAsset}
|
|
onRevealInExplorerView={onRevealInExplorerView}
|
|
onCopyFileAssetReference={onCopyFileAssetReference}
|
|
>
|
|
{labelNode}
|
|
</FileAccessContextMenu>
|
|
);
|
|
}
|
|
|
|
const triggerButton = (
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"inline-flex min-w-0 items-center gap-2 rounded-sm text-xs font-medium transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
current
|
|
? "max-w-[min(36rem,55vw)] text-foreground"
|
|
: "max-w-32 text-muted-foreground"
|
|
)}
|
|
aria-label={`Browse ${label}`}
|
|
aria-current={current ? "page" : undefined}
|
|
title={title}
|
|
onPointerDown={(event) => {
|
|
if (event.button === 1) {
|
|
event.preventDefault();
|
|
}
|
|
}}
|
|
>
|
|
<span className="block min-w-0 truncate">{label}</span>
|
|
{current && node?.type === "entry" ? (
|
|
<FilenameLoadStatus activity={filenameLoadActivity} />
|
|
) : null}
|
|
</button>
|
|
);
|
|
const dropdownTrigger = (
|
|
<DropdownMenuTrigger asChild>
|
|
{triggerButton}
|
|
</DropdownMenuTrigger>
|
|
);
|
|
const trigger = node?.type === "entry" && node?.entry ? (
|
|
<FileAccessContextMenu
|
|
entry={node.entry}
|
|
stepSourceStatus={selectedStepSourceStatus}
|
|
canRevealFileAssets={canRevealFileAssets}
|
|
canCopyFileAssetLinks={canCopyFileAssetLinks}
|
|
canCopyFileAssetPaths={canCopyFileAssetPaths}
|
|
busyKey={fileAccessBusyKey}
|
|
onDownloadFileAsset={onDownloadFileAsset}
|
|
onExportImplicitFile={onExportImplicitFile}
|
|
onRevealFileAsset={onRevealFileAsset}
|
|
onRevealInExplorerView={onRevealInExplorerView}
|
|
onCopyFileAssetReference={onCopyFileAssetReference}
|
|
>
|
|
{dropdownTrigger}
|
|
</FileAccessContextMenu>
|
|
) : dropdownTrigger;
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
{trigger}
|
|
<DropdownMenuContent align="start" sideOffset={6} className="w-max max-w-80">
|
|
<DropdownMenuScrollArea>
|
|
<BreadcrumbDirectoryMenuItems
|
|
directory={menuDirectory}
|
|
selectedKey={selectedKey}
|
|
onSelectEntry={onSelectEntry}
|
|
sidebarLabelForEntry={sidebarLabelForEntry}
|
|
entrySourceFormat={entrySourceFormat}
|
|
entryHasMesh={entryHasMesh}
|
|
entryHasDxf={entryHasDxf}
|
|
entryHasGcode={entryHasGcode}
|
|
entryHasUrdf={entryHasUrdf}
|
|
activeGenerationFiles={activeGenerationFiles}
|
|
activeStepArtifactGenerationFile={activeStepArtifactGenerationFile}
|
|
stepArtifactGenerationAvailable={stepArtifactGenerationAvailable}
|
|
canRevealFileAssets={canRevealFileAssets}
|
|
canCopyFileAssetLinks={canCopyFileAssetLinks}
|
|
canCopyFileAssetPaths={canCopyFileAssetPaths}
|
|
fileAccessBusyKey={fileAccessBusyKey}
|
|
onDownloadFileAsset={onDownloadFileAsset}
|
|
onExportImplicitFile={onExportImplicitFile}
|
|
onRevealFileAsset={onRevealFileAsset}
|
|
onCopyFileAssetReference={onCopyFileAssetReference}
|
|
/>
|
|
</DropdownMenuScrollArea>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|
|
|
|
function BreadcrumbEllipsisDropdown({
|
|
nodes,
|
|
selectedKey,
|
|
onSelectEntry,
|
|
sidebarLabelForEntry,
|
|
entrySourceFormat,
|
|
entryHasMesh,
|
|
entryHasDxf,
|
|
entryHasGcode,
|
|
entryHasUrdf,
|
|
activeGenerationFiles = [],
|
|
activeStepArtifactGenerationFile = "",
|
|
stepArtifactGenerationAvailable = true,
|
|
canRevealFileAssets = false,
|
|
canCopyFileAssetLinks = false,
|
|
canCopyFileAssetPaths = false,
|
|
fileAccessBusyKey = "",
|
|
onDownloadFileAsset,
|
|
onExportImplicitFile,
|
|
onRevealFileAsset,
|
|
onCopyFileAssetReference,
|
|
title
|
|
}) {
|
|
const hiddenNodes = Array.isArray(nodes) ? nodes.filter(Boolean) : [];
|
|
const menuTitle = hiddenNodes.map((node) => node.label).join(" / ") || title;
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className="inline-flex h-6 min-w-7 items-center justify-center rounded-md px-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
aria-label="Show collapsed path folders"
|
|
title={menuTitle}
|
|
>
|
|
<span aria-hidden="true">...</span>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" sideOffset={6} className="w-max max-w-80">
|
|
<DropdownMenuScrollArea>
|
|
{hiddenNodes.map((node, index) => {
|
|
const directory = ellipsisBreadcrumbMenuDirectory(node);
|
|
if (node.type === "directory" && directory) {
|
|
return (
|
|
<BreadcrumbDirectorySubMenu
|
|
key={`${node.type}:${node.id}:${index}`}
|
|
directory={directory}
|
|
label={node.label}
|
|
title={node.title}
|
|
selectedKey={selectedKey}
|
|
onSelectEntry={onSelectEntry}
|
|
sidebarLabelForEntry={sidebarLabelForEntry}
|
|
entrySourceFormat={entrySourceFormat}
|
|
entryHasMesh={entryHasMesh}
|
|
entryHasDxf={entryHasDxf}
|
|
entryHasGcode={entryHasGcode}
|
|
entryHasUrdf={entryHasUrdf}
|
|
activeGenerationFiles={activeGenerationFiles}
|
|
activeStepArtifactGenerationFile={activeStepArtifactGenerationFile}
|
|
stepArtifactGenerationAvailable={stepArtifactGenerationAvailable}
|
|
canRevealFileAssets={canRevealFileAssets}
|
|
canCopyFileAssetLinks={canCopyFileAssetLinks}
|
|
canCopyFileAssetPaths={canCopyFileAssetPaths}
|
|
fileAccessBusyKey={fileAccessBusyKey}
|
|
onDownloadFileAsset={onDownloadFileAsset}
|
|
onExportImplicitFile={onExportImplicitFile}
|
|
onRevealFileAsset={onRevealFileAsset}
|
|
onCopyFileAssetReference={onCopyFileAssetReference}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (node.type === "entry" && node.entry) {
|
|
return (
|
|
<BreadcrumbEntryMenuItem
|
|
key={`${node.type}:${fileKey(node.entry)}:${index}`}
|
|
entry={node.entry}
|
|
selectedKey={selectedKey}
|
|
onSelectEntry={onSelectEntry}
|
|
sidebarLabelForEntry={sidebarLabelForEntry}
|
|
entrySourceFormat={entrySourceFormat}
|
|
entryHasMesh={entryHasMesh}
|
|
entryHasDxf={entryHasDxf}
|
|
entryHasGcode={entryHasGcode}
|
|
entryHasUrdf={entryHasUrdf}
|
|
activeGenerationFiles={activeGenerationFiles}
|
|
activeStepArtifactGenerationFile={activeStepArtifactGenerationFile}
|
|
stepArtifactGenerationAvailable={stepArtifactGenerationAvailable}
|
|
canRevealFileAssets={canRevealFileAssets}
|
|
canCopyFileAssetLinks={canCopyFileAssetLinks}
|
|
canCopyFileAssetPaths={canCopyFileAssetPaths}
|
|
fileAccessBusyKey={fileAccessBusyKey}
|
|
onDownloadFileAsset={onDownloadFileAsset}
|
|
onExportImplicitFile={onExportImplicitFile}
|
|
onRevealFileAsset={onRevealFileAsset}
|
|
onCopyFileAssetReference={onCopyFileAssetReference}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<DropdownMenuItem key={`${node.type}:${node.label}:${index}`} disabled className="max-w-80 text-xs">
|
|
<span className="block min-w-0 truncate">{node.label}</span>
|
|
</DropdownMenuItem>
|
|
);
|
|
})}
|
|
</DropdownMenuScrollArea>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|
|
|
|
function FilenameLoadStatus({ activity }) {
|
|
const label = String(activity?.label || "").trim();
|
|
if (!activity?.loading || !label) {
|
|
return null;
|
|
}
|
|
|
|
const title = String(activity?.title || label).trim();
|
|
|
|
return (
|
|
<span
|
|
role="status"
|
|
aria-live="polite"
|
|
title={title}
|
|
className="inline-flex min-w-0 max-w-36 shrink items-center gap-1 rounded-md border border-border/70 bg-sidebar-accent px-1.5 py-0.5 text-[10px] font-medium leading-none text-sidebar-accent-foreground"
|
|
>
|
|
<LoaderCircle className="size-3 shrink-0 animate-spin" aria-hidden="true" />
|
|
<span className="min-w-0 truncate">{label}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function DiscordMark(props) {
|
|
return (
|
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
|
|
<path d="M20.32 4.37a19.8 19.8 0 0 0-4.89-1.51.07.07 0 0 0-.07.03c-.21.38-.44.86-.61 1.25a18.27 18.27 0 0 0-5.49 0 12.64 12.64 0 0 0-.62-1.25.08.08 0 0 0-.07-.03 19.74 19.74 0 0 0-4.89 1.51.07.07 0 0 0-.03.03C.53 9.05-.32 13.58.1 18.06a.08.08 0 0 0 .03.06 19.9 19.9 0 0 0 5.99 3.03.08.08 0 0 0 .08-.03c.46-.63.87-1.3 1.23-1.99a.08.08 0 0 0-.04-.11 13.1 13.1 0 0 1-1.87-.89.08.08 0 0 1-.01-.13c.13-.09.25-.19.37-.29a.07.07 0 0 1 .08-.01c3.93 1.79 8.18 1.79 12.06 0a.07.07 0 0 1 .08.01c.12.1.25.2.37.29a.08.08 0 0 1-.01.13 12.3 12.3 0 0 1-1.87.89.08.08 0 0 0-.04.11c.36.7.77 1.36 1.23 1.99a.08.08 0 0 0 .08.03 19.84 19.84 0 0 0 6-3.03.08.08 0 0 0 .03-.05c.5-5.18-.84-9.67-3.55-13.66a.06.06 0 0 0-.02-.04ZM8.02 15.33c-1.18 0-2.16-1.09-2.16-2.42s.96-2.42 2.16-2.42c1.21 0 2.18 1.1 2.16 2.42 0 1.33-.96 2.42-2.16 2.42Zm7.98 0c-1.18 0-2.16-1.09-2.16-2.42s.96-2.42 2.16-2.42c1.21 0 2.18 1.1 2.16 2.42 0 1.33-.95 2.42-2.16 2.42Z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const topBarIconButtonClasses = "size-7";
|
|
const topBarIconClasses = "size-4";
|
|
const latestReleaseCacheKeyPrefix = "cad-viewer:latest-release:v1:";
|
|
const latestReleaseCacheTtlMs = 6 * 60 * 60 * 1000;
|
|
const updateVersionTooltipDelayMs = 250;
|
|
const passiveVersionTooltipDelayMs = 700;
|
|
const emptyLatestReleaseCheck = Object.freeze({
|
|
updateAvailable: false,
|
|
latestVersion: "",
|
|
releaseUrl: "",
|
|
installCommand: DEFAULT_VIEWER_SKILLS_INSTALL_COMMAND,
|
|
latestReleaseNewer: false
|
|
});
|
|
|
|
function nextColorMode(currentColorMode) {
|
|
return currentColorMode === DARK_COLOR_SCHEME_ID
|
|
? LIGHT_COLOR_SCHEME_ID
|
|
: DARK_COLOR_SCHEME_ID;
|
|
}
|
|
|
|
function latestReleaseCacheKey(apiUrl) {
|
|
return `${latestReleaseCacheKeyPrefix}${apiUrl}`;
|
|
}
|
|
|
|
function readLatestReleaseCache(apiUrl, now = Date.now()) {
|
|
if (!apiUrl || typeof window === "undefined" || !window.localStorage) {
|
|
return null;
|
|
}
|
|
|
|
try {
|
|
const rawValue = window.localStorage.getItem(latestReleaseCacheKey(apiUrl));
|
|
const value = rawValue ? JSON.parse(rawValue) : null;
|
|
const expiresAt = Number(value?.expiresAt || 0);
|
|
const latestVersion = String(value?.latestVersion || "").trim();
|
|
const releaseUrl = String(value?.releaseUrl || "").trim();
|
|
const installCommand = String(value?.installCommand || "").trim();
|
|
if (!latestVersion || expiresAt <= now) {
|
|
return null;
|
|
}
|
|
return { latestVersion, releaseUrl, installCommand };
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function writeLatestReleaseCache(apiUrl, release, now = Date.now()) {
|
|
if (!apiUrl || typeof window === "undefined" || !window.localStorage) {
|
|
return;
|
|
}
|
|
|
|
const latestVersion = String(release?.latestVersion || "").trim();
|
|
if (!latestVersion) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
window.localStorage.setItem(latestReleaseCacheKey(apiUrl), JSON.stringify({
|
|
latestVersion,
|
|
releaseUrl: String(release?.releaseUrl || "").trim(),
|
|
installCommand: String(release?.installCommand || "").trim(),
|
|
expiresAt: now + latestReleaseCacheTtlMs
|
|
}));
|
|
} catch {
|
|
// Local storage availability is browser-policy dependent; the release check is optional.
|
|
}
|
|
}
|
|
|
|
function latestReleaseFromPayload(payload, fallbackReleaseUrl = "") {
|
|
const latestVersion = String(payload?.tag_name || "").trim();
|
|
if (!latestVersion) {
|
|
return null;
|
|
}
|
|
return {
|
|
latestVersion,
|
|
releaseUrl: String(payload?.html_url || fallbackReleaseUrl || "").trim(),
|
|
installCommand: viewerSkillsInstallCommandFromText(
|
|
payload?.body,
|
|
DEFAULT_VIEWER_SKILLS_INSTALL_COMMAND
|
|
)
|
|
};
|
|
}
|
|
|
|
function latestReleaseCheckState(currentVersion, release) {
|
|
const latestVersion = String(release?.latestVersion || "").trim();
|
|
const releaseUrl = String(release?.releaseUrl || "").trim();
|
|
const installCommand = String(release?.installCommand || DEFAULT_VIEWER_SKILLS_INSTALL_COMMAND).trim();
|
|
if (!latestVersion) {
|
|
return emptyLatestReleaseCheck;
|
|
}
|
|
const latestReleaseNewer = isViewerReleaseNewer(currentVersion, latestVersion);
|
|
|
|
return {
|
|
updateAvailable: isViewerReleaseMajorMinorNewer(currentVersion, latestVersion),
|
|
latestVersion,
|
|
releaseUrl,
|
|
installCommand,
|
|
latestReleaseNewer
|
|
};
|
|
}
|
|
|
|
function useViewerLatestReleaseCheck({
|
|
currentVersion,
|
|
latestReleaseApiUrl,
|
|
latestReleaseUrl,
|
|
mockLatestVersion = "",
|
|
mockLatestReleaseUrl = ""
|
|
}) {
|
|
const [releaseCheck, setReleaseCheck] = useState(emptyLatestReleaseCheck);
|
|
|
|
useEffect(() => {
|
|
const version = String(currentVersion || "").trim();
|
|
const apiUrl = String(latestReleaseApiUrl || "").trim();
|
|
const mockedVersion = String(mockLatestVersion || "").trim();
|
|
if (!version) {
|
|
setReleaseCheck(emptyLatestReleaseCheck);
|
|
return undefined;
|
|
}
|
|
|
|
if (mockedVersion) {
|
|
setReleaseCheck(latestReleaseCheckState(version, {
|
|
latestVersion: mockedVersion,
|
|
releaseUrl: String(mockLatestReleaseUrl || latestReleaseUrl || "").trim(),
|
|
installCommand: DEFAULT_VIEWER_SKILLS_INSTALL_COMMAND
|
|
}));
|
|
return undefined;
|
|
}
|
|
|
|
if (!apiUrl || typeof fetch !== "function") {
|
|
setReleaseCheck(emptyLatestReleaseCheck);
|
|
return undefined;
|
|
}
|
|
|
|
const cachedRelease = readLatestReleaseCache(apiUrl);
|
|
if (cachedRelease) {
|
|
setReleaseCheck(latestReleaseCheckState(version, cachedRelease));
|
|
return undefined;
|
|
}
|
|
|
|
setReleaseCheck(emptyLatestReleaseCheck);
|
|
const controller = new AbortController();
|
|
fetch(apiUrl, {
|
|
signal: controller.signal,
|
|
headers: {
|
|
Accept: "application/vnd.github+json"
|
|
}
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error(`GitHub latest release check failed with ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((payload) => {
|
|
if (controller.signal.aborted) {
|
|
return;
|
|
}
|
|
const release = latestReleaseFromPayload(payload, latestReleaseUrl);
|
|
if (!release) {
|
|
if (!cachedRelease) {
|
|
setReleaseCheck(emptyLatestReleaseCheck);
|
|
}
|
|
return;
|
|
}
|
|
writeLatestReleaseCache(apiUrl, release);
|
|
setReleaseCheck(latestReleaseCheckState(version, release));
|
|
})
|
|
.catch((error) => {
|
|
if (error?.name === "AbortError") {
|
|
return;
|
|
}
|
|
if (!cachedRelease) {
|
|
setReleaseCheck(emptyLatestReleaseCheck);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [currentVersion, latestReleaseApiUrl, latestReleaseUrl, mockLatestReleaseUrl, mockLatestVersion]);
|
|
|
|
return releaseCheck;
|
|
}
|
|
|
|
function VersionTooltipRow({ label, version, action = null }) {
|
|
const normalizedVersion = String(version || "").trim();
|
|
if (!normalizedVersion) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-w-0 flex-col items-start gap-1.5 px-0.5 text-left">
|
|
<span className="text-[11px] font-medium leading-none text-muted-foreground">{label}</span>
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<span className="min-w-0 text-left font-mono text-[12px] leading-5 text-foreground tabular-nums">
|
|
{normalizedVersion}
|
|
</span>
|
|
{action}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function VersionReleaseLink({ version, releaseUrl, releaseCheck = emptyLatestReleaseCheck }) {
|
|
const normalizedVersion = String(version || "").trim();
|
|
const [installCopyStatus, setInstallCopyStatus] = useState("");
|
|
const copyGestureHandledRef = useRef(false);
|
|
|
|
if (!normalizedVersion) {
|
|
return null;
|
|
}
|
|
|
|
const updateAvailable = Boolean(releaseCheck?.updateAvailable);
|
|
const targetReleaseUrl = updateAvailable
|
|
? String(releaseCheck?.releaseUrl || releaseUrl || "").trim()
|
|
: String(releaseUrl || "").trim();
|
|
const latestVersion = String(releaseCheck?.latestVersion || "").trim();
|
|
const latestReleaseNewer = Boolean(releaseCheck?.latestReleaseNewer);
|
|
const latestVersionVisible = latestVersion && latestReleaseNewer;
|
|
const latestReleaseUrl = latestVersionVisible
|
|
? String(releaseCheck?.releaseUrl || "").trim()
|
|
: "";
|
|
const installCommand = String(
|
|
releaseCheck?.installCommand || DEFAULT_VIEWER_SKILLS_INSTALL_COMMAND
|
|
).trim() || DEFAULT_VIEWER_SKILLS_INSTALL_COMMAND;
|
|
const upToDate = Boolean(latestVersion) && !latestReleaseNewer;
|
|
const label = updateAvailable
|
|
? "Update CAD Viewer"
|
|
: (targetReleaseUrl ? `Open release ${normalizedVersion}` : `Version ${normalizedVersion}`);
|
|
|
|
const handleCopyInstallCommand = async (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
if (copyGestureHandledRef.current) {
|
|
return;
|
|
}
|
|
copyGestureHandledRef.current = true;
|
|
globalThis.setTimeout(() => {
|
|
copyGestureHandledRef.current = false;
|
|
}, 250);
|
|
try {
|
|
await copyTextToClipboard(installCommand);
|
|
setInstallCopyStatus("copied");
|
|
globalThis.setTimeout(() => {
|
|
setInstallCopyStatus("");
|
|
}, 1600);
|
|
} catch {
|
|
setInstallCopyStatus("failed");
|
|
}
|
|
};
|
|
|
|
const releaseButton = (
|
|
<Button
|
|
asChild={Boolean(targetReleaseUrl)}
|
|
variant={updateAvailable ? "default" : "ghost"}
|
|
size="xs"
|
|
className={cn(
|
|
"inline-flex rounded-sm px-2 text-xs font-medium leading-none",
|
|
updateAvailable
|
|
? "h-6 px-2 text-[11px]"
|
|
: "h-7 text-muted-foreground tabular-nums hover:text-sidebar-foreground"
|
|
)}
|
|
aria-label={label}
|
|
>
|
|
{targetReleaseUrl ? (
|
|
<a href={targetReleaseUrl} target="_blank" rel="noreferrer">
|
|
<span className="inline-flex items-center gap-1">
|
|
{updateAvailable ? (
|
|
<span>Update</span>
|
|
) : (
|
|
<span>{normalizedVersion}</span>
|
|
)}
|
|
</span>
|
|
</a>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1">
|
|
{updateAvailable ? (
|
|
<span>Update</span>
|
|
) : (
|
|
<span>{normalizedVersion}</span>
|
|
)}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<Tooltip delayDuration={updateAvailable ? updateVersionTooltipDelayMs : passiveVersionTooltipDelayMs}>
|
|
<TooltipTrigger asChild>
|
|
{releaseButton}
|
|
</TooltipTrigger>
|
|
<TooltipContent
|
|
side="bottom"
|
|
sideOffset={6}
|
|
className="cad-glass-popover w-fit max-w-[calc(100vw-1rem)] border border-border bg-popover p-2 text-left text-popover-foreground shadow-lg shadow-black/10"
|
|
arrowClassName="bg-popover fill-popover"
|
|
>
|
|
<div className="inline-flex max-w-full flex-col gap-3">
|
|
{latestVersionVisible ? (
|
|
<div className="grid w-full min-w-0 grid-cols-2 gap-3">
|
|
<VersionTooltipRow
|
|
label="Current Version"
|
|
version={normalizedVersion}
|
|
/>
|
|
<VersionTooltipRow
|
|
label="Latest Version"
|
|
version={latestVersion}
|
|
action={latestReleaseUrl ? (
|
|
<Button
|
|
asChild
|
|
variant="default"
|
|
size="xs"
|
|
className="h-4 !min-h-0 rounded-sm !px-1.5 !py-0 text-[10px] font-medium leading-none"
|
|
aria-label={`Update CAD Viewer to ${latestVersion}`}
|
|
>
|
|
<a href={latestReleaseUrl} target="_blank" rel="noreferrer">
|
|
Update
|
|
</a>
|
|
</Button>
|
|
) : null}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<VersionTooltipRow
|
|
label="Current Version"
|
|
version={normalizedVersion}
|
|
/>
|
|
)}
|
|
<div className="flex min-w-0 flex-col gap-1.5">
|
|
<div className="px-0.5 text-[11px] font-medium leading-none text-muted-foreground">Update Command</div>
|
|
<div className="flex h-8 min-w-0 items-center gap-2 rounded-sm border border-border/60 bg-muted/35 p-1 pl-2">
|
|
<code className="min-w-0 flex-1 whitespace-nowrap font-mono text-[11px] leading-5 text-foreground">
|
|
{installCommand}
|
|
</code>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="inline-flex size-6 shrink-0 items-center justify-center rounded-sm border border-border text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
|
|
aria-label={installCopyStatus === "copied" ? "Install command copied" : "Copy install command"}
|
|
onPointerDown={handleCopyInstallCommand}
|
|
onClick={handleCopyInstallCommand}
|
|
>
|
|
{installCopyStatus === "copied" ? (
|
|
<Check className="size-3" aria-hidden="true" />
|
|
) : (
|
|
<Copy className="size-3" aria-hidden="true" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{installCopyStatus === "failed" ? (
|
|
<div className="text-[11px] text-muted-foreground">Copy failed</div>
|
|
) : null}
|
|
{upToDate ? (
|
|
<div className="flex items-center gap-1.5 px-0.5 text-[11px] font-medium text-muted-foreground">
|
|
<CircleCheck className="size-3 text-primary" aria-hidden="true" />
|
|
<span>You are up to date</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export default function CadWorkspaceTopBar({
|
|
previewMode,
|
|
sidebarLabelForEntry,
|
|
directoryTree = null,
|
|
selectedKey = "",
|
|
selectedEntry,
|
|
onSelectEntry,
|
|
entrySourceFormat,
|
|
entryHasMesh,
|
|
entryHasDxf,
|
|
entryHasGcode,
|
|
entryHasUrdf,
|
|
activeGenerationFiles = [],
|
|
activeStepArtifactGenerationFile = "",
|
|
stepArtifactGenerationAvailable = true,
|
|
themePresets = [],
|
|
themeSettings,
|
|
themePresetId = "",
|
|
resolvedColorSchemeMode = LIGHT_COLOR_SCHEME_ID,
|
|
onColorSchemePreferenceChange,
|
|
updateThemeSettings,
|
|
handleResetThemeSettings,
|
|
handleSaveCustomThemePreset,
|
|
handleUpdateThemePresetSettings,
|
|
handleDeleteCustomThemePreset,
|
|
handleEditThemePreset,
|
|
handleResetThemePresetToDefault,
|
|
handleRestoreDefaultThemePresets,
|
|
filenameLoadActivity = null,
|
|
selectedStepSourceStatus = null,
|
|
canRevealFileAssets = false,
|
|
canCopyFileAssetLinks = false,
|
|
canCopyFileAssetPaths = false,
|
|
fileAccessBusyKey = "",
|
|
onDownloadFileAsset,
|
|
onExportImplicitFile,
|
|
onRevealFileAsset,
|
|
onRevealInExplorerView,
|
|
onCopyFileAssetReference,
|
|
fileSheetKind = "",
|
|
fileSheetOpen = false,
|
|
onToggleFileSheet,
|
|
navigationAvailable = true
|
|
}) {
|
|
const discordUrl = normalizeViewerDiscordUrl(import.meta.env?.VIEWER_DISCORD_URL);
|
|
|
|
if (previewMode) {
|
|
return null;
|
|
}
|
|
|
|
const selectedFileLabel = selectedEntry && typeof sidebarLabelForEntry === "function"
|
|
? sidebarLabelForEntry(selectedEntry)
|
|
: "Select a file";
|
|
const selectedFileTitle = selectedEntry
|
|
? String(selectedEntry.file || selectedEntry.id || selectedFileLabel)
|
|
: selectedFileLabel;
|
|
const breadcrumbAvailable = navigationAvailable || Boolean(selectedEntry);
|
|
const breadcrumbNodes = buildBreadcrumbNodes({
|
|
directoryTree: navigationAvailable ? directoryTree : null,
|
|
selectedEntry,
|
|
selectedFileLabel,
|
|
selectedFileTitle
|
|
});
|
|
const breadcrumbItems = collapsedBreadcrumbNodes(breadcrumbNodes);
|
|
const mobileBreadcrumbNode = breadcrumbNodes[breadcrumbNodes.length - 1] || null;
|
|
const activeIconButtonClasses = "bg-accent text-accent-foreground";
|
|
const showFileSheetToggle = !!fileSheetKind && typeof onToggleFileSheet === "function";
|
|
const fileSheetToggleLabel = fileSheetOpen
|
|
? `Collapse ${fileSheetLabel(fileSheetKind)}`
|
|
: `Expand ${fileSheetLabel(fileSheetKind)}`;
|
|
const showThemeColorModeToggle = themeSettingsSupportsSystemColorMode(themeSettings);
|
|
const activeColorSchemeMode = resolvedColorSchemeMode === DARK_COLOR_SCHEME_ID
|
|
? DARK_COLOR_SCHEME_ID
|
|
: LIGHT_COLOR_SCHEME_ID;
|
|
const nextColorSchemeMode = nextColorMode(activeColorSchemeMode);
|
|
const activeColorSchemeModeLabel = activeColorSchemeMode === DARK_COLOR_SCHEME_ID ? "dark" : "light";
|
|
const nextColorSchemeModeLabel = nextColorSchemeMode === DARK_COLOR_SCHEME_ID ? "dark" : "light";
|
|
const colorModeToggleLabel = `Browser color mode: ${activeColorSchemeModeLabel}. Switch to ${nextColorSchemeModeLabel} mode.`;
|
|
const ColorModeIcon = activeColorSchemeMode === DARK_COLOR_SCHEME_ID ? Moon : Sun;
|
|
|
|
const handleThemeColorModeToggle = () => {
|
|
if (typeof onColorSchemePreferenceChange !== "function") {
|
|
return;
|
|
}
|
|
onColorSchemePreferenceChange(nextColorSchemeMode);
|
|
};
|
|
|
|
return (
|
|
<header
|
|
className="cad-glass-surface pointer-events-auto flex h-11 shrink-0 items-center gap-2 border-b border-sidebar-border px-2 text-sidebar-foreground"
|
|
>
|
|
{navigationAvailable ? (
|
|
<SidebarTrigger
|
|
title="Toggle CAD Viewer"
|
|
aria-label="Toggle CAD Viewer"
|
|
className="shrink-0"
|
|
/>
|
|
) : null}
|
|
|
|
{breadcrumbAvailable ? (
|
|
<Breadcrumb className="min-w-0 flex-1 overflow-hidden">
|
|
<ScrollArea
|
|
className="h-8 min-w-0 whitespace-nowrap"
|
|
type="auto"
|
|
viewportClassName="overflow-y-hidden"
|
|
scrollbars="horizontal"
|
|
>
|
|
{mobileBreadcrumbNode ? (
|
|
<BreadcrumbList className="flex h-8 min-w-full flex-nowrap gap-1.5 pr-2 text-xs sm:hidden">
|
|
<BreadcrumbItem className="min-w-0">
|
|
<BreadcrumbNodeDropdown
|
|
node={mobileBreadcrumbNode}
|
|
current
|
|
selectedKey={selectedKey}
|
|
onSelectEntry={onSelectEntry}
|
|
sidebarLabelForEntry={sidebarLabelForEntry}
|
|
entrySourceFormat={entrySourceFormat}
|
|
entryHasMesh={entryHasMesh}
|
|
entryHasDxf={entryHasDxf}
|
|
entryHasGcode={entryHasGcode}
|
|
entryHasUrdf={entryHasUrdf}
|
|
activeGenerationFiles={activeGenerationFiles}
|
|
activeStepArtifactGenerationFile={activeStepArtifactGenerationFile}
|
|
stepArtifactGenerationAvailable={stepArtifactGenerationAvailable}
|
|
selectedStepSourceStatus={selectedStepSourceStatus}
|
|
canRevealFileAssets={canRevealFileAssets}
|
|
canCopyFileAssetLinks={canCopyFileAssetLinks}
|
|
canCopyFileAssetPaths={canCopyFileAssetPaths}
|
|
fileAccessBusyKey={fileAccessBusyKey}
|
|
onDownloadFileAsset={onDownloadFileAsset}
|
|
onExportImplicitFile={onExportImplicitFile}
|
|
onRevealFileAsset={onRevealFileAsset}
|
|
onRevealInExplorerView={onRevealInExplorerView}
|
|
onCopyFileAssetReference={onCopyFileAssetReference}
|
|
filenameLoadActivity={filenameLoadActivity}
|
|
/>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
) : null}
|
|
<BreadcrumbList className="hidden h-8 min-w-full w-max flex-nowrap gap-1.5 pr-2 text-xs sm:flex sm:gap-1.5">
|
|
{breadcrumbItems.map((item, index) => (
|
|
<Fragment key={`${item.type}:${item.node?.type || ""}:${item.node?.id || item.node?.label || index}:${index}`}>
|
|
<BreadcrumbItem className="min-w-0">
|
|
{item.type === "ellipsis" ? (
|
|
<BreadcrumbEllipsisDropdown
|
|
nodes={item.nodes}
|
|
selectedKey={selectedKey}
|
|
onSelectEntry={onSelectEntry}
|
|
sidebarLabelForEntry={sidebarLabelForEntry}
|
|
entrySourceFormat={entrySourceFormat}
|
|
entryHasMesh={entryHasMesh}
|
|
entryHasDxf={entryHasDxf}
|
|
entryHasGcode={entryHasGcode}
|
|
entryHasUrdf={entryHasUrdf}
|
|
activeGenerationFiles={activeGenerationFiles}
|
|
activeStepArtifactGenerationFile={activeStepArtifactGenerationFile}
|
|
stepArtifactGenerationAvailable={stepArtifactGenerationAvailable}
|
|
canRevealFileAssets={canRevealFileAssets}
|
|
canCopyFileAssetLinks={canCopyFileAssetLinks}
|
|
canCopyFileAssetPaths={canCopyFileAssetPaths}
|
|
fileAccessBusyKey={fileAccessBusyKey}
|
|
onDownloadFileAsset={onDownloadFileAsset}
|
|
onExportImplicitFile={onExportImplicitFile}
|
|
onRevealFileAsset={onRevealFileAsset}
|
|
onCopyFileAssetReference={onCopyFileAssetReference}
|
|
title={selectedFileTitle}
|
|
/>
|
|
) : (
|
|
<BreadcrumbNodeDropdown
|
|
node={item.node}
|
|
current={index === breadcrumbItems.length - 1}
|
|
selectedKey={selectedKey}
|
|
onSelectEntry={onSelectEntry}
|
|
sidebarLabelForEntry={sidebarLabelForEntry}
|
|
entrySourceFormat={entrySourceFormat}
|
|
entryHasMesh={entryHasMesh}
|
|
entryHasDxf={entryHasDxf}
|
|
entryHasGcode={entryHasGcode}
|
|
entryHasUrdf={entryHasUrdf}
|
|
activeGenerationFiles={activeGenerationFiles}
|
|
activeStepArtifactGenerationFile={activeStepArtifactGenerationFile}
|
|
stepArtifactGenerationAvailable={stepArtifactGenerationAvailable}
|
|
selectedStepSourceStatus={selectedStepSourceStatus}
|
|
canRevealFileAssets={canRevealFileAssets}
|
|
canCopyFileAssetLinks={canCopyFileAssetLinks}
|
|
canCopyFileAssetPaths={canCopyFileAssetPaths}
|
|
fileAccessBusyKey={fileAccessBusyKey}
|
|
onDownloadFileAsset={onDownloadFileAsset}
|
|
onExportImplicitFile={onExportImplicitFile}
|
|
onRevealFileAsset={onRevealFileAsset}
|
|
onRevealInExplorerView={onRevealInExplorerView}
|
|
onCopyFileAssetReference={onCopyFileAssetReference}
|
|
filenameLoadActivity={filenameLoadActivity}
|
|
/>
|
|
)}
|
|
</BreadcrumbItem>
|
|
{index < breadcrumbItems.length - 1 ? (
|
|
<BreadcrumbSeparator className="text-muted-foreground/60" />
|
|
) : null}
|
|
</Fragment>
|
|
))}
|
|
</BreadcrumbList>
|
|
</ScrollArea>
|
|
</Breadcrumb>
|
|
) : (
|
|
<div className="min-w-0 flex-1" />
|
|
)}
|
|
|
|
<TooltipProvider delayDuration={250}>
|
|
<div className="flex shrink-0 items-center gap-1.5">
|
|
<Button
|
|
asChild
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
aria-label="Join the CAD Skills Discord"
|
|
title="Join the CAD Skills Discord"
|
|
className={topBarIconButtonClasses}
|
|
>
|
|
<a href={discordUrl} target="_blank" rel="noreferrer">
|
|
<DiscordMark className={topBarIconClasses} />
|
|
</a>
|
|
</Button>
|
|
<ThemePresetDropdown
|
|
themePresets={themePresets}
|
|
themeSettings={themeSettings}
|
|
themePresetId={themePresetId}
|
|
updateThemeSettings={updateThemeSettings}
|
|
handleResetThemeSettings={handleResetThemeSettings}
|
|
handleSaveCustomThemePreset={handleSaveCustomThemePreset}
|
|
handleUpdateThemePresetSettings={handleUpdateThemePresetSettings}
|
|
handleDeleteCustomThemePreset={handleDeleteCustomThemePreset}
|
|
handleEditThemePreset={handleEditThemePreset}
|
|
handleResetThemePresetToDefault={handleResetThemePresetToDefault}
|
|
handleRestoreDefaultThemePresets={handleRestoreDefaultThemePresets}
|
|
triggerClassName={topBarIconButtonClasses}
|
|
iconClassName={topBarIconClasses}
|
|
/>
|
|
|
|
{showThemeColorModeToggle ? (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
aria-label={colorModeToggleLabel}
|
|
title={colorModeToggleLabel}
|
|
disabled={typeof onColorSchemePreferenceChange !== "function"}
|
|
onClick={handleThemeColorModeToggle}
|
|
className={topBarIconButtonClasses}
|
|
>
|
|
<ColorModeIcon className={topBarIconClasses} />
|
|
<span className="sr-only">{colorModeToggleLabel}</span>
|
|
</Button>
|
|
) : null}
|
|
|
|
{showFileSheetToggle ? (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
aria-label={fileSheetToggleLabel}
|
|
title={fileSheetToggleLabel}
|
|
aria-pressed={fileSheetOpen}
|
|
onClick={onToggleFileSheet}
|
|
className={`${topBarIconButtonClasses} ${fileSheetOpen ? activeIconButtonClasses : ""}`}
|
|
>
|
|
<SlidersHorizontal className={topBarIconClasses} />
|
|
<span className="sr-only">{fileSheetToggleLabel}</span>
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</TooltipProvider>
|
|
</header>
|
|
);
|
|
}
|