feat: add more options in log viewer

Author: notwindstone

bun.lockb

@@ -21,6 +21,7 @@
     "@tauri-apps/plugin-http": "~2",
     "@tauri-apps/plugin-log": "~2",
     "@tauri-apps/plugin-notification": "~2",
+    "@tauri-apps/plugin-opener": "~2",
     "@tauri-apps/plugin-os": "~2",
     "@tauri-apps/plugin-process": "~2",
     "@tauri-apps/plugin-shell": "~2",

package.json

@@ -36,6 +36,7 @@ tauri-plugin-process = "2"
 tauri-plugin-shell = "2"
 tauri-plugin-upload = "2"
 tauri-plugin-drpc = "0.1.4"
+tauri-plugin-opener = "2"
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-global-shortcut = "2"

src-tauri/Cargo.lock

@@ -253,6 +253,14 @@
     "notification:allow-request-permission",
     "notification:allow-show",
 
+    "opener:allow-open-url",
+    "opener:allow-default-urls",
+    "opener:allow-reveal-item-in-dir",
+    {
+      "identifier": "opener:allow-open-path",
+      "allow": [{ "path": "$APPDATA" }, { "path": "$APPDATA/**/*" }]
+    },
+
     "os:allow-arch",
     "os:allow-exe-extension",
     "os:allow-family",

src-tauri/Cargo.toml

@@ -3,6 +3,7 @@ use tauri::Manager;
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_opener::init())
         .plugin(tauri_plugin_upload::init())
         .plugin(tauri_plugin_single_instance::init(|app, _args, _cwd| {
             let _ = app

src-tauri/capabilities/default.json

@@ -2,15 +2,19 @@
 import MaterialRipple from "@/components/misc/MaterialRipple.vue";
 import { ref, shallowRef, useTemplateRef, watchEffect } from "vue";
 import { useDebounceFn, useEventListener } from "@vueuse/core";
+import { revealItemInDir } from "@tauri-apps/plugin-opener";
+import { appDataDir, join } from "@tauri-apps/api/path";
 
 const target = useTemplateRef("target");
 const focused = ref<boolean>(false);
 const found = shallowRef<Array<number>>([]);
 const position = ref(1);
 
-const { searchLogs, scrollToIndex } = defineProps<{
-  "searchLogs"   : (search: string) => Array<number>;
-  "scrollToIndex": (index: number) => void;
+const { searchLogs, scrollToIndex, horizontalScroll, toggleHorizontalScroll } = defineProps<{
+  "searchLogs"            : (search: string) => Array<number>;
+  "scrollToIndex"         : (index: number) => void;
+  "horizontalScroll"      : boolean;
+  "toggleHorizontalScroll": () => void;
 }>();
 
 function focusSearch(): void {
@@ -57,6 +61,12 @@ function handleEnter(event: KeyboardEvent): void {
   );
 }
 
+async function viewInExplorer(): Promise<void> {
+  const latestLogAbsolutePath = await join(await appDataDir(), "logs", "latest.log");
+
+  await revealItemInDir(latestLogAbsolutePath);
+}
+
 const handleInput = useDebounceFn((event: Event): void => {
   const target = event?.target as HTMLInputElement;
 
@@ -85,12 +95,12 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div class="h-8 w-full flex flex-nowrap gap-2">
+  <div class="h-8 w-full flex flex-wrap gap-2 overflow-x-auto">
     <div
       @click="focusSearch"
       :class="[
         focused ? 'cursor-text' : 'cursor-pointer',
-        'relative w-40 flex flex-nowrap items-center gap-2 rounded-md bg-neutral-800 pl-2',
+        'shrink-0 relative w-40 flex flex-nowrap items-center gap-2 rounded-md bg-neutral-800 pl-2',
       ]"
     >
       <div :class="[
@@ -112,7 +122,7 @@ watchEffect(() => {
       />
       <MaterialRipple :disabled="focused" />
     </div>
-    <div class="flex flex-nowrap bg-neutral-800 items-center h-full rounded-md text-sm text-neutral-400">
+    <div class="shrink-0 flex flex-nowrap bg-neutral-800 items-center h-full rounded-md text-sm text-neutral-400">
       <button
         @click="incrementIndex"
         class="relative grid size-6 ml-1 place-items-center rounded-md transition-[color] hover:text-white"
@@ -139,12 +149,29 @@ watchEffect(() => {
         of {{ found.length  }} matches
       </p>
     </div>
-    <button class="relative grid px-2 w-fit flex flex-nowrap gap-2 items-center h-full place-items-center rounded-md bg-neutral-800">
+    <button
+      @click="viewInExplorer"
+      class="shrink-0 relative grid px-2 w-fit flex flex-nowrap gap-2 items-center h-full place-items-center rounded-md bg-neutral-800"
+    >
       <span :class="['i-lucide-external-link block size-4']"></span>
       <span class="block">
         View in Explorer
       </span>
       <MaterialRipple />
     </button>
+    <button
+      @click="toggleHorizontalScroll"
+      :class="[
+        horizontalScroll ? 'invert' : '',
+        'shrink-0 relative grid px-2 w-fit flex flex-nowrap gap-2 bg-neutral-800',
+        'items-center h-full place-items-center rounded-md transition-[filter]',
+      ]"
+    >
+      <span :class="['i-lucide-text-wrap block size-4']"></span>
+      <span class="block">
+        Line Breaks
+      </span>
+      <MaterialRipple />
+    </button>
   </div>
 </template>

src-tauri/src/lib.rs

@@ -13,7 +13,7 @@ import MaterialRipple from "@/components/misc/MaterialRipple.vue";
 const virtualList = useTemplateRef("virtualList");
 
 const logs = shallowRef<Array<string>>(["__kaede-trigger-loading"]);
-const horizontalScroll = ref<boolean>(false);
+const horizontalScroll = ref<boolean>(true);
 const fileData = ref<{
   "size": string | undefined;
   "time": string | undefined;
@@ -120,7 +120,7 @@ onMounted(async () => {
       @contextmenu="showContextMenu"
       class="rounded-md pointer-events-auto z-40000 h-fit max-h-[calc(100vh-64px)] max-w-[calc(100vw-64px)] w-fit flex flex-col gap-2 bg-neutral-900 p-4 text-white drop-shadow-lg"
     >
-      <div class="w-full flex flex-nowrap items-start justify-between gap-4 pb-2">
+      <div class="w-full flex flex-nowrap items-start justify-between gap-4 pb-2 shrink-0">
         <div class="flex flex-col gap-2">
           <p class="select-none text-xl font-medium leading-none">
             Logs
@@ -134,6 +134,8 @@ onMounted(async () => {
           <LogControls
             :searchLogs="searchLogs"
             :scrollToIndex="(index: number) => virtualList?.scrollToIndex?.(index)"
+            :horizontalScroll="horizontalScroll"
+            :toggleHorizontalScroll="() => horizontalScroll = !horizontalScroll"
           />
         </div>
         <button