feat: allow edit from list overview

packages/client/internals/NoteEditor.vue

@@ -46,6 +46,8 @@ const { ignoreUpdates } = ignorableWatch(
 watch(
   info,
   (v) => {
+    if (editing.value)
+      return
     clearTimeout(timer)
     ignoreUpdates(() => {
       note.value = v?.note || ''
@@ -70,7 +72,7 @@ onClickOutside(input, () => {
   <NoteDisplay
     v-if="!editing"
     class="my--4 border-transparent border-2"
-    :class="[props.class, note ? '' : 'opacity-50']"
+    :class="[props.class, note ? '' : 'opacity-25 italic select-none']"
     :style="props.style"
     :note="note || placeholder"
     :note-html="info?.noteHTML"
@@ -79,7 +81,7 @@ onClickOutside(input, () => {
     v-else
     ref="input"
     v-model="note"
-    class="prose resize-none overflow-auto outline-none bg-transparent block border-green border-2"
+    class="prose resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
     style="line-height: 1.75;"
     :style="props.style"
     :class="props.class"

packages/client/internals/SlidesOverview.vue

@@ -7,7 +7,6 @@ import { currentPage, go as goSlide, rawRoutes } from '../logic/nav'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { useFixedClicks } from '../composables/useClicks'
 import { getSlideClass } from '../utils'
-import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper'
 import DrawingPreview from './DrawingPreview.vue'

packages/client/pages/entry.vue

@@ -21,5 +21,12 @@
       <carbon:catalog class="text-3em op50" />
       Notes
     </RouterLink>
+    <RouterLink
+      to="/overview"
+      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
+    >
+      <carbon:list-boxes class="text-3em op50" />
+      Overview
+    </RouterLink>
   </div>
 </template>

packages/client/pages/overview.vue

@@ -8,13 +8,14 @@ import { getSlideClass } from '../utils'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlideWrapper from '../internals/SlideWrapper'
 import DrawingPreview from '../internals/DrawingPreview.vue'
-import NoteDisplay from '../internals/NoteDisplay.vue'
 import IconButton from '../internals/IconButton.vue'
+import NoteEditor from '../internals/NoteEditor.vue'
 
 const cardWidth = 450
 
 const blocks: Map<number, HTMLElement> = reactive(new Map())
 const activeBlocks = ref<number[]>([])
+const edittingNote = ref<string | null>(null)
 
 function isElementInViewport(el: HTMLElement) {
   const rect = el.getBoundingClientRect()
@@ -59,7 +60,7 @@ onMounted(() => {
 
 <template>
   <div class="h-screen w-screen of-hidden flex">
-    <nav class="h-full flex flex-col border-r border-main p2">
+    <nav class="h-full flex flex-col border-r border-main p2 select-none">
       <div class="of-auto flex flex-col flex-auto items-center">
         <button
           v-for="(route, idx) of rawRoutes"
@@ -87,28 +88,28 @@ onMounted(() => {
       :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
       @scroll="checkActiveBlocks"
     >
-      <div class="px4 py2 text-orange bg-orange:5">
+      <div class="px4 py2 text-orange bg-orange:5 select-none">
         <span font-bold>List Overview</span> is in beta, feedback is welcome!
       </div>
       <div
         v-for="(route, idx) of rawRoutes"
         :key="route.path"
         :ref="el => blocks.set(idx, el)"
-        class="relative border-t border-main of-hidden flex gap-4 min-h-50"
+        class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
       >
-        <div class="select-none text-3xl op25 my4 w-13 text-right">
+        <div class="select-none text-3xl op20 w-13 my4 text-right">
           {{ idx + 1 }}
         </div>
         <div
-          class="border rounded border-main overflow-hidden bg-main my5"
+          class="border rounded border-main overflow-hidden bg-main my5 select-none"
           :style="themeVars"
           @dblclick="openSlideInNewTab(route.path)"
         >
           <SlideContainer
             :key="route.path"
             :width="cardWidth"
             :clicks-disabled="true"
-            class="pointer-events-none"
+            class="pointer-events-none important:[&_*]:select-none"
           >
             <SlideWrapper
               :is="route.component"
@@ -121,9 +122,21 @@ onMounted(() => {
             <DrawingPreview :page="+route.path" />
           </SlideContainer>
         </div>
-        <NoteDisplay
-          :note="route.meta?.slide?.note"
-          :note-html="route.meta?.slide?.noteHTML"
+        <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
+          <IconButton
+            title="Edit Note"
+            class="rounded-full w-9 h-9 text-sm"
+            :class="edittingNote === idx ? 'important:op0' : ''"
+            @click="edittingNote = idx"
+          >
+            <carbon:pen />
+          </IconButton>
+        </div>
+        <NoteEditor
+          :no="idx"
+          class="max-w-250 w-250 text-lg rounded p3"
+          :editing="edittingNote === idx"
+          @update:editing="edittingNote = null"
         />
       </div>
     </main>