feat(settings): add debug page

* Create debug.rs

* Update settings.vue to add tab for debug

* Update main.scss to add light theme

* Update interface.vue to add light mode

* Create debug.vue

* Update debug.vue too add open log button

* Update lib.rs

* Update debug.rs

* Update debug.rs

* Update lib.rs

* Update lib.rs

* Update debug.rs

* Update debug.vue

* fix(debug): refactor and cleanup

* revert(theme): revert light theming

---------

Co-authored-by: DecDuck <declanahofmeyr@gmail.com>

pages/settings.vue

@@ -39,6 +39,7 @@ import {
   CubeIcon,
   HomeIcon,
   RectangleGroupIcon,
+  BugAntIcon,
 } from "@heroicons/vue/16/solid";
 import type { Component } from "vue";
 import type { NavigationItem } from "~/types";
@@ -63,6 +64,12 @@ const navigation: Array<NavigationItem & { icon: Component }> = [
     prefix: "/settings/downloads",
     icon: ArrowDownTrayIcon,
   },
+  {
+    label: "Debug Info",
+    route: "/settings/debug",
+    prefix: "/settings/debug",
+    icon: BugAntIcon,
+  },
 ];
 
 const currentPlatform = platform();

pages/settings/debug.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="divide-y divide-zinc-700">
+    <div class="py-6">
+      <h2 class="text-base font-semibold font-display leading-7 text-zinc-100">
+        Debug Information
+      </h2>
+      <p class="mt-1 text-sm leading-6 text-zinc-400">
+        Technical information about your Drop client installation, helpful for
+        debugging.
+      </p>
+
+      <div class="mt-10 space-y-8">
+        <div>
+          <div class="flex items-center gap-x-3">
+            <FingerPrintIcon class="h-5 w-5 text-zinc-400" />
+            <h3 class="text-sm font-medium leading-6 text-zinc-100">
+              Client ID
+            </h3>
+          </div>
+          <p class="mt-2 text-sm text-zinc-400 font-mono ml-8">
+            {{ clientId || "Not signed in" }}
+          </p>
+        </div>
+
+        <div>
+          <div class="flex items-center gap-x-3">
+            <ComputerDesktopIcon class="h-5 w-5 text-zinc-400" />
+            <h3 class="text-sm font-medium leading-6 text-zinc-100">
+              Platform
+            </h3>
+          </div>
+          <p class="mt-2 text-sm text-zinc-400 font-mono ml-8">
+            {{ platformInfo }}
+          </p>
+        </div>
+
+        <div>
+          <div class="flex items-center gap-x-3">
+            <ServerIcon class="h-5 w-5 text-zinc-400" />
+            <h3 class="text-sm font-medium leading-6 text-zinc-100">
+              Server URL
+            </h3>
+          </div>
+          <p class="mt-2 text-sm text-zinc-400 font-mono ml-8">
+            {{ baseUrl || "Not connected" }}
+          </p>
+        </div>
+
+        <div>
+          <div class="flex items-center gap-x-3">
+            <FolderIcon class="h-5 w-5 text-zinc-400" />
+            <h3 class="text-sm font-medium leading-6 text-zinc-100">
+              Data Directory
+            </h3>
+          </div>
+          <p class="mt-2 text-sm text-zinc-400 font-mono ml-8">
+            {{ dataDir || "Unknown" }}
+          </p>
+        </div>
+
+        <div v-if="compatInfo">
+          <div class="flex items-center gap-x-3">
+            <CubeIcon class="h-5 w-5 text-zinc-400" />
+            <h3 class="text-sm font-medium leading-6 text-zinc-100">
+              Compatibility Settings
+            </h3>
+          </div>
+          <div class="mt-2 ml-8 space-y-1">
+            <p class="text-sm text-zinc-400 font-mono">
+              Enabled: {{ compatInfo.enabled ? "Yes" : "No" }}
+            </p>
+            <p class="text-sm text-zinc-400 font-mono">
+              Runner: {{ compatInfo.runner || "Not configured" }}
+            </p>
+            <p class="text-sm text-zinc-400 font-mono">
+              Prefix: {{ compatInfo.prefix || "Not configured" }}
+            </p>
+          </div>
+        </div>
+
+        <div class="pt-6 flex gap-x-4">
+          <button
+            @click="() => openDataDir()"
+            type="button"
+            class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+          >
+            <FolderIcon class="h-5 w-5" aria-hidden="true" />
+            Open Data Directory
+          </button>
+          <button
+            @click="() => openLogFile()"
+            type="button"
+            class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+          >
+            <DocumentTextIcon class="h-5 w-5" aria-hidden="true" />
+            Open Log File
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { invoke } from "@tauri-apps/api/core";
+import { platform, type } from "@tauri-apps/plugin-os";
+import {
+  FingerPrintIcon,
+  TagIcon,
+  ComputerDesktopIcon,
+  ServerIcon,
+  FolderIcon,
+  CubeIcon,
+  DocumentTextIcon,
+} from "@heroicons/vue/24/outline";
+import { open } from "@tauri-apps/plugin-shell";
+
+const clientId = ref<string | null>(null);
+const platformInfo = ref("Loading...");
+const baseUrl = ref<string | null>(null);
+const dataDir = ref<string | null>(null);
+const compatInfo = ref<{
+  enabled: boolean;
+  runner: string | null;
+  prefix: string | null;
+} | null>(null);
+
+const systemData = await invoke<{
+  clientId: string;
+  baseUrl: string;
+  dataDir: string;
+}>("fetch_system_data");
+
+console.log(systemData);
+
+clientId.value = systemData.clientId;
+baseUrl.value = systemData.baseUrl;
+dataDir.value = systemData.dataDir;
+
+const currentPlatform = await platform();
+platformInfo.value = currentPlatform;
+
+async function openDataDir() {
+  if (!dataDir.value) return;
+  try {
+    await open(dataDir.value);
+  } catch (error) {
+    console.error("Failed to open data dir:", error);
+  }
+}
+
+async function openLogFile() {
+  if (!dataDir.value) return;
+  try {
+    const logPath = `${dataDir.value}/drop.log`;
+    await open(logPath);
+  } catch (error) {
+    console.error("Failed to open log file:", error);
+  }
+}
+</script>

pages/settings/interface.vue

@@ -1,3 +1,7 @@
 <template>
     
-</template>
+</template>
+
+<script setup lang="ts">
+
+</script>

src-tauri/src/debug.rs

@@ -0,0 +1,23 @@
+use crate::{DATA_ROOT_DIR, DB};
+use serde::Serialize;
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SystemData {
+    client_id: String,
+    base_url: String,
+    data_dir: String,
+}
+
+#[tauri::command]
+pub fn fetch_system_data() -> Result<SystemData, String> {
+    let db_handle = DB.borrow_data().map_err(|e| e.to_string())?;
+    let system_data = SystemData {
+        client_id: db_handle.auth.as_ref().unwrap().client_id.clone(),
+        base_url: db_handle.base_url.clone(),
+        data_dir: DATA_ROOT_DIR.lock().unwrap().to_string_lossy().to_string(),
+    };
+    drop(db_handle);
+
+    Ok(system_data)
+}

src-tauri/src/lib.rs

@@ -3,21 +3,27 @@ mod db;
 mod downloads;
 mod library;
 
+mod autostart;
 mod cleanup;
+mod debug;
 mod process;
 mod remote;
 mod state;
 #[cfg(test)]
 mod tests;
-mod autostart;
 
+use crate::autostart::{get_autostart_enabled, toggle_autostart};
 use crate::db::DatabaseImpls;
-use auth::{auth_initiate, generate_authorization_header, manual_recieve_handshake, recieve_handshake, retry_connect, sign_out};
+use auth::{
+    auth_initiate, generate_authorization_header, manual_recieve_handshake, recieve_handshake,
+    retry_connect, sign_out,
+};
 use cleanup::{cleanup_and_exit, quit};
 use db::{
     add_download_dir, delete_download_dir, fetch_download_dir_stats, DatabaseInterface, GameStatus,
     DATA_ROOT_DIR,
 };
+use debug::fetch_system_data;
 use downloads::download_commands::*;
 use downloads::download_manager::DownloadManager;
 use downloads::download_manager_builder::DownloadManagerBuilder;
@@ -47,7 +53,6 @@ use tauri::menu::{Menu, MenuItem, PredefinedMenuItem};
 use tauri::tray::TrayIconBuilder;
 use tauri::{AppHandle, Manager, RunEvent, WindowEvent};
 use tauri_plugin_deep_link::DeepLinkExt;
-use crate::autostart::{get_autostart_enabled, toggle_autostart};
 
 #[derive(Clone, Copy, Serialize)]
 pub enum AppStatus {
@@ -217,6 +222,7 @@ pub fn run() {
             // Core utils
             fetch_state,
             quit,
+            fetch_system_data,
             // Auth
             auth_initiate,
             retry_connect,
@@ -250,7 +256,7 @@ pub fn run() {
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_autostart::init(
             tauri_plugin_autostart::MacosLauncher::LaunchAgent,
-            Some(vec!["--minimize"])
+            Some(vec!["--minimize"]),
         ))
         .setup(|app| {
             let handle = app.handle().clone();