Use new bookmarklet features

package.json

@@ -8,7 +8,7 @@
     "url": "https://github.com/hifiwi-fi/breadcrum.net/issues"
   },
   "dependencies": {
-    "@breadcrum/bookmarklet": "^1.0.2",
+    "@breadcrum/bookmarklet": "^1.0.3",
     "@fastify/accepts": "^4.0.0",
     "@fastify/auth": "^4.0.0",
     "@fastify/autoload": "^5.3.1",

web/bookmarks/add/client.js

@@ -3,6 +3,7 @@
 import { Component, html, render, useEffect, useState } from 'uland-isomorphic'
 import { useUser } from '../../hooks/useUser.js'
 import { fetch } from 'fetch-undici'
+import { version } from '@breadcrum/bookmarklet/version.js'
 import { useLSP } from '../../hooks/useLSP.js'
 import { useQuery } from '../../hooks/useQuery.js'
 import { bookmarkEdit } from '../../components/bookmark/bookmark-edit.js'
@@ -14,6 +15,8 @@ export const page = Component(() => {
   const { query } = useQuery()
   const [bookmark, setBookmark] = useState(null)
   const [newlyCreated, setNewlyCreated] = useState(false)
+  const [bookmarkletUpdateAvailable, setBookmarkletUpdateAvailable] = useState(false)
+  const [bookmarkletVersion, setBookmarkletVersion] = useState()
 
   useEffect(() => {
     if (!user && !loading) {
@@ -27,14 +30,17 @@ export const page = Component(() => {
       setBookmark({
         url: query.get('url'),
         title: query.get('title'),
-        note: query.get('description'),
-        tags: query.getAll('tags')
+        note: query.get('note') || query.get('description'),
+        tags: query.getAll('tags').filter(t => Boolean(t))
       })
     }
 
     const init = async () => {
       setNewlyCreated(false)
       const queryUrl = query.get('url')
+      const ver = query.get('ver')
+      setBookmarkletVersion(ver)
+      if (ver !== version) setBookmarkletUpdateAvailable(true)
 
       if (!queryUrl) {
         setFallbackBookmark()
@@ -44,7 +50,7 @@ export const page = Component(() => {
       const payload = {
         url: queryUrl,
         title: query.get('title'),
-        note: query.get('description'),
+        note: query.get('note') || query.get('description'),
         tags: query.getAll('tags').filter(t => Boolean(t))
       }
 
@@ -120,6 +126,8 @@ export const page = Component(() => {
   return html`
     ${bookmarkEdit({
       bookmark,
+      bookmarkletUpdateAvailable,
+      bookmarkletVersion,
       onSave: handleSaveBookmark,
       legend: existingBookmark
         ? newlyCreated

web/components/bookmark/bookmark-edit.js

@@ -9,6 +9,8 @@ import { useLSP } from '../../hooks/useLSP.js'
 
 export const bookmarkEdit = Component(({
   bookmark: b,
+  bookmarkletUpdateAvailable,
+  bookmarkletVersion,
   onSave,
   onDeleteBookmark,
   onCancelEdit,
@@ -420,6 +422,18 @@ export const bookmarkEdit = Component(({
           </div>
         </div>
 
+        ${
+          bookmarkletVersion
+            ? html`
+            <div class="bc-help-text">
+              Version ${bookmarkletVersion}
+              ${bookmarkletUpdateAvailable
+                ? html`<a onclick=${handleNewWindowLink} target="_blank" href="/docs/bookmarklets/">An updated bookmarklet is available</a>`
+              : null}
+            </div>
+            `
+            : null
+        }
         <!-- Bookmark Error Box -->
         ${error ? html`<div class="error-box">${error.message}</div>` : null}
       </fieldset>

web/docs/bookmarklets/bookmarklet.js

@@ -5,5 +5,3 @@ export const bookmarklet = getBookmarklet({
   HOST: process.env.HOST,
   WINDOW_TITLE: '🥖 Breadcrum'
 })
-
-console.log({ bookmarklet })

web/docs/bookmarklets/client.js

@@ -1,6 +1,7 @@
 /* eslint-env browser */
 import { Component, html, render } from 'uland-isomorphic'
 import { bookmarklet } from '../bookmarklets/bookmarklet.js'
+import { version } from '@breadcrum/bookmarklet/version.js'
 
 export const page = Component(() => {
   return html`
@@ -11,7 +12,7 @@ export const page = Component(() => {
     When you visit a page you want to bookmark, click the the bookmarklet in your bookmark bar or menu and it will open a new bookmark window. Existing URLs will open an edit window.
   </p>
 
-  <p><a class="bc-bookmarklet" href="${bookmarklet}">🥖 bookmark</a></p>
+  <p><a class="bc-bookmarklet" href="${bookmarklet}">🥖 bookmark</a> <span class="bc-help-text">Version ${version}</span></p>
 
   <h2>Apple Shortcut</h2>