feat: adds a side panel for complex logs that enables reordering and enabling fields (#3237)

2025-12-21 13:23:07 +01:00 · 2024-08-28 17:37:04 -07:00
parent 62a2ef9eb4
commit 85271a595a
31 changed files with 345 additions and 174 deletions
--- a/assets/auto-imports.d.ts
+++ b/assets/auto-imports.d.ts
@@ -50,6 +50,7 @@ declare global {
  const effectScope: typeof import('vue')['effectScope']
  const extendRef: typeof import('@vueuse/core')['extendRef']
  const flattenJSON: typeof import('./utils/index')['flattenJSON']
+  const flattenJSONToMap: typeof import('./utils/index')['flattenJSONToMap']
  const formatBytes: typeof import('./utils/index')['formatBytes']
  const getActivePinia: typeof import('pinia')['getActivePinia']
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
@@ -104,6 +105,7 @@ declare global {
  const persistentVisibleKeysForContainer: typeof import('./composable/storage')['persistentVisibleKeysForContainer']
  const pinnedContainers: typeof import('./composable/storage')['pinnedContainers']
  const provide: typeof import('vue')['provide']
+  const provideDetails: typeof import('./composable/showDetails')['provideDetails']
  const provideLocal: typeof import('@vueuse/core')['provideLocal']
  const provideLogDetails: typeof import('./composable/showLogDetails')['provideLogDetails']
  const provideLoggingContext: typeof import('./composable/logContext')['provideLoggingContext']
@@ -205,6 +207,7 @@ declare global {
  const useDebounce: typeof import('@vueuse/core')['useDebounce']
  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDetails: typeof import('./composable/showDetails')['useDetails']
  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
@@ -413,6 +416,7 @@ declare module 'vue' {
    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
    readonly flattenJSON: UnwrapRef<typeof import('./utils/index')['flattenJSON']>
+    readonly flattenJSONToMap: UnwrapRef<typeof import('./utils/index')['flattenJSONToMap']>
    readonly formatBytes: UnwrapRef<typeof import('./utils/index')['formatBytes']>
    readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
@@ -468,6 +472,7 @@ declare module 'vue' {
    readonly pinnedContainers: UnwrapRef<typeof import('./composable/storage')['pinnedContainers']>
    readonly provide: UnwrapRef<typeof import('vue')['provide']>
    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
+    readonly provideLogDetails: UnwrapRef<typeof import('./composable/showLogDetails')['provideLogDetails']>
    readonly provideLoggingContext: UnwrapRef<typeof import('./composable/logContext')['provideLoggingContext']>
    readonly provideScrollContext: UnwrapRef<typeof import('./composable/scrollContext')['provideScrollContext']>
    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
@@ -497,6 +502,7 @@ declare module 'vue' {
    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
    readonly showAllContainers: UnwrapRef<typeof import('./stores/settings')['showAllContainers']>
+    readonly showLogDetails: UnwrapRef<typeof import('./composable/showLogDetails')['showLogDetails']>
    readonly showStd: UnwrapRef<typeof import('./stores/settings')['showStd']>
    readonly showTimestamp: UnwrapRef<typeof import('./stores/settings')['showTimestamp']>
    readonly size: UnwrapRef<typeof import('./stores/settings')['size']>
@@ -607,6 +613,7 @@ declare module 'vue' {
    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
+    readonly useLogDetails: UnwrapRef<typeof import('./composable/showLogDetails')['useLogDetails']>
    readonly useLogSearchContext: UnwrapRef<typeof import('./composable/logSearchContext')['useLogSearchContext']>
    readonly useLoggingContext: UnwrapRef<typeof import('./composable/logContext')['useLoggingContext']>
    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
@@ -766,6 +773,7 @@ declare module '@vue/runtime-core' {
    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
    readonly flattenJSON: UnwrapRef<typeof import('./utils/index')['flattenJSON']>
+    readonly flattenJSONToMap: UnwrapRef<typeof import('./utils/index')['flattenJSONToMap']>
    readonly formatBytes: UnwrapRef<typeof import('./utils/index')['formatBytes']>
    readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
@@ -821,6 +829,7 @@ declare module '@vue/runtime-core' {
    readonly pinnedContainers: UnwrapRef<typeof import('./composable/storage')['pinnedContainers']>
    readonly provide: UnwrapRef<typeof import('vue')['provide']>
    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
+    readonly provideLogDetails: UnwrapRef<typeof import('./composable/showLogDetails')['provideLogDetails']>
    readonly provideLoggingContext: UnwrapRef<typeof import('./composable/logContext')['provideLoggingContext']>
    readonly provideScrollContext: UnwrapRef<typeof import('./composable/scrollContext')['provideScrollContext']>
    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
@@ -850,6 +859,7 @@ declare module '@vue/runtime-core' {
    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
    readonly showAllContainers: UnwrapRef<typeof import('./stores/settings')['showAllContainers']>
+    readonly showLogDetails: UnwrapRef<typeof import('./composable/showLogDetails')['showLogDetails']>
    readonly showStd: UnwrapRef<typeof import('./stores/settings')['showStd']>
    readonly showTimestamp: UnwrapRef<typeof import('./stores/settings')['showTimestamp']>
    readonly size: UnwrapRef<typeof import('./stores/settings')['size']>
@@ -960,6 +970,7 @@ declare module '@vue/runtime-core' {
    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
+    readonly useLogDetails: UnwrapRef<typeof import('./composable/showLogDetails')['useLogDetails']>
    readonly useLogSearchContext: UnwrapRef<typeof import('./composable/logSearchContext')['useLogSearchContext']>
    readonly useLoggingContext: UnwrapRef<typeof import('./composable/logContext')['useLoggingContext']>
    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -49,6 +49,7 @@ declare module 'vue' {
    LabeledInput: typeof import('./components/common/LabeledInput.vue')['default']
    Links: typeof import('./components/Links.vue')['default']
    LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
+    LogDetails: typeof import('./components/LogViewer/LogDetails.vue')['default']
    LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default']
    LogList: typeof import('./components/LogViewer/LogList.vue')['default']
    LogMessageActions: typeof import('./components/LogViewer/LogMessageActions.vue')['default']
@@ -69,6 +70,7 @@ declare module 'vue' {
    'Mdi:hexagonMultiple': typeof import('~icons/mdi/hexagon-multiple')['default']
    'Mdi:keyboardEsc': typeof import('~icons/mdi/keyboard-esc')['default']
    'Mdi:magnify': typeof import('~icons/mdi/magnify')['default']
+    'Mdi:mdi:close': typeof import('~icons/mdi/mdi')['default']
    'Mdi:satelliteVariant': typeof import('~icons/mdi/satellite-variant')['default']
    MobileMenu: typeof import('./components/common/MobileMenu.vue')['default']
    MultiContainerActionToolbar: typeof import('./components/LogViewer/MultiContainerActionToolbar.vue')['default']
@@ -97,6 +99,7 @@ declare module 'vue' {
    ScrollProgress: typeof import('./components/ScrollProgress.vue')['default']
    Search: typeof import('./components/Search.vue')['default']
    ServiceLog: typeof import('./components/ServiceViewer/ServiceLog.vue')['default']
+    SideDrawer: typeof import('./components/common/SideDrawer.vue')['default']
    SideMenu: typeof import('./components/SideMenu.vue')['default']
    SidePanel: typeof import('./components/SidePanel.vue')['default']
    SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default']
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -13,7 +13,12 @@
        v-model="query"
        :placeholder="$t('placeholder.search-containers')"
      />
-      <mdi:keyboard-esc class="flex" />
+      <form method="dialog">
+        <button class="swap swap-rotate hover:swap-active">
+          <mdi:keyboard-esc class="swap-off" />
+          <mdi:close class="swap-on" />
+        </button>
+      </form>
    </div>
    <div
      class="dropdown-content !relative mt-2 max-h-[calc(100dvh-20rem)] w-full overflow-y-scroll rounded-md border-y-8 border-transparent bg-base-lighter px-2"
--- a/assets/components/GroupedViewer/GroupedLog.vue
+++ b/assets/components/GroupedViewer/GroupedLog.vue
@@ -16,7 +16,7 @@
        ref="viewer"
        :stream-source="useGroupedStream"
        :entity="group"
-        :visible-keys="visibleKeys"
+        :visible-keys="new Map<string[], boolean>()"
        :show-container-name="true"
      />
    </template>
@@ -43,6 +43,5 @@ const { customGroups } = storeToRefs(swarmStore);

 const group = computed(() => customGroups.value.find((g) => g.name === name) ?? new GroupedContainers("", []));

-const visibleKeys = ref<string[][]>([]);
 provideLoggingContext(toRef(() => group.value.containers));
 </script>
--- a/assets/components/LogViewer/ComplexLogItem.vue
+++ b/assets/components/LogViewer/ComplexLogItem.vue
@@ -1,10 +1,5 @@
 <template>
-  <div class="group/item relative flex w-full gap-x-2" @click="expandToggle()">
-    <label class="swap swap-rotate invisible absolute -left-4 top-0.5 size-4 group-hover/item:visible">
-      <input type="checkbox" v-model="expanded" @click="expandToggle()" />
-      <material-symbols:expand-all-rounded class="swap-off text-secondary" />
-      <material-symbols:collapse-all-rounded class="swap-on text-secondary" />
-    </label>
+  <div class="group/item relative flex w-full gap-x-2 hover:bg-secondary/10" @click="showLogDetails(logEntry)">
    <div v-if="showContainerName">
      <ContainerName :id="logEntry.containerID" />
    </div>
@@ -18,7 +13,7 @@
      <LogLevel :level="logEntry.level" />
    </div>
    <div>
-      <ul class="fields cursor-pointer space-x-4" :class="{ expanded }">
+      <ul class="fields cursor-pointer space-x-4">
        <li v-for="(value, name) in validValues" :key="name">
          <span class="text-light">{{ name }}=</span><span class="font-bold" v-if="value === null">&lt;null&gt;</span>
          <template v-else-if="Array.isArray(value)">
@@ -28,7 +23,6 @@
        </li>
        <li class="text-light" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
      </ul>
-      <FieldList :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys" />
    </div>
    <LogMessageActions
      class="duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100"
@@ -44,15 +38,14 @@ const { markSearch } = useSearchFilter();

 const { logEntry, showContainerName = false } = defineProps<{
  logEntry: ComplexLogEntry;
-  visibleKeys: string[][];
  showContainerName?: boolean;
 }>();

-const [expanded, expandToggle] = useToggle();
-
 const validValues = computed(() => {
  return Object.fromEntries(Object.entries(logEntry.message).filter(([_, value]) => value !== undefined));
 });
+
+const showLogDetails = useLogDetails();
 </script>

 <style lang="postcss" scoped>
--- a/assets/components/LogViewer/FieldList.vue
+++ b/assets/components/LogViewer/FieldList.vue
@@ -1,74 +0,0 @@
-<template>
-  <ul v-if="expanded" ref="root" class="ml-8">
-    <li v-for="(value, name) in fields" :key="name">
-      <template v-if="isObject(value)">
-        <span class="text-light">{{ name }}=</span>
-        <FieldList :fields="value" :parent-key="parentKey.concat(name)" :visible-keys="visibleKeys" expanded />
-      </template>
-      <template v-else-if="Array.isArray(value)">
-        <a @click.stop="toggleField(name)" class="link-primary mr-2 cursor-pointer">
-          {{ hasField(name) ? "remove" : "add" }}
-        </a>
-        <span class="text-light">{{ name }}=</span>[
-        <span class="font-bold" v-for="(item, index) in value">
-          <span v-html="JSON.stringify(item)"></span><span v-if="index !== value.length - 1">,</span>
-        </span>
-        ]
-      </template>
-      <template v-else>
-        <a @click.stop="toggleField(name)" class="link-primary mr-2 cursor-pointer">
-          {{ hasField(name) ? "remove" : "add" }}
-        </a>
-        <span class="text-light">{{ name }}=</span><span class="font-bold" v-html="value"></span>
-      </template>
-    </li>
-  </ul>
-</template>
-<script lang="ts" setup>
-import { arrayEquals, isObject } from "@/utils";
-
-const {
-  fields,
-  expanded = false,
-  parentKey = [],
-  visibleKeys = [],
-} = defineProps<{
-  fields: Record<string, any>;
-  expanded?: boolean;
-  parentKey?: string[];
-  visibleKeys?: string[][];
-}>();
-
-const root = ref<HTMLElement>();
-
-async function toggleField(field: string) {
-  const index = fieldIndex(field);
-
-  if (index > -1) {
-    visibleKeys.splice(index, 1);
-  } else {
-    visibleKeys.push(parentKey.concat(field));
-  }
-
-  await nextTick();
-
-  root.value?.scrollIntoView({
-    block: "center",
-  });
-}
-
-function hasField(field: string) {
-  return fieldIndex(field) > -1;
-}
-
-function fieldIndex(field: string) {
-  const path = parentKey.concat(field);
-  return visibleKeys.findIndex((keys) => arrayEquals(toRaw(keys), toRaw(path)));
-}
-</script>
-
-<style scoped lang="postcss">
-.text-light {
-  @apply text-base-content/70;
-}
-</style>
--- a/assets/components/LogViewer/LogDetails.vue
+++ b/assets/components/LogViewer/LogDetails.vue
@@ -0,0 +1,119 @@
+<template>
+  <header class="flex items-center gap-4">
+    <Tag :data-level="entry.level" class="uppercase text-white">{{ entry.level }}</Tag>
+    <h1 class="text-lg">
+      <DateTime :date="entry.date" />
+    </h1>
+    <h2 class="text-sm"><DistanceTime :date="entry.date" /> on {{ entry.std }}</h2>
+  </header>
+
+  <div class="mt-8 flex flex-col gap-4">
+    <section class="grid grid-cols-3 gap-2">
+      <div>
+        <div class="font-thin">Container Name</div>
+        <div class="text-lg font-bold">{{ container.name }}</div>
+      </div>
+      <div>
+        <div class="font-thin">Host</div>
+        <div class="text-lg font-bold">
+          {{ hosts[container.host].name }}
+        </div>
+      </div>
+      <div>
+        <div class="font-thin">Image</div>
+        <div class="text-lg font-bold">{{ container.image }}</div>
+      </div>
+    </section>
+    <table class="table" v-if="entry instanceof ComplexLogEntry">
+      <thead class="text-lg">
+        <tr>
+          <th>Field</th>
+          <th>Value</th>
+          <th>Show</th>
+        </tr>
+      </thead>
+      <tbody ref="list">
+        <tr v-for="{ key, value, enabled } in fields" :key="key.join('.')" class="hover">
+          <td class="cursor-move font-mono">
+            {{ key.join(".") }}
+          </td>
+          <td>
+            <code v-html="JSON.stringify(value)"></code>
+          </td>
+          <td>
+            <input type="checkbox" class="toggle toggle-primary" :checked="enabled" @change="toggleField(key)" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ComplexLogEntry } from "@/models/LogEntry";
+import { useSortable } from "@vueuse/integrations/useSortable";
+import DistanceTime from "../common/DistanceTime.vue";
+
+const { entry } = defineProps<{ entry: ComplexLogEntry }>();
+const { currentContainer } = useContainerStore();
+const list = ref<HTMLElement>();
+const container = currentContainer(toRef(() => entry.containerID));
+const visibleKeys = persistentVisibleKeysForContainer(container);
+const { hosts } = useHosts();
+
+function toggleField(key: string[]) {
+  if (visibleKeys.value.size === 0) {
+    visibleKeys.value = new Map<string[], boolean>(fields.value.map(({ key }) => [key, true]));
+  }
+
+  const enabled = visibleKeys.value.get(key);
+  visibleKeys.value.set(key, !enabled);
+}
+
+const fields = computed({
+  get() {
+    const fieldsWithValue: { key: string[]; value: any; enabled: boolean }[] = [];
+    const allFields = flattenJSONToMap(entry.unfilteredMessage);
+    if (visibleKeys.value.size === 0) {
+      for (const [key, value] of allFields) {
+        fieldsWithValue.push({ key, value, enabled: true });
+      }
+    } else {
+      for (const [key, enabled] of visibleKeys.value) {
+        const value = getDeep(entry.unfilteredMessage, key);
+        fieldsWithValue.push({ key, value, enabled });
+      }
+
+      for (const [key, value] of allFields) {
+        if ([...visibleKeys.value.keys()].findIndex((k) => arrayEquals(k, key)) === -1) {
+          fieldsWithValue.push({ key, value, enabled: false });
+        }
+      }
+    }
+
+    return fieldsWithValue;
+  },
+  set(value) {
+    const map = new Map<string[], boolean>();
+    for (const { key, enabled } of value) {
+      map.set(key, enabled);
+    }
+    visibleKeys.value = map;
+  },
+});
+
+useSortable(list, fields);
+</script>
+<style lang="postcss" scoped>
+.font-mono {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Consolas,
+    Liberation Mono,
+    monaco,
+    Menlo,
+    monospace;
+}
+</style>
--- a/assets/components/LogViewer/LogLevel.vue
+++ b/assets/components/LogViewer/LogLevel.vue
@@ -32,25 +32,26 @@ defineProps<{
  margin-top: -0.4em;
  align-self: flex-start;
 }
-
+</style>
+<style lang="postcss">
 [data-level="debug"],
 [data-level="trace"] {
-  @apply bg-purple;
+  @apply !bg-purple;
 }

 [data-level="info"] {
-  @apply bg-green;
+  @apply !bg-green;
 }

 [data-level="error"],
 [data-level="severe"],
 [data-level="critical"],
 [data-level="fatal"] {
-  @apply bg-red;
+  @apply !bg-red;
 }

 [data-level="warn"],
 [data-level="warning"] {
-  @apply bg-orange;
+  @apply !bg-orange;
 }
 </style>
--- a/assets/components/LogViewer/LogList.vue
+++ b/assets/components/LogViewer/LogList.vue
@@ -13,12 +13,7 @@
      :class="{ 'border border-secondary': toRaw(item) === toRaw(lastSelectedItem) }"
      class="group/entry"
    >
-      <component
-        :is="item.getComponent()"
-        :log-entry="item"
-        :visible-keys="visibleKeys"
-        :show-container-name="showContainerName"
-      />
+      <component :is="item.getComponent()" :log-entry="item" :show-container-name="showContainerName" />
    </li>
  </ul>
 </template>
@@ -30,7 +25,6 @@ const { loading, progress, currentDate } = useScrollContext();

 const { messages } = defineProps<{
  messages: LogEntry<string | JSONObject>[];
-  visibleKeys: string[][];
  lastSelectedItem: LogEntry<string | JSONObject> | undefined;
  showContainerName: boolean;
 }>();
--- a/assets/components/LogViewer/LogMessageActions.vue
+++ b/assets/components/LogViewer/LogMessageActions.vue
@@ -7,7 +7,7 @@
    >
      <span
        class="rounded bg-slate-800/60 px-1.5 py-1 text-primary hover:bg-slate-700"
-        @click="copyLogMessageToClipBoard()"
+        @click.prevent="copyLogMessageToClipBoard()"
      >
        <carbon:copy-file />
      </span>
@@ -19,7 +19,7 @@
    >
      <a
        class="rounded bg-slate-800/60 px-1.5 py-1 text-primary hover:bg-slate-700"
-        @click="handleJumpLineSelected($event, logEntry)"
+        @click.prevent="handleJumpLineSelected($event, logEntry)"
        :href="`#${logEntry.id}`"
      >
        <carbon:search-locate />
--- a/assets/components/LogViewer/LogViewer.vue
+++ b/assets/components/LogViewer/LogViewer.vue
@@ -1,20 +1,18 @@
 <template>
-  <LogList
-    :messages="filtered"
-    :last-selected-item="lastSelectedItem"
-    :visible-keys="visibleKeys"
-    :show-container-name="showContainerName"
-  />
+  <SideDrawer ref="drawer">
+    <LogDetails :entry="entry" v-if="entry && entry instanceof ComplexLogEntry" />
+  </SideDrawer>
+  <LogList :messages="filtered" :last-selected-item="lastSelectedItem" :show-container-name="showContainerName" />
 </template>

 <script lang="ts" setup>
 import { useRouteHash } from "@vueuse/router";
-
-import { type JSONObject, LogEntry } from "@/models/LogEntry";
+import SideDrawer from "@/components/common/SideDrawer.vue";
+import { ComplexLogEntry, type JSONObject, LogEntry } from "@/models/LogEntry";

 const props = defineProps<{
  messages: LogEntry<string | JSONObject>[];
-  visibleKeys: string[][];
+  visibleKeys: Map<string[], boolean>;
  showContainerName: boolean;
 }>();

@@ -23,6 +21,10 @@ const { messages, visibleKeys } = toRefs(props);
 const { filteredPayload } = useVisibleFilter(visibleKeys);
 const { filteredMessages } = useSearchFilter();

+const drawer = ref<InstanceType<typeof SideDrawer>>() as Ref<InstanceType<typeof SideDrawer>>;
+
+const { entry } = provideLogDetails(drawer);
+
 const visible = filteredPayload(messages);
 const filtered = filteredMessages(visible);

--- a/assets/components/LogViewer/ViewerWithSource.vue
+++ b/assets/components/LogViewer/ViewerWithSource.vue
@@ -10,7 +10,7 @@ import { LogStreamSource } from "@/composable/eventStreams";

 const { streamSource, visibleKeys, showContainerName, entity } = defineProps<{
  streamSource: (t: Ref<T>) => LogStreamSource;
-  visibleKeys: string[][];
+  visibleKeys: Map<string[], boolean>;
  showContainerName: boolean;
  entity: T;
 }>();
--- a/assets/components/LogViewer/snapshots/EventSource.spec.ts.snap
+++ b/assets/components/LogViewer/snapshots/EventSource.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`<ContainerEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
 "<ul data-v-cf9ff940="" class="events group pt-4 medium">
  <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
      <!--v-if-->
      <!--v-if-->
      <div data-v-961504e7="" data-v-a49e52d4="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
@@ -23,7 +23,7 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
 exports[`<ContainerEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
 "<ul data-v-cf9ff940="" class="events group pt-4 medium">
  <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
      <!--v-if-->
      <!--v-if-->
      <div data-v-961504e7="" data-v-a49e52d4="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
@@ -43,7 +43,7 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
 exports[`<ContainerEventSource /> > render html correctly > should render messages 1`] = `
 "<ul data-v-cf9ff940="" class="events group pt-4 medium">
  <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
      <!--v-if-->
      <!--v-if-->
      <div data-v-961504e7="" data-v-a49e52d4="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
@@ -63,7 +63,7 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
 exports[`<ContainerEventSource /> > render html correctly > should render messages with filter 1`] = `
 "<ul data-v-cf9ff940="" class="events group pt-4 medium">
  <li data-v-cf9ff940="" data-key="2" data-time="1560336942459" class="group/entry">
-    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
      <!--v-if-->
      <!--v-if-->
      <div data-v-961504e7="" data-v-a49e52d4="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
@@ -85,7 +85,7 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
 exports[`<ContainerEventSource /> > render html correctly > should render messages with html entities 1`] = `
 "<ul data-v-cf9ff940="" class="events group pt-4 medium">
  <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2" visible-keys="">
+    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
      <!--v-if-->
      <!--v-if-->
      <div data-v-961504e7="" data-v-a49e52d4="" class="inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
@@ -104,6 +104,16 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag

 exports[`<ContainerEventSource /> > renders loading correctly 1`] = `
 "<div class="flex min-h-[1px] justify-center"><span class="loading loading-bars loading-md mt-4 text-primary" style="display: none;"></span></div>
+<dialog data-v-43493931="" class="modal-right modal items-start outline-none backdrop:bg-none">
+  <div data-v-43493931="" class="modal-box">
+    <form data-v-43493931="" method="dialog"><button data-v-43493931="" class="swap swap-rotate absolute right-4 top-4 hover:swap-active"><svg data-v-43493931="" viewBox="0 0 24 24" width="1.2em" height="1.2em" class="swap-off">
+          <path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1zm10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2"></path>
+        </svg><svg data-v-43493931="" viewBox="0 0 24 24" width="1.2em" height="1.2em" class="swap-on">
+          <path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"></path>
+        </svg></button></form>
+  </div>
+  <form data-v-43493931="" method="dialog" class="modal-backdrop"><button data-v-43493931="">close</button></form>
+</dialog>
 <!--v-if-->"
 `;

--- a/assets/components/MultiContainerViewer/MultiContainerLog.vue
+++ b/assets/components/MultiContainerViewer/MultiContainerLog.vue
@@ -15,7 +15,7 @@
        ref="viewer"
        :stream-source="useMergedStream"
        :entity="containers"
-        :visible-keys="visibleKeys"
+        :visible-keys="new Map<string[], boolean>()"
        :show-container-name="true"
      />
    </template>
@@ -35,8 +35,5 @@ const containerStore = useContainerStore();
 const { allContainersById, ready } = storeToRefs(containerStore);

 const containers = computed(() => ids.map((id) => allContainersById.value[id]));
-
-const visibleKeys = ref<string[][]>([]);
-
 provideLoggingContext(containers);
 </script>
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -25,7 +25,7 @@
        </div>
      </div>
      <div
-        class="animate-background h-1 bg-gradient-to-br from-primary via-transparent to-primary"
+        class="animate-background h-1 bg-gradient-to-br from-primary via-primary/20 to-primary"
        v-show="!scrollContext.paused && !scrollContext.loading"
      ></div>
      <div ref="scrollObserver" class="h-px"></div>
@@ -96,7 +96,7 @@ function scrollToBottom(behavior: "auto" | "smooth" = "auto") {

 .animate-background {
  background-size: 400% 400%;
-  animation: gradient-animation 4s ease infinite;
+  animation: gradient-animation 5s ease infinite;
 }

@keyframes gradient-animation {
--- a/assets/components/ServiceViewer/ServiceLog.vue
+++ b/assets/components/ServiceViewer/ServiceLog.vue
@@ -19,7 +19,7 @@
        ref="viewer"
        :stream-source="useServiceStream"
        :entity="service"
-        :visible-keys="visibleKeys"
+        :visible-keys="new Map<string[], boolean>()"
        :show-container-name="true"
      />
    </template>
@@ -36,7 +36,6 @@ const { name, scrollable = false } = defineProps<{
  name: string;
 }>();

-const visibleKeys = ref<string[][]>([]);
 const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
 const store = useSwarmStore();
 const { services } = storeToRefs(store) as unknown as { services: Ref<Service[]> };
--- a/assets/components/StackViewer/StackLog.vue
+++ b/assets/components/StackViewer/StackLog.vue
@@ -22,7 +22,7 @@
        ref="viewer"
        :stream-source="useStackStream"
        :entity="stack"
-        :visible-keys="visibleKeys"
+        :visible-keys="new Map<string[], boolean>()"
        :show-container-name="true"
      />
    </template>
@@ -38,7 +38,6 @@ const { name, scrollable = false } = defineProps<{
  name: string;
 }>();

-const visibleKeys = ref<string[][]>([]);
 const viewer = ref<ComponentExposed<typeof ViewerWithSource>>();
 const store = useSwarmStore();
 const { stacks } = storeToRefs(store) as unknown as { stacks: Ref<Stack[]> };
--- a/assets/components/common/SideDrawer.vue
+++ b/assets/components/common/SideDrawer.vue
@@ -0,0 +1,34 @@
+<template>
+  <dialog ref="panel" class="modal-right modal items-start outline-none backdrop:bg-none">
+    <div class="modal-box">
+      <form method="dialog">
+        <button class="swap swap-rotate absolute right-4 top-4 hover:swap-active">
+          <mdi:keyboard-esc class="swap-off" />
+          <mdi:close class="swap-on" />
+        </button>
+      </form>
+      <slot></slot>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+</template>
+<script setup lang="ts">
+const panel = ref<HTMLDialogElement>();
+
+defineExpose({
+  open: () => {
+    panel.value?.showModal();
+  },
+});
+</script>
+<style scoped lang="postcss">
+.modal-right :where(.modal-box) {
+  @apply fixed right-0 h-lvh max-h-screen max-w-3xl translate-x-24 scale-100 rounded-none bg-base-lighter shadow-none;
+}
+
+.modal-right[open] .modal-box {
+  @apply translate-x-0;
+}
+</style>
--- a/assets/composable/profileStorage.ts
+++ b/assets/composable/profileStorage.ts
@@ -1,14 +1,34 @@
 import { Profile } from "@/stores/config";

-export function useProfileStorage<K extends keyof Profile>(key: K, defaultValue: NonNullable<Profile[K]>) {
+interface SerializerTransformer<T, U> {
+  from: (raw: U) => T;
+  to: (value: T) => U;
+}
+
+export function useProfileStorage<K extends keyof Profile>(
+  key: K,
+  defaultValue: NonNullable<Profile[K]>,
+  transformer?: SerializerTransformer<NonNullable<Profile[K]>, any>,
+) {
  const storageKey = "DOZZLE_" + key.toUpperCase();
  const storage = useStorage<NonNullable<Profile[K]>>(storageKey, defaultValue, undefined, {
    writeDefaults: false,
    mergeDefaults: true,
+    serializer: transformer
+      ? {
+          read: (raw) => transformer.from(JSON.parse(raw)),
+          write: (value) => JSON.stringify(transformer.to(value)),
+        }
+      : undefined,
+    onError: (e) => {
+      console.error(`Failed to read ${storageKey} from storage`, e);
+    },
  });

  if (config.profile?.[key]) {
-    if (storage.value instanceof Set && config.profile[key] instanceof Array) {
+    if (transformer) {
+      storage.value = transformer.from(config.profile[key]);
+    } else if (storage.value instanceof Set && config.profile[key] instanceof Array) {
      storage.value = new Set([...(config.profile[key] as Iterable<any>)]) as unknown as NonNullable<Profile[K]>;
    } else if (config.profile[key] instanceof Array) {
      storage.value = config.profile[key] as NonNullable<Profile[K]>;
@@ -23,9 +43,19 @@ export function useProfileStorage<K extends keyof Profile>(key: K, defaultValue:
    watch(
      storage,
      (value) => {
+        const transformedValue = transformer ? transformer.to(value) : value;
+
        fetch(withBase("/api/profile"), {
          method: "PATCH",
-          body: JSON.stringify({ [key]: value }, (_, value) => (value instanceof Set ? [...value] : value)),
+          body: JSON.stringify({ [key]: transformedValue }, (_, value) => {
+            if (value instanceof Set) {
+              return Array.from(value);
+            } else if (value instanceof Map) {
+              return Array.from(value.entries());
+            } else {
+              return value;
+            }
+          }),
        });
      },
      { deep: true },
--- a/assets/composable/showLogDetails.ts
+++ b/assets/composable/showLogDetails.ts
@@ -0,0 +1,22 @@
+import { JSONObject, LogEntry } from "@/models/LogEntry";
+import SideDrawer from "@/components/common/SideDrawer.vue";
+
+export const showLogDetails = Symbol("showLogDetails") as InjectionKey<
+  (logEntry: LogEntry<string | JSONObject>) => void
+>;
+
+export const provideLogDetails = (drawer: Ref<InstanceType<typeof SideDrawer>>) => {
+  const entry = ref<LogEntry<string | JSONObject>>();
+
+  provide(showLogDetails, (logEntry: LogEntry<string | JSONObject>) => {
+    entry.value = logEntry;
+    drawer.value?.open();
+  });
+
+  return { entry };
+};
+
+export const useLogDetails = () => {
+  const showDetails = inject(showLogDetails, () => {});
+  return showDetails;
+};
--- a/assets/composable/storage.ts
+++ b/assets/composable/storage.ts
@@ -7,17 +7,21 @@ if (config.hosts.length === 1 && !sessionHost.value) {
  sessionHost.value = config.hosts[0].id;
 }

-export function persistentVisibleKeysForContainer(container: Ref<Container>): Ref<string[][]> {
-  const storage = useProfileStorage("visibleKeys", {});
-  return computed(() => {
-    if (!(container.value.storageKey in storage.value)) {
-      // Returning a temporary ref here to avoid writing an empty array to storage
-      const visibleKeys = ref<string[][]>([]);
-      watchOnce(visibleKeys, () => (storage.value[container.value.storageKey] = visibleKeys.value), { deep: true });
-      return visibleKeys.value;
-    }
-
-    return storage.value[container.value.storageKey];
+const storage = useProfileStorage("visibleKeys", new Map<string, Map<string[], boolean>>(), {
+  from(transformed: [string, [string[], boolean][]][]) {
+    return new Map(transformed.map(([key, value]) => [key, new Map(value)]));
+  },
+  to(value: Map<string, Map<string[], boolean>>) {
+    const outer = Array.from(value.entries());
+    const inner = outer.map(([key, value]) => [key, Array.from(value.entries())]);
+    return inner;
+  },
+});
+export function persistentVisibleKeysForContainer(container: Ref<Container>): Ref<Map<string[], boolean>> {
+  // Computed property to only store to storage when the value changes
+  return computed({
+    get: () => storage.value.get(container.value.storageKey) || new Map<string[], boolean>(),
+    set: (value: Map<string[], boolean>) => storage.value.set(container.value.storageKey, value),
  });
 }

--- a/assets/composable/visible.ts
+++ b/assets/composable/visible.ts
@@ -1,7 +1,7 @@
 import { ComplexLogEntry, type JSONObject, type LogEntry } from "@/models/LogEntry";
 import type { Ref } from "vue";

-export function useVisibleFilter(visibleKeys: Ref<string[][]>) {
+export function useVisibleFilter(visibleKeys: Ref<Map<string[], boolean>>) {
  function filteredPayload(messages: Ref<LogEntry<string | JSONObject>[]>) {
    return computed(() => {
      return messages.value.map((d) => {
--- a/assets/models/LogEntry.ts
+++ b/assets/models/LogEntry.ts
@@ -67,15 +67,18 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
    date: Date,
    public readonly level: Level,
    public readonly std: Std,
-    visibleKeys?: Ref<string[][]>,
+    visibleKeys?: Ref<Map<string[], boolean>>,
  ) {
    super(message, containerID, id, date, std, level);
    if (visibleKeys) {
      this.filteredMessage = computed(() => {
-        if (!visibleKeys.value.length) {
+        if (visibleKeys.value.size === 0) {
          return flattenJSON(message);
        } else {
-          return visibleKeys.value.reduce((acc, attr) => ({ ...acc, [attr.join(".")]: getDeep(message, attr) }), {});
+          const keys = Array.from(visibleKeys.value.entries())
+            .filter(([, value]) => value)
+            .map(([key]) => key);
+          return keys.reduce((acc, attr) => ({ ...acc, [attr.join(".")]: getDeep(message, attr) }), {});
        }
      });
    } else {
@@ -87,14 +90,14 @@ export class ComplexLogEntry extends LogEntry<JSONObject> {
  }

  public get message(): JSONObject {
-    return this.filteredMessage.value;
+    return unref(this.filteredMessage);
  }

  public get unfilteredMessage(): JSONObject {
    return this._message;
  }

-  static fromLogEvent(event: ComplexLogEntry, visibleKeys: Ref<string[][]>): ComplexLogEntry {
+  static fromLogEvent(event: ComplexLogEntry, visibleKeys: Ref<Map<string[], boolean>>): ComplexLogEntry {
    return new ComplexLogEntry(
      event._message,
      event.containerID,
@@ -165,7 +168,7 @@ export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
      event.id,
      new Date(event.ts),
      event.l,
-      event.s === "unknown" ? "stderr" : event.s ?? "stderr",
+      event.s === "unknown" ? "stderr" : (event.s ?? "stderr"),
    );
  } else {
    return new SimpleLogEntry(
@@ -175,7 +178,7 @@ export function asLogEntry(event: LogEvent): LogEntry<string | JSONObject> {
      new Date(event.ts),
      event.l,
      event.p,
-      event.s === "unknown" ? "stderr" : event.s ?? "stderr",
+      event.s === "unknown" ? "stderr" : (event.s ?? "stderr"),
    );
  }
 }
--- a/assets/pages/settings.vue
+++ b/assets/pages/settings.vue
@@ -108,7 +108,6 @@
        </div>
        <LogList
          :messages="fakeMessages"
-          :visible-keys="keys"
          :last-selected-item="undefined"
          :show-container-name="false"
          class="hidden overflow-hidden rounded-lg border border-base-content/50 shadow @3xl:block"
@@ -163,7 +162,6 @@ const { t } = useI18n();
 setTitle(t("title.settings"));
 const { latest, hasUpdate } = useReleases();

-const keys = ref<string[][]>([]);
 const now = new Date();
 const hoursAgo = (hours: number) => {
  const date = new Date(now);
@@ -208,7 +206,6 @@ const fakeMessages = computedWithControl(
      new Date(),
      "info",
      "stdout",
-      keys,
    ),
    new SimpleLogEntry(t("settings.log.simple"), "123", 7, new Date(), "debug", undefined, "stderr"),
  ],
--- a/assets/stores/config.ts
+++ b/assets/stores/config.ts
@@ -22,7 +22,7 @@ export interface Config {
 export interface Profile {
  settings?: Settings;
  pinned?: Set<string>;
-  visibleKeys?: { [key: string]: string[][] };
+  visibleKeys?: Map<string, Map<string[], boolean>>;
  releaseSeen?: string;
  collapsedGroups?: Set<string>;
 }
--- a/assets/utils/index.ts
+++ b/assets/utils/index.ts
@@ -16,16 +16,28 @@ export function isObject(value: any): value is Record<string, any> {
 }

 export function flattenJSON(obj: Record<string, any>, path: string[] = []) {
-  const result: Record<string, any> = {};
-  Object.keys(obj).forEach((key) => {
+  const map = flattenJSONToMap(obj);
+  const result = {} as Record<string, any>;
+  for (const [key, value] of map) {
+    result[key.join(".")] = value;
+  }
+  return result;
+}
+
+export function flattenJSONToMap(obj: Record<string, any>, path: string[] = []): Map<string[], any> {
+  const result = new Map<string[], any>();
+  for (const key of Object.keys(obj)) {
    const value = obj[key];
    const newPath = path.concat(key);
    if (isObject(value)) {
-      Object.assign(result, flattenJSON(value, newPath));
+      for (const [k, v] of flattenJSONToMap(value, newPath)) {
+        result.set(k, v);
+      }
    } else {
-      result[newPath.join(".")] = value;
+      result.set(newPath, value);
    }
-  });
+  }
+
  return result;
 }

--- a/internal/profile/disk.go
+++ b/internal/profile/disk.go
@@ -38,11 +38,11 @@ type Settings struct {
 }

 type Profile struct {
-	Settings        *Settings             `json:"settings,omitempty"`
-	Pinned          []string              `json:"pinned"`
-	VisibleKeys     map[string][][]string `json:"visibleKeys,omitempty"`
-	ReleaseSeen     string                `json:"releaseSeen,omitempty"`
-	CollapsedGroups []string              `json:"collapsedGroups"`
+	Settings        *Settings     `json:"settings,omitempty"`
+	Pinned          []string      `json:"pinned"`
+	VisibleKeys     []interface{} `json:"visibleKeys,omitempty"`
+	ReleaseSeen     string        `json:"releaseSeen,omitempty"`
+	CollapsedGroups []string      `json:"collapsedGroups"`
 }

 var dataPath string
@@ -68,7 +68,7 @@ func UpdateFromReader(user auth.User, reader io.Reader) error {
 	defer mux.Unlock()
 	existingProfile, err := Load(user)
 	if err != nil && err != errMissingProfileErr {
-		return err
+		log.Error().Err(err).Msg("Unable to load profile. Overwriting it.")
 	}

 	if err := json.NewDecoder(reader).Decode(&existingProfile); err != nil {
--- a/internal/web/auth_test.go
+++ b/internal/web/auth_test.go
@@ -27,6 +27,7 @@ func Test_createRoutes_index(t *testing.T) {
 	abide.AssertHTTPResponse(t, t.Name(), rr.Result())
 }

+
 func Test_createRoutes_redirect(t *testing.T) {
 	fs := afero.NewMemMapFs()
 	require.NoError(t, afero.WriteFile(fs, "index.html", []byte("index page"), 0644), "WriteFile should have no error.")
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -40,7 +40,7 @@ error:
  events-stream:
    title: Unexpected Error
    message: >-
-      Dozzle UI wasn't able to connect API. Please check your network settings.
+      Dozzle UI wasn't able to connect to API. Please check your network settings.
      If you are using a reverse proxy, please make sure it is configured
      properly.
  events-timeout:
@@ -95,8 +95,8 @@ settings:
    preview: This is a preview of the logs
    warning: A warning log looks like this
    complex: This is a complex log entry as json
-    simple: This is a very very long message which would wrap by default. Disabling soft wraps would disable this. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
-    multi-line-error: 
+    simple: This is a very very long message which would wrap by default. Disabling soft wraps would disable this. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    multi-line-error:
      start-line: This is a multi line error message
      middle-line: with a second line
      end-line: and finally third line.
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
    "lodash.debounce": "^4.0.8",
    "pinia": "^2.2.2",
    "postcss": "^8.4.41",
+    "sortablejs": "^1.15.2",
    "splitpanes": "^3.1.5",
    "strip-ansi": "^7.1.0",
    "tailwindcss": "^3.4.10",
@@ -85,7 +86,7 @@
    "@types/d3-shape": "^3.1.6",
    "@types/d3-transition": "^3.0.8",
    "@types/lodash.debounce": "^4.0.9",
-    "@types/node": "^22.5.1",
+    "@types/node": "^22.5.0",
    "@vitejs/plugin-vue": "5.1.2",
    "@vue/compiler-sfc": "^3.4.38",
    "@vue/test-utils": "^2.4.6",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,7 +49,7 @@ importers:
        version: 11.0.3(vue@3.4.38(typescript@5.5.4))
      '@vueuse/integrations':
        specifier: ^11.0.3
-        version: 11.0.3(focus-trap@7.5.4)(fuse.js@7.0.0)(vue@3.4.38(typescript@5.5.4))
+        version: 11.0.3(focus-trap@7.5.4)(fuse.js@7.0.0)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
      '@vueuse/router':
        specifier: ^11.0.3
        version: 11.0.3(vue-router@4.4.3(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
@@ -98,6 +98,9 @@ importers:
      postcss:
        specifier: ^8.4.41
        version: 8.4.41
+      sortablejs:
+        specifier: ^1.15.2
+        version: 1.15.2
      splitpanes:
        specifier: ^3.1.5
        version: 3.1.5
@@ -133,7 +136,7 @@ importers:
        version: 0.11.0(vite@5.4.2(@types/node@22.5.1))(vue-router@4.4.3(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
      vitepress:
        specifier: 1.3.4
-        version: 1.3.4(@algolia/client-search@5.0.0)(@types/node@22.5.1)(fuse.js@7.0.0)(postcss@8.4.41)(search-insights@2.16.3)(typescript@5.5.4)
+        version: 1.3.4(@algolia/client-search@5.0.0)(@types/node@22.5.1)(fuse.js@7.0.0)(postcss@8.4.41)(search-insights@2.16.3)(sortablejs@1.15.2)(typescript@5.5.4)
      vue:
        specifier: ^3.4.38
        version: 3.4.38(typescript@5.5.4)
@@ -172,7 +175,7 @@ importers:
        specifier: ^4.0.9
        version: 4.0.9
      '@types/node':
-        specifier: ^22.5.1
+        specifier: ^22.5.0
        version: 22.5.1
      '@vitejs/plugin-vue':
        specifier: 5.1.2
@@ -2661,6 +2664,9 @@ packages:
    resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
    engines: {node: '>=18'}

+  sortablejs@1.15.2:
+    resolution: {integrity: sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA==}
+
  source-map-js@1.2.0:
    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
    engines: {node: '>=0.10.0'}
@@ -4305,7 +4311,7 @@ snapshots:
      - '@vue/composition-api'
      - vue

-  '@vueuse/integrations@11.0.3(focus-trap@7.5.4)(fuse.js@7.0.0)(vue@3.4.38(typescript@5.5.4))':
+  '@vueuse/integrations@11.0.3(focus-trap@7.5.4)(fuse.js@7.0.0)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))':
    dependencies:
      '@vueuse/core': 11.0.3(vue@3.4.38(typescript@5.5.4))
      '@vueuse/shared': 11.0.3(vue@3.4.38(typescript@5.5.4))
@@ -4313,6 +4319,7 @@ snapshots:
    optionalDependencies:
      focus-trap: 7.5.4
      fuse.js: 7.0.0
+      sortablejs: 1.15.2
    transitivePeerDependencies:
      - '@vue/composition-api'
      - vue
@@ -5638,6 +5645,8 @@ snapshots:
      ansi-styles: 6.2.1
      is-fullwidth-code-point: 5.0.0

+  sortablejs@1.15.2: {}
+
  source-map-js@1.2.0: {}

  source-map@0.6.1:
@@ -6098,7 +6107,7 @@ snapshots:
      '@types/node': 22.5.1
      fsevents: 2.3.3

-  vitepress@1.3.4(@algolia/client-search@5.0.0)(@types/node@22.5.1)(fuse.js@7.0.0)(postcss@8.4.41)(search-insights@2.16.3)(typescript@5.5.4):
+  vitepress@1.3.4(@algolia/client-search@5.0.0)(@types/node@22.5.1)(fuse.js@7.0.0)(postcss@8.4.41)(search-insights@2.16.3)(sortablejs@1.15.2)(typescript@5.5.4):
    dependencies:
      '@docsearch/css': 3.6.1
      '@docsearch/js': 3.6.1(@algolia/client-search@5.0.0)(search-insights@2.16.3)
@@ -6109,7 +6118,7 @@ snapshots:
      '@vue/devtools-api': 7.3.8
      '@vue/shared': 3.4.38
      '@vueuse/core': 11.0.3(vue@3.4.38(typescript@5.5.4))
-      '@vueuse/integrations': 11.0.3(focus-trap@7.5.4)(fuse.js@7.0.0)(vue@3.4.38(typescript@5.5.4))
+      '@vueuse/integrations': 11.0.3(focus-trap@7.5.4)(fuse.js@7.0.0)(sortablejs@1.15.2)(vue@3.4.38(typescript@5.5.4))
      focus-trap: 7.5.4
      mark.js: 8.11.1
      minisearch: 7.1.0