dsh-plugin-workbench 0.0.2 → 0.0.4

package/src/client/fileIcons.tsx

@@ -0,0 +1,144 @@
+/**
+ * File-type icons for the explorer tree rows and the preview tabs.
+ *
+ * Code/config files render as small colored badges with an extension label
+ * (VS Code "Minimal"-theme style); media, archives and installer files use
+ * emoji; anything unknown falls back to a generic document glyph. No icon
+ * assets are shipped — badges are pure CSS (per-language colors) and emoji
+ * come from the platform font.
+ */
+import styles from './files.module.css'
+
+interface BadgeSpec {
+  label: string
+  bg: string
+  fg: string
+}
+
+/** lowercase extension (no dot) → badge colors. */
+const BADGES: Record<string, BadgeSpec> = {
+  // code
+  ts: { label: 'TS', bg: '#3178c6', fg: '#ffffff' },
+  mts: { label: 'TS', bg: '#3178c6', fg: '#ffffff' },
+  cts: { label: 'TS', bg: '#3178c6', fg: '#ffffff' },
+  tsx: { label: 'TSX', bg: '#61dafb', fg: '#06283d' },
+  js: { label: 'JS', bg: '#f7df1e', fg: '#1e1e1e' },
+  mjs: { label: 'JS', bg: '#f7df1e', fg: '#1e1e1e' },
+  cjs: { label: 'JS', bg: '#f7df1e', fg: '#1e1e1e' },
+  jsx: { label: 'JSX', bg: '#61dafb', fg: '#06283d' },
+  json: { label: '{}', bg: '#cbcb41', fg: '#1e1e1e' },
+  jsonc: { label: '{}', bg: '#cbcb41', fg: '#1e1e1e' },
+  html: { label: 'HTML', bg: '#e44d26', fg: '#ffffff' },
+  htm: { label: 'HTML', bg: '#e44d26', fg: '#ffffff' },
+  css: { label: 'CSS', bg: '#2965f1', fg: '#ffffff' },
+  scss: { label: 'SCSS', bg: '#cc6699', fg: '#ffffff' },
+  less: { label: 'LESS', bg: '#2a4d80', fg: '#ffffff' },
+  md: { label: 'MD', bg: '#519aba', fg: '#ffffff' },
+  markdown: { label: 'MD', bg: '#519aba', fg: '#ffffff' },
+  py: { label: 'PY', bg: '#3572a5', fg: '#ffffff' },
+  pyw: { label: 'PY', bg: '#3572a5', fg: '#ffffff' },
+  go: { label: 'GO', bg: '#00add8', fg: '#06283d' },
+  rs: { label: 'RS', bg: '#dea584', fg: '#1e1e1e' },
+  java: { label: 'JAVA', bg: '#b07219', fg: '#ffffff' },
+  c: { label: 'C', bg: '#6e6e6e', fg: '#ffffff' },
+  h: { label: 'H', bg: '#6e6e6e', fg: '#ffffff' },
+  cpp: { label: 'CPP', bg: '#f34b7d', fg: '#ffffff' },
+  cc: { label: 'CPP', bg: '#f34b7d', fg: '#ffffff' },
+  cxx: { label: 'CPP', bg: '#f34b7d', fg: '#ffffff' },
+  hpp: { label: 'HPP', bg: '#f34b7d', fg: '#ffffff' },
+  hxx: { label: 'HPP', bg: '#f34b7d', fg: '#ffffff' },
+  cs: { label: 'CS', bg: '#178600', fg: '#ffffff' },
+  sh: { label: 'SH', bg: '#89e051', fg: '#1e1e1e' },
+  bash: { label: 'SH', bg: '#89e051', fg: '#1e1e1e' },
+  zsh: { label: 'SH', bg: '#89e051', fg: '#1e1e1e' },
+  ps1: { label: 'PS1', bg: '#012456', fg: '#ffffff' },
+  psm1: { label: 'PS1', bg: '#012456', fg: '#ffffff' },
+  psd1: { label: 'PS1', bg: '#012456', fg: '#ffffff' },
+  bat: { label: 'BAT', bg: '#6e6e6e', fg: '#ffffff' },
+  cmd: { label: 'BAT', bg: '#6e6e6e', fg: '#ffffff' },
+  sql: { label: 'SQL', bg: '#e38c00', fg: '#ffffff' },
+  yml: { label: 'YML', bg: '#cb171e', fg: '#ffffff' },
+  yaml: { label: 'YML', bg: '#cb171e', fg: '#ffffff' },
+  toml: { label: 'TOML', bg: '#8b8b8b', fg: '#ffffff' },
+  ini: { label: 'INI', bg: '#8b8b8b', fg: '#ffffff' },
+  conf: { label: 'INI', bg: '#8b8b8b', fg: '#ffffff' },
+  cfg: { label: 'INI', bg: '#8b8b8b', fg: '#ffffff' },
+  xml: { label: 'XML', bg: '#a074c4', fg: '#ffffff' },
+  xsl: { label: 'XML', bg: '#a074c4', fg: '#ffffff' },
+  svg: { label: 'SVG', bg: '#e37933', fg: '#ffffff' },
+  vue: { label: 'VUE', bg: '#41b883', fg: '#06283d' },
+  lock: { label: 'LOCK', bg: '#9d9d9d', fg: '#1e1e1e' },
+  env: { label: 'ENV', bg: '#f05033', fg: '#ffffff' },
+  gitignore: { label: 'GIT', bg: '#f05033', fg: '#ffffff' },
+  gitattributes: { label: 'GIT', bg: '#f05033', fg: '#ffffff' },
+  gitmodules: { label: 'GIT', bg: '#f05033', fg: '#ffffff' },
+  editorconfig: { label: 'CFG', bg: '#8b8b8b', fg: '#ffffff' },
+  npmrc: { label: 'CFG', bg: '#8b8b8b', fg: '#ffffff' },
+  pnpmrc: { label: 'CFG', bg: '#8b8b8b', fg: '#ffffff' },
+  yarnrc: { label: 'CFG', bg: '#8b8b8b', fg: '#ffffff' },
+  mk: { label: 'MK', bg: '#6d8086', fg: '#ffffff' },
+  makefile: { label: 'MK', bg: '#6d8086', fg: '#ffffff' },
+  txt: { label: 'TXT', bg: '#9d9d9d', fg: '#ffffff' },
+  log: { label: 'TXT', bg: '#9d9d9d', fg: '#ffffff' },
+  pdf: { label: 'PDF', bg: '#e74c3c', fg: '#ffffff' },
+}
+
+/** lowercase extension (no dot) → emoji glyph. */
+const EMOJI: Record<string, string> = {
+  png: '🖼️', jpg: '🖼️', jpeg: '🖼️', gif: '🖼️', webp: '🖼️', bmp: '🖼️', ico: '🖼️', avif: '🖼️', jfif: '🖼️', tif: '🖼️', tiff: '🖼️',
+  mp3: '🎵', wav: '🎵', flac: '🎵', ogg: '🎵', oga: '🎵', m4a: '🎵', aac: '🎵', wma: '🎵', opus: '🎵', mid: '🎵',
+  mp4: '🎬', mkv: '🎬', avi: '🎬', mov: '🎬', webm: '🎬', flv: '🎬', wmv: '🎬', m4v: '🎬', mpg: '🎬', mpeg: '🎬',
+  zip: '🗜️', rar: '🗜️', '7z': '🗜️', tar: '🗜️', gz: '🗜️', bz2: '🗜️', xz: '🗜️', tgz: '🗜️', tbz2: '🗜️', zst: '🗜️',
+  doc: '📘', docx: '📘', odt: '📘', rtf: '📘',
+  xls: '📗', xlsx: '📗', ods: '📗', csv: '📗',
+  ppt: '📙', pptx: '📙', odp: '📙',
+  epub: '📖', mobi: '📖',
+  exe: '📦', msi: '📦', dmg: '📦', app: '📦', deb: '📦', rpm: '📦', apk: '📦', iso: '📦',
+}
+
+/** Well-known extension-less names (lowercase) → emoji. */
+const NAMED_EMOJI: Record<string, string> = {
+  dockerfile: '🐳',
+}
+
+export type FileIconSpec =
+  | { kind: 'badge'; label: string; bg: string; fg: string }
+  | { kind: 'emoji'; char: string }
+
+/** Resolve a file name to its icon spec (badge colors or an emoji glyph). */
+export function fileIconFor(name: string): FileIconSpec {
+  const lower = name.trim().toLowerCase()
+  if (lower === '') return { kind: 'emoji', char: '📄' }
+
+  const namedEmoji = NAMED_EMOJI[lower]
+  if (namedEmoji !== undefined) return { kind: 'emoji', char: namedEmoji }
+
+  // Dotfiles use the dotted remainder as the key (`.gitignore` → gitignore,
+  // `.env.local` → env), regular files use the last extension segment.
+  let key: string
+  if (lower.startsWith('.')) {
+    const rest = lower.slice(1)
+    key = rest.startsWith('env.') ? 'env' : rest
+  } else {
+    const dot = lower.lastIndexOf('.')
+    key = dot > 0 ? lower.slice(dot + 1) : lower
+  }
+
+  const badge = BADGES[key]
+  if (badge !== undefined) return { kind: 'badge', label: badge.label, bg: badge.bg, fg: badge.fg }
+  const emoji = EMOJI[key]
+  if (emoji !== undefined) return { kind: 'emoji', char: emoji }
+  return { kind: 'emoji', char: '📄' }
+}
+
+/** Render a file's icon: a colored extension badge or an emoji glyph. */
+export function FileIcon({ name }: { name: string }) {
+  const icon = fileIconFor(name)
+  if (icon.kind === 'emoji') return <>{icon.char}</>
+  const className = icon.label.length >= 4 ? `${styles.fileBadge} ${styles.fileBadgeLong}` : styles.fileBadge
+  return (
+    <span className={className} style={{ background: icon.bg, color: icon.fg }}>
+      {icon.label}
+    </span>
+  )
+}

package/src/client/files.module.css

@@ -170,6 +170,30 @@
   line-height: 22px;
 }
 
+/* Colored extension badge (VS Code "Minimal"-style file icon). */
+.fileBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 15px;
+  border-radius: 3px;
+  font-size: 8px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.3px;
+  padding: 0 1px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  user-select: none;
+}
+
+/* Four-character labels (HTML/JAVA/SCSS/LESS/TOML/…) need a smaller size. */
+.fileBadgeLong {
+  font-size: 6.5px;
+  letter-spacing: -0.4px;
+}
+
 .name {
   flex: 1;
   min-width: 0;
@@ -281,7 +305,8 @@
   scrollbar-width: thin;
 }
 
-.collapse {
+.collapse,
+.tabAction {
   flex: none;
   appearance: none;
   border: none;
@@ -300,11 +325,18 @@
   padding: 0;
 }
 
-.collapse:hover {
+.collapse:hover,
+.tabAction:hover {
   background: var(--fe-hover);
   color: var(--fe-fg);
 }
 
+/* Wrap toggle active state: soft wrap is on. */
+.tabActionActive {
+  background: var(--fe-hover);
+  color: var(--fe-accent);
+}
+
 .tab {
   flex: none;
   display: flex;
@@ -337,6 +369,16 @@
   text-overflow: ellipsis;
 }
 
+.tabIcon {
+  flex: none;
+  width: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  line-height: 1;
+}
+
 .tabClose {
   appearance: none;
   border: none;
@@ -378,6 +420,29 @@
   position: relative;
   height: 100%;
   min-height: 0;
+  /* Keep layout/paint churn local to the editor: huge wrapped content must
+     not invalidate the whole page on every edit or scroll. */
+  contain: layout paint;
+}
+
+/* Plain (no-overlay) editor: the textarea itself renders the visible text —
+   used for files without syntax highlighting (e.g. .txt novels) and for
+   files too large to re-highlight per keystroke without lag. */
+.editorPlain .editorTextarea {
+  color: var(--fe-fg);
+}
+
+/* Large-file notice chip: syntax highlight was dropped to stay responsive. */
+.editorHint {
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: var(--fe-hover);
+  color: var(--fe-muted);
+  font-size: 11px;
+  pointer-events: none;
 }
 
 .editorHighlight {
@@ -385,12 +450,22 @@
   inset: 0;
   margin: 0;
   padding: 12px;
-  overflow: hidden;
+  /* The textarea reserves one extra line at the bottom (its caret reserve),
+     so it can scroll ~1 line further than this layer. Match that range so
+     the two layers never desync at the bottom of a long file — otherwise
+     drag-selection near the end would highlight text one line ABOVE the
+     visible text. */
+  padding-bottom: calc(12px + 1.5em);
+  /* auto (not hidden): the highlight layer gets the same scrollbar gutter as
+     the textarea, so both content boxes have identical widths and wrap at the
+     same points. Its scrollbars stack invisibly beneath the textarea's. */
+  overflow: auto;
   pointer-events: none;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 13px;
   line-height: 1.5;
   white-space: pre;
+  tab-size: 2;
   color: var(--fe-fg);
   background: transparent;
 }
@@ -422,6 +497,18 @@
   tab-size: 2;
 }
 
+/* Display-only soft wrap: both layers wrap identically; the file content
+   itself is never modified (wrap="soft" on the textarea). */
+.editor[data-wrap='on'] .editorHighlight,
+.editor[data-wrap='on'] .editorTextarea {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.editor[data-wrap='on'] .editorTextarea {
+  overflow-x: hidden;
+}
+
 .saveError {
   position: absolute;
   right: 8px;
@@ -515,8 +602,13 @@
   font-style: italic;
 }
 
+/* Strong emphasis is color-only on purpose: `font-weight: bold` widens
+   glyphs, so the highlight layer would wrap at different points than the
+   textarea beneath it — drag-selection would then highlight text that no
+   longer matches the visible lines. Italic above is metric-neutral. */
 .editorHighlight :global(.hljs-strong) {
-  font-weight: bold;
+  color: var(--fe-accent);
+  font-weight: inherit;
 }
 
 /* ---- Skin chrome fix ----

package/src/client/locales.ts

@@ -9,6 +9,8 @@ export const zh = {
   'action.open': '在系统中打开',
   'action.theme': '切换浅色/暗色主题',
   'action.saveHint': 'Ctrl+S 保存',
+  'action.wrapOn': '开启自动换行（显示层换行，不改文件）',
+  'action.wrapOff': '关闭自动换行（长行横向滚动）',
   'tab.close': '关闭标签页',
   'tab.collapse': '收起文件详情',
   'tab.expand': '弹出文件详情',
@@ -17,6 +19,7 @@ export const zh = {
   'preview.tooLarge': '文件过大，仅支持预览不超过 {limit}',
   'preview.emptyDir': '空目录',
   'preview.error': '加载失败',
+  'preview.highlightOff': '大文件：已关闭语法高亮（仍可编辑）',
 } as const
 
 export type FilesKey = keyof typeof zh
@@ -28,6 +31,8 @@ export const en: Record<FilesKey, string> = {
   'action.open': 'Open in system',
   'action.theme': 'Toggle light/dark theme',
   'action.saveHint': 'Ctrl+S to save',
+  'action.wrapOn': 'Enable word wrap (display only, file unchanged)',
+  'action.wrapOff': 'Disable word wrap (long lines scroll horizontally)',
   'tab.close': 'Close tab',
   'tab.collapse': 'Collapse file details',
   'tab.expand': 'Expand file details',
@@ -36,4 +41,5 @@ export const en: Record<FilesKey, string> = {
   'preview.tooLarge': 'File too large to preview (limit {limit})',
   'preview.emptyDir': 'Empty directory',
   'preview.error': 'Load failed',
+  'preview.highlightOff': 'Large file: syntax highlighting off (still editable)',
 }

package/src/client/store.ts

@@ -20,6 +20,8 @@ export interface TabsStateView {
   tabs: string[]
   active: string | undefined
   collapsed: boolean
+  /** Display-only soft wrap for the editor (never touches the file content). */
+  wrap: boolean
   theme: FeTheme
   cwd: string | undefined
 }
@@ -27,14 +29,29 @@ export interface TabsStateView {
 const EMPTY_TABS: string[] = []
 const EMPTY_WORKSPACE: PerWorkspace = { tabs: EMPTY_TABS, active: undefined, collapsed: false }
 
+const WRAP_KEY = 'dsh-plugin-workbench:wrap'
+
+/** Read the persisted wrap preference; defaults to soft wrap ON. */
+function storedWrap(): boolean {
+  try {
+    if (typeof window === 'undefined') return true
+    const stored = window.localStorage.getItem(WRAP_KEY)
+    return stored === null ? true : stored === '1'
+  } catch {
+    return true
+  }
+}
+
 interface StoreState {
   currentCwd: string | undefined
   workspaces: Record<string, PerWorkspace>
   theme: FeTheme
+  wrap: boolean
 }
 
-let state: StoreState = { currentCwd: undefined, workspaces: {}, theme: 'dark' }
-let view: TabsStateView = { tabs: EMPTY_TABS, active: undefined, collapsed: false, theme: 'dark', cwd: undefined }
+const initialWrap = storedWrap()
+let state: StoreState = { currentCwd: undefined, workspaces: {}, theme: 'dark', wrap: initialWrap }
+let view: TabsStateView = { tabs: EMPTY_TABS, active: undefined, collapsed: false, wrap: initialWrap, theme: 'dark', cwd: undefined }
 const listeners = new Set<() => void>()
 
 function workspaceOf(cwd: string | undefined): PerWorkspace {
@@ -63,6 +80,7 @@ function commit(next: StoreState): void {
     tabs: ws.tabs,
     active: ws.active,
     collapsed: ws.collapsed,
+    wrap: state.wrap,
     theme: state.theme,
     cwd: state.currentCwd,
   }
@@ -70,6 +88,7 @@ function commit(next: StoreState): void {
     nextView.tabs === view.tabs
     && nextView.active === view.active
     && nextView.collapsed === view.collapsed
+    && nextView.wrap === view.wrap
     && nextView.theme === view.theme
     && nextView.cwd === view.cwd
   ) return
@@ -149,3 +168,14 @@ export function expandPreview(): void {
 export function toggleTheme(): void {
   commit({ ...state, theme: state.theme === 'dark' ? 'light' : 'dark' })
 }
+
+/** Toggle display-only soft wrap for the editor (global, persisted). */
+export function toggleWrap(): void {
+  const wrap = !state.wrap
+  try {
+    window.localStorage.setItem(WRAP_KEY, wrap ? '1' : '0')
+  } catch {
+    // storage unavailable — the preference just won't persist across reloads
+  }
+  commit({ ...state, wrap })
+}