\n );\n }\n\n if (error) {\n return (\n

Error: {error}

\n \n

\n );\n }\n\n return (\n

\n {/* Pull-to-refresh indicator */}\n 0 ? \"flex\" : \"none\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"var(--coral)\",\n color: \"white\",\n zIndex: 40,\n transition: isPulling ? \"none\" : \"height 0.3s ease-out\",\n }}\n >\n {isRefreshing\n ? (\n \n

\n )\n : (\n \n {pullDistance > 80 ? \"↓\" : \"↑\"}\n \n )}\n \n\n

\n {/* Desktop: side-by-side layout */}\n

\n Your Bookmarks\n \n {bookmarks.length}{\" \"}\n {bookmarks.length === 1 ? \"bookmark\" : \"bookmarks\"}\n \n

\n setShowAddModal(true)}\n className=\"btn-primary\"\n >\n + Add Bookmark\n \n

\n\n {/* Mobile: stacked layout */}\n

\n Your Bookmarks\n

\n setShowAddModal(true)}\n className=\"px-3 py-2 text-sm rounded-md\"\n style={{ backgroundColor: \"var(--coral)\", color: \"white\" }}\n >\n + Add\n \n

\n {bookmarks.length}{\" \"}\n {bookmarks.length === 1 ? \"bookmark\" : \"bookmarks\"}\n

\n\n {bookmarks.length === 0\n ? (\n

\n 📚\n

\n No bookmarks yet\n

\n Start collecting your favorite links!\n

\n setShowAddModal(true)}\n className=\"btn-primary\"\n >\n Add Your First Bookmark\n \n

\n )\n : (\n

\n {bookmarks.map((bookmark) => (\n setEditingBookmark(bookmark)}\n onDragOver={(e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = \"copy\";\n }}\n onDragEnter={(e) => {\n e.preventDefault();\n setDragOverBookmark(bookmark.uri);\n }}\n onDragLeave={(e) => {\n e.preventDefault();\n // Only clear if we're leaving the card itself, not a child\n if (e.currentTarget === e.target) {\n setDragOverBookmark(null);\n }\n }}\n onDrop={(e) => {\n e.preventDefault();\n setDragOverBookmark(null);\n const tagValue = e.dataTransfer.getData(\"text/plain\");\n if (tagValue) {\n handleDropTag(bookmark.uri, tagValue);\n }\n }}\n >\n

\n {bookmark.title || new URL(bookmark.subject).hostname}\n

\n {bookmark.subject}\n

\n\n

\n {new Date(bookmark.createdAt).toLocaleDateString()}\n

\n\n {bookmark.tags && bookmark.tags.length > 0 && (\n

\n {bookmark.tags.map((tag, i) => (\n \n {tag}\n \n ))}\n

\n )}\n\n {/* Desktop: hover-reveal buttons (bottom-right) */}\n

\n handleVisit(e, bookmark.subject)}\n className=\"w-7 h-7 flex items-center justify-center text-gray-600 hover:text-gray-900 bg-white/90 hover:bg-white rounded-md transition-colors shadow-sm\"\n title=\"Visit bookmark\"\n >\n \n \n \n \n handleShare(e, bookmark)}\n className=\"w-7 h-7 flex items-center justify-center text-gray-600 hover:text-gray-900 bg-white/90 hover:bg-white rounded-md transition-colors shadow-sm\"\n title=\"Share bookmark\"\n >\n \n \n \n \n

\n\n {/* Mobile: always-visible buttons (bottom-right) */}\n

\n handleVisit(e, bookmark.subject)}\n className=\"w-8 h-8 flex items-center justify-center text-gray-600 hover:text-gray-900 bg-white/90 hover:bg-white rounded-md transition-colors shadow-sm\"\n title=\"Visit bookmark\"\n >\n \n \n \n \n handleShare(e, bookmark)}\n className=\"w-8 h-8 flex items-center justify-center text-gray-600 hover:text-gray-900 bg-white/90 hover:bg-white rounded-md transition-colors shadow-sm\"\n title=\"Share bookmark\"\n >\n \n \n \n \n

\n ))}\n \n )}\n\n {showAddModal && (\n setShowAddModal(false)}\n onBookmarkAdded={handleBookmarkAdded}\n />\n )}\n\n {editingBookmark && (\n setEditingBookmark(null)}\n onBookmarkUpdated={handleBookmarkUpdated}\n onBookmarkDeleted={handleBookmarkDeleted}\n onTagsChanged={loadTags}\n />\n )}\n \n );\n}\n","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/nbbaier/kipclip-appview/code/frontend/components/BookmarkList.tsx","extension","actionData","errors"]