From 5ad736a8d8b29b64e1a1d1235ae3ab2c17165f1f Mon Sep 17 00:00:00 2001
From: hannahildebrandt <accounts@hannahildebrandt.com>
Date: Sun, 26 Jan 2025 22:02:27 -0800
Subject: [PATCH 1/5] Updated the CSS for ProjectPicker, ExplorerView,
 SceneList, NewSceneField, and Tab

---
 .vscode/settings.json                   |  4 +-
 src/view/explorer/ExplorerView.svelte   |  7 ++-
 src/view/explorer/NewSceneField.svelte  | 18 +++---
 src/view/explorer/ProjectDetails.svelte |  4 +-
 src/view/explorer/ProjectPicker.svelte  | 41 +++++++++-----
 src/view/explorer/SceneList.svelte      | 28 ++++++++--
 src/view/explorer/Tab.svelte            | 74 +++++++++++++++++++++++--
 7 files changed, 132 insertions(+), 44 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index ad92582..8d9c9bc 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "editor.formatOnSave": true
-}
+  "editor.formatOnSave": false
+}
\ No newline at end of file
diff --git a/src/view/explorer/ExplorerView.svelte b/src/view/explorer/ExplorerView.svelte
index e92a519..2652a68 100644
--- a/src/view/explorer/ExplorerView.svelte
+++ b/src/view/explorer/ExplorerView.svelte
@@ -109,11 +109,12 @@
   }
 
   .tab-list {
-    margin: var(--size-4-1) 0;
-    border-bottom: var(--border-width) solid var(--text-muted);
+    margin: 0;
+    font-size: 0; /* To remove spacing between tabs */
   }
 
   .tab-panel-container {
-    padding: 0;
+    background: var(--background-primary);
+    padding: var(--size-4-1) var(--size-4-2);
   }
 </style>
diff --git a/src/view/explorer/NewSceneField.svelte b/src/view/explorer/NewSceneField.svelte
index 27fc366..3268e7a 100644
--- a/src/view/explorer/NewSceneField.svelte
+++ b/src/view/explorer/NewSceneField.svelte
@@ -38,7 +38,7 @@
   <input
     id="new-scene"
     type="text"
-    placeholder="New Scene…"
+    placeholder="New Scene"
     bind:value={newSceneName}
     bind:this={newSceneInput}
     on:keydown={(e) => {
@@ -59,24 +59,20 @@
 <style>
   .new-scene-container {
     margin: 0;
-    border-top: var(--border-width) solid var(--text-muted);
-    padding: var(--size-4-1) 0;
+    padding: var(--size-4-2) 0;
   }
 
   #new-scene {
-    padding: 0;
-    border: 0;
-    background: inherit;
-    font-size: 1em;
-    line-height: var(--h3-line-height);
     width: 100%;
+    background: var(--background-modifier-form-field);
+    border: var(--input-border-width) solid var(--background-modifier-border);
+    border-radius: var(--input-radius);
+    font-size: var(--font-ui-small);
+    padding: var(--size-4-1) var(--size-4-2);
   }
 
   #new-scene.invalid {
     color: var(--text-error);
   }
 
-  #new-scene::placeholder {
-    font-style: italic;
-  }
 </style>
diff --git a/src/view/explorer/ProjectDetails.svelte b/src/view/explorer/ProjectDetails.svelte
index 911c68b..9b9a685 100644
--- a/src/view/explorer/ProjectDetails.svelte
+++ b/src/view/explorer/ProjectDetails.svelte
@@ -316,10 +316,10 @@
   }
 
   h4 {
-    font-weight: bold;
+    font-size: var(--font-ui-medium);
+    font-weight: var(--font-semibold);
     margin: 0;
     padding: 0;
-    font-size: 1em;
     margin-right: var(--size-4-1);
   }
 
diff --git a/src/view/explorer/ProjectPicker.svelte b/src/view/explorer/ProjectPicker.svelte
index c20b08e..ad331df 100644
--- a/src/view/explorer/ProjectPicker.svelte
+++ b/src/view/explorer/ProjectPicker.svelte
@@ -91,8 +91,8 @@
     {/if}
   {:else}
     <p>
-      To begin, find or create a folder somewhere in your vault in which 
-      you would like to create your novel. Right-click it and select 
+      To begin, find or create a folder somewhere in your vault in which you
+      would like to create your novel. Right-click it and select
       <code>Create Longform Project.</code>
     </p>
   {/if}
@@ -105,10 +105,11 @@
 
   select {
     background-color: transparent;
-    border: none;
-    padding: 0;
-    margin: 0;
+    border: var(--input-border-width) solid var(--background-modifier-border);
+    border-radius: var(--input-radius);
+    padding: var(--size-4-2);
     width: 100%;
+    height: 100%;
     font-family: inherit;
     font-size: 1em;
     cursor: inherit;
@@ -122,19 +123,29 @@
   }
 
   .select > select {
-    color: var(--text-accent);
+    background-color: var(--background-secondary);
+    color: var(--text-muted);
+    appearance: auto;
   }
 
   .select > select:hover {
-    text-decoration: underline;
-    color: var(--text-accent-hover);
+    color: var(--text-normal);
+    box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
+    border-color: var(--background-modifier-border-focus);
+    transition:
+      box-shadow 0.15s ease-in-out,
+      border 0.15s ease-in-out;
   }
 
-  #project-picker {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: wrap;
+  .select select option {
+    font-size: var(--nav-item-size);
+    padding: var(--nav-item-padding);
+  }
+
+  .select select option:checked,
+  .select select option:hover {
+    box-shadow: 0 0 10px 100px var(--background-modifier-hover) inset;
+    color: inherit;
   }
 
   .right-arrow {
@@ -150,9 +161,9 @@
   }
 
   .current-draft-path {
-    color: var(--text-muted);
+    color: var(--text-faint);
     font-size: var(--font-smallest);
-    padding: 0 0 var(--size-4-1) 0;
+    padding: 0 0 var(--size-4-1) var(--size-4-3);
   }
 
   .current-draft-path:hover {
diff --git a/src/view/explorer/SceneList.svelte b/src/view/explorer/SceneList.svelte
index 7c66e39..6fe8222 100644
--- a/src/view/explorer/SceneList.svelte
+++ b/src/view/explorer/SceneList.svelte
@@ -356,8 +356,8 @@
       class="sortable-scene-list"
     >
       <div
-        class="scene-container{item.hidden ? ' hidden' : ''}"
-        style="padding-left: calc({item.indent} * var(--longform-explorer-indent-size));"
+        class="scene-container{item.hidden ? ' hidden' : ''}{item.collapsible ? ' collapsible' : ''}"
+        style="padding-left: calc(({item.indent} * var(--longform-explorer-indent-size)) + 6px {item.collapsible ? '' : '+ var(--size-4-4)'});"
         class:selected={$activeFile && $activeFile.path === item.path}
         on:contextmenu|preventDefault={onContext}
         data-scene-path={item.path}
@@ -463,11 +463,27 @@
     border: var(--border-width) solid transparent;
     border-radius: var(--radius-s);
     cursor: pointer;
-    color: var(--text-muted);
-    font-size: 1em;
-    line-height: 1.1em;
+    color: var(--nav-item-color);
+    font-size: var(--nav-item-size);
+    font-weight: var(--nav-item-weight);
+    line-height: var(--line-height-tight);
+    padding: var(--size-4-1) var(--size-4-2);
+    white-space: normal;
+  }
+
+  .scene-container.collapsible {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border: var(--border-width) solid transparent;
+    border-radius: var(--radius-s);
+    cursor: pointer;
+    color: var(--nav-item-color);
+    font-size: var(--nav-item-size);
+    font-weight: var(--nav-item-weight);
+    line-height: var(--line-height-tight);
+    padding: var(--size-4-1) var(--size-4-2);
     white-space: normal;
-    padding: var(--size-2-1) 0;
   }
 
   .scene-container.hidden {
diff --git a/src/view/explorer/Tab.svelte b/src/view/explorer/Tab.svelte
index ac3008e..9d13682 100644
--- a/src/view/explorer/Tab.svelte
+++ b/src/view/explorer/Tab.svelte
@@ -9,6 +9,61 @@
   class:selected={$selectedTab === tab}
   on:click={() => selectedTab.set(tab)}
 >
+  {#if tab == "Scenes"}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="clickable-icon lucide lucide-gallery-horizontal-end"
+      ><path d="M2 7v10" /><path d="M6 5v14" /><rect
+        width="12"
+        height="18"
+        x="10"
+        y="3"
+        rx="2"
+      /></svg
+    >
+  {/if}
+  {#if tab == "Project"}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="clickable-icon lucide lucide-book-text"
+      ><path
+        d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"
+      /><path d="M8 11h8" /><path d="M8 7h6" /></svg
+    >
+  {/if}
+  {#if tab == "Compile"}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="clickable-icon lucide lucide-blocks"
+      ><rect width="7" height="7" x="14" y="3" rx="1" /><path
+        d="M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3"
+      /></svg
+    >
+  {/if}
   {tab}
 </button>
 
@@ -17,15 +72,24 @@
     background: none;
     border: none;
     border-bottom: none;
-    border-radius: 0;
+    border-radius: var(--tab-radius-active);
+    padding: 0 1em 0 0.4em;
     box-shadow: none;
     margin: 0;
-    color: var(--interactive-accent);
-    font-size: 1em;
+    color: var(--tab-text-color-focused);
+    font-size: var(--tab-font-size);
+    font-weight: var(--tab-font-weight);
+    white-space: nowrap;
+    border-right: 1px solid var(--tab-outline-color);
+  }
+
+  .tab-button:hover {
+    color: var(--tab-text-color-focused);
+    background-color: var(--background-modifier-hover);
   }
 
   .tab-button.selected {
-    border-bottom: var(--size-2-1) solid var(--text-muted);
-    color: var(--text-accent);
+    background-color: var(--tab-background-active);
+    color: var(--tab-text-color-focused-active);
   }
 </style>

From 84a5486c84d8db827ab61bf06ec4157b93b5288b Mon Sep 17 00:00:00 2001
From: hannahildebrandt <accounts@hannahildebrandt.com>
Date: Fri, 7 Feb 2025 21:56:36 -0800
Subject: [PATCH 2/5] Project picker and project details

---
 src/view/components/Disclosure.svelte   | 12 ++--
 src/view/explorer/ProjectDetails.svelte | 93 +++++++++++++------------
 src/view/explorer/ProjectPicker.svelte  | 23 +-----
 3 files changed, 55 insertions(+), 73 deletions(-)

diff --git a/src/view/components/Disclosure.svelte b/src/view/components/Disclosure.svelte
index de999e1..18a780c 100644
--- a/src/view/components/Disclosure.svelte
+++ b/src/view/components/Disclosure.svelte
@@ -5,13 +5,7 @@
 </script>
 
 <span class:collapsed class={className} on:click>
-  <svg viewBox="0 0 100 100" class="right-triangle" width="8" height="8"
-    ><path
-      fill="currentColor"
-      stroke="currentColor"
-      d="M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z"
-    /></svg
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"><path d="M3 8L12 17L21 8"></path></svg>
 </span>
 
 <style>
@@ -20,6 +14,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    width: var(--size-4-3);
+    color: var(--icon-color);
+    margin-left: calc(var(--size-4-1) * -1);
+    margin-top: calc(var(--size-4-1) * -.25);
   }
 
   .collapsed .right-triangle {
diff --git a/src/view/explorer/ProjectDetails.svelte b/src/view/explorer/ProjectDetails.svelte
index 9b9a685..3d8d191 100644
--- a/src/view/explorer/ProjectDetails.svelte
+++ b/src/view/explorer/ProjectDetails.svelte
@@ -184,8 +184,8 @@
           showMetdata = !showMetdata;
         }}
       >
-        <h4>Project Metadata</h4>
         <Disclosure collapsed={!showMetdata} />
+        <h4>Project Metadata</h4>
       </div>
       {#if showMetdata}
         <div>
@@ -197,38 +197,34 @@
             on:change={titleChanged}
           />
           {#if $selectedDraft.format === "scenes"}
-            <div style="margin-top: var(--size-4-2);">
-              <label for="longform-project-scene-folder">Scene Folder</label>
-              <input
-                id="longform-project-scene-folder"
-                type="text"
-                value={$selectedDraft.sceneFolder}
-                bind:this={sceneFolderInput}
-                on:blur={sceneFolderChanged}
-              />
-              <p class="longform-project-warning">
-                Changing scene folder does not move scenes. If you’re moving
-                scenes to a new folder, move them in your vault first, then
-                change this setting.
-              </p>
-            </div>
-            <div style="margin-top: var(--size-4-2);">
-              <label for="longform-project-scene-template">Scene Template</label
-              >
-              <input
-                id="longform-project-scene-template"
-                type="text"
-                value={$selectedDraft.sceneTemplate}
-                bind:this={sceneTemplateInput}
-                on:blur={sceneTemplateChanged}
-              />
-              <p class="longform-project-warning">
-                This file will be used as a template when creating new scenes
-                via the New Scene… field. If you use a templating plugin
-                (Templater or the core plugin) it will be used to process this
-                template.
-              </p>
-            </div>
+            <label for="longform-project-scene-folder">Scene Folder</label>
+            <input
+              id="longform-project-scene-folder"
+              type="text"
+              value={$selectedDraft.sceneFolder}
+              bind:this={sceneFolderInput}
+              on:blur={sceneFolderChanged}
+            />
+            <p class="longform-project-warning">
+              Changing scene folder does not move scenes. If you’re moving
+              scenes to a new folder, move them in your vault first, then
+              change this setting.
+            </p>
+            <label for="longform-project-scene-template">Scene Template</label
+            >
+            <input
+              id="longform-project-scene-template"
+              type="text"
+              value={$selectedDraft.sceneTemplate}
+              bind:this={sceneTemplateInput}
+              on:blur={sceneTemplateChanged}
+            />
+            <p class="longform-project-warning">
+              This file will be used as a template when creating new scenes
+              via the New Scene… field. If you use a templating plugin
+              (Templater or the core plugin) it will be used to process this
+              template.
+            </p>
           {/if}
         </div>
       {/if}
@@ -246,8 +242,8 @@
         showWordCount = !showWordCount;
       }}
     >
-      <h4>Word Count</h4>
       <Disclosure collapsed={!showWordCount} />
+      <h4>Word Count</h4>
     </div>
     {#if showWordCount}
       <div>
@@ -287,8 +283,8 @@
           showDrafts = !showDrafts;
         }}
       >
-        <h4>Drafts</h4>
         <Disclosure collapsed={!showDrafts} />
+        <h4>Drafts</h4>
       </div>
       <button type="button" on:click={onNewDraft}>
         <Icon iconName="plus-with-circle" />
@@ -305,6 +301,12 @@
     margin-top: var(--size-4-4);
     padding-bottom: var(--size-4-4);
     border-bottom: var(--border-width) solid var(--background-modifier-border);
+    padding-left: var(--size-4-8);
+  }
+
+  .longform-project-section .right-triangle {
+    margin-left: var(--size-4-1);
+    margin-right: var(--size-4-2);
   }
 
   .longform-project-details-section-header {
@@ -313,32 +315,33 @@
     justify-content: start;
     align-items: center;
     cursor: pointer;
+    margin-left: calc(var(--size-4-6) * -1);
   }
 
   h4 {
     font-size: var(--font-ui-medium);
-    font-weight: var(--font-semibold);
-    margin: 0;
-    padding: 0;
-    margin-right: var(--size-4-1);
+    color: var(--text-normal);
+    user-select: none;
+    font-weight: inherit;
+    margin: 0 0 0 var(--size-4-4);
   }
 
   input {
     width: 100%;
-    color: var(--text-accent);
   }
 
   label {
-    font-weight: bold;
-    font-size: var(--font-smaller);
+    display: block;
+    font-size: var(--font-ui-smaller);
     color: var(--text-muted);
-    margin-top: var(--size-4-2);
+    margin-top: var(--size-4-4);
+    line-height: var(--line-height-tight);
   }
 
   p.longform-project-warning {
-    color: var(--text-muted);
+    color: var(--text-faint);
     font-size: var(--font-smallest);
-    margin: var(--size-2-1) 0 0 0;
+    margin: var(--size-2-1) 0 0 var(--size-2-1);
     line-height: normal;
   }
 
diff --git a/src/view/explorer/ProjectPicker.svelte b/src/view/explorer/ProjectPicker.svelte
index ad331df..615ccee 100644
--- a/src/view/explorer/ProjectPicker.svelte
+++ b/src/view/explorer/ProjectPicker.svelte
@@ -63,6 +63,7 @@
       <div class="select" id="select-projects">
         <select
           name="projects"
+          class="dropdown"
           value={$selectedDraft ? $selectedDraft.title : projectOptions[0]}
           on:change={projectSelected}
         >
@@ -118,18 +119,9 @@
     box-shadow: none;
   }
 
-  .select {
-    cursor: pointer;
-  }
-
-  .select > select {
-    background-color: var(--background-secondary);
-    color: var(--text-muted);
-    appearance: auto;
-  }
-
   .select > select:hover {
     color: var(--text-normal);
+    background-color: var(--background-modifier-hover);
     box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
     border-color: var(--background-modifier-border-focus);
     transition:
@@ -137,17 +129,6 @@
       border 0.15s ease-in-out;
   }
 
-  .select select option {
-    font-size: var(--nav-item-size);
-    padding: var(--nav-item-padding);
-  }
-
-  .select select option:checked,
-  .select select option:hover {
-    box-shadow: 0 0 10px 100px var(--background-modifier-hover) inset;
-    color: inherit;
-  }
-
   .right-arrow {
     display: grid;
   }

From 427c1ff281a06f1f1d2628736e7568e2b4bea9a2 Mon Sep 17 00:00:00 2001
From: hannahildebrandt <accounts@hannahildebrandt.com>
Date: Wed, 12 Feb 2025 13:46:10 -0800
Subject: [PATCH 3/5] Updated CSS on Compile tab

---
 src/view/compile/CompileStepView.svelte | 53 +++++++++++++++----------
 src/view/compile/CompileView.svelte     | 48 +++++++++++++++++-----
 src/view/explorer/ExplorerView.svelte   |  7 +++-
 src/view/explorer/ProjectDetails.svelte |  8 +++-
 4 files changed, 80 insertions(+), 36 deletions(-)

diff --git a/src/view/compile/CompileStepView.svelte b/src/view/compile/CompileStepView.svelte
index 9f42d33..fb16887 100644
--- a/src/view/compile/CompileStepView.svelte
+++ b/src/view/compile/CompileStepView.svelte
@@ -42,7 +42,7 @@
   {:else}
     <div class="longform-compile-step-title-outer">
       <div class="longform-compile-step-title-container">
-        <h4>{ordinal}. {step.description.name}</h4>
+        <h4><span class="longform-compile-step-number">{ordinal}</span>{step.description.name}</h4>
         {#if calculatedKind !== null}
           <div
             class="longform-step-kind-pill"
@@ -100,10 +100,11 @@
 
 <style>
   .longform-compile-step {
-    background-color: var(--background-modifier-form-field);
+    background-color: var(--background-modifier-border);
+    border: 1px solid var(--background-modifier-border);
     border-radius: var(--radius-s);
-    padding: var(--size-4-1) var(--size-4-1) var(--size-4-3) var(--size-4-1);
-    margin-bottom: var(--size-4-4);
+    padding: 0;
+    margin: var(--size-4-4) 0;
   }
 
   .longform-compile-step-title-outer {
@@ -118,11 +119,12 @@
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
+    font-size: var(--font-ui-smaller);
   }
 
   .longform-compile-step-title-container h4 {
     display: inline-block;
-    margin: 0 var(--size-4-2) 0 0;
+    margin: var(--size-4-1) var(--size-4-2) var(--size-4-1) 0;
     padding: 0;
   }
 
@@ -130,47 +132,60 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--text-accent);
+    background-color: color-mix(in srgb, var(--text-accent) 50%, var(--background-modifier-border) 50%);
     color: var(--text-on-accent);
     border-radius: var(--radius-l);
     font-size: var(--font-smallest);
     font-weight: bold;
-    padding: var(--size-4-1);
+    padding: var(--size-4-1) var(--size-4-2);
     margin-right: var(--size-4-1);
     height: var(--h1-line-height);
   }
 
+  .longform-compile-step-number {
+    color: var(--text-faint);
+    display: inline-block;
+    width: var(--size-4-6);
+    padding-left: var(--size-4-1);
+  }
+
   .longform-remove-step-button {
     display: flex;
     width: var(--size-4-5);
-    margin: 0;
+    height: 100%;
+    margin: 1px;
     align-items: center;
     justify-content: center;
     font-weight: bold;
+    background: var(--background-modifier-error);
   }
 
   .longform-compile-step p {
     margin: 0;
-    padding: 0;
+    background: var(--background-primary);
   }
 
   .longform-compile-step-description {
     font-size: var(--font-smallest);
     color: var(--text-muted);
-    margin-top: var(--size-2-1);
+    padding: var(--size-4-2) var(--size-4-1) var(--size-4-2) var(--size-4-6);
   }
 
+    .longform-compile-step-description .solo {
+      padding-right: var(--size-4-6);
+    }
+
   .longform-compile-step-options {
     padding: var(--size-4-2) 0;
+    background: var(--background-primary);
   }
 
   .longform-compile-step-options > div {
-    border-left: var(--border-width) solid var(--interactive-accent);
-    padding: 0 var(--size-4-2);
+    margin: 0 var(--size-4-2) 0 var(--size-4-6)
   }
 
   .longform-compile-step-option {
-    margin-top: var(--size-4-2);
+    margin: 0 var(--size-4-4) var(--size-4-4) 0;
   }
 
   .longform-compile-step-option label {
@@ -179,10 +194,6 @@
     font-size: var(--font-smallest);
   }
 
-  .longform-compile-step-option input {
-    color: var(--text-accent);
-  }
-
   .longform-compile-step-checkbox-container {
     display: flex;
     flex-direction: row;
@@ -191,13 +202,11 @@
   }
 
   .longform-compile-step-option input[type="text"] {
-    color: var(--text-accent);
     margin: 0 0 var(--size-4-1) 0;
     width: 100%;
   }
 
   .longform-compile-step-option input[type="checkbox"] {
-    color: var(--text-accent);
     margin: 0 var(--size-4-2) var(--size-2-1) 0;
   }
 
@@ -207,7 +216,7 @@
 
   .longform-compile-step-option-description {
     font-size: var(--font-smallest);
-    line-height: 90%;
+    line-height: 1em;
     color: var(--text-faint);
   }
 
@@ -218,6 +227,6 @@
   .longform-compile-step-error {
     color: var(--text-error);
     font-size: var(--font-smallest);
-    line-height: 90%;
+    line-height: 1em;
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/view/compile/CompileView.svelte b/src/view/compile/CompileView.svelte
index 6782d87..b52edca 100644
--- a/src/view/compile/CompileView.svelte
+++ b/src/view/compile/CompileView.svelte
@@ -348,15 +348,24 @@
       </div>
     {/if}
 
-    <p>
-      Compile workflows run their steps in order.<br /><b>Scene</b> workflows
-      run once per scene.<br /><b>Join</b> workflows run once and combine the
-      rest of your scene steps into a single manuscript.<br /><b>Manuscript</b>
-      steps run once on the joined manuscript.<br />Drag to rearrange.
-      <a href="https://github.com/kevboh/longform/blob/main/docs/COMPILE.md"
-        >Documentation here.</a
+    <ul class="longform-compile-instructions">
+      <li>
+        Compile workflows run their steps in order.
+      </li>
+      <li>
+        <strong>Scene</strong> workflows run once per scene.
+      </li>
+      <li>
+        <strong>Join</strong> workflows run once and combine the rest of your scene steps into a single manuscript.
+      </li>
+      <li>
+        <strong>Manuscript</strong> steps run once on the joined manuscript.
+      </li>
+      <li>
+        Drag to rearrange. <a href="https://github.com/kevboh/longform/blob/main/docs/COMPILE.md">Documentation here.</a
       >
-    </p>
+      </li>
+    </ul>
 
     <div class="longform-compile-run-container">
       {#if $currentWorkflow && $currentWorkflow.steps.length > 0}
@@ -378,13 +387,16 @@
 
 <style>
   .longform-workflow-picker-container {
-    margin-bottom: var(--size-4-8);
-    padding: var(--size-4-2) 0;
-    border-bottom: var(--border-width) solid var(--background-modifier-border);
+    padding: var(--size-4-2);
+    background: var(--background-primary);
     display: flex;
     flex-direction: column;
   }
 
+  #longform-workflows {
+    color: var(--color-accent-2);
+  }
+
   .longform-workflow-picker {
     display: flex;
     flex-direction: row;
@@ -457,6 +469,20 @@
     color: var(--text-accent-hover);
   }
 
+  .longform-compile-instructions {
+    font-size: var(--font-smallest);
+    padding: var(--size-4-4) var(--size-4-4) var(--size-4-1) var(--size-4-8);
+    color: var(--text-muted);
+  }
+  
+    .longform-compile-instructions li {
+      margin-bottom: var(--size-4-1)
+    }
+
+    .longform-compile-instructions strong {
+      color: var(--color-accent-2);
+    }
+
   .compile-button {
     font-weight: bold;
     background-color: var(--interactive-accent);
diff --git a/src/view/explorer/ExplorerView.svelte b/src/view/explorer/ExplorerView.svelte
index 2652a68..bdb902a 100644
--- a/src/view/explorer/ExplorerView.svelte
+++ b/src/view/explorer/ExplorerView.svelte
@@ -67,7 +67,7 @@
             <ProjectDetails />
           </div>
         {:else}
-          <div class="tab-panel-container">
+          <div class="tab-panel-container disconnected">
             <CompileView />
           </div>
         {/if}
@@ -117,4 +117,9 @@
     background: var(--background-primary);
     padding: var(--size-4-1) var(--size-4-2);
   }
+  
+  .tab-panel-container.disconnected {
+    background: none;
+    padding: 0;
+  }
 </style>
diff --git a/src/view/explorer/ProjectDetails.svelte b/src/view/explorer/ProjectDetails.svelte
index 3d8d191..c39c9ea 100644
--- a/src/view/explorer/ProjectDetails.svelte
+++ b/src/view/explorer/ProjectDetails.svelte
@@ -299,11 +299,15 @@
 <style>
   .longform-project-section {
     margin-top: var(--size-4-4);
-    padding-bottom: var(--size-4-4);
-    border-bottom: var(--border-width) solid var(--background-modifier-border);
+    padding-bottom: var(--size-4-2);
     padding-left: var(--size-4-8);
   }
 
+  .longform-project-section + .longform-project-section {
+    border-top: var(--border-width) solid var(--background-modifier-border);
+    padding-top: var(--size-4-4);
+  }
+
   .longform-project-section .right-triangle {
     margin-left: var(--size-4-1);
     margin-right: var(--size-4-2);

From 2389727211af0e870ef4e3fc20e401cf9b54ba15 Mon Sep 17 00:00:00 2001
From: hannahildebrandt <accounts@hannahildebrandt.com>
Date: Fri, 14 Mar 2025 14:15:30 -0700
Subject: [PATCH 4/5] Fixed padding on project picker, updated word count
 styles

---
 src/view/explorer/ProjectDetails.svelte | 7 +++++++
 src/view/explorer/ProjectPicker.svelte  | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/view/explorer/ProjectDetails.svelte b/src/view/explorer/ProjectDetails.svelte
index c39c9ea..032be04 100644
--- a/src/view/explorer/ProjectDetails.svelte
+++ b/src/view/explorer/ProjectDetails.svelte
@@ -351,8 +351,15 @@
 
   .word-counts p {
     margin: var(--size-4-2) 0;
+    font-size: var(--font-smallest);
+    color: var(--text-muted);
+  }
+
+  .word-counts p strong {
+    color: var(--text-normal);
   }
 
+
   .progress {
     height: var(--size-4-6);
     width: 100%;
diff --git a/src/view/explorer/ProjectPicker.svelte b/src/view/explorer/ProjectPicker.svelte
index 615ccee..bbebfb5 100644
--- a/src/view/explorer/ProjectPicker.svelte
+++ b/src/view/explorer/ProjectPicker.svelte
@@ -108,11 +108,11 @@
     background-color: transparent;
     border: var(--input-border-width) solid var(--background-modifier-border);
     border-radius: var(--input-radius);
-    padding: var(--size-4-2);
+    padding: var(--size-4-2) var(--size-4-3);
     width: 100%;
     height: 100%;
     font-family: inherit;
-    font-size: 1em;
+    font-size: var(--font-ui-large);
     cursor: inherit;
     line-height: inherit;
     outline: none;

From 70bf4d6f23d006d91c04c7a2d5b3024db47f22f3 Mon Sep 17 00:00:00 2001
From: hannahildebrandt <accounts@hannahildebrandt.com>
Date: Fri, 14 Mar 2025 14:23:51 -0700
Subject: [PATCH 5/5] Fixed margin on word count progress bar

---
 src/view/explorer/ProjectDetails.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/view/explorer/ProjectDetails.svelte b/src/view/explorer/ProjectDetails.svelte
index 032be04..0345496 100644
--- a/src/view/explorer/ProjectDetails.svelte
+++ b/src/view/explorer/ProjectDetails.svelte
@@ -367,6 +367,7 @@
     border-radius: var(--radius-s);
     position: relative;
     overflow: hidden;
+    margin-top: var(--size-4-4);
   }
 
   .progress:before {