pages/search: shaped tabs

pages/search/modules/labels.js

@@ -0,0 +1,36 @@
+const labels = {
+  /* tabId: label, */
+}
+
+const lettersOrder = 'lkjhyuionm'
+
+const digits2label = (digits) => [...digits]
+  .map((digit) => lettersOrder[digit])
+  .join('')
+
+const label2digits = (label) => [...label]
+  .map((letter) => [...lettersOrder].findIndex((x) => x === letter))
+  .join('')
+
+/* */
+
+export const id2label = (id, tabs) => {
+  if (!labels[id]) {
+    const label = Object.keys(labels).length
+    labels[id] = String(label)
+  }
+
+  const keyLength = String(tabs?.length).length
+  const digits = String(labels[id]).padStart(keyLength, 0)
+  return digits2label(digits)
+}
+
+export const label2id = (label) => {
+  const paddedDigits = label2digits(label)
+  const digits = String(parseInt(paddedDigits))
+
+  const [key] = Object.entries(labels)
+    .find(([_, value]) => value === digits)
+
+  return parseInt(key)
+}

pages/search/modules/store.js

@@ -0,0 +1,58 @@
+import * as labels from './labels.js'
+
+export const init = ({
+  tabs: browserTabs,
+  onStateUpdate,
+}) => {
+  /* Initial state */
+  const state = {
+    tabs: [],
+  }
+
+  /* */
+
+  const shapeTabs = (tabs) => tabs
+    .map((tab) => ({
+      label: labels.id2label(tab.id, tabs),
+      ...tab,
+    }))
+    .map((tab) => [
+      'favIconUrl',
+      'id',
+      'label',
+      'title',
+      'url',
+    ].reduce((acc, x) => (acc[x] = tab[x], acc), {}))
+
+  const fetchTabs = () =>
+    browserTabs.query({ currentWindow: true, active: false })
+      .then(shapeTabs)
+      .then((tabs) => tabs.reverse())
+      .then((tabs) => void (state.tabs = tabs))
+
+  /* */
+
+  const updateState = () =>
+    fetchTabs()
+      .then(() => onStateUpdate(state))
+
+  updateState()
+
+  /* */
+
+  return {
+    getCurrentState() {
+      return state
+    },
+    actions: {
+      goToTab(id) {
+        browserTabs.update(id, { active: true })
+          .then(updateState)
+      },
+      closeTab(id) {
+        browserTabs.remove(id)
+          .then(updateState)
+      },
+    },
+  }
+}