fix: preserve tab colors on TabsPanel <-> BookmarksPanel operations

src/defaults.ts

@@ -44,6 +44,8 @@ export const GROUP_RE = /\/sidebery\/group\.html/
 export const URL_PAGE_RE = /\/sidebery\/url\.html/
 export const SETTINGS_RE = /\/page\.setup\/setup\.html/
 export const FOLDER_NAME_DATA_RE = /^(.*) \[(.*)\]$/
+export const CONTAINER_IN_BOOKMARK_RE = / \[(".+","\w+","\w+"(,"\w+")?)\]/
+export const COLOR_IN_BOOKMARK_RE = / \[(c\d)\]/
 export const GROUP_INITIAL_TITLE = '...'
 export const INITIAL_TITLE_RE = /^[0-9A-Za-z-]{1,63}(\.[0-9A-Za-z-]{1,63})+\//
 export const SITE_URL_RE =
@@ -135,6 +137,26 @@ export const COLOR_OPTS = [
   { value: 'pink', color: 'pink' },
   { value: 'purple', color: 'purple' },
 ]
+export const TAB_BOOKMARK_COLOR: Record<string, string> = {
+  blue: 'c1',
+  turquoise: 'c2',
+  green: 'c3',
+  yellow: 'c4',
+  orange: 'c5',
+  red: 'c6',
+  pink: 'c7',
+  purple: 'c8',
+}
+export const BOOKMARK_TAB_COLOR: Record<string, string> = {
+  c1: 'blue',
+  c2: 'turquoise',
+  c3: 'green',
+  c4: 'yellow',
+  c5: 'orange',
+  c6: 'red',
+  c7: 'pink',
+  c8: 'purple',
+}
 export const PROXY_OPTS = ['http', 'https', 'socks4', 'socks', 'direct']
 
 export const BKM_ROOT_ID = 'root________'

src/services/bookmarks.actions.ts

@@ -4,6 +4,8 @@ import { Bookmark, Panel, Notification, DialogConfig, DragInfo, SubPanelType } f
 import { Stored, BookmarksSortType, DstPlaceInfo, ItemInfo, TabsPanel } from 'src/types'
 import { CONTAINER_ID, NOID, BKM_OTHER_ID, BKM_ROOT_ID, PRE_SCROLL, GROUP_RE } from 'src/defaults'
 import { FOLDER_NAME_DATA_RE, GROUP_URL, PIN_MARK } from 'src/defaults'
+import { TAB_BOOKMARK_COLOR, BOOKMARK_TAB_COLOR } from 'src/defaults'
+import { CONTAINER_IN_BOOKMARK_RE, COLOR_IN_BOOKMARK_RE } from 'src/defaults'
 import { Bookmarks, BookmarksPopupConfig, BookmarksPopupResult } from 'src/services/bookmarks'
 import { BookmarksPopupState } from 'src/services/bookmarks'
 import * as Logs from 'src/services/logs'
@@ -945,6 +947,9 @@ export function attachTabInfoToTitle(item: ItemInfo) {
     const container = Containers.reactive.byId[item.container]
     if (container) item.title += ` [${Containers.getCUID(container)}]`
   }
+  if (item.customColor) {
+    item.title += ` [${TAB_BOOKMARK_COLOR[item.customColor]}]`
+  }
 }
 
 export function extractTabInfoFromTitle(item: ItemInfo, updateTitleOnly?: boolean) {
@@ -956,16 +961,21 @@ export function extractTabInfoFromTitle(item: ItemInfo, updateTitleOnly?: boolea
     if (!updateTitleOnly) item.pinned = true
   }
 
-  const nameExec = FOLDER_NAME_DATA_RE.exec(item.title)
-  if (nameExec) {
-    if (nameExec[2]) {
-      const container = Containers.findUnique(Containers.parseCUID(nameExec[2]))
-      if (container) {
-        item.title = nameExec[1]
-        if (!updateTitleOnly) item.container = container.id
-      }
-    }
-  }
+  item.title = item.title.replace(CONTAINER_IN_BOOKMARK_RE, (match, cuid) => {
+    if (typeof cuid !== 'string') return match
+    const info = Containers.parseCUID(cuid)
+    const container = Containers.findUnique(info)
+    if (!container) return match
+    if (!updateTitleOnly) item.container = container.id
+    return ''
+  })
+
+  item.title = item.title.replace(COLOR_IN_BOOKMARK_RE, (match, colorId) => {
+    const color = BOOKMARK_TAB_COLOR[colorId as string]
+    if (!color) return match
+    if (!updateTitleOnly) item.customColor = color
+    return ''
+  })
 }
 
 /**
@@ -1097,6 +1107,7 @@ export async function saveToFolder(
 
       // Folder
       if (nextItem?.parentId === item.id || !item.url) {
+        attachTabInfoToTitle(item)
         const folderIndex = bookmarksList.findIndex(n => {
           return n.type === 'folder' && n.title === item.title
         })
@@ -1122,7 +1133,6 @@ export async function saveToFolder(
 
         // Bookmark of the parent item
         if (item.url && !GROUP_RE.test(item.url)) {
-          attachTabInfoToTitle(item)
           const bookmarkIndex = bookmarksList.findIndex(n => {
             return n.type === 'bookmark' && n.title === item.title && n.url === item.url
           })

src/services/sidebar.actions.ts

@@ -2022,6 +2022,7 @@ export async function bookmarkTabsPanel(
         parentId: tab.parentId,
       }
       if (Containers.reactive.byId[tab.cookieStoreId]) info.container = tab.cookieStoreId
+      if (tab.customColor) info.customColor = tab.customColor
       items.push(info)
     }
     items.push({ id: 'separator' })
@@ -2036,6 +2037,7 @@ export async function bookmarkTabsPanel(
       folded: tab.folded,
     }
     if (Containers.reactive.byId[tab.cookieStoreId]) info.container = tab.cookieStoreId
+    if (tab.customColor) info.customColor = tab.customColor
     items.push(info)
   }
 
@@ -2192,11 +2194,16 @@ export async function restoreFromBookmarks(panel: TabsPanel, silent?: boolean):
         const containerId = Containers.getContainerFor(info.url)
         if (containerId) conf.cookieStoreId = containerId
       }
-      const newTab = await browser.tabs.create(conf)
-      idsMap[info.id] = newTab.id
+      const newNativeTab = await browser.tabs.create(conf)
+      idsMap[info.id] = newNativeTab.id
       indexPinned++
       index++
 
+      if (info.customColor) {
+        const newTab = Tabs.byId[newNativeTab.id]
+        if (newTab) newTab.reactive.customColor = newTab.customColor = info.customColor
+      }
+
       continue
     }
 
@@ -2250,8 +2257,13 @@ export async function restoreFromBookmarks(panel: TabsPanel, silent?: boolean):
         conf.title = info.title
       }
       Tabs.setNewTabPosition(index, parentId, panel.id, false)
-      const newTab = await browser.tabs.create(conf)
-      idsMap[info.id] = newTab.id
+      const newNativeTab = await browser.tabs.create(conf)
+      idsMap[info.id] = newNativeTab.id
+
+      if (info.customColor) {
+        const newTab = Tabs.byId[newNativeTab.id]
+        if (newTab) newTab.reactive.customColor = newTab.customColor = info.customColor
+      }
     }
 
     index++