fix: polish public list sharing experience

.nvmrc

@@ -1 +1 @@
-24
+24.18.1

CONTRIBUTING.md

@@ -29,7 +29,7 @@ Start here:
 ## Local setup
 
 This fork uses:
-- Node 24 (`.nvmrc`)
+- Node 24.18.1 (`.nvmrc`; temporarily pinned to avoid the Node 24.19 native-addon cleanup regression)
 - `pnpm@11.2.1` via corepack
 - root `.env` symlinked into `apps/web`, `apps/workers`, and `packages/db`
 

apps/web/app/public/layout.tsx

@@ -4,8 +4,10 @@ export default function PublicLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="h-screen items-center justify-center overflow-y-auto bg-muted">
-      <main className="container mt-3">{children}</main>
+    <div className="min-h-screen bg-background text-foreground">
+      <main className="mx-auto w-full max-w-7xl px-3 py-4 sm:px-6 sm:py-6 lg:px-8">
+        {children}
+      </main>
     </div>
   );
 }

apps/web/app/public/lists/[listId]/not-found.tsx

@@ -1,15 +1,32 @@
-import { EmptyState } from "@/components/shared/EmptyState";
-import { SearchX } from "lucide-react";
+import Link from "next/link";
+import KarakeepLogo from "@/components/KarakeepIcon";
+import { Button } from "@/components/ui/button";
+import { Home, SearchX } from "lucide-react";
 
 export default function PublicListPageNotFound() {
   return (
-    <div className="mx-auto flex max-w-xl flex-1 items-center justify-center px-4 py-16">
-      <EmptyState
-        icon={<SearchX strokeWidth={1.75} />}
-        title="List not found"
-        titleAs="h1"
-        description="The list you’re looking for doesn’t exist, is no longer public, or may have been removed."
-      />
+    <div className="flex min-h-[calc(100vh-2rem)] items-center justify-center py-8 sm:min-h-[calc(100vh-3rem)]">
+      <div className="w-full max-w-md text-center">
+        <Link href="/" aria-label="Karakeep home" className="inline-flex">
+          <KarakeepLogo height={32} />
+        </Link>
+        <div className="mx-auto mt-8 flex size-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
+          <SearchX className="size-7" strokeWidth={1.75} />
+        </div>
+        <h1 className="mt-5 text-2xl font-semibold tracking-tight">
+          This list isn’t available
+        </h1>
+        <p className="mx-auto mt-2 max-w-sm text-sm leading-6 text-muted-foreground sm:text-base">
+          This list may have been made private, deleted, or the link may be
+          incorrect.
+        </p>
+        <Button asChild className="mt-6">
+          <Link href="/">
+            <Home className="size-4" />
+            Go to Karakeep
+          </Link>
+        </Button>
+      </div>
     </div>
   );
 }

apps/web/app/public/lists/[listId]/page.tsx

@@ -47,28 +47,22 @@ export default async function PublicListPage(props: {
       await api.publicBookmarks.getPublicBookmarksInList({
         listId: params.listId,
       });
+    const publicList = {
+      id: params.listId,
+      name: list.name,
+      description: list.description,
+      icon: list.icon,
+      numItems: list.numItems,
+      ownerName: list.ownerName,
+      ownerImage: list.ownerImage,
+    };
+
     return (
-      <div className="mx-auto w-full max-w-7xl space-y-5">
-        <PublicListHeader
-          list={{
-            id: params.listId,
-            name: list.name,
-            description: list.description,
-            icon: list.icon,
-            numItems: list.numItems,
-            ownerName: list.ownerName,
-          }}
-        />
+      <div className="mx-auto w-full space-y-4 sm:space-y-5">
+        <PublicListHeader list={publicList} />
         {list.numItems > 0 ? (
           <PublicBookmarkGrid
-            list={{
-              id: params.listId,
-              name: list.name,
-              description: list.description,
-              icon: list.icon,
-              numItems: list.numItems,
-              ownerName: list.ownerName,
-            }}
+            list={publicList}
             bookmarks={bookmarks}
             nextCursor={nextCursor}
           />
@@ -77,7 +71,7 @@ export default async function PublicListPage(props: {
             icon={<BookmarkIcon className="size-7" />}
             title="This public list is empty"
             description="The list has been shared, but it does not have any bookmarks in it yet."
-            className="shadow-xs rounded-2xl border-border/70 bg-card/90"
+            className="rounded-2xl border-border/80 bg-card"
           />
         )}
       </div>

apps/web/components/dashboard/lists/ManageCollaboratorsModal.tsx

@@ -210,8 +210,8 @@ export function ManageCollaboratorsModal({
           {!readOnly && (
             <div className="space-y-3">
               <Label>{t("lists.collaborators.add")}</Label>
-              <div className="flex gap-2">
-                <div className="flex-1">
+              <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_8rem_auto]">
+                <div className="min-w-0">
                   <Input
                     type="email"
                     placeholder={t("lists.collaborators.enter_email")}
@@ -224,34 +224,44 @@ export function ManageCollaboratorsModal({
                     }}
                   />
                 </div>
-                <Select
-                  value={newCollaboratorRole}
-                  onValueChange={(value) =>
-                    setNewCollaboratorRole(value as "viewer" | "editor")
-                  }
-                >
-                  <SelectTrigger className="w-32">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="viewer">
-                      {t("lists.collaborators.viewer")}
-                    </SelectItem>
-                    <SelectItem value="editor">
-                      {t("lists.collaborators.editor")}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-                <Button
-                  onClick={handleAddCollaborator}
-                  disabled={addCollaborator.isPending}
-                >
-                  {addCollaborator.isPending ? (
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                  ) : (
-                    <UserPlus className="h-4 w-4" />
-                  )}
-                </Button>
+                <div className="grid grid-cols-2 gap-2 sm:contents">
+                  <Select
+                    value={newCollaboratorRole}
+                    onValueChange={(value) =>
+                      setNewCollaboratorRole(value as "viewer" | "editor")
+                    }
+                  >
+                    <SelectTrigger
+                      className="h-10 w-full sm:w-32"
+                      aria-label={`${t("lists.collaborators.add")} ${t("common.role")}`}
+                    >
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="viewer">
+                        {t("lists.collaborators.viewer")}
+                      </SelectItem>
+                      <SelectItem value="editor">
+                        {t("lists.collaborators.editor")}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    className="h-10 w-full gap-2 sm:w-auto"
+                    onClick={handleAddCollaborator}
+                    disabled={addCollaborator.isPending}
+                    aria-label={t("lists.collaborators.add")}
+                  >
+                    {addCollaborator.isPending ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <UserPlus className="h-4 w-4" />
+                    )}
+                    <span className="sm:hidden">
+                      {t("lists.collaborators.add")}
+                    </span>
+                  </Button>
+                </div>
               </div>
               <p className="text-xs text-muted-foreground">
                 <strong>{t("lists.collaborators.viewer")}:</strong>{" "}

apps/web/components/dashboard/lists/PublicListLink.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { CopyBtnV2 } from "@/components/ui/copy-button";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { useClientConfig } from "@/lib/clientConfig";
@@ -10,6 +9,8 @@ import { useTranslation } from "react-i18next";
 import { useEditBookmarkList } from "@karakeep/shared-react/hooks/lists";
 import { ZBookmarkList } from "@karakeep/shared/types/lists";
 
+import { UrlDisplay } from "./UrlDisplay";
+
 export default function PublicListLink({ list }: { list: ZBookmarkList }) {
   const { t } = useTranslation();
   const clientConfig = useClientConfig();
@@ -46,21 +47,18 @@ export default function PublicListLink({ list }: { list: ZBookmarkList }) {
 
       {/* Share URL - only show when public */}
       {isPublic && (
-        <>
-          <div className="space-y-3">
-            <Label className="text-sm font-medium">
-              {t("lists.public_list.share_link")}
-            </Label>
-            <div className="flex items-center space-x-2">
-              <Input
-                value={publicListUrl}
-                readOnly
-                className="flex-1 text-sm"
-              />
-              <CopyBtnV2 getStringToCopy={() => publicListUrl} />
-            </div>
+        <div className="space-y-3">
+          <Label className="text-sm font-medium">
+            {t("lists.public_list.share_link")}
+          </Label>
+          <div className="flex min-w-0 items-center space-x-2">
+            <UrlDisplay
+              value={publicListUrl}
+              label={t("lists.public_list.share_link")}
+            />
+            <CopyBtnV2 className="h-10" getStringToCopy={() => publicListUrl} />
           </div>
-        </>
+        </div>
       )}
     </>
   );

apps/web/components/dashboard/lists/RssLink.tsx

@@ -3,7 +3,6 @@
 import { useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { CopyBtnV2 } from "@/components/ui/copy-button";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { useClientConfig } from "@/lib/clientConfig";
@@ -13,6 +12,8 @@ import { useTranslation } from "react-i18next";
 
 import { useTRPC } from "@karakeep/shared-react/trpc";
 
+import { UrlDisplay } from "./UrlDisplay";
+
 export default function RssLink({ listId }: { listId: string }) {
   const api = useTRPC();
   const { t } = useTranslation();
@@ -46,7 +47,7 @@ export default function RssLink({ listId }: { listId: string }) {
       return null;
     }
     return `${clientConfig.publicApiUrl}/v1/rss/lists/${listId}?token=${rssToken.token}`;
-  }, [rssToken]);
+  }, [clientConfig.publicApiUrl, listId, rssToken]);
 
   const rssEnabled = rssUrl !== null;
 
@@ -82,9 +83,9 @@ export default function RssLink({ listId }: { listId: string }) {
           <Label className="text-sm font-medium">
             {t("lists.rss.feed_url")}
           </Label>
-          <div className="flex items-center space-x-2">
-            <Input value={rssUrl} readOnly className="flex-1 text-sm" />
-            <CopyBtnV2 getStringToCopy={() => rssUrl} />
+          <div className="flex min-w-0 items-center space-x-2">
+            <UrlDisplay value={rssUrl} label={t("lists.rss.feed_url")} />
+            <CopyBtnV2 className="h-10" getStringToCopy={() => rssUrl} />
             <Button
               variant="outline"
               size="sm"

apps/web/components/dashboard/lists/ShareListModal.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/i18n/client", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock("./PublicListLink", () => ({
+  default: () => <div data-testid="public-list-link">Public list settings</div>,
+}));
+
+vi.mock("./RssLink", () => ({
+  default: () => <div data-testid="rss-link">RSS settings</div>,
+}));
+
+import { ShareListModal } from "./ShareListModal";
+
+describe("ShareListModal", () => {
+  it("keeps interactive sharing controls outside the dialog description", () => {
+    render(
+      <ShareListModal
+        open
+        setOpen={() => undefined}
+        list={{ id: "list-id" } as never}
+      />,
+    );
+
+    const dialog = screen.getByRole("dialog");
+    const descriptionId = dialog.getAttribute("aria-describedby");
+    expect(descriptionId).toBeTruthy();
+
+    const description = document.getElementById(descriptionId!);
+    expect(description?.tagName).toBe("P");
+    expect(description?.querySelector("div")).toBeNull();
+
+    expect(screen.getByTestId("public-list-link")).toBeTruthy();
+    expect(screen.getByTestId("rss-link")).toBeTruthy();
+  });
+});

apps/web/components/dashboard/lists/ShareListModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -52,11 +52,14 @@ export function ShareListModal({
       <ResponsiveDialogContent className="sm:max-w-xl">
         <DialogHeader>
           <DialogTitle>{t("lists.share_list")}</DialogTitle>
+          <DialogDescription className="sr-only">
+            {t("lists.public_list.description")} {t("lists.rss.description")}
+          </DialogDescription>
         </DialogHeader>
-        <DialogDescription className="mt-4 space-y-6">
+        <div className="mt-4 min-w-0 space-y-6">
           <PublicListLink list={list} />
           <RssLink listId={list.id} />
-        </DialogDescription>
+        </div>
         <DialogFooter className="sm:justify-end">
           <DialogClose asChild>
             <Button type="button" variant="secondary">

apps/web/components/dashboard/lists/UrlDisplay.test.tsx

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { UrlDisplay } from "./UrlDisplay";
+
+describe("UrlDisplay", () => {
+  it.each([
+    {
+      label: "Share Link",
+      value: "https://example.com/public/lists/list-id",
+    },
+    {
+      label: "RSS Feed URL",
+      value: "https://api.example.com/v1/rss/lists/list-id?token=rss-token",
+    },
+  ])("renders $label without textbox semantics", ({ label, value }) => {
+    render(<UrlDisplay value={value} label={label} />);
+
+    const display = screen.getByRole("group", { name: `${label}: ${value}` });
+    expect(display.tagName).toBe("DIV");
+    expect(screen.queryByRole("textbox")).toBeNull();
+    expect(display.getAttribute("contenteditable")).toBeNull();
+    expect(display.getAttribute("tabindex")).toBeNull();
+    expect(display.textContent).toBe(value);
+    expect(display.classList.contains("min-w-0")).toBe(true);
+    expect(display.classList.contains("flex-1")).toBe(true);
+    expect(display.firstElementChild?.classList.contains("min-w-0")).toBe(true);
+    expect(display.firstElementChild?.classList.contains("flex-1")).toBe(true);
+    expect(display.firstElementChild?.classList.contains("truncate")).toBe(
+      true,
+    );
+  });
+});