feat(web): Optionally add short description to lists (#1225)

* feat(web): Optionally add short description to lists

* regenerate openapi spec

---------

Co-authored-by: Mohamed Bassem <me@mbassem.com>

2 files changed, 27 insertions, 0 deletions

diff --git a/apps/web/components/dashboard/lists/EditListModal.tsx b/apps/web/components/dashboard/lists/EditListModal.tsx
index 1851d416..2940a856 100644
--- a/apps/web/components/dashboard/lists/EditListModal.tsx
+++ b/apps/web/components/dashboard/lists/EditListModal.tsx
@@ -82,6 +82,7 @@ export function EditListModal({
     resolver: zodResolver(zNewBookmarkListSchema),
     defaultValues: {
       name: list?.name ?? prefill?.name ?? "",
+      description: list?.description ?? prefill?.description ?? "",
       icon: list?.icon ?? prefill?.icon ?? "🚀",
       parentId: list?.parentId ?? prefill?.parentId,
       type: list?.type ?? prefill?.type ?? "manual",
@@ -96,6 +97,7 @@ export function EditListModal({
   useEffect(() => {
     form.reset({
       name: list?.name ?? prefill?.name ?? "",
+      description: list?.description ?? prefill?.description ?? "",
       icon: list?.icon ?? prefill?.icon ?? "🚀",
       parentId: list?.parentId ?? prefill?.parentId,
       type: list?.type ?? prefill?.type ?? "manual",
@@ -261,6 +263,26 @@ export function EditListModal({
             </div>
             <FormField
               control={form.control}
+              name="description"
+              render={({ field }) => {
+                return (
+                  <FormItem className="grow pb-4">
+                    <FormLabel>{t("lists.description")}</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="text"
+                        className="w-full"
+                        placeholder="Description"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                );
+              }}
+            />
+            <FormField
+              control={form.control}
               name="parentId"
               render={({ field }) => {
                 return (
diff --git a/apps/web/components/dashboard/lists/ListHeader.tsx b/apps/web/components/dashboard/lists/ListHeader.tsx
index af4a3551..4e318dad 100644
--- a/apps/web/components/dashboard/lists/ListHeader.tsx
+++ b/apps/web/components/dashboard/lists/ListHeader.tsx
@@ -48,6 +48,11 @@ export default function ListHeader({
       <div className="flex items-center gap-2">
         <span className="text-2xl">
           {list.icon} {list.name}
+          {list.description && (
+            <span className="mx-2 text-lg text-gray-400">
+              {`(${list.description})`}
+            </span>
+          )}
         </span>
       </div>
       <div className="flex items-center">