Scene editor changed to flyout drawer

PlotLine/PlotLine.csproj

@@ -7,8 +7,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Dapper" Version="2.1.66" />
+    <PackageReference Include="Dapper" Version="2.1.79" />
-    <PackageReference Include="Microsoft.Data.SqlClient" Version="6.1.3" />
+    <PackageReference Include="Microsoft.Data.SqlClient" Version="7.0.1" />
   </ItemGroup>
 
 </Project>

PlotLine/Views/Timeline/Index.cshtml

@@ -51,6 +51,7 @@
     }
     int ChapterSceneColumns(ChapterTimelineViewModel chapter) => Math.Max(chapter.Scenes.Count, 1);
     int BookSceneColumns(BookTimelineViewModel book) => Math.Max(book.Chapters.Any() ? book.Chapters.Sum(ChapterSceneColumns) : 1, 1);
+    var hasSelectedScene = Model.SelectedScene is not null;
     int CharacterAppearanceCount(CharacterLaneViewModel lane) => lane.SceneSlots.Sum(slot => slot.Appearances.Count);
     bool HasLeadSceneRole(CharacterLaneViewModel lane) => lane.SceneSlots
         .SelectMany(slot => slot.Appearances)
@@ -572,7 +573,7 @@
 }
 else
 {
-    <div class="workspace-layout timeline-filtered-root" data-timeline-root>
+    <div class="workspace-layout timeline-filtered-root @(hasSelectedScene ? "inspector-drawer-open" : "inspector-drawer-closed")" data-timeline-root>
         <main class="timeline-workspace">
             <section class="timeline-shell workspace-timeline" data-timeline-section="scene-cards" style="--scene-count:@timelineColumns.Count">
                 <div class="timeline-section-header" data-collapse-target="scene-cards">
@@ -976,24 +977,22 @@ else
             </section>
         </main>
 
-        <aside class="scene-inspector-panel">
+        @if (Model.SelectedScene is not null)
-            @if (Model.SelectedScene is null)
+        {
-            {
+            <div class="timeline-inspector-resizer" data-inspector-resizer role="separator" aria-orientation="vertical" aria-label="Resize scene inspector" tabindex="0"></div>
-                <div class="inspector-empty">
+            <aside class="scene-inspector-panel" data-inspector-drawer>
-                    <p class="eyebrow">Scene inspector</p>
-                    <h2>Select a scene</h2>
-                    <p>Click a scene card to edit its summary, timing, purposes, outcomes and metric sliders without leaving the timeline.</p>
-                </div>
-            }
-            else
-            {
                 <div class="inspector-header">
-                    <p class="eyebrow">Scene inspector</p>
+                    <div>
-                    <h2>@Model.SelectedScene.SceneTitle</h2>
+                        <p class="eyebrow">Scene inspector</p>
+                        <h2>@Model.SelectedScene.SceneTitle</h2>
+                    </div>
+                    <a class="btn btn-outline-secondary btn-sm" href="@Url.Action("Index", "Timeline", new { projectId = Model.Project.ProjectID, bookId = Model.SelectedBookID })" data-inspector-close>Close</a>
                 </div>
-                <partial name="~/Views/Scenes/_SceneInspector.cshtml" model="Model.SelectedScene" />
+                <div class="scene-inspector-body">
-            }
+                    <partial name="~/Views/Scenes/_SceneInspector.cshtml" model="Model.SelectedScene" />
-        </aside>
+                </div>
+            </aside>
+        }
     </div>
 }
 

PlotLine/wwwroot/css/site.css

@@ -386,9 +386,15 @@ td.text-end {
 
 .workspace-layout {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
+  grid-template-columns: minmax(0, 1fr);
-  gap: 18px;
+  gap: 0;
   align-items: start;
+  --timeline-inspector-width: min(40vw, 560px);
+}
+
+.workspace-layout.inspector-drawer-open {
+  grid-template-columns: minmax(420px, 1fr) 10px minmax(420px, var(--timeline-inspector-width));
+  gap: 12px;
 }
 
 .timeline-workspace {
@@ -396,6 +402,38 @@ td.text-end {
   max-width: 100%;
 }
 
+.timeline-inspector-resizer {
+  position: sticky;
+  top: 76px;
+  z-index: 25;
+  width: 10px;
+  height: calc(100vh - 96px);
+  border-radius: 999px;
+  cursor: col-resize;
+  background: linear-gradient(180deg, rgba(47, 111, 99, 0.16), rgba(47, 111, 99, 0.04));
+}
+
+.timeline-inspector-resizer::before {
+  content: "";
+  display: block;
+  width: 2px;
+  height: 48px;
+  margin: 18px auto;
+  border-radius: 999px;
+  background: var(--plotline-accent);
+  opacity: 0.55;
+}
+
+.timeline-inspector-resizer:hover,
+.timeline-inspector-resizer:focus-visible {
+  background: rgba(47, 111, 99, 0.16);
+}
+
+body.timeline-inspector-resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
 .pacing-panel {
   margin-top: 14px;
   margin-bottom: 0;
@@ -1201,30 +1239,42 @@ td.text-end {
 .scene-inspector-panel {
   position: sticky;
   top: 76px;
+  display: flex;
+  flex-direction: column;
   max-height: calc(100vh - 96px);
-  overflow: auto;
+  min-width: 0;
+  overflow: hidden;
   border: 1px solid var(--plotline-line);
   border-radius: 8px;
-  padding: 16px;
   background: #fff;
   box-shadow: 0 14px 32px rgba(30, 37, 43, 0.08);
 }
 
-.inspector-header,
+.inspector-header {
-.inspector-empty {
+  position: sticky;
-  margin-bottom: 14px;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--plotline-line);
+  padding: 16px;
+  background: #fff;
 }
 
-.inspector-header h2,
+.scene-inspector-body {
-.inspector-empty h2 {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 16px;
+}
+
+.inspector-header h2 {
   margin: 0;
   font-size: 1.25rem;
 }
 
-.inspector-empty p:last-child {
-  color: var(--plotline-muted);
-}
-
 .scene-inspector-form {
   display: grid;
   gap: 14px;
@@ -3429,16 +3479,30 @@ body.dragging-location [data-drag-type="location"] {
   }
 }
 
-@media (max-width: 1100px) {
+@media (max-width: 900px) {
-  .workspace-layout {
+  .workspace-layout,
+  .workspace-layout.inspector-drawer-open {
     grid-template-columns: 1fr;
+    gap: 14px;
+  }
+
+  .timeline-inspector-resizer {
+    display: none;
   }
 
   .scene-inspector-panel {
     position: static;
     max-height: none;
+    overflow: visible;
   }
 
+  .scene-inspector-body {
+    max-height: none;
+    overflow: visible;
+  }
+}
+
+@media (max-width: 1100px) {
   .metric-graph-row {
     grid-template-columns: 1fr;
   }

PlotLine/wwwroot/js/site.js

@@ -536,6 +536,7 @@
   const densityKey = "plotline.timeline.density";
   const zoomKey = "plotline.timeline.zoom";
   const scrollKey = "plotline.timeline.pending-scroll";
+  const drawerWidthKey = "plotline.timeline.inspectorWidth";
   const scrollContainerSelector = [
     ".timeline-shell",
     ".plot-lane-board",
@@ -546,6 +547,9 @@
   ].join(",");
   const densityValues = ["compact", "comfortable", "expanded"];
   const zoomValues = ["book", "chapter", "scene-detail"];
+  const inspectorDrawer = root.querySelector("[data-inspector-drawer]");
+  const inspectorResizer = root.querySelector("[data-inspector-resizer]");
+  const inspectorClose = root.querySelector("[data-inspector-close]");
 
   const readSet = (key) => {
     try {
@@ -560,6 +564,72 @@
 
   const getScrollContainers = () => [...root.querySelectorAll(scrollContainerSelector)];
 
+  const drawerWidthBounds = () => {
+    const availableWidth = root.getBoundingClientRect().width || window.innerWidth;
+    const minimum = Math.min(420, Math.max(320, availableWidth - 360));
+    const maximum = Math.max(minimum, Math.min(availableWidth * 0.65, availableWidth - 420));
+    return { minimum, maximum, defaultWidth: Math.max(minimum, Math.min(maximum, availableWidth * 0.4)) };
+  };
+
+  const applyDrawerWidth = (width) => {
+    if (!inspectorDrawer) {
+      return;
+    }
+
+    const { minimum, maximum, defaultWidth } = drawerWidthBounds();
+    const nextWidth = Math.max(minimum, Math.min(maximum, Number(width) || defaultWidth));
+    root.style.setProperty("--timeline-inspector-width", `${Math.round(nextWidth)}px`);
+  };
+
+  if (inspectorDrawer) {
+    applyDrawerWidth(localStorage.getItem(drawerWidthKey));
+    window.addEventListener("resize", () => applyDrawerWidth(localStorage.getItem(drawerWidthKey)));
+  }
+
+  inspectorResizer?.addEventListener("pointerdown", (event) => {
+    event.preventDefault();
+    document.body.classList.add("timeline-inspector-resizing");
+    inspectorResizer.setPointerCapture(event.pointerId);
+
+    const resize = (moveEvent) => {
+      const rootRight = root.getBoundingClientRect().right;
+      const nextWidth = rootRight - moveEvent.clientX;
+      applyDrawerWidth(nextWidth);
+    };
+
+    const finish = () => {
+      document.body.classList.remove("timeline-inspector-resizing");
+      const width = Math.round(inspectorDrawer?.getBoundingClientRect().width || 0);
+      if (width > 0) {
+        localStorage.setItem(drawerWidthKey, String(width));
+      }
+      inspectorResizer.removeEventListener("pointermove", resize);
+      inspectorResizer.removeEventListener("pointerup", finish);
+      inspectorResizer.removeEventListener("pointercancel", finish);
+    };
+
+    inspectorResizer.addEventListener("pointermove", resize);
+    inspectorResizer.addEventListener("pointerup", finish);
+    inspectorResizer.addEventListener("pointercancel", finish);
+  });
+
+  inspectorClose?.addEventListener("click", (event) => {
+    event.preventDefault();
+    const url = new URL(window.location.href);
+    const focusType = url.searchParams.get("FocusType") || url.searchParams.get("focusType");
+    url.searchParams.delete("SelectedSceneID");
+    url.searchParams.delete("selectedSceneId");
+    url.searchParams.delete("selectedsceneid");
+    if (!focusType || focusType.toLowerCase() === "scene") {
+      url.searchParams.delete("FocusType");
+      url.searchParams.delete("focusType");
+      url.searchParams.delete("FocusID");
+      url.searchParams.delete("focusId");
+    }
+    saveScrollPosition();
+    window.location.href = url.toString();
+  });
+
   const saveScrollPosition = () => {
     try {
       sessionStorage.setItem(scrollKey, JSON.stringify({