design(stacked-notes): action buttons in vertical bar

src/components/NoteFreshnessBadge.vue

@@ -171,7 +171,6 @@ const isBusy = computed(() => props.status === "checking")
       />
       <path d="M3 3l18 18" />
     </svg>
-    <span class="freshness-label">{{ label }}</span>
   </button>
 </template>
 

src/components/StackedNote.vue

@@ -269,27 +269,13 @@ const onBadgeClick = async () => {
       [`note-${sha}`]: true
     }"
   >
-    <a
-      class="title-stacked-note-link"
-      @click.prevent="scrollToFocusedNote({ noteId: props.sha })"
-    >
-      <div
-        class="title-stacked-note breadcrumbs text-sm"
-        :class="titleClassName"
-      >
-        <ul>
-          <li v-for="(part, i) in breadcrumbs" :key="i">
-            {{ part }}
-          </li>
-        </ul>
-      </div>
-    </a>
-    <section class="text-content">
+    <div class="title-stacked-note breadcrumbs text-sm" :class="titleClassName">
       <div class="action-bar">
         <note-freshness-badge
           :status="freshnessStatus"
           :last-checked-at="lastCheckedAt"
           @click="onBadgeClick"
+          class="action"
         />
         <button
           v-if="isMarkdown"
@@ -342,6 +328,18 @@ const onBadgeClick = async () => {
           </svg>
         </button>
       </div>
+      <a
+        class="title-stacked-note-link"
+        @click.prevent="scrollToFocusedNote({ noteId: props.sha })"
+      >
+        <ul>
+          <li v-for="(part, i) in breadcrumbs" :key="i">
+            {{ part }}
+          </li>
+        </ul>
+      </a>
+    </div>
+    <section class="text-content">
       <div v-if="mode === 'edit' && isMarkdown" class="edit">
         <edit-note v-model="rawContent" />
       </div>
@@ -389,7 +387,6 @@ $border-color: rgba(18, 19, 58, 0.2);
   background-color: var(--color-base-100);
   color: var(--color-base-content);
   font-size: 0.8em;
-  overflow: hidden;
 
   ul,
   li {
@@ -415,12 +412,19 @@ $border-color: rgba(18, 19, 58, 0.2);
   align-items: center;
   justify-content: flex-end;
   gap: 0.25rem;
-  margin: 0.2rem 0;
+
+  .action {
+    transform: rotate(-90deg);
+  }
 }
 
 .action {
   margin: 0;
 
+  &:hover {
+    cursor: pointer;
+  }
+
   img {
     vertical-align: bottom;
   }
@@ -452,7 +456,7 @@ $border-color: rgba(18, 19, 58, 0.2);
   }
 
   .title-stacked-note {
-    padding: 0 1rem;
+    padding: 0;
     transform-origin: 0 0;
     transform: rotate(90deg);
   }

src/components/StackedPublicNote.vue

@@ -144,7 +144,6 @@ $border-color: rgba(18, 19, 58, 0.2);
   background-color: var(--color-base-100);
   color: var(--color-base-content);
   font-size: 0.8em;
-  overflow: hidden;
 
   ul,
   li {

src/styles/app.css

@@ -13,7 +13,11 @@
   --light-link: lighten(#445fb9, 45%);
   --background-color: #ffffff;
   --note-width: 500px;
-  --note-canvas-bg: color-mix(in oklch, var(--color-base-100) 60%, var(--color-base-200));
+  --note-canvas-bg: color-mix(
+    in oklch,
+    var(--color-base-100) 60%,
+    var(--color-base-200)
+  );
   --note-sheet-shadow: 1px 0 8px rgb(0 0 0 / 6%);
   --color-contrast-content: var(--color-success);
   --notyf-margin: 0.5rem;
@@ -91,18 +95,35 @@ a {
   }
 }
 
-a.title-stacked-note-link {
+.title-stacked-note {
   color: var(--color-base-content);
-  display: block;
   text-decoration: none;
   position: sticky;
   top: 0;
+  overflow: visible;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
 
+a.title-stacked-note-link {
+  display: block;
+  overflow: visible;
   &:hover {
     cursor: pointer;
   }
 }
 
+.title-stacked-note ul,
+.title-stacked-note li {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  text-decoration: none;
+  display: flex;
+  gap: 1rem;
+}
+
 .notyf__toast {
   border-radius: revert-layer;
   border: none;