alinea
Version:
[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)
237 lines (233 loc) • 10.2 kB
JavaScript
import {
Ge
} from "../../chunks/chunk-EZAMUCJM.js";
import "../../chunks/chunk-B5OJDF23.js";
import "../../chunks/chunk-PB6GIAHT.js";
import "../../chunks/chunk-QMGXID4H.js";
import "../../chunks/chunk-KO7U3IBJ.js";
import "../../chunks/chunk-QEHUZJO2.js";
import {
p
} from "../../chunks/chunk-57QP2MGK.js";
import {
useAtomValue,
useSetAtom
} from "../../chunks/chunk-WF77DMLN.js";
import "../../chunks/chunk-OBOPLPUQ.js";
import "../../chunks/chunk-U5RRZUYZ.js";
// src/dashboard/view/Toolbar.tsx
import { Root as AlineaRoot, Config, Workspace } from "alinea/core";
import { entries, fromEntries } from "alinea/core/util/Objects";
import { link, useNavigate } from "alinea/dashboard/util/HashRouter";
import { select } from "alinea/input/select";
import { Icon, TextLabel, VStack, fromModule, px } from "alinea/ui";
import { Avatar } from "alinea/ui/Avatar";
import { DropdownMenu } from "alinea/ui/DropdownMenu";
import { PopoverMenu } from "alinea/ui/PopoverMenu";
import { HStack } from "alinea/ui/Stack";
import { LogoShape } from "alinea/ui/branding/LogoShape";
import { IcOutlineScreenshot } from "alinea/ui/icons/IcOutlineScreenshot";
import { IcRoundKeyboardArrowDown } from "alinea/ui/icons/IcRoundKeyboardArrowDown";
import { IcRoundKeyboardArrowUp } from "alinea/ui/icons/IcRoundKeyboardArrowUp";
import { IcRoundMenu } from "alinea/ui/icons/IcRoundMenu";
import { IcRoundTextFields } from "alinea/ui/icons/IcRoundTextFields";
import { IcRoundUnfoldMore } from "alinea/ui/icons/IcRoundUnfoldMore";
import { IcSharpBrightnessMedium } from "alinea/ui/icons/IcSharpBrightnessMedium";
import { RiFlashlightFill } from "alinea/ui/icons/RiFlashlightFill";
import { contrastColor } from "alinea/ui/util/ContrastColor";
import { createSlots } from "alinea/ui/util/Slots";
import { dashboardOptionsAtom } from "../atoms/DashboardAtoms.js";
import { navAtom, workspaceAtom } from "../atoms/NavigationAtoms.js";
import {
preferencesAtom,
sizePreferenceAtom,
toggleSchemePreferenceAtom,
workspacePreferenceAtom
} from "../atoms/PreferencesAtoms.js";
import { accentColorAtom } from "../atoms/StyleAtoms.js";
import { useSession } from "../hook/UseSession.js";
import { AlineaLogo } from "./AlineaLogo.js";
import { IconButton } from "./IconButton.js";
import { useSidebar } from "./Sidebar.js";
// src/dashboard/view/Toolbar.module.scss
var Toolbar_module_default = {
"root": "alinea-Toolbar",
"root-menu": "alinea-Toolbar-menu",
"rootMenu": "alinea-Toolbar-menu",
"root-portal": "alinea-Toolbar-portal",
"rootPortal": "alinea-Toolbar-portal",
"root-portal-slot": "alinea-Toolbar-portal-slot",
"rootPortalSlot": "alinea-Toolbar-portal-slot",
"root-switch": "alinea-Toolbar-switch",
"rootSwitch": "alinea-Toolbar-switch",
"is-checked": "alinea-Toolbar-is-checked",
"isChecked": "alinea-Toolbar-is-checked",
"root-switch-slider": "alinea-Toolbar-switch-slider",
"rootSwitchSlider": "alinea-Toolbar-switch-slider",
"root-workspace": "alinea-Toolbar-workspace",
"rootWorkspace": "alinea-Toolbar-workspace"
};
// src/dashboard/view/Toolbar.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var styles = fromModule(Toolbar_module_default);
function WorkspaceLabel({ label, color, icon: Icon2 }) {
const symbol = Icon2 ? /* @__PURE__ */ jsx(Icon2, {}) : /* @__PURE__ */ jsx(RiFlashlightFill, {});
return /* @__PURE__ */ jsxs(HStack, { center: true, gap: 12, children: [
/* @__PURE__ */ jsx(LogoShape, { foreground: contrastColor(color), background: color, children: /* @__PURE__ */ jsx(AlineaLogo, {}) }),
/* @__PURE__ */ jsx("div", { style: { fontSize: "13px", fontWeight: 600 }, children: /* @__PURE__ */ jsx(TextLabel, { label }) })
] });
}
var Toolbar;
((Toolbar2) => {
({ Provider: Toolbar2.Provider, Portal: Toolbar2.Portal, Slot: Toolbar2.Slot } = createSlots());
function Root() {
const accentColor = useAtomValue(accentColorAtom);
const session = useSession();
const { config } = useAtomValue(dashboardOptionsAtom);
const nav = useAtomValue(navAtom);
const preferences = useAtomValue(preferencesAtom);
const size = preferences.size || 16;
const checked = preferences?.scheme === "dark";
const workspace = useAtomValue(workspaceAtom);
const navigate = useNavigate();
const { isNavOpen, isPreviewOpen, toggleNav, togglePreview } = useSidebar();
const workspaces = Object.entries(config.workspaces);
const [hue, saturation, lightness] = p(accentColor);
const style = {
"--alinea-hue": hue,
"--alinea-saturation": `${saturation * 100}%`,
"--alinea-lightness": `${lightness * 100}%`
};
const defaultWorkspace = select(
"Default workspace",
fromEntries(
entries(config.workspaces).map(([key, workspace2]) => {
return [key, Workspace.label(workspace2) || key];
})
)
);
const toggleSchemePreference = useSetAtom(toggleSchemePreferenceAtom);
const updateFontSize = useSetAtom(sizePreferenceAtom);
const updateWorkspace = useSetAtom(workspacePreferenceAtom);
return /* @__PURE__ */ jsxs(HStack, { center: true, gap: 12, className: styles.root(), style, children: [
/* @__PURE__ */ jsx("div", { className: styles.root.menu(), onClick: toggleNav, children: /* @__PURE__ */ jsx(IconButton, { icon: IcRoundMenu, active: isNavOpen }) }),
workspaces.length > 1 ? /* @__PURE__ */ jsxs(DropdownMenu.Root, { bottom: true, children: [
/* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsxs(HStack, { center: true, gap: 4, children: [
/* @__PURE__ */ jsx(
WorkspaceLabel,
{
label: workspace.label,
color: workspace.color,
icon: workspace.icon
}
),
/* @__PURE__ */ jsx(Icon, { icon: IcRoundUnfoldMore })
] }) }),
/* @__PURE__ */ jsx(DropdownMenu.Items, { children: workspaces.map(([key, workspace2]) => {
const { roots, label, color, icon } = Workspace.data(workspace2);
const [name, root] = entries(roots)[0];
return /* @__PURE__ */ jsx(
DropdownMenu.Item,
{
onClick: () => navigate(
nav.entry({
workspace: key,
root: name,
locale: AlineaRoot.defaultLocale(root)
})
),
children: /* @__PURE__ */ jsx(WorkspaceLabel, { label, color, icon })
},
key
);
}) })
] }) : /* @__PURE__ */ jsx(
"a",
{
...link(nav.root({ workspace: workspace.name })),
className: styles.root.workspace(),
children: /* @__PURE__ */ jsx(
WorkspaceLabel,
{
label: workspace.label,
color: workspace.color,
icon: workspace.icon
}
)
}
),
/* @__PURE__ */ jsx("div", { className: styles.root.portal(), children: /* @__PURE__ */ jsx(Toolbar2.Portal, { className: styles.root.portal.slot() }) }),
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(HStack, { center: true, gap: 10, children: [
/* @__PURE__ */ jsxs(PopoverMenu.Root, { children: [
/* @__PURE__ */ jsx(PopoverMenu.Trigger, { children: /* @__PURE__ */ jsxs(HStack, { center: true, gap: 4, children: [
/* @__PURE__ */ jsx(Avatar, { user: session.user }),
/* @__PURE__ */ jsx(IcRoundKeyboardArrowDown, {})
] }) }),
/* @__PURE__ */ jsx(PopoverMenu.Items, { right: true, children: /* @__PURE__ */ jsxs(VStack, { gap: 25, children: [
Config.hasAuth(config) && /* @__PURE__ */ jsx(PopoverMenu.Header, { children: /* @__PURE__ */ jsx("p", { children: session.user.sub.charAt(0).toUpperCase() + session.user.sub.slice(1) }) }),
/* @__PURE__ */ jsx(VStack, { gap: 15, children: /* @__PURE__ */ jsxs(HStack, { justify: "space-between", style: { padding: px(6) }, children: [
/* @__PURE__ */ jsxs(HStack, { center: true, gap: 16, children: [
/* @__PURE__ */ jsx(Icon, { icon: IcSharpBrightnessMedium, size: 20 }),
/* @__PURE__ */ jsx(
Ge,
{
checked,
onChange: toggleSchemePreference,
className: styles.root.switch({ checked }),
children: /* @__PURE__ */ jsx(
"span",
{
className: styles.root.switch.slider({
checked
})
}
)
}
)
] }),
/* @__PURE__ */ jsxs(HStack, { center: true, gap: 4, children: [
/* @__PURE__ */ jsx(
Icon,
{
icon: IcRoundTextFields,
size: 20,
style: { marginRight: px(12) }
}
),
/* @__PURE__ */ jsx(
IconButton,
{
icon: IcRoundKeyboardArrowDown,
onClick: () => updateFontSize(size - 1),
disabled: size <= 16
}
),
/* @__PURE__ */ jsx(
IconButton,
{
icon: IcRoundKeyboardArrowUp,
onClick: () => updateFontSize(size + 1),
disabled: size >= 40
}
)
] })
] }) }),
Config.hasAuth(config) && /* @__PURE__ */ jsx(PopoverMenu.Footer, { children: /* @__PURE__ */ jsx(DropdownMenu.Root, { children: /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick: session.end, children: "Logout" }) }) })
] }) })
] }),
/* @__PURE__ */ jsx(
IconButton,
{
icon: IcOutlineScreenshot,
onClick: togglePreview,
active: isPreviewOpen
}
)
] }) })
] });
}
Toolbar2.Root = Root;
})(Toolbar || (Toolbar = {}));
export {
Toolbar
};