feat: add settings page (#622)

* feat: refactor settings dropdown

* feat: create settings page

* wip test

* teste: add tests case

* feat: removed settings dropdown

* leftover

* refactor wording

* feat: create use-download-file hook

* test: replace expect check

* refactor version tab

* fix test

* refactor general tab

Author: peppescg

main/src/main.ts

@@ -11,7 +11,7 @@ import {
 } from 'electron'
 import path from 'node:path'
 import { updateElectronApp } from 'update-electron-app'
-import { existsSync } from 'node:fs'
+import { existsSync, readFile } from 'node:fs'
 import started from 'electron-squirrel-startup'
 import * as Sentry from '@sentry/electron/main'
 import { initTray, updateTrayStatus } from './system-tray'
@@ -35,7 +35,6 @@ import {
 import log from './logger'
 import { getAppVersion, isOfficialReleaseBuild, pollWindowReady } from './util'
 import { delay } from '../../utils/delay'
-
 import Store from 'electron-store'
 
 const store = new Store<{
@@ -584,5 +583,31 @@ ipcMain.handle('sentry.opt-out', (): boolean => {
 
 ipcMain.handle('sentry.opt-in', (): boolean => {
   store.set('isTelemetryEnabled', true)
-  return store.get('isTelemetryEnabled', true)
+  return true
 })
+
+// Log file operations
+ipcMain.handle(
+  'get-main-log-content',
+  async (): Promise<string | undefined> => {
+    try {
+      const logPath = path.join(app.getPath('logs'), 'main.log')
+      if (!existsSync(logPath)) {
+        log.warn(`Log file does not exist: ${logPath}`)
+        return
+      }
+
+      const content = await new Promise<string>((resolve, reject) => {
+        readFile(logPath, 'utf8', (err, data) => {
+          if (err) reject(err)
+          else resolve(data)
+        })
+      })
+
+      return content
+    } catch (error) {
+      log.error('Failed to read log file:', error)
+      return
+    }
+  }
+)

preload/src/preload.ts

@@ -3,6 +3,7 @@
 
 import { contextBridge, ipcRenderer } from 'electron'
 import type { WorkloadsWorkload } from '../../renderer/src/common/api/generated/types.gen'
+import { TOOLHIVE_VERSION } from '../../utils/constants'
 
 // Expose auto-launch functionality to renderer
 contextBridge.exposeInMainWorld('electronAPI', {
@@ -23,6 +24,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
 
   // ToolHive port
   getToolhivePort: () => ipcRenderer.invoke('get-toolhive-port'),
+  getToolhiveVersion: () => TOOLHIVE_VERSION,
   // ToolHive is running
   isToolhiveRunning: () => ipcRenderer.invoke('is-toolhive-running'),
 
@@ -72,6 +74,9 @@ contextBridge.exposeInMainWorld('electronAPI', {
     optOut: () => ipcRenderer.invoke('sentry.opt-out'),
   },
 
+  // Log file operations
+  getMainLogContent: () => ipcRenderer.invoke('get-main-log-content'),
+
   // Window controls
   windowControls: {
     minimize: () => ipcRenderer.invoke('window-minimize'),
@@ -108,6 +113,7 @@ export interface ElectronAPI {
   hideApp: () => Promise<void>
   quitApp: () => Promise<void>
   getToolhivePort: () => Promise<number | undefined>
+  getToolhiveVersion: () => Promise<string>
   isToolhiveRunning: () => Promise<boolean>
   checkContainerEngine: () => Promise<{
     docker: boolean
@@ -133,6 +139,7 @@ export interface ElectronAPI {
     optIn: () => Promise<boolean>
     optOut: () => Promise<boolean>
   }
+  getMainLogContent: () => Promise<string>
   isMac: boolean
   isWindows: boolean
   isLinux: boolean

renderer/src/common/components/layout/top-nav/index.tsx

@@ -1,7 +1,4 @@
 import type { HTMLProps } from 'react'
-
-import { ThemeToggle } from '../../theme/theme-toggle'
-import { SettingsDropdown } from '../../settings/settings-dropdown'
 import { HelpDropdown } from '../../help'
 import { WindowControls } from './window-controls'
 import {
@@ -17,6 +14,7 @@ import { TopNavContainer } from './container'
 import { Separator } from '../../ui/separator'
 import { useConfirmQuit } from '@/common/hooks/use-confirm-quit'
 import { QuitConfirmationListener } from './quit-confirmation-listener'
+import { SettingsIcon } from 'lucide-react'
 
 function TopNavLinks() {
   return (
@@ -165,8 +163,9 @@ export function TopNav(props: HTMLProps<HTMLElement>) {
         <TopNavLinks />
         <Separator orientation="vertical" />
         <div className="flex items-center gap-2">
-          <ThemeToggle className="app-region-no-drag" />
-          <SettingsDropdown className="app-region-no-drag" />
+          <LinkViewTransition to="/settings" className="app-region-no-drag">
+            <SettingsIcon className="text-muted-foreground size-4" />
+          </LinkViewTransition>
           <HelpDropdown className="app-region-no-drag" />
         </div>
       </div>