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>

3 files changed, 29 insertions, 1 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">
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index 536bea57..5166d6bd 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -229,7 +229,8 @@
     "manual_list": "Manual List",
     "smart_list": "Smart List",
     "search_query": "Search Query",
-    "search_query_help": "Learn more about the search query language."
+    "search_query_help": "Learn more about the search query language.",
+    "description": "Description (Optional)"
   },
   "tags": {
     "all_tags": "All Tags",