Initial commitHEADmain

Created from https://vercel.com/new

1 files changed, 84 insertions, 0 deletions

diff --git a/src/components/input/SettingsButton.tsx b/src/components/input/SettingsButton.tsx
new file mode 100644
index 0000000..bd51fb5
--- /dev/null
+++ b/src/components/input/SettingsButton.tsx
@@ -0,0 +1,84 @@
+import {
+  Button,
+  Icon,
+  Menu,
+  MenuItem,
+  MenuSection,
+  MenuSeparator,
+  MenuTrigger,
+  Popover,
+} from '@umami/react-zen';
+import type { Key } from 'react';
+import { useConfig, useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
+import {
+  BookText,
+  ExternalLink,
+  LifeBuoy,
+  LockKeyhole,
+  LogOut,
+  Settings,
+  UserCircle,
+} from '@/components/icons';
+import { DOCS_URL } from '@/lib/constants';
+
+export function SettingsButton() {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useLoginQuery();
+  const { router } = useNavigation();
+  const { cloudMode } = useConfig();
+
+  const handleAction = (id: Key) => {
+    const url = id.toString();
+
+    if (cloudMode) {
+      if (url === '/docs') {
+        window.open(DOCS_URL, '_blank');
+      } else {
+        window.location.href = url;
+      }
+    } else {
+      router.push(url);
+    }
+  };
+
+  return (
+    <MenuTrigger>
+      <Button data-test="button-profile" variant="quiet" autoFocus={false}>
+        <Icon>
+          <UserCircle />
+        </Icon>
+      </Button>
+      <Popover placement="bottom end">
+        <Menu autoFocus="last" onAction={handleAction}>
+          <MenuSection title={user.username}>
+            <MenuSeparator />
+            <MenuItem id="/settings" icon={<Settings />} label={formatMessage(labels.settings)} />
+            {!cloudMode && user.isAdmin && (
+              <MenuItem id="/admin" icon={<LockKeyhole />} label={formatMessage(labels.admin)} />
+            )}
+            {cloudMode && (
+              <>
+                <MenuItem
+                  id="/docs"
+                  icon={<BookText />}
+                  label={formatMessage(labels.documentation)}
+                >
+                  <Icon color="muted">
+                    <ExternalLink />
+                  </Icon>
+                </MenuItem>
+                <MenuItem
+                  id="/settings/support"
+                  icon={<LifeBuoy />}
+                  label={formatMessage(labels.support)}
+                />
+              </>
+            )}
+            <MenuSeparator />
+            <MenuItem id="/logout" icon={<LogOut />} label={formatMessage(labels.logout)} />
+          </MenuSection>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  );
+}