From d345be889e79dcb988705a54c6010bb786cec962 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Tue, 11 Jul 2023 16:37:04 +1000
Subject: [PATCH] work

---
 resources/js/components/SMEditor.vue          |   4 +-
 resources/js/components/SMInput.vue           | 133 ++-
 resources/js/components/SMTabGroup.vue        |  60 +-
 .../js/components/dialogs/SMDialogMedia.vue   | 830 ++++++++++--------
 resources/js/helpers/api.types.ts             |   5 +
 resources/js/helpers/types.ts                 |  21 +-
 resources/js/store/ApplicationStore.ts        |  38 +-
 resources/views/app.blade.php                 |   5 +
 8 files changed, 645 insertions(+), 451 deletions(-)

diff --git a/resources/js/components/SMEditor.vue b/resources/js/components/SMEditor.vue
index 1ccc605..7dbaeff 100644
--- a/resources/js/components/SMEditor.vue
+++ b/resources/js/components/SMEditor.vue
@@ -767,7 +767,7 @@ const setLink = () => {
 };
 
 const setImage = async () => {
-    let result = await openDialog(SMDialogMedia);
+    let result = await openDialog(SMDialogMedia, { allowUpload: true });
     if (result) {
         const mediaResult = result as Media;
         editor.value
@@ -775,6 +775,8 @@ const setImage = async () => {
             .focus()
             .setImage({
                 src: mediaResult.url,
+                title: mediaResult.title,
+                alt: mediaResult.description,
             })
             .run();
     }
diff --git a/resources/js/components/SMInput.vue b/resources/js/components/SMInput.vue
index f621dec..557fce0 100644
--- a/resources/js/components/SMInput.vue
+++ b/resources/js/components/SMInput.vue
@@ -1,5 +1,12 @@
 <template>
-    <div class="sm-input flex flex-col flex-1">
+    <div
+        :class="[
+            'sm-input',
+            'flex',
+            'flex-col',
+            'flex-1',
+            { 'sm-input-small': small },
+        ]">
         <div
             :class="[
                 'relative',
@@ -16,42 +23,78 @@
                     'transform-origin-top-left',
                     'text-gray',
                     'block',
-                    'translate-x-5',
                     'scale-100',
                     'transition',
-                    small ? ['text-sm', '-top-0.5'] : 'top-0.5',
+                    small
+                        ? ['translate-x-4', 'text-sm', '-top-1.5']
+                        : ['translate-x-5', 'top-0.5'],
                 ]"
                 >{{ label }}</label
             >
-            <input
-                :type="props.type"
-                :class="[
-                    'w-full',
-                    'text-gray-6',
-                    'flex-1',
-                    'px-4',
-                    small ? ['text-sm', 'pt-3'] : ['text-lg', 'pt-5'],
-                    feedbackInvalid ? 'border-red-6' : 'border-gray',
-                    feedbackInvalid ? 'border-2' : 'border-1',
-                    { 'bg-gray-1': disabled },
-                    { 'rounded-l-2': !slots.prepend },
-                    { 'rounded-r-2': !slots.append },
-                ]"
-                v-bind="{
-                    id: id,
-                    autofocus: props.autofocus,
-                    autocomplete: props.type === 'email' ? 'email' : null,
-                    spellcheck: props.type === 'email' ? false : null,
-                    autocorrect: props.type === 'email' ? 'on' : null,
-                    autocapitalize: props.type === 'email' ? 'off' : null,
-                }"
-                @focus="handleFocus"
-                @blur="handleBlur"
-                @input="handleInput"
-                @keyup="handleKeyup"
-                :value="value"
-                :disabled="disabled" />
-            <template v-if="slots.append"><slot name="append"></slot></template>
+            <template v-if="!props.textarea">
+                <input
+                    :type="props.type"
+                    :class="[
+                        'w-full',
+                        'text-gray-6',
+                        'flex-1',
+                        small
+                            ? ['text-sm', 'pt-3', 'px-3']
+                            : ['text-lg', 'pt-5', 'px-4'],
+                        feedbackInvalid ? 'border-red-6' : 'border-gray',
+                        feedbackInvalid ? 'border-2' : 'border-1',
+                        { 'bg-gray-1': disabled },
+                        { 'rounded-l-2': !slots.prepend },
+                        { 'rounded-r-2': !slots.append },
+                    ]"
+                    v-bind="{
+                        id: id,
+                        autofocus: props.autofocus,
+                        autocomplete: props.type === 'email' ? 'email' : null,
+                        spellcheck: props.type === 'email' ? false : null,
+                        autocorrect: props.type === 'email' ? 'on' : null,
+                        autocapitalize: props.type === 'email' ? 'off' : null,
+                    }"
+                    @focus="handleFocus"
+                    @blur="handleBlur"
+                    @input="handleInput"
+                    @keyup="handleKeyup"
+                    :value="value"
+                    :disabled="disabled" />
+                <template v-if="slots.append"
+                    ><slot name="append"></slot
+                ></template>
+            </template>
+            <template v-else>
+                <textarea
+                    :class="[
+                        'w-full',
+                        'text-gray-6',
+                        'flex-1',
+                        small
+                            ? ['text-sm', 'pt-3', 'px-3']
+                            : ['text-lg', 'pt-5', 'px-4'],
+                        feedbackInvalid ? 'border-red-6' : 'border-gray',
+                        feedbackInvalid ? 'border-2' : 'border-1',
+                        { 'bg-gray-1': disabled },
+                        { 'rounded-l-2': !slots.prepend },
+                        { 'rounded-r-2': !slots.append },
+                    ]"
+                    v-bind="{
+                        id: id,
+                        autofocus: props.autofocus,
+                        autocomplete: props.type === 'email' ? 'email' : null,
+                        spellcheck: props.type === 'email' ? false : null,
+                        autocorrect: props.type === 'email' ? 'on' : null,
+                        autocapitalize: props.type === 'email' ? 'off' : null,
+                    }"
+                    @focus="handleFocus"
+                    @blur="handleBlur"
+                    @input="handleInput"
+                    @keyup="handleKeyup"
+                    :value="value"
+                    :disabled="disabled"></textarea>
+            </template>
         </div>
         <p v-if="feedbackInvalid" class="px-2 pt-2 text-xs text-red-6">
             {{ feedbackInvalid }}
@@ -128,6 +171,11 @@ const props = defineProps({
         default: false,
         required: false,
     },
+    textarea: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
 });
 
 const slots = useSlots();
@@ -149,21 +197,21 @@ const label = ref(
         ? props.label
         : typeof props.control == "string"
         ? toTitleCase(props.control)
-        : ""
+        : "",
 );
 const value = ref(
     props.modelValue != undefined
         ? props.modelValue
         : control != null
         ? control.value
-        : ""
+        : "",
 );
 const id = ref(
     props.id != undefined
         ? props.id
         : typeof props.control == "string" && props.control.length > 0
         ? props.control
-        : generateRandomElementId()
+        : generateRandomElementId(),
 );
 const feedbackInvalid = ref(props.feedbackInvalid);
 const active = ref(value.value?.toString().length ?? 0 > 0);
@@ -174,7 +222,7 @@ watch(
     () => value.value,
     (newValue) => {
         active.value = newValue.toString().length > 0 || focused.value == true;
-    }
+    },
 );
 
 if (props.modelValue != undefined) {
@@ -182,7 +230,7 @@ if (props.modelValue != undefined) {
         () => props.modelValue,
         (newValue) => {
             value.value = newValue;
-        }
+        },
     );
 }
 
@@ -190,14 +238,14 @@ watch(
     () => props.feedbackInvalid,
     (newValue) => {
         feedbackInvalid.value = newValue;
-    }
+    },
 );
 
 watch(
     () => props.disabled,
     (newValue) => {
         disabled.value = newValue;
-    }
+    },
 );
 
 if (typeof control === "object" && control !== null) {
@@ -208,7 +256,7 @@ if (typeof control === "object" && control !== null) {
                 ? ""
                 : control.validation.result.invalidMessages[0];
         },
-        { deep: true }
+        { deep: true },
     );
 
     watch(
@@ -216,7 +264,7 @@ if (typeof control === "object" && control !== null) {
         (newValue) => {
             value.value = newValue;
         },
-        { deep: true }
+        { deep: true },
     );
 }
 
@@ -260,5 +308,8 @@ const handleKeyup = (event: Event) => {
     .input-active label {
         transform: translate(16px, 6px) scale(0.7);
     }
+    &.sm-input-small .input-active label {
+        transform: translate(12px, 7px) scale(0.7);
+    }
 }
 </style>
diff --git a/resources/js/components/SMTabGroup.vue b/resources/js/components/SMTabGroup.vue
index ead39fa..ca3f9f4 100644
--- a/resources/js/components/SMTabGroup.vue
+++ b/resources/js/components/SMTabGroup.vue
@@ -1,12 +1,13 @@
 <template>
-    <div class="tab-group">
-        <ul class="flex">
+    <div class="mb-4">
+        <ul class="flex relative">
             <li
                 v-for="tab in tabs"
                 :key="tab.id"
                 :class="[
-                    'p-4',
-                    '-mb-0.2',
+                    'px-4',
+                    'py-2',
+                    '-mb-1px',
                     'border-1',
                     'rounded-t-2',
                     'border-gray',
@@ -81,54 +82,3 @@ watch(
 
 provide("selectedTab", selectedTab);
 </script>
-
-<style lang="scss">
-.tab-group {
-    margin-bottom: 32px;
-
-    .tab-header {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-        border-bottom: 1px solid var(--tab-color-border);
-    }
-
-    .tab-item {
-        display: inline-block;
-        padding: 8px 16px;
-        border: 1px solid transparent;
-        margin-bottom: -1px;
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
-        color: var(--primary-color);
-        position: relative;
-
-        &.selected {
-            color: var(--tab-color-text);
-            background-color: var(--tab-color);
-            border-top: 1px solid var(--tab-color-border);
-            border-left: 1px solid var(--tab-color-border);
-            border-bottom: 1px solid var(--tab-color);
-            border-right: 1px solid var(--tab-color-border);
-
-            &::after {
-                display: block;
-                content: "";
-                position: absolute;
-                bottom: -2px;
-                height: 4px;
-                left: 0px;
-                right: 0px;
-                border-bottom: 3px solid var(--tab-color);
-                pointer-events: none;
-            }
-        }
-
-        &:hover:not(.selected) {
-            color: var(--primary-color);
-            background-color: var(--tab-color-hover);
-            border-bottom: 1px solid var(--tab-color-border);
-        }
-    }
-}
-</style>
diff --git a/resources/js/components/dialogs/SMDialogMedia.vue b/resources/js/components/dialogs/SMDialogMedia.vue
index 5bb8ca9..ce36ae5 100644
--- a/resources/js/components/dialogs/SMDialogMedia.vue
+++ b/resources/js/components/dialogs/SMDialogMedia.vue
@@ -1,92 +1,73 @@
 <template>
+    <div
+        v-if="showFileDrop"
+        class="fixed flex flex-items-center flex-justify-center justify-center top-0 left-0 w-full h-full z-4 bg-sky-800 bg-op-95 text-white"
+        @dragenter.prevent="handleDragEnter"
+        @dragover.prevent="handleDragOver"
+        @drop.prevent="handleDrop"
+        @dragleave.prevent="handleDragLeave">
+        <h2 class="pointer-events-none">Drop files to upload</h2>
+    </div>
     <div
         class="fixed top-0 left-0 w-full h-full z-2 bg-black bg-op-20 backdrop-blur"></div>
     <div
-        class="fixed top-0 left-0 w-full flex-justify-center flex z-3 max-h-screen">
+        class="fixed top-0 left-0 right-0 bottom-0 flex-justify-center flex z-3">
         <div
-            class="m-4 border-1 bg-white rounded-xl text-gray-5 px-12 py-8 w-full overflow-auto">
-            <div>
-                <SMLoading v-if="progressText" overlay :text="progressText" />
-                <h2 class="mb-4">Insert Media</h2>
-                <SMTabGroup v-model="selectedTab">
-                    <SMTab id="tab-browser" label="Media Browser">
-                        <div class="flex mb-4">
-                            <button
-                                title="View as grid"
-                                :class="[
-                                    'p-2',
-                                    'rounded-l-2',
-                                    'hover:shadow-md',
-                                    'transition',
-                                    'border-1',
-                                    'border-sky-600',
-                                    'cursor-pointer',
-                                    listActive != 'grid'
-                                        ? [
-                                              'text-sky-600',
-                                              'bg-white',
-                                              'hover:bg-sky-500',
-                                              'hover:text-white',
-                                          ]
-                                        : ['text-white', 'bg-sky-600'],
-                                ]"
-                                @click="handleClickLayout('grid')">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    class="h-5 w-5"
-                                    viewBox="0 0 24 24">
-                                    <path
-                                        d="M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3"
-                                        fill="currentColor" />
-                                </svg>
-                            </button>
-                            <button
-                                title="View as list"
-                                :class="[
-                                    'p-2',
-                                    'rounded-r-2',
-                                    'hover:shadow-md',
-                                    'transition',
-                                    'hover:bg-sky-500',
-                                    'border-1',
-                                    'border-sky-600',
-                                    'cursor-pointer',
-                                    'mr-4',
-                                    listActive != 'list'
-                                        ? [
-                                              'text-sky-600',
-                                              'bg-white',
-                                              'hover:bg-sky-500',
-                                              'hover:text-white',
-                                          ]
-                                        : ['text-white', 'bg-sky-600'],
-                                ]"
-                                @click="handleClickLayout('list')">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    class="h-5 w-5"
-                                    viewBox="0 0 24 24">
-                                    <path
-                                        d="M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z"
-                                        fill="currentColor" />
-                                </svg>
-                            </button>
+            class="flex flex-col m-4 border-1 bg-white rounded-xl text-gray-5 px-4 md:px-12 py-4 md:py-8 w-full overflow-hidden">
+            <SMLoading v-if="progressText" overlay :text="progressText" />
+            <h2 class="mb-4">Select or Upload Media</h2>
+            <SMTabGroup v-model="selectedTab" class="flex flex-col flex-1">
+                <SMTab
+                    id="tab-upload"
+                    label="Upload"
+                    :hide="!props.allowUpload"
+                    class="flex flex-1 flex-col flex-items-center flex-justify-center"
+                    @dragenter.prevent="handleDragEnter"
+                    @dragover.prevent="handleDragOver">
+                    <h2>Drop files to upload</h2>
+                    <p class="text-sm my-2">or</p>
+                    <button
+                        type="button"
+                        class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                        @click="handleClickSelectFile">
+                        Select Files
+                    </button>
+                    <p class="text-sm mt-4">
+                        {{ max_upload_size }}
+                    </p>
+                    <input
+                        v-if="props.allowUpload"
+                        id="file"
+                        ref="refUploadInput"
+                        type="file"
+                        style="display: none"
+                        :accept="computedAccepts"
+                        @change="handleChangeSelectFile" />
+                </SMTab>
+                <SMTab
+                    id="tab-browser"
+                    label="Media Browser"
+                    class="flex flex-1 !p-0">
+                    <div class="relative h-full w-full">
+                        <div
+                            ref="refMediaList"
+                            class="absolute top-0 left-0 bottom-0 md:right-60 p-4 overflow-auto">
                             <SMInput
                                 v-model="itemSearch"
                                 label="Search"
-                                class="toolbar-search"
+                                class="toolbar-search mb-4"
                                 small
                                 @keyup.enter="handleSearch"
                                 @blur="handleSearch">
                                 <template #append>
                                     <button
                                         type="button"
-                                        class="font-medium px-4 py-3.1 rounded-r-2 hover:shadow-md transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                                        class="font-medium px-3 rounded-r-2 hover:shadow-md transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
                                         @click="handleSearch">
                                         <svg
                                             xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 -960 960 960"
-                                            class="h-4">
+                                            class="h-5">
                                             <path
                                                 d="M796-121 533-384q-30 26-69.959 40.5T378-329q-108.162 0-183.081-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.125-57.5T572-585q0-81-56.875-138.5T377-781q-82.083 0-139.542 57.5Q180-666 180-585t57.458 138.5Q294.917-389 377-389Z"
                                                 fill="currentColor" />
@@ -94,13 +75,10 @@
                                     </button>
                                 </template>
                             </SMInput>
-                        </div>
-                        <div class="flex">
                             <div
-                                class="flex flex-justify-center overflow-auto w-full">
-                                <SMLoading v-if="mediaLoading" />
+                                class="flex flex-col flex-justify-center flex-items-center overflow-auto">
                                 <div
-                                    v-else-if="
+                                    v-if="
                                         !mediaLoading && mediaItems.length == 0
                                     "
                                     class="py-12 text-center">
@@ -117,21 +95,16 @@
                                     </p>
                                 </div>
                                 <ul
-                                    v-if="
-                                        !mediaLoading && mediaItems.length > 0
-                                    "
+                                    v-if="mediaItems.length > 0"
                                     :class="[
                                         'flex',
                                         'flex-1',
+                                        'p-2',
                                         'gap-4',
-                                        'border-1',
-                                        'mb-4',
-                                        'p-3',
                                         'overflow-auto',
                                         'flex-justify-center',
-                                        listActive == 'grid'
-                                            ? ['flex-row', 'flex-wrap']
-                                            : ['flex-col', 'flex-nowrap'],
+                                        'flex-row',
+                                        'flex-wrap',
                                     ]">
                                     <li
                                         v-for="item in mediaItems"
@@ -142,108 +115,166 @@
                                             'border-3',
                                             'p-1px',
                                             'flex-items-center',
-                                            listActive == 'grid'
-                                                ? ['h-50', 'w-60', 'flex-col']
-                                                : ['ha', 'w-full', 'flex-row'],
-                                            item.id == selected
-                                                ? 'border-sky-600'
+                                            'flex-col',
+                                            selected != null &&
+                                            item.id == selected.id
+                                                ? 'selected-checked'
                                                 : 'border-white',
                                         ]"
                                         @click="handleClickItem(item.id)"
                                         @dblclick="handleDblClickItem(item.id)">
                                         <div
                                             :class="[
-                                                listActive == 'grid'
-                                                    ? ['h-40', 'w-60', 'mr-0']
-                                                    : ['h-20', 'w-20', 'mr-2'],
+                                                'flex',
+                                                'flex-items-center',
+                                                'flex-justify-center',
+                                                'h-30',
+                                                'w-40',
                                                 'bg-contain',
                                                 'bg-center',
                                                 'bg-no-repeat',
                                             ]"
                                             :style="{
-                                                backgroundImage: `url('${mediaGetVariantUrl(
-                                                    item,
-                                                    'small',
-                                                )}')`,
-                                            }"></div>
-                                        <span
-                                            class="text-sm whitespace-nowrap overflow-hidden text-ellipsis block p-2"
-                                            >{{ item.title }}</span
-                                        >
+                                                backgroundImage:
+                                                    item.status === 'OK'
+                                                        ? `url('${mediaGetVariantUrl(
+                                                              item,
+                                                              'small',
+                                                          )}')`
+                                                        : 'none',
+                                                backgroundColor:
+                                                    item.status === 'OK'
+                                                        ? 'initial'
+                                                        : 'rgba(220,220,220,1)',
+                                            }">
+                                            <SMLoading
+                                                v-if="item.status !== 'OK'"
+                                                small />
+                                        </div>
                                     </li>
                                 </ul>
-                            </div>
-                        </div>
-                        <div>
-                            <SMPagination
-                                v-model="page"
-                                :total="totalItems"
-                                :per-page="perPage"
-                                small
-                                class="my-0" />
-                        </div>
-                    </SMTab>
-                    <SMTab id="tab-upload" label="Upload">
-                        <SMForm v-model="uploadForm" form-id="upload-form">
-                            <SMFormError v-model="uploadForm" />
-                            <div class="flex">
-                                <div class="text-center mr-4 w-60">
-                                    <div
-                                        class="mb-4 h-34 border rounded-2 bg-cover bg-center bg-no-repeat"
-                                        :style="{
-                                            backgroundImage:
-                                                uploadPreview.length > 0
-                                                    ? `url(${uploadPreview})`
-                                                    : `url(\'${uploadPreviewMissing}\')`,
-                                        }"></div>
+                                <SMLoading v-if="mediaLoading" />
+                                <div
+                                    v-if="
+                                        !mediaLoading && mediaItems.length > 0
+                                    "
+                                    class="mt-4 text-center">
+                                    <p class="text-xs text-black mb-4">
+                                        Showing {{ mediaItems.length }} of
+                                        {{ totalItems }} media items
+                                    </p>
                                     <button
-                                        type="button"
-                                        class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
-                                        @click="handleClickSelectFile">
-                                        Select File
+                                        v-if="mediaItems.length < totalItems"
+                                        class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-xs border-1 border-sky-600 text-sky-600 bg-white hover:bg-sky-500 hover:text-white cursor-pointer"
+                                        @click.prevent="handleLoadMore">
+                                        Load more
                                     </button>
                                 </div>
-                                <div class="flex-1">
+                            </div>
+                        </div>
+                        <div
+                            class="absolute top-0 right-0 bottom-0 w-60 p-4 border-l border-gray-3 bg-gray-1 rounded-r-2 overflow-auto hidden md:block">
+                            <div
+                                v-if="uploadFileList"
+                                class="flex flex-col text-xs border-b border-gray-3 pb-4 mb-4">
+                                <h3 class="text-xs mb-2">Uploading</h3>
+                                <div
+                                    class="w-full bg-gray-3 h-3 mb-2 rounded-2">
+                                    <div
+                                        class="bg-sky-600 h-3 rounded-2"
+                                        :style="{
+                                            width: `${
+                                                (100 / uploadFileList.length) *
+                                                (currentUploadFileNum - 1)
+                                            }%`,
+                                        }"></div>
+                                </div>
+                                <p class="m-0">
+                                    {{ currentUploadFileNum }} /
+                                    {{
+                                        uploadFileList && uploadFileList.length
+                                    }}
+                                    -
+                                    {{
+                                        uploadFileList &&
+                                        uploadFileList.length >=
+                                            currentUploadFileNum
+                                            ? uploadFileList[
+                                                  currentUploadFileNum - 1
+                                              ].name
+                                            : ""
+                                    }}
+                                </p>
+                            </div>
+                            <div v-if="selected != null">
+                                <div
+                                    class="flex flex-col text-xs border-b border-gray-3 pb-4">
+                                    <p class="m-0 text-bold">
+                                        {{ selected.title }}
+                                    </p>
+                                    <p class="m-0">
+                                        {{
+                                            new SMDate(
+                                                selected.created_at,
+                                            ).format("MMM dd, yyyy")
+                                        }}
+                                    </p>
+                                    <p class="m-0">
+                                        {{ bytesReadable(selected.size, 0) }}
+                                    </p>
+                                </div>
+                                <div class="py-2">
                                     <SMInput
+                                        class="mb-2"
                                         label="Title"
-                                        class="mb-4"
-                                        control="title"
-                                        form-id="upload-form"
-                                        :disabled="uploadPreview.length == 0" />
+                                        v-model:modelValue="selected.title"
+                                        :small="true" />
                                     <SMInput
-                                        type="textarea"
+                                        class="mb-2"
                                         label="Description"
-                                        control="description"
-                                        form-id="upload-form"
-                                        :disabled="uploadPreview.length == 0" />
+                                        textarea
+                                        v-model:modelValue="
+                                            selected.description
+                                        "
+                                        :small="true" />
                                 </div>
                             </div>
-                        </SMForm>
-                        <input
-                            v-if="props.allowUpload"
-                            id="file"
-                            ref="refUploadInput"
-                            type="file"
-                            style="display: none"
-                            :accept="computedAccepts"
-                            @change="handleChangeSelectFile" />
-                    </SMTab>
-                </SMTabGroup>
-                <div class="flex flex-justify-end">
-                    <button
-                        type="button"
-                        class="mr-4 font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
-                        @click="handleClickCancel">
-                        Cancel
-                    </button>
-                    <button
-                        type="button"
-                        :disabled="computedInsertDisabled"
-                        class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
-                        @click="handleClickInsert">
-                        Insert
-                    </button>
-                </div>
+                        </div>
+                    </div>
+                </SMTab>
+            </SMTabGroup>
+            <div class="flex flex-justify-end">
+                <button
+                    type="button"
+                    class="mr-4 font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                    @click="handleClickCancel">
+                    Cancel
+                </button>
+                <button
+                    type="button"
+                    :disabled="computedSelectDisabled"
+                    :class="[
+                        'font-medium',
+                        'px-6',
+                        'py-1.5',
+                        'rounded-md',
+                        'hover:shadow-md',
+                        'transition',
+                        'text-sm',
+                        'bg-sky-600',
+                        'hover:bg-sky-500',
+                        'text-white',
+                        'cursor-pointer',
+                        [
+                            'disabled-bg-gray',
+                            'disabled-text-white',
+                            'hover-disabled-bg-gray',
+                            'disabled-cursor-not-allowed',
+                        ],
+                    ]"
+                    @click="handleClickSelect">
+                    Select
+                </button>
             </div>
         </div>
     </div>
@@ -261,19 +292,24 @@ import {
 } from "vue";
 import { closeDialog } from "../SMDialog";
 import { api } from "../../helpers/api";
-import { Media, MediaCollection, MediaResponse } from "../../helpers/api.types";
+import {
+    ApiInfo,
+    Media,
+    MediaCollection,
+    MediaResponse,
+} from "../../helpers/api.types";
 import { useApplicationStore } from "../../store/ApplicationStore";
 import { mediaGetVariantUrl } from "../../helpers/media";
 import SMInput from "../SMInput.vue";
-import SMPagination from "../SMPagination.vue";
 import SMLoading from "../SMLoading.vue";
 import SMTabGroup from "../SMTabGroup.vue";
 import SMTab from "../SMTab.vue";
 import { Form, FormControl } from "../../helpers/form";
 import { And, Min, Required } from "../../helpers/validate";
-import SMForm from "../SMForm.vue";
-import SMFormError from "../SMFormError.vue";
 import { convertFileNameToTitle } from "../../helpers/utils";
+import { bytesReadable } from "../../helpers/types";
+import { SMDate } from "../../helpers/datetime";
+import { isUUID } from "../../helpers/uuid";
 
 const props = defineProps({
     mime: {
@@ -298,10 +334,17 @@ const props = defineProps({
  */
 const refUploadInput = ref<HTMLInputElement | null>(null);
 
+const refMediaList = ref<HTMLUListElement | null>(null);
+
 /**
  * The selected tab
  */
-const selectedTab = ref("");
+const selectedTab = ref("tab-browser");
+
+/**
+ * Max upload size
+ */
+const max_upload_size = ref(" ");
 
 /**
  * Upload form
@@ -313,20 +356,11 @@ let uploadForm = reactive(
     }),
 );
 
-const uploadPreview = ref("");
-const uploadPreviewMissing = ref(
-    'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -20 64 64"%3E%3Cpath d="M22 20.7L3.3 2L2 3.3L3 4.3V19C3 20.1 3.9 21 5 21H19.7L20.7 22L22 20.7M5 19V6.3L12.6 13.9L11.1 15.8L9 13.1L6 17H15.7L17.7 19H5M8.8 5L6.8 3H19C20.1 3 21 3.9 21 5V17.2L19 15.2V5H8.8" /%3E%3C/svg%3E',
-);
 /**
  * Is the media loading/busy
  */
 const mediaLoading = ref(true);
 
-/**
- * Classes to apply to the media browser
- */
-const mediaBrowserClasses = ref(["media-browser-grid"]);
-
 /**
  * Current page.
  */
@@ -345,16 +379,21 @@ const mediaItems: Ref<Media[]> = ref([]);
 /**
  * Selected media item id.
  */
-const selected = ref("");
+const selected: Ref<Media | null> = ref(null);
 
 /**
  * How many media items are we showing per page.
  */
 const perPage = ref(24);
 
+const showFileDrop = ref(false);
+
 const applicationStore = useApplicationStore();
 const progressText = ref("");
 
+const currentUploadFileNum = ref(0);
+const uploadFileList: Ref<File[]> = ref(null);
+
 /**
  * Returns the file types accepted.
  */
@@ -398,130 +437,15 @@ const handleClickCancel = () => {
 };
 
 /**
- * Handle user clicking the insert button.
+ * Handle user clicking the select button.
  */
-const handleClickInsert = async () => {
+const handleClickSelect = async () => {
     if (selectedTab.value == "tab-browser") {
-        if (selected.value !== "") {
-            const mediaItem = getMediaItem(selected.value);
-            if (mediaItem != null) {
-                closeDialog(mediaItem);
-                return;
-            }
-        }
-    } else if (selectedTab.value == "tab-upload") {
-        if (
-            refUploadInput.value != null &&
-            refUploadInput.value.files != null
-        ) {
-            const firstFile: File | undefined = refUploadInput.value.files[0];
-            if (firstFile != null) {
-                let submitFormData = new FormData();
-                submitFormData.append("file", firstFile);
-                submitFormData.append("title", uploadForm.controls.title.value);
-                submitFormData.append(
-                    "description",
-                    uploadForm.controls.description.value,
-                );
-                try {
-                    let result = await api.post({
-                        url: "/media",
-                        body: submitFormData,
-                        headers: {
-                            "Content-Type": "multipart/form-data",
-                        },
-                        progress: (progressData) =>
-                            (progressText.value = `Uploading File: ${Math.floor(
-                                (progressData.loaded / progressData.total) *
-                                    100,
-                            )}%`),
-                    });
-                    if (result.data) {
-                        const data = result.data as MediaResponse;
-                        if (
-                            data.medium.status != "OK" &&
-                            data.medium.status.startsWith("Failed") == false
-                        ) {
-                            progressText.value = `${data.medium.status}...`;
-                            let mediaProcessed = false;
-                            let timeout = 0;
-                            while (mediaProcessed == false) {
-                                timeout++;
-                                if (timeout >= 60) {
-                                    mediaProcessed = true;
-                                    uploadForm._message =
-                                        "The server is taking longer then expected to process the file.\nOnce the file has been processed, select it from the media browser.";
-                                } else {
-                                    await new Promise((resolve) =>
-                                        setTimeout(resolve, 500),
-                                    );
-                                    try {
-                                        let updateResult = await api.get({
-                                            url: "/media/{id}",
-                                            params: {
-                                                id: data.medium.id,
-                                            },
-                                        });
-                                        if (updateResult.data) {
-                                            const updateData =
-                                                updateResult.data as MediaResponse;
-
-                                            if (
-                                                updateData.medium.status == "OK"
-                                            ) {
-                                                data.medium = updateData.medium;
-                                                mediaProcessed = true;
-                                            } else if (
-                                                updateData.medium.status.startsWith(
-                                                    "Failed",
-                                                ) == true
-                                            ) {
-                                                throw "error";
-                                            } else {
-                                                progressText.value = `${updateData.medium.status}...`;
-                                            }
-                                        } else {
-                                            throw "error";
-                                        }
-                                    } catch {
-                                        mediaProcessed = true;
-                                        uploadForm._message =
-                                            "An server error occurred processing the file.";
-                                    }
-                                }
-                            }
-
-                            if (data.medium.status == "OK") {
-                                closeDialog(data.medium);
-                            } else {
-                                return;
-                            }
-                        }
-                    } else {
-                        uploadForm._message =
-                            "An unexpected response was received from the server";
-                    }
-                } catch (error) {
-                    if (error.status === 413) {
-                        uploadForm._message =
-                            "The selected file is larger than the maximum size limit";
-                    } else {
-                        uploadForm._message =
-                            error.response?.data?.message ||
-                            "An unexpected error occurred";
-                    }
-                } finally {
-                    progressText.value = "";
-                }
-            } else {
-                uploadForm._message = "No file was selected to upload";
-            }
-        } else {
-            uploadForm._message = "No file was selected to upload";
+        if (selected.value != null) {
+            closeDialog(selected.value);
+            return;
         }
     }
-
-    // closeDialog(false);
 };
 
 /**
@@ -529,7 +453,11 @@ const handleClickInsert = async () => {
  * @param {string} item_id The media id.
  */
 const handleClickItem = (item_id: string): void => {
-    selected.value = item_id;
+    if (isUUID(item_id)) {
+        selected.value = getMediaItem(item_id);
+    } else {
+        selected.value = null;
+    }
 };
 
 /**
@@ -537,24 +465,15 @@ const handleClickItem = (item_id: string): void => {
  * @param item_id The media id.
  */
 const handleDblClickItem = (item_id: string): void => {
-    const mediaItem = getMediaItem(item_id);
-    if (mediaItem != null) {
-        closeDialog(mediaItem);
-        return;
+    if (isUUID(item_id)) {
+        const mediaItem = getMediaItem(item_id);
+        if (mediaItem != null) {
+            closeDialog(mediaItem);
+            return;
+        }
+
+        closeDialog(false);
     }
-
-    closeDialog(false);
-};
-
-const listActive = ref("grid");
-
-/**
- * Handle Grid layout request click
- * @param name
- */
-const handleClickLayout = (name: string) => {
-    listActive.value = name;
-    mediaBrowserClasses.value = [`media-browser-${listActive.value}`];
 };
 
 /**
@@ -573,24 +492,194 @@ const handleChangeSelectFile = async () => {
     uploadForm._message = "";
 
     if (refUploadInput.value != null && refUploadInput.value.files != null) {
-        const firstFile: File | undefined = refUploadInput.value.files[0];
-        if (firstFile != null) {
-            if (uploadForm.controls.title.value.length == 0) {
-                uploadForm.controls.title.value = convertFileNameToTitle(
-                    firstFile.name,
-                );
-            }
+        handleFilesUpload(refUploadInput.value.files);
+        showFileBrowserTab();
+    }
+};
 
-            const reader = new FileReader();
-            reader.onload = (event) => {
-                const imgSrc = event.target.result;
-                uploadPreview.value = imgSrc as string;
-            };
-            reader.readAsDataURL(firstFile);
+const handleFilesUpload = (files: FileList) => {
+    Array.from(files).forEach((file, index) => {
+        console.log(index);
+        mediaItems.value.unshift({
+            id: (currentUploadFileNum.value + index + 1).toString(),
+            user_id: "",
+            title: "",
+            name: file.name,
+            mime_type: "",
+            permission: "",
+            size: 0,
+            status: "",
+            storage: "",
+            url: "",
+            description: "",
+            dimensions: "",
+            variants: {},
+            created_at: "",
+            updated_at: "",
+        });
+    });
+
+    if (uploadFileList.value != null) {
+        uploadFileList.value.push(...Array.from(files));
+    } else {
+        uploadFileList.value = Array.from(files);
+    }
+
+    startFilesUpload();
+};
+
+const startFilesUpload = () => {
+    if (uploadFileList.value != null) {
+        if (currentUploadFileNum.value < 1) {
+            currentUploadFileNum.value = 1;
+
+            while (currentUploadFileNum.value <= uploadFileList.value.length) {
+                let submitFormData = new FormData();
+    submitFormData.append("file", file);
+    submitFormData.append("title", convertFileNameToTitle(file.name));
+    submitFormData.append("description", "");
+    try {
+        let result = await api.post({
+            url: "/media",
+            body: submitFormData,
+            headers: {
+                "Content-Type": "multipart/form-data",
+            }
+        });
+        if(result.adata)
+    }
+    catch ((error) => {
+            /* empty */
+    });
+
+            }
         }
     }
 };
 
+// const firstFile: File | undefined = refUploadInput.value.files[0];
+//     if (firstFile != null) {
+//         if (uploadForm.controls.title.value.length == 0) {
+//             uploadForm.controls.title.value = convertFileNameToTitle(
+//                 firstFile.name,
+//             );
+//         }
+//         const reader = new FileReader();
+//         reader.onload = (event) => {
+//             const imgSrc = event.target.result;
+//             uploadPreview.value = imgSrc as string;
+//         };
+//         reader.readAsDataURL(firstFile);
+//     }
+// } else if (selectedTab.value == "tab-upload") {
+//     if (
+//         refUploadInput.value != null &&
+//         refUploadInput.value.files != null
+//     ) {
+//         const firstFile: File | undefined = refUploadInput.value.files[0];
+//         if (firstFile != null) {
+//             let submitFormData = new FormData();
+//             submitFormData.append("file", firstFile);
+//             submitFormData.append("title", uploadForm.controls.title.value);
+//             submitFormData.append(
+//                 "description",
+//                 uploadForm.controls.description.value,
+//             );
+//             try {
+//                 let result = await api.post({
+//                     url: "/media",
+//                     body: submitFormData,
+//                     headers: {
+//                         "Content-Type": "multipart/form-data",
+//                     },
+//                     progress: (progressData) =>
+//                         (progressText.value = `Uploading File: ${Math.floor(
+//                             (progressData.loaded / progressData.total) *
+//                                 100,
+//                         )}%`),
+//                 });
+//                 if (result.data) {
+//                     const data = result.data as MediaResponse;
+//                     if (
+//                         data.medium.status != "OK" &&
+//                         data.medium.status.startsWith("Failed") == false
+//                     ) {
+//                         progressText.value = `${data.medium.status}...`;
+//                         let mediaProcessed = false;
+//                         let timeout = 0;
+//                         while (mediaProcessed == false) {
+//                             timeout++;
+//                             if (timeout >= 60) {
+//                                 mediaProcessed = true;
+//                                 uploadForm._message =
+//                                     "The server is taking longer then expected to process the file.\nOnce the file has been processed, select it from the media browser.";
+//                             } else {
+//                                 await new Promise((resolve) =>
+//                                     setTimeout(resolve, 500),
+//                                 );
+//                                 try {
+//                                     let updateResult = await api.get({
+//                                         url: "/media/{id}",
+//                                         params: {
+//                                             id: data.medium.id,
+//                                         },
+//                                     });
+//                                     if (updateResult.data) {
+//                                         const updateData =
+//                                             updateResult.data as MediaResponse;
+//                                         if (
+//                                             updateData.medium.status == "OK"
+//                                         ) {
+//                                             data.medium = updateData.medium;
+//                                             mediaProcessed = true;
+//                                         } else if (
+//                                             updateData.medium.status.startsWith(
+//                                                 "Failed",
+//                                             ) == true
+//                                         ) {
+//                                             throw "error";
+//                                         } else {
+//                                             progressText.value = `${updateData.medium.status}...`;
+//                                         }
+//                                     } else {
+//                                         throw "error";
+//                                     }
+//                                 } catch {
+//                                     mediaProcessed = true;
+//                                     uploadForm._message =
+//                                         "An server error occurred processing the file.";
+//                                 }
+//                             }
+//                         }
+//                         if (data.medium.status == "OK") {
+//                             closeDialog(data.medium);
+//                         } else {
+//                             return;
+//                         }
+//                     }
+//                 } else {
+//                     uploadForm._message =
+//                         "An unexpected response was received from the server";
+//                 }
+//             } catch (error) {
+//                 if (error.status === 413) {
+//                     uploadForm._message =
+//                         "The selected file is larger than the maximum size limit";
+//                 } else {
+//                     uploadForm._message =
+//                         error.response?.data?.message ||
+//                         "An unexpected error occurred";
+//                 }
+//             } finally {
+//                 progressText.value = "";
+//             }
+//         } else {
+//             uploadForm._message = "No file was selected to upload";
+//         }
+//     } else {
+//         uploadForm._message = "No file was selected to upload";
+//     }
+
 let prevItemSearch = "";
 const itemSearch = ref("");
 
@@ -614,6 +703,7 @@ const handleLoad = async () => {
     let params = {
         page: page.value,
         limit: perPage.value,
+        status: "!Failed",
     };
 
     if (itemSearch.value.length > 0) {
@@ -632,7 +722,7 @@ const handleLoad = async () => {
                 const data = result.data as MediaCollection;
 
                 totalItems.value = data.total;
-                mediaItems.value = data.media;
+                mediaItems.value.push(...data.media);
             }
         })
         .catch((error) => {
@@ -649,13 +739,13 @@ const handleLoad = async () => {
  * @param {KeyboardEvent} event The keyboard event.
  * @returns {boolean} If the event was handled.
  */
-const eventKeyUp = (event: KeyboardEvent): boolean => {
+const eventKeyPress = (event: KeyboardEvent): boolean => {
     if (event.key === "Escape") {
         handleClickCancel();
         return true;
     } else if (event.key === "Enter") {
-        if (selected.value.length > 0) {
-            handleClickInsert();
+        if (selected.value != null) {
+            handleClickSelect();
         }
 
         return true;
@@ -665,11 +755,11 @@ const eventKeyUp = (event: KeyboardEvent): boolean => {
 };
 
 onMounted(() => {
-    applicationStore.addKeyUpListener(eventKeyUp);
+    applicationStore.addKeyPressListener(eventKeyPress);
 });
 
 onUnmounted(() => {
-    applicationStore.removeKeyUpListener(eventKeyUp);
+    applicationStore.removeKeyPressListener(eventKeyPress);
 });
 
 watch(page, () => {
@@ -677,17 +767,71 @@ watch(page, () => {
 });
 
 /**
- * Determine if the Insert button should be disabled
+ * Determine if the Select button should be disabled
  */
-const computedInsertDisabled = computed(() => {
+const computedSelectDisabled = computed(() => {
     if (selectedTab.value == "tab-browser") {
-        return selected.value.length == 0;
-    } else if (selectedTab.value == "tab-upload") {
-        return uploadPreview.value.length == 0;
+        return selected.value == null;
     }
 
-    return false;
+    return true;
 });
 
+const handleDragEnter = () => {
+    if (!showFileDrop.value) {
+        showFileDrop.value = true;
+    }
+};
+
+const handleDragOver = () => {
+    if (!showFileDrop.value) {
+        showFileDrop.value = true;
+    }
+};
+
+const handleDragLeave = () => {
+    if (showFileDrop.value) {
+        showFileDrop.value = false;
+    }
+};
+
+const handleDrop = (event) => {
+    showFileDrop.value = false;
+    handleFilesUpload(event.dataTransfer.files);
+    showFileBrowserTab();
+};
+
+const handleLoadMore = () => {
+    page.value++;
+};
+
+const showFileBrowserTab = () => {
+    selectedTab.value = "tab-browser";
+    window.setTimeout(() => {
+        refMediaList.value.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    }, 50);
+};
+
+// Get max upload size
+api.get({
+    url: "",
+})
+    .then((result) => {
+        if (result.data) {
+            const data = result.data as ApiInfo;
+
+            max_upload_size.value = `Maximum upload file size: ${bytesReadable(
+                data.max_upload_size,
+            )}.`;
+        }
+    })
+    .catch(() => {
+        /* empty */
+    });
+
 handleLoad();
 </script>
diff --git a/resources/js/helpers/api.types.ts b/resources/js/helpers/api.types.ts
index 7173348..0a9992e 100644
--- a/resources/js/helpers/api.types.ts
+++ b/resources/js/helpers/api.types.ts
@@ -167,3 +167,8 @@ export interface ShortlinkCollection {
 export interface ShortlinkResponse {
     shortlink: Shortlink;
 }
+
+export interface ApiInfo {
+    version: string;
+    max_upload_size: number;
+}
diff --git a/resources/js/helpers/types.ts b/resources/js/helpers/types.ts
index 9e6f6a4..940aa0e 100644
--- a/resources/js/helpers/types.ts
+++ b/resources/js/helpers/types.ts
@@ -1,6 +1,5 @@
 /**
  * Test if target is a boolean
- *
  * @param {unknown} target The varible to test
  * @returns {boolean} If the varible is a boolean type
  */
@@ -10,7 +9,6 @@ export function isBool(target: unknown): boolean {
 
 /**
  * Test if target is a number
- *
  * @param {unknown} target The varible to test
  * @returns {boolean} If the varible is a number type
  */
@@ -20,7 +18,6 @@ export function isNumber(target: unknown): boolean {
 
 /**
  * Test if target is an object
- *
  * @param {unknown} target The varible to test
  * @returns {boolean} If the varible is a object type
  */
@@ -30,7 +27,6 @@ export function isObject(target: unknown): boolean {
 
 /**
  * Test if target is a string
- *
  * @param {unknown} target The varible to test
  * @returns {boolean} If the varible is a string type
  */
@@ -40,11 +36,14 @@ export function isString(target: unknown): boolean {
 
 /**
  * Convert bytes to a human readable string.
- *
  * @param {number} bytes The bytes to convert.
+ * @param {number} decimalPlaces The number of places to force.
  * @returns {string} The bytes in human readable string.
  */
-export const bytesReadable = (bytes: number): string => {
+export const bytesReadable = (
+    bytes: number,
+    decimalPlaces: number = undefined,
+): string => {
     if (Number.isNaN(bytes)) {
         return "0 Bytes";
     }
@@ -59,12 +58,16 @@ export const bytesReadable = (bytes: number): string => {
     let tempBytes = bytes;
 
     while (
-        Math.round(Math.abs(tempBytes) * r) / r >= 1000 &&
+        Math.round(Math.abs(tempBytes) * r) / r >= 1024 &&
         u < units.length - 1
     ) {
-        tempBytes /= 1000;
+        tempBytes /= 1024;
         ++u;
     }
 
-    return tempBytes.toFixed(1) + " " + units[u];
+    if (decimalPlaces === undefined) {
+        return tempBytes.toFixed(2).replace(/\.?0+$/, "") + " " + units[u];
+    }
+
+    return tempBytes.toFixed(decimalPlaces) + " " + units[u];
 };
diff --git a/resources/js/store/ApplicationStore.ts b/resources/js/store/ApplicationStore.ts
index 15b5e2a..ff3ea03 100644
--- a/resources/js/store/ApplicationStore.ts
+++ b/resources/js/store/ApplicationStore.ts
@@ -1,12 +1,14 @@
 import { defineStore } from "pinia";
 
 type ApplicationStoreEventKeyUpCallback = (event: KeyboardEvent) => boolean;
+type ApplicationStoreEventKeyPressCallback = (event: KeyboardEvent) => boolean;
 
 export interface ApplicationStore {
     hydrated: boolean;
     unavailable: boolean;
     dynamicTitle: string;
     eventKeyUpStack: ApplicationStoreEventKeyUpCallback[];
+    eventKeyPressStack: ApplicationStoreEventKeyPressCallback[];
     pageLoaderTimeout: number;
     _addedListener: boolean;
 }
@@ -18,6 +20,7 @@ export const useApplicationStore = defineStore({
         unavailable: false,
         dynamicTitle: "",
         eventKeyUpStack: [],
+        eventKeyPressStack: [],
         pageLoaderTimeout: 0,
         _addedListener: false,
     }),
@@ -45,7 +48,7 @@ export const useApplicationStore = defineStore({
                             }
 
                             return true;
-                        }
+                        },
                     );
                 });
             }
@@ -53,7 +56,38 @@ export const useApplicationStore = defineStore({
 
         removeKeyUpListener(callback: ApplicationStoreEventKeyUpCallback) {
             this.eventKeyUpStack = this.eventKeyUpStack.filter(
-                (item: ApplicationStoreEventKeyUpCallback) => item !== callback
+                (item: ApplicationStoreEventKeyUpCallback) => item !== callback,
+            );
+        },
+
+        addKeyPressListener(callback: ApplicationStoreEventKeyPressCallback) {
+            this.eventKeyPressStack.push(callback);
+
+            if (!this._addedListener) {
+                document.addEventListener(
+                    "keypress",
+                    (event: KeyboardEvent) => {
+                        this.eventKeyPressStack.every(
+                            (item: ApplicationStoreEventKeyPressCallback) => {
+                                const result = item(event);
+                                if (result) {
+                                    return false;
+                                }
+
+                                return true;
+                            },
+                        );
+                    },
+                );
+            }
+        },
+
+        removeKeyPressListener(
+            callback: ApplicationStoreEventKeyPressCallback,
+        ) {
+            this.eventKeyPressStack = this.eventKeyPressStack.filter(
+                (item: ApplicationStoreEventKeyPressCallback) =>
+                    item !== callback,
             );
         },
     },
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 70ac7d5..4fbfe37 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -40,6 +40,8 @@
 		.bg-center { background-position: center; }
 		.whitespace-nowrap {white-space: nowrap; }
 		.spin{animation:rotate 1s infinite linear}
+		.text-xxs { font-size: 0.6rem; line-height: 0.75rem; }
+		.text-bold { font-weight: bold; }
 		.sm-html .ProseMirror { outline: none; }
 		.sm-html hr { border-top: 1px solid #aaa; margin: 1.5rem 0; }
 		.sm-html pre { padding: 0 1rem; line-height: 1rem; }
@@ -54,8 +56,11 @@
 		.sm-html p.warning::before { color: rgba(202,138,4,1); content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16' fill='rgba(202,138,4,1)' /%3E%3C/svg%3E"); }
 		.sm-html p.danger { border: 1px solid rgba(220,38,38,1); background-color: rgba(220,38,38,0.25); }
 		.sm-html p.danger::before { color: rgba(220,38,38,1); content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M8.27,3L3,8.27V15.73L8.27,21H15.73L21,15.73V8.27L15.73,3M8.41,7L12,10.59L15.59,7L17,8.41L13.41,12L17,15.59L15.59,17L12,13.41L8.41,17L7,15.59L10.59,12L7,8.41' fill='rgba(220,38,38,1)' /%3E%3C/svg%3E"); }
+		.sm-html img { display: block; margin: 1rem auto; max-height: 100%; max-width: 100%; }
 		.sm-editor::-webkit-scrollbar { background-color: transparent; width: 16px; }
 		.sm-editor::-webkit-scrollbar-thumb { background-color: #aaa; border: 4px solid transparent; border-radius: 8px; background-clip: padding-box; }
+		.selected-checked { border: 3px solid rgba(2,132,199,1); position: relative; }
+		.selected-checked::after { display: block; position: absolute; border:1px solid white; height: 1.5rem; width: 1.5rem; background-color: rgba(2,132,199,1); top: -0.4rem; right: -0.4rem; content: ""; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,7L9,19L2.712,12.712L5.556,9.892L9.029,13.358L18.186,4.189L21,7Z' fill='rgba(255,255,255,1)' /%3E%3C/svg%3E")}
 		@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
     </style>
 </head>