From 8f1142eb298be7a24070775533e79a4f32f776ff Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sat, 11 Jul 2026 17:07:33 +0000
Subject: [PATCH 1/2] Add short note field to bookmark edit drawer

- Allow note updates via BookmarkItemUpdateSchema and updateBookmarkItem
- Add compact textarea in BookmarkEditDrawer (max 500 chars)
- Show StickyNote indicator on list items that have a note

Co-authored-by: Tsuten <tsuten@users.noreply.github.com>
---
 app/client/main.css                   |  9 +++++++--
 app/imports/api/bookmarkItems.js      |  7 ++++---
 app/imports/ui/BookmarkEditDrawer.jsx | 14 ++++++++++++++
 app/imports/ui/BookmarkItem.jsx       | 17 ++++++++++++++---
 4 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/app/client/main.css b/app/client/main.css
index 78eb75f..77ce178 100644
--- a/app/client/main.css
+++ b/app/client/main.css
@@ -82,12 +82,17 @@ input:focus {
 
 @layer base {
   /* atoms */
-  input {
+  input,
+  textarea {
     @apply bg-gray-100 p-1 text-sm min-w-0 max-w-full rounded-sm;
   }
-  input:focus {
+  input:focus,
+  textarea:focus {
     @apply outline-1 outline-gray-500;
   }
+  textarea {
+    @apply resize-y min-h-12;
+  }
   hr {
     @apply border-gray-300;
   }
diff --git a/app/imports/api/bookmarkItems.js b/app/imports/api/bookmarkItems.js
index da4991b..09c5442 100644
--- a/app/imports/api/bookmarkItems.js
+++ b/app/imports/api/bookmarkItems.js
@@ -48,7 +48,7 @@ export const BookmarkItemSchema = new SimpleSchema({
   },
   tags: { type: Array, optional: true },
   'tags.$': String,
-  note: { type: String, optional: true, trim: true },
+  note: { type: String, optional: true, trim: true, max: 500 },
   is_archived: { type: Boolean, optional: true, defaultValue: false },
   userId: { type: String },
 });
@@ -62,6 +62,7 @@ export const BookmarkItemUpdateSchema = new SimpleSchema({
   },
   tags: { type: Array, optional: true },
   'tags.$': String,
+  note: { type: String, optional: true, trim: true, max: 500 },
 });
 
 export async function insertBookmarkItem(doc = {}, userId) {
@@ -117,10 +118,10 @@ Meteor.methods({
     }
   },
 
-  async updateBookmarkItem({ _id, title, url, tags } = {}) {
+  async updateBookmarkItem({ _id, title, url, tags, note } = {}) {
     if (!this.userId) {
       throw new Meteor.Error('not-authorized');
     }
-    return updateBookmarkItem({ _id, title, url, tags }, this.userId);
+    return updateBookmarkItem({ _id, title, url, tags, note }, this.userId);
   },
 });
diff --git a/app/imports/ui/BookmarkEditDrawer.jsx b/app/imports/ui/BookmarkEditDrawer.jsx
index 0bfd76c..a577575 100644
--- a/app/imports/ui/BookmarkEditDrawer.jsx
+++ b/app/imports/ui/BookmarkEditDrawer.jsx
@@ -11,6 +11,7 @@ export const BookmarkEditDrawer = ({ bookmarkItem, onClose }) => {
   const [title, setTitle] = useState('');
   const [url, setUrl] = useState('');
   const [tags, setTags] = useState([]);
+  const [note, setNote] = useState('');
   const [urlError, setUrlError] = useState('');
   const [submitError, setSubmitError] = useState('');
   const [submitting, setSubmitting] = useState(false);
@@ -20,6 +21,7 @@ export const BookmarkEditDrawer = ({ bookmarkItem, onClose }) => {
     setTitle(bookmarkItem.title || '');
     setUrl(bookmarkItem.url || '');
     setTags(bookmarkItem.tags || []);
+    setNote(bookmarkItem.note || '');
     setUrlError('');
     setSubmitError('');
     setSubmitting(false);
@@ -49,6 +51,7 @@ export const BookmarkEditDrawer = ({ bookmarkItem, onClose }) => {
         title,
         url: url.trim(),
         tags,
+        note: note.trim(),
       },
       (error) => {
         setSubmitting(false);
@@ -112,6 +115,17 @@ export const BookmarkEditDrawer = ({ bookmarkItem, onClose }) => {
           <TagsInput value={tags} onChange={setTags} />
         </label>
 
+        <label className="flex flex-col gap-1 text-sm text-gray-700">
+          Note
+          <textarea
+            value={note}
+            onChange={(event) => setNote(event.target.value)}
+            placeholder="Short description"
+            rows={2}
+            maxLength={500}
+          />
+        </label>
+
         {submitError ? (
           <p className="text-sm text-red-600" role="alert">
             {submitError}
diff --git a/app/imports/ui/BookmarkItem.jsx b/app/imports/ui/BookmarkItem.jsx
index 603eaaa..9231c93 100644
--- a/app/imports/ui/BookmarkItem.jsx
+++ b/app/imports/ui/BookmarkItem.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Archive, Pencil } from 'lucide-react';
+import { Archive, Pencil, StickyNote } from 'lucide-react';
 import { Meteor } from 'meteor/meteor';
 
 const formatCreatedAtLabel = (createdAt) => {
@@ -20,13 +20,15 @@ const archiveBookmarkItem = (bookmarkItem) => {
 };
 
 export const BookmarkItem = ({ bookmarkItem, onEdit }) => {
+  const note = bookmarkItem.note?.trim();
+
   return (
     <li>
         <div className="group flex flex-row gap-2 hover:bg-gray-100 justify-between">
-          <a href={bookmarkItem.url} target="_blank">
+          <a href={bookmarkItem.url} target="_blank" rel="noreferrer">
             <div className="flex flex-col p-3">
                 {bookmarkItem.title}
-                <div className="flex flex-row gap-4">
+                <div className="flex flex-row gap-4 items-center">
                     <span className="text-sm text-gray-500">
                     {(bookmarkItem.tags || []).join(', ') || 'No tags'}
                     </span>
@@ -36,6 +38,15 @@ export const BookmarkItem = ({ bookmarkItem, onEdit }) => {
                     <span className="text-sm text-gray-500">
                     {formatCreatedAtLabel(bookmarkItem.createdAt)}
                     </span>
+                    {note ? (
+                      <span
+                        className="inline-flex text-gray-400"
+                        title={note}
+                        aria-label="Has note"
+                      >
+                        <StickyNote className="w-3.5 h-3.5" aria-hidden />
+                      </span>
+                    ) : null}
                 </div>
             </div>
           </a>

From f4279be5f4017b1cf06245e18701c8858d9c0d18 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 12 Jul 2026 13:08:10 +0000
Subject: [PATCH 2/2] Show note text in bookmark list instead of icon indicator

Co-authored-by: Tsuten <tsuten@users.noreply.github.com>
---
 app/imports/ui/BookmarkItem.jsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/app/imports/ui/BookmarkItem.jsx b/app/imports/ui/BookmarkItem.jsx
index 9231c93..fbb0935 100644
--- a/app/imports/ui/BookmarkItem.jsx
+++ b/app/imports/ui/BookmarkItem.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Archive, Pencil, StickyNote } from 'lucide-react';
+import { Archive, Pencil } from 'lucide-react';
 import { Meteor } from 'meteor/meteor';
 
 const formatCreatedAtLabel = (createdAt) => {
@@ -38,16 +38,12 @@ export const BookmarkItem = ({ bookmarkItem, onEdit }) => {
                     <span className="text-sm text-gray-500">
                     {formatCreatedAtLabel(bookmarkItem.createdAt)}
                     </span>
-                    {note ? (
-                      <span
-                        className="inline-flex text-gray-400"
-                        title={note}
-                        aria-label="Has note"
-                      >
-                        <StickyNote className="w-3.5 h-3.5" aria-hidden />
-                      </span>
-                    ) : null}
                 </div>
+                {note ? (
+                  <p className="mt-1 text-sm text-gray-600 truncate" title={note}>
+                    {note}
+                  </p>
+                ) : null}
             </div>
           </a>
           <div className="hidden shrink-0 items-center gap-2 group-hover:flex">