From f4d98830dca7ccc15c16769bcd73e3f043f91ef2 Mon Sep 17 00:00:00 2001
From: MrFastwind <MrFastwind@users.noreply.github.com>
Date: Thu, 23 Jul 2026 20:15:19 +0200
Subject: [PATCH] refactor(frontend): extract shared fmtSize, remove duplicate
 ModEntry, use shared ConfigEditor

- Extract fmtSize to src/utils/format.ts (was duplicated in Mods.tsx and Status.tsx)
- Remove duplicate ModEntry interface from ModlistEditor.tsx, import from types
- Refactor pages/ConfigEditor.tsx to use shared components/ConfigEditor.tsx
- Add enabled option to queries with undefined params to prevent premature fetches
---
 frontend/src/pages/ConfigEditor.tsx  | 32 ++++++++++------------------
 frontend/src/pages/ModlistEditor.tsx | 13 ++++++-----
 frontend/src/pages/Mods.tsx          |  9 +-------
 frontend/src/pages/Status.tsx        |  8 +------
 4 files changed, 19 insertions(+), 43 deletions(-)

diff --git a/frontend/src/pages/ConfigEditor.tsx b/frontend/src/pages/ConfigEditor.tsx
index 21f3af7..ce81c56 100644
--- a/frontend/src/pages/ConfigEditor.tsx
+++ b/frontend/src/pages/ConfigEditor.tsx
@@ -2,12 +2,16 @@ import { useParams, Link } from 'react-router-dom'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { configsApi } from '../api/client'
 import { useState, useEffect } from 'react'
-import Editor from '@monaco-editor/react'
+import ConfigEditorComponent from '../components/ConfigEditor'
 
 export default function ConfigEditor() {
   const { name } = useParams<{ name: string }>()
   const qc = useQueryClient()
-  const { data: content, isLoading } = useQuery({ queryKey: ['config', name], queryFn: () => configsApi.get(name!) })
+  const { data: content, isLoading } = useQuery({
+    queryKey: ['config', name],
+    queryFn: () => configsApi.get(name!),
+    enabled: !!name,
+  })
   const [value, setValue] = useState('')
   const [dirty, setDirty] = useState(false)
 
@@ -18,8 +22,8 @@ export default function ConfigEditor() {
     onSuccess: () => { qc.invalidateQueries({ queryKey: ['config', name] }); setDirty(false) },
   })
 
-  if (isLoading) return <p className="text-neutral-500">Loading...</p>
   if (!name) return <p className="text-red-400">No config specified</p>
+  if (isLoading) return <p className="text-neutral-500">Loading...</p>
 
   return (
     <div>
@@ -33,24 +37,10 @@ export default function ConfigEditor() {
         </button>
       </div>
 
-      <div className="border border-neutral-800 rounded-lg overflow-hidden">
-        <Editor
-          height="600px"
-          language="plaintext"
-          value={value}
-          onChange={v => { setValue(v ?? ''); setDirty(true) }}
-          theme="vs-dark"
-          options={{
-            minimap: { enabled: false },
-            fontSize: 13,
-            fontFamily: '"JetBrains Mono", "Fira Code", monospace',
-            lineNumbers: 'on',
-            scrollBeyondLastLine: false,
-            automaticLayout: true,
-            tabSize: 2,
-          }}
-        />
-      </div>
+      <ConfigEditorComponent
+        value={value}
+        onChange={v => { setValue(v); setDirty(true) }}
+      />
     </div>
   )
 }
diff --git a/frontend/src/pages/ModlistEditor.tsx b/frontend/src/pages/ModlistEditor.tsx
index caa4b41..91eae4d 100644
--- a/frontend/src/pages/ModlistEditor.tsx
+++ b/frontend/src/pages/ModlistEditor.tsx
@@ -3,17 +3,16 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { modlistsApi, steamcmdApi, logsApi } from '../api/client'
 import { useState, useEffect } from 'react'
 import LiveTerminal from '../components/LiveTerminal'
-
-interface ModEntry {
-  id: string
-  name: string
-  enabled: boolean
-}
+import type { ModEntry } from '../types'
 
 export default function ModlistEditor() {
   const { id } = useParams<{ id: string }>()
   const qc = useQueryClient()
-  const { data: modlist, isLoading } = useQuery({ queryKey: ['modlist', id], queryFn: () => modlistsApi.get(id!) })
+  const { data: modlist, isLoading } = useQuery({
+    queryKey: ['modlist', id],
+    queryFn: () => modlistsApi.get(id!),
+    enabled: !!id,
+  })
   const [name, setName] = useState('')
   const [mods, setMods] = useState<ModEntry[]>([])
   const [dirty, setDirty] = useState(false)
diff --git a/frontend/src/pages/Mods.tsx b/frontend/src/pages/Mods.tsx
index 27b8c3a..6398602 100644
--- a/frontend/src/pages/Mods.tsx
+++ b/frontend/src/pages/Mods.tsx
@@ -1,14 +1,7 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { modsApi } from '../api/client'
 import { useState } from 'react'
-
-function fmtSize(bytes: number): string {
-  if (bytes === 0) return '0 B'
-  const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  const i = Math.floor(Math.log(bytes) / Math.log(1024))
-  const v = bytes / Math.pow(1024, i)
-  return `${v.toFixed(i > 0 ? 1 : 0)} ${units[i]}`
-}
+import { fmtSize } from '../utils/format'
 
 export default function Mods() {
   const qc = useQueryClient()
diff --git a/frontend/src/pages/Status.tsx b/frontend/src/pages/Status.tsx
index 76b3364..1bdbfa2 100644
--- a/frontend/src/pages/Status.tsx
+++ b/frontend/src/pages/Status.tsx
@@ -1,13 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { useCallback, useState } from 'react'
 import { settingsApi } from '../api/client'
-
-function fmtSize(bytes: number): string {
-  if (bytes === 0) return '0 B'
-  const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
-  return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + units[i]
-}
+import { fmtSize } from '../utils/format'
 
 function fmtPercent(p: number): string {
   return p.toFixed(1) + '%'