/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { Hono } from "https://esm.sh/hono@3.3.1"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; function MyBookmarkManager() { const [allSavedBookmarks, setAllSavedBookmarks] = useState([]); const [darkModeEnabled, setDarkModeEnabled] = useState(true); const [showAddBookmarkOverlay, setShowAddBookmarkOverlay] = useState(false); const [showSettingsOverlay, setShowSettingsOverlay] = useState(false); const [allBookmarkCategories, setAllBookmarkCategories] = useState([]); const [selectedBookmarkCategories, setSelectedBookmarkCategories] = useState( [], ); const [editBookmarkId, setEditBookmarkId] = useState(null); // List View Toggle const [listViewEnabled, setListViewEnabled] = useState(false); // Grid View Dimensions const [cardWidth, setCardWidth] = useState(300); const [cardHeight, setCardHeight] = useState(150); // NEW: Hide Categories const [hideAllCategories, setHideAllCategories] = useState(false); // NEW: Overlay Color/Opacity const [linkOverlayColor, setLinkOverlayColor] = useState("#000000"); const [linkOverlayOpacity, setLinkOverlayOpacity] = useState(0.5); // ---------------------- NEW: List View Settings ----------------------- // How wide each row can be (min width) before it wraps. const [listViewColumnMinWidth, setListViewColumnMinWidth] = useState(250); // The row font is always bold, but we let user customize color of the title text. const [listViewTitleColor, setListViewTitleColor] = useState("#ffffff"); // Category counts const [showCategoryCounts, setShowCategoryCounts] = useState(true); // background & favicon settings for list view (from previous sample) const [listViewOptions, setListViewOptions] = useState({ showSiteIcon: true, showBackground: false, }); // ---------------------------------------------------------------------- const [bookmarkFormData, setBookmarkFormData] = useState({ bookmarkCategory: "", bookmarkTitle: "", bookmarkURL: "", description: "", tags: "", sortDate: new Date().toISOString().slice(0, 16), backgroundImage: "", faviconURL: "", }); const [bookmarkVisibility, setBookmarkVisibility] = useState({ showCategory: false, showTitle: true, showURL: false, showDescription: false, showTags: true, showDateAdded: true, showSiteIcon: true, }); const fileInputRef = useRef(null); // ----------------- Helpers ----------------- function getSiteIconURL(bookmark) { const explicitFavicon = bookmark.faviconURL?.trim(); if (explicitFavicon) return explicitFavicon; let targetUrl = bookmark.url?.trim(); if (!targetUrl) return null; if (!targetUrl.startsWith("http")) targetUrl = "https://" + targetUrl; try { const domain = new URL(targetUrl).hostname; return `https://www.google.com/s2/favicons?sz=64&domain=${domain}`; } catch { return null; } } // ----------------- Effects ----------------- useEffect(() => { fetchSavedBookmarks(); }, []); useEffect(() => { document.body.classList.toggle("dark-mode", darkModeEnabled); }, [darkModeEnabled]); useEffect(() => { // Load existing settings from localStorage const savedSettings = localStorage.getItem("myBookmarkSettings"); if (savedSettings) { try { const parsed = JSON.parse(savedSettings); if (typeof parsed.darkModeEnabled === "boolean") { setDarkModeEnabled(parsed.darkModeEnabled); } if (parsed.bookmarkVisibility) { setBookmarkVisibility(parsed.bookmarkVisibility); } if (typeof parsed.cardWidth === "number") { setCardWidth(parsed.cardWidth); } if (typeof parsed.cardHeight === "number") { setCardHeight(parsed.cardHeight); } // Restore list view toggles if (typeof parsed.listViewEnabled === "boolean") { setListViewEnabled(parsed.listViewEnabled); } // NEW: Load multiple columns config + color + category counts if (typeof parsed.listViewColumnMinWidth === "number") { setListViewColumnMinWidth(parsed.listViewColumnMinWidth); } if (typeof parsed.listViewTitleColor === "string") { setListViewTitleColor(parsed.listViewTitleColor); } if (typeof parsed.showCategoryCounts === "boolean") { setShowCategoryCounts(parsed.showCategoryCounts); } if (parsed.listViewOptions) { setListViewOptions(parsed.listViewOptions); } // NEW: Load hide categories setting if (typeof parsed.hideAllCategories === "boolean") { setHideAllCategories(parsed.hideAllCategories); } // NEW: Load overlay color/opacity settings if (typeof parsed.linkOverlayColor === "string") { setLinkOverlayColor(parsed.linkOverlayColor); } if (typeof parsed.linkOverlayOpacity === "number") { setLinkOverlayOpacity(parsed.linkOverlayOpacity); } } catch {} } }, []); useEffect(() => { // Save settings whenever any relevant state changes const settingsToSave = { darkModeEnabled, bookmarkVisibility, cardWidth, cardHeight, listViewEnabled, listViewColumnMinWidth, listViewTitleColor, showCategoryCounts, listViewOptions, hideAllCategories, linkOverlayColor, linkOverlayOpacity, }; localStorage.setItem("myBookmarkSettings", JSON.stringify(settingsToSave)); }, [ darkModeEnabled, bookmarkVisibility, cardWidth, cardHeight, listViewEnabled, listViewColumnMinWidth, listViewTitleColor, showCategoryCounts, listViewOptions, hideAllCategories, linkOverlayColor, linkOverlayOpacity, ]); // ----------------- Data Loading ----------------- async function fetchSavedBookmarks() { const response = await fetch("/api/bookmarks"); const data = await response.json(); setAllSavedBookmarks(data); const uniqueCategories = [...new Set(data.map((b) => b.category))]; setAllBookmarkCategories(uniqueCategories); } // ----------------- Overlays ----------------- function showAddNewBookmarkOverlay() { setBookmarkFormData({ bookmarkCategory: "", bookmarkTitle: "", bookmarkURL: "", description: "", tags: "", sortDate: new Date().toISOString().slice(0, 16), backgroundImage: "", faviconURL: "", }); setEditBookmarkId(null); setShowAddBookmarkOverlay(true); } function handleRightClickOnBookmark(e, bookmark) { e.preventDefault(); setBookmarkFormData({ bookmarkCategory: bookmark.category, bookmarkTitle: bookmark.title, bookmarkURL: bookmark.url, description: bookmark.description || "", tags: bookmark.tags || "", sortDate: bookmark.sortDate, backgroundImage: bookmark.backgroundImage || "", faviconURL: bookmark.faviconURL || "", }); setEditBookmarkId(bookmark.id); setShowAddBookmarkOverlay(true); } function closeAddBookmarkOverlay() { setShowAddBookmarkOverlay(false); } function closeSettingsOverlay() { setShowSettingsOverlay(false); } // ----------------- CRUD ----------------- async function handleBookmarkFormSubmit(e) { e.preventDefault(); if (editBookmarkId === null) { const response = await fetch("/api/bookmarks", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ bookmarkCategory: bookmarkFormData.bookmarkCategory, bookmarkTitle: bookmarkFormData.bookmarkTitle, bookmarkURL: bookmarkFormData.bookmarkURL, description: bookmarkFormData.description, tags: bookmarkFormData.tags, dateAdded: bookmarkFormData.sortDate, bookmarkImage: bookmarkFormData.backgroundImage, faviconURL: bookmarkFormData.faviconURL, }), }); if (response.ok) { closeAddBookmarkOverlay(); fetchSavedBookmarks(); } } else { const response = await fetch(`/api/bookmarks/${editBookmarkId}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ bookmarkCategory: bookmarkFormData.bookmarkCategory, bookmarkTitle: bookmarkFormData.bookmarkTitle, bookmarkURL: bookmarkFormData.bookmarkURL, description: bookmarkFormData.description, tags: bookmarkFormData.tags, dateAdded: bookmarkFormData.sortDate, bookmarkImage: bookmarkFormData.backgroundImage, faviconURL: bookmarkFormData.faviconURL, }), }); if (response.ok) { closeAddBookmarkOverlay(); fetchSavedBookmarks(); } } } // ----------------- Export / Import ----------------- async function saveAllBookmarks() { const response = await fetch("/api/bookmarks/export"); const bookmarkData = await response.text(); // Get as text instead of blob const blob = new Blob([bookmarkData], { type: "application/json" }); const downloadUrl = window.URL.createObjectURL(blob); const today = new Date(); const formattedDate = `${today.getFullYear().toString().slice(-2)}.${today.getMonth() + 1}.${today.getDate()}`; // Format as YY.M.D const hiddenLink = document.createElement("a"); hiddenLink.style.display = "none"; hiddenLink.href = downloadUrl; hiddenLink.download = `val_exported_bookmarks-${formattedDate}.json`; document.body.appendChild(hiddenLink); hiddenLink.click(); window.URL.revokeObjectURL(downloadUrl); } function importBookmarksFromFile(event) { const uploadedFile = event.target.files[0]; if (uploadedFile) { const fileReader = new FileReader(); fileReader.onload = async (e) => { const fileContent = e.target.result; try { const loadedBookmarks = JSON.parse(fileContent); const response = await fetch("/api/bookmarks/import", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(loadedBookmarks), }); if (response.ok) { alert("Bookmarks loaded successfully"); fetchSavedBookmarks(); } else { alert("Error loading bookmarks"); } } catch { alert("Invalid file format"); } }; fileReader.readAsText(uploadedFile); } } function triggerFileUpload() { fileInputRef.current.click(); } // ----------------- Category Filtering ----------------- function toggleSelectedCategory(category) { setSelectedBookmarkCategories((prev) => prev.includes(category) ? prev.filter((c) => c !== category) : [...prev, category] ); } function resetAllCategories() { setSelectedBookmarkCategories([]); } // ----------------- Field Visibility Toggles ----------------- function toggleBookmarkFieldVisibility(fieldName) { setBookmarkVisibility((prev) => ({ ...prev, [fieldName]: !prev[fieldName], })); } // ----------------- Opening Bookmarks ----------------- function openBookmarkInSameTab(url) { const actualURL = url.startsWith("http") ? url : `https://${url}`; window.location.href = actualURL; } function openBookmarkInNewTab(url) { const actualURL = url.startsWith("http") ? url : `https://${url}`; window.open(actualURL, "_blank", "noopener,noreferrer"); } // ----------------- Group + Sort Bookmarks ----------------- const filteredBookmarks = selectedBookmarkCategories.length ? allSavedBookmarks.filter((b) => selectedBookmarkCategories.includes(b.category)) : allSavedBookmarks; const groupedBookmarks = filteredBookmarks.reduce((acc, b) => { if (!acc[b.category]) acc[b.category] = []; acc[b.category].push(b); return acc; }, {}); Object.keys(groupedBookmarks).forEach((cat) => { groupedBookmarks[cat].sort( (a, b) => new Date(b.sortDate) - new Date(a.sortDate), ); }); // We will eventually display something like "Ai (4)" if showCategoryCounts = true const sortedCategories = Object.keys(groupedBookmarks).sort(); const sortedAllBookmarkCategories = [...allBookmarkCategories].sort(); // ------------------------------------------------------------------------ // Clipboard Paste Helpers // ------------------------------------------------------------------------ async function handlePasteToField(fieldName) { try { const text = await navigator.clipboard.readText(); setBookmarkFormData((prev) => ({ ...prev, [fieldName]: text })); } catch (error) { console.error("Could not paste from clipboard:", error); alert("Clipboard access was blocked or not allowed."); } } return (

{/* Header */}

{/* Category Filter */} {!hideAllCategories && ( )} {/* Bookmarks Rendering */} {sortedCategories.map((category) => { const categoryCount = groupedBookmarks[category].length; return (

{!hideAllCategories && (

{/* Show category name & optionally the count */} {category} {showCategoryCounts && ` (${categoryCount})`}

)} {/* If listViewEnabled => multiple columns in list view */} {listViewEnabled ? (

{groupedBookmarks[category].map((bookmark) => { const faviconUrl = getSiteIconURL(bookmark); // Set background if user wants & bookmark has an image const rowStyle = { fontWeight: "bold", // always bold color: listViewTitleColor, ...(listViewOptions.showBackground && bookmark.backgroundImage ? { backgroundImage: `url(${bookmark.backgroundImage})`, backgroundSize: "cover", backgroundPosition: "center", } : {}), }; return (

handleRightClickOnBookmark(e, bookmark)} onClick={() => openBookmarkInSameTab(bookmark.url)} onAuxClick={(e) => { if (e.button === 1) { e.preventDefault(); openBookmarkInNewTab(bookmark.url); } }} > {/* Show Favicon (if toggled on globally AND in listViewOptions) */} {bookmarkVisibility.showSiteIcon && listViewOptions.showSiteIcon && faviconUrl && ( Favicon

)} {/* Title text */} {bookmarkVisibility.showTitle && ( {bookmark.title} )} {/* Show URL (if toggled on) */} {bookmarkVisibility.showURL && ( ({bookmark.url}) )}

); })}

) : ( // ---- Grid View (Original) ----

{groupedBookmarks[category].map((bookmark) => { const faviconUrl = getSiteIconURL(bookmark); return (

handleRightClickOnBookmark(e, bookmark)} onClick={() => openBookmarkInSameTab(bookmark.url)} onAuxClick={(e) => { if (e.button === 1) { e.preventDefault(); openBookmarkInNewTab(bookmark.url); } }} > {bookmarkVisibility.showSiteIcon && faviconUrl && ( Favicon

)} {bookmarkVisibility.showCategory && (

Category: {bookmark.category}

)} {bookmarkVisibility.showTitle && (

{bookmark.title}

)} {bookmarkVisibility.showURL && (

{bookmark.url}

)} {bookmarkVisibility.showDescription && (

{bookmark.description || ""}

)} {bookmarkVisibility.showTags && (

Tags: {bookmark.tags || ""}

)} {bookmarkVisibility.showDateAdded && (

Added: {new Date(bookmark.sortDate).toLocaleString()}

)}

); })}

)}

); })} {/* Overlay: Add/Edit Bookmark */} {showAddBookmarkOverlay && (

e.stopPropagation()} > ×

{editBookmarkId ? "Edit Bookmark" : "Add a New Bookmark"}

About Page

This is the About page of My Bookmark Manager.

`, ); }); app.get("/contact-us", async (c) => { return c.html( `

Contact Us

You can reach us at contact@mybookmarkmanager.com.

`, ); }); app.get("/location", async (c) => { return c.html( `

Location

We are located worldwide, thanks to the internet!

`, ); }); app.get("/help-faq", async (c) => { return c.html( `

Help & FAQ

Common questions about My Bookmark Manager.

`, ); }); app.get("/api/bookmarks", async (c) => { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${TABLE_NAME}_bookmarks_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, category TEXT NOT NULL, title TEXT NOT NULL, url TEXT NOT NULL, description TEXT, tags TEXT, sortDate TEXT NOT NULL, backgroundImage TEXT, faviconURL TEXT ) `); const bookmarks = await sqlite.execute(` SELECT * FROM ${TABLE_NAME}_bookmarks_${SCHEMA_VERSION} `); return c.json(bookmarks.rows); }); app.post("/api/bookmarks", async (c) => { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const { bookmarkCategory, bookmarkTitle, bookmarkURL, description, tags, dateAdded, bookmarkImage, faviconURL, } = await c.req.json(); await sqlite.execute( `INSERT INTO ${TABLE_NAME}_bookmarks_${SCHEMA_VERSION} (category, title, url, description, tags, sortDate, backgroundImage, faviconURL) VALUES (?, ?, ?, ?, ?, ?, ?, ?) `, [ bookmarkCategory, bookmarkTitle, bookmarkURL, description, tags, dateAdded, bookmarkImage, faviconURL, ], ); return c.json({ success: true }); }); app.put("/api/bookmarks/:id", async (c) => { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const id = c.req.param("id"); try { const { bookmarkCategory, bookmarkTitle, bookmarkURL, description, tags, dateAdded, bookmarkImage, faviconURL, } = await c.req.json(); // Validate required fields if (!bookmarkCategory || !bookmarkTitle || !bookmarkURL || !dateAdded) { return c.json( { success: false, error: "Missing required fields", }, 400, ); } // Check if bookmark exists before updating const existingBookmark = await sqlite.execute( `SELECT id FROM ${TABLE_NAME}_bookmarks_${SCHEMA_VERSION} WHERE id = ?`, [id], ); if (!existingBookmark.rows.length) { return c.json( { success: false, error: `Bookmark with id ${id} not found`, }, 404, ); } await sqlite.execute( `UPDATE ${TABLE_NAME}_bookmarks_${SCHEMA_VERSION} SET category = ?, title = ?, url = ?, description = ?, tags = ?, sortDate = ?, backgroundImage = ?, faviconURL = ? WHERE id = ?`, [ bookmarkCategory, bookmarkTitle, bookmarkURL, description || null, tags || null, dateAdded, bookmarkImage || null, faviconURL || null, id, ], ); return c.json({ success: true }); } catch (error) { console.error("Error updating bookmark:", error); return c.json( { success: false, error: error.message, details: { id, table: `${TABLE_NAME}_bookmarks_${SCHEMA_VERSION}`, errorName: error.name, errorStack: error.stack, }, }, 500, ); } }); app.get("/api/bookmarks/export", async (c) => { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const bookmarks = await sqlite.execute(` SELECT * FROM ${TABLE_NAME}_bookmarks_${SCHEMA_VERSION} `); // Format the JSON with proper indentation const formattedJson = JSON.stringify(bookmarks.rows, null, 2); return new Response(formattedJson, { headers: { "Content-Type": "application/json", "Content-Disposition": "attachment; filename=my_bookmarks.json", }, }); }); app.post("/api/bookmarks/import", async (c) => { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const importedBookmarks = await c.req.json(); for (const b of importedBookmarks) { await sqlite.execute( `INSERT INTO ${TABLE_NAME}_bookmarks_${SCHEMA_VERSION} (category, title, url, description, tags, sortDate, backgroundImage, faviconURL) VALUES (?, ?, ?, ?, ?, ?, ?, ?) `, [ b.category, b.title, b.url, b.description, b.tags, b.sortDate, b.backgroundImage, b.faviconURL, ], ); } return c.json({ success: true }); }); export default async function handleRequest(request) { return app.fetch(request); } // Updated CSS for multi-column "list view" const styles = ` :root { --background-color: #ffffff; --text-color: #343a40; --border-color: #dee2e6; --input-background: #ffffff; --input-border: #ced4da; --button-primary-background: #007bff; --button-primary-color: #ffffff; --button-success-background: #28a745; --button-success-color: #ffffff; --overlay-background: rgba(0, 0, 0, 0.5); --overlay-content-background: #ffffff; --overlay-color: rgba(0, 0, 0, 0.5); } .dark-mode { --background-color: #1a1a1a; --text-color: #f0f0f0; --border-color: #444; --input-background: #2a2a2a; --input-border: #555; --button-primary-background: #0056b3; --button-primary-color: #ffffff; --button-success-background: #1e7e34; --button-success-color: #ffffff; --overlay-background: rgba(255, 255, 255, 0.1); --overlay-content-background: #2a2a2a; --overlay-color: rgba(255, 255, 255, 0.1); } body { font-family: 'Quicksand', sans-serif; color: var(--text-color); background-color: var(--background-color); padding-bottom: 20px; transition: background-color 0.3s, color 0.3s; } h1, h2, h3, label { font-weight: 600; } .btn { margin-right: 10px; margin-bottom: 10px; } .btn-custom { background-color: var(--button-primary-background); border-color: var(--button-primary-background); color: var(--button-primary-color); } .btn-custom:hover { background-color: #0056b3; border-color: #0056b3; color: white; } .form-control { background-color: var(--input-background); border-color: var(--input-border); color: var(--text-color); } .form-control:focus { background-color: var(--input-background); color: var(--text-color); } .link-item { border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; margin: 0; cursor: pointer; transition: background-color 0.2s; position: relative; } .link-item:hover { background-color: var(--border-color); } .link-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 1; } .link-item > * { position: relative; z-index: 2; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-background); display: none; justify-content: center; align-items: center; z-index: 1000; } .overlay-content { background-color: var(--overlay-content-background); padding: 20px; border-radius: 10px; width: 90%; max-width: 700px; max-height: 90%; overflow-y: auto; } .close-overlay { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--text-color); opacity: 0.5; text-decoration: none; } .close-overlay:hover { color: var(--text-color); opacity: 0.75; } .link-grid { display: grid; gap: 20px; } @media (max-width: 768px) { .link-grid { grid-template-columns: 1fr; } } /* List View (now multi-column) */ .list-view-container { /* We'll define display:grid inline in the JSX using dynamic styles */ } .list-view-row { border: 1px solid var(--border-color); border-radius: 4px; padding: 8px; cursor: pointer; transition: background-color 0.2s; position: relative; /* row text is bold by default now */ font-weight: bold; } .list-view-row:hover { background-color: var(--border-color); } .list-view-row img { width: 16px; height: 16px; } .paste-button { background: none; border: none; color: var(--text-color); padding: 0 0.5rem; cursor: pointer; transition: opacity 0.2s; } .paste-button:hover { opacity: 0.7; } /* Input Group with Paste Button Styling */ .input-group .btn-outline-secondary { min-width: 42px; display: flex; align-items: center; justify-content: center; padding: 6px 12px; border-color: var(--input-border); } .input-group .btn-outline-secondary:hover { background-color: var(--border-color); color: var(--text-color); } .input-group .btn-outline-secondary i { font-size: 1.1rem; } /* Dark mode specific styling */ .dark-mode .input-group .btn-outline-secondary { color: #fff; border-color: var(--input-border); } .dark-mode .input-group .btn-outline-secondary:hover { background-color: var(--border-color); color: #fff; } `;

myBookmarkManager