alinea
Version:
[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)
155 lines (151 loc) • 6.3 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 {
useAtomValue,
useSetAtom
} from "../../../chunks/chunk-WF77DMLN.js";
import "../../../chunks/chunk-OBOPLPUQ.js";
import "../../../chunks/chunk-U5RRZUYZ.js";
// src/dashboard/view/sidebar/SidebarSettings.tsx
import { Workspace } from "alinea/core";
import { entries, fromEntries } from "alinea/core/util/Objects";
import { select } from "alinea/input";
import { HStack, Icon, VStack, fromModule, px } from "alinea/ui";
import { DropdownMenu } from "alinea/ui/DropdownMenu";
import { Ellipsis } from "alinea/ui/Ellipsis";
import { PopoverMenu } from "alinea/ui/PopoverMenu";
import { IcBaselineAccountCircle } from "alinea/ui/icons/IcBaselineAccountCircle";
import { IcRoundKeyboardArrowDown } from "alinea/ui/icons/IcRoundKeyboardArrowDown";
import { IcRoundKeyboardArrowUp } from "alinea/ui/icons/IcRoundKeyboardArrowUp";
import { IcRoundTextFields } from "alinea/ui/icons/IcRoundTextFields";
import { IcSharpBrightnessMedium } from "alinea/ui/icons/IcSharpBrightnessMedium";
import { useMemo } from "react";
import { dashboardOptionsAtom } from "../../atoms/DashboardAtoms.js";
import {
preferencesAtom,
sizePreferenceAtom,
toggleSchemePreferenceAtom,
workspacePreferenceAtom
} from "../../atoms/PreferencesAtoms.js";
import { useSession } from "../../hook/UseSession.js";
import { IconButton } from "../IconButton.js";
import { Sidebar } from "../Sidebar.js";
// src/dashboard/view/sidebar/SidebarSettings.module.scss
var SidebarSettings_module_default = {
"root-switch": "alinea-SidebarSettings-switch",
"rootSwitch": "alinea-SidebarSettings-switch",
"is-checked": "alinea-SidebarSettings-is-checked",
"isChecked": "alinea-SidebarSettings-is-checked",
"root-switch-slider": "alinea-SidebarSettings-switch-slider",
"rootSwitchSlider": "alinea-SidebarSettings-switch-slider",
"root-username": "alinea-SidebarSettings-username",
"rootUsername": "alinea-SidebarSettings-username"
};
// src/dashboard/view/sidebar/SidebarSettings.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var styles = fromModule(SidebarSettings_module_default);
function SidebarSettings() {
const session = useSession();
const { config } = useAtomValue(dashboardOptionsAtom);
const preferences = useAtomValue(preferencesAtom);
const size = preferences.size || 16;
const checked = preferences?.scheme === "dark";
const workspaces = Object.entries(config.workspaces);
const defaultWorkspace = useMemo(
() => select(
"Default workspace",
fromEntries(
entries(config.workspaces).map(([key, workspace]) => {
return [key, Workspace.label(workspace) || key];
})
)
),
[config.workspaces]
);
const toggleSchemePreference = useSetAtom(toggleSchemePreferenceAtom);
const updateFontSize = useSetAtom(sizePreferenceAtom);
const updateWorkspace = useSetAtom(workspacePreferenceAtom);
function disableTransition(run) {
document.body.setAttribute("data-disable-transition", "true");
run();
setTimeout(() => document.body.removeAttribute("data-disable-transition"));
}
return /* @__PURE__ */ jsxs(DropdownMenu.Root, { top: true, style: { margin: "auto", marginBottom: 0 }, children: [
/* @__PURE__ */ jsx(DropdownMenu.Trigger, { style: { width: "100%" }, children: /* @__PURE__ */ jsx(Sidebar.Nav.Item, { "aria-label": "Settings", children: /* @__PURE__ */ jsx(Icon, { icon: IcBaselineAccountCircle }) }) }),
/* @__PURE__ */ jsx(DropdownMenu.Items, { style: { maxWidth: px(200) }, children: /* @__PURE__ */ jsxs(VStack, { gap: 10, children: [
session.user.name && /* @__PURE__ */ jsx(PopoverMenu.Header, { children: /* @__PURE__ */ jsxs(HStack, { center: true, gap: 10, className: styles.root.username(), children: [
/* @__PURE__ */ jsx(Icon, { icon: IcBaselineAccountCircle, size: 26 }),
/* @__PURE__ */ jsx(Ellipsis, { children: session.user.name })
] }) }),
/* @__PURE__ */ jsx(VStack, { gap: 8, 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,
title: "Switch theme"
}
),
/* @__PURE__ */ jsx(
Ge,
{
checked,
onChange: () => {
disableTransition(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) },
title: "Font size"
}
),
/* @__PURE__ */ jsx(
IconButton,
{
icon: IcRoundKeyboardArrowDown,
onClick: () => disableTransition(() => updateFontSize(size - 1)),
disabled: size <= 16,
title: "Decrease font size"
}
),
/* @__PURE__ */ jsx(
IconButton,
{
icon: IcRoundKeyboardArrowUp,
onClick: () => disableTransition(() => updateFontSize(size + 1)),
disabled: size >= 40,
title: "Increase font size"
}
)
] })
] }) }),
session.end && /* @__PURE__ */ jsx(PopoverMenu.Footer, { children: /* @__PURE__ */ jsx(DropdownMenu.Root, { children: /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick: session.end, children: "Logout" }) }) })
] }) })
] });
}
export {
SidebarSettings
};