Release 4.1.5

Cleans up log viewer and adds zigzag line for skipped logs (#1885 )
* Cleans up log viewer and adds zigzag line for skipped logs * Updates components * Cleans up css * Cleans up more css * Fixes tests * Fixes typing * Fixes typescript errors * Fixes selected color
2022-09-20 13:15:04 -07:00 · 2022-09-20 13:14:31 -07:00 · 2022-09-19 10:32:35 -07:00 · 2022-09-19 09:57:16 -07:00 · 2022-09-16 09:09:21 -07:00 · 2022-09-16 08:37:03 -07:00
27 changed files with 384 additions and 342 deletions
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -11,18 +11,16 @@ declare module '@vue/runtime-core' {
    CilColumns: typeof import('~icons/cil/columns')['default']
    CilFindInPage: typeof import('~icons/cil/find-in-page')['default']
    ComplexLogItem: typeof import('./components/LogViewer/ComplexLogItem.vue')['default']
-    ComplexPayload: typeof import('./components/LogViewer/ComplexPayload.vue')['default']
    ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default']
    ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default']
-    copy: typeof import('./components/LogViewer/DockerEventLogItem copy.vue')['default']
    DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
    DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
    FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
    FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
    InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
-    JSONPayload: typeof import('./components/LogViewer/JSONPayload.vue')['default']
    LogActionsToolbar: typeof import('./components/LogViewer/LogActionsToolbar.vue')['default']
    LogContainer: typeof import('./components/LogViewer/LogContainer.vue')['default']
+    LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
    LogEventSource: typeof import('./components/LogViewer/LogEventSource.vue')['default']
    LogViewer: typeof import('./components/LogViewer/LogViewer.vue')['default']
    LogViewerWithSource: typeof import('./components/LogViewer/LogViewerWithSource.vue')['default']
@@ -46,6 +44,6 @@ declare module '@vue/runtime-core' {
    SideMenu: typeof import('./components/SideMenu.vue')['default']
    SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default']
    SkippedEntriesLogItem: typeof import('./components/LogViewer/SkippedEntriesLogItem.vue')['default']
-    StringPayload: typeof import('./components/LogViewer/StringPayload.vue')['default']
+    ZigZag: typeof import('./components/LogViewer/ZigZag.vue')['default']
  }
 }
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -37,7 +37,7 @@ import fuzzysort from "fuzzysort";
 import { type Container } from "@/types/Container";

 const { maxResults = 20 } = defineProps<{
-  maxResults: number;
+  maxResults?: number;
 }>();

 const emit = defineEmits(["close"]);
--- a/assets/components/LogViewer/ComplexLogItem.vue
+++ b/assets/components/LogViewer/ComplexLogItem.vue
@@ -1,14 +1,19 @@
 <template>
-  <div>
-    <ul class="fields" @click="expanded = !expanded">
-      <li v-for="(value, name) in logEntry.message">
-        <template v-if="value">
-          <span class="has-text-grey">{{ name }}=</span>
-          <span class="has-text-weight-bold" v-html="markSearch(value)"></span>
-        </template>
-      </li>
-    </ul>
-    <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
+  <div class="columns is-1 is-variable">
+    <div class="column is-narrow" v-if="showTimestamp">
+      <log-date :date="logEntry.date"></log-date>
+    </div>
+    <div class="column">
+      <ul class="fields" @click="expanded = !expanded">
+        <li v-for="(value, name) in logEntry.message">
+          <template v-if="value">
+            <span class="has-text-grey">{{ name }}=</span>
+            <span class="has-text-weight-bold" v-html="markSearch(value)"></span>
+          </template>
+        </li>
+      </ul>
+      <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
+    </div>
  </div>
 </template>
 <script lang="ts" setup>
@@ -42,7 +47,6 @@ let expanded = $ref(false);

  li {
    display: inline-block;
-    margin-left: 1em;
  }
 }
 </style>
--- a/assets/components/LogViewer/DockerEventLogItem.vue
+++ b/assets/components/LogViewer/DockerEventLogItem.vue
@@ -19,9 +19,6 @@ span {
  }
  &.text {
    white-space: pre-wrap;
-    &::before {
-      content: " ";
-    }
  }
 }
 </style>
--- a/assets/components/LogViewer/LogActionsToolbar.vue
+++ b/assets/components/LogViewer/LogActionsToolbar.vue
@@ -43,7 +43,6 @@
 <script lang="ts" setup>
 import { type ComputedRef } from "vue";
 import { type Container } from "@/types/Container";
-import hotkeys from "hotkeys-js";

 const { showSearch } = useSearchFilter();
 const { base } = config;
@@ -52,15 +51,7 @@ const { onClearClicked = (e: Event) => {} } = defineProps<{
  onClearClicked: (e: Event) => void;
 }>();

-const onHotkey = (event: Event) => {
-  onClearClicked(event);
-  event.preventDefault();
-};
-
 const container = inject("container") as ComputedRef<Container>;
-
-onMounted(() => hotkeys("shift+command+l, shift+ctrl+l", onHotkey));
-onUnmounted(() => hotkeys.unbind("shift+command+l, shift+ctrl+l", onHotkey));
 </script>

 <style lang="scss" scoped>
--- a/assets/components/LogViewer/LogDate.vue
+++ b/assets/components/LogViewer/LogDate.vue
@@ -0,0 +1,45 @@
+<template>
+  <relative-time :date="date" class="date"></relative-time>
+</template>
+<script lang="ts" setup>
+defineProps<{
+  date: Date;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.date {
+  padding-left: 5px;
+  padding-right: 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+@media (prefers-color-scheme: dark) {
+  .date {
+    background-color: #262626;
+    color: #258ccd;
+  }
+}
+
+[data-theme="dark"] {
+  .date {
+    background-color: #262626;
+    color: #258ccd;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .date {
+    background-color: #f0f0f0;
+    color: #009900;
+  }
+}
+
+[data-theme="light"] {
+  .date {
+    background-color: #f0f0f0;
+    color: #009900;
+  }
+}
+</style>
--- a/assets/components/LogViewer/LogEventSource.spec.ts
+++ b/assets/components/LogViewer/LogEventSource.spec.ts
@@ -6,7 +6,7 @@ import LogEventSource from "./LogEventSource.vue";
 import LogViewer from "./LogViewer.vue";
 import { settings } from "../../composables/settings";
 import { useSearchFilter } from "@/composables/search";
-import { vi, describe, expect, beforeEach, test, beforeAll, afterAll, afterEach } from "vitest";
+import { vi, describe, expect, beforeEach, test, afterEach } from "vitest";
 import { computed, nextTick } from "vue";
 import { createRouter, createWebHistory } from "vue-router";

@@ -23,6 +23,7 @@ describe("<LogEventSource />", () => {

  beforeEach(() => {
    global.EventSource = EventSource;
+    // @ts-ignore
    window.scrollTo = vi.fn();
    global.IntersectionObserver = vi.fn().mockImplementation(() => ({
      observe: vi.fn(),
@@ -47,6 +48,9 @@ describe("<LogEventSource />", () => {
  ) {
    settings.value.hourStyle = hourStyle;
    search.searchFilter.value = searchFilter;
+    if(searchFilter){
+      search.showSearch.value = true;
+    }

    const router = createRouter({
      history: createWebHistory("/"),
@@ -109,6 +113,7 @@ describe("<LogEventSource />", () => {
    vi.runAllTimers();
    await nextTick();

+    // @ts-ignore
    const [message, _] = wrapper.vm.messages;
    expect(message).toMatchSnapshot();
  });
--- a/assets/components/LogViewer/LogEventSource.vue
+++ b/assets/components/LogViewer/LogEventSource.vue
@@ -12,7 +12,7 @@ const emit = defineEmits<{
 }>();

 const container = inject("container") as ComputedRef<Container>;
-const { connect, messages, loadOlderLogs } = useLogStream(container);
+const { messages, loadOlderLogs } = useLogStream(container);

 const beforeLoading = () => emit("loading-more", true);
 const afterLoading = () => emit("loading-more", false);
@@ -22,6 +22,4 @@ defineExpose({
 });

 const fetchMore = () => loadOlderLogs({ beforeLoading, afterLoading });
-
-connect();
 </script>
--- a/assets/components/LogViewer/LogViewer.vue
+++ b/assets/components/LogViewer/LogViewer.vue
@@ -22,10 +22,7 @@
          </a>
        </dropdown-menu>
      </div>
-      <div class="line">
-        <span class="date" v-if="showTimestamp"> <relative-time :date="item.date"></relative-time></span>
-        <component :is="item.getComponent()" :log-entry="item" :visible-keys="visibleKeys.value"></component>
-      </div>
+      <component :is="item.getComponent()" :log-entry="item" :visible-keys="visibleKeys.value"></component>
    </li>
  </ul>
 </template>
@@ -34,7 +31,7 @@
 import { type ComputedRef, toRaw } from "vue";
 import { useRouteHash } from "@vueuse/router";
 import { type Container } from "@/types/Container";
-import { type JSONObject, type LogEntry } from "@/models/LogEntry";
+import { type JSONObject, LogEntry } from "@/models/LogEntry";

 const props = defineProps<{
  messages: LogEntry<string | JSONObject>[];
@@ -50,10 +47,10 @@ const visible = filteredPayload(messages);
 const filtered = filteredMessages(visible);

 const events = ref<HTMLElement>();
-let lastSelectedItem = ref<LogEntry<string | JSONObject>>();
+let lastSelectedItem: LogEntry<string | JSONObject> | undefined = $ref(undefined);

 function handleJumpLineSelected(e: Event, item: LogEntry<string | JSONObject>) {
-  lastSelectedItem.value = item;
+  lastSelectedItem = item;
  resetSearch();
 }

@@ -71,12 +68,6 @@ watch(
  padding: 1em 0;
  font-family: SFMono-Regular, Consolas, Liberation Mono, monaco, Menlo, monospace;

-  &.disable-wrap {
-    .line {
-      white-space: nowrap;
-    }
-  }
-
  & > li {
    display: flex;
    word-wrap: break-word;
@@ -89,19 +80,10 @@ watch(
      background-color: rgba(125, 125, 125, 0.08);
    }

-    &.selected .date {
-      background-color: var(--menu-item-active-background-color);
+    &.selected {
+      border: 1px var(--secondary-color) solid;
+    }

-      color: var(--text-color);
-    }
-    &.selected > .date {
-      background-color: white;
-    }
-    & > .line {
-      margin: auto 0;
-      width: 100%;
-      display: flex;
-    }
    & > .line-options {
      display: flex;
      flex-direction: row-reverse;
@@ -121,55 +103,4 @@ watch(
    font-size: 120%;
  }
 }
-
-@media (prefers-color-scheme: dark) {
-  .date {
-    background-color: #262626;
-    color: #258ccd;
-  }
-}
-
-[data-theme="dark"] {
-  .date {
-    background-color: #262626;
-    color: #258ccd;
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  .date {
-    background-color: #f0f0f0;
-    color: #009900;
-  }
-}
-
-[data-theme="light"] {
-  .date {
-    background-color: #f0f0f0;
-    color: #009900;
-  }
-}
-
-.date {
-  padding-left: 5px;
-  padding-right: 5px;
-  border-radius: 3px;
-  white-space: nowrap;
-}
-
-:deep(mark) {
-  border-radius: 2px;
-  background-color: var(--secondary-color);
-  animation: pops 200ms ease-out;
-  display: inline-block;
-}
-
-@keyframes pops {
-  0% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1.05);
-  }
-}
 </style>
--- a/assets/components/LogViewer/SimpleLogItem.vue
+++ b/assets/components/LogViewer/SimpleLogItem.vue
@@ -1,5 +1,10 @@
 <template>
-  <span class="text" v-html="colorize(logEntry.message)"></span>
+  <div class="columns is-1 is-variable">
+    <div class="column is-narrow" v-if="showTimestamp">
+      <log-date :date="logEntry.date"></log-date>
+    </div>
+    <div class="text column" v-html="colorize(logEntry.message)"></div>
+  </div>
 </template>
 <script lang="ts" setup>
 import { SimpleLogEntry } from "@/models/LogEntry";
@@ -23,8 +28,5 @@ const colorize = (value: string) => markSearch(ansiConvertor.toHtml(value));

 .text {
  white-space: pre-wrap;
-  &::before {
-    content: " ";
-  }
 }
 </style>
--- a/assets/components/LogViewer/SkippedEntriesLogItem.vue
+++ b/assets/components/LogViewer/SkippedEntriesLogItem.vue
@@ -1,5 +1,10 @@
 <template>
-  <span class="text">{{ $t("error.logs-skipped", { total: logEntry.totalSkipped }) }}</span>
+  <div class="is-flex-grow-1 has-text-centered my-4">
+    <div class="is-relative">
+      <zig-zag class="is-overlay mt-2"></zig-zag>
+      <span class="text is-relative py-2 px-4">{{ $t("error.logs-skipped", { total: logEntry.totalSkipped }) }}</span>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
 import { SkippedLogsEntry } from "@/models/LogEntry";
@@ -10,15 +15,9 @@ defineProps<{
 </script>

 <style lang="scss" scoped>
-span {
-  &.text {
-    flex-grow: 1;
-    text-align: center;
-    font-weight: bold;
-    white-space: pre-wrap;
-    &::before {
-      content: " ";
-    }
-  }
+.text {
+  font-weight: bold;
+  white-space: pre-wrap;
+  background-color: var(--body-background-color);
 }
 </style>
--- a/assets/components/LogViewer/ZigZag.vue
+++ b/assets/components/LogViewer/ZigZag.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg width="100%" height="8" class="zigzag">
+    <defs>
+      <pattern id="zigzag" x="0" y="0" width="30" height="8" patternUnits="userSpaceOnUse">
+        <line x1="0" y1="0" x2="15" y2="8" class="line" />
+        <line x1="15" y1="8" x2="30" y2="0" class="line" />
+      </pattern>
+    </defs>
+    <rect x="0" y="0" width="100%" height="100%" fill="url(#zigzag)"></rect>
+  </svg>
+</template>
+
+<style lang="scss" scoped>
+.line {
+  stroke: var(--primary-color);
+  stroke-width: 1;
+  stroke-linecap: round;
+}
+</style>
--- a/assets/components/LogViewer/snapshots/LogEventSource.spec.ts.snap
+++ b/assets/components/LogViewer/snapshots/LogEventSource.spec.ts.snap
@@ -5,12 +5,12 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 1
  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
                    </svg></div>
@@ -23,7 +23,10 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 1
        </div>
      </div>
    </div>
-    <div class=\\"line\\" data-v-2e92daca=\\"\\"><span class=\\"date\\" data-v-2e92daca=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-2e92daca=\\"\\">06/12/2019 10:55:42 AM</time></span><span class=\\"text\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></div>
+    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
+      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
+      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+    </div>
  </li>
 </ul>"
 `;
@@ -33,12 +36,12 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 2
  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
                    </svg></div>
@@ -51,7 +54,10 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 2
        </div>
      </div>
    </div>
-    <div class=\\"line\\" data-v-2e92daca=\\"\\"><span class=\\"date\\" data-v-2e92daca=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-2e92daca=\\"\\">06/12/2019 10:55:42</time></span><span class=\\"text\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></div>
+    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
+      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42</time></div>
+      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+    </div>
  </li>
 </ul>"
 `;
@@ -61,12 +67,12 @@ exports[`<LogEventSource /> > render html correctly > should render messages 1`]
  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
                    </svg></div>
@@ -79,7 +85,10 @@ exports[`<LogEventSource /> > render html correctly > should render messages 1`]
        </div>
      </div>
    </div>
-    <div class=\\"line\\" data-v-2e92daca=\\"\\"><span class=\\"date\\" data-v-2e92daca=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-2e92daca=\\"\\">06/12/2019 10:55:42 AM</time></span><span class=\\"text\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">This is a message.</span></div>
+    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
+      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
+      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">This is a message.</div>
+    </div>
  </li>
 </ul>"
 `;
@@ -89,12 +98,12 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
                    </svg></div>
@@ -107,7 +116,10 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
        </div>
      </div>
    </div>
-    <div class=\\"line\\" data-v-2e92daca=\\"\\"><span class=\\"date\\" data-v-2e92daca=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-2e92daca=\\"\\">06/12/2019 10:55:42 AM</time></span><span class=\\"text\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></span></div>
+    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
+      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
+      <div class=\\"text column\\" data-v-a49e52d4=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></div>
+    </div>
  </li>
 </ul>"
 `;
@@ -115,14 +127,14 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
 exports[`<LogEventSource /> > render html correctly > should render messages with filter 1`] = `
 "<ul class=\\"events medium\\" data-v-2e92daca=\\"\\">
  <li data-key=\\"2\\" class=\\"\\" data-v-2e92daca=\\"\\">
-    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
+    <div class=\\"line-options\\" data-v-2e92daca=\\"\\">
      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#2\\" data-v-2e92daca=\\"\\">
              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
                    </svg></div>
@@ -135,7 +147,10 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
        </div>
      </div>
    </div>
-    <div class=\\"line\\" data-v-2e92daca=\\"\\"><span class=\\"date\\" data-v-2e92daca=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-2e92daca=\\"\\">06/12/2019 10:55:42 AM</time></span><span class=\\"text\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\"><mark>test</mark> bar</span></div>
+    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
+      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
+      <div class=\\"text column\\" data-v-a49e52d4=\\"\\"><mark>test</mark> bar</div>
+    </div>
  </li>
 </ul>"
 `;
@@ -145,12 +160,12 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
  <li data-key=\\"1\\" class=\\"\\" data-v-2e92daca=\\"\\">
    <div class=\\"line-options\\" data-v-2e92daca=\\"\\" style=\\"display: none;\\">
      <div class=\\"dropdown is-hoverable is-last is-top minimal\\" data-v-539164cb=\\"\\" data-v-2e92daca=\\"\\">
-        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
+        <div class=\\"dropdown-trigger\\" data-v-539164cb=\\"\\"><button class=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"dropdown-menu\\" data-v-539164cb=\\"\\"><span class=\\"icon\\" data-v-539164cb=\\"\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\" data-v-539164cb=\\"\\"><path fill=\\"currentColor\\" d=\\"M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z\\"></path></svg></span></button></div>
        <div class=\\"dropdown-menu\\" id=\\"dropdown-menu\\" role=\\"menu\\" data-v-539164cb=\\"\\">
          <div class=\\"dropdown-content\\" data-v-539164cb=\\"\\"><a class=\\"dropdown-item\\" href=\\"#1\\" data-v-2e92daca=\\"\\">
              <div class=\\"level is-justify-content-start\\" data-v-2e92daca=\\"\\">
                <div class=\\"level-left\\" data-v-2e92daca=\\"\\">
-                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
+                  <div class=\\"level-item\\" data-v-2e92daca=\\"\\"><svg viewBox=\\"0 0 512 512\\" width=\\"1.2em\\" height=\\"1.2em\\" class=\\"mr-4\\" data-v-2e92daca=\\"\\">
                      <path fill=\\"currentColor\\" d=\\"M334.627 16H48v480h424V153.373ZM440 464H80V48h241.373L440 166.627Z\\"></path>
                      <path fill=\\"currentColor\\" d=\\"M239.861 152a95.861 95.861 0 1 0 53.624 175.284l68.03 68.029l22.627-22.626l-67.5-67.5A95.816 95.816 0 0 0 239.861 152ZM176 247.861a63.862 63.862 0 1 1 63.861 63.861A63.933 63.933 0 0 1 176 247.861Z\\"></path>
                    </svg></div>
@@ -163,7 +178,10 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
        </div>
      </div>
    </div>
-    <div class=\\"line\\" data-v-2e92daca=\\"\\"><span class=\\"date\\" data-v-2e92daca=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" data-v-2e92daca=\\"\\">06/12/2019 10:55:42 AM</time></span><span class=\\"text\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</span></div>
+    <div class=\\"columns is-1 is-variable\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
+      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
+      <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
+    </div>
  </li>
 </ul>"
 `;
--- a/assets/components/MobileMenu.vue
+++ b/assets/components/MobileMenu.vue
@@ -46,10 +46,10 @@ const store = useContainerStore();
 const route = useRoute();
 const { visibleContainers, allContainersById } = storeToRefs(store);

-const showNav = ref(false);
+let showNav = $ref(false);

 watch(route, () => {
-  showNav.value = false;
+  showNav = false;
 });
 </script>
 <style scoped lang="scss">
--- a/assets/components/Search.vue
+++ b/assets/components/Search.vue
@@ -22,26 +22,24 @@
 </template>

 <script lang="ts" setup>
-import hotkeys from "hotkeys-js";
-
+const { Meta_F, Ctrl_F, esc } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if ((e.ctrlKey || e.metaKey) && e.key === "f" && e.type === "keydown") e.preventDefault();
+  },
+});
 const input = ref<HTMLInputElement>();
 const { searchFilter, showSearch, resetSearch } = useSearchFilter();

-onMounted(() => {
-  hotkeys("command+f, ctrl+f", (event, handler) => {
+whenever(
+  () => Meta_F.value || Ctrl_F.value,
+  () => {
    showSearch.value = true;
    nextTick(() => input.value?.focus() || input.value?.select());
-    event.preventDefault();
-  });
-  hotkeys("esc", () => resetSearch());
-});
-
-onUnmounted(() => {
-  searchFilter.value = "";
-  showSearch.value = false;
-  hotkeys.unbind("command+f, ctrl+f");
-  hotkeys.unbind("esc");
-});
+  }
+);
+whenever(esc, () => resetSearch());
+onUnmounted(() => resetSearch());
 </script>

 <style lang="scss" scoped>
--- a/assets/composables/eventsource.ts
+++ b/assets/composables/eventsource.ts
@@ -16,8 +16,8 @@ function parseMessage(data: string): LogEntry<string | JSONObject> {
 }

 export function useLogStream(container: ComputedRef<Container>) {
-  let messages = $ref<LogEntry<string | JSONObject>[]>([]);
-  let buffer = $ref<LogEntry<string | JSONObject>[]>([]);
+  let messages: LogEntry<string | JSONObject>[] = $ref([]);
+  let buffer: LogEntry<string | JSONObject>[] = $ref([]);
  const scrollingPaused = $ref(inject("scrollingPaused") as Ref<boolean>);

  function flushNow() {
@@ -117,8 +117,9 @@ export function useLogStream(container: ComputedRef<Container>) {

  watch(
    () => container.value.id,
-    () => connect()
+    () => connect(),
+    { immediate: true }
  );

-  return $$({ connect, messages, loadOlderLogs });
+  return { ...$$({ messages }), loadOlderLogs };
 }
--- a/assets/composables/search.ts
+++ b/assets/composables/search.ts
@@ -49,9 +49,9 @@ export function useSearchFilter() {
    });
  }

-  function markSearch(log: string): string;
+  function markSearch(log: { toString(): string }): string;
  function markSearch(log: string[]): string[];
-  function markSearch(log: string | string[]) {
+  function markSearch(log: { toString(): string } | string[]) {
    if (!debouncedSearchFilter.value) {
      return log;
    }
--- a/assets/layouts/default.vue
+++ b/assets/layouts/default.vue
@@ -42,26 +42,22 @@
 </template>

 <script lang="ts" setup>
+// @ts-ignore - splitpanes types are not available
 import { Splitpanes, Pane } from "splitpanes";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
-import hotkeys from "hotkeys-js";
-
 import FuzzySearchModal from "@/components/FuzzySearchModal.vue";

 const collapseNav = ref(false);
 const { oruga } = useProgrammatic();
 const { authorizationNeeded } = config;
-
+const { Meta_K, Ctrl_K } = useMagicKeys();
 const containerStore = useContainerStore();
-
 const { activeContainers, visibleContainers } = storeToRefs(containerStore);

-onMounted(() => {
-  hotkeys("command+k, ctrl+k", (event, handler) => {
-    event.preventDefault();
-    showFuzzySearch();
-  });
-});
+whenever(
+  () => Meta_K.value || Ctrl_K.value,
+  () => showFuzzySearch()
+);

 watchEffect(() => {
  setTitle(`${visibleContainers.value.length} containers`);
--- a/assets/pages/Index.vue
+++ b/assets/pages/Index.vue
@@ -55,7 +55,7 @@
                type="text"
                :placeholder="$t('placeholder.search-containers')"
                v-model="search"
-                @keyup.esc="search = null"
+                @keyup.esc="search.value = null"
                @keyup.enter="onEnter()"
              />
              <span class="icon is-left">
--- a/assets/pages/Login.vue
+++ b/assets/pages/Login.vue
@@ -57,7 +57,7 @@ setTitle(t("title.login"));
 let error = $ref(false);
 let username = $ref("");
 let password = $ref("");
-let form = $ref();
+let form: HTMLFormElement = $ref();

 async function onLogin() {
  const response = await fetch(`${config.base}/api/validateCredentials`, {
--- a/assets/pages/index.vue
+++ b/assets/pages/index.vue
@@ -55,7 +55,7 @@
                type="text"
                :placeholder="$t('placeholder.search-containers')"
                v-model="search"
-                @keyup.esc="search = null"
+                @keyup.esc="search.value = null"
                @keyup.enter="onEnter()"
              />
              <span class="icon is-left">
--- a/assets/pages/login.vue
+++ b/assets/pages/login.vue
@@ -57,7 +57,7 @@ setTitle(t("title.login"));
 let error = $ref(false);
 let username = $ref("");
 let password = $ref("");
-let form = $ref();
+let form: HTMLFormElement = $ref();

 async function onLogin() {
  const response = await fetch(`${config.base}/api/validateCredentials`, {
--- a/assets/styles.scss
+++ b/assets/styles.scss
@@ -176,3 +176,19 @@ html.has-custom-scrollbars {
 .button .button-wrapper > span {
  display: contents;
 }
+
+mark {
+  border-radius: 2px;
+  background-color: var(--secondary-color);
+  animation: pops 200ms ease-out;
+  display: inline-block;
+}
+
+@keyframes pops {
+  0% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1.05);
+  }
+}
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -6,8 +6,8 @@
  },
  "license": "ISC",
  "dependencies": {
-    "@frsource/cypress-plugin-visual-regression-diff": "^1.9.18",
-    "cypress": "^10.7.0",
+    "@frsource/cypress-plugin-visual-regression-diff": "^2.0.0",
+    "cypress": "^10.8.0",
    "typescript": "^4.8.3"
  }
 }
--- a/e2e/pnpm-lock.yaml
+++ b/e2e/pnpm-lock.yaml
@@ -1,13 +1,13 @@
 lockfileVersion: 5.4

 specifiers:
-  '@frsource/cypress-plugin-visual-regression-diff': ^1.9.18
-  cypress: ^10.7.0
+  '@frsource/cypress-plugin-visual-regression-diff': ^2.0.0
+  cypress: ^10.8.0
  typescript: ^4.8.3

 dependencies:
-  '@frsource/cypress-plugin-visual-regression-diff': 1.9.18_cypress@10.7.0
-  cypress: 10.7.0
+  '@frsource/cypress-plugin-visual-regression-diff': 2.0.0_cypress@10.8.0
+  cypress: 10.8.0
  typescript: 4.8.3

 packages:
@@ -52,21 +52,21 @@ packages:
      - supports-color
    dev: false

-  /@frsource/cypress-plugin-visual-regression-diff/1.9.18_cypress@10.7.0:
-    resolution: {integrity: sha512-QS52M0V4UFqQHW85cKRoTKVtzYWQ0BA88+rDco3BMkzSpOQokwgZ7iYlnKJbLuePNLakbaoHWNWSDjNrG9OP8w==}
+  /@frsource/cypress-plugin-visual-regression-diff/2.0.0_cypress@10.8.0:
+    resolution: {integrity: sha512-hwMEZzD0tFbNNNbEjdF8q2ELpxhby25VQ665QUJy1soGPiGwY+rBDdktFg3EXVGs/Euq0Nj8hq/K18BWYoX10g==}
    engines: {node: '>=10'}
    peerDependencies:
      cypress: '>=4.5.0'
    dependencies:
-      cypress: 10.7.0
+      cypress: 10.8.0
      move-file: 2.1.0
      pixelmatch: 5.3.0
      pngjs: 6.0.0
      sharp: 0.30.7
    dev: false

-  /@types/node/14.18.26:
-    resolution: {integrity: sha512-0b+utRBSYj8L7XAp0d+DX7lI4cSmowNaaTkk6/1SKzbKkG+doLuPusB9EOvzLJ8ahJSk03bTLIL6cWaEd4dBKA==}
+  /@types/node/14.18.29:
+    resolution: {integrity: sha512-LhF+9fbIX4iPzhsRLpK5H7iPdvW8L4IwGciXQIOEcuF62+9nw/VQVsOViAOOGxY3OlOKGLFv0sWwJXdwQeTn6A==}
    dev: false

  /@types/sinonjs__fake-timers/8.1.1:
@@ -81,7 +81,7 @@ packages:
    resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
    requiresBuild: true
    dependencies:
-      '@types/node': 14.18.26
+      '@types/node': 14.18.29
    dev: false
    optional: true

@@ -232,8 +232,8 @@ packages:
    resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
    dev: false

-  /ci-info/3.3.2:
-    resolution: {integrity: sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg==}
+  /ci-info/3.4.0:
+    resolution: {integrity: sha512-t5QdPT5jq3o262DOQ8zA6E1tlH2upmUc4Hlvrbx1pGYJuiiHl7O7rvVNI+l8HTVhd/q3Qc9vqimkNk5yiXsAug==}
    dev: false

  /clean-stack/2.2.0:
@@ -248,8 +248,8 @@ packages:
      restore-cursor: 3.1.0
    dev: false

-  /cli-table3/0.6.2:
-    resolution: {integrity: sha512-QyavHCaIC80cMivimWu4aWHilIpiDpfm3hGmqAmXVL1UsnbLuBSMd21hTX6VY4ZSDSM73ESLeF8TOYId3rBTbw==}
+  /cli-table3/0.6.3:
+    resolution: {integrity: sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==}
    engines: {node: 10.* || >= 12.*}
    dependencies:
      string-width: 4.2.3
@@ -313,7 +313,7 @@ packages:
    dev: false

  /concat-map/0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
    dev: false

  /core-util-is/1.0.2:
@@ -329,15 +329,15 @@ packages:
      which: 2.0.2
    dev: false

-  /cypress/10.7.0:
-    resolution: {integrity: sha512-gTFvjrUoBnqPPOu9Vl5SBHuFlzx/Wxg/ZXIz2H4lzoOLFelKeF7mbwYUOzgzgF0oieU2WhJAestQdkgwJMMTvQ==}
+  /cypress/10.8.0:
+    resolution: {integrity: sha512-QVse0dnLm018hgti2enKMVZR9qbIO488YGX06nH5j3Dg1isL38DwrBtyrax02CANU6y8F4EJUuyW6HJKw1jsFA==}
    engines: {node: '>=12.0.0'}
    hasBin: true
    requiresBuild: true
    dependencies:
      '@cypress/request': 2.88.10
      '@cypress/xvfb': 1.2.4_supports-color@8.1.1
-      '@types/node': 14.18.26
+      '@types/node': 14.18.29
      '@types/sinonjs__fake-timers': 8.1.1
      '@types/sizzle': 2.3.3
      arch: 2.2.0
@@ -348,7 +348,7 @@ packages:
      chalk: 4.1.2
      check-more-types: 2.24.0
      cli-cursor: 3.1.0
-      cli-table3: 0.6.2
+      cli-table3: 0.6.3
      commander: 5.1.0
      common-tags: 1.8.2
      dayjs: 1.11.5
@@ -665,7 +665,7 @@ packages:
    resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
    hasBin: true
    dependencies:
-      ci-info: 3.3.2
+      ci-info: 3.4.0
    dev: false

  /is-fullwidth-code-point/3.0.0:
@@ -1269,7 +1269,7 @@ packages:
    dev: false

  /verror/1.10.0:
-    resolution: {integrity: sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=}
+    resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
    engines: {'0': node >=0.6.0}
    dependencies:
      assert-plus: 1.0.0
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "dozzle",
-  "version": "4.1.3",
+  "version": "4.1.5",
  "description": "Realtime log viewer for docker containers. ",
  "homepage": "https://github.com/amir20/dozzle#readme",
  "bugs": {
@@ -22,9 +22,9 @@
    "postinstall": "husky install"
  },
  "dependencies": {
-    "@iconify-json/carbon": "^1.1.7",
+    "@iconify-json/carbon": "^1.1.8",
    "@iconify-json/cil": "^1.1.2",
-    "@iconify-json/mdi": "^1.1.32",
+    "@iconify-json/mdi": "^1.1.33",
    "@iconify-json/mdi-light": "^1.1.2",
    "@iconify-json/octicon": "^1.1.17",
    "@intlify/vite-plugin-vue-i18n": "^6.0.1",
@@ -38,7 +38,6 @@
    "bulma": "^0.9.4",
    "date-fns": "^2.29.3",
    "fuzzysort": "^2.0.1",
-    "hotkeys-js": "^3.10.0",
    "lodash.debounce": "^4.0.8",
    "pinia": "^2.0.22",
    "sass": "^1.54.9",
@@ -46,9 +45,9 @@
    "splitpanes": "^3.1.1",
    "typescript": "^4.8.3",
    "unplugin-auto-import": "^0.11.2",
-    "unplugin-icons": "^0.14.9",
+    "unplugin-icons": "^0.14.10",
    "unplugin-vue-components": "^0.22.7",
-    "vite": "3.1.1",
+    "vite": "3.1.3",
    "vite-plugin-pages": "^0.26.0",
    "vite-plugin-vue-layouts": "^0.7.0",
    "vue": "^3.2.39",
@@ -71,7 +70,7 @@
    "prettier": "^2.7.1",
    "release-it": "^15.4.2",
    "ts-node": "^10.9.1",
-    "vitest": "^0.23.2",
+    "vitest": "^0.23.4",
    "vue-tsc": "^0.40.13"
  },
  "lint-staged": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,9 @@
 lockfileVersion: 5.4

 specifiers:
-  '@iconify-json/carbon': ^1.1.7
+  '@iconify-json/carbon': ^1.1.8
  '@iconify-json/cil': ^1.1.2
-  '@iconify-json/mdi': ^1.1.32
+  '@iconify-json/mdi': ^1.1.33
  '@iconify-json/mdi-light': ^1.1.2
  '@iconify-json/octicon': ^1.1.17
  '@intlify/vite-plugin-vue-i18n': ^6.0.1
@@ -24,7 +24,6 @@ specifiers:
  date-fns: ^2.29.3
  eventsourcemock: ^2.0.0
  fuzzysort: ^2.0.1
-  hotkeys-js: ^3.10.0
  husky: ^8.0.1
  jest-serializer-vue: ^2.0.2
  jsdom: ^20.0.0
@@ -40,27 +39,27 @@ specifiers:
  ts-node: ^10.9.1
  typescript: ^4.8.3
  unplugin-auto-import: ^0.11.2
-  unplugin-icons: ^0.14.9
+  unplugin-icons: ^0.14.10
  unplugin-vue-components: ^0.22.7
-  vite: 3.1.1
+  vite: 3.1.3
  vite-plugin-pages: ^0.26.0
  vite-plugin-vue-layouts: ^0.7.0
-  vitest: ^0.23.2
+  vitest: ^0.23.4
  vue: ^3.2.39
  vue-i18n: ^9.2.2
  vue-router: ^4.1.5
  vue-tsc: ^0.40.13

 dependencies:
-  '@iconify-json/carbon': 1.1.7
+  '@iconify-json/carbon': 1.1.8
  '@iconify-json/cil': 1.1.2
-  '@iconify-json/mdi': 1.1.32
+  '@iconify-json/mdi': 1.1.33
  '@iconify-json/mdi-light': 1.1.2
  '@iconify-json/octicon': 1.1.17
-  '@intlify/vite-plugin-vue-i18n': 6.0.1_vite@3.1.1+vue-i18n@9.2.2
+  '@intlify/vite-plugin-vue-i18n': 6.0.1_vite@3.1.3+vue-i18n@9.2.2
  '@oruga-ui/oruga-next': 0.5.6_vue@3.2.39
  '@oruga-ui/theme-bulma': 0.2.7
-  '@vitejs/plugin-vue': 3.1.0_vite@3.1.1+vue@3.2.39
+  '@vitejs/plugin-vue': 3.1.0_vite@3.1.3+vue@3.2.39
  '@vue/compiler-sfc': 3.2.39
  '@vueuse/core': 9.2.0_vue@3.2.39
  '@vueuse/router': 9.2.0_u55wpvgoaskkfdnhr4v2vlugdi
@@ -68,19 +67,18 @@ dependencies:
  bulma: 0.9.4
  date-fns: 2.29.3
  fuzzysort: 2.0.1
-  hotkeys-js: 3.10.0
  lodash.debounce: 4.0.8
  pinia: 2.0.22_arz4dztosvwy2ghjrlh2wdhejm
  sass: 1.54.9
  semver: 7.3.7
  splitpanes: 3.1.1
  typescript: 4.8.3
-  unplugin-auto-import: 0.11.2_j257a7fvehe4l6224muo7g6tiu
-  unplugin-icons: 0.14.9_erjgrqwit2pomeuknzqk3muw2e
-  unplugin-vue-components: 0.22.7_vite@3.1.1+vue@3.2.39
-  vite: 3.1.1_sass@1.54.9
-  vite-plugin-pages: 0.26.0_erjgrqwit2pomeuknzqk3muw2e
-  vite-plugin-vue-layouts: 0.7.0_npdn3jm2zg4g7dngdn2zkjbyju
+  unplugin-auto-import: 0.11.2_ddncce744ormlo74xpe4fre3qq
+  unplugin-icons: 0.14.10_4s7vbzbcgwpqv5yc35umdpgf4a
+  unplugin-vue-components: 0.22.7_vite@3.1.3+vue@3.2.39
+  vite: 3.1.3_sass@1.54.9
+  vite-plugin-pages: 0.26.0_4s7vbzbcgwpqv5yc35umdpgf4a
+  vite-plugin-vue-layouts: 0.7.0_xkhgfkrxwsspbw2hhglk5wewfa
  vue: 3.2.39
  vue-i18n: 9.2.2_vue@3.2.39
  vue-router: 4.1.5_vue@3.2.39
@@ -101,7 +99,7 @@ devDependencies:
  prettier: 2.7.1
  release-it: 15.4.2
  ts-node: 10.9.1_bidgzm5cq2du6gnjtweqqjrrn4
-  vitest: 0.23.2_jsdom@20.0.0+sass@1.54.9
+  vitest: 0.23.4_jsdom@20.0.0+sass@1.54.9
  vue-tsc: 0.40.13_typescript@4.8.3

 packages:
@@ -172,8 +170,18 @@ packages:
      '@jridgewell/trace-mapping': 0.3.9
    dev: true

-  /@esbuild/linux-loong64/0.15.7:
-    resolution: {integrity: sha512-IKznSJOsVUuyt7cDzzSZyqBEcZe+7WlBqTVXiF1OXP/4Nm387ToaXZ0fyLwI1iBlI/bzpxVq411QE2/Bt2XWWw==}
+  /@esbuild/android-arm/0.15.8:
+    resolution: {integrity: sha512-CyEWALmn+no/lbgbAJsbuuhT8s2J19EJGHkeyAwjbFJMrj80KJ9zuYsoAvidPTU7BgBf87r/sgae8Tw0dbOc4Q==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dependencies:
+      esbuild-wasm: 0.15.8
+    optional: true
+
+  /@esbuild/linux-loong64/0.15.8:
+    resolution: {integrity: sha512-pE5RQsOTSERCtfZdfCT25wzo7dfhOSlhAXcsZmuvRYhendOv7djcdvtINdnDp2DAjP17WXlBB4nBO6sHLczmsg==}
    engines: {node: '>=12'}
    cpu: [loong64]
    os: [linux]
@@ -184,10 +192,10 @@ packages:
    resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
    dev: true

-  /@iconify-json/carbon/1.1.7:
-    resolution: {integrity: sha512-QULSpNWKaX4auIbjITDynfALdJYvOOy/xZb+aLOqCgvpBcmbz5tbqvow4r25FWtVsi4FHVpNQ8vyJZXsD1Hlxg==}
+  /@iconify-json/carbon/1.1.8:
+    resolution: {integrity: sha512-aSoMgvZyvIXadLbMXcfS+qy8CVxSExvvp8Vd/nCrupLFc0KLKSukRInnVNc63zaHqoe1NBf5xUrgfyRYYfaKWQ==}
    dependencies:
-      '@iconify/types': 1.1.0
+      '@iconify/types': 2.0.0
    dev: false

  /@iconify-json/cil/1.1.2:
@@ -202,8 +210,8 @@ packages:
      '@iconify/types': 1.1.0
    dev: false

-  /@iconify-json/mdi/1.1.32:
-    resolution: {integrity: sha512-2Hpzh7rdp136d3NRYYaL8jh4TBJ+8s2lFx2ifFXt3KsMgOP9p3DXE9LtgebLQQGRyEZxUHl9sXK059MGgBLpCg==}
+  /@iconify-json/mdi/1.1.33:
+    resolution: {integrity: sha512-P8zIjwYvQ6SsmHc02O4oNV3jsqbL4bXcfKSt9MfCPMBvF9CLzz6QHMzQgt/Okgsb8wfhkfSQeREp+dSxV9pLRA==}
    dependencies:
      '@iconify/types': 2.0.0
    dev: false
@@ -222,21 +230,21 @@ packages:
    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
    dev: false

-  /@iconify/utils/1.0.33:
-    resolution: {integrity: sha512-vGeAqo7aGPxOQmGdVoXFUOuyN+0V7Lcrx2EvaiRjxUD1x6Om0Tvq2bdm7E24l2Pz++4S0mWMCVFXe/17EtKImQ==}
+  /@iconify/utils/2.0.0:
+    resolution: {integrity: sha512-thvwZ6m3frWJiOYwRdHPSPGC25rmyvDl0vXdQ8ocRJZx31m8Pn4y7V1mTc5UReR6MiAj+hrV2UPZQjx7zI960g==}
    dependencies:
      '@antfu/install-pkg': 0.1.0
      '@antfu/utils': 0.5.2
-      '@iconify/types': 1.1.0
+      '@iconify/types': 2.0.0
      debug: 4.3.4
-      kolorist: 1.5.1
+      kolorist: 1.6.0
      local-pkg: 0.4.2
    transitivePeerDependencies:
      - supports-color
    dev: false

-  /@intlify/bundle-utils/3.1.0_vue-i18n@9.2.2:
-    resolution: {integrity: sha512-ghlJ0kR2cCQ8D+poKknC0Xx0ncOt3J3os7CcIAqqIWVF7k6AtGoCDnIru+YzlZcvFRNmP9wEZ7jKliojCdAWNg==}
+  /@intlify/bundle-utils/3.1.2_vue-i18n@9.2.2:
+    resolution: {integrity: sha512-amgSo0NN5OKWYdcgFmfJqo2tcUcZ6C66Bxm5ALQnB0m3MUQtS9aJzKoIo+EU9XQiOVmlBFxRtNoZm+psHa5FNA==}
    engines: {node: '>= 12'}
    peerDependencies:
      petite-vue-i18n: '*'
@@ -298,7 +306,7 @@ packages:
    engines: {node: '>= 14'}
    dev: false

-  /@intlify/vite-plugin-vue-i18n/6.0.1_vite@3.1.1+vue-i18n@9.2.2:
+  /@intlify/vite-plugin-vue-i18n/6.0.1_vite@3.1.3+vue-i18n@9.2.2:
    resolution: {integrity: sha512-FFVcxVU4bR9vdDLNbltM5mrhndnXMErO01i0RrpdyMegEt3Nu/YLoH0sFdjRun7/RY4vaEnhTnFvVf9uO0dQvg==}
    engines: {node: '>= 14.6'}
    peerDependencies:
@@ -313,13 +321,13 @@ packages:
      vue-i18n:
        optional: true
    dependencies:
-      '@intlify/bundle-utils': 3.1.0_vue-i18n@9.2.2
+      '@intlify/bundle-utils': 3.1.2_vue-i18n@9.2.2
      '@intlify/shared': 9.3.0-beta.3
      '@rollup/pluginutils': 4.2.1
      debug: 4.3.4
      fast-glob: 3.2.11
      source-map: 0.6.1
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.54.9
      vue-i18n: 9.2.2_vue@3.2.39
    transitivePeerDependencies:
      - supports-color
@@ -657,14 +665,14 @@ packages:
    resolution: {integrity: sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==}
    dev: false

-  /@vitejs/plugin-vue/3.1.0_vite@3.1.1+vue@3.2.39:
+  /@vitejs/plugin-vue/3.1.0_vite@3.1.3+vue@3.2.39:
    resolution: {integrity: sha512-fmxtHPjSOEIRg6vHYDaem+97iwCUg/uSIaTzp98lhELt2ISOQuDo2hbkBdXod0g15IhfPMQmAxh4heUks2zvDA==}
    engines: {node: ^14.18.0 || >=16.0.0}
    peerDependencies:
      vite: ^3.0.0
      vue: ^3.2.25
    dependencies:
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.54.9
      vue: 3.2.39
    dev: false

@@ -1694,193 +1702,203 @@ packages:
      is-date-object: 1.0.5
      is-symbol: 1.0.4

-  /esbuild-android-64/0.15.7:
-    resolution: {integrity: sha512-p7rCvdsldhxQr3YHxptf1Jcd86dlhvc3EQmQJaZzzuAxefO9PvcI0GLOa5nCWem1AJ8iMRu9w0r5TG8pHmbi9w==}
+  /esbuild-android-64/0.15.8:
+    resolution: {integrity: sha512-bVh8FIKOolF7/d4AMzt7xHlL0Ljr+mYKSHI39TJWDkybVWHdn6+4ODL3xZGHOxPpdRpitemXA1WwMKYBsw8dGw==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [android]
    requiresBuild: true
+    dependencies:
+      esbuild-wasm: 0.15.8
    optional: true

-  /esbuild-android-arm64/0.15.7:
-    resolution: {integrity: sha512-L775l9ynJT7rVqRM5vo+9w5g2ysbOCfsdLV4CWanTZ1k/9Jb3IYlQ06VCI1edhcosTYJRECQFJa3eAvkx72eyQ==}
+  /esbuild-android-arm64/0.15.8:
+    resolution: {integrity: sha512-ReAMDAHuo0H1h9LxRabI6gwYPn8k6WiUeyxuMvx17yTrJO+SCnIfNc/TSPFvDwtK9MiyiKG/2dBYHouT/M0BXQ==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [android]
    requiresBuild: true
    optional: true

-  /esbuild-darwin-64/0.15.7:
-    resolution: {integrity: sha512-KGPt3r1c9ww009t2xLB6Vk0YyNOXh7hbjZ3EecHoVDxgtbUlYstMPDaReimKe6eOEfyY4hBEEeTvKwPsiH5WZg==}
+  /esbuild-darwin-64/0.15.8:
+    resolution: {integrity: sha512-KaKcGfJ+yto7Fo5gAj3xwxHMd1fBIKatpCHK8znTJLVv+9+NN2/tIPBqA4w5rBwjX0UqXDeIE2v1xJP+nGEXgA==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [darwin]
    requiresBuild: true
    optional: true

-  /esbuild-darwin-arm64/0.15.7:
-    resolution: {integrity: sha512-kBIHvtVqbSGajN88lYMnR3aIleH3ABZLLFLxwL2stiuIGAjGlQW741NxVTpUHQXUmPzxi6POqc9npkXa8AcSZQ==}
+  /esbuild-darwin-arm64/0.15.8:
+    resolution: {integrity: sha512-8tjEaBgAKnXCkP7bhEJmEqdG9HEV6oLkF36BrMzpfW2rgaw0c48Zrxe+9RlfeGvs6gDF4w+agXyTjikzsS3izw==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [darwin]
    requiresBuild: true
    optional: true

-  /esbuild-freebsd-64/0.15.7:
-    resolution: {integrity: sha512-hESZB91qDLV5MEwNxzMxPfbjAhOmtfsr9Wnuci7pY6TtEh4UDuevmGmkUIjX/b+e/k4tcNBMf7SRQ2mdNuK/HQ==}
+  /esbuild-freebsd-64/0.15.8:
+    resolution: {integrity: sha512-jaxcsGHYzn2L0/lffON2WfH4Nc+d/EwozVTP5K2v016zxMb5UQMhLoJzvLgBqHT1SG0B/mO+a+THnJCMVg15zw==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [freebsd]
    requiresBuild: true
    optional: true

-  /esbuild-freebsd-arm64/0.15.7:
-    resolution: {integrity: sha512-dLFR0ChH5t+b3J8w0fVKGvtwSLWCv7GYT2Y2jFGulF1L5HftQLzVGN+6pi1SivuiVSmTh28FwUhi9PwQicXI6Q==}
+  /esbuild-freebsd-arm64/0.15.8:
+    resolution: {integrity: sha512-2xp2UlljMvX8HExtcg7VHaeQk8OBU0CSl1j18B5CcZmSDkLF9p3utuMXIopG3a08fr9Hv+Dz6+seSXUow/G51w==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [freebsd]
    requiresBuild: true
    optional: true

-  /esbuild-linux-32/0.15.7:
-    resolution: {integrity: sha512-v3gT/LsONGUZcjbt2swrMjwxo32NJzk+7sAgtxhGx1+ZmOFaTRXBAi1PPfgpeo/J//Un2jIKm/I+qqeo4caJvg==}
+  /esbuild-linux-32/0.15.8:
+    resolution: {integrity: sha512-9u1E54BRz1FQMl86iaHK146+4ID2KYNxL3trLZT4QLLx3M7Q9n4lGG3lrzqUatGR2cKy8c33b0iaCzsItZWkFg==}
    engines: {node: '>=12'}
    cpu: [ia32]
    os: [linux]
    requiresBuild: true
    optional: true

-  /esbuild-linux-64/0.15.7:
-    resolution: {integrity: sha512-LxXEfLAKwOVmm1yecpMmWERBshl+Kv5YJ/1KnyAr6HRHFW8cxOEsEfisD3sVl/RvHyW//lhYUVSuy9jGEfIRAQ==}
+  /esbuild-linux-64/0.15.8:
+    resolution: {integrity: sha512-4HxrsN9eUzJXdVGMTYA5Xler82FuZUu21bXKN42zcLHHNKCAMPUzD62I+GwDhsdgUBAUj0tRXDdsQHgaP6v0HA==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [linux]
    requiresBuild: true
    optional: true

-  /esbuild-linux-arm/0.15.7:
-    resolution: {integrity: sha512-JKgAHtMR5f75wJTeuNQbyznZZa+pjiUHV7sRZp42UNdyXC6TiUYMW/8z8yIBAr2Fpad8hM1royZKQisqPABPvQ==}
+  /esbuild-linux-arm/0.15.8:
+    resolution: {integrity: sha512-7DVBU9SFjX4+vBwt8tHsUCbE6Vvl6y6FQWHAgyw1lybC5gULqn/WnjHYHN2/LJaZRsDBvxWT4msEgwLGq1Wd3Q==}
    engines: {node: '>=12'}
    cpu: [arm]
    os: [linux]
    requiresBuild: true
    optional: true

-  /esbuild-linux-arm64/0.15.7:
-    resolution: {integrity: sha512-P3cfhudpzWDkglutWgXcT2S7Ft7o2e3YDMrP1n0z2dlbUZghUkKCyaWw0zhp4KxEEzt/E7lmrtRu/pGWnwb9vw==}
+  /esbuild-linux-arm64/0.15.8:
+    resolution: {integrity: sha512-1OCm7Aq0tEJT70PbxmHSGYDLYP8DKH8r4Nk7/XbVzWaduo9beCjGBB+tGZIHK6DdTQ3h00/4Tb/70YMH/bOtKg==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
    optional: true

-  /esbuild-linux-mips64le/0.15.7:
-    resolution: {integrity: sha512-T7XKuxl0VpeFLCJXub6U+iybiqh0kM/bWOTb4qcPyDDwNVhLUiPcGdG2/0S7F93czUZOKP57YiLV8YQewgLHKw==}
+  /esbuild-linux-mips64le/0.15.8:
+    resolution: {integrity: sha512-yeFoNPVFPEzZvFYBfUQNG2TjGRaCyV1E27OcOg4LOtnGrxb2wA+mkW3luckyv1CEyd00mpAg7UdHx8nlx3ghgA==}
    engines: {node: '>=12'}
    cpu: [mips64el]
    os: [linux]
    requiresBuild: true
    optional: true

-  /esbuild-linux-ppc64le/0.15.7:
-    resolution: {integrity: sha512-6mGuC19WpFN7NYbecMIJjeQgvDb5aMuvyk0PDYBJrqAEMkTwg3Z98kEKuCm6THHRnrgsdr7bp4SruSAxEM4eJw==}
+  /esbuild-linux-ppc64le/0.15.8:
+    resolution: {integrity: sha512-CEyMMUUNabXibw8OSNmBXhOIGhnjNVl5Lpseiuf00iKN0V47oqDrbo4dsHz1wH62m49AR8iG8wpDlTqfYgKbtg==}
    engines: {node: '>=12'}
    cpu: [ppc64]
    os: [linux]
    requiresBuild: true
    optional: true

-  /esbuild-linux-riscv64/0.15.7:
-    resolution: {integrity: sha512-uUJsezbswAYo/X7OU/P+PuL/EI9WzxsEQXDekfwpQ23uGiooxqoLFAPmXPcRAt941vjlY9jtITEEikWMBr+F/g==}
+  /esbuild-linux-riscv64/0.15.8:
+    resolution: {integrity: sha512-OCGSOaspMUjexSCU8ZiA0UnV/NiRU+s2vIfEcAQWQ6u32R+2luyfh/4ZaY6jFbylJE07Esc/yRvb9Q5fXuClXA==}
    engines: {node: '>=12'}
    cpu: [riscv64]
    os: [linux]
    requiresBuild: true
    optional: true

-  /esbuild-linux-s390x/0.15.7:
-    resolution: {integrity: sha512-+tO+xOyTNMc34rXlSxK7aCwJgvQyffqEM5MMdNDEeMU3ss0S6wKvbBOQfgd5jRPblfwJ6b+bKiz0g5nABpY0QQ==}
+  /esbuild-linux-s390x/0.15.8:
+    resolution: {integrity: sha512-RHdpdfxRTSrZXZJlFSLazFU4YwXLB5Rgf6Zr5rffqSsO4y9JybgtKO38bFwxZNlDXliYISXN/YROKrG9s7mZQA==}
    engines: {node: '>=12'}
    cpu: [s390x]
    os: [linux]
    requiresBuild: true
    optional: true

-  /esbuild-netbsd-64/0.15.7:
-    resolution: {integrity: sha512-yVc4Wz+Pu3cP5hzm5kIygNPrjar/v5WCSoRmIjCPWfBVJkZNb5brEGKUlf+0Y759D48BCWa0WHrWXaNy0DULTQ==}
+  /esbuild-netbsd-64/0.15.8:
+    resolution: {integrity: sha512-VolFFRatBH09T5QMWhiohAWCOien1R1Uz9K0BRVVTBgBaVBt7eArsXTKxVhUgRf2vwu2c2SXkuP0r7HLG0eozw==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [netbsd]
    requiresBuild: true
    optional: true

-  /esbuild-openbsd-64/0.15.7:
-    resolution: {integrity: sha512-GsimbwC4FSR4lN3wf8XmTQ+r8/0YSQo21rWDL0XFFhLHKlzEA4SsT1Tl8bPYu00IU6UWSJ+b3fG/8SB69rcuEQ==}
+  /esbuild-openbsd-64/0.15.8:
+    resolution: {integrity: sha512-HTAPlg+n4kUeE/isQxlCfsOz0xJGNoT5LJ9oYZWFKABfVf4Ycu7Zlf5ITgOnrdheTkz8JeL/gISIOCFAoOXrSA==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [openbsd]
    requiresBuild: true
    optional: true

-  /esbuild-sunos-64/0.15.7:
-    resolution: {integrity: sha512-8CDI1aL/ts0mDGbWzjEOGKXnU7p3rDzggHSBtVryQzkSOsjCHRVe0iFYUuhczlxU1R3LN/E7HgUO4NXzGGP/Ag==}
+  /esbuild-sunos-64/0.15.8:
+    resolution: {integrity: sha512-qMP/jR/FzcIOwKj+W+Lb+8Cfr8GZHbHUJxAPi7DUhNZMQ/6y7sOgRzlOSpRrbbUntrRZh0MqOyDhJ3Gpo6L1QA==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [sunos]
    requiresBuild: true
    optional: true

-  /esbuild-windows-32/0.15.7:
-    resolution: {integrity: sha512-cOnKXUEPS8EGCzRSFa1x6NQjGhGsFlVgjhqGEbLTPsA7x4RRYiy2RKoArNUU4iR2vHmzqS5Gr84MEumO/wxYKA==}
+  /esbuild-wasm/0.15.8:
+    resolution: {integrity: sha512-Y7uCl5RNO4URjlemjdx++ukVHEMt5s5AfMWYUnMiK4Sry+pPCvQIctzXq6r6FKCyGKjX6/NGMCqR2OX6aLxj0w==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optional: true
+
+  /esbuild-windows-32/0.15.8:
+    resolution: {integrity: sha512-RKR1QHh4iWzjUhkP8Yqi75PPz/KS+b8zw3wUrzw6oAkj+iU5Qtyj61ZDaSG3Qf2vc6hTIUiPqVTqBH0NpXFNwg==}
    engines: {node: '>=12'}
    cpu: [ia32]
    os: [win32]
    requiresBuild: true
    optional: true

-  /esbuild-windows-64/0.15.7:
-    resolution: {integrity: sha512-7MI08Ec2sTIDv+zH6StNBKO+2hGUYIT42GmFyW6MBBWWtJhTcQLinKS6ldIN1d52MXIbiJ6nXyCJ+LpL4jBm3Q==}
+  /esbuild-windows-64/0.15.8:
+    resolution: {integrity: sha512-ag9ptYrsizgsR+PQE8QKeMqnosLvAMonQREpLw4evA4FFgOBMLEat/dY/9txbpozTw9eEOYyD3a4cE9yTu20FA==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [win32]
    requiresBuild: true
    optional: true

-  /esbuild-windows-arm64/0.15.7:
-    resolution: {integrity: sha512-R06nmqBlWjKHddhRJYlqDd3Fabx9LFdKcjoOy08YLimwmsswlFBJV4rXzZCxz/b7ZJXvrZgj8DDv1ewE9+StMw==}
+  /esbuild-windows-arm64/0.15.8:
+    resolution: {integrity: sha512-dbpAb0VyPaUs9mgw65KRfQ9rqiWCHpNzrJusoPu+LpEoswosjt/tFxN7cd2l68AT4qWdBkzAjDLRon7uqMeWcg==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [win32]
    requiresBuild: true
    optional: true

-  /esbuild/0.15.7:
-    resolution: {integrity: sha512-7V8tzllIbAQV1M4QoE52ImKu8hT/NLGlGXkiDsbEU5PS6K8Mn09ZnYoS+dcmHxOS9CRsV4IRAMdT3I67IyUNXw==}
+  /esbuild/0.15.8:
+    resolution: {integrity: sha512-Remsk2dmr1Ia65sU+QasE6svJbsHe62lzR+CnjpUvbZ+uSYo1SitiOWPRfZQkCu82YWZBBKXiD/j0i//XWMZ+Q==}
    engines: {node: '>=12'}
    hasBin: true
    requiresBuild: true
    optionalDependencies:
-      '@esbuild/linux-loong64': 0.15.7
-      esbuild-android-64: 0.15.7
-      esbuild-android-arm64: 0.15.7
-      esbuild-darwin-64: 0.15.7
-      esbuild-darwin-arm64: 0.15.7
-      esbuild-freebsd-64: 0.15.7
-      esbuild-freebsd-arm64: 0.15.7
-      esbuild-linux-32: 0.15.7
-      esbuild-linux-64: 0.15.7
-      esbuild-linux-arm: 0.15.7
-      esbuild-linux-arm64: 0.15.7
-      esbuild-linux-mips64le: 0.15.7
-      esbuild-linux-ppc64le: 0.15.7
-      esbuild-linux-riscv64: 0.15.7
-      esbuild-linux-s390x: 0.15.7
-      esbuild-netbsd-64: 0.15.7
-      esbuild-openbsd-64: 0.15.7
-      esbuild-sunos-64: 0.15.7
-      esbuild-windows-32: 0.15.7
-      esbuild-windows-64: 0.15.7
-      esbuild-windows-arm64: 0.15.7
+      '@esbuild/android-arm': 0.15.8
+      '@esbuild/linux-loong64': 0.15.8
+      esbuild-android-64: 0.15.8
+      esbuild-android-arm64: 0.15.8
+      esbuild-darwin-64: 0.15.8
+      esbuild-darwin-arm64: 0.15.8
+      esbuild-freebsd-64: 0.15.8
+      esbuild-freebsd-arm64: 0.15.8
+      esbuild-linux-32: 0.15.8
+      esbuild-linux-64: 0.15.8
+      esbuild-linux-arm: 0.15.8
+      esbuild-linux-arm64: 0.15.8
+      esbuild-linux-mips64le: 0.15.8
+      esbuild-linux-ppc64le: 0.15.8
+      esbuild-linux-riscv64: 0.15.8
+      esbuild-linux-s390x: 0.15.8
+      esbuild-netbsd-64: 0.15.8
+      esbuild-openbsd-64: 0.15.8
+      esbuild-sunos-64: 0.15.8
+      esbuild-windows-32: 0.15.8
+      esbuild-windows-64: 0.15.8
+      esbuild-windows-arm64: 0.15.8

  /escalade/3.1.1:
    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -2353,10 +2371,6 @@ packages:
    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
    dev: true

-  /hotkeys-js/3.10.0:
-    resolution: {integrity: sha512-20xeVdOqcgTkMox0+BqFwADZP7+5dy/9CFPpAinSMh2d0s3b0Hs2V2D+lMh4Hphkf7VE9pwnOl58eP1te+REcg==}
-    dev: false
-
  /html-encoding-sniffer/3.0.0:
    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
    engines: {node: '>=12'}
@@ -2946,8 +2960,8 @@ packages:
      is-buffer: 1.1.6
    dev: true

-  /kolorist/1.5.1:
-    resolution: {integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==}
+  /kolorist/1.6.0:
+    resolution: {integrity: sha512-dLkz37Ab97HWMx9KTes3Tbi3D1ln9fCAy2zr2YVExJasDRPGRaKcoE4fycWNtnCAJfjFqe0cnY+f8KT2JePEXQ==}
    dev: false

  /latest-version/7.0.0:
@@ -4242,6 +4256,13 @@ packages:
    resolution: {integrity: sha512-z+F/xmDM8GOdvA5UoZXFxEnxdvMOZ+XEBIwjfLfc8hMSuHpGxjXAUCfuEo+t1GOHSb8+qgI/IBRpxXVMaABYWA==}
    dependencies:
      acorn: 8.8.0
+    dev: false
+
+  /strip-literal/0.4.2:
+    resolution: {integrity: sha512-pv48ybn4iE1O9RLgCAN0iU4Xv7RlBTiit6DKmMiErbs9x1wH6vXBs45tWc0H5wUIF6TLTrKweqkmYF/iraQKNw==}
+    dependencies:
+      acorn: 8.8.0
+    dev: true

  /supports-color/5.5.0:
    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
@@ -4419,7 +4440,7 @@ packages:
      has-symbols: 1.0.3
      which-boxed-primitive: 1.0.2

-  /unimport/0.6.7_vite@3.1.1:
+  /unimport/0.6.7_vite@3.1.3:
    resolution: {integrity: sha512-EMoVqDjswHkU+nD098QYHXH7Mkw7KwGDQAyeRF2lgairJnuO+wpkhIcmCqrD1OPJmsjkTbJ2tW6Ap8St0PuWZA==}
    dependencies:
      '@rollup/pluginutils': 4.2.1
@@ -4431,7 +4452,7 @@ packages:
      pathe: 0.3.5
      scule: 0.3.2
      strip-literal: 0.4.1
-      unplugin: 0.9.3_vite@3.1.1
+      unplugin: 0.9.3_vite@3.1.3
    transitivePeerDependencies:
      - esbuild
      - rollup
@@ -4460,7 +4481,7 @@ packages:
    engines: {node: '>= 0.8'}
    dev: true

-  /unplugin-auto-import/0.11.2_j257a7fvehe4l6224muo7g6tiu:
+  /unplugin-auto-import/0.11.2_ddncce744ormlo74xpe4fre3qq:
    resolution: {integrity: sha512-1+VwBfn9dtiYv9SQLKP1AvZolUbK9xTVeAT+iOcEk4EHSFUlmIqBVLEKI76cifSQTLOJ3rZyPrEgptf3SZNLlQ==}
    engines: {node: '>=14'}
    peerDependencies:
@@ -4474,8 +4495,8 @@ packages:
      '@vueuse/core': 9.2.0_vue@3.2.39
      local-pkg: 0.4.2
      magic-string: 0.26.2
-      unimport: 0.6.7_vite@3.1.1
-      unplugin: 0.9.3_vite@3.1.1
+      unimport: 0.6.7_vite@3.1.3
+      unplugin: 0.9.3_vite@3.1.3
    transitivePeerDependencies:
      - esbuild
      - rollup
@@ -4483,8 +4504,8 @@ packages:
      - webpack
    dev: false

-  /unplugin-icons/0.14.9_erjgrqwit2pomeuknzqk3muw2e:
-    resolution: {integrity: sha512-vPyVfNREH88dP6gszdaoGkAEFPpiScXj1A8eWN905jQgT53A3tsiPEiqJjCHOUVcsUaREt2JSudzumFOsCA78A==}
+  /unplugin-icons/0.14.10_4s7vbzbcgwpqv5yc35umdpgf4a:
+    resolution: {integrity: sha512-K4KTnsiBnSPDKQS4KylOxmGYp/ALPgfN520IXhOuB2OKD5Ub5N3bNmpvMZgiMK0g3kAQdZrRRNATMSM558a3Zg==}
    peerDependencies:
      '@svgr/core': '>=5.5.0'
      '@vue/compiler-sfc': ^3.0.2
@@ -4502,12 +4523,12 @@ packages:
    dependencies:
      '@antfu/install-pkg': 0.1.0
      '@antfu/utils': 0.5.2
-      '@iconify/utils': 1.0.33
+      '@iconify/utils': 2.0.0
      '@vue/compiler-sfc': 3.2.39
      debug: 4.3.4
-      kolorist: 1.5.1
+      kolorist: 1.6.0
      local-pkg: 0.4.2
-      unplugin: 0.9.5_vite@3.1.1
+      unplugin: 0.9.5_vite@3.1.3
    transitivePeerDependencies:
      - esbuild
      - rollup
@@ -4516,7 +4537,7 @@ packages:
      - webpack
    dev: false

-  /unplugin-vue-components/0.22.7_vite@3.1.1+vue@3.2.39:
+  /unplugin-vue-components/0.22.7_vite@3.1.3+vue@3.2.39:
    resolution: {integrity: sha512-MJEAKJF9bRykTRvJ4WXF0FNMAyt1PX3iwpu2NN+li35sAKjQv6sC1col5aZDLiwDZDo2AGwxNkzLJFKaun9qHw==}
    engines: {node: '>=14'}
    peerDependencies:
@@ -4535,7 +4556,7 @@ packages:
      magic-string: 0.26.3
      minimatch: 5.1.0
      resolve: 1.22.1
-      unplugin: 0.9.5_vite@3.1.1
+      unplugin: 0.9.5_vite@3.1.3
      vue: 3.2.39
    transitivePeerDependencies:
      - esbuild
@@ -4545,7 +4566,7 @@ packages:
      - webpack
    dev: false

-  /unplugin/0.9.3_vite@3.1.1:
+  /unplugin/0.9.3_vite@3.1.3:
    resolution: {integrity: sha512-GWXxizZG+tobNs8fuGTCeilerkkfZTZax2iivuE4pxLaF9wTnPJHOq8tbLKDb5ohVb+2BXNjrU9xx59yWTUnuw==}
    peerDependencies:
      esbuild: '>=0.13'
@@ -4564,12 +4585,12 @@ packages:
    dependencies:
      acorn: 8.8.0
      chokidar: 3.5.3
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.54.9
      webpack-sources: 3.2.3
      webpack-virtual-modules: 0.4.4
    dev: false

-  /unplugin/0.9.5_vite@3.1.1:
+  /unplugin/0.9.5_vite@3.1.3:
    resolution: {integrity: sha512-luraheyfxwtvkvHpsOvMNv7IjLdORTWKZp0gWYNHGLi2ImON3iIZOj464qEyyEwLA/EMt12fC415HW9zRpOfTg==}
    peerDependencies:
      esbuild: '>=0.13'
@@ -4588,9 +4609,9 @@ packages:
    dependencies:
      acorn: 8.8.0
      chokidar: 3.5.3
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.54.9
      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.4.4
+      webpack-virtual-modules: 0.4.5
    dev: false

  /update-notifier/6.0.2:
@@ -4642,7 +4663,7 @@ packages:
      spdx-expression-parse: 3.0.1
    dev: true

-  /vite-plugin-pages/0.26.0_erjgrqwit2pomeuknzqk3muw2e:
+  /vite-plugin-pages/0.26.0_4s7vbzbcgwpqv5yc35umdpgf4a:
    resolution: {integrity: sha512-yJZvwHEt7puYIf19S89IvkDsWPjWleSied4H8hmdW6i8buCA93z1UAU1ipW1d8fNKrC4FzXsUHHbPm6+kl1p9w==}
    peerDependencies:
      '@vue/compiler-sfc': ^2.7.0 || ^3.0.0
@@ -4660,13 +4681,13 @@ packages:
      json5: 2.2.1
      local-pkg: 0.4.2
      picocolors: 1.0.0
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.54.9
      yaml: 2.1.1
    transitivePeerDependencies:
      - supports-color
    dev: false

-  /vite-plugin-vue-layouts/0.7.0_npdn3jm2zg4g7dngdn2zkjbyju:
+  /vite-plugin-vue-layouts/0.7.0_xkhgfkrxwsspbw2hhglk5wewfa:
    resolution: {integrity: sha512-k5XDmRNFo4M/GmUjhbRXj2WmJiFcGoVI8l/uZ72RHyRDQr4wE/6Zq/KFq0lqXomWQxTSzakQRUswzNwtvZLE8A==}
    peerDependencies:
      vite: ^2.5.0 || ^3.0.0-0
@@ -4676,15 +4697,15 @@ packages:
      '@vue/compiler-sfc': 3.2.39
      debug: 4.3.4
      fast-glob: 3.2.11
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.54.9
      vue: 3.2.39
      vue-router: 4.1.5_vue@3.2.39
    transitivePeerDependencies:
      - supports-color
    dev: false

-  /vite/3.1.1_sass@1.54.9:
-    resolution: {integrity: sha512-hgxQWev/AL7nWYrqByYo8nfcH9n97v6oFsta9+JX8h6cEkni7nHKP2kJleNYV2kcGhE8jsbaY1aStwPZXzPbgA==}
+  /vite/3.1.3_sass@1.54.9:
+    resolution: {integrity: sha512-/3XWiktaopByM5bd8dqvHxRt5EEgRikevnnrpND0gRfNkrMrPaGGexhtLCzv15RcCMtV2CLw+BPas8YFeSG0KA==}
    engines: {node: ^14.18.0 || >=16.0.0}
    hasBin: true
    peerDependencies:
@@ -4702,7 +4723,7 @@ packages:
      terser:
        optional: true
    dependencies:
-      esbuild: 0.15.7
+      esbuild: 0.15.8
      postcss: 8.4.16
      resolve: 1.22.1
      rollup: 2.78.1
@@ -4710,8 +4731,8 @@ packages:
    optionalDependencies:
      fsevents: 2.3.2

-  /vitest/0.23.2_jsdom@20.0.0+sass@1.54.9:
-    resolution: {integrity: sha512-kTBKp3ROPDkYC+x2zWt4znkDtnT08W1FQ6ngRFuqxpBGNuNVS+eWZKfffr8y2JGvEzZ9EzMAOcNaiqMj/FZqMw==}
+  /vitest/0.23.4_jsdom@20.0.0+sass@1.54.9:
+    resolution: {integrity: sha512-iukBNWqQAv8EKDBUNntspLp9SfpaVFbmzmM0sNcnTxASQZMzRw3PsM6DMlsHiI+I6GeO5/sYDg3ecpC+SNFLrQ==}
    engines: {node: '>=v14.16.0'}
    hasBin: true
    peerDependencies:
@@ -4739,11 +4760,11 @@ packages:
      debug: 4.3.4
      jsdom: 20.0.0
      local-pkg: 0.4.2
-      strip-literal: 0.4.1
+      strip-literal: 0.4.2
      tinybench: 2.1.5
      tinypool: 0.3.0
      tinyspy: 1.0.2
-      vite: 3.1.1_sass@1.54.9
+      vite: 3.1.3_sass@1.54.9
    transitivePeerDependencies:
      - less
      - sass
@@ -4874,6 +4895,10 @@ packages:
    resolution: {integrity: sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==}
    dev: false

+  /webpack-virtual-modules/0.4.5:
+    resolution: {integrity: sha512-8bWq0Iluiv9lVf9YaqWQ9+liNgXSHICm+rg544yRgGYaR8yXZTVBaHZkINZSB2yZSWo4b0F6MIxqJezVfOEAlg==}
+    dev: false
+
  /whatwg-encoding/2.0.0:
    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
    engines: {node: '>=12'}
Author	SHA1	Message	Date
Amir Raminfar	dbd1050948	Release 4.1.5	2022-09-20 13:15:04 -07:00
Amir Raminfar	69c647336e	Cleans up log viewer and adds zigzag line for skipped logs (#1885 ) * Cleans up log viewer and adds zigzag line for skipped logs * Updates components * Cleans up css * Cleans up more css * Fixes tests * Fixes typing * Fixes typescript errors * Fixes selected color	2022-09-20 13:14:31 -07:00
Amir Raminfar	1a1dd74142	Updates snapshots	2022-09-19 10:32:35 -07:00
Amir Raminfar	307dcd1929	Updates modules	2022-09-19 09:57:16 -07:00
Amir Raminfar	06bde85e03	Removes hotkeyjs in favor of vueuse (#1883 )	2022-09-16 09:09:21 -07:00
Amir Raminfar	9cbb55d780	Updates tests	2022-09-16 08:37:03 -07:00
Amir Raminfar	744bc11a2e	Release 4.1.4	2022-09-15 15:29:32 -07:00
Amir Raminfar	4fe8964d66	Fixes search for test	2022-09-15 15:29:26 -07:00