\n {/* Header */}\n \n \n

\n \n \n \n \n setDarkModeEnabled(!darkModeEnabled)}\n >\n \n \n setShowSettingsOverlay(true)}\n >\n \n \n \n

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

\n {!hideAllCategories && (\n \n {/* Show category name & optionally the count */}\n {category}\n {showCategoryCounts && ` (${categoryCount})`}\n \n )}\n\n {/* If listViewEnabled => multiple columns in list view */}\n {listViewEnabled\n ? (\n \n {groupedBookmarks[category].map((bookmark) => {\n const faviconUrl = getSiteIconURL(bookmark);\n\n // Set background if user wants & bookmark has an image\n const rowStyle = {\n fontWeight: \"bold\", // always bold\n color: listViewTitleColor,\n ...(listViewOptions.showBackground\n && bookmark.backgroundImage\n ? {\n backgroundImage: `url(${bookmark.backgroundImage})`,\n backgroundSize: \"cover\",\n backgroundPosition: \"center\",\n }\n : {}),\n };\n\n return (\n handleRightClickOnBookmark(e, bookmark)}\n onClick={() => openBookmarkInSameTab(bookmark.url)}\n onAuxClick={(e) => {\n if (e.button === 1) {\n e.preventDefault();\n openBookmarkInNewTab(bookmark.url);\n }\n }}\n >\n {/* Show Favicon (if toggled on globally AND in listViewOptions) */}\n {bookmarkVisibility.showSiteIcon\n && listViewOptions.showSiteIcon\n && faviconUrl && (\n \n )}\n {/* Title text */}\n {bookmarkVisibility.showTitle && (\n \n {bookmark.title}\n \n )}\n {/* Show URL (if toggled on) */}\n {bookmarkVisibility.showURL && (\n \n ({bookmark.url})\n \n )}\n

\n );\n })}\n \n )\n : (\n // ---- Grid View (Original) ----\n \n {groupedBookmarks[category].map((bookmark) => {\n const faviconUrl = getSiteIconURL(bookmark);\n return (\n handleRightClickOnBookmark(e, bookmark)}\n onClick={() => openBookmarkInSameTab(bookmark.url)}\n onAuxClick={(e) => {\n if (e.button === 1) {\n e.preventDefault();\n openBookmarkInNewTab(bookmark.url);\n }\n }}\n >\n {bookmarkVisibility.showSiteIcon && faviconUrl && (\n \n )}\n {bookmarkVisibility.showCategory && (\n

\n Category: {bookmark.category}\n

\n )}\n {bookmarkVisibility.showTitle && (\n

\n {bookmark.title}\n

\n )}\n {bookmarkVisibility.showURL && (\n

\n {bookmark.url}\n

\n )}\n {bookmarkVisibility.showDescription && (\n

\n {bookmark.description || \"\"}\n

\n )}\n {bookmarkVisibility.showTags && (\n

\n Tags: {bookmark.tags || \"\"}\n

\n )}\n {bookmarkVisibility.showDateAdded && (\n

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

\n )}\n \n );\n })}\n \n )}\n \n );\n })}\n\n {/* Overlay: Add/Edit Bookmark */}\n {showAddBookmarkOverlay && (\n \n e.stopPropagation()}\n >\n \n ×\n \n

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

\n \n Category\n \n

\n \n setBookmarkFormData({\n ...bookmarkFormData,\n bookmarkCategory: e.target.value,\n })}\n />\n

\n \n Title *\n \n

\n \n setBookmarkFormData({\n ...bookmarkFormData,\n bookmarkTitle: e.target.value,\n })}\n required\n />\n handlePasteToField(\"bookmarkTitle\")}\n >\n \n \n

\n \n URL *\n \n

\n \n setBookmarkFormData({\n ...bookmarkFormData,\n bookmarkURL: e.target.value,\n })}\n required\n />\n handlePasteToField(\"bookmarkURL\")}\n >\n \n \n

\n \n Description\n \n

\n \n setBookmarkFormData({\n ...bookmarkFormData,\n description: e.target.value,\n })}\n />\n

\n \n Tags (comma-separated)\n \n

\n \n setBookmarkFormData({\n ...bookmarkFormData,\n tags: e.target.value,\n })}\n />\n

\n \n Date Added\n \n

\n \n setBookmarkFormData({\n ...bookmarkFormData,\n sortDate: e.target.value,\n })}\n />\n

\n \n Background Image URL\n \n

\n \n setBookmarkFormData({\n ...bookmarkFormData,\n backgroundImage: e.target.value,\n })}\n />\n handlePasteToField(\"backgroundImage\")}\n >\n \n \n

\n \n Site Icon URL\n \n

\n \n setBookmarkFormData({\n ...bookmarkFormData,\n faviconURL: e.target.value,\n })}\n />\n handlePasteToField(\"faviconURL\")}\n >\n \n \n

\n \n {editBookmarkId ? \"Update Bookmark\" : \"Add Bookmark\"}\n \n \n \n \n )}\n\n {/* Overlay: Settings */}\n {showSettingsOverlay && (\n \n e.stopPropagation()}\n >\n setShowSettingsOverlay(false)}\n >\n ×\n \n

Settings

\n\n {/* Hide Categories */}\n

\n \n Hide Categories\n \n

\n setHideAllCategories(!hideAllCategories)}\n />\n \n Hide entire category sections\n \n

\n\n {/* Layout Toggle */}\n

\n Layout\n

\n setListViewEnabled(!listViewEnabled)}\n />\n \n Use List View (compact)\n \n

\n\n {/* Additional List View Settings */}\n {listViewEnabled && (\n

\n List View Settings\n

\n \n Min Column Width (px)\n \n setListViewColumnMinWidth(Number(e.target.value))}\n />\n

\n \n Title Color\n \n setListViewTitleColor(e.target.value)}\n />\n

\n \n setListViewOptions((prev) => ({\n ...prev,\n showSiteIcon: !prev.showSiteIcon,\n }))}\n />\n \n Show Site Icon in List View\n \n

\n \n setListViewOptions((prev) => ({\n ...prev,\n showBackground: !prev.showBackground,\n }))}\n />\n \n Show Background in List View\n \n

\n )}\n\n {/* Fields Visibility */}\n

\n Fields Visibility\n

\n toggleBookmarkFieldVisibility(\"showCategory\")}\n />\n \n Show Category\n \n

\n toggleBookmarkFieldVisibility(\"showTitle\")}\n />\n \n Show Title\n \n

\n toggleBookmarkFieldVisibility(\"showURL\")}\n />\n \n Show URL\n \n

\n toggleBookmarkFieldVisibility(\"showDescription\")}\n />\n \n Show Description\n \n

\n toggleBookmarkFieldVisibility(\"showTags\")}\n />\n \n Show Tags\n \n

\n toggleBookmarkFieldVisibility(\"showDateAdded\")}\n />\n \n Show Date Added\n \n

\n toggleBookmarkFieldVisibility(\"showSiteIcon\")}\n />\n \n Show Site Icon\n \n

\n\n {/* Category Counts */}\n

\n \n Category Counts\n \n

\n setShowCategoryCounts(!showCategoryCounts)}\n />\n \n Show number of links next to each category\n \n

\n\n {/* Card Dimensions (Grid View) */}\n

\n \n Card Width (px)\n \n

\n setCardWidth(Number(e.target.value))}\n />\n \n Card Height (px)\n \n setCardHeight(Number(e.target.value))}\n />\n

\n\n {/* Overlay Color & Opacity */}\n

\n Overlay Color\n

\n setLinkOverlayColor(e.target.value)}\n />\n Overlay Opacity\n setLinkOverlayOpacity(parseFloat(e.target.value))}\n />\n

\n\n {/* Export / Import (moved to bottom) */}\n

\n Export / Import\n

\n Save all bookmarks to a file for backup/sharing, or load them from a file.\n

\n \n \n Save Bookmarks\n \n \n Load Bookmarks\n \n \n

\n \n \n \n )}\n \n );\n}\n\nfunction startApp() {\n createRoot(document.getElementById(\"app-root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n startApp();\n}\n\nconst app = new Hono();\n\n// Define constants\nconst SCHEMA_VERSION = 3;\nconst TABLE_NAME = \"bookmarks\";\n\napp.get(\"/\", async (c) => {\n return c.html(`\n \n \n \n \n \n \n My Bookmark Manager\n \n \n \n \n \n \n

\n \n \n \n \n `);\n});\n\napp.get(\"/about\", async (c) => {\n return c.html(\n `

About Page

This is the About page of My Bookmark Manager.

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

Contact Us

You can reach us at contact@mybookmarkmanager.com.

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

Location

We are located worldwide, thanks to the internet!

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

Help & FAQ

Common questions about My Bookmark Manager.

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

Bookmark Manager