From 99d8922bb454642e25e6584b70b4a860db375f80 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Tue, 2 Sep 2025 17:06:17 -0700
Subject: [PATCH] feat: basic add card drawer

---
 .../addCardDrawer/AddCardDrawer.tsx           | 140 ++++++++++++++++++
 .../cards/lib/mutations/useAddCard.tsx        |  35 +++++
 .../collectionSelector/CollectionSelector.tsx | 107 +++++++++++++
 .../Error.CollectionSelector.tsx              |   5 +
 .../Skeleton.CollectionSelector.tsx           |  13 ++
 .../CollectionSelectorItem.module.css         |  15 ++
 .../CollectionSelectorItem.tsx                |  52 +++++++
 .../composerDrawer/ComposerDrawer.tsx         |   3 +-
 src/webapp/providers/drawers.tsx              |   9 +-
 src/webapp/styles/theme.tsx                   |   8 +
 10 files changed, 384 insertions(+), 3 deletions(-)
 create mode 100644 src/webapp/features/cards/components/addCardDrawer/AddCardDrawer.tsx
 create mode 100644 src/webapp/features/cards/lib/mutations/useAddCard.tsx
 create mode 100644 src/webapp/features/collections/components/collectionSelector/CollectionSelector.tsx
 create mode 100644 src/webapp/features/collections/components/collectionSelector/Error.CollectionSelector.tsx
 create mode 100644 src/webapp/features/collections/components/collectionSelector/Skeleton.CollectionSelector.tsx
 create mode 100644 src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.module.css
 create mode 100644 src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.tsx

diff --git a/src/webapp/features/cards/components/addCardDrawer/AddCardDrawer.tsx b/src/webapp/features/cards/components/addCardDrawer/AddCardDrawer.tsx
new file mode 100644
index 00000000..8e6b4e44
--- /dev/null
+++ b/src/webapp/features/cards/components/addCardDrawer/AddCardDrawer.tsx
@@ -0,0 +1,140 @@
+import {
+  Button,
+  Container,
+  Drawer,
+  Grid,
+  Group,
+  Stack,
+  Textarea,
+  TextInput,
+} from '@mantine/core';
+import { useForm } from '@mantine/form';
+
+import { notifications } from '@mantine/notifications';
+import useAddCard from '../../lib/mutations/useAddCard';
+import CollectionSelector from '@/features/collections/components/collectionSelector/CollectionSelector';
+import { Suspense, useState } from 'react';
+import CollectionSelectorSkeleton from '@/features/collections/components/collectionSelector/Skeleton.CollectionSelector';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedCollection?: { id: string; name: string; description?: string };
+}
+
+export default function AddCardDrawer(props: Props) {
+  const initialCollections = props.selectedCollection
+    ? [props.selectedCollection]
+    : [];
+  const [selectedCollections, setSelectedCollections] =
+    useState<{ id: string; name: string; description?: string }[]>(
+      initialCollections,
+    );
+  const addCard = useAddCard();
+
+  const form = useForm({
+    initialValues: {
+      url: '',
+      note: '',
+      collections: initialCollections,
+    },
+  });
+
+  const handleCreateCollection = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    addCard.mutate(
+      {
+        url: form.getValues().url,
+        note: form.getValues().note,
+        collectionIds: selectedCollections.map((c) => c.id),
+      },
+      {
+        onSuccess: () => {
+          notifications.show({
+            message: 'Added card.',
+          });
+          props.onClose();
+        },
+        onError: () => {
+          notifications.show({
+            message: 'Could not add card.',
+          });
+        },
+        onSettled: () => {
+          form.reset();
+        },
+      },
+    );
+  };
+
+  return (
+    <Drawer
+      opened={props.isOpen}
+      onClose={props.onClose}
+      withCloseButton={false}
+      position="bottom"
+      overlayProps={{
+        blur: 3,
+        gradient:
+          'linear-gradient(0deg, rgba(204, 255, 0, 0.5), rgba(255, 255, 255, 0.5))',
+      }}
+      size={'lg'}
+    >
+      <Drawer.Header>
+        <Drawer.Title fz={'xl'} fw={600} mx={'auto'}>
+          New Card
+        </Drawer.Title>
+      </Drawer.Header>
+      <Container size={'sm'}>
+        <form onSubmit={handleCreateCollection}>
+          <Stack>
+            <Grid gutter={'md'}>
+              <Grid.Col span={{ base: 12, sm: 6 }}>
+                <Stack>
+                  <TextInput
+                    id="url"
+                    label="URL"
+                    type="url"
+                    placeholder="https://www.example.com"
+                    variant="filled"
+                    required
+                    key={form.key('url')}
+                    {...form.getInputProps('url')}
+                  />
+
+                  <Textarea
+                    id="note"
+                    label="Note"
+                    placeholder="Add a note about this card"
+                    variant="filled"
+                    rows={10}
+                    maxLength={500}
+                    key={form.key('note')}
+                    {...form.getInputProps('note')}
+                  />
+                </Stack>
+              </Grid.Col>
+              <Grid.Col span={{ base: 12, sm: 6 }}>
+                <Suspense fallback={<CollectionSelectorSkeleton />}>
+                  <CollectionSelector
+                    selectedCollections={selectedCollections}
+                    onSelectedCollectionsChange={setSelectedCollections}
+                  />
+                </Suspense>
+              </Grid.Col>
+            </Grid>
+            <Group justify="space-between">
+              <Button variant="outline" color={'gray'} onClick={props.onClose}>
+                Cancel
+              </Button>
+              <Button type="submit" loading={addCard.isPending}>
+                Add card
+              </Button>
+            </Group>
+          </Stack>
+        </form>
+      </Container>
+    </Drawer>
+  );
+}
diff --git a/src/webapp/features/cards/lib/mutations/useAddCard.tsx b/src/webapp/features/cards/lib/mutations/useAddCard.tsx
new file mode 100644
index 00000000..3b340910
--- /dev/null
+++ b/src/webapp/features/cards/lib/mutations/useAddCard.tsx
@@ -0,0 +1,35 @@
+import { ApiClient } from '@/api-client/ApiClient';
+import { getAccessToken } from '@/services/auth';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+export default function useAddCard() {
+  const apiClient = new ApiClient(
+    process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3000',
+    () => getAccessToken(),
+  );
+
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: (newCard: {
+      url: string;
+      note?: string;
+      collectionIds?: string[];
+    }) => {
+      return apiClient.addUrlToLibrary({
+        url: newCard.url,
+        note: newCard.note,
+        collectionIds: newCard.collectionIds,
+      });
+    },
+
+    // Do things that are absolutely necessary and logic related (like query invalidation) in the useMutation callbacks
+    // Do UI related things like redirects or showing toast notifications in mutate callbacks. If the user navigated away from the current screen before the mutation finished, those will purposefully not fire
+    // https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['my cards'] });
+    },
+  });
+
+  return mutation;
+}
diff --git a/src/webapp/features/collections/components/collectionSelector/CollectionSelector.tsx b/src/webapp/features/collections/components/collectionSelector/CollectionSelector.tsx
new file mode 100644
index 00000000..c991a0df
--- /dev/null
+++ b/src/webapp/features/collections/components/collectionSelector/CollectionSelector.tsx
@@ -0,0 +1,107 @@
+import { ScrollArea, Stack, Tabs } from '@mantine/core';
+import useCollections from '../../lib/queries/useCollections';
+import CollectionSelectorError from './Error.CollectionSelector';
+import CollectionSelectorItem from '../collectionSelectorItem/CollectionSelectorItem';
+
+interface Props {
+  selectedCollections: { id: string; name: string; description?: string }[];
+  onSelectedCollectionsChange: (
+    collectionIds: { id: string; name: string; description?: string }[],
+  ) => void;
+}
+
+export default function CollectionSelector(props: Props) {
+  const { data, error } = useCollections();
+
+  if (error) {
+    return <CollectionSelectorError />;
+  }
+
+  return (
+    <Stack>
+      {/* <TextInput
+        placeholder="Search for collections"
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+        size="sm"
+        variant="filled"
+        id="search"
+        label="Collections"
+      /> */}
+      <Tabs defaultValue={'recent'}>
+        <Tabs.List grow>
+          <Tabs.Tab value="recent">Recent Collections</Tabs.Tab>
+          <Tabs.Tab value="selected">
+            Selected ({props.selectedCollections.length})
+          </Tabs.Tab>
+        </Tabs.List>
+
+        <Tabs.Panel value="recent" my={'xs'} w={'100%'}>
+          <ScrollArea h={280}>
+            <Stack gap={'xs'}>
+              {data.collections.map((c) => (
+                <CollectionSelectorItem
+                  key={c.id}
+                  name={c.name}
+                  description={c.description}
+                  value={c.id}
+                  checked={
+                    !!props.selectedCollections.find((col) => col.id === c.id)
+                  }
+                  onChange={(checked, item) => {
+                    if (checked) {
+                      // Add the item if it's not already selected
+                      if (
+                        !props.selectedCollections.some(
+                          (col) => col.id === item.id,
+                        )
+                      ) {
+                        props.onSelectedCollectionsChange([
+                          ...props.selectedCollections,
+                          item,
+                        ]);
+                      }
+                    } else {
+                      // Remove the item
+                      props.onSelectedCollectionsChange(
+                        props.selectedCollections.filter(
+                          (col) => col.id !== item.id,
+                        ),
+                      );
+                    }
+                  }}
+                />
+              ))}
+            </Stack>
+          </ScrollArea>
+        </Tabs.Panel>
+        <Tabs.Panel value="selected" my="xs">
+          <ScrollArea h={280}>
+            <Stack gap="xs">
+              {props.selectedCollections.map((c) => (
+                <CollectionSelectorItem
+                  key={c.id}
+                  name={c.name}
+                  description={c.description}
+                  value={c.id}
+                  checked={true}
+                  onChange={(checked, item) => {
+                    if (!checked) {
+                      // Deselect the item
+                      props.onSelectedCollectionsChange(
+                        props.selectedCollections.filter(
+                          (col) => col.id !== item.id,
+                        ),
+                      );
+                    }
+                    // If re-selecting in "selected" tab, do nothing
+                  }}
+                />
+              ))}
+            </Stack>
+          </ScrollArea>
+        </Tabs.Panel>
+      </Tabs>
+    </Stack>
+  );
+}
diff --git a/src/webapp/features/collections/components/collectionSelector/Error.CollectionSelector.tsx b/src/webapp/features/collections/components/collectionSelector/Error.CollectionSelector.tsx
new file mode 100644
index 00000000..c4143db8
--- /dev/null
+++ b/src/webapp/features/collections/components/collectionSelector/Error.CollectionSelector.tsx
@@ -0,0 +1,5 @@
+import { Alert } from '@mantine/core';
+
+export default function CollectionSelectorError() {
+  return <Alert color="red" title="Could not load collections" />;
+}
diff --git a/src/webapp/features/collections/components/collectionSelector/Skeleton.CollectionSelector.tsx b/src/webapp/features/collections/components/collectionSelector/Skeleton.CollectionSelector.tsx
new file mode 100644
index 00000000..084d4e7a
--- /dev/null
+++ b/src/webapp/features/collections/components/collectionSelector/Skeleton.CollectionSelector.tsx
@@ -0,0 +1,13 @@
+import { Loader, Skeleton, Stack } from '@mantine/core';
+
+export default function CollectionSelectorSkeleton() {
+  return (
+    <Stack gap={"xs"}>
+      <Skeleton w={'100%'} h={50} />
+      <Skeleton w={'100%'} h={50} />
+      <Skeleton w={'100%'} h={50} />
+      <Skeleton w={'100%'} h={50} />
+      <Skeleton w={'100%'} h={50} />
+    </Stack>
+  );
+}
diff --git a/src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.module.css b/src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.module.css
new file mode 100644
index 00000000..113c027f
--- /dev/null
+++ b/src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.module.css
@@ -0,0 +1,15 @@
+.root {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-lg);
+
+  &:hover {
+    background-color: var(--mantine-color-gray-light);
+  }
+
+  &[data-checked] {
+    border-color: var(--mantine-color-blue-6);
+    background-color: var(--mantine-color-blue-light);
+  }
+}
diff --git a/src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.tsx b/src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.tsx
new file mode 100644
index 00000000..b2306e47
--- /dev/null
+++ b/src/webapp/features/collections/components/collectionSelectorItem/CollectionSelectorItem.tsx
@@ -0,0 +1,52 @@
+import {
+  CheckboxCard,
+  CheckboxIndicator,
+  Group,
+  Stack,
+  Text,
+} from '@mantine/core';
+import classes from './CollectionSelectorItem.module.css';
+
+interface Props {
+  value: string;
+  name: string;
+  description?: string;
+  checked: boolean;
+  onChange: (
+    checked: boolean,
+    item: { id: string; name: string; description?: string },
+  ) => void;
+}
+
+export default function CollectionSelectorItem(props: Props) {
+  return (
+    <CheckboxCard
+      radius={'lg'}
+      p={'sm'}
+      className={classes.root}
+      value={props.value}
+      checked={props.checked}
+      onChange={(checked) =>
+        props.onChange(checked, {
+          id: props.value,
+          name: props.name,
+          description: props.description,
+        })
+      }
+    >
+      <Group justify="space-between">
+        <Stack gap={0}>
+          <Text fw={500} lineClamp={1}>
+            {props.name}
+          </Text>
+          {props.description && (
+            <Text c={'gray'} lineClamp={2}>
+              {props.description}
+            </Text>
+          )}
+        </Stack>
+        <CheckboxIndicator />
+      </Group>
+    </CheckboxCard>
+  );
+}
diff --git a/src/webapp/features/composer/components/composerDrawer/ComposerDrawer.tsx b/src/webapp/features/composer/components/composerDrawer/ComposerDrawer.tsx
index 1a7c7c73..fb993173 100644
--- a/src/webapp/features/composer/components/composerDrawer/ComposerDrawer.tsx
+++ b/src/webapp/features/composer/components/composerDrawer/ComposerDrawer.tsx
@@ -73,8 +73,7 @@ export default function ComposerDrawer() {
           py={0}
         >
           <Menu.Item
-            component={Link}
-            href="/cards/add"
+            onClick={() => drawers.open({ drawer: 'addCard' })}
             p={0}
             style={{ cursor: 'pointer' }}
           >
diff --git a/src/webapp/providers/drawers.tsx b/src/webapp/providers/drawers.tsx
index 58a08f4c..60caea14 100644
--- a/src/webapp/providers/drawers.tsx
+++ b/src/webapp/providers/drawers.tsx
@@ -1,3 +1,4 @@
+import AddCardDrawer from '@/features/cards/components/addCardDrawer/AddCardDrawer';
 import CreateCollectionDrawer from '@/features/collections/components/createCollectionDrawer/CreateCollectionDrawer';
 
 import React, {
@@ -8,10 +9,11 @@ import React, {
   ReactNode,
 } from 'react';
 
-type DrawerName = 'createCollection';
+type DrawerName = 'createCollection' | 'addCard';
 
 type DrawerPropsMap = {
   createCollection: {};
+  addCard: {};
 };
 
 interface DrawerState<T = any> {
@@ -79,6 +81,11 @@ export const DrawersProvider = ({ children }: { children: ReactNode }) => {
         onClose={close}
         {...state.innerProps}
       />
+      <AddCardDrawer
+        isOpen={isOpen('addCard')}
+        onClose={close}
+        {...state.innerProps}
+      />
     </DrawersContext.Provider>
   );
 };
diff --git a/src/webapp/styles/theme.tsx b/src/webapp/styles/theme.tsx
index 341d83fd..7e7b8dad 100644
--- a/src/webapp/styles/theme.tsx
+++ b/src/webapp/styles/theme.tsx
@@ -4,6 +4,9 @@ import {
   Anchor,
   Avatar,
   Button,
+  Checkbox,
+  CheckboxCard,
+  CheckboxIndicator,
   createTheme,
   MenuItem,
   NavLink,
@@ -91,5 +94,10 @@ export const theme = createTheme({
         fw: 600,
       },
     }),
+    CheckboxIndicator: CheckboxIndicator.extend({
+      defaultProps: {
+        radius: 'xl',
+      },
+    }),
   },
 });
-- 
2.51.2