{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bookmark-manager-grid", "title": "Bookmark Manager Grid", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/bookmark-manager-grid/BookmarkManagerGrid.tsx", "content": "'use client'\n\nimport { useMemo, useState } from 'react'\nimport {\n Bookmark,\n BookOpen,\n Check,\n CheckCircle2,\n Copy,\n ExternalLink,\n Globe,\n Layers,\n Palette,\n Plus,\n Search,\n Bot,\n ShieldCheck,\n Star,\n Tag,\n Type,\n X,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface BookmarkItem {\n id: string\n title: string\n url: string\n domain: string\n faviconUrl: string\n previewImage: string\n excerpt: string\n collection: 'design-systems' | 'web-perf' | 'typography' | 'ai-tools' | 'security'\n tags: string[]\n isFavorite: boolean\n savedAt: string\n}\n\nexport interface CollectionMeta {\n id: string\n name: string\n count: number\n iconName: 'bookmark' | 'palette' | 'zap' | 'type' | 'bot' | 'shield' | 'star'\n}\n\nexport interface BookmarkManagerGridProps {\n className?: string\n}\n\nconst INITIAL_BOOKMARKS: BookmarkItem[] = [\n {\n id: 'bm-01',\n title: 'OKLCH Color Picker & Converter',\n url: 'https://oklch.com',\n domain: 'oklch.com',\n faviconUrl: 'https://images.unsplash.com/photo-1550684848-fac1c5b4e853?w=64&auto=format&fit=crop&q=80',\n previewImage: 'https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=800&auto=format&fit=crop&q=80',\n excerpt:\n 'Interactive color space playground with gamut-mapping, APCA contrast ratios, and direct CSS/Tailwind OKLCH code generation.',\n collection: 'design-systems',\n tags: ['#oklch', '#tailwind', '#design-systems'],\n isFavorite: true,\n savedAt: 'Aug 18, 2026',\n },\n {\n id: 'bm-02',\n title: 'Reka UI Headless Vue Primitives',\n url: 'https://reka-ui.com',\n domain: 'reka-ui.com',\n faviconUrl: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=64&auto=format&fit=crop&q=80',\n previewImage: 'https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?w=800&auto=format&fit=crop&q=80',\n excerpt:\n 'Accessible, completely unstyled UI component primitives for Vue 3 with WAI-ARIA compliant keyboard focus and composite slots.',\n collection: 'design-systems',\n tags: ['#reka-ui', '#vue', '#design-systems'],\n isFavorite: true,\n savedAt: 'Aug 15, 2026',\n },\n {\n id: 'bm-03',\n title: 'Web Vitals Performance Playbook',\n url: 'https://web.dev/vitals',\n domain: 'web.dev',\n faviconUrl: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=64&auto=format&fit=crop&q=80',\n previewImage: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&auto=format&fit=crop&q=80',\n excerpt:\n 'Diagnostic field guides for optimizing Interaction to Next Paint (INP), Largest Contentful Paint (LCP), and layout stability.',\n collection: 'web-perf',\n tags: ['#web-vitals', '#web-perf', '#astro'],\n isFavorite: false,\n savedAt: 'Aug 12, 2026',\n },\n {\n id: 'bm-04',\n title: 'Typewolf Font Trends & Pairings',\n url: 'https://typewolf.com',\n domain: 'typewolf.com',\n faviconUrl: 'https://images.unsplash.com/photo-1455390582262-044cdead277a?w=64&auto=format&fit=crop&q=80',\n previewImage: 'https://images.unsplash.com/photo-1516962215378-7fa2e137ae93?w=800&auto=format&fit=crop&q=80',\n excerpt:\n 'The definitive guide to web typography, font pairings, lookbooks, variable font loading strategies, and typographic hierarchy.',\n collection: 'typography',\n tags: ['#typography', '#design-systems', '#react'],\n isFavorite: true,\n savedAt: 'Aug 09, 2026',\n },\n {\n id: 'bm-05',\n title: 'Vercel AI SDK 3.0 Documentation',\n url: 'https://sdk.vercel.ai/docs',\n domain: 'sdk.vercel.ai',\n faviconUrl: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=64&auto=format&fit=crop&q=80',\n previewImage: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800&auto=format&fit=crop&q=80',\n excerpt:\n 'Universal TypeScript library for streaming chat completions, structured JSON generation, tool calling, and multi-model routing.',\n collection: 'ai-tools',\n tags: ['#ai-prompt', '#react', '#astro'],\n isFavorite: false,\n savedAt: 'Aug 06, 2026',\n },\n {\n id: 'bm-06',\n title: 'OWASP API Security Top 10 Guide',\n url: 'https://owasp.org/API-Security',\n domain: 'owasp.org',\n faviconUrl: 'https://images.unsplash.com/photo-1563986768609-322da13575f3?w=64&auto=format&fit=crop&q=80',\n previewImage: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&auto=format&fit=crop&q=80',\n excerpt:\n 'Crucial security vectors for modern APIs including broken object authorization, rate limiting flaws, and JWT key hygiene.',\n collection: 'security',\n tags: ['#security', '#web-perf'],\n isFavorite: false,\n savedAt: 'Aug 03, 2026',\n },\n]\n\nconst COLLECTIONS: CollectionMeta[] = [\n { id: 'all', name: 'All Bookmarks', count: 142, iconName: 'bookmark' },\n { id: 'design-systems', name: 'Design Systems', count: 28, iconName: 'palette' },\n { id: 'web-perf', name: 'Web Performance', count: 19, iconName: 'zap' },\n { id: 'typography', name: 'Typography & Fonts', count: 14, iconName: 'type' },\n { id: 'ai-tools', name: 'AI & LLM Tools', count: 35, iconName: 'bot' },\n { id: 'security', name: 'Security & Auth', count: 22, iconName: 'shield' },\n { id: 'favorites', name: 'Favorites ★', count: 18, iconName: 'star' },\n]\n\nconst TAG_CLOUD = [\n '#reka-ui',\n '#tailwind',\n '#oklch',\n '#astro',\n '#react',\n '#vue',\n '#typography',\n '#web-vitals',\n '#security',\n '#ai-prompt',\n]\n\nexport function BookmarkManagerGrid({ className }: BookmarkManagerGridProps) {\n const [bookmarks, setBookmarks] = useState([...INITIAL_BOOKMARKS])\n const [searchQuery, setSearchQuery] = useState('')\n const [selectedCollection, setSelectedCollection] = useState('all')\n const [selectedTag, setSelectedTag] = useState(null)\n\n // Add Bookmark Modal state\n const [isAddModalOpen, setIsAddModalOpen] = useState(false)\n const [formUrl, setFormUrl] = useState('')\n const [formTitle, setFormTitle] = useState('')\n const [formDomain, setFormDomain] = useState('')\n const [formExcerpt, setFormExcerpt] = useState('')\n const [formCollection, setFormCollection] = useState<\n 'design-systems' | 'web-perf' | 'typography' | 'ai-tools' | 'security'\n >('design-systems')\n const [formTags, setFormTags] = useState('')\n const [formPreview, setFormPreview] = useState('')\n\n // Toast Notification\n const [notificationToast, setNotificationToast] = useState(null)\n const [copiedId, setCopiedId] = useState(null)\n\n const showNotification = (msg: string) => {\n setNotificationToast(msg)\n setTimeout(() => {\n setNotificationToast(null)\n }, 2800)\n }\n\n const copyUrl = (item: BookmarkItem, event?: React.MouseEvent) => {\n if (event) event.stopPropagation()\n navigator.clipboard?.writeText(item.url)\n setCopiedId(item.id)\n showNotification(`Copied link to clipboard: ${item.domain}`)\n setTimeout(() => {\n setCopiedId(null)\n }, 2000)\n }\n\n const toggleFavorite = (item: BookmarkItem, event?: React.MouseEvent) => {\n if (event) event.stopPropagation()\n setBookmarks((prev) =>\n prev.map((bm) => {\n if (bm.id === item.id) {\n const nextFav = !bm.isFavorite\n showNotification(nextFav ? `Starred \"${bm.title}\"` : `Removed \"${bm.title}\" from favorites`)\n return { ...bm, isFavorite: nextFav }\n }\n return bm\n }),\n )\n }\n\n const toggleTag = (tag: string) => {\n setSelectedTag((prev) => (prev === tag ? null : tag))\n }\n\n const resetFilters = () => {\n setSearchQuery('')\n setSelectedCollection('all')\n setSelectedTag(null)\n }\n\n const autoFetchMetadata = () => {\n const url = formUrl.trim()\n if (!url) {\n showNotification('Please enter a URL first')\n return\n }\n\n let extractedDomain = ''\n try {\n const parsed = new URL(url.startsWith('http') ? url : `https://${url}`)\n extractedDomain = parsed.hostname.replace(/^www\\./, '')\n } catch {\n extractedDomain = 'developer.mozilla.org'\n }\n\n setFormDomain(extractedDomain)\n\n if (url.includes('github') || extractedDomain.includes('github')) {\n setFormTitle('GitHub Engineering Architecture Guides')\n setFormExcerpt('In-depth architectural post-mortems, system scaling principles, and resilient CI/CD pipelines.')\n setFormCollection('web-perf')\n setFormTags('#web-perf, #security')\n setFormPreview('https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?w=800&auto=format&fit=crop&q=80')\n } else if (url.includes('astro') || extractedDomain.includes('astro')) {\n setFormTitle('Astro 4.0 Server Islands & SSG Docs')\n setFormExcerpt(\n 'Zero-JS by default frontend framework combining island architecture with fast static HTML builds.',\n )\n setFormCollection('design-systems')\n setFormTags('#astro, #react, #vue')\n setFormPreview('https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&auto=format&fit=crop&q=80')\n } else if (url.includes('linear') || extractedDomain.includes('linear')) {\n setFormTitle('Linear Method — Principles for Modern Software')\n setFormExcerpt(\n 'Practices and philosophies for high-craft product execution, issue triage, and keyboard-first UI.',\n )\n setFormCollection('design-systems')\n setFormTags('#design-systems, #tailwind')\n setFormPreview('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&auto=format&fit=crop&q=80')\n } else {\n setFormTitle(formTitle || `${extractedDomain.toUpperCase()} — Resource Guide`)\n setFormExcerpt(\n formExcerpt || 'Curated documentation and developer tooling reference for modern engineering workflows.',\n )\n setFormTags(formTags || '#oklch, #tailwind')\n setFormPreview(\n formPreview || 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&auto=format&fit=crop&q=80',\n )\n }\n\n showNotification(`Fetched metadata from ${extractedDomain}`)\n }\n\n const handleSaveBookmark = (e: React.FormEvent) => {\n e.preventDefault()\n if (!formUrl.trim()) {\n showNotification('Please enter a valid URL')\n return\n }\n\n const finalTitle = formTitle.trim() || formDomain.trim() || 'Untitled Bookmark'\n let cleanDomain = formDomain.trim()\n if (!cleanDomain) {\n try {\n const parsed = new URL(formUrl.startsWith('http') ? formUrl : `https://${formUrl}`)\n cleanDomain = parsed.hostname.replace(/^www\\./, '')\n } catch {\n cleanDomain = 'web.dev'\n }\n }\n\n const tagList = formTags\n ? formTags\n .split(',')\n .map((t) => t.trim())\n .filter(Boolean)\n .map((t) => (t.startsWith('#') ? t : `#${t}`))\n : ['#design-systems']\n\n const newBookmark: BookmarkItem = {\n id: `bm-${Date.now()}`,\n title: finalTitle,\n url: formUrl.startsWith('http') ? formUrl : `https://${formUrl}`,\n domain: cleanDomain,\n faviconUrl: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=64&auto=format&fit=crop&q=80',\n previewImage:\n formPreview || 'https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=800&auto=format&fit=crop&q=80',\n excerpt: formExcerpt.trim() || 'Developer documentation, components, and reference guides.',\n collection: formCollection,\n tags: tagList,\n isFavorite: false,\n savedAt: 'Just now',\n }\n\n setBookmarks((prev) => [newBookmark, ...prev])\n setIsAddModalOpen(false)\n\n // Reset form\n setFormUrl('')\n setFormTitle('')\n setFormDomain('')\n setFormExcerpt('')\n setFormTags('')\n setFormPreview('')\n\n showNotification(`Saved \"${finalTitle}\" to bookmarks!`)\n }\n\n const filteredBookmarks = useMemo(() => {\n return bookmarks.filter((item) => {\n if (selectedCollection === 'favorites') {\n if (!item.isFavorite) return false\n } else if (selectedCollection !== 'all') {\n if (item.collection !== selectedCollection) return false\n }\n\n if (selectedTag && !item.tags.includes(selectedTag)) {\n return false\n }\n\n if (searchQuery.trim() !== '') {\n const q = searchQuery.toLowerCase().trim()\n const titleMatch = item.title.toLowerCase().includes(q)\n const domainMatch = item.domain.toLowerCase().includes(q)\n const excerptMatch = item.excerpt.toLowerCase().includes(q)\n const urlMatch = item.url.toLowerCase().includes(q)\n const tagMatch = item.tags.some((t) => t.toLowerCase().includes(q))\n if (!titleMatch && !domainMatch && !excerptMatch && !urlMatch && !tagMatch) {\n return false\n }\n }\n\n return true\n })\n }, [bookmarks, selectedCollection, selectedTag, searchQuery])\n\n const activeCollectionMeta = useMemo(() => {\n return COLLECTIONS.find((c) => c.id === selectedCollection) || COLLECTIONS[0]\n }, [selectedCollection])\n\n return (\n
\n {/* Top Floating Toast Notification */}\n {notificationToast && (\n \n \n {notificationToast}\n
\n )}\n\n {/* Header Section */}\n
\n
\n
\n
\n \n
\n

Bookmarks & Engineering Resources

\n \n v2.1\n \n
\n

\n \n 142 bookmarks · 8 collections\n \n \n \n

\n
\n\n
\n {/* Search Input */}\n
\n \n setSearchQuery(e.target.value)}\n type=\"search\"\n placeholder=\"Search bookmarks, domains, tags…\"\n className=\"h-9 pr-8 pl-9 text-xs\"\n />\n {searchQuery && (\n setSearchQuery('')}\n >\n \n \n )}\n
\n\n {/* Add Bookmark Button */}\n setIsAddModalOpen(true)}\n >\n \n Add Bookmark\n \n
\n
\n\n {/* Mobile Horizontal Collections Bar (Visible on mobile/tablet) */}\n
\n {COLLECTIONS.map((col) => (\n setSelectedCollection(col.id)}\n >\n {col.name}\n \n {col.count}\n \n \n ))}\n
\n\n {/* 2-Column Main Layout (Left: Sidebar w-60; Right: Grid) */}\n
\n {/* Left Collections Sidebar */}\n \n\n {/* Right Bookmarks Main Area */}\n
\n {/* Result Bar & Filter Indicators */}\n
\n
\n Collection:\n \n {activeCollectionMeta.name}\n \n\n {selectedTag && (\n <>\n Tag:\n \n {selectedTag}\n setSelectedTag(null)}\n >\n \n \n \n \n )}\n\n {searchQuery && (\n <>\n Query:\n “{searchQuery}”\n \n )}\n\n {(selectedCollection !== 'all' || selectedTag || searchQuery) && (\n \n Clear filters\n \n )}\n
\n\n
\n Showing {filteredBookmarks.length} of{' '}\n {bookmarks.length} items\n
\n
\n\n {/* Bookmarks Grid (2 or 3-column responsive) */}\n {filteredBookmarks.length > 0 ? (\n
\n {filteredBookmarks.map((item) => (\n \n {/* Thumbnail Visual Preview */}\n
\n \n\n {/* Gradient overlay */}\n
\n\n {/* Domain Badge Top Left */}\n
\n
\n \n {item.domain}\n
\n
\n\n {/* Favorite Toggle Star Button Top Right */}\n toggleFavorite(item, e)}\n >\n \n \n
\n\n {/* Card Content Body */}\n \n
\n
\n \n {item.title}\n \n
\n\n

{item.excerpt}

\n
\n\n {/* Tag Pills */}\n
\n {item.tags.map((t) => (\n toggleTag(t)}\n >\n {t}\n \n ))}\n
\n\n {/* Card Footer Actions Row */}\n
\n {item.savedAt}\n\n
\n copyUrl(item, e)}\n >\n {copiedId === item.id ? (\n \n ) : (\n \n )}\n \n\n \n \n Open\n \n \n \n
\n
\n \n \n ))}\n
\n ) : (\n /* Empty State */\n
\n
\n \n
\n

No bookmarks found

\n

\n No engineering resources match your active collection, tag filter, or search query. Try clearing filters\n or add a new bookmark.\n

\n
\n \n \n
\n
\n )}\n
\n
\n\n {/* Add Bookmark Modal Dialog */}\n \n \n \n
\n
\n \n
\n Add New Bookmark\n
\n \n Save a web resource or engineering tool with automated metadata fetching.\n \n \n\n
\n {/* URL Input with Auto-Fetch Button */}\n
\n \n
\n setFormUrl(e.target.value)}\n type=\"url\"\n placeholder=\"https://astro.build or https://linear.app\"\n className=\"h-9 text-xs\"\n required\n />\n \n \n Fetch\n \n
\n
\n\n {/* Quick Samples Preset Bar */}\n
\n Try sample:\n {\n setFormUrl('https://astro.build')\n setTimeout(autoFetchMetadata, 50)\n }}\n >\n Astro SSG\n \n {\n setFormUrl('https://linear.app/method')\n setTimeout(autoFetchMetadata, 50)\n }}\n >\n Linear Method\n \n {\n setFormUrl('https://github.com/features')\n setTimeout(autoFetchMetadata, 50)\n }}\n >\n GitHub Guides\n \n
\n\n \n\n {/* Title Input */}\n
\n \n setFormTitle(e.target.value)}\n type=\"text\"\n placeholder=\"e.g. Astro 4.0 Server Islands & SSG Docs\"\n className=\"h-9 text-xs\"\n required\n />\n
\n\n {/* Excerpt Description */}\n
\n \n setFormExcerpt(e.target.value)}\n type=\"text\"\n placeholder=\"Brief description or takeaway notes…\"\n className=\"h-9 text-xs\"\n />\n
\n\n {/* Collection Selector */}\n
\n \n \n setFormCollection(val as 'design-systems' | 'web-perf' | 'typography' | 'ai-tools' | 'security')\n }\n >\n \n \n \n \n Design Systems\n Web Performance\n Typography & Fonts\n AI & LLM Tools\n Security & Auth\n \n \n
\n\n {/* Tags Input */}\n
\n \n setFormTags(e.target.value)}\n type=\"text\"\n placeholder=\"#astro, #vue, #web-perf\"\n className=\"h-9 text-xs\"\n />\n
\n\n {/* Dialog Footer Buttons */}\n \n \n \n \n \n \n \n
\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/BookmarkManagerGrid.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dialog.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Raindrop style visual web bookmarks and engineering resources manager with collection folders, tag cloud filtering, real-time search, favorite toggles, copy link, and add bookmark modal.", "categories": [ "productivity", "app", "dashboard", "collaboration" ] }