From 46848b3c8425605dbc513e0baa917856342ac184 Mon Sep 17 00:00:00 2001
From: Type-32 <87076491+Type-32@users.noreply.github.com>
Date: Fri, 12 Jul 2024 22:44:27 +0800
Subject: [PATCH] Changed Table Interaction and Preview Modal

Signed-off-by: Type-32 <87076491+Type-32@users.noreply.github.com>
---
 app/components/MediaBrowserTable.vue    |  57 +++-
 app/components/TiptapEditor.vue         | 387 ++++++++++++++----------
 app/composables/useMedia.ts             |  18 +-
 app/layouts/DashboardLayout.vue         |   2 +-
 app/pages/admin/article/[articleId].vue |   6 +-
 5 files changed, 296 insertions(+), 174 deletions(-)

diff --git a/app/components/MediaBrowserTable.vue b/app/components/MediaBrowserTable.vue
index 10abe01..eb7203b 100644
--- a/app/components/MediaBrowserTable.vue
+++ b/app/components/MediaBrowserTable.vue
@@ -13,8 +13,11 @@ const columns = [
     }
 ]
 
+const $toast = useToast()
+
 const emits = defineEmits<{
     (e: 'onforwards', fordir: string, forPseudo: string): void
+    (e: 'update:modelValue', value: any[]): void
 }>()
 
 const props = defineProps({
@@ -36,6 +39,17 @@ const props = defineProps({
     }
 })
 
+const localModelValue = ref(props.modelValue || [])
+// Watch for changes in the prop and update the local ref
+
+watch(() => localModelValue.value, () => {
+    emits('update:modelValue', localModelValue.value)
+})
+
+watch(() => props.modelValue, (newValue) => {
+    localModelValue.value = newValue || []
+}, { deep: true })
+
 const handleForwards = async (fordir: string, forPseudo: string) => {
     emits('onforwards', fordir, forPseudo)
     if(props.routeForwards) {
@@ -48,13 +62,13 @@ function joinUrl(str: string): string{
     return runtimeConfig.public.siteUrl + str
 }
 
-function select (row: any) {
+function select(row: any) {
     //@ts-ignore
-    const index = props.modelValue.findIndex((item) => item.id === row.id)
+    const index = localModelValue.value.findIndex((item) => item.id === row.id)
     if (index === -1) {
-        props.modelValue.push(row as never)
+        localModelValue.value.push(row)
     } else {
-        props.modelValue.splice(index, 1)
+        localModelValue.value.splice(index, 1)
     }
 }
 
@@ -69,14 +83,42 @@ function parseAndFormatDate(dateString: string): string {
 
     return `${year}/${month}/${day}, ${hours}:${minutes}`;
 }
+
+function copyFileUrl(fileUrl: string) {
+    const textarea = document.createElement('textarea');
+    textarea.value = fileUrl;
+
+    // Set the textarea to be out of view
+    textarea.style.position = 'absolute';
+    textarea.style.left = '-9999px';
+
+    // Append the textarea to the DOM
+    document.body.appendChild(textarea);
+
+    // Select the text inside the textarea
+    textarea.select();
+
+    try {
+        document.execCommand('copy');
+        $toast.add({title: 'Copied File URL to Clipboard.', color: 'green'})
+    } catch (err) {
+        console.error('Unable to copy text to clipboard:', err);
+        $toast.add({title: `Unable to copy text to clipboard: ${err}`, color: 'red'})
+    } finally {
+        document.body.removeChild(textarea);
+    }
+}
+
+const imagePreviewModal = ref(false), previewingImage = ref('')
 </script>
 
 <template>
-    <UTable :columns="columns" v-model="props.modelValue" :rows="props.rows" :loading="props.loading" @select="select">
+    <UTable :columns="columns" v-model="localModelValue" :rows="props.rows" :loading="props.loading" >
         <template #fileName-data="{row}">
             <div class="flex flex-row gap-3 items-center">
-                <span v-if="!row.isFolder" class="flex flex-row gap-3 items-center"><UTooltip text="Click to preview"><nuxt-img @click="navigateTo(joinUrl(row.url), {external: true})" v-if="row.url.endsWith('.png') || row.url.endsWith('.jpg') || row.url.endsWith('.jpeg')" :src="joinUrl(row.url)" alt="preview" class="object-contain size-8"/></UTooltip> {{row.fileName}}</span>
+                <span v-if="!row.isFolder" class="flex flex-row gap-3 items-center"><UTooltip text="Click to preview"><nuxt-img @click="previewingImage = joinUrl(row.url); imagePreviewModal = true" v-if="row.url.endsWith('.png') || row.url.endsWith('.jpg') || row.url.endsWith('.jpeg')" :src="joinUrl(row.url)" alt="preview" class="object-contain size-8"/></UTooltip> {{row.fileName}}</span>
                 <span v-else><UButton icon="i-mdi-folder" @click="handleForwards(row.url, row.pseudoDirectory)" :label="row.fileName"/></span>
+                <UTooltip text="Copy File URL to Clipboard"><UButton icon="i-mdi-link" size="sm" variant="ghost" @click="copyFileUrl(joinUrl(row.url))"/></UTooltip>
             </div>
         </template>
         <template #updatedAt-data="{ row }">
@@ -86,6 +128,9 @@ function parseAndFormatDate(dateString: string): string {
             <span>{{ parseAndFormatDate(row.updatedAt) }}</span>
         </template>
     </UTable>
+    <UModal v-model="imagePreviewModal" title="Image Preview">
+        <nuxt-img :src="previewingImage" alt="Previewing Image" class="max-w-screen p-5 select-none"/>
+    </UModal>
 </template>
 
 <style scoped>
diff --git a/app/components/TiptapEditor.vue b/app/components/TiptapEditor.vue
index dac754b..d1f1a0a 100644
--- a/app/components/TiptapEditor.vue
+++ b/app/components/TiptapEditor.vue
@@ -2,140 +2,141 @@
     <div class="h-fit rounded-2xl ring-1 ring-black/10">
         <div class="p-3">
             <div v-if="editor" class="flex flex-row items-center gap-2 container">
-                <UButton
-                    @click="editor.chain().focus().toggleBold().run()"
-                    :disabled="!editor.can().chain().focus().toggleBold().run()"
-                    :class="{ 'is-active': editor.isActive('bold') }"
-                    :variant="editor.isActive('bold') ? 'solid' : 'ghost'"
-                    icon="i-fa-solid-bold"
-                />
-                <UButton
-                    @click="editor.chain().focus().toggleItalic().run()"
-                    :disabled="!editor.can().chain().focus().toggleItalic().run()"
-                    :class="{ 'is-active': editor.isActive('italic') }"
-                    :variant="editor.isActive('italic') ? 'solid' : 'ghost'"
-                    icon="i-fa-solid-italic"
-                />
-                <UButton
-                    @click="editor.chain().focus().toggleStrike().run()"
-                    :disabled="!editor.can().chain().focus().toggleStrike().run()"
-                    :class="{ 'is-active': editor.isActive('strike') }"
-                    :variant="editor.isActive('strike') ? 'solid' : 'ghost'"
-                    icon="i-fa-solid-strikethrough"
-                />
-                <UButton
-                    @click="editor.chain().focus().toggleCode().run()"
-                    :disabled="!editor.can().chain().focus().toggleCode().run()"
-                    :class="{ 'is-active': editor.isActive('code') }"
-                    :variant="editor.isActive('code') ? 'solid' : 'ghost'"
-                    icon="i-fa-solid-code"
-                />
-                <UButton
-                    @click="editor.chain().focus().unsetAllMarks().run()"
-                    variant="outline"
-                    icon="i-fa-solid-remove-format"
-                />
-                <UButton
-                    @click="editor.chain().focus().clearNodes().run()"
-                    variant="outline"
-                    icon="i-fa-solid-brush"
-                />
+                <UButtonGroup>
+                    <UButton
+                        @click="editor.chain().focus().toggleBold().run()"
+                        :disabled="!editor.can().chain().focus().toggleBold().run()"
+                        :class="{ 'is-active': editor.isActive('bold') }"
+                        :variant="editor.isActive('bold') ? 'solid' : 'soft'"
+                        icon="i-fa-solid-bold"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().toggleItalic().run()"
+                        :disabled="!editor.can().chain().focus().toggleItalic().run()"
+                        :class="{ 'is-active': editor.isActive('italic') }"
+                        :variant="editor.isActive('italic') ? 'solid' : 'soft'"
+                        icon="i-fa-solid-italic"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().toggleStrike().run()"
+                        :disabled="!editor.can().chain().focus().toggleStrike().run()"
+                        :class="{ 'is-active': editor.isActive('strike') }"
+                        :variant="editor.isActive('strike') ? 'solid' : 'soft'"
+                        icon="i-fa-solid-strikethrough"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().toggleCode().run()"
+                        :disabled="!editor.can().chain().focus().toggleCode().run()"
+                        :class="{ 'is-active': editor.isActive('code') }"
+                        :variant="editor.isActive('code') ? 'solid' : 'soft'"
+                        icon="i-fa-solid-code"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().unsetAllMarks().run()"
+                        variant="soft"
+                        icon="i-fa-solid-remove-format"
+                        color="red"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().clearNodes().run()"
+                        variant="soft"
+                        icon="i-fa-solid-brush"
+                        color="red"
+                    />
+                </UButtonGroup>
                 <UDivider orientation="vertical" class="h-full"/>
+                <UButtonGroup>
+                    <UButton
+                        @click="editor.chain().focus().setParagraph().run()"
+                        :class="{ 'is-active': editor.isActive('paragraph') }"
+                        :variant="editor.isActive('paragraph') ? 'solid' : 'soft'"
+                        icon="i-fa-solid-paragraph"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+                        :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+                        :variant="editor.isActive('heading', { level: 1 }) ? 'solid' : 'soft'"
+                        icon="i-mdi-format-header-1"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+                        :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+                        :variant="editor.isActive('heading', { level: 2 }) ? 'solid' : 'soft'"
+                        icon="i-mdi-format-header-2"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+                        :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+                        :variant="editor.isActive('heading', { level: 3 }) ? 'solid' : 'soft'"
+                        icon="i-mdi-format-header-3"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
+                        :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
+                        :variant="editor.isActive('heading', { level: 4 }) ? 'solid' : 'soft'"
+                        icon="i-mdi-format-header-4"
+                    />
+                </UButtonGroup>
+                <UButtonGroup>
+                    <UButton
+                        @click="editor.chain().focus().toggleBulletList().run()"
+                        :class="{ 'is-active': editor.isActive('bulletList') }"
+                        :variant="editor.isActive('bulletList') ? 'solid' : 'soft'"
+                        icon="i-fa-solid-list-ul"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().toggleOrderedList().run()"
+                        :class="{ 'is-active': editor.isActive('orderedList') }"
+                        :variant="editor.isActive('orderedList') ? 'solid' : 'soft'"
+                        icon="i-fa-solid-list-ol"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().toggleCodeBlock().run()"
+                        :class="{ 'is-active': editor.isActive('codeBlock') }"
+                        :variant="editor.isActive('codeBlock') ? 'solid' : 'soft'"
+                        icon="i-fa-solid-laptop-code"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().toggleBlockquote().run()"
+                        :class="{ 'is-active': editor.isActive('blockquote') }"
+                        :variant="editor.isActive('blockquote') ? 'solid' : 'soft'"
+                        icon="i-fa-solid-quote-left"
+                    />
+                </UButtonGroup>
+                <UButtonGroup>
+                    <UButton
+                        @click="editor.chain().focus().setHorizontalRule().run()"
+                        variant="ghost"
+                        icon="i-fa-solid-align-left"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().setHardBreak().run()"
+                        variant="ghost"
+                        icon="i-fa-solid-window-minimize"
+                    />
+                </UButtonGroup>
+
                 <UButton
-                    @click="editor.chain().focus().setParagraph().run()"
-                    :class="{ 'is-active': editor.isActive('paragraph') }"
-                    :variant="editor.isActive('paragraph') ? 'solid' : 'soft'"
-                    icon="i-fa-solid-paragraph"
-                />
-                <UButton
-                    @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-                    :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
-                    :variant="editor.isActive('heading', { level: 1 }) ? 'solid' : 'soft'"
-                    icon="i-mdi-format-header-1"
-                />
-                <UButton
-                    @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-                    :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
-                    :variant="editor.isActive('heading', { level: 2 }) ? 'solid' : 'soft'"
-                    icon="i-mdi-format-header-2"
-                />
-                <UButton
-                    @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-                    :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
-                    :variant="editor.isActive('heading', { level: 3 }) ? 'solid' : 'soft'"
-                    icon="i-mdi-format-header-3"
-                />
-                <UButton
-                    @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
-                    :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
-                    :variant="editor.isActive('heading', { level: 4 }) ? 'solid' : 'soft'"
-                    icon="i-mdi-format-header-4"
-                />
-                <!--            <UButton-->
-                <!--                @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"-->
-                <!--                :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"-->
-                <!--                :variant="editor.isActive('') ? 'solid' : 'soft'"-->
-                <!--            >-->
-                <!--                h5-->
-                <!--            </UButton>-->
-                <!--            <UButton-->
-                <!--                @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"-->
-                <!--                :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"-->
-                <!--                :variant="editor.isActive('') ? 'solid' : 'soft'"-->
-                <!--            >-->
-                <!--                h6-->
-                <!--            </UButton>-->
-                <UButton
-                    @click="editor.chain().focus().toggleBulletList().run()"
-                    :class="{ 'is-active': editor.isActive('bulletList') }"
-                    :variant="editor.isActive('bulletList') ? 'solid' : 'soft'"
-                    icon="i-fa-solid-list-ul"
-                />
-                <UButton
-                    @click="editor.chain().focus().toggleOrderedList().run()"
-                    :class="{ 'is-active': editor.isActive('orderedList') }"
-                    :variant="editor.isActive('orderedList') ? 'solid' : 'soft'"
-                    icon="i-fa-solid-list-ol"
-                />
-                <UButton
-                    @click="editor.chain().focus().toggleCodeBlock().run()"
-                    :class="{ 'is-active': editor.isActive('codeBlock') }"
-                    :variant="editor.isActive('codeBlock') ? 'solid' : 'soft'"
-                    icon="i-fa-solid-laptop-code"
-                />
-                <UButton
-                    @click="editor.chain().focus().toggleBlockquote().run()"
-                    :class="{ 'is-active': editor.isActive('blockquote') }"
-                    :variant="editor.isActive('blockquote') ? 'solid' : 'soft'"
-                    icon="i-fa-solid-quote-left"
-                />
-                <UButton
-                    @click="editor.chain().focus().setHorizontalRule().run()"
-                    variant="ghost"
-                    icon="i-fa-solid-align-left"
-                />
-                <UButton
-                    @click="editor.chain().focus().setHardBreak().run()"
+                    @click="imageInsertModal = true;"
                     variant="ghost"
-                    icon="i-fa-solid-window-minimize"
+                    icon="i-mdi-image"
                 />
-<!--                <UButton-->
-<!--                    @click="imageInsertModal = true"-->
-<!--                    variant="ghost"-->
-<!--                >Insert Image</UButton>-->
+
                 <UDivider orientation="vertical" class="h-full flex-grow"/>
-                <UButton
-                    @click="editor.chain().focus().undo().run()"
-                    :disabled="!editor.can().chain().focus().undo().run()"
-                    variant="ghost"
-                    icon="i-fa-solid-undo"
-                />
-                <UButton
-                    @click="editor.chain().focus().redo().run()"
-                    :disabled="!editor.can().chain().focus().redo().run()"
-                    variant="ghost"
-                    icon="i-fa-solid-redo"
-                />
+                <UButtonGroup>
+                    <UButton
+                        @click="editor.chain().focus().undo().run()"
+                        :disabled="!editor.can().chain().focus().undo().run()"
+                        variant="ghost"
+                        icon="i-fa-solid-undo"
+                    />
+                    <UButton
+                        @click="editor.chain().focus().redo().run()"
+                        :disabled="!editor.can().chain().focus().redo().run()"
+                        variant="ghost"
+                        icon="i-fa-solid-redo"
+                    />
+                </UButtonGroup>
             </div>
         </div>
         <UDivider/>
@@ -143,10 +144,23 @@
             <TiptapEditorContent :editor="editor" class="h-full min-h-72" :aria-disabled="disabled"/>
         </div>
         <UModal v-model="imageInsertModal" title="Insert Image">
-            <div class="p-4 flex">
-                <UInput type="file" size="lg" icon="i-heroicons-folder" v-model="imageInput" accept="image/png, image/jpeg" />
-                <UButton @click="addImage()">Insert</UButton>
-            </div>
+            <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800', container: 'w-full' }">
+                <template #header>
+                    <div class="flex items-center justify-between">
+                        <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                            Select Image Media
+                        </h3>
+                        <UButtonGroup>
+                            <UButton color="gray" variant="ghost" icon="i-heroicons-arrow-left" class="-my-1" @click="handlePrevious()"/>
+                            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="imageInsertModal = false"/>
+                        </UButtonGroup>
+                    </div>
+                </template>
+                <MediaBrowserTable v-model="selected" :rows="(data as any).items as any[]" :loading="pending" :route-forwards="false" @onforwards="handleForwards"/>
+                <template #footer>
+                    <UButton :disabled="selected.length != 1" @click="addImage()" block>Insert</UButton>
+                </template>
+            </UCard>
         </UModal>
     </div>
 </template>
@@ -157,7 +171,18 @@ import { Editor, EditorContent } from '@tiptap/vue-3'
 import Image from '@tiptap/extension-image'
 import { onBeforeUnmount, ref, watch } from 'vue'
 import {Youtube} from "@tiptap/extension-youtube";
-const imageInsertModal = ref(false), imageInput = ref(), $route = useRoute()
+const editor = ref()
+const imageInsertModal = ref(false), imageInput = ref(), $route = useRoute(), prevFocus = ref()
+const directory = ref(''), previousDir = ref(''), selected = ref([]), data = ref(), pending = ref(true)
+const $media = useMedia(), $toast = useToast()
+
+const refreshDir = async () => {
+    pending.value = true
+    data.value = await $media.listDirectory(directory.value, false, true)
+    pending.value = false
+}
+
+// onBefore
 
 const props = defineProps({
     modelValue: {
@@ -170,33 +195,72 @@ const props = defineProps({
     }
 })
 
-const addImage = async () => {
-    const data = await $fetch('/api/v1/article/upload-image', {
-        method: 'POST',
-        body: JSON.stringify({
-            file: imageInput.value,
-            articleId: $route.params.articleId || 0
-        }),
-        headers: {
-            'Authorization': useCookie('session_token').value
-        }
-    })
-    editor.value?.chain().focus().setImage({ src: data?.fileUrl }).run()
-    imageInsertModal.value = false
+const parseArrayRouteDir = (arr: string[]) => {
+    if(arr.length == 0) return '/'
+    if(arr.length == 1) return `${arr[0]}`
+
+    let temp = arr[0] as string
+    for(let i = 1; i < arr.length; i++) {
+        if(arr[i] == '') continue;
+        temp += `/${arr[i]}`
+    }
+
+    return temp
+}
+
+const lastDirAsRoute = () => {
+    // NOT DIRECTORY! FOR ROUTE ONLY!
+    let temp = directory.value.split('/')
+    // selected.value = []
+    if(temp.length <= 1)
+        return '/'
+    else {
+        return temp.at(temp.length - 2) == '' ? '/' : '/' + parseArrayRouteDir(temp.splice(0, temp.length - 1))
+    }
+}
+
+const handlePrevious = () => {
+    directory.value = lastDirAsRoute()
+    selected.value = []
+    // dat.value.refresh()
+    refreshDir()
+}
+
+const handleForwards = (url: string, pseudo: string) => {
+    // previousDir.value = directory.value
+    directory.value = url.substring(7)
+    selected.value = []
+    refreshDir()
 }
 
 const emit = defineEmits(['update:modelValue'])
 
-const editor = useEditor({
-    extensions: [
-        TiptapStarterKit,
-        Image,
-        Youtube.configure({
-            controls: false,
-            nocookie: true,
-        })
-    ],
-});
+// const editor = useEditor({
+//     extensions: [
+//         TiptapStarterKit,
+//         Image
+//     ],
+// });
+
+const addImage = async () => {
+    // console.log(editor.value.chain().focus())
+
+    if(selected.value.length != 1){
+        $toast.add({title: 'Cannot select multiple images', color: 'red'})
+        return
+    }
+
+    const url = (selected.value?.at(0) as any).url as string
+    console.log(url)
+    if (!(url.endsWith('.png') || url.endsWith('.jpg') || url.endsWith('.jpeg'))) {
+        $toast.add({title: 'Cannot select non-image files', color: 'red'})
+        return
+    }
+
+    editor.value?.chain().focus().setImage({ src: url }).run()
+    imageInsertModal.value = false
+    selected.value = []
+}
 
 watch(
     () => props.modelValue,
@@ -209,9 +273,14 @@ watch(
     }
 )
 
-onMounted(() => {
+onMounted(async () => {
+    await refreshDir()
     editor.value = new Editor({
-        extensions: [StarterKit],
+        extensions: [StarterKit, Image,
+            Youtube.configure({
+                controls: false,
+                nocookie: true,
+            })],
         content: props.modelValue,
         onUpdate: () => {
             emit('update:modelValue', editor.value?.getHTML())
diff --git a/app/composables/useMedia.ts b/app/composables/useMedia.ts
index 6198854..2837d5a 100644
--- a/app/composables/useMedia.ts
+++ b/app/composables/useMedia.ts
@@ -1,4 +1,5 @@
 import type { Media } from "@prisma/client";
+import {$fetch} from "ofetch";
 
 interface DirectoryContent {
     currentDirectory: string;
@@ -84,11 +85,18 @@ export default function useMedia() {
         return useFetch<StructuredMedia>('/api/v1/media/list');
     };
 
-    const listDirectory = async (directory: string = '') => {
-        return useFetch<DirectoryContent>('/api/v1/media/list-dir', {
-            params: { directory },
-            lazy: true
-        });
+    const listDirectory = async (directory: string = '', lazy: boolean = true, realtime: boolean = false) => {
+        if(!realtime)
+            return useFetch<DirectoryContent>('/api/v1/media/list-dir', {
+                params: { directory },
+                lazy: lazy
+            });
+        else
+            return await $fetch('/api/v1/media/list-dir', {
+                query: {
+                    directory: directory,
+                }
+            })
     };
 
     const deleteBatch = async (ids: number[]) => {
diff --git a/app/layouts/DashboardLayout.vue b/app/layouts/DashboardLayout.vue
index 66644b4..2e05c88 100644
--- a/app/layouts/DashboardLayout.vue
+++ b/app/layouts/DashboardLayout.vue
@@ -18,7 +18,7 @@ const links = [
     },
     {
         label: 'Media Library',
-        icon: 'i-heroicons-files',
+        icon: 'i-heroicons-folder',
         to: '/admin/media'
     },
     {
diff --git a/app/pages/admin/article/[articleId].vue b/app/pages/admin/article/[articleId].vue
index 03929dd..a035dd8 100644
--- a/app/pages/admin/article/[articleId].vue
+++ b/app/pages/admin/article/[articleId].vue
@@ -82,11 +82,11 @@ async function edit() {
                         <UFormGroup label="Title" name="title">
                             <UInput v-model="state.title" placeholder="Title, e.g. Example Article" :disabled="loadingPage" />
                         </UFormGroup>
-                        <UFormGroup label="Description" name="description" class="col-span-2">
+                        <UFormGroup label="Description" name="description">
                             <UInput v-model="state.description" placeholder="Description, e.g. This is an example article" :disabled="loadingPage" />
                         </UFormGroup>
-                        <UFormGroup label="Content" name="content" class="col-span-2">
-                            <TiptapEditor class="col-span-2" v-model="state.content" :disabled="loadingPage"/>
+                        <UFormGroup label="Content" name="content">
+                            <TiptapEditor v-model="state.content" :disabled="loadingPage"/>
                         </UFormGroup>
                     </UForm>
                 </UDashboardPanelContent>