Cookie Support (#19)

2026-03-28 12:11:53 +01:00 · 2024-01-28 14:39:51 -08:00
parent 0555420ad9
commit 7d183c6580
45 changed files with 1152 additions and 145 deletions
--- a/src-web/components/CookieDropdown.tsx
+++ b/src-web/components/CookieDropdown.tsx
@@ -0,0 +1,93 @@
+import { useActiveCookieJar } from '../hooks/useActiveCookieJar';
+import { useCookieJars } from '../hooks/useCookieJars';
+import { useCreateCookieJar } from '../hooks/useCreateCookieJar';
+import { useDeleteCookieJar } from '../hooks/useDeleteCookieJar';
+import { usePrompt } from '../hooks/usePrompt';
+import { useUpdateCookieJar } from '../hooks/useUpdateCookieJar';
+import { CookieDialog } from './CookieDialog';
+import { Dropdown, type DropdownItem } from './core/Dropdown';
+import { Icon } from './core/Icon';
+import { IconButton } from './core/IconButton';
+import { InlineCode } from './core/InlineCode';
+import { useDialog } from './DialogContext';
+
+export function CookieDropdown() {
+  const cookieJars = useCookieJars();
+  const { activeCookieJar, setActiveCookieJarId } = useActiveCookieJar();
+  const updateCookieJar = useUpdateCookieJar(activeCookieJar?.id ?? null);
+  const deleteCookieJar = useDeleteCookieJar(activeCookieJar ?? null);
+  const createCookieJar = useCreateCookieJar();
+  const dialog = useDialog();
+  const prompt = usePrompt();
+
+  return (
+    <Dropdown
+      items={[
+        ...cookieJars.map((j) => ({
+          key: j.id,
+          label: j.name,
+          leftSlot: <Icon icon={j.id === activeCookieJar?.id ? 'check' : 'empty'} />,
+          onSelect: () => setActiveCookieJarId(j.id),
+        })),
+        ...((cookieJars.length > 0 && activeCookieJar != null
+          ? [
+              { type: 'separator', label: activeCookieJar.name },
+              {
+                key: 'manage',
+                label: 'Manage Cookies',
+                leftSlot: <Icon icon="cookie" />,
+                onSelect: () => {
+                  if (activeCookieJar == null) return;
+                  dialog.show({
+                    id: 'cookies',
+                    title: 'Manage Cookies',
+                    size: 'full',
+                    render: () => <CookieDialog cookieJarId={activeCookieJar.id} />,
+                  });
+                },
+              },
+              {
+                key: 'rename',
+                label: 'Rename',
+                leftSlot: <Icon icon="pencil" />,
+                onSelect: async () => {
+                  const name = await prompt({
+                    title: 'Rename Cookie Jar',
+                    description: (
+                      <>
+                        Enter a new name for <InlineCode>{activeCookieJar?.name}</InlineCode>
+                      </>
+                    ),
+                    name: 'name',
+                    label: 'Name',
+                    defaultValue: activeCookieJar?.name,
+                  });
+                  updateCookieJar.mutate({ name });
+                },
+              },
+              ...((cookieJars.length > 1 // Never delete the last one
+                ? [
+                    {
+                      key: 'delete',
+                      label: 'Delete',
+                      leftSlot: <Icon icon="trash" />,
+                      variant: 'danger',
+                      onSelect: () => deleteCookieJar.mutateAsync(),
+                    },
+                  ]
+                : []) as DropdownItem[]),
+            ]
+          : []) as DropdownItem[]),
+        { type: 'separator' },
+        {
+          key: 'create-cookie-jar',
+          label: 'New Cookie Jar',
+          leftSlot: <Icon icon="plus" />,
+          onSelect: () => createCookieJar.mutate(),
+        },
+      ]}
+    >
+      <IconButton size="sm" icon="cookie" title="Cookie Jar" />
+    </Dropdown>
+  );
+}