ui: add animations to properties panel toggle

- Move toggle icon next to three-dots menu in a shared flex container
- Toggle icon fades in/out with opacity transition instead of hard mount/unmount
- Properties panel slides in/out with width + opacity transition (200ms ease-in-out)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/components/PropertiesPanel.tsx

@@ -6,10 +6,14 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 export function PropertiesPanel() {
   const { panelContent, panelVisible, setPanelVisible } = usePanel();
 
-  if (!panelContent || !panelVisible) return null;
+  if (!panelContent) return null;
 
   return (
-    <aside className="hidden md:flex w-80 border-l border-border bg-card flex-col shrink-0">
+    <aside
+      className="hidden md:flex border-l border-border bg-card flex-col shrink-0 overflow-hidden transition-[width,opacity] duration-200 ease-in-out"
+      style={{ width: panelVisible ? 320 : 0, opacity: panelVisible ? 1 : 0 }}
+    >
+      <div className="w-80 flex-1 flex flex-col min-w-[320px]">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border">
           <span className="text-sm font-medium">Properties</span>
           <Button variant="ghost" size="icon-xs" onClick={() => setPanelVisible(false)}>
@@ -19,6 +23,7 @@ export function PropertiesPanel() {
         <ScrollArea className="flex-1">
           <div className="p-4">{panelContent}</div>
         </ScrollArea>
+      </div>
     </aside>
   );
 }

ui/src/pages/IssueDetail.tsx

@@ -613,21 +613,23 @@ export function IssueDetail() {
             <SlidersHorizontal className="h-4 w-4" />
           </Button>
 
-          {!panelVisible && (
+          <div className="hidden md:flex items-center md:ml-auto shrink-0">
             <Button
               variant="ghost"
               size="icon-xs"
-              className="hidden md:inline-flex ml-auto shrink-0"
+              className={cn(
+                "shrink-0 transition-opacity duration-200",
+                panelVisible ? "opacity-0 pointer-events-none w-0 overflow-hidden" : "opacity-100",
+              )}
               onClick={() => setPanelVisible(true)}
               title="Show properties"
             >
               <SlidersHorizontal className="h-4 w-4" />
             </Button>
-          )}
 
             <Popover open={moreOpen} onOpenChange={setMoreOpen}>
               <PopoverTrigger asChild>
-              <Button variant="ghost" size="icon-xs" className="md:ml-auto shrink-0">
+                <Button variant="ghost" size="icon-xs" className="shrink-0">
                   <MoreHorizontal className="h-4 w-4" />
                 </Button>
               </PopoverTrigger>
@@ -648,6 +650,7 @@ export function IssueDetail() {
             </PopoverContent>
             </Popover>
           </div>
+        </div>
 
         <InlineEditor
           value={issue.title}