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

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>