Spaces:
Running
Running
File size: 3,822 Bytes
06b47dc |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
import {
Accordion,
ActionIcon,
Center,
Drawer,
type DrawerProps,
FocusTrap,
Group,
HoverCard,
Stack,
Tooltip,
} from "@mantine/core";
import { IconBrandGithub } from "@tabler/icons-react";
import { usePubSub } from "create-pubsub/react";
import prettyMilliseconds from "pretty-ms";
import { repository } from "../../../../../package.json";
import { appName, appVersion } from "../../../../modules/appInfo";
import { addLogEntry } from "../../../../modules/logEntries";
import { menuExpandedAccordionsPubSub } from "../../../../modules/pubSub";
import ActionsForm from "./ActionsForm";
import AISettingsForm from "./AISettings/AISettingsForm";
import InterfaceSettingsForm from "./InterfaceSettingsForm";
import SearchSettingsForm from "./SearchSettingsForm";
import VoiceSettingsForm from "./VoiceSettingsForm";
export default function MenuDrawer(drawerProps: DrawerProps) {
const [menuExpandedAccordions, updateMenuExpandedAccordions] = usePubSub(
menuExpandedAccordionsPubSub,
);
return (
<Drawer
{...drawerProps}
position="right"
size="md"
title={
<Group gap="xs">
<Tooltip label="View source code on GitHub">
<ActionIcon
variant="subtle"
component="a"
color="var(--mantine-color-text)"
href={repository.url}
target="_blank"
onClick={() => addLogEntry("User clicked the GitHub link")}
>
<IconBrandGithub size={16} />
</ActionIcon>
</Tooltip>
<HoverCard shadow="md" withArrow>
<HoverCard.Target>
<Center>{appName}</Center>
</HoverCard.Target>
<HoverCard.Dropdown>
<Stack gap="xs">
<Center>{appName}</Center>
<Center>{`v${appVersion}`}</Center>
<Center>
Released{" "}
{prettyMilliseconds(
Date.now() - new Date(VITE_BUILD_DATE_TIME).getTime(),
{
compact: true,
verbose: true,
},
)}{" "}
ago
</Center>
</Stack>
</HoverCard.Dropdown>
</HoverCard>
</Group>
}
>
<FocusTrap.InitialFocus />
<Drawer.Body>
<Accordion
variant="separated"
multiple
value={menuExpandedAccordions}
onChange={updateMenuExpandedAccordions}
>
<Accordion.Item value="aiSettings">
<Accordion.Control>AI Settings</Accordion.Control>
<Accordion.Panel>
<AISettingsForm />
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="searchSettings">
<Accordion.Control>Search Settings</Accordion.Control>
<Accordion.Panel>
<SearchSettingsForm />
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="interfaceSettings">
<Accordion.Control>Interface Settings</Accordion.Control>
<Accordion.Panel>
<InterfaceSettingsForm />
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="voiceSettings">
<Accordion.Control>Voice Settings</Accordion.Control>
<Accordion.Panel>
<VoiceSettingsForm />
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="actions">
<Accordion.Control>Actions</Accordion.Control>
<Accordion.Panel>
<ActionsForm />
</Accordion.Panel>
</Accordion.Item>
</Accordion>
</Drawer.Body>
</Drawer>
);
}
|