feat: Add c c to copy focused/selected tabs

src/js/components/Toolbar/Close.tsx

@@ -7,10 +7,10 @@ import { useTheme } from '@material-ui/styles'
 import { TOOLTIP_DELAY } from 'libs'
 import { useStore } from 'components/StoreContext'
 
-export default observer((props) => {
+export default observer(() => {
   const theme = useTheme()
-  const { tabStore } = useStore()
-  const { remove, tabDescription, hasFocusedOrSelectedTab } = tabStore
+  const { tabStore, hasFocusedOrSelectedTab, remove } = useStore()
+  const { tabDescription } = tabStore
   const style = {}
   if (hasFocusedOrSelectedTab) {
     style.color = theme.palette.secondary.main

src/js/components/Toolbar/Reload.tsx

@@ -7,8 +7,7 @@ import { TOOLTIP_DELAY } from 'libs'
 import { useStore } from 'components/StoreContext'
 
 export default observer(() => {
-  const { tabStore } = useStore()
-  const { reload, hasFocusedOrSelectedTab } = tabStore
+  const { hasFocusedOrSelectedTab, reload } = useStore()
   return (
     <Tooltip title='Reload select tab(s)' enterDelay={TOOLTIP_DELAY}>
       <div>

src/js/libs/index.tsx

@@ -195,3 +195,5 @@ export const getDomain = (url) => {
 }
 
 export const isProduction = () => process.env.NODE_ENV === 'production'
+
+export const writeToClipboard = (text) => navigator.clipboard.writeText(text)

src/js/stores/ShortcutStore.tsx

@@ -90,7 +90,7 @@ export default class ShortcutStore {
     [
       ['d d'],
       () => {
-        this.store.tabStore.remove()
+        this.store.remove()
       },
       'Close tab'
     ],
@@ -114,7 +114,7 @@ export default class ShortcutStore {
     [
       ['r', 'ctrl+r'],
       () => {
-        this.store.tabStore.reload()
+        this.store.reload()
       },
       'Reload tab'
     ],
@@ -129,7 +129,7 @@ export default class ShortcutStore {
       ['p', 'ctrl+p'],
       (event) => {
         preventDefault(event)
-        this.store.tabStore.togglePin()
+        this.store.togglePin()
       },
       'Toogle pin'
     ],
@@ -374,6 +374,14 @@ export default class ShortcutStore {
         this.store.hiddenWindowStore.updateHideForAllWindows(false)
       },
       'Expand all windows'
+    ],
+    [
+      'c c',
+      (event) => {
+        preventDefault(event)
+        this.store.copyURL()
+      },
+      'Copy URL (separated by new line)'
     ]
   ]
 

src/js/stores/TabStore.tsx

@@ -1,9 +1,8 @@
 import { action, computed, observable } from 'mobx'
-import { activateTab, togglePinTabs } from 'libs'
+import { activateTab } from 'libs'
 import Store from 'stores'
 import log from 'libs/log'
 import Tab from './Tab'
-import Window from './Window'
 
 export default class TabStore {
   store: Store
@@ -27,12 +26,6 @@ export default class TabStore {
     return 'selected tabs'
   }
 
-  @computed
-  get hasFocusedOrSelectedTab () {
-    const { focusedItem } = this.store.focusStore
-    return this.selection.size > 0 || focusedItem !== null
-  }
-
   @action
   select = (tab) => {
     const { id } = tab
@@ -108,67 +101,11 @@ export default class TabStore {
     })
   }
 
+  // TODO: this abstraction may be useless
   @action
   activate = (tab) => {
     activateTab(tab.id)
   }
 
-  @action
-  remove = () => {
-    const { down, focusedTabId } = this.store.focusStore
-    const { tabs } = this.store.windowStore
-    let tabsToRemove = []
-    if (this.selection.size > 0) {
-      while (this.selection.has(this.store.focusStore.focusedTabId)) {
-        down()
-        if (focusedTabId === this.store.focusStore.focusedTabId) {
-          this.store.focusStore.defocus()
-          break
-        }
-      }
-      tabsToRemove = tabs.filter((x) => x.isSelected)
-    } else {
-      if (focusedTabId) {
-        tabsToRemove = tabs.filter((x) => x.isFocused)
-        down()
-      }
-    }
-    this.unselectAll()
-    tabsToRemove.forEach((x) => x.remove())
-  }
-
-  @action
-  reload = () => {
-    const { focusedItem } = this.store.focusStore
-    const { tabs } = this.store.windowStore
-    let tabsToReload = []
-    if (this.selection.size > 0) {
-      tabsToReload = tabs.filter((x) => x.isSelected)
-    } else {
-      if (focusedItem) {
-        tabsToReload = tabs.filter((x) => x.isFocused)
-      }
-    }
-    this.unselectAll()
-    tabsToReload.forEach((x) => x.reload())
-  }
-
-  @action
-  togglePin = async () => {
-    const { focusedItem } = this.store.focusStore
-    if (this.selection.size === 0 && focusedItem) {
-      log.debug('togglePin for focusedItem:', { focusedItem })
-      if (focusedItem instanceof Tab) {
-        await togglePinTabs([focusedItem])
-      }
-      if (focusedItem instanceof Window) {
-        await togglePinTabs(focusedItem.tabs)
-      }
-    } else {
-      await togglePinTabs([...this.selection.values()])
-      this.unselectAll()
-    }
-  }
-
   isTabSelected = ({ id }) => this.selection.has(id)
 }

src/js/stores/index.tsx

@@ -1,3 +1,6 @@
+import { action, computed } from 'mobx'
+import { togglePinTabs, writeToClipboard } from 'libs'
+import log from 'libs/log'
 import WindowStore from 'stores/WindowStore'
 import SearchStore from 'stores/SearchStore'
 import TabStore from 'stores/TabStore'
@@ -9,6 +12,9 @@ import HoverStore from 'stores/HoverStore'
 import HiddenWindowStore from 'stores/HiddenWindowStore'
 import FocusStore from 'stores/FocusStore'
 
+import Tab from './Tab'
+import Window from './Window'
+
 export default class Store {
   windowStore: WindowStore
 
@@ -42,4 +48,96 @@ export default class Store {
     this.hiddenWindowStore = new HiddenWindowStore(this)
     this.focusStore = new FocusStore(this)
   }
+
+  @action
+  remove = () => {
+    const { down, focusedTabId } = this.focusStore
+    const { tabs } = this.windowStore
+    let tabsToRemove = []
+    if (this.tabStore.selection.size > 0) {
+      while (this.tabStore.selection.has(this.focusStore.focusedTabId)) {
+        down()
+        if (focusedTabId === this.focusStore.focusedTabId) {
+          this.focusStore.defocus()
+          break
+        }
+      }
+      tabsToRemove = tabs.filter((x) => x.isSelected)
+    } else {
+      if (focusedTabId) {
+        tabsToRemove = tabs.filter((x) => x.isFocused)
+        down()
+      }
+    }
+    this.tabStore.unselectAll()
+    tabsToRemove.forEach((x) => x.remove())
+  }
+
+  @action
+  reload = () => {
+    const { focusedItem } = this.focusStore
+    const { tabs } = this.windowStore
+    const { selection, unselectAll } = this.tabStore
+    let tabsToReload = []
+    if (selection.size > 0) {
+      tabsToReload = tabs.filter((x) => x.isSelected)
+    } else {
+      if (focusedItem) {
+        tabsToReload = tabs.filter((x) => x.isFocused)
+      }
+    }
+    unselectAll()
+    tabsToReload.forEach((x) => x.reload())
+  }
+
+  @action
+  togglePin = async () => {
+    const { focusedItem } = this.focusStore
+    const { selection, unselectAll } = this.tabStore
+    if (selection.size === 0 && focusedItem) {
+      log.debug('togglePin for focusedItem:', { focusedItem })
+      if (focusedItem instanceof Tab) {
+        await togglePinTabs([focusedItem])
+      }
+      if (focusedItem instanceof Window) {
+        await togglePinTabs(focusedItem.tabs)
+      }
+    } else {
+      await togglePinTabs([...selection.values()])
+      unselectAll()
+    }
+  }
+
+  @computed
+  get hasFocusedOrSelectedTab () {
+    return this.tabStore.selection.size > 0 || !!this.focusStore.focusedItem
+  }
+
+  _getFocusedOrSelectedTab = () => {
+    const { sources } = this.tabStore
+    if (sources.length) {
+      return sources
+    }
+    const { focusedItem } = this.focusStore
+    if (!focusedItem) {
+      return []
+    }
+    if (focusedItem instanceof Tab) {
+      return [focusedItem]
+    }
+    if (focusedItem instanceof Window) {
+      return focusedItem.tabs
+    }
+  }
+
+  @action
+  copyURL = async () => {
+    const tabs = this._getFocusedOrSelectedTab()
+    if (!tabs || !tabs.length) {
+      return
+    }
+    const text = tabs.map((x) => x.url).join('\n')
+    await writeToClipboard(text)
+    this.tabStore.unselectAll()
+  }
 }