From af3a587acaf641007c410e61579eeefe4836e8d7 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Mon, 19 Jan 2026 00:29:47 +0000
Subject: fix(ui): Improve visual consistency in all lists and highlights page

---
 apps/web/app/dashboard/lists/page.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

(limited to 'apps/web/app/dashboard/lists')

diff --git a/apps/web/app/dashboard/lists/page.tsx b/apps/web/app/dashboard/lists/page.tsx
index 7950cd76..2f9e54c6 100644
--- a/apps/web/app/dashboard/lists/page.tsx
+++ b/apps/web/app/dashboard/lists/page.tsx
@@ -1,8 +1,10 @@
 import AllListsView from "@/components/dashboard/lists/AllListsView";
+import { EditListModal } from "@/components/dashboard/lists/EditListModal";
 import { PendingInvitationsCard } from "@/components/dashboard/lists/PendingInvitationsCard";
-import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
 import { useTranslation } from "@/lib/i18n/server";
 import { api } from "@/server/api/client";
+import { Plus } from "lucide-react";
 
 export default async function ListsPage() {
   // oxlint-disable-next-line rules-of-hooks
@@ -11,10 +13,17 @@ export default async function ListsPage() {
 
   return (
     <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <p className="text-2xl">📋 {t("lists.all_lists")}</p>
+        <EditListModal>
+          <Button className="flex items-center">
+            <Plus className="mr-2 size-4" />
+            <span>{t("lists.new_list")}</span>
+          </Button>
+        </EditListModal>
+      </div>
       <PendingInvitationsCard />
       <div className="flex flex-col gap-3 rounded-md border bg-background p-4">
-        <p className="text-2xl">📋 {t("lists.all_lists")}</p>
-        <Separator />
         <AllListsView initialData={lists.lists} />
       </div>
     </div>
-- 
cgit v1.2.3-70-g09d2