@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/chrome/WorkspaceTabStrip.tsx

@@ -1,300 +1,321 @@
-import { useRef, useState } from 'react'
-import { styled } from 'styled-components'
-import type { WorkspaceTabStripProps } from './workspaceTabTypes.js'
-import { PureAppWordmark } from './PureAppWordmark.js'
-import { X } from 'lucide-react'
-
-//#region styled-components
-
-const StyledStrip = styled.div`
-  display: flex;
-  align-items: flex-end;
-  min-height: 36px;
-  width: 100%;
-  min-width: 0;
-  background: var(--platform-colors-chrome-tab-strip);
-  border-bottom: 1px solid var(--platform-colors-border);
-  -webkit-app-region: no-drag;
-  user-select: none;
-`
-
-const StyledScroll = styled.div`
-  display: flex;
-  align-items: flex-end;
-  flex: 1;
-  min-width: 0;
-  gap: 2px;
-  padding: 5px 8px 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: thin;
-`
-
-const StyledTab = styled.button<{
-  $dropBefore?: boolean
-  $dropAfter?: boolean
-}>`
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  height: 31px;
-  max-width: 260px;
-  margin-bottom: -1px;
-  padding: 0 8px 0 9px;
-  border: 1px solid transparent;
-  border-bottom-color: transparent;
-  border-radius: 11px 11px 0 0;
-  font-size: var(--platform-typography-font-size-xs, 13px);
-  font-weight: 500;
-  color: var(--platform-colors-text-secondary);
-  background: transparent;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: background 150ms ease, border-color 150ms ease, color 150ms ease,
-    box-shadow 150ms ease;
-
-  &[data-active='true'] {
-    border-color: var(--platform-colors-border);
-    border-bottom-color: var(--platform-colors-surface);
-    background: var(--platform-colors-surface);
-    color: var(--platform-colors-text);
-    box-shadow: 0 -1px 0 rgb(255 255 255 / 70%);
-  }
-
-  &:hover:not([data-active='true']) {
-    border-color: var(--platform-colors-border-soft);
-    background: var(--platform-colors-surface-hover);
-    color: var(--platform-colors-text);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--platform-colors-focus-ring);
-    outline-offset: 2px;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 4px;
-    bottom: 2px;
-    left: -2px;
-    width: 2px;
-    border-radius: 1px;
-    background: ${({ $dropBefore }) =>
-      $dropBefore ? 'var(--platform-colors-accent)' : 'transparent'};
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 4px;
-    bottom: 2px;
-    right: -2px;
-    width: 2px;
-    border-radius: 1px;
-    background: ${({ $dropAfter }) =>
-      $dropAfter ? 'var(--platform-colors-accent)' : 'transparent'};
-  }
-`
-
-const StyledKind = styled.span`
-  font-size: var(--platform-typography-font-size-xs, 11px);
-  font-weight: 600;
-  opacity: 0.85;
-  flex-shrink: 0;
-`
-
-const StyledLabel = styled.span`
-  display: inline-flex;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const StyledTabWordmark = styled(PureAppWordmark)`
-  min-width: 0;
-  overflow: hidden;
-
-  > span:last-child {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`
-
-/**
- * The canonical lockup at tab scale: "pure word", lowercase, one size.
- * The prefix is the quiet family constant — light weight, muted grey,
- * never resized (a size jump breaks the lockup's line). The app word
- * carries identity: medium weight, accent only when active.
- */
-const StyledWordPrefix = styled.span`
-  font-weight: 300;
-  text-transform: lowercase;
-  color: var(--platform-colors-text-secondary);
-  letter-spacing: 0.01em;
-`
-
-const StyledWord = styled.span<{ $active: boolean }>`
-  font-weight: ${({ $active }) => ($active ? 600 : 500)};
-  text-transform: lowercase;
-  color: ${({ $active }) =>
-    $active ? 'var(--platform-colors-accent)' : 'inherit'};
-`
-
-const StyledDocName = styled.span`
-  margin-left: 0.4em;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 300;
-  color: var(--platform-colors-text-disabled);
-`
-
-const StyledClose = styled(X)`
-  cursor: pointer;
-  opacity: 0.7;
-
-  width: 12px !important;
-  height: 12px !important;
-
-  &:hover {
-    opacity: 1;
-    color: var(--platform-colors-text);
-  }
-`
-
-const StyledTrailing = styled.div`
-  align-self: center;
-  display: flex;
-  justify-content: center;
-  padding-inline: var(--platform-spacing-sm);
-  align-items: center;
-`
-
-//#endregion
-
-export function WorkspaceTabStrip({
-  tabs,
-  activeTabId,
-  onSelect,
-  onClose,
-  trailing,
-  onReorder,
-  'aria-label': ariaLabel = 'Open workspace tabs',
-}: WorkspaceTabStripProps): React.ReactElement {
-  const draggingIdRef = useRef<string | null>(null)
-  const [dropTarget, setDropTarget] = useState<{
-    tabId: string
-    after: boolean
-  } | null>(null)
-
-  const finishDrag = (): void => {
-    draggingIdRef.current = null
-    setDropTarget(null)
-  }
-
-  return (
-    <StyledStrip>
-      <StyledScroll role="tablist" aria-label={ariaLabel}>
-        {tabs.map((tab, index) => {
-          const active = tab.id === activeTabId
-          const closable = !tab.pinned && onClose
-          return (
-            <StyledTab
-              key={tab.id}
-              type="button"
-              role="tab"
-              tabIndex={active ? 0 : -1}
-              aria-selected={active}
-              data-active={active}
-              title={tab.label}
-              draggable={Boolean(onReorder)}
-              $dropBefore={dropTarget?.tabId === tab.id && !dropTarget.after}
-              $dropAfter={dropTarget?.tabId === tab.id && dropTarget.after}
-              onDragStart={event => {
-                draggingIdRef.current = tab.id
-                event.dataTransfer.effectAllowed = 'move'
-                event.dataTransfer.setData('text/plain', tab.id)
-              }}
-              onDragOver={event => {
-                if (!onReorder || !draggingIdRef.current) return
-                if (draggingIdRef.current === tab.id) return
-                event.preventDefault()
-                event.dataTransfer.dropEffect = 'move'
-                const rect = event.currentTarget.getBoundingClientRect()
-                const after = event.clientX > rect.left + rect.width / 2
-                setDropTarget(current =>
-                  current?.tabId === tab.id && current.after === after
-                    ? current
-                    : { tabId: tab.id, after },
-                )
-              }}
-              onDragLeave={() => {
-                setDropTarget(current =>
-                  current?.tabId === tab.id ? null : current,
-                )
-              }}
-              onDrop={event => {
-                const draggedId = draggingIdRef.current
-                if (!onReorder || !draggedId || draggedId === tab.id) {
-                  finishDrag()
-                  return
-                }
-                event.preventDefault()
-                const rect = event.currentTarget.getBoundingClientRect()
-                const after = event.clientX > rect.left + rect.width / 2
-                const beforeTabId = after ? tabs[index + 1]?.id ?? null : tab.id
-                if (beforeTabId !== draggedId) {
-                  onReorder(draggedId, beforeTabId)
-                }
-                finishDrag()
-              }}
-              onDragEnd={finishDrag}
-              onClick={() => onSelect(tab.id)}
-              onKeyDown={event => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                  event.preventDefault()
-                  onSelect(tab.id)
-                }
-              }}
-            >
-              {!tab.brand && tab.kindLabel ? (
-                <StyledKind aria-hidden="true">{tab.kindLabel}</StyledKind>
-              ) : null}
-              <StyledLabel>
-                {tab.brand ? (
-                  <>
-                    <StyledWordPrefix>pure</StyledWordPrefix>{' '}
-                    <StyledWord $active={active}>
-                      {tab.appName ?? tab.label.replace(/^pure\s*/i, '')}
-                    </StyledWord>
-                    {tab.documentName ? (
-                      <StyledDocName>{tab.documentName}</StyledDocName>
-                    ) : null}
-                  </>
-                ) : (
-                  tab.label
-                )}
-              </StyledLabel>
-              {closable ? (
-                <StyledClose
-                  type="button"
-                  aria-label={`Close ${tab.label}`}
-                  onClick={event => {
-                    event.stopPropagation()
-                    onClose(tab.id)
-                  }}
-                ></StyledClose>
-              ) : null}
-            </StyledTab>
-          )
-        })}
-      </StyledScroll>
-      {trailing ? <StyledTrailing>{trailing}</StyledTrailing> : null}
-    </StyledStrip>
-  )
-}
+import { useEffect, useRef, useState } from 'react'
+import { styled } from 'styled-components'
+import type { WorkspaceTabStripProps } from './workspaceTabTypes.js'
+import { PureAppWordmark } from './PureAppWordmark.js'
+import { X } from 'lucide-react'
+
+//#region styled-components
+
+const StyledStrip = styled.div`
+  display: flex;
+  align-items: flex-end;
+  min-height: 36px;
+  width: 100%;
+  min-width: 0;
+  background: var(--platform-colors-chrome-tab-strip);
+  border-bottom: 1px solid var(--platform-colors-border);
+  -webkit-app-region: no-drag;
+  user-select: none;
+`
+
+const StyledScroll = styled.div`
+  display: flex;
+  align-items: flex-end;
+  flex: 1;
+  min-width: 0;
+  gap: 2px;
+  padding: 5px 8px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+`
+
+const StyledTab = styled.button<{
+  $dropBefore?: boolean
+  $dropAfter?: boolean
+}>`
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  height: 31px;
+  max-width: 260px;
+  margin-bottom: -1px;
+  padding: 0 8px 0 9px;
+  border: 1px solid transparent;
+  border-bottom-color: transparent;
+  border-radius: 11px 11px 0 0;
+  font-size: var(--platform-typography-font-size-xs, 13px);
+  font-weight: 500;
+  color: var(--platform-colors-text-secondary);
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease,
+    box-shadow 150ms ease;
+
+  &[data-active='true'] {
+    border-color: var(--platform-colors-border);
+    border-bottom-color: var(--platform-colors-surface);
+    background: var(--platform-colors-surface);
+    color: var(--platform-colors-text);
+    box-shadow: 0 -1px 0 rgb(255 255 255 / 70%);
+  }
+
+  &:hover:not([data-active='true']) {
+    border-color: var(--platform-colors-border-soft);
+    background: var(--platform-colors-surface-hover);
+    color: var(--platform-colors-text);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--platform-colors-focus-ring);
+    outline-offset: 2px;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 4px;
+    bottom: 2px;
+    left: -2px;
+    width: 2px;
+    border-radius: 1px;
+    background: ${({ $dropBefore }) =>
+      $dropBefore ? 'var(--platform-colors-accent)' : 'transparent'};
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 4px;
+    bottom: 2px;
+    right: -2px;
+    width: 2px;
+    border-radius: 1px;
+    background: ${({ $dropAfter }) =>
+      $dropAfter ? 'var(--platform-colors-accent)' : 'transparent'};
+  }
+`
+
+const StyledKind = styled.span`
+  font-size: var(--platform-typography-font-size-xs, 11px);
+  font-weight: 600;
+  opacity: 0.85;
+  flex-shrink: 0;
+`
+
+const StyledLabel = styled.span`
+  display: inline-flex;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledTabWordmark = styled(PureAppWordmark)`
+  min-width: 0;
+  overflow: hidden;
+
+  > span:last-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`
+
+/**
+ * The canonical lockup at tab scale: "pure word", lowercase, one size.
+ * The prefix is the quiet family constant — light weight, muted grey,
+ * never resized (a size jump breaks the lockup's line). The app word
+ * carries identity: medium weight, accent only when active.
+ */
+const StyledWordPrefix = styled.span`
+  font-weight: 300;
+  text-transform: lowercase;
+  color: var(--platform-colors-text-secondary);
+  letter-spacing: 0.01em;
+
+  [data-platform-theme='dark'] & {
+    color: #858c96;
+  }
+`
+
+const StyledWord = styled.span<{ $active: boolean }>`
+  font-weight: ${({ $active }) => ($active ? 600 : 500)};
+  text-transform: lowercase;
+  color: ${({ $active }) =>
+    $active ? 'var(--platform-colors-accent)' : 'inherit'};
+
+  [data-platform-theme='dark'] & {
+    color: ${({ $active }) =>
+      $active
+        ? 'color-mix(in srgb, var(--platform-colors-accent) 46%, var(--platform-colors-text) 54%)'
+        : 'inherit'};
+  }
+`
+
+const StyledDocName = styled.span`
+  margin-left: 0.4em;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 400;
+  color: var(--platform-colors-text-secondary);
+`
+
+const StyledClose = styled(X)`
+  cursor: pointer;
+  opacity: 0.7;
+
+  width: 12px !important;
+  height: 12px !important;
+
+  &:hover {
+    opacity: 1;
+    color: var(--platform-colors-text);
+  }
+`
+
+const StyledTrailing = styled.div`
+  align-self: center;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  padding-inline: var(--platform-spacing-sm);
+  align-items: center;
+`
+
+//#endregion
+
+export function WorkspaceTabStrip({
+  tabs,
+  activeTabId,
+  onSelect,
+  onClose,
+  trailing,
+  onReorder,
+  'aria-label': ariaLabel = 'Open workspace tabs',
+}: WorkspaceTabStripProps): React.ReactElement {
+  const draggingIdRef = useRef<string | null>(null)
+  const activeTabRef = useRef<HTMLButtonElement | null>(null)
+  const [dropTarget, setDropTarget] = useState<{
+    tabId: string
+    after: boolean
+  } | null>(null)
+
+  useEffect(() => {
+    activeTabRef.current?.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest',
+    })
+  }, [activeTabId, tabs.length])
+
+  const finishDrag = (): void => {
+    draggingIdRef.current = null
+    setDropTarget(null)
+  }
+
+  return (
+    <StyledStrip>
+      <StyledScroll role="tablist" aria-label={ariaLabel}>
+        {tabs.map((tab, index) => {
+          const active = tab.id === activeTabId
+          const closable = !tab.pinned && onClose
+          return (
+            <StyledTab
+              key={tab.id}
+              ref={active ? activeTabRef : null}
+              type="button"
+              role="tab"
+              tabIndex={active ? 0 : -1}
+              aria-selected={active}
+              data-active={active}
+              title={tab.label}
+              draggable={Boolean(onReorder)}
+              $dropBefore={dropTarget?.tabId === tab.id && !dropTarget.after}
+              $dropAfter={dropTarget?.tabId === tab.id && dropTarget.after}
+              onDragStart={event => {
+                draggingIdRef.current = tab.id
+                event.dataTransfer.effectAllowed = 'move'
+                event.dataTransfer.setData('text/plain', tab.id)
+              }}
+              onDragOver={event => {
+                if (!onReorder || !draggingIdRef.current) return
+                if (draggingIdRef.current === tab.id) return
+                event.preventDefault()
+                event.dataTransfer.dropEffect = 'move'
+                const rect = event.currentTarget.getBoundingClientRect()
+                const after = event.clientX > rect.left + rect.width / 2
+                setDropTarget(current =>
+                  current?.tabId === tab.id && current.after === after
+                    ? current
+                    : { tabId: tab.id, after },
+                )
+              }}
+              onDragLeave={() => {
+                setDropTarget(current =>
+                  current?.tabId === tab.id ? null : current,
+                )
+              }}
+              onDrop={event => {
+                const draggedId = draggingIdRef.current
+                if (!onReorder || !draggedId || draggedId === tab.id) {
+                  finishDrag()
+                  return
+                }
+                event.preventDefault()
+                const rect = event.currentTarget.getBoundingClientRect()
+                const after = event.clientX > rect.left + rect.width / 2
+                const beforeTabId = after ? tabs[index + 1]?.id ?? null : tab.id
+                if (beforeTabId !== draggedId) {
+                  onReorder(draggedId, beforeTabId)
+                }
+                finishDrag()
+              }}
+              onDragEnd={finishDrag}
+              onClick={() => onSelect(tab.id)}
+              onKeyDown={event => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  onSelect(tab.id)
+                }
+              }}
+            >
+              {!tab.brand && tab.kindLabel ? (
+                <StyledKind aria-hidden="true">{tab.kindLabel}</StyledKind>
+              ) : null}
+              <StyledLabel>
+                {tab.brand ? (
+                  <>
+                    <StyledWordPrefix>pure</StyledWordPrefix>{' '}
+                    <StyledWord $active={active}>
+                      {tab.appName ?? tab.label.replace(/^pure\s*/i, '')}
+                    </StyledWord>
+                    {tab.documentName ? (
+                      <StyledDocName>{tab.documentName}</StyledDocName>
+                    ) : null}
+                  </>
+                ) : (
+                  tab.label
+                )}
+              </StyledLabel>
+              {closable ? (
+                <StyledClose
+                  type="button"
+                  aria-label={`Close ${tab.label}`}
+                  onClick={event => {
+                    event.stopPropagation()
+                    onClose(tab.id)
+                  }}
+                ></StyledClose>
+              ) : null}
+            </StyledTab>
+          )
+        })}
+      </StyledScroll>
+      {trailing ? <StyledTrailing>{trailing}</StyledTrailing> : null}
+    </StyledStrip>
+  )
+}