doocus first ver

ui/meetus-app/src/App.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import SplitPane from '@framework/components/SplitPane.vue'
+import Panel from '@framework/components/Panel.vue'
+import VideoPlayer from '@framework/components/VideoPlayer.vue'
+import RunPicker from '@/components/RunPicker.vue'
+import TranscriptEditor from '@/components/TranscriptEditor.vue'
+import FrameSelector from '@/components/FrameSelector.vue'
+import ExportBar from '@/components/ExportBar.vue'
+import { useStore } from '@/store'
+
+const { state } = useStore()
+</script>
+
+<template>
+  <div class="app">
+    <header class="topbar">
+      <RunPicker />
+      <div class="spacer" />
+      <ExportBar />
+    </header>
+
+    <div class="body">
+      <SplitPane direction="horizontal" :initialSize="1.4" sizeMode="ratio" :min="0.4" :max="4">
+        <template #first>
+          <SplitPane direction="vertical" :initialSize="1.3" sizeMode="ratio" :min="0.3" :max="4">
+            <template #first>
+              <Panel title="Video" :status="state.playing ? 'live' : 'idle'">
+                <VideoPlayer
+                  v-if="state.videoUrl"
+                  :src="state.videoUrl"
+                  v-model:currentTime="state.currentTime"
+                  v-model:playing="state.playing"
+                  @duration="state.duration = $event"
+                />
+                <div v-else class="placeholder">
+                  {{ state.currentRunId
+                    ? 'Source video not available at the path recorded in manifest.json.'
+                    : 'Select a meeting to begin.' }}
+                </div>
+              </Panel>
+            </template>
+            <template #second>
+              <FrameSelector />
+            </template>
+          </SplitPane>
+        </template>
+        <template #second>
+          <TranscriptEditor />
+        </template>
+      </SplitPane>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 52px;
+  flex-shrink: 0;
+  padding: 0 var(--space-4);
+  background: var(--surface-1);
+  border-bottom: var(--panel-border);
+}
+.spacer {
+  flex: 1;
+}
+.body {
+  flex: 1;
+  min-height: 0;
+  padding: var(--space-2);
+}
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--space-6);
+  text-align: center;
+  color: var(--text-secondary);
+}
+</style>