2024-10-27 21:22:06 +01:00
|
|
|
// Copyright 2024, Command Line
|
|
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
|
|
|
|
import { Button } from "@/element/button";
|
|
|
|
import {
|
|
|
|
ExpandableMenu,
|
|
|
|
ExpandableMenuItem,
|
|
|
|
ExpandableMenuItemGroup,
|
|
|
|
ExpandableMenuItemGroupTitle,
|
|
|
|
ExpandableMenuItemLeftElement,
|
|
|
|
ExpandableMenuItemRightElement,
|
|
|
|
} from "@/element/expandablemenu";
|
|
|
|
import { Input } from "@/element/input";
|
|
|
|
import { Popover, PopoverButton, PopoverContent } from "@/element/popover";
|
2024-12-02 19:56:56 +01:00
|
|
|
import { fireAndForget, makeIconClass, useAtomValueSafe } from "@/util/util";
|
2024-10-27 21:22:06 +01:00
|
|
|
import clsx from "clsx";
|
2024-12-02 19:56:56 +01:00
|
|
|
import { atom, PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from "jotai";
|
|
|
|
import { splitAtom } from "jotai/utils";
|
2024-10-27 21:22:06 +01:00
|
|
|
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
|
2024-12-02 19:56:56 +01:00
|
|
|
import { CSSProperties, memo, useCallback, useEffect, useRef } from "react";
|
2024-10-27 21:22:06 +01:00
|
|
|
import WorkspaceSVG from "../asset/workspace.svg";
|
2024-12-02 19:56:56 +01:00
|
|
|
import { IconButton } from "../element/iconbutton";
|
|
|
|
import { atoms, getApi } from "../store/global";
|
|
|
|
import { WorkspaceService } from "../store/services";
|
|
|
|
import { getObjectValue, makeORef, setObjectValue } from "../store/wos";
|
2024-11-22 01:05:04 +01:00
|
|
|
import "./workspaceswitcher.scss";
|
2024-10-27 21:22:06 +01:00
|
|
|
|
|
|
|
interface ColorSelectorProps {
|
|
|
|
colors: string[];
|
|
|
|
selectedColor?: string;
|
|
|
|
onSelect: (color: string) => void;
|
|
|
|
className?: string;
|
|
|
|
}
|
|
|
|
|
2024-12-10 01:24:32 +01:00
|
|
|
const colors = [
|
|
|
|
"#58C142", // Green (accent)
|
|
|
|
"#00FFDB", // Teal
|
|
|
|
"#429DFF", // Blue
|
|
|
|
"#BF55EC", // Purple
|
|
|
|
"#FF453A", // Red
|
|
|
|
"#FF9500", // Orange
|
|
|
|
"#FFE900", // Yellow
|
|
|
|
];
|
|
|
|
|
|
|
|
const icons = [
|
2024-12-10 22:54:11 +01:00
|
|
|
"custom@wave-logo-solid",
|
2024-12-10 01:24:32 +01:00
|
|
|
"triangle",
|
|
|
|
"star",
|
|
|
|
"heart",
|
2024-12-10 01:52:59 +01:00
|
|
|
"bolt",
|
|
|
|
"solid@cloud",
|
|
|
|
"moon",
|
|
|
|
"layer-group",
|
2024-12-10 01:24:32 +01:00
|
|
|
"rocket",
|
2024-12-10 01:52:59 +01:00
|
|
|
"flask",
|
|
|
|
"paperclip",
|
|
|
|
"chart-line",
|
2024-12-10 01:24:32 +01:00
|
|
|
"graduation-cap",
|
|
|
|
"mug-hot",
|
|
|
|
];
|
|
|
|
|
2024-10-27 21:22:06 +01:00
|
|
|
const ColorSelector = memo(({ colors, selectedColor, onSelect, className }: ColorSelectorProps) => {
|
|
|
|
const handleColorClick = (color: string) => {
|
|
|
|
onSelect(color);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={clsx("color-selector", className)}>
|
|
|
|
{colors.map((color) => (
|
|
|
|
<div
|
|
|
|
key={color}
|
|
|
|
className={clsx("color-circle", { selected: selectedColor === color })}
|
|
|
|
style={{ backgroundColor: color }}
|
|
|
|
onClick={() => handleColorClick(color)}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
interface IconSelectorProps {
|
|
|
|
icons: string[];
|
|
|
|
selectedIcon?: string;
|
|
|
|
onSelect: (icon: string) => void;
|
|
|
|
className?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
const IconSelector = memo(({ icons, selectedIcon, onSelect, className }: IconSelectorProps) => {
|
|
|
|
const handleIconClick = (icon: string) => {
|
|
|
|
onSelect(icon);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={clsx("icon-selector", className)}>
|
|
|
|
{icons.map((icon) => {
|
2024-12-10 22:54:11 +01:00
|
|
|
const iconClass = makeIconClass(icon, true);
|
2024-10-27 21:22:06 +01:00
|
|
|
return (
|
|
|
|
<i
|
|
|
|
key={icon}
|
|
|
|
className={clsx(iconClass, "icon-item", { selected: selectedIcon === icon })}
|
|
|
|
onClick={() => handleIconClick(icon)}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2024-12-10 21:26:42 +01:00
|
|
|
interface WorkspaceEditorProps {
|
2024-10-27 21:22:06 +01:00
|
|
|
title: string;
|
|
|
|
icon: string;
|
|
|
|
color: string;
|
|
|
|
focusInput: boolean;
|
|
|
|
onTitleChange: (newTitle: string) => void;
|
|
|
|
onColorChange: (newColor: string) => void;
|
|
|
|
onIconChange: (newIcon: string) => void;
|
|
|
|
onDeleteWorkspace: () => void;
|
|
|
|
}
|
2024-12-10 21:26:42 +01:00
|
|
|
const WorkspaceEditor = memo(
|
2024-10-27 21:22:06 +01:00
|
|
|
({
|
|
|
|
title,
|
|
|
|
icon,
|
|
|
|
color,
|
|
|
|
focusInput,
|
|
|
|
onTitleChange,
|
|
|
|
onColorChange,
|
|
|
|
onIconChange,
|
|
|
|
onDeleteWorkspace,
|
2024-12-10 21:26:42 +01:00
|
|
|
}: WorkspaceEditorProps) => {
|
2024-10-27 21:22:06 +01:00
|
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (focusInput && inputRef.current) {
|
|
|
|
inputRef.current.focus();
|
2024-12-10 21:26:42 +01:00
|
|
|
inputRef.current.select();
|
2024-10-27 21:22:06 +01:00
|
|
|
}
|
|
|
|
}, [focusInput]);
|
|
|
|
|
|
|
|
return (
|
2024-12-10 21:26:42 +01:00
|
|
|
<div className="workspace-editor">
|
2024-12-05 19:35:54 +01:00
|
|
|
<Input
|
|
|
|
ref={inputRef}
|
|
|
|
className={clsx("vertical-padding-3", { error: title === "" })}
|
|
|
|
onChange={onTitleChange}
|
|
|
|
value={title}
|
|
|
|
autoFocus
|
2024-12-10 21:26:42 +01:00
|
|
|
autoSelect
|
2024-12-05 19:35:54 +01:00
|
|
|
/>
|
2024-12-10 01:24:32 +01:00
|
|
|
<ColorSelector selectedColor={color} colors={colors} onSelect={onColorChange} />
|
|
|
|
<IconSelector selectedIcon={icon} icons={icons} onSelect={onIconChange} />
|
2024-10-27 21:22:06 +01:00
|
|
|
<div className="delete-ws-btn-wrapper">
|
2024-12-10 19:15:33 +01:00
|
|
|
<Button className="ghost red font-size-12 bold" onClick={onDeleteWorkspace}>
|
2024-10-27 21:22:06 +01:00
|
|
|
Delete workspace
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
2024-12-02 19:56:56 +01:00
|
|
|
type WorkspaceListEntry = {
|
|
|
|
windowId: string;
|
|
|
|
workspace: Workspace;
|
|
|
|
};
|
2024-10-27 21:22:06 +01:00
|
|
|
|
2024-12-02 19:56:56 +01:00
|
|
|
type WorkspaceList = WorkspaceListEntry[];
|
|
|
|
const workspaceMapAtom = atom<WorkspaceList>([]);
|
|
|
|
const workspaceSplitAtom = splitAtom(workspaceMapAtom);
|
|
|
|
const editingWorkspaceAtom = atom<string>();
|
2024-10-27 21:22:06 +01:00
|
|
|
const WorkspaceSwitcher = () => {
|
2024-12-02 19:56:56 +01:00
|
|
|
const setWorkspaceList = useSetAtom(workspaceMapAtom);
|
|
|
|
const activeWorkspace = useAtomValueSafe(atoms.workspace);
|
|
|
|
const workspaceList = useAtomValue(workspaceSplitAtom);
|
|
|
|
const setEditingWorkspace = useSetAtom(editingWorkspaceAtom);
|
|
|
|
|
|
|
|
const updateWorkspaceList = useCallback(async () => {
|
|
|
|
const workspaceList = await WorkspaceService.ListWorkspaces();
|
|
|
|
if (!workspaceList) {
|
|
|
|
return;
|
2024-10-27 21:22:06 +01:00
|
|
|
}
|
2024-12-02 19:56:56 +01:00
|
|
|
const newList: WorkspaceList = [];
|
|
|
|
for (const entry of workspaceList) {
|
|
|
|
// This just ensures that the atom exists for easier setting of the object
|
|
|
|
getObjectValue(makeORef("workspace", entry.workspaceid));
|
|
|
|
newList.push({
|
|
|
|
windowId: entry.windowid,
|
|
|
|
workspace: await WorkspaceService.GetWorkspace(entry.workspaceid),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
setWorkspaceList(newList);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
fireAndForget(updateWorkspaceList);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const onDeleteWorkspace = useCallback((workspaceId: string) => {
|
2024-12-06 03:09:54 +01:00
|
|
|
getApi().deleteWorkspace(workspaceId);
|
|
|
|
setTimeout(() => {
|
|
|
|
fireAndForget(updateWorkspaceList);
|
|
|
|
}, 10);
|
2024-12-02 19:56:56 +01:00
|
|
|
}, []);
|
2024-10-27 21:22:06 +01:00
|
|
|
|
2024-12-02 19:56:56 +01:00
|
|
|
const isActiveWorkspaceSaved = !!(activeWorkspace.name && activeWorkspace.icon);
|
|
|
|
|
|
|
|
const workspaceIcon = isActiveWorkspaceSaved ? (
|
2024-10-27 21:22:06 +01:00
|
|
|
<i className={makeIconClass(activeWorkspace.icon, false)} style={{ color: activeWorkspace.color }}></i>
|
2024-12-02 19:56:56 +01:00
|
|
|
) : (
|
|
|
|
<WorkspaceSVG />
|
2024-10-27 21:22:06 +01:00
|
|
|
);
|
2024-12-02 19:56:56 +01:00
|
|
|
|
|
|
|
const saveWorkspace = () => {
|
2024-12-10 01:24:32 +01:00
|
|
|
setObjectValue(
|
2024-12-10 01:52:59 +01:00
|
|
|
{
|
|
|
|
...activeWorkspace,
|
|
|
|
name: `New Workspace (${activeWorkspace.oid.slice(0, 5)})`,
|
|
|
|
icon: icons[0],
|
|
|
|
color: colors[0],
|
|
|
|
},
|
2024-12-10 01:24:32 +01:00
|
|
|
undefined,
|
|
|
|
true
|
|
|
|
);
|
2024-12-02 19:56:56 +01:00
|
|
|
setTimeout(() => {
|
|
|
|
fireAndForget(updateWorkspaceList);
|
|
|
|
}, 10);
|
2024-12-10 19:15:33 +01:00
|
|
|
setEditingWorkspace(activeWorkspace.oid);
|
2024-12-02 19:56:56 +01:00
|
|
|
};
|
2024-10-27 21:22:06 +01:00
|
|
|
|
|
|
|
return (
|
2024-12-03 07:23:44 +01:00
|
|
|
<Popover
|
|
|
|
className="workspace-switcher-popover"
|
|
|
|
placement="bottom-start"
|
|
|
|
onDismiss={() => setEditingWorkspace(null)}
|
|
|
|
>
|
2024-12-02 19:56:56 +01:00
|
|
|
<PopoverButton
|
|
|
|
className="workspace-switcher-button grey"
|
|
|
|
as="div"
|
|
|
|
onClick={() => {
|
|
|
|
fireAndForget(updateWorkspaceList);
|
|
|
|
}}
|
|
|
|
>
|
2024-10-27 21:22:06 +01:00
|
|
|
<span className="workspace-icon">{workspaceIcon}</span>
|
|
|
|
</PopoverButton>
|
|
|
|
<PopoverContent className="workspace-switcher-content">
|
2024-12-02 19:56:56 +01:00
|
|
|
<div className="title">{isActiveWorkspaceSaved ? "Switch workspace" : "Open workspace"}</div>
|
2024-10-27 21:22:06 +01:00
|
|
|
<OverlayScrollbarsComponent className={"scrollable"} options={{ scrollbars: { autoHide: "leave" } }}>
|
|
|
|
<ExpandableMenu noIndent singleOpen>
|
2024-12-02 19:56:56 +01:00
|
|
|
{workspaceList.map((entry, i) => (
|
|
|
|
<WorkspaceSwitcherItem key={i} entryAtom={entry} onDeleteWorkspace={onDeleteWorkspace} />
|
|
|
|
))}
|
2024-10-27 21:22:06 +01:00
|
|
|
</ExpandableMenu>
|
|
|
|
</OverlayScrollbarsComponent>
|
|
|
|
|
2024-12-07 00:33:00 +01:00
|
|
|
<div className="actions">
|
|
|
|
{isActiveWorkspaceSaved ? (
|
|
|
|
<ExpandableMenuItem onClick={() => getApi().createWorkspace()}>
|
|
|
|
<ExpandableMenuItemLeftElement>
|
|
|
|
<i className="fa-sharp fa-solid fa-plus"></i>
|
|
|
|
</ExpandableMenuItemLeftElement>
|
|
|
|
<div className="content">Create new workspace</div>
|
|
|
|
</ExpandableMenuItem>
|
|
|
|
) : (
|
2024-12-02 19:56:56 +01:00
|
|
|
<ExpandableMenuItem onClick={() => saveWorkspace()}>
|
|
|
|
<ExpandableMenuItemLeftElement>
|
|
|
|
<i className="fa-sharp fa-solid fa-floppy-disk"></i>
|
|
|
|
</ExpandableMenuItemLeftElement>
|
|
|
|
<div className="content">Save workspace</div>
|
|
|
|
</ExpandableMenuItem>
|
2024-12-07 00:33:00 +01:00
|
|
|
)}
|
|
|
|
</div>
|
2024-10-27 21:22:06 +01:00
|
|
|
</PopoverContent>
|
|
|
|
</Popover>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2024-12-02 19:56:56 +01:00
|
|
|
const WorkspaceSwitcherItem = ({
|
|
|
|
entryAtom,
|
|
|
|
onDeleteWorkspace,
|
|
|
|
}: {
|
|
|
|
entryAtom: PrimitiveAtom<WorkspaceListEntry>;
|
|
|
|
onDeleteWorkspace: (workspaceId: string) => void;
|
|
|
|
}) => {
|
|
|
|
const activeWorkspace = useAtomValueSafe(atoms.workspace);
|
|
|
|
const [workspaceEntry, setWorkspaceEntry] = useAtom(entryAtom);
|
|
|
|
const [editingWorkspace, setEditingWorkspace] = useAtom(editingWorkspaceAtom);
|
|
|
|
|
|
|
|
const workspace = workspaceEntry.workspace;
|
|
|
|
const isCurrentWorkspace = activeWorkspace.oid === workspace.oid;
|
|
|
|
|
|
|
|
const setWorkspace = useCallback((newWorkspace: Workspace) => {
|
2024-12-06 03:09:54 +01:00
|
|
|
if (newWorkspace.name != "") {
|
|
|
|
setObjectValue({ ...newWorkspace, otype: "workspace" }, undefined, true);
|
|
|
|
}
|
|
|
|
setWorkspaceEntry({ ...workspaceEntry, workspace: newWorkspace });
|
2024-12-02 19:56:56 +01:00
|
|
|
}, []);
|
|
|
|
|
|
|
|
const isActive = !!workspaceEntry.windowId;
|
|
|
|
const editIconDecl: IconButtonDecl = {
|
|
|
|
elemtype: "iconbutton",
|
|
|
|
className: "edit",
|
|
|
|
icon: "pencil",
|
|
|
|
title: "Edit workspace",
|
|
|
|
click: (e) => {
|
|
|
|
e.stopPropagation();
|
|
|
|
if (editingWorkspace === workspace.oid) {
|
|
|
|
setEditingWorkspace(null);
|
|
|
|
} else {
|
|
|
|
setEditingWorkspace(workspace.oid);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
};
|
|
|
|
const windowIconDecl: IconButtonDecl = {
|
|
|
|
elemtype: "iconbutton",
|
|
|
|
className: "window",
|
2024-12-04 23:16:50 +01:00
|
|
|
noAction: true,
|
2024-12-02 19:56:56 +01:00
|
|
|
icon: isCurrentWorkspace ? "check" : "window",
|
|
|
|
title: isCurrentWorkspace ? "This is your current workspace" : "This workspace is open",
|
|
|
|
};
|
|
|
|
|
|
|
|
const isEditing = editingWorkspace === workspace.oid;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ExpandableMenuItemGroup
|
|
|
|
key={workspace.oid}
|
|
|
|
isOpen={isEditing}
|
|
|
|
className={clsx({ "is-current": isCurrentWorkspace })}
|
|
|
|
>
|
|
|
|
<ExpandableMenuItemGroupTitle
|
|
|
|
onClick={() => {
|
|
|
|
getApi().switchWorkspace(workspace.oid);
|
|
|
|
// Create a fake escape key event to close the popover
|
|
|
|
document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
className="menu-group-title-wrapper"
|
|
|
|
style={
|
|
|
|
{
|
|
|
|
"--workspace-color": workspace.color,
|
|
|
|
} as CSSProperties
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<ExpandableMenuItemLeftElement>
|
|
|
|
<i
|
2024-12-10 19:15:33 +01:00
|
|
|
className={clsx("left-icon", makeIconClass(workspace.icon, true))}
|
2024-12-02 19:56:56 +01:00
|
|
|
style={{ color: workspace.color }}
|
|
|
|
/>
|
|
|
|
</ExpandableMenuItemLeftElement>
|
|
|
|
<div className="label">{workspace.name}</div>
|
|
|
|
<ExpandableMenuItemRightElement>
|
|
|
|
<div className="icons">
|
|
|
|
<IconButton decl={editIconDecl} />
|
|
|
|
{isActive && <IconButton decl={windowIconDecl} />}
|
|
|
|
</div>
|
|
|
|
</ExpandableMenuItemRightElement>
|
|
|
|
</div>
|
|
|
|
</ExpandableMenuItemGroupTitle>
|
|
|
|
<ExpandableMenuItem>
|
2024-12-10 21:26:42 +01:00
|
|
|
<WorkspaceEditor
|
2024-12-02 19:56:56 +01:00
|
|
|
title={workspace.name}
|
|
|
|
icon={workspace.icon}
|
|
|
|
color={workspace.color}
|
|
|
|
focusInput={isEditing}
|
|
|
|
onTitleChange={(title) => setWorkspace({ ...workspace, name: title })}
|
|
|
|
onColorChange={(color) => setWorkspace({ ...workspace, color })}
|
|
|
|
onIconChange={(icon) => setWorkspace({ ...workspace, icon })}
|
|
|
|
onDeleteWorkspace={() => onDeleteWorkspace(workspace.oid)}
|
|
|
|
/>
|
|
|
|
</ExpandableMenuItem>
|
|
|
|
</ExpandableMenuItemGroup>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2024-10-27 21:22:06 +01:00
|
|
|
export { WorkspaceSwitcher };
|