bak

src/App.vue

@@ -3,7 +3,9 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 import {
   PhArrowClockwise,
   PhArrowCounterClockwise,
+  PhArrowLeft,
   PhExport,
+  PhFilmStrip,
   PhFolderOpen,
   PhFloppyDisk,
   PhGearSix,
@@ -262,7 +264,19 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown))
         </button>
       </div>
     </header>
-    <aside class="sidebar"><AssetSidebar /></aside>
+    <aside class="sidebar">
+      <div class="sidebar-scroll"><AssetSidebar /></div>
+      <div v-if="store.activeClipId" class="scope-footer">
+        <button class="scope-back" @click="store.exitClip">
+          <PhArrowLeft :size="12" weight="bold" />
+          Haupt-Timeline
+        </button>
+        <span class="scope-current" :title="store.activeClip?.name ?? ''">
+          <PhFilmStrip :size="12" />
+          {{ store.activeClip?.name ?? '' }}
+        </span>
+      </div>
+    </aside>
     <main class="stage"><CanvasStage /></main>
     <aside class="properties"><PropertiesPanel /></aside>
     <footer class="timeline"><Timeline /></footer>
@@ -391,9 +405,61 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown))
   grid-area: side;
   background: var(--panel);
   border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.sidebar-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow: auto;
 }
 
+.scope-footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-top: 1px solid var(--border-strong);
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 11px;
+  min-width: 0;
+}
+
+.scope-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim-strong);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.scope-back:hover {
+  background: var(--panel-alt);
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+.scope-current {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
 .stage {
   grid-area: stage;
   background: var(--bg);