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);

src/components/Timeline.vue

@@ -709,9 +709,6 @@ function onClipBlockContextMenu(e: MouseEvent, ci: ClipInstance) {
   store.removeClipInstance(ci.id)
 }
 
-function exitClip() {
-  store.exitClip()
-}
 const trackMenu = ref<TrackMenuState | null>(null)
 const trackMenuRef = ref<HTMLDivElement | null>(null)
 
@@ -1027,15 +1024,6 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <div v-if="inClipEdit" class="clip-breadcrumb">
-      <button class="breadcrumb-btn" @click="exitClip">
-        ← Haupt-Timeline
-      </button>
-      <span class="breadcrumb-current">
-        <PhFilmStrip :size="11" />
-        {{ store.activeClip?.name ?? '' }}
-      </span>
-    </div>
 
     <div
       v-if="menu"
@@ -1722,42 +1710,6 @@ onBeforeUnmount(() => {
   color: var(--accent);
 }
 
-.clip-breadcrumb {
-  position: absolute;
-  top: 4px;
-  left: 12px;
-  z-index: 15;
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  padding: 4px 10px 4px 8px;
-  background: var(--panel);
-  border: 1px solid var(--border-strong);
-  border-radius: 999px;
-  box-shadow: var(--shadow-sm);
-  font-size: 11px;
-}
-
-.breadcrumb-btn {
-  padding: 2px 8px;
-  background: transparent;
-  border: none;
-  color: var(--text-dim);
-  font-size: 11px;
-  border-radius: 999px;
-}
-
-.breadcrumb-btn:hover {
-  color: var(--accent);
-}
-
-.breadcrumb-current {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--accent);
-  font-weight: 500;
-}
 
 .kf-menu {
   position: fixed;

todo

@@ -38,7 +38,7 @@ für user-interaktionen (wie neues text-objekt) brauchen wir eigene popups. kein
 
 <button data-v-228c0a9d="" class="breadcrumb-btn"> ← Haupt-Timeline </button> verdeckt die timeline switches. das muss etwas weiter oben am bottom des asset asides angezeigt werden
 
-
+den zurück pfeil bitte als phosphor icon machen