@prmichaelsen/acp-visualizer 0.9.1 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {

package/src/components/MilestonePreview.tsx

@@ -1,7 +1,8 @@
 import { Link } from '@tanstack/react-router'
 import { useState, useEffect, useMemo } from 'react'
-import { ExternalLink } from 'lucide-react'
+import { Maximize2 } from 'lucide-react'
 import { useProgressData } from '../contexts/ProgressContext'
+import { useSidePanel } from '../contexts/SidePanelContext'
 import { DetailHeader } from './DetailHeader'
 import { ProgressBar } from './ProgressBar'
 import { StatusDot } from './StatusDot'
@@ -27,6 +28,7 @@ function getGitHubParams(): { owner: string; repo: string } | undefined {
 
 export function MilestonePreview({ milestoneId }: MilestonePreviewProps) {
   const data = useProgressData()
+  const { close } = useSidePanel()
   const [markdown, setMarkdown] = useState<string | null>(null)
   const [markdownError, setMarkdownError] = useState<string | null>(null)
   const [markdownFilePath, setMarkdownFilePath] = useState<string | null>(null)
@@ -96,8 +98,9 @@ export function MilestonePreview({ milestoneId }: MilestonePreviewProps) {
           params={{ milestoneId }}
           className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
           title="Open full view"
+          onClick={close}
         >
-          <ExternalLink className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+          <Maximize2 className="w-4 h-4 text-gray-600 dark:text-gray-400" />
         </Link>
       </div>
 

package/src/components/PreviewButton.tsx

@@ -23,7 +23,7 @@ export function PreviewButton({ type, id, className = '' }: PreviewButtonProps)
   return (
     <button
       onClick={handleClick}
-      className={`p-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors opacity-0 group-hover:opacity-100 ${className}`}
+      className={`p-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors ${className}`}
       title={`Preview ${type}`}
       aria-label={`Preview ${type}`}
     >

package/src/components/SidePanel.tsx

@@ -23,8 +23,8 @@ export function SidePanel() {
 
       {/* Panel */}
       <div
-        className={`fixed top-0 right-0 h-full w-full max-w-2xl bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 shadow-2xl z-50 transition-transform duration-300 overflow-auto translate-x-full ${
-          isOpen ? '!translate-x-0' : ''
+        className={`fixed top-0 right-0 h-full w-full max-w-2xl bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 shadow-2xl z-50 overflow-auto transition-transform duration-300 ${
+          isOpen ? 'translate-x-0' : 'translate-x-full'
         }`}
       >
         {/* Header */}

package/src/components/TaskPreview.tsx

@@ -1,7 +1,8 @@
 import { Link } from '@tanstack/react-router'
 import { useState, useEffect, useMemo } from 'react'
-import { ExternalLink } from 'lucide-react'
+import { Maximize2 } from 'lucide-react'
 import { useProgressData } from '../contexts/ProgressContext'
+import { useSidePanel } from '../contexts/SidePanelContext'
 import { DetailHeader } from './DetailHeader'
 import { PriorityBadge } from './PriorityBadge'
 import { MarkdownContent, buildLinkMap } from './MarkdownContent'
@@ -25,6 +26,7 @@ function getGitHubParams(): { owner: string; repo: string } | undefined {
 
 export function TaskPreview({ taskId }: TaskPreviewProps) {
   const data = useProgressData()
+  const { close } = useSidePanel()
   const [markdown, setMarkdown] = useState<string | null>(null)
   const [markdownError, setMarkdownError] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
@@ -116,8 +118,9 @@ export function TaskPreview({ taskId }: TaskPreviewProps) {
           params={{ taskId }}
           className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
           title="Open full view"
+          onClick={close}
         >
-          <ExternalLink className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+          <Maximize2 className="w-4 h-4 text-gray-600 dark:text-gray-400" />
         </Link>
       </div>