Bump version to 1.1.23 and refine dashboard UI

Author: jestersimpps

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vbcdr",
-  "version": "1.1.22",
+  "version": "1.1.23",
   "description": "Desktop vibe coding environment for Claude Code developers",
   "author": {
     "name": "jo vinkenroye",

package.json

@@ -1,19 +1,18 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { Plus } from 'lucide-react'
 import { useProjectStore } from '@/stores/project-store'
-import { useTerminalStore } from '@/stores/terminal-store'
 import { useGitStore } from '@/stores/git-store'
 import { ProjectCard } from '@/components/dashboard/ProjectCard'
+import { ProjectModal } from '@/components/dashboard/ProjectModal'
+import type { Project } from '@/models/types'
 
 export function Dashboard(): React.ReactElement {
   const projects = useProjectStore((s) => s.projects)
   const addProject = useProjectStore((s) => s.addProject)
-  const lastActivityPerProject = useTerminalStore((s) => s.lastActivityPerProject)
   const loadGitData = useGitStore((s) => s.loadGitData)
+  const [modalProject, setModalProject] = useState<Project | null>(null)
 
-  const sorted = [...projects].sort(
-    (a, b) => (lastActivityPerProject[b.id] ?? 0) - (lastActivityPerProject[a.id] ?? 0)
-  )
+  const sorted = [...projects].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }))
 
   useEffect(() => {
     for (const project of projects) {
@@ -23,16 +22,6 @@ export function Dashboard(): React.ReactElement {
 
   return (
     <div className="flex h-full flex-col bg-zinc-950">
-      <div className="flex items-center justify-between border-b border-zinc-800 px-6 py-3">
-        <h1 className="text-sm font-medium text-zinc-300">Dashboard</h1>
-        <button
-          onClick={addProject}
-          className="flex items-center gap-1.5 rounded-md bg-zinc-800 px-3 py-1.5 text-xs font-medium text-zinc-300 transition-colors hover:bg-zinc-700 hover:text-zinc-200"
-        >
-          <Plus size={12} />
-          Add Project
-        </button>
-      </div>
       <div className="flex-1 overflow-auto p-6">
         {projects.length === 0 ? (
           <div className="flex h-full flex-col items-center justify-center gap-3 text-zinc-600">
@@ -46,13 +35,21 @@ export function Dashboard(): React.ReactElement {
             </button>
           </div>
         ) : (
-          <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(600px, 1fr))' }}>
+          <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))' }}>
             {sorted.map((project) => (
-              <ProjectCard key={project.id} project={project} />
+              <ProjectCard
+                key={project.id}
+                project={project}
+                onOpenModal={() => setModalProject(project)}
+                isModalOpen={modalProject?.id === project.id}
+              />
             ))}
           </div>
         )}
       </div>
+      {modalProject && (
+        <ProjectModal project={modalProject} onClose={() => setModalProject(null)} />
+      )}
     </div>
   )
 }

src/renderer/components/dashboard/Dashboard.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useRef } from 'react'
+import { getTerminalInstance } from '@/components/terminal/TerminalInstance'
+
+interface ModalTerminalProps {
+  tabId: string
+}
+
+export function ModalTerminal({ tabId }: ModalTerminalProps): React.ReactElement {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const entry = getTerminalInstance(tabId)
+    if (!entry) return
+
+    const termEl = entry.terminal.element
+    if (!termEl) return
+
+    const originalParent = termEl.parentElement
+
+    termEl.style.width = '100%'
+    termEl.style.height = '100%'
+    container.appendChild(termEl)
+
+    const viewport = termEl.querySelector('.xterm-viewport') as HTMLElement | null
+    const prevOverflow = viewport?.style.overflowY ?? ''
+    if (viewport) viewport.style.overflowY = ''
+
+    setTimeout(() => {
+      entry.fitAddon.fit()
+      entry.terminal.scrollToBottom()
+      entry.terminal.focus()
+    }, 50)
+
+    let resizeTimer: ReturnType<typeof setTimeout> | null = null
+    const observer = new ResizeObserver(() => {
+      if (resizeTimer) clearTimeout(resizeTimer)
+      resizeTimer = setTimeout(() => {
+        try {
+          if (!container.contains(entry.terminal.element)) return
+          const atBottom = entry.terminal.buffer.active.viewportY === entry.terminal.buffer.active.baseY
+          entry.fitAddon.fit()
+          if (atBottom) entry.terminal.scrollToBottom()
+        } catch { /* may unmount during resize */ }
+      }, 80)
+    })
+    observer.observe(container)
+
+    return () => {
+      if (resizeTimer) clearTimeout(resizeTimer)
+      observer.disconnect()
+      if (viewport) viewport.style.overflowY = prevOverflow
+      termEl.style.width = ''
+      termEl.style.height = ''
+      if (originalParent) {
+        originalParent.appendChild(termEl)
+      }
+      setTimeout(() => {
+        entry.fitAddon.fit()
+        entry.terminal.refresh(0, entry.terminal.rows - 1)
+      }, 50)
+    }
+  }, [tabId])
+
+  return <div ref={containerRef} className="h-full w-full overflow-hidden bg-zinc-950" />
+}

src/renderer/components/dashboard/ModalTerminal.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react'
 import { GitBranch as GitBranchIcon, FileText, Terminal, Zap } from 'lucide-react'
-import { useProjectStore } from '@/stores/project-store'
 import { useTerminalStore } from '@/stores/terminal-store'
 import { useGitStore } from '@/stores/git-store'
 import { useEditorStore } from '@/stores/editor-store'
@@ -38,6 +37,8 @@ function sanitizeLine(raw: string): string {
 
 interface ProjectCardProps {
   project: Project
+  onOpenModal: () => void
+  isModalOpen: boolean
 }
 
 type ClaudeStatus = 'busy' | 'idle' | 'none'
@@ -57,8 +58,7 @@ function useLlmTabs(projectId: string): TerminalTab[] {
   return tabs.filter((t) => t.projectId === projectId && t.initialCommand)
 }
 
-export function ProjectCard({ project }: ProjectCardProps): React.ReactElement {
-  const setActiveProject = useProjectStore((s) => s.setActiveProject)
+export function ProjectCard({ project, onOpenModal, isModalOpen }: ProjectCardProps): React.ReactElement {
   const branches = useGitStore((s) => s.branchesPerProject[project.id] ?? EMPTY_BRANCHES)
   const outputBuffer = useTerminalStore((s) => s.outputBufferPerProject[project.id] ?? EMPTY_OUTPUT)
   const openFilesCount = useEditorStore((s) => s.statePerProject[project.id]?.openFiles.length ?? 0)
@@ -81,12 +81,10 @@ export function ProjectCard({ project }: ProjectCardProps): React.ReactElement {
     .filter((l) => l.length > 0)
     .slice(-12)
 
-  const navigate = (): void => setActiveProject(project.id)
-
   return (
     <div
       className="group flex w-full min-w-0 cursor-pointer flex-col gap-2 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50 p-3 text-left transition-all hover:bg-zinc-800/50"
-      onClick={navigate}
+      onClick={onOpenModal}
     >
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2 min-w-0">
@@ -119,7 +117,7 @@ export function ProjectCard({ project }: ProjectCardProps): React.ReactElement {
         </div>
       </div>
 
-      {hasTerminal && activeTab ? (
+      {hasTerminal && activeTab && !isModalOpen ? (
         <div className="flex w-full min-w-0 flex-col gap-1">
           {llmTabs.length > 1 && (
             <div className="flex items-center gap-1">