feat: Add collaborative lists (#2146)

* feat: Add collaborative lists backend implementation

This commit implements the core backend functionality for collaborative
lists, allowing multiple users to share and interact with bookmark lists.

Database changes:
- Add listCollaborators table to track users with access to lists and
  their roles (viewer/editor)
- Add addedBy field to bookmarksInLists to track who added bookmarks
- Add relations for collaborative list functionality

Access control updates:
- Update List model to support role-based access (owner/editor/viewer)
- Add methods to check and enforce permissions for list operations
- Update Bookmark model to allow access through collaborative lists
- Modify bookmark queries to include bookmarks from collaborative lists

List collaboration features:
- Add/remove/update collaborators
- Get list of collaborators
- Get lists shared with current user
- Only manual lists can have collaborators

tRPC procedures:
- addCollaborator: Add a user as a collaborator to a list
- removeCollaborator: Remove a collaborator from a list
- updateCollaboratorRole: Change a collaborator's role
- getCollaborators: Get all collaborators for a list
- getSharedWithMe: Get all lists shared with the current user
- cloneBookmark: Clone a bookmark to the current user's collection

Implementation notes:
- Editors can add/remove bookmarks from the list (must own the bookmark)
- Viewers can only view bookmarks in the list
- Only the list owner can manage collaborators and list metadata
- Smart lists cannot have collaborators (only manual lists)
- Users cannot edit bookmarks they don't own, even in shared lists

* feat: Add collaborative lists frontend UI

This commit implements the frontend user interface for collaborative lists,
allowing users to view shared bookmarks and manage list collaborators.

New pages:
- /dashboard/shared: Shows bookmarks from lists shared with the user
  - Displays bookmarks from all collaborative lists
  - Uses SharedBookmarks component
  - Shows empty state when no lists are shared

Navigation:
- Added "Shared with you" link to sidebar with Users icon
- Positioned after "Home" in main navigation
- Available in both desktop and mobile sidebar

Collaborator management:
- ManageCollaboratorsModal component for managing list collaborators
  - Add collaborators by user ID with viewer/editor role
  - View current collaborators with their roles
  - Update collaborator roles inline
  - Remove collaborators
  - Shows empty state when no collaborators
- Integrated into ListOptions dropdown menu
- Accessible via "Manage Collaborators" menu item

Components created:
- SharedBookmarks.tsx: Server component fetching shared lists/bookmarks
- ManageCollaboratorsModal.tsx: Client component with tRPC mutations
- /dashboard/shared/page.tsx: Route for shared bookmarks page

UI features:
- Role selector for viewer/editor permissions
- Real-time collaborator list updates
- Toast notifications for success/error states
- Loading states for async operations
- Responsive design matching existing UI patterns

Implementation notes:
- Uses existing tRPC endpoints (getSharedWithMe, getCollaborators, etc.)
- Follows established modal patterns from ShareListModal
- Integrates seamlessly with existing list UI
- Currently uses user ID for adding collaborators (email lookup TBD)

* fix typecheck

* add collaborator by email

* add shared list in the sidebar

* fix perm issue

* hide UI components from non list owners

* list leaving

* fix shared bookmarks showing up in homepage

* fix getBookmark access check

* e2e tests

* hide user specific fields from shared lists

* simplify bookmark perm checks

* disable editable fields in bookmark preview

* hide lists if they don't have options

* fix list ownership

* fix highlights

* move tests to trpc

* fix alignment of leave list

* make tag lists unclickable

* allow editors to remove from list

* add a badge for shared lists

* remove bookmarks of user when they're removed from a list

* fix tests

* show owner in the manage collab modal

* fix hasCollab

* drop shared with you

* i18n

* beta badge

* correctly invalidate caches on collab change

* reduce unnecessary changes

* Add ratelimits

* stop manually removing bookmarks on remove

* some fixes

* fixes

* remove unused function

* improve tests

---------

Co-authored-by: Claude <noreply@anthropic.com>

7 files changed, 82 insertions, 38 deletions

diff --git a/apps/web/components/dashboard/preview/AttachmentBox.tsx b/apps/web/components/dashboard/preview/AttachmentBox.tsx
index e24cc646..73eea640 100644
--- a/apps/web/components/dashboard/preview/AttachmentBox.tsx
+++ b/apps/web/components/dashboard/preview/AttachmentBox.tsx
@@ -27,7 +27,13 @@ import {
   isAllowedToDetachAsset,
 } from "@karakeep/trpc/lib/attachments";
 
-export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
+export default function AttachmentBox({
+  bookmark,
+  readOnly = false,
+}: {
+  bookmark: ZBookmark;
+  readOnly?: boolean;
+}) {
   const { t } = useTranslation();
   const { mutate: attachAsset, isPending: isAttaching } =
     useAttachBookmarkAsset({
@@ -122,7 +128,8 @@ export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
               >
                 <Download className="size-4" />
               </Link>
-              {isAllowedToAttachAsset(asset.assetType) &&
+              {!readOnly &&
+                isAllowedToAttachAsset(asset.assetType) &&
                 asset.assetType !== "userUploaded" && (
                   <FilePickerButton
                     title="Replace"
@@ -147,7 +154,7 @@ export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
                     <Pencil className="size-4" />
                   </FilePickerButton>
                 )}
-              {isAllowedToDetachAsset(asset.assetType) && (
+              {!readOnly && isAllowedToDetachAsset(asset.assetType) && (
                 <ActionConfirmingDialog
                   title="Delete Attachment?"
                   description={`Are you sure you want to delete the attachment of the bookmark?`}
@@ -175,7 +182,8 @@ export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
             </div>
           </div>
         ))}
-        {!bookmark.assets.some((asset) => asset.assetType == "bannerImage") &&
+        {!readOnly &&
+          !bookmark.assets.some((asset) => asset.assetType == "bannerImage") &&
           bookmark.content.type != BookmarkTypes.ASSET && (
             <FilePickerButton
               title="Attach a Banner"
@@ -203,30 +211,32 @@ export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
               Attach a Banner
             </FilePickerButton>
           )}
-        <FilePickerButton
-          title="Upload File"
-          loading={isAttaching}
-          multiple={false}
-          variant="ghost"
-          size="none"
-          className="flex w-full items-center justify-center gap-2"
-          onFileSelect={(file) =>
-            uploadAsset(file, {
-              onSuccess: (resp) => {
-                attachAsset({
-                  bookmarkId: bookmark.id,
-                  asset: {
-                    id: resp.assetId,
-                    assetType: "userUploaded",
-                  },
-                });
-              },
-            })
-          }
-        >
-          <Plus className="size-4" />
-          Upload File
-        </FilePickerButton>
+        {!readOnly && (
+          <FilePickerButton
+            title="Upload File"
+            loading={isAttaching}
+            multiple={false}
+            variant="ghost"
+            size="none"
+            className="flex w-full items-center justify-center gap-2"
+            onFileSelect={(file) =>
+              uploadAsset(file, {
+                onSuccess: (resp) => {
+                  attachAsset({
+                    bookmarkId: bookmark.id,
+                    asset: {
+                      id: resp.assetId,
+                      assetType: "userUploaded",
+                    },
+                  });
+                },
+              })
+            }
+          >
+            <Plus className="size-4" />
+            Upload File
+          </FilePickerButton>
+        )}
       </CollapsibleContent>
     </Collapsible>
   );
diff --git a/apps/web/components/dashboard/preview/BookmarkHtmlHighlighter.tsx b/apps/web/components/dashboard/preview/BookmarkHtmlHighlighter.tsx
index 19499d3e..e0f20ea2 100644
--- a/apps/web/components/dashboard/preview/BookmarkHtmlHighlighter.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkHtmlHighlighter.tsx
@@ -95,6 +95,7 @@ interface HTMLHighlighterProps {
   style?: React.CSSProperties;
   className?: string;
   highlights?: Highlight[];
+  readOnly?: boolean;
   onHighlight?: (highlight: Highlight) => void;
   onUpdateHighlight?: (highlight: Highlight) => void;
   onDeleteHighlight?: (highlight: Highlight) => void;
@@ -105,6 +106,7 @@ function BookmarkHTMLHighlighter({
   className,
   style,
   highlights = [],
+  readOnly = false,
   onHighlight,
   onUpdateHighlight,
   onDeleteHighlight,
@@ -173,6 +175,10 @@ function BookmarkHTMLHighlighter({
   }, [pendingHighlight, contentRef]);
 
   const handlePointerUp = (e: React.PointerEvent) => {
+    if (readOnly) {
+      return;
+    }
+
     const selection = window.getSelection();
 
     // Check if we clicked on an existing highlight
diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index 4766bd32..7e6bf814 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -17,6 +17,7 @@ import useRelativeTime from "@/lib/hooks/relative-time";
 import { useTranslation } from "@/lib/i18n/client";
 import { api } from "@/lib/trpc";
 import { Building, CalendarDays, ExternalLink, User } from "lucide-react";
+import { useSession } from "next-auth/react";
 
 import { BookmarkTypes, ZBookmark } from "@karakeep/shared/types/bookmarks";
 import {
@@ -117,6 +118,7 @@ export default function BookmarkPreview({
 }) {
   const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState<string>("content");
+  const { data: session } = useSession();
 
   const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
     {
@@ -138,6 +140,9 @@ export default function BookmarkPreview({
     return <FullPageSpinner />;
   }
 
+  // Check if the current user owns this bookmark
+  const isOwner = session?.user?.id === bookmark.userId;
+
   let content;
   switch (bookmark.content.type) {
     case BookmarkTypes.LINK: {
@@ -186,18 +191,18 @@ export default function BookmarkPreview({
       </div>
       <CreationTime createdAt={bookmark.createdAt} />
       <BookmarkMetadata bookmark={bookmark} />
-      <SummarizeBookmarkArea bookmark={bookmark} />
+      <SummarizeBookmarkArea bookmark={bookmark} readOnly={!isOwner} />
       <div className="flex items-center gap-4">
         <p className="text-sm text-gray-400">{t("common.tags")}</p>
-        <BookmarkTagsEditor bookmark={bookmark} />
+        <BookmarkTagsEditor bookmark={bookmark} disabled={!isOwner} />
       </div>
       <div className="flex gap-4">
         <p className="pt-2 text-sm text-gray-400">{t("common.note")}</p>
-        <NoteEditor bookmark={bookmark} />
+        <NoteEditor bookmark={bookmark} disabled={!isOwner} />
       </div>
-      <AttachmentBox bookmark={bookmark} />
-      <HighlightsBox bookmarkId={bookmark.id} />
-      <ActionBar bookmark={bookmark} />
+      <AttachmentBox bookmark={bookmark} readOnly={!isOwner} />
+      <HighlightsBox bookmarkId={bookmark.id} readOnly={!isOwner} />
+      {isOwner && <ActionBar bookmark={bookmark} />}
     </div>
   );
 
diff --git a/apps/web/components/dashboard/preview/HighlightsBox.tsx b/apps/web/components/dashboard/preview/HighlightsBox.tsx
index 4da22d04..41ab7d74 100644
--- a/apps/web/components/dashboard/preview/HighlightsBox.tsx
+++ b/apps/web/components/dashboard/preview/HighlightsBox.tsx
@@ -11,7 +11,13 @@ import { ChevronsDownUp } from "lucide-react";
 
 import HighlightCard from "../highlights/HighlightCard";
 
-export default function HighlightsBox({ bookmarkId }: { bookmarkId: string }) {
+export default function HighlightsBox({
+  bookmarkId,
+  readOnly,
+}: {
+  bookmarkId: string;
+  readOnly: boolean;
+}) {
   const { t } = useTranslation();
 
   const { data: highlights, isPending: isLoading } =
@@ -30,7 +36,11 @@ export default function HighlightsBox({ bookmarkId }: { bookmarkId: string }) {
       <CollapsibleContent className="group flex flex-col py-3 text-sm">
         {highlights.highlights.map((highlight) => (
           <Fragment key={highlight.id}>
-            <HighlightCard highlight={highlight} clickable />
+            <HighlightCard
+              highlight={highlight}
+              clickable
+              readOnly={readOnly}
+            />
             <Separator className="m-2 h-0.5 bg-gray-200 last:hidden" />
           </Fragment>
         ))}
diff --git a/apps/web/components/dashboard/preview/LinkContentSection.tsx b/apps/web/components/dashboard/preview/LinkContentSection.tsx
index 53559aa0..64b62df6 100644
--- a/apps/web/components/dashboard/preview/LinkContentSection.tsx
+++ b/apps/web/components/dashboard/preview/LinkContentSection.tsx
@@ -25,6 +25,7 @@ import {
   ExpandIcon,
   Video,
 } from "lucide-react";
+import { useSession } from "next-auth/react";
 import { useQueryState } from "nuqs";
 import { ErrorBoundary } from "react-error-boundary";
 
@@ -111,6 +112,8 @@ export default function LinkContentSection({
   const [section, setSection] = useQueryState("section", {
     defaultValue: defaultSection,
   });
+  const { data: session } = useSession();
+  const isOwner = session?.user?.id === bookmark.userId;
 
   if (bookmark.content.type != BookmarkTypes.LINK) {
     throw new Error("Invalid content type");
@@ -133,6 +136,7 @@ export default function LinkContentSection({
         <ReaderView
           className="prose mx-auto dark:prose-invert"
           bookmarkId={bookmark.id}
+          readOnly={!isOwner}
         />
       </ScrollArea>
     );
diff --git a/apps/web/components/dashboard/preview/NoteEditor.tsx b/apps/web/components/dashboard/preview/NoteEditor.tsx
index 393628b5..538aff2e 100644
--- a/apps/web/components/dashboard/preview/NoteEditor.tsx
+++ b/apps/web/components/dashboard/preview/NoteEditor.tsx
@@ -5,7 +5,13 @@ import { useClientConfig } from "@/lib/clientConfig";
 import type { ZBookmark } from "@karakeep/shared/types/bookmarks";
 import { useUpdateBookmark } from "@karakeep/shared-react/hooks/bookmarks";
 
-export function NoteEditor({ bookmark }: { bookmark: ZBookmark }) {
+export function NoteEditor({
+  bookmark,
+  disabled,
+}: {
+  bookmark: ZBookmark;
+  disabled?: boolean;
+}) {
   const demoMode = !!useClientConfig().demoMode;
 
   const updateBookmarkMutator = useUpdateBookmark({
@@ -26,7 +32,7 @@ export function NoteEditor({ bookmark }: { bookmark: ZBookmark }) {
     <Textarea
       className="h-44 w-full overflow-auto rounded bg-background p-2 text-sm text-gray-400 dark:text-gray-300"
       defaultValue={bookmark.note ?? ""}
-      disabled={demoMode}
+      disabled={demoMode || disabled}
       placeholder="Write some notes ..."
       onBlur={(e) => {
         if (e.currentTarget.value == bookmark.note) {
diff --git a/apps/web/components/dashboard/preview/ReaderView.tsx b/apps/web/components/dashboard/preview/ReaderView.tsx
index bf4c27a5..1974626a 100644
--- a/apps/web/components/dashboard/preview/ReaderView.tsx
+++ b/apps/web/components/dashboard/preview/ReaderView.tsx
@@ -15,10 +15,12 @@ export default function ReaderView({
   bookmarkId,
   className,
   style,
+  readOnly,
 }: {
   bookmarkId: string;
   className?: string;
   style?: React.CSSProperties;
+  readOnly: boolean;
 }) {
   const { data: highlights } = api.highlights.getForBookmark.useQuery({
     bookmarkId,
@@ -93,6 +95,7 @@ export default function ReaderView({
         style={style}
         htmlContent={cachedContent || ""}
         highlights={highlights?.highlights ?? []}
+        readOnly={readOnly}
         onDeleteHighlight={(h) =>
           deleteHighlight({
             highlightId: h.id,