doocus update and meeting list export

ui/doocus-app/src/App.vue

@@ -1,40 +1,39 @@
 <script setup lang="ts">
+import { onMounted } from 'vue'
 import Panel from '@framework/components/Panel.vue'
 import SplitPane from '@framework/components/SplitPane.vue'
-import DocPicker from '@/components/DocPicker.vue'
-import DocViewer from '@/components/DocViewer.vue'
-import MetadataPanel from '@/components/MetadataPanel.vue'
+import FileTree from '@/components/FileTree.vue'
+import DocDetail from '@/components/DocDetail.vue'
 import ExportBar from '@/components/ExportBar.vue'
+import { store, loadTree } from '@/store'
+
+onMounted(loadTree)
 </script>
 
 <template>
   <div class="app">
     <header class="topbar">
       <span class="brand">doocus</span>
+      <span v-if="store.counts.total" class="counts">
+        {{ store.counts.total }} files · {{ store.counts.extracted }} extracted ·
+        {{ store.counts.link }} linked · {{ store.counts.meeting }} meetings
+      </span>
       <span class="spacer" />
       <ExportBar />
     </header>
 
     <main class="body">
-      <SplitPane :initial-size="0.9" :min="0.5" :max="2">
+      <div v-if="store.error" class="err">{{ store.error }}</div>
+      <SplitPane v-else direction="vertical" :initial-size="0.9" :min="0.3" :max="3">
         <template #first>
-          <Panel title="Documents">
-            <DocPicker />
+          <Panel title="Tree">
+            <FileTree :items="store.tree" />
           </Panel>
         </template>
         <template #second>
-          <SplitPane :initial-size="2.2" :min="1" :max="5">
-            <template #first>
-              <Panel title="Content">
-                <DocViewer />
-              </Panel>
-            </template>
-            <template #second>
-              <Panel title="Metadata">
-                <MetadataPanel />
-              </Panel>
-            </template>
-          </SplitPane>
+          <Panel title="File">
+            <DocDetail />
+          </Panel>
         </template>
       </SplitPane>
     </main>
@@ -42,30 +41,15 @@ import ExportBar from '@/components/ExportBar.vue'
 </template>
 
 <style scoped>
-.app {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
+.app { display: flex; flex-direction: column; height: 100%; }
 .topbar {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
+  display: flex; align-items: center; gap: var(--space-3);
   padding: var(--space-2) var(--space-3);
-  background: var(--surface-1);
-  border-bottom: var(--panel-border);
-  flex-shrink: 0;
-}
-.brand {
-  font-weight: 700;
-  letter-spacing: 0.02em;
-}
-.spacer {
-  flex: 1;
-}
-.body {
-  flex: 1;
-  min-height: 0;
-  padding: var(--space-2);
+  background: var(--surface-1); border-bottom: var(--panel-border); flex-shrink: 0;
 }
+.brand { font-weight: 700; letter-spacing: 0.02em; }
+.counts { color: var(--text-secondary); font-size: var(--font-size-sm); }
+.spacer { flex: 1; }
+.body { flex: 1; min-height: 0; padding: var(--space-2); }
+.err { color: var(--status-error, #e0a030); padding: var(--space-4); }
 </style>