Avoid page reload when triggering actions in bookmark list (#506)

* Extract bookmark view contexts

* Implement basic partial updates for bookmark list and tag cloud

* Refactor confirm button JS into web component

* Refactor bulk edit JS into web component

* Refactor tag autocomplete JS into web component

* Refactor bookmark page JS into web component

* Refactor global shortcuts JS into web component

* Update tests

* Add E2E test for partial updates

* Add partial updates for archived bookmarks

* Add partial updates for shared bookmarks

* Cleanup helpers

* Improve naming in bulk edit

* Refactor shared components into behaviors

* Refactor bulk edit components into behaviors

* Refactor bookmark list components into behaviors

* Update tests

* Combine all scripts into bundle

* Fix E2E CI

bookmarks/frontend/api.js

@@ -0,0 +1,29 @@
+export class ApiClient {
+  constructor(baseUrl) {
+    this.baseUrl = baseUrl;
+  }
+
+  listBookmarks(filters, options = { limit: 100, offset: 0, path: "" }) {
+    const query = [`limit=${options.limit}`, `offset=${options.offset}`];
+    Object.keys(filters).forEach((key) => {
+      const value = filters[key];
+      if (value) {
+        query.push(`${key}=${encodeURIComponent(value)}`);
+      }
+    });
+    const queryString = query.join("&");
+    const url = `${this.baseUrl}bookmarks${options.path}/?${queryString}`;
+
+    return fetch(url)
+      .then((response) => response.json())
+      .then((data) => data.results);
+  }
+
+  getTags(options = { limit: 100, offset: 0 }) {
+    const url = `${this.baseUrl}tags/?limit=${options.limit}&offset=${options.offset}`;
+
+    return fetch(url)
+      .then((response) => response.json())
+      .then((data) => data.results);
+  }
+}

bookmarks/frontend/behaviors/bookmark-page.js

@@ -0,0 +1,65 @@
+import { registerBehavior, swap } from "./index";
+
+class BookmarkPage {
+  constructor(element) {
+    this.element = element;
+    this.form = element.querySelector("form.bookmark-actions");
+    this.form.addEventListener("submit", this.onFormSubmit.bind(this));
+
+    this.bookmarkList = element.querySelector(".bookmark-list-container");
+    this.tagCloud = element.querySelector(".tag-cloud-container");
+  }
+
+  async onFormSubmit(event) {
+    event.preventDefault();
+
+    const url = this.form.action;
+    const formData = new FormData(this.form);
+    formData.append(event.submitter.name, event.submitter.value);
+
+    await fetch(url, {
+      method: "POST",
+      body: formData,
+      redirect: "manual", // ignore redirect
+    });
+    await this.refresh();
+  }
+
+  async refresh() {
+    const query = window.location.search;
+    const bookmarksUrl = this.element.getAttribute("bookmarks-url");
+    const tagsUrl = this.element.getAttribute("tags-url");
+    Promise.all([
+      fetch(`${bookmarksUrl}${query}`).then((response) => response.text()),
+      fetch(`${tagsUrl}${query}`).then((response) => response.text()),
+    ]).then(([bookmarkListHtml, tagCloudHtml]) => {
+      swap(this.bookmarkList, bookmarkListHtml);
+      swap(this.tagCloud, tagCloudHtml);
+
+      this.bookmarkList.dispatchEvent(
+        new CustomEvent("bookmark-list-updated", { bubbles: true }),
+      );
+    });
+  }
+}
+
+registerBehavior("ld-bookmark-page", BookmarkPage);
+
+class BookmarkItem {
+  constructor(element) {
+    this.element = element;
+
+    const notesToggle = element.querySelector(".toggle-notes");
+    if (notesToggle) {
+      notesToggle.addEventListener("click", this.onToggleNotes.bind(this));
+    }
+  }
+
+  onToggleNotes(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.element.classList.toggle("show-notes");
+  }
+}
+
+registerBehavior("ld-bookmark-item", BookmarkItem);

bookmarks/frontend/behaviors/bulk-edit.js

@@ -0,0 +1,100 @@
+import { registerBehavior } from "./index";
+
+class BulkEdit {
+  constructor(element) {
+    this.element = element;
+    this.active = false;
+
+    element.addEventListener(
+      "bulk-edit-toggle-active",
+      this.onToggleActive.bind(this),
+    );
+    element.addEventListener(
+      "bulk-edit-toggle-all",
+      this.onToggleAll.bind(this),
+    );
+    element.addEventListener(
+      "bulk-edit-toggle-bookmark",
+      this.onToggleBookmark.bind(this),
+    );
+    element.addEventListener(
+      "bookmark-list-updated",
+      this.onListUpdated.bind(this),
+    );
+  }
+
+  get allCheckbox() {
+    return this.element.querySelector("[ld-bulk-edit-checkbox][all] input");
+  }
+
+  get bookmarkCheckboxes() {
+    return [
+      ...this.element.querySelectorAll(
+        "[ld-bulk-edit-checkbox]:not([all]) input",
+      ),
+    ];
+  }
+
+  onToggleActive() {
+    this.active = !this.active;
+    if (this.active) {
+      this.element.classList.add("active", "activating");
+      setTimeout(() => {
+        this.element.classList.remove("activating");
+      }, 500);
+    } else {
+      this.element.classList.remove("active");
+    }
+  }
+
+  onToggleBookmark() {
+    this.allCheckbox.checked = this.bookmarkCheckboxes.every((checkbox) => {
+      return checkbox.checked;
+    });
+  }
+
+  onToggleAll() {
+    const checked = this.allCheckbox.checked;
+    this.bookmarkCheckboxes.forEach((checkbox) => {
+      checkbox.checked = checked;
+    });
+  }
+
+  onListUpdated() {
+    this.allCheckbox.checked = false;
+    this.bookmarkCheckboxes.forEach((checkbox) => {
+      checkbox.checked = false;
+    });
+  }
+}
+
+class BulkEditActiveToggle {
+  constructor(element) {
+    this.element = element;
+    element.addEventListener("click", this.onClick.bind(this));
+  }
+
+  onClick() {
+    this.element.dispatchEvent(
+      new CustomEvent("bulk-edit-toggle-active", { bubbles: true }),
+    );
+  }
+}
+
+class BulkEditCheckbox {
+  constructor(element) {
+    this.element = element;
+    element.addEventListener("change", this.onChange.bind(this));
+  }
+
+  onChange() {
+    const type = this.element.hasAttribute("all") ? "all" : "bookmark";
+    this.element.dispatchEvent(
+      new CustomEvent(`bulk-edit-toggle-${type}`, { bubbles: true }),
+    );
+  }
+}
+
+registerBehavior("ld-bulk-edit", BulkEdit);
+registerBehavior("ld-bulk-edit-active-toggle", BulkEditActiveToggle);
+registerBehavior("ld-bulk-edit-checkbox", BulkEditCheckbox);

bookmarks/frontend/behaviors/confirm-button.js

@@ -0,0 +1,50 @@
+import { registerBehavior } from "./index";
+
+class ConfirmButtonBehavior {
+  constructor(element) {
+    const button = element;
+    button.dataset.type = button.type;
+    button.dataset.name = button.name;
+    button.dataset.value = button.value;
+    button.removeAttribute("type");
+    button.removeAttribute("name");
+    button.removeAttribute("value");
+    button.addEventListener("click", this.onClick.bind(this));
+    this.button = button;
+  }
+
+  onClick(event) {
+    event.preventDefault();
+
+    const cancelButton = document.createElement(this.button.nodeName);
+    cancelButton.type = "button";
+    cancelButton.innerText = "Cancel";
+    cancelButton.className = "btn btn-link btn-sm mr-1";
+    cancelButton.addEventListener("click", this.reset.bind(this));
+
+    const confirmButton = document.createElement(this.button.nodeName);
+    confirmButton.type = this.button.dataset.type;
+    confirmButton.name = this.button.dataset.name;
+    confirmButton.value = this.button.dataset.value;
+    confirmButton.innerText = "Confirm";
+    confirmButton.className = "btn btn-link btn-sm";
+    confirmButton.addEventListener("click", this.reset.bind(this));
+
+    const container = document.createElement("span");
+    container.className = "confirmation";
+    container.append(cancelButton, confirmButton);
+    this.container = container;
+
+    this.button.before(container);
+    this.button.classList.add("d-none");
+  }
+
+  reset() {
+    setTimeout(() => {
+      this.container.remove();
+      this.button.classList.remove("d-none");
+    });
+  }
+}
+
+registerBehavior("ld-confirm-button", ConfirmButtonBehavior);

bookmarks/frontend/behaviors/global-shortcuts.js

@@ -0,0 +1,73 @@
+import { registerBehavior } from "./index";
+
+class GlobalShortcuts {
+  constructor() {
+    document.addEventListener("keydown", this.onKeyDown.bind(this));
+  }
+
+  onKeyDown(event) {
+    // Skip if event occurred within an input element
+    const targetNodeName = event.target.nodeName;
+    const isInputTarget =
+      targetNodeName === "INPUT" ||
+      targetNodeName === "SELECT" ||
+      targetNodeName === "TEXTAREA";
+
+    if (isInputTarget) {
+      return;
+    }
+
+    // Handle shortcuts for navigating bookmarks with arrow keys
+    const isArrowUp = event.key === "ArrowUp";
+    const isArrowDown = event.key === "ArrowDown";
+    if (isArrowUp || isArrowDown) {
+      event.preventDefault();
+
+      // Detect current bookmark list item
+      const path = event.composedPath();
+      const currentItem = path.find(
+        (item) => item.hasAttribute && item.hasAttribute("ld-bookmark-item"),
+      );
+
+      // Find next item
+      let nextItem;
+      if (currentItem) {
+        nextItem = isArrowUp
+          ? currentItem.previousElementSibling
+          : currentItem.nextElementSibling;
+      } else {
+        // Select first item
+        nextItem = document.querySelector("[ld-bookmark-item]");
+      }
+      // Focus first link
+      if (nextItem) {
+        nextItem.querySelector("a").focus();
+      }
+    }
+
+    // Handle shortcut for toggling all notes
+    if (event.key === "e") {
+      const list = document.querySelector(".bookmark-list");
+      if (list) {
+        list.classList.toggle("show-notes");
+      }
+    }
+
+    // Handle shortcut for focusing search input
+    if (event.key === "s") {
+      const searchInput = document.querySelector('input[type="search"]');
+
+      if (searchInput) {
+        searchInput.focus();
+        event.preventDefault();
+      }
+    }
+
+    // Handle shortcut for adding new bookmark
+    if (event.key === "n") {
+      window.location.assign("/bookmarks/new");
+    }
+  }
+}
+
+registerBehavior("ld-global-shortcuts", GlobalShortcuts);

bookmarks/frontend/behaviors/index.js

@@ -0,0 +1,36 @@
+const behaviorRegistry = {};
+
+export function registerBehavior(name, behavior) {
+  behaviorRegistry[name] = behavior;
+  applyBehaviors(document, [name]);
+}
+
+export function applyBehaviors(container, behaviorNames = null) {
+  if (!behaviorNames) {
+    behaviorNames = Object.keys(behaviorRegistry);
+  }
+
+  behaviorNames.forEach((behaviorName) => {
+    const behavior = behaviorRegistry[behaviorName];
+    const elements = container.querySelectorAll(`[${behaviorName}]`);
+
+    elements.forEach((element) => {
+      element.__behaviors = element.__behaviors || [];
+      const hasBehavior = element.__behaviors.some(
+        (b) => b instanceof behavior,
+      );
+
+      if (hasBehavior) {
+        return;
+      }
+
+      const behaviorInstance = new behavior(element);
+      element.__behaviors.push(behaviorInstance);
+    });
+  });
+}
+
+export function swap(element, html) {
+  element.innerHTML = html;
+  applyBehaviors(element);
+}

bookmarks/frontend/behaviors/tag-autocomplete.js

@@ -0,0 +1,26 @@
+import { registerBehavior } from "./index";
+import TagAutoCompleteComponent from "../components/TagAutocomplete.svelte";
+import { ApiClient } from "../api";
+
+class TagAutocomplete {
+  constructor(element) {
+    const wrapper = document.createElement("div");
+    const apiBaseUrl = document.documentElement.dataset.apiBaseUrl || "";
+    const apiClient = new ApiClient(apiBaseUrl);
+
+    new TagAutoCompleteComponent({
+      target: wrapper,
+      props: {
+        id: element.id,
+        name: element.name,
+        value: element.value,
+        apiClient: apiClient,
+        variant: element.getAttribute("variant"),
+      },
+    });
+
+    element.replaceWith(wrapper);
+  }
+}
+
+registerBehavior("ld-tag-autocomplete", TagAutocomplete);

bookmarks/frontend/components/SearchAutoComplete.svelte

@@ -0,0 +1,272 @@
+<script>
+  import {SearchHistory} from "./SearchHistory";
+  import {clampText, debounce, getCurrentWord, getCurrentWordBounds} from "../util";
+
+  const searchHistory = new SearchHistory()
+
+  export let name;
+  export let placeholder;
+  export let value;
+  export let tags;
+  export let mode = '';
+  export let apiClient;
+  export let filters;
+
+  let isFocus = false;
+  let isOpen = false;
+  let suggestions = []
+  let selectedIndex = undefined;
+  let input = null;
+
+  // Track current search query after loading the page
+  searchHistory.pushCurrent()
+  updateSuggestions()
+
+  function handleFocus() {
+    isFocus = true;
+  }
+
+  function handleBlur() {
+    isFocus = false;
+    close();
+  }
+
+  function handleInput(e) {
+    value = e.target.value
+    debouncedLoadSuggestions()
+  }
+
+  function handleKeyDown(e) {
+    // Enter
+    if (isOpen && selectedIndex !== undefined && (e.keyCode === 13 || e.keyCode === 9)) {
+      const suggestion = suggestions.total[selectedIndex];
+      if (suggestion) completeSuggestion(suggestion);
+      e.preventDefault();
+    }
+    // Escape
+    if (e.keyCode === 27) {
+      close();
+      e.preventDefault();
+    }
+    // Up arrow
+    if (e.keyCode === 38) {
+      updateSelection(-1);
+      e.preventDefault();
+    }
+    // Down arrow
+    if (e.keyCode === 40) {
+      if (!isOpen) {
+        loadSuggestions()
+      } else {
+        updateSelection(1);
+      }
+      e.preventDefault();
+    }
+  }
+
+  function open() {
+    isOpen = true;
+  }
+
+  function close() {
+    isOpen = false;
+    updateSuggestions()
+    selectedIndex = undefined
+  }
+
+  function hasSuggestions() {
+    return suggestions.total.length > 0
+  }
+
+  async function loadSuggestions() {
+
+    let suggestionIndex = 0
+
+    function nextIndex() {
+      return suggestionIndex++
+    }
+
+    // Tag suggestions
+    let tagSuggestions = []
+    const currentWord = getCurrentWord(input)
+    if (currentWord && currentWord.length > 1 && currentWord[0] === '#') {
+      const searchTag = currentWord.substring(1, currentWord.length)
+      tagSuggestions = (tags || []).filter(tagName => tagName.toLowerCase().indexOf(searchTag.toLowerCase()) === 0)
+        .slice(0, 5)
+        .map(tagName => ({
+          type: 'tag',
+          index: nextIndex(),
+          label: `#${tagName}`,
+          tagName: tagName
+        }))
+    }
+
+    // Recent search suggestions
+    const search = searchHistory.getRecentSearches(value, 5).map(value => ({
+      type: 'search',
+      index: nextIndex(),
+      label: value,
+      value
+    }))
+
+    // Bookmark suggestions
+    let bookmarks = []
+
+    if (value && value.length >= 3) {
+      const path = mode ? `/${mode}` : ''
+      const suggestionFilters = {
+        ...filters,
+        q: value
+      }
+      const fetchedBookmarks = await apiClient.listBookmarks(suggestionFilters, {limit: 5, offset: 0, path})
+      bookmarks = fetchedBookmarks.map(bookmark => {
+        const fullLabel = bookmark.title || bookmark.website_title || bookmark.url
+        const label = clampText(fullLabel, 60)
+        return {
+          type: 'bookmark',
+          index: nextIndex(),
+          label,
+          bookmark
+        }
+      })
+    }
+
+    updateSuggestions(search, bookmarks, tagSuggestions)
+
+    if (hasSuggestions()) {
+      open()
+    } else {
+      close()
+    }
+  }
+
+  const debouncedLoadSuggestions = debounce(loadSuggestions)
+
+  function updateSuggestions(search, bookmarks, tagSuggestions) {
+    search = search || []
+    bookmarks = bookmarks || []
+    tagSuggestions = tagSuggestions || []
+    suggestions = {
+      search,
+      bookmarks,
+      tags: tagSuggestions,
+      total: [
+        ...tagSuggestions,
+        ...search,
+        ...bookmarks,
+      ]
+    }
+  }
+
+  function completeSuggestion(suggestion) {
+    if (suggestion.type === 'search') {
+      value = suggestion.value
+      close()
+    }
+    if (suggestion.type === 'bookmark') {
+      window.open(suggestion.bookmark.url, '_blank')
+      close()
+    }
+    if (suggestion.type === 'tag') {
+      const bounds = getCurrentWordBounds(input);
+      const inputValue = input.value;
+      input.value = inputValue.substring(0, bounds.start) + `#${suggestion.tagName} ` + inputValue.substring(bounds.end);
+      close()
+    }
+  }
+
+  function updateSelection(dir) {
+
+    const length = suggestions.total.length;
+
+    if (length === 0) return
+
+    if (selectedIndex === undefined) {
+      selectedIndex = dir > 0 ? 0 : Math.max(length - 1, 0)
+      return
+    }
+
+    let newIndex = selectedIndex + dir;
+
+    if (newIndex < 0) newIndex = Math.max(length - 1, 0);
+    if (newIndex >= length) newIndex = 0;
+
+    selectedIndex = newIndex;
+  }
+</script>
+
+<div class="form-autocomplete">
+  <div class="form-autocomplete-input form-input" class:is-focused={isFocus}>
+    <input type="search" class="form-input" name="{name}" placeholder="{placeholder}" autocomplete="off" value="{value}"
+           bind:this={input}
+           on:input={handleInput} on:keydown={handleKeyDown} on:focus={handleFocus} on:blur={handleBlur}>
+  </div>
+
+  <ul class="menu" class:open={isOpen}>
+    {#if suggestions.tags.length > 0}
+      <li class="menu-item group-item">Tags</li>
+    {/if}
+    {#each suggestions.tags as suggestion}
+      <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
+        <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
+          <div class="tile tile-centered">
+            <div class="tile-content">
+              {suggestion.label}
+            </div>
+          </div>
+        </a>
+      </li>
+    {/each}
+
+    {#if suggestions.search.length > 0}
+      <li class="menu-item group-item">Recent Searches</li>
+    {/if}
+    {#each suggestions.search as suggestion}
+      <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
+        <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
+          <div class="tile tile-centered">
+            <div class="tile-content">
+              {suggestion.label}
+            </div>
+          </div>
+        </a>
+      </li>
+    {/each}
+
+    {#if suggestions.bookmarks.length > 0}
+      <li class="menu-item group-item">Bookmarks</li>
+    {/if}
+    {#each suggestions.bookmarks as suggestion}
+      <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
+        <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
+          <div class="tile tile-centered">
+            <div class="tile-content">
+              {suggestion.label}
+            </div>
+          </div>
+        </a>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+    .menu {
+        display: none;
+        max-height: 400px;
+        overflow: auto;
+    }
+
+    .menu.open {
+        display: block;
+    }
+
+    .form-autocomplete-input {
+        padding: 0;
+    }
+
+    .form-autocomplete-input.is-focused {
+        z-index: 2;
+    }
+
+</style>

bookmarks/frontend/components/SearchHistory.js

@@ -0,0 +1,52 @@
+const SEARCH_HISTORY_KEY = "searchHistory";
+const MAX_ENTRIES = 30;
+
+export class SearchHistory {
+  getHistory() {
+    const historyJson = localStorage.getItem(SEARCH_HISTORY_KEY);
+    return historyJson
+      ? JSON.parse(historyJson)
+      : {
+          recent: [],
+        };
+  }
+
+  pushCurrent() {
+    // Skip if browser is not compatible
+    if (!window.URLSearchParams) return;
+    const urlParams = new URLSearchParams(window.location.search);
+    const searchParam = urlParams.get("q");
+
+    if (!searchParam) return;
+
+    this.push(searchParam);
+  }
+
+  push(search) {
+    const history = this.getHistory();
+
+    history.recent.unshift(search);
+
+    // Remove duplicates and clamp to max entries
+    history.recent = history.recent.reduce((acc, cur) => {
+      if (acc.length >= MAX_ENTRIES) return acc;
+      if (acc.indexOf(cur) >= 0) return acc;
+      acc.push(cur);
+      return acc;
+    }, []);
+
+    const newHistoryJson = JSON.stringify(history);
+    localStorage.setItem(SEARCH_HISTORY_KEY, newHistoryJson);
+  }
+
+  getRecentSearches(query, max) {
+    const history = this.getHistory();
+
+    return history.recent
+      .filter(
+        (search) =>
+          !query || search.toLowerCase().indexOf(query.toLowerCase()) >= 0,
+      )
+      .slice(0, max);
+  }
+}

bookmarks/frontend/components/TagAutocomplete.svelte

@@ -0,0 +1,170 @@
+<script>
+  import {getCurrentWord, getCurrentWordBounds} from "../util";
+
+  export let id;
+  export let name;
+  export let value;
+  export let apiClient;
+  export let variant = 'default';
+
+  let tags = [];
+  let isFocus = false;
+  let isOpen = false;
+  let input = null;
+  let suggestionList = null;
+
+  let suggestions = [];
+  let selectedIndex = 0;
+
+  init();
+
+  async function init() {
+    // For now we cache all tags on load as the template did before
+    try {
+      tags = await apiClient.getTags({limit: 1000, offset: 0});
+      tags.sort((left, right) => left.name.toLowerCase().localeCompare(right.name.toLowerCase()))
+    } catch (e) {
+      console.warn('TagAutocomplete: Error loading tag list');
+    }
+  }
+
+  function handleFocus() {
+    isFocus = true;
+  }
+
+  function handleBlur() {
+    isFocus = false;
+    close();
+  }
+
+  function handleInput(e) {
+    input = e.target;
+
+    const word = getCurrentWord(input);
+
+    suggestions = word
+      ? tags.filter(tag => tag.name.toLowerCase().indexOf(word.toLowerCase()) === 0)
+      : [];
+
+    if (word && suggestions.length > 0) {
+      open();
+    } else {
+      close();
+    }
+  }
+
+  function handleKeyDown(e) {
+    if (isOpen && (e.keyCode === 13 || e.keyCode === 9)) {
+      const suggestion = suggestions[selectedIndex];
+      complete(suggestion);
+      e.preventDefault();
+    }
+    if (e.keyCode === 27) {
+      close();
+      e.preventDefault();
+    }
+    if (e.keyCode === 38) {
+      updateSelection(-1);
+      e.preventDefault();
+    }
+    if (e.keyCode === 40) {
+      updateSelection(1);
+      e.preventDefault();
+    }
+  }
+
+  function open() {
+    isOpen = true;
+    selectedIndex = 0;
+  }
+
+  function close() {
+    isOpen = false;
+    suggestions = [];
+    selectedIndex = 0;
+  }
+
+  function complete(suggestion) {
+    const bounds = getCurrentWordBounds(input);
+    const value = input.value;
+    input.value = value.substring(0, bounds.start) + suggestion.name + ' ' + value.substring(bounds.end);
+
+    close();
+  }
+
+  function updateSelection(dir) {
+
+    const length = suggestions.length;
+    let newIndex = selectedIndex + dir;
+
+    if (newIndex < 0) newIndex = Math.max(length - 1, 0);
+    if (newIndex >= length) newIndex = 0;
+
+    selectedIndex = newIndex;
+
+    // Scroll to selected list item
+    setTimeout(() => {
+      if (suggestionList) {
+        const selectedListItem = suggestionList.querySelector('li.selected');
+        if (selectedListItem) {
+          selectedListItem.scrollIntoView({block: 'center'});
+        }
+      }
+    }, 0);
+  }
+</script>
+
+<div class="form-autocomplete" class:small={variant === 'small'}>
+  <!-- autocomplete input container -->
+  <div class="form-autocomplete-input form-input" class:is-focused={isFocus}>
+    <!-- autocomplete real input box -->
+    <input id="{id}" name="{name}" value="{value ||''}" placeholder="&nbsp;"
+           class="form-input" type="text" autocomplete="off" autocapitalize="off"
+           on:input={handleInput} on:keydown={handleKeyDown}
+           on:focus={handleFocus} on:blur={handleBlur}>
+  </div>
+
+  <!-- autocomplete suggestion list -->
+  <ul class="menu" class:open={isOpen && suggestions.length > 0}
+      bind:this={suggestionList}>
+    <!-- menu list items -->
+    {#each suggestions as tag,i}
+      <li class="menu-item" class:selected={selectedIndex === i}>
+        <a href="#" on:mousedown|preventDefault={() => complete(tag)}>
+          <div class="tile tile-centered">
+            <div class="tile-content">
+              {tag.name}
+            </div>
+          </div>
+        </a>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+    .menu {
+        display: none;
+        max-height: 200px;
+        overflow: auto;
+    }
+
+    .menu.open {
+        display: block;
+    }
+
+    .form-autocomplete.small .form-autocomplete-input {
+        height: 1.4rem;
+        min-height: 1.4rem;
+    }
+
+    .form-autocomplete.small .form-autocomplete-input input {
+        margin: 0;
+        padding: 0;
+        font-size: 0.7rem;
+    }
+
+    .form-autocomplete.small .menu .menu-item {
+        font-size: 0.7rem;
+    }
+</style>

bookmarks/frontend/index.js

@@ -0,0 +1,14 @@
+import TagAutoComplete from "./components/TagAutocomplete.svelte";
+import SearchAutoComplete from "./components/SearchAutoComplete.svelte";
+import { ApiClient } from "./api";
+import "./behaviors/bookmark-page";
+import "./behaviors/bulk-edit";
+import "./behaviors/confirm-button";
+import "./behaviors/global-shortcuts";
+import "./behaviors/tag-autocomplete";
+
+export default {
+  ApiClient,
+  TagAutoComplete,
+  SearchAutoComplete,
+};

bookmarks/frontend/util.js

@@ -0,0 +1,37 @@
+export function debounce(callback, delay = 250) {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      callback(...args);
+    }, delay);
+  };
+}
+
+export function clampText(text, maxChars = 30) {
+  if (!text || text.length <= 30) return text;
+
+  return text.substr(0, maxChars) + "...";
+}
+
+export function getCurrentWordBounds(input) {
+  const text = input.value;
+  const end = input.selectionStart;
+  let start = end;
+
+  let currentChar = text.charAt(start - 1);
+
+  while (currentChar && currentChar !== " " && start > 0) {
+    start--;
+    currentChar = text.charAt(start - 1);
+  }
+
+  return { start, end };
+}
+
+export function getCurrentWord(input) {
+  const bounds = getCurrentWordBounds(input);
+
+  return input.value.substring(bounds.start, bounds.end);
+}