feat: tags filter, terminal overlays, sidebar resize feedback

AnasProgrammer2 · AnasProgrammer2 · commit 54340883ce56 · 2026-04-23T14:47:31.000+03:00
- HomeScreen: add tag filter pill bar — click any tag to filter connections, click again or Clear to reset
- TerminalTab: replace plain text states with full-screen overlays for connecting (spinner), disconnected (icon + reconnect button), and error (icon + retry button)
- Sidebar: enhance resize handle with active drag indicator and hover feedback
diff --git a/src/renderer/src/components/home/HomeScreen.tsx b/src/renderer/src/components/home/HomeScreen.tsx
@@ -199,22 +199,33 @@ export function HomeScreen(): JSX.Element {
 
   const [search,           setSearch]           = useState('')
   const [selectedGroup,    setSelectedGroup]    = useState<string | null>(null)
+  const [selectedTag,      setSelectedTag]      = useState<string | null>(null)
   const [groupDialogOpen,  setGroupDialogOpen]  = useState(false)
   const [sshKeyDialogOpen, setSshKeyDialogOpen] = useState(false)
 
   const connectedIds   = new Set(sessions.filter(s => s.status === 'connected').map(s => s.connectionId))
   const totalConnected = sessions.filter(s => s.status === 'connected').length
 
+  // All unique tags across connections
+  const allTags = useMemo(() => {
+    const set = new Set<string>()
+    connections.forEach(c => c.tags?.forEach(t => set.add(t)))
+    return [...set].sort()
+  }, [connections])
+
   const filtered = useMemo(() => {
     const q = search.toLowerCase()
-    return connections.filter(c =>
-      !q ||
-      c.name.toLowerCase().includes(q) ||
-      c.host.toLowerCase().includes(q) ||
-      c.username?.toLowerCase().includes(q) ||
-      c.tags.some(t => t.toLowerCase().includes(q))
-    )
-  }, [connections, search])
+    return connections.filter(c => {
+      if (selectedTag && !c.tags?.includes(selectedTag)) return false
+      return (
+        !q ||
+        c.name.toLowerCase().includes(q) ||
+        c.host.toLowerCase().includes(q) ||
+        c.username?.toLowerCase().includes(q) ||
+        c.tags.some(t => t.toLowerCase().includes(q))
+      )
+    })
+  }, [connections, search, selectedTag])
 
   const groupIds = new Set(groups.map(g => g.id))
 
@@ -275,6 +286,35 @@ export function HomeScreen(): JSX.Element {
         </button>
       </div>
 
+      {/* ── Tags filter bar ─────────────────────────────────────────────────── */}
+      {allTags.length > 0 && (
+        <div className="flex items-center gap-1.5 px-5 py-2 border-b border-border/60 overflow-x-auto shrink-0 scrollbar-none">
+          <span className="text-[10px] text-muted-foreground/40 font-semibold uppercase tracking-wider shrink-0">Tags</span>
+          {allTags.map(tag => (
+            <button
+              key={tag}
+              onClick={() => setSelectedTag(selectedTag === tag ? null : tag)}
+              className={cn(
+                'text-[11px] px-2.5 py-1 rounded-full border font-medium transition-all cursor-pointer shrink-0 whitespace-nowrap',
+                selectedTag === tag
+                  ? 'bg-primary/15 border-primary/40 text-primary'
+                  : 'bg-muted/40 border-border/60 text-muted-foreground hover:text-foreground hover:border-border'
+              )}
+            >
+              {tag}
+            </button>
+          ))}
+          {selectedTag && (
+            <button
+              onClick={() => setSelectedTag(null)}
+              className="text-[11px] px-2 py-1 rounded-full text-muted-foreground/50 hover:text-muted-foreground transition-colors cursor-pointer shrink-0"
+            >
+              Clear ×
+            </button>
+          )}
+        </div>
+      )}
+
       {/* ── Content ────────────────────────────────────────────────────────── */}
       <div className="flex-1 overflow-y-auto px-5 py-5 space-y-6">
 
diff --git a/src/renderer/src/components/sidebar/Sidebar.tsx b/src/renderer/src/components/sidebar/Sidebar.tsx
@@ -34,6 +34,7 @@ export function Sidebar(): JSX.Element {
 
   const [importMsg, setImportMsg] = useState<string | null>(null)
   const [sshKeyDialogOpen, setSshKeyDialogOpen] = useState(false)
+  const [resizing, setResizing] = useState(false)
 
   const [search, setSearch] = useState('')
   const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set())
@@ -44,6 +45,7 @@ export function Sidebar(): JSX.Element {
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     isResizing.current = true
+    setResizing(true)
     startX.current = e.clientX
     startWidth.current = sidebarWidth
 
@@ -55,6 +57,7 @@ export function Sidebar(): JSX.Element {
     }
     const onUp = () => {
       isResizing.current = false
+      setResizing(false)
       window.removeEventListener('mousemove', onMove)
       window.removeEventListener('mouseup', onUp)
     }
@@ -249,8 +252,16 @@ export function Sidebar(): JSX.Element {
       {/* Resize handle */}
       <div
         onMouseDown={handleMouseDown}
-        className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/30 transition-colors"
-      />
+        className={cn(
+          'absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize group flex items-center justify-center transition-colors',
+          resizing ? 'bg-primary/40' : 'hover:bg-primary/20'
+        )}
+      >
+        <div className={cn(
+          'w-0.5 h-8 rounded-full transition-all',
+          resizing ? 'bg-primary/70 opacity-100' : 'bg-border/60 opacity-0 group-hover:opacity-100'
+        )} />
+      </div>
 
       {groupDialog.open && (
         <GroupDialog
diff --git a/src/renderer/src/components/terminal/TerminalTab.tsx b/src/renderer/src/components/terminal/TerminalTab.tsx
@@ -4,7 +4,7 @@ import { FitAddon } from '@xterm/addon-fit'
 import { WebLinksAddon } from '@xterm/addon-web-links'
 import { SearchAddon } from '@xterm/addon-search'
 import '@xterm/xterm/css/xterm.css'
-import { Search, X, ChevronUp, ChevronDown } from 'lucide-react'
+import { Search, X, ChevronUp, ChevronDown, Copy, Clipboard, Eraser } from 'lucide-react'
 import { toast } from 'sonner'
 import { Session } from '../../types'
 import { useAppStore } from '../../store'
@@ -50,6 +50,9 @@ export function TerminalTab({ session }: Props): JSX.Element {
   const [searchRegex, setSearchRegex]       = useState(false)
   const searchInputRef = useRef<HTMLInputElement>(null)
 
+  // ── Context menu state ────────────────────────────────────────────────────────
+  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number } | null>(null)
+
   const { setSessionStatus, setSessionLogging } = useAppStore()
 
   // Derive logging state from the session's loggingPath (store is source of truth)
@@ -128,6 +131,41 @@ export function TerminalTab({ session }: Props): JSX.Element {
     termRef.current?.focus()
   }, [])
 
+  // ── Context menu handlers ─────────────────────────────────────────────────────
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    setCtxMenu({ x: e.clientX, y: e.clientY })
+  }, [])
+
+  const ctxCopy = useCallback(() => {
+    const sel = termRef.current?.getSelection()
+    if (sel) navigator.clipboard.writeText(sel)
+    setCtxMenu(null)
+    termRef.current?.focus()
+  }, [])
+
+  const ctxPaste = useCallback(async () => {
+    setCtxMenu(null)
+    const text = await navigator.clipboard.readText()
+    if (!text) return
+    const proto = session.connection.protocol
+    if      (proto === 'ssh')    window.api.ssh.send(session.id, text)
+    else if (proto === 'serial') window.api.serial.send(session.id, text)
+    else                         window.api.telnet.send(session.id, text)
+    termRef.current?.focus()
+  }, [session.id, session.connection.protocol])
+
+  const ctxClear = useCallback(() => {
+    termRef.current?.clear()
+    setCtxMenu(null)
+    termRef.current?.focus()
+  }, [])
+
+  const ctxSearch = useCallback(() => {
+    setCtxMenu(null)
+    openSearch()
+  }, [openSearch])
+
   // ── Logging helpers ───────────────────────────────────────────────────────────
   const startLogging = async () => {
     const filePath = await window.api.log.start(session.connection.name)
@@ -803,11 +841,101 @@ export function TerminalTab({ session }: Props): JSX.Element {
       </div>
 
       {/* Terminal */}
-      <div
-        ref={containerRef}
-        className="flex-1 w-full min-h-0 overflow-hidden bg-[#0B0718]"
-        style={{ fontVariantLigatures: 'none' }}
-      />
+      <div className="relative flex-1 w-full min-h-0 overflow-hidden">
+        <div
+          ref={containerRef}
+          onContextMenu={handleContextMenu}
+          className="w-full h-full bg-[#0B0718]"
+          style={{ fontVariantLigatures: 'none' }}
+        />
+
+        {/* Connecting overlay */}
+        {session.status === 'connecting' && (
+          <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-[#0B0718]/90 backdrop-blur-sm gap-4">
+            <div className="relative">
+              <div className="w-12 h-12 rounded-full border-2 border-primary/20" />
+              <div className="absolute inset-0 w-12 h-12 rounded-full border-2 border-t-primary border-r-transparent border-b-transparent border-l-transparent animate-spin" />
+            </div>
+            <div className="flex flex-col items-center gap-1">
+              <span className="text-sm font-medium text-foreground">Connecting…</span>
+              <span className="text-xs text-muted-foreground font-mono">
+                {session.connection.username ? `${session.connection.username}@` : ''}{session.connection.host}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* Disconnected overlay */}
+        {session.status === 'disconnected' && (
+          <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-[#0B0718]/90 backdrop-blur-sm gap-4">
+            <div className="w-12 h-12 rounded-full bg-red-500/10 border border-red-500/30 flex items-center justify-center">
+              <svg className="w-6 h-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 15.312a4.5 4.5 0 0 1-1.242-7.244l4.5-4.5a4.5 4.5 0 0 1 6.364 6.364l-1.757 1.757" />
+              </svg>
+            </div>
+            <div className="flex flex-col items-center gap-1.5">
+              <span className="text-sm font-medium text-foreground">Disconnected</span>
+              <span className="text-xs text-muted-foreground font-mono">
+                {session.connection.host}
+              </span>
+            </div>
+            {session.connection.autoReconnect ? (
+              <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                <span className="w-1.5 h-1.5 rounded-full bg-yellow-500 animate-pulse" />
+                Reconnecting…
+              </div>
+            ) : (
+              <button
+                onClick={() => doConnectRef.current?.(true)}
+                className="flex items-center gap-2 px-4 py-2 rounded-lg bg-card border border-border text-sm text-foreground hover:bg-accent transition-colors cursor-pointer"
+              >
+                Reconnect
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* Error overlay */}
+        {session.status === 'error' && (
+          <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-[#0B0718]/90 backdrop-blur-sm gap-4">
+            <div className="w-12 h-12 rounded-full bg-red-500/10 border border-red-500/30 flex items-center justify-center">
+              <svg className="w-6 h-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+              </svg>
+            </div>
+            <div className="flex flex-col items-center gap-1.5">
+              <span className="text-sm font-medium text-foreground">Connection Error</span>
+              {session.error && (
+                <span className="text-xs text-muted-foreground font-mono max-w-xs text-center">{session.error}</span>
+              )}
+            </div>
+            <button
+              onClick={() => doConnectRef.current?.(true)}
+              className="flex items-center gap-2 px-4 py-2 rounded-lg bg-card border border-border text-sm text-foreground hover:bg-accent transition-colors cursor-pointer"
+            >
+              Retry
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Context menu */}
+      {ctxMenu && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => { setCtxMenu(null); termRef.current?.focus() }} />
+          <div
+            className="fixed z-50 bg-popover border border-border rounded-xl shadow-2xl py-1 w-44 overflow-hidden"
+            style={{ top: ctxMenu.y, left: ctxMenu.x }}
+          >
+            <CtxItem icon={Copy}      label="Copy"          onClick={ctxCopy}   hint="⌘C" />
+            <CtxItem icon={Clipboard} label="Paste"         onClick={ctxPaste}  hint="⌘V" />
+            <div className="h-px bg-border/60 my-1 mx-2" />
+            <CtxItem icon={Search}    label="Search"        onClick={ctxSearch} hint="⌘F" />
+            <CtxItem icon={Eraser}    label="Clear"         onClick={ctxClear}  />
+          </div>
+        </>
+      )}
 
       {promptState.visible && (
         <PasswordPrompt
@@ -820,3 +948,21 @@ export function TerminalTab({ session }: Props): JSX.Element {
     </div>
   )
 }
+
+function CtxItem({ icon: Icon, label, onClick, hint }: {
+  icon:     React.ComponentType<{ className?: string }>
+  label:    string
+  onClick:  () => void
+  hint?:    string
+}): JSX.Element {
+  return (
+    <button
+      onClick={onClick}
+      className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-accent transition-colors text-left cursor-pointer"
+    >
+      <Icon className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+      <span className="flex-1">{label}</span>
+      {hint && <span className="text-[11px] text-muted-foreground/50 font-mono">{hint}</span>}
+    </button>
+  )
+}
