doocus improvemnts

ui/doocus-app/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, computed } from 'vue'
 import Panel from '@framework/components/Panel.vue'
 import SplitPane from '@framework/components/SplitPane.vue'
 import FileTree from '@/components/FileTree.vue'
@@ -8,6 +8,10 @@ import ExportBar from '@/components/ExportBar.vue'
 import { store, loadTree } from '@/store'
 
 onMounted(loadTree)
+
+const detailTitle = computed(() =>
+  store.detail?.node.mode === 'meeting' ? 'Meeting' : 'File')
+const barLabel = computed(() => store.detail?.node.name ?? 'viewer')
 </script>
 
 <template>
@@ -24,18 +28,29 @@ onMounted(loadTree)
 
     <main class="body">
       <div v-if="store.error" class="err">{{ store.error }}</div>
-      <SplitPane v-else direction="vertical" :initial-size="0.9" :min="0.3" :max="3">
+
+      <!-- expanded: resizable tree / viewer split -->
+      <SplitPane v-else-if="!store.detailCollapsed" direction="vertical" :initial-size="0.9" :min="0.2" :max="4">
         <template #first>
-          <Panel title="Tree">
-            <FileTree :items="store.tree" />
-          </Panel>
+          <Panel title="Tree"><FileTree :items="store.tree" /></Panel>
         </template>
         <template #second>
-          <Panel title="File">
+          <Panel :title="detailTitle">
+            <template #actions>
+              <button class="chev" title="Collapse viewer" @click="store.detailCollapsed = true">▾</button>
+            </template>
             <DocDetail />
           </Panel>
         </template>
       </SplitPane>
+
+      <!-- collapsed: tree fills, viewer is a bar docked at the bottom -->
+      <div v-else class="stack">
+        <Panel title="Tree" class="grow"><FileTree :items="store.tree" /></Panel>
+        <button class="expand-bar" title="Expand viewer" @click="store.detailCollapsed = false">
+          ▴ <span>{{ barLabel }}</span>
+        </button>
+      </div>
     </main>
   </div>
 </template>
@@ -52,4 +67,14 @@ onMounted(loadTree)
 .spacer { flex: 1; }
 .body { flex: 1; min-height: 0; padding: var(--space-2); }
 .err { color: var(--status-error, #e0a030); padding: var(--space-4); }
+.stack { display: flex; flex-direction: column; height: 100%; gap: var(--space-2); }
+.grow { flex: 1; min-height: 0; }
+.expand-bar {
+  flex-shrink: 0; display: flex; align-items: center; gap: var(--space-2);
+  justify-content: flex-start; text-align: left; width: 100%;
+  background: var(--surface-2); border: var(--panel-border); border-radius: var(--panel-radius);
+  padding: var(--space-1) var(--space-3); color: var(--text-secondary);
+}
+.expand-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chev { padding: 0 var(--space-2); background: transparent; border: 0; color: var(--text-secondary); }
 </style>