fix(ui): Improve visual consistency in all lists and highlights page

5 files changed, 29 insertions, 21 deletions

diff --git a/apps/web/app/dashboard/highlights/page.tsx b/apps/web/app/dashboard/highlights/page.tsx
index 5945de00..ed0b16c0 100644
--- a/apps/web/app/dashboard/highlights/page.tsx
+++ b/apps/web/app/dashboard/highlights/page.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import AllHighlights from "@/components/dashboard/highlights/AllHighlights";
-import { Separator } from "@/components/ui/separator";
 import { useTranslation } from "@/lib/i18n/server";
 import { api } from "@/server/api/client";
 import { Highlighter } from "lucide-react";
@@ -18,13 +17,14 @@ export default async function HighlightsPage() {
   const { t } = await useTranslation();
   const highlights = await api.highlights.getAll({});
   return (
-    <div className="flex flex-col gap-8 rounded-md border bg-background p-4">
-      <span className="flex items-center gap-1 text-2xl">
-        <Highlighter className="size-6" />
-        {t("common.highlights")}
-      </span>
-      <Separator />
-      <AllHighlights highlights={highlights} />
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center">
+        <Highlighter className="mr-2" />
+        <p className="text-2xl">{t("common.highlights")}</p>
+      </div>
+      <div className="flex flex-col gap-8 rounded-md border bg-background p-4">
+        <AllHighlights highlights={highlights} />
+      </div>
     </div>
   );
 }
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>
diff --git a/apps/web/components/dashboard/lists/AllListsView.tsx b/apps/web/components/dashboard/lists/AllListsView.tsx
index 7a7c9504..52d65756 100644
--- a/apps/web/components/dashboard/lists/AllListsView.tsx
+++ b/apps/web/components/dashboard/lists/AllListsView.tsx
@@ -2,7 +2,6 @@
 
 import { useMemo, useState } from "react";
 import Link from "next/link";
-import { EditListModal } from "@/components/dashboard/lists/EditListModal";
 import { Button } from "@/components/ui/button";
 import {
   Collapsible,
@@ -10,7 +9,7 @@ import {
   CollapsibleTriggerChevron,
 } from "@/components/ui/collapsible";
 import { useTranslation } from "@/lib/i18n/client";
-import { MoreHorizontal, Plus } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 
 import type { ZBookmarkList } from "@karakeep/shared/types/lists";
 import {
@@ -89,12 +88,6 @@ export default function AllListsView({
 
   return (
     <ul>
-      <EditListModal>
-        <Button className="mb-2 flex h-full w-full items-center">
-          <Plus />
-          <span>{t("lists.new_list")}</span>
-        </Button>
-      </EditListModal>
       <ListItem
         collapsible={false}
         name={t("lists.favourites")}
diff --git a/apps/web/components/dashboard/lists/EditListModal.tsx b/apps/web/components/dashboard/lists/EditListModal.tsx
index 4a14eccb..21a61d65 100644
--- a/apps/web/components/dashboard/lists/EditListModal.tsx
+++ b/apps/web/components/dashboard/lists/EditListModal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
diff --git a/apps/web/components/dashboard/lists/PendingInvitationsCard.tsx b/apps/web/components/dashboard/lists/PendingInvitationsCard.tsx
index d893f4dc..95a916ff 100644
--- a/apps/web/components/dashboard/lists/PendingInvitationsCard.tsx
+++ b/apps/web/components/dashboard/lists/PendingInvitationsCard.tsx
@@ -142,9 +142,13 @@ export function PendingInvitationsCard() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2">
+        <CardTitle className="flex items-center gap-2 font-normal">
           <Mail className="h-5 w-5" />
-          {t("lists.invitations.pending")} ({invitations.length})
+          {t("lists.invitations.pending")}
+
+          <span className="rounded bg-secondary p-1 text-sm text-secondary-foreground">
+            {invitations.length}
+          </span>
         </CardTitle>
         <CardDescription>{t("lists.invitations.description")}</CardDescription>
       </CardHeader>