Refresh the UI for the dashboard layout (#296)

Author: davidmyersdev

.github/workflows/ci.yml

@@ -45,15 +45,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Get pnpm store directory
         shell: bash
@@ -75,15 +74,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Get pnpm store directory
         shell: bash
@@ -109,15 +107,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Get pnpm store directory
         shell: bash
@@ -158,15 +155,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Get pnpm store directory
         shell: bash
@@ -196,15 +192,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Get pnpm store directory
         shell: bash
@@ -228,15 +223,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Get pnpm store directory
         shell: bash

app.vue

@@ -123,4 +123,11 @@ svg {
   flex-direction: column;
   flex-grow: 1;
 }
+
+.os-scrollbar {
+  /* https://kingsora.github.io/OverlayScrollbars/#:~:text=to%20read%20it.-,Styling,-OverlayScrollbars%20comes%20with */
+  --os-handle-bg: rgb(var(--layer-bg-hover));
+  --os-handle-bg-hover: rgb(var(--layer-bg-hover));
+  --os-handle-bg-active: rgb(var(--layer-bg-hover));
+}
 </style>

assets/css/tailwind.css

@@ -86,22 +86,22 @@
   }
 
   .light {
-    --layer-0-bg: 255 255 255;
-    --layer-0-bg-hover: 244 244 245;
-    --layer-0-bg-active: 255 255 255;
-    --layer-0-bg-disabled: 253 253 253;
+    --layer-0-bg: 244 244 245;
+    --layer-0-bg-hover: 228 228 231;
+    --layer-0-bg-active: 228 228 231;
+    --layer-0-bg-disabled: 242 242 243;
     --layer-0-border: var(--layer-0-bg-hover);
     --layer-0-text: 24 24 27;
     --layer-0-text-hover: 24 24 27;
     --layer-0-text-active: 24 24 27;
     --layer-0-text-disabled: 113 113 122;
     --layer-0-text-muted: 113 113 122;
 
-    --layer-1-bg: 244 244 245;
-    --layer-1-bg-hover: 228 228 231;
-    --layer-1-bg-active: 228 228 231;
-    --layer-1-bg-disabled: 242 242 243;
-    --layer-1-border: var(--layer-1-bg-hover);
+    --layer-1-bg: 255 255 255;
+    --layer-1-bg-hover: 244 244 245;
+    --layer-1-bg-active: 255 255 255;
+    --layer-1-bg-disabled: 253 253 253;
+    --layer-1-border: var(--layer-0-bg-hover);
     --layer-1-text: 24 24 27;
     --layer-1-text-hover: 24 24 27;
     --layer-1-text-active: 24 24 27;
@@ -302,27 +302,27 @@
   }
 
   .button {
-    @apply inline-flex items-center rounded cursor-pointer focus:outline-none focus:ring focus-within:ring;
+    @apply inline-flex items-center rounded cursor-pointer focus-visible:outline-none focus-visible:ring has-[:focus-visible]:ring;
   }
 
   .core-button {
     @apply core-button-shape;
     @apply cursor-pointer;
     @apply outline-none;
-    @apply focus:ring focus-within:ring;
+    @apply focus-visible:ring has-[:focus-visible]:ring;
     @apply bg-layer;
     @apply disabled:bg-layer-disabled ui-disabled:bg-layer-disabled;
     @apply disabled:text-layer-disabled ui-disabled:text-layer-disabled;
     @apply disabled:hover:bg-layer-disabled;
-    @apply disabled:cursor-not-allowed ui-disabled:cursor-not-allowed disabled-within:cursor-not-allowed;
+    @apply disabled:cursor-default ui-disabled:cursor-default disabled-within:cursor-default;
     @apply disabled-within:bg-layer-disabled disabled-within:text-layer-disabled;
     @apply disabled-within:hover:bg-layer-disabled disabled-within:hover:text-layer-disabled;
     @apply hover:bg-layer-hover ui-active:bg-layer-hover;
     @apply whitespace-nowrap;
   }
 
   .core-button-shape {
-    @apply p-2 rounded inline-flex gap-3 items-center justify-center;
+    @apply px-2 py-1 rounded inline-flex gap-2 items-center justify-center;
   }
 
   /* utils */
@@ -373,6 +373,36 @@
   }
 
   .sidebar-link {
-    @apply flex items-center justify-between rounded p-2 hover:bg-layer-hover focus:outline-none focus:ring;
+    @apply flex items-center justify-between rounded px-2 py-1 hover:bg-layer-hover focus-visible:outline-none focus-visible:ring;
+  }
+}
+
+@layer utilities {
+  .flex-direction-inherit {
+    flex-direction: inherit;
+  }
+
+  .flex-inherit {
+    align-items: inherit;
+    flex-direction: inherit;
+    flex-wrap: inherit;
+    gap: inherit;
+    justify-content: inherit;
+  }
+
+  .flex-wrap-inherit {
+    flex-wrap: inherit;
+  }
+
+  .gap-inherit {
+    gap: inherit;
+  }
+
+  .items-inherit {
+    align-items: inherit;
+  }
+
+  .justify-inherit {
+    justify-content: inherit;
   }
 }

components/CoreEditor.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type Options } from 'ink-mde'
+import { type Instance, type Options } from 'ink-mde'
 import Ink from 'ink-mde/vue'
 import { OverlayScrollbars } from 'overlayscrollbars'
 import { type SystemAppearance } from '#composables/useAppearance'
@@ -37,12 +37,13 @@ export default defineComponent({
     const cssMaxWidth = computed(() => `${maxWidthInChars.value}ch`)
     const instance = computed(() => ink.value?.instance)
 
-    const editorOptions = computed(() => {
+    const editorOptions = computed<Options>(() => {
       return {
         ...props.options,
         interface: {
           ...props.options?.interface,
           appearance: editorAppearance.value,
+          toolbar: false,
         },
       }
     })
@@ -75,11 +76,35 @@ export default defineComponent({
       }
     })
 
+    const formatSelection = (type: Parameters<Instance['format']>[0]) => {
+      instance.value?.format(type, {})
+    }
+
+    const handleUpload = async (event: Event) => {
+      const target = event.target as HTMLInputElement
+
+      if (target?.files) {
+        try {
+          const url = await props.options?.files?.handler?.(target.files)
+
+          if (url) {
+            const markup = `![](${url})`
+
+            instance.value?.insert(markup)
+          }
+        } catch (error) {
+          console.error(error)
+        }
+      }
+    }
+
     return {
       cssMaxWidth,
       currentLayer,
       editorOptions,
       focus,
+      formatSelection,
+      handleUpload,
       ink,
       instance,
       nextLayer,
@@ -90,14 +115,36 @@ export default defineComponent({
 </script>
 
 <template>
-  <Ink
-    ref="ink"
-    :model-value="modelValue"
-    :options="editorOptions"
-    class="core-editor flex flex-col flex-grow flex-shrink rounded"
-    :class="currentLayer.class"
-    @update:model-value="$emit('update:modelValue', $event)"
-  />
+  <div class="core-editor flex flex-col-reverse lg:flex-col flex-grow flex-shrink min-h-0 rounded">
+    <template v-if="options?.interface?.toolbar">
+      <CoreScrollable class="core-editor-scrollable flex-shrink-0 w-full mx-auto">
+        <CoreEditorToolbar
+          class="core-editor-toolbar mx-auto px-1 overflow-hidden lg:px-0 py-1 flex-shrink-0 rounded min-w-full"
+          :upload="options?.toolbar?.upload"
+          @blockquote="formatSelection('quote')"
+          @bold="formatSelection('bold')"
+          @bullet-list="formatSelection('list')"
+          @code="formatSelection('code')"
+          @heading="formatSelection('heading')"
+          @image="formatSelection('image')"
+          @italic="formatSelection('italic')"
+          @link="formatSelection('link')"
+          @number-list="formatSelection('ordered_list')"
+          @task-list="formatSelection('task_list')"
+          @upload="handleUpload"
+        />
+      </CoreScrollable>
+      <CoreDivider />
+    </template>
+    <Ink
+      ref="ink"
+      :model-value="modelValue"
+      :options="editorOptions"
+      class="flex flex-col flex-grow flex-shrink min-h-0 rounded overflow-hidden"
+      :class="currentLayer.class"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+  </div>
 </template>
 
 <style scoped>
@@ -115,9 +162,14 @@ export default defineComponent({
   --ink-syntax-hashtag-background-color: rgb(v-bind('nextLayer.bgCssVar'));
   --ink-syntax-processing-instruction-color: rgb(v-bind('nextLayer.textCssVar') / 0.1);
 
+  .core-editor-scrollable {
+    max-width: var(--core-editor-max-width-in-chars);
+  }
+
   :deep(.ink-mde) {
     border: none;
     border-radius: 0;
+    padding: 0;
 
     .cm-placeholder {
       color: var(--core-editor-text-muted);
@@ -129,7 +181,11 @@ export default defineComponent({
 
     .ink-mde-details {
       background-color: transparent;
-      border-top: 1px solid var(--core-editor-layer-2-bg);
+      border-top: 1px solid var(--core-editor-divider);
+      padding: 0.25rem;
+    }
+
+    .ink-mde-editor {
       padding: 0.25rem;
     }