Added simple page transition.

frontend/assets/css/style.css

@@ -180,3 +180,11 @@ body {
 .is-text-contents {
     display: contents;
 }
+
+.page-enter-active, .page-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.page-enter-from, .page-leave-to {
+    opacity: 0;
+}

frontend/layouts/default.vue

@@ -286,12 +286,10 @@
         </div>
       </div>
 
-      <template v-if="!hasAPISettings">
+      <div>
-        <no-api/>
+        <NuxtPage v-if="!showConnection && hasAPISettings"/>
-      </template>
+        <no-api v-else/>
-      <template v-else>
+      </div>
-        <slot v-if="!showConnection && hasAPISettings"/>
-      </template>
       
       <div class="columns is-multiline is-mobile mt-3">
         <div class="column is-12 is-hidden-tablet has-text-centered">

frontend/nuxt.config.ts

@@ -18,7 +18,7 @@ export default defineNuxtConfig({
             ],
         },
         buildAssetsDir: "assets",
-
+        pageTransition: {name: 'page', mode: 'out-in'}
     },
     router: {
         options: {

frontend/pages/backend/[backend]/delete.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -21,7 +22,8 @@
       <template v-if="isDeleting">
         <div class="column is-12">
           <Message message_class="has-background-warning-90 has-text-dark" title="Deleting..."
-                 icon="fas fa-spin fa-exclamation-triangle" message="Delete operation is in progress. Please wait..."/>
+                   icon="fas fa-spin fa-exclamation-triangle"
+                   message="Delete operation is in progress. Please wait..."/>
         </div>
       </template>
       <template v-else-if="isLoading">
@@ -62,6 +64,7 @@
         </div>
       </template>
     </div>
+  </div>
 </template>
 
 <script setup>

frontend/pages/backend/[backend]/edit.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -22,8 +23,10 @@
         <Message title="For your information" message_class="has-background-warning-90 has-text-dark"
                  icon="fas fa-info-circle">
           <p>
-          This backend is using accesstoken instead of API keys, And this method untested and may not work as expected.
+            This backend is using accesstoken instead of API keys, And this method untested and may not work as
-          Please make sure you know what you are doing. Simple operations like <code>Import</code>, <code>Export</code>
+            expected.
+            Please make sure you know what you are doing. Simple operations like <code>Import</code>,
+            <code>Export</code>
             should work fine.
           </p>
           <p>
@@ -182,7 +185,8 @@
                   </div>
                   <p class="help">
                     <span v-if="'plex' === backend.type">
-                    Plex doesn't use standard API practice for identifying users. They use <code>X-Plex-Token</code> to
+                      Plex doesn't use standard API practice for identifying users. They use <code>X-Plex-Token</code>
+                      to
                       identify the user. The user selected here will only be used for webhook matching and filtering.
                     </span>
                     <span v-else>
@@ -338,13 +342,13 @@
         </form>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
 import 'assets/css/bulma-switch.css'
-import {notification, ucFirst} from '~/utils/index.js'
+import {notification, ucFirst} from '~/utils/index'
-import {ref} from "vue";
+import Message from '~/components/Message'
-import Message from "~/components/Message.vue";
 
 const id = useRoute().params.backend
 const redirect = useRoute().query?.redirect ?? `/backend/${id}`

frontend/pages/backend/[backend]/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline" v-if="isLoading || isError">
       <div class="column is-12">
         <Message message_class="is-background-info-90 has-text-dark" title="Loading" v-if="isLoading"
@@ -28,7 +29,8 @@
           <div class="is-pulled-right">
             <div class="field is-grouped">
               <p class="control">
-              <NuxtLink class="button is-danger" v-tooltip.bottom="'Delete Backend'" :to="`/backend/${backend}/delete`">
+                <NuxtLink class="button is-danger" v-tooltip.bottom="'Delete Backend'"
+                          :to="`/backend/${backend}/delete`">
                   <span class="icon"><i class="fas fa-trash"></i></span>
                 </NuxtLink>
               </p>
@@ -75,7 +77,8 @@
 
       <div class="columns" v-if="bHistory.length<1">
         <div class="column is-12">
-        <Message message_class="is-background-warning-80 has-text-dark" title="Warning" icon="fas fa-exclamation-circle"
+          <Message message_class="is-background-warning-80 has-text-dark" title="Warning"
+                   icon="fas fa-exclamation-circle"
                    message="No items were found. There are probably no items in the local database yet."/>
         </div>
       </div>
@@ -152,12 +155,13 @@
         </div>
       </div>
     </template>
+  </div>
 </template>
 
 <script setup>
 import moment from 'moment'
-import Message from '~/components/Message.vue'
+import Message from '~/components/Message'
-import {formatDuration, makeName, notification, TOOLTIP_DATE_FORMAT} from "~/utils/index.js";
+import {formatDuration, makeName, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
 
 const backend = ref(useRoute().params.backend)
 const bHistory = ref([])

frontend/pages/backend/[backend]/libraries.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -12,7 +13,8 @@
         <div class="is-pulled-right">
           <div class="field is-grouped">
             <p class="control">
-            <button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
+              <button class="button is-info" @click="loadContent" :disabled="isLoading"
+                      :class="{'is-loading':isLoading}">
                 <span class="icon"><i class="fas fa-sync"></i></span>
               </button>
             </p>
@@ -88,12 +90,13 @@
         </Message>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import {notification} from '~/utils/index.js'
+import {notification} from '~/utils/index'
 import {useStorage} from '@vueuse/core'
-import request from '~/utils/request.js'
+import request from '~/utils/request'
 
 const backend = useRoute().params.backend
 const items = ref([])

frontend/pages/backend/[backend]/mismatched.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -10,7 +11,8 @@
         <div class="is-pulled-right" v-if="hasLooked">
           <div class="field is-grouped">
             <p class="control">
-            <button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
+              <button class="button is-info" @click="loadContent" :disabled="isLoading"
+                      :class="{'is-loading':isLoading}">
                 <span class="icon"><i class="fas fa-sync"></i></span>
               </button>
             </p>
@@ -130,12 +132,13 @@
         </Message>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import {makeSearchLink, notification} from "~/utils/index.js";
+import {makeSearchLink, notification} from '~/utils/index'
-import {useStorage} from "@vueuse/core";
+import {useStorage} from '@vueuse/core'
-import Message from "~/components/Message.vue";
+import Message from '~/components/Message'
 
 const backend = useRoute().params.backend
 const items = ref([])

frontend/pages/backend/[backend]/search.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -10,7 +11,8 @@
         <div class="is-pulled-right">
           <div class="field is-grouped">
             <p class="control">
-            <button class="button is-info" @click="searchContent(true)" :disabled="isLoading || !searchField || !query"
+              <button class="button is-info" @click="searchContent(true)"
+                      :disabled="isLoading || !searchField || !query"
                       :class="{'is-loading':isLoading}">
                 <span class="icon"><i class="fas fa-sync"></i></span>
               </button>
@@ -192,14 +194,15 @@
         </Message>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import request from '~/utils/request.js'
+import request from '~/utils/request'
 import moment from 'moment'
-import {makeName, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
+import {makeName, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
-import Message from "~/components/Message.vue";
+import Message from '~/components/Message'
-import {useStorage} from "@vueuse/core";
+import {useStorage} from '@vueuse/core'
 
 const route = useRoute()
 const router = useRouter()

frontend/pages/backend/[backend]/sessions.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -11,7 +12,8 @@
         <div class="is-pulled-right">
           <div class="field is-grouped">
             <p class="control">
-            <button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
+              <button class="button is-info" @click="loadContent" :disabled="isLoading"
+                      :class="{'is-loading':isLoading}">
                 <span class="icon"><i class="fas fa-sync"></i></span>
               </button>
             </p>
@@ -59,10 +61,11 @@
         </div>
       </template>
     </div>
+  </div>
 </template>
 
 <script setup>
-import {formatDuration, notification} from "~/utils/index.js";
+import {formatDuration, notification} from "~/utils/index";
 
 const backend = useRoute().params.backend
 const items = ref([])

frontend/pages/backend/[backend]/unmatched.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -124,10 +125,11 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import {makeSearchLink, notification} from "~/utils/index.js";
+import {makeSearchLink, notification} from '~/utils/index'
 
 const backend = useRoute().params.backend
 const items = ref([])

frontend/pages/backend/[backend]/users.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -10,7 +11,8 @@
         <div class="is-pulled-right">
           <div class="field is-grouped">
             <p class="control">
-            <button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
+              <button class="button is-info" @click="loadContent" :disabled="isLoading"
+                      :class="{'is-loading':isLoading}">
                 <span class="icon"><i class="fas fa-sync"></i></span>
               </button>
             </p>
@@ -75,7 +77,8 @@
                  @toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
           <div class="notification-content content" v-if="show_page_tips">
             <ul>
-            <li>For <code>Plex</code> backends, if the <code>X-Plex-Token</code> is limited one, the users will not show
+              <li>For <code>Plex</code> backends, if the <code>X-Plex-Token</code> is limited one, the users will not
+                show
                 up. This is a limitation of the Plex API.
               </li>
             </ul>
@@ -83,26 +86,17 @@
         </Message>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import {notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
+import moment from 'moment'
+import {notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
 import {useStorage} from '@vueuse/core'
-import request from '~/utils/request.js'
+import request from '~/utils/request'
-import moment from "moment";
 
 const backend = useRoute().params.backend
-
+const items = ref()
-const items = ref({
-  "id": 14138718,
-  "uuid": "145bdb152ed42627",
-  "name": "wowkise",
-  "admin": true,
-  "guest": false,
-  "restricted": false,
-  "updatedAt": "2024-05-22T12:47:41+03:00"
-})
-
 const isLoading = ref(false)
 const show_page_tips = useStorage('show_page_tips', true)
 const loadContent = async () => {

frontend/pages/backends/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -14,7 +15,8 @@
               </button>
             </p>
             <p class="control">
-            <button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
+              <button class="button is-info" @click="loadContent" :disabled="isLoading"
+                      :class="{'is-loading':isLoading}">
                 <span class="icon"><i class="fas fa-sync"></i></span>
               </button>
             </p>
@@ -37,7 +39,8 @@
                    icon="fas fa-exclamation-circle">
             No backends found. Please add new backends to start using the tool. You can add new backend by
             <NuxtLink @click="toggleForm=true" v-text="'clicking here'"/>
-          or by clicking the <span class="icon is-clickable" @click="toggleForm=true"><i class="fas fa-add"></i></span>
+            or by clicking the <span class="icon is-clickable" @click="toggleForm=true"><i
+              class="fas fa-add"></i></span>
             button above.
           </Message>
         </div>
@@ -123,7 +126,8 @@
                 </div>
               </div>
               <div class="card-footer-item">
-              <NuxtLink :to="api_url + backend.urls.webhook" class="is-info is-light" @click.prevent="copyUrl(backend)">
+                <NuxtLink :to="api_url + backend.urls.webhook" class="is-info is-light"
+                          @click.prevent="copyUrl(backend)">
                   <span class="icon"><i class="fas fa-copy"></i></span>
                   <span class="is-hidden-mobile">Copy Webhook URL</span>
                   <span class="is-hidden-tablet">Webhook</span>
@@ -165,6 +169,7 @@
         </div>
       </template>
     </div>
+  </div>
 </template>
 
 <script setup>

frontend/pages/backup.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -15,7 +16,8 @@
               </button>
             </p>
             <p class="control">
-            <button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
+              <button class="button is-info" @click="loadContent" :disabled="isLoading"
+                      :class="{'is-loading':isLoading}">
                 <span class="icon"><i class="fas fa-sync"></i></span>
               </button>
             </p>
@@ -95,13 +97,14 @@
         </Message>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import request from '~/utils/request.js'
+import request from '~/utils/request'
 import moment from 'moment'
-import {humanFileSize, makeConsoleCommand, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
+import {humanFileSize, makeConsoleCommand, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
-import Message from '~/components/Message.vue'
+import Message from '~/components/Message'
 import {useStorage} from '@vueuse/core'
 
 useHead({title: 'Backups'})

frontend/pages/console.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <h1 class="title is-4">
@@ -56,7 +57,8 @@
                 <span class="icon-text">
                   <span class="icon has-text-danger"><i class="fas fa-exclamation-triangle"></i></span>
                   <span>Remove the <code>console</code> or <code>docker exec -ti watchstate console</code> from the
-                  input. You should use the command directly, For example i.e <code>db:list --output yaml</code></span>
+                    input. You should use the command directly, For example i.e <code>db:list --output
+                      yaml</code></span>
                 </span>
               </p>
               <p class="help" v-if="hasPlaceholder">
@@ -105,6 +107,7 @@
         <option v-for="item in recentCommands" :key="item" :value="item"/>
       </datalist>
     </div>
+  </div>
 </template>
 
 <script setup>

frontend/pages/env.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span id="env_page_title" class="title is-4">
@@ -135,7 +136,8 @@
                     </span>
                   </template>
                 </p>
-              <span class="card-header-icon" v-if="item.mask" @click="item.mask = false" v-tooltip="'Unmask the value'">
+                <span class="card-header-icon" v-if="item.mask" @click="item.mask = false"
+                      v-tooltip="'Unmask the value'">
                   <span class="icon"><i class="fas fa-unlock"></i></span>
                 </span>
               </header>
@@ -208,6 +210,7 @@
       </div>
 
     </div>
+  </div>
 </template>
 
 <script setup>

frontend/pages/events.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -274,20 +275,23 @@
                  @toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
           <ul>
             <li>
-            Events marked with <code>is Tainted: Yes</code>, are interesting but are too chaotic to be useful be used to
+              Events marked with <code>is Tainted: Yes</code>, are interesting but are too chaotic to be useful be used
+              to
               determine play state. However, we do use them to update local metadata & play progress.
             </li>
             <li>
               Events marked with <code>is Tainted: No</code>, are events that are used to determine play state.
             </li>
             <li>
-            If you are fast enough, you might be able to see the event before it is consumed by the backend. which allow
+              If you are fast enough, you might be able to see the event before it is consumed by the backend. which
+              allow
               you to delete it from the queue if you desire.
             </li>
           </ul>
         </Message>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>

frontend/pages/history/[id]/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix">
         <span class="title is-4">
@@ -458,10 +459,11 @@
         </Message>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import request from '~/utils/request.js'
+import request from '~/utils/request'
 import {
   ag,
   formatDuration,
@@ -471,10 +473,10 @@ import {
   notification,
   TOOLTIP_DATE_FORMAT,
   ucFirst
-} from '~/utils/index.js'
+} from '~/utils/index'
 import moment from 'moment'
-import {useStorage} from "@vueuse/core";
+import {useStorage} from '@vueuse/core'
-import Message from "~/components/Message.vue";
+import Message from '~/components/Message'
 
 const id = useRoute().params.id
 

frontend/pages/history/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -292,6 +293,7 @@
       </div>
 
     </div>
+  </div>
 </template>
 
 <script setup>

frontend/pages/ignore.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span id="env_page_title" class="title is-4">
@@ -277,15 +278,16 @@
         </Message>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import request from '~/utils/request.js'
+import 'assets/css/bulma-switch.css'
-import {awaitElement, copyText, notification, stringToRegex, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
+import request from '~/utils/request'
+import {awaitElement, copyText, notification, stringToRegex, TOOLTIP_DATE_FORMAT} from '~/utils/index'
 import {useStorage} from '@vueuse/core'
 import moment from 'moment'
-import 'assets/css/bulma-switch.css'
+import Message from '~/components/Message'
-import Message from "~/components/Message.vue";
 
 useHead({title: 'Ignored GUIDs'})
 

frontend/pages/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12">
         <h1 class="title is-4">
@@ -105,6 +106,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped>
@@ -116,10 +118,10 @@
 </style>
 
 <script setup>
-import request from '~/utils/request.js'
+import request from '~/utils/request'
 import moment from 'moment'
-import Message from '~/components/Message.vue'
+import Message from '~/components/Message'
-import {formatDuration, makeName, TOOLTIP_DATE_FORMAT} from '../utils/index.js'
+import {formatDuration, makeName, TOOLTIP_DATE_FORMAT} from '../utils/index'
 
 useHead({title: 'Index'})
 

frontend/pages/logs/[filename].vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -37,7 +38,8 @@
             </p>
 
             <p class="control">
-            <button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
+              <button class="button is-info" @click="loadContent" :disabled="isLoading"
+                      :class="{'is-loading':isLoading}">
                 <span class="icon"><i class="fas fa-sync"></i></span>
               </button>
             </p>
@@ -64,6 +66,7 @@
                  :message="error" :use-close="true" @close="router.push('/logs')"/>
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped>
@@ -75,12 +78,11 @@
 </style>
 
 <script setup>
-
+import Message from '~/components/Message'
-import Message from '~/components/Message.vue'
 import moment from 'moment'
 import {useStorage} from '@vueuse/core'
-import {notification} from '~/utils/index.js'
+import {notification} from '~/utils/index'
-import request from '~/utils/request.js'
+import request from '~/utils/request'
 
 const router = useRouter()
 const filename = useRoute().params.filename

frontend/pages/logs/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix">
         <span class="title is-4">
@@ -8,7 +9,8 @@
         <div class="is-pulled-right">
           <div class="field is-grouped">
             <p class="control">
-            <button class="button is-info" @click="loadContent" :disabled="isLoading" :class="{'is-loading':isLoading}">
+              <button class="button is-info" @click="loadContent" :disabled="isLoading"
+                      :class="{'is-loading':isLoading}">
                 <span class="icon"><i class="fas fa-sync"></i></span>
               </button>
             </p>
@@ -45,7 +47,8 @@
             <div class="columns is-multiline is-mobile has-text-centered">
               <div class="column is-6-mobile is-pre">
                 <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
-              <span class="has-tooltip" v-tooltip="`Last Update: ${moment(item.modified).format(TOOLTIP_DATE_FORMAT)}`">
+                <span class="has-tooltip"
+                      v-tooltip="`Last Update: ${moment(item.modified).format(TOOLTIP_DATE_FORMAT)}`">
                   {{ moment(item.modified).fromNow() }}
                 </span>
               </div>
@@ -64,13 +67,14 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import request from "~/utils/request.js";
+import request from '~/utils/request'
-import moment from "moment";
+import moment from 'moment'
-import {humanFileSize, TOOLTIP_DATE_FORMAT} from "~/utils/index.js";
+import {humanFileSize, TOOLTIP_DATE_FORMAT} from '~/utils/index'
-import Message from "~/components/Message.vue";
+import Message from '~/components/Message'
 
 useHead({title: 'Logs'})
 

frontend/pages/parity.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4 ">
@@ -265,6 +266,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>

frontend/pages/report.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -44,10 +45,11 @@
         </template>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import {copyText} from '~/utils/index.js'
+import {copyText} from '~/utils/index'
 
 useHead({title: `System Report`})
 

frontend/pages/reset.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -57,6 +58,7 @@
         </div>
       </template>
     </div>
+  </div>
 </template>
 
 <script setup>

frontend/pages/suppression.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span id="env_page_title" class="title is-4">
@@ -188,8 +189,10 @@
         <Message message_class="has-background-info-90 has-text-dark" :toggle="show_page_tips"
                  @toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fa fa-info-circle">
           <ul>
-          <li>The log suppressor work on almost everything that <code>WatchState</code> output. However, there are some
+            <li>The log suppressor work on almost everything that <code>WatchState</code> output. However, there are
-            exceptions. For example <code>system:suppress</code>, <code>system:report</code> command output will not be
+              some
+              exceptions. For example <code>system:suppress</code>, <code>system:report</code> command output will not
+              be
               filtered. If you find a a place where the rule supposed to work but it's not please report it on
               <span class="icon-text is-underlined">
                 <span class="icon"><i class="fas fa-brands fa-discord"></i></span>
@@ -198,12 +201,14 @@
                 </span>
               </span>, <strong>NOT</strong> on GitHub issues tracker.
             </li>
-          <li>The use case for this feature, is that sometimes it's out of your hands to fix a problem, and the constant
+            <li>The use case for this feature, is that sometimes it's out of your hands to fix a problem, and the
+              constant
               logging of the same error can be annoying. This feature allows you to suppress the error from being
               shown/recorded.
             </li>
             <li>
-            Rule of thumb, it's less compute intensive to use <code>contains</code> type, than <code>regex</code> type.
+              Rule of thumb, it's less compute intensive to use <code>contains</code> type, than <code>regex</code>
+              type.
               As each rule will be tested against every single outputted message. The less rules you have, the better.
               Having many rules will lead to performance degradation.
             </li>
@@ -211,14 +216,15 @@
         </Message>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
 import 'assets/css/bulma-switch.css'
-import request from '~/utils/request.js'
+import request from '~/utils/request'
-import {notification} from '~/utils/index.js'
+import {notification} from '~/utils/index'
 import {useStorage} from '@vueuse/core'
-import Message from '~/components/Message.vue'
+import Message from '~/components/Message'
 
 useHead({title: 'Log Suppressor'})
 

frontend/pages/tasks.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="columns is-multiline">
       <div class="column is-12 is-clearfix is-unselectable">
         <span class="title is-4">
@@ -156,7 +157,8 @@
         <Message message_class="has-background-info-90 has-text-dark" :toggle="show_page_tips"
                  @toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
           <ul>
-          <li>For long running tasks like <code>Import</code> and <code>Export</code>, you should queue the task to run
+            <li>For long running tasks like <code>Import</code> and <code>Export</code>, you should queue the task to
+              run
               in background. As running them via web console will take longer if you have many backends and/or has large
               libraries.
             </li>
@@ -174,6 +176,7 @@
         </Message>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>