feat: Add rename window functionality

packages/extension/src/js/components/Window/Title.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import SelectAll from 'components/Window/SelectAll'
 import Sort from 'components/Window/Sort'
@@ -10,16 +10,67 @@ import HideToggle from './HideToggle'
 import { WinProps } from 'components/types'
 import useReduceMotion from 'libs/useReduceMotion'
 
-export default observer((props: WinProps & { className: string }) => {
- const nodeRef = useRef(null)
- const { className, win } = props
- const { tabs, activate, invisibleTabs, reload, hide, toggleHide, isFocused } =
- win
+export const Title = (props) => {
+ const { title, text, invisibleIndicator, hide } = props
+
+ return (
+ <h5 className="flex-auto text-2xl whitespace-nowrap">
+ {title ? title : text} {!hide && invisibleIndicator}
+ </h5>
+ )
+}
+export const EditableTitle = observer((props: WinProps) => {
+ const { win } = props
+ const { tabs, invisibleTabs, hide, title, setTitle } = win
  const { length } = tabs
  const text = `${length} ${getNoun('tab', length)}`
  const invisibleLength = invisibleTabs.length
  const invisibleIndicator =
  invisibleLength > 0 && `/ ${invisibleLength} hidden`
+
+ const [editing, setEditing] = useState<boolean>(false)
+ const [value, setValue] = useState<string>(title || text)
+ useEffect(() => {
+ setValue(title || text)
+ }, [title, text])
+
+ return (
+ <div
+ className="flex-auto overflow-hidden text-base text-left rounded-sm"
+ onClick={() => {
+ setEditing((x) => !x)
+ }}
+ >
+ {editing ? (
+ <input
+ autoFocus
+ onChange={(e) => {
+ setValue(e.target.value)
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault()
+ setTitle(value)
+ setEditing(false)
+ } else if (e.key === 'Escape') {
+ e.preventDefault()
+ setEditing(false)
+ }
+ }}
+ value={value}
+ onFocus={(e) => e.currentTarget.select()}
+ />
+ ) : (
+ <Title {...{ text, title, invisibleIndicator, hide }} />
+ )}
+ </div>
+ )
+})
+
+export default observer((props: WinProps & { className: string }) => {
+ const nodeRef = useRef(null)
+ const { className, win } = props
+ const { reload, hide, toggleHide, isFocused } = win
  const reduceMotion = useReduceMotion()
  useEffect(() => {
  if (isFocused) {
@@ -42,14 +93,7 @@ export default observer((props: WinProps & { className: string }) => {
  )}
  >
  <SelectAll {...props} />
- <button
- onClick={activate}
- className="flex-auto overflow-hidden text-base text-left rounded-sm"
- >
- <h5 className="flex-auto text-2xl whitespace-nowrap">
- {text} {!hide && invisibleIndicator}
- </h5>
- </button>
+ <EditableTitle {...props} />
  {!hide && (
  <>
  <Sort {...props} />

packages/extension/src/js/stores/Window.tsx

@@ -15,6 +15,9 @@ export default class Window extends Focusable {
  tabs: observable,
  showTabs: observable,
  type: observable,
+ title: observable,
+ getTitle: action,
+ setTitle: action,
  activate: action,
  hide: computed,
  visibleLength: computed,
@@ -42,6 +45,7 @@ export default class Window extends Focusable {
  this.tabs = win.tabs.map((tab) => new Tab(tab, store, this))
  // TODO: Remove this when we add concurrent mode
  this.showTabs = !this.store.windowStore.initialLoading
+ this.getTitle()
  }
 
  tabs: Tab[] = []
@@ -51,10 +55,16 @@ export default class Window extends Focusable {
 
  type = ''
 
+ title = ''
+
  activate = () => {
  browser.windows.update(this.id, { focused: true })
  }
 
+ get key() {
+ return `win-${this.id}`
+ }
+
  get hide() {
  return this.store.hiddenWindowStore.hiddenWindows[this.id]
  }
@@ -216,4 +226,16 @@ export default class Window extends Focusable {
  this.store.focusStore.focus(this)
  }
  }
+
+ getTitle = async () => {
+ const res = await browser.storage.local.get({ [this.key]: '' })
+ const title = res[this.key]
+ console.log('key:', res, title)
+ this.title = title
+ }
+
+ setTitle = async (title: string) => {
+ this.title = title
+ await browser.storage.local.set({ [this.key]: title })
+ }
 }