From c94a4e5c75272904b233aaa9ee866e5fd183759c Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Sat, 26 Jul 2025 20:39:06 +0300
Subject: [PATCH] migrated file browser to ts

---
 ui/app/pages/browser/[...slug].vue | 92 ++++++++++++++++--------------
 ui/app/pages/logs.vue              | 31 +++++-----
 ui/app/stores/SocketStore.ts       |  2 +-
 ui/app/types/filebrowser.d.ts      | 20 +++++++
 4 files changed, 85 insertions(+), 60 deletions(-)
 create mode 100644 ui/app/types/filebrowser.d.ts

diff --git a/ui/app/pages/browser/[...slug].vue b/ui/app/pages/browser/[...slug].vue
index 10ebd016..c70ac7a0 100644
--- a/ui/app/pages/browser/[...slug].vue
+++ b/ui/app/pages/browser/[...slug].vue
@@ -192,9 +192,10 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import moment from 'moment'
 import { useStorage } from '@vueuse/core'
+import type { FileItem, FileBrowserResponse } from '~/types/filebrowser'
 
 const route = useRoute()
 const toast = useNotification()
@@ -206,26 +207,32 @@ const bg_opacity = useStorage('random_bg_opacity', 0.95)
 const sort_by = useStorage('sort_by', 'name')
 const sort_order = useStorage('sort_order', 'asc')
 
-const isLoading = ref(false)
-const initialLoad = ref(true)
-const items = ref([])
-const path = ref(`/${route.params.slug?.length > 0 ? route.params.slug?.join('/') : ''}`)
-const table_container = ref(false)
-const search = ref('')
-const show_filter = ref(false)
+const isLoading = ref<boolean>(false)
+const initialLoad = ref<boolean>(true)
+const items = ref<FileItem[]>([])
+const path = ref<string>((() => {
+  const slug = route.params.slug
+  if (Array.isArray(slug) && slug.length > 0) {
+    return '/' + slug.join('/')
+  }
+  return '/'
+})())
+const table_container = ref<boolean>(false)
+const search = ref<string>('')
+const show_filter = ref<boolean>(false)
 
-const filteredItems = computed(() => {
+const filteredItems = computed<FileItem[]>(() => {
   if (!search.value) {
     return sortedItems(items.value)
   }
 
   const searchLower = search.value.toLowerCase()
-  return sortedItems(items.value.filter(item => {
+  return sortedItems(items.value.filter((item: FileItem) => {
     return item.name.toLowerCase().includes(searchLower)
   }))
 })
 
-const sortedItems = items => {
+const sortedItems = (items: FileItem[]): FileItem[] => {
 
   if (!items || items.length < 1) {
     return []
@@ -247,7 +254,7 @@ const sortedItems = items => {
     return items.sort((a, b) => {
       let aDate = new Date(a.mtime)
       let bDate = new Date(b.mtime)
-      return 'asc' === sort_order.value ? aDate - bDate : bDate - aDate
+      return 'asc' === sort_order.value ? aDate.getTime() - bDate.getTime() : bDate.getTime() - aDate.getTime()
     })
   }
 
@@ -260,8 +267,8 @@ const sortedItems = items => {
   return items
 }
 
-const model_item = ref()
-const closeModel = () => model_item.value = null
+const model_item = ref<any>()
+const closeModel = (): void => { model_item.value = null }
 
 watch(() => config.app.basic_mode, async () => {
   if (!config.app.basic_mode) {
@@ -284,7 +291,7 @@ watch(() => socket.isConnected, async () => {
   }
 })
 
-const handleClick = item => {
+const handleClick = (item: FileItem): void => {
   if ('video' === item.content_type) {
     model_item.value = {
       "type": 'video',
@@ -325,10 +332,10 @@ const handleClick = item => {
     return
   }
 
-  window.location = makeDownload(config, { "filename": item.path, "folder": "", "extras": {} })
+  window.location.href = makeDownload(config, { "filename": item.path, "folder": "", "extras": {} })
 }
 
-const reloadContent = async (dir = '/', fromMounted = false) => {
+const reloadContent = async (dir: string = '/', fromMounted: boolean = false): Promise<void> => {
   try {
     isLoading.value = true
 
@@ -346,11 +353,7 @@ const reloadContent = async (dir = '/', fromMounted = false) => {
 
     items.value = []
 
-    const data = await response.json()
-
-    if (data.length < 1) {
-      return
-    }
+    const data = await response.json() as FileBrowserResponse
 
     if (!data?.contents || data.contents.length > 0) {
       items.value = data.contents
@@ -368,7 +371,7 @@ const reloadContent = async (dir = '/', fromMounted = false) => {
     }
 
     useHead({ title: decodeURIComponent(title) })
-  } catch (e) {
+  } catch (e: any) {
     if (fromMounted) {
       return
     }
@@ -379,17 +382,17 @@ const reloadContent = async (dir = '/', fromMounted = false) => {
   }
 }
 
-const event_handler = e => {
-
-  if (!e.state) {
+const event_handler = (e: Event): void => {
+  const evt = e as PopStateEvent
+  if (!evt.state) {
     return
   }
 
-  if (e.state.path === path.value || e.state.path === window.location.pathname) {
+  if (evt.state.path === path.value || evt.state.path === window.location.pathname) {
     return
   }
 
-  reloadContent(e.state.path, true)
+  reloadContent(evt.state.path, true)
 }
 
 onMounted(async () => {
@@ -397,12 +400,12 @@ onMounted(async () => {
     await reloadContent(path.value, true)
   }
 
-  document.addEventListener('popstate', event_handler)
+  document.addEventListener('popstate', event_handler as EventListener)
 })
 
-onBeforeUnmount(() => document.removeEventListener('popstate', event_handler))
+onBeforeUnmount(() => document.removeEventListener('popstate', event_handler as EventListener))
 
-const makeBreadCrumb = path => {
+const makeBreadCrumb = (path: string): { name: string, link: string, path: string }[] => {
   const baseLink = '/'
 
   path = path.replace(/^\/+/, '').replace(/\/+$/, '')
@@ -428,16 +431,15 @@ const makeBreadCrumb = path => {
   return links
 }
 
-
 watch(model_item, v => {
   if (!bg_enable.value) {
     return
   }
 
-  document.querySelector('body').setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
+  document.querySelector('body')?.setAttribute("style", `opacity: ${v ? 1 : bg_opacity.value}`)
 })
 
-const setIcon = item => {
+const setIcon = (item: FileItem): string => {
   if ('link' === item.type) {
     return 'fa-link'
   }
@@ -460,7 +462,7 @@ const setIcon = item => {
   return 'fa-file'
 }
 
-const changeSort = by => {
+const changeSort = (by: string): void => {
   if (!['name', 'size', 'date', 'type'].includes(by)) {
     return
   }
@@ -472,17 +474,17 @@ const changeSort = by => {
   sort_order.value = 'asc' === sort_order.value ? 'desc' : 'asc'
 }
 
-const toggleFilter = () => {
+const toggleFilter = (): void => {
   show_filter.value = !show_filter.value
   if (!show_filter.value) {
     search.value = ''
     return
   }
 
-  awaitElement('#search', e => e.focus())
+  awaitElement('#search', (e: Element) => (e as HTMLElement).focus())
 }
 
-const createDirectory = async (dir) => {
+const createDirectory = async (dir: string): Promise<void> => {
   if (!config.app.browser_control_enabled) {
     return
   }
@@ -497,13 +499,13 @@ const createDirectory = async (dir) => {
     return
   }
 
-  await actionRequest({ path: dir }, 'directory', { new_dir: new_dir }, (item, action, data) => {
+  await actionRequest({ path: dir } as FileItem, 'directory', { new_dir: new_dir }, (item, action, data) => {
     reloadContent(path.value, true)
     toast.success(`Successfully created '${new_dir}'.`)
   })
 }
 
-const handleAction = async (action, item) => {
+const handleAction = async (action: string, item: FileItem): Promise<void> => {
   if (!config.app.browser_control_enabled) {
     return
   }
@@ -561,7 +563,12 @@ const handleAction = async (action, item) => {
   }
 }
 
-const actionRequest = async (item, action, data, cb) => {
+const actionRequest = async (
+  item: FileItem,
+  action: string,
+  data: Record<string, any>,
+  cb: (item: FileItem, action: string, data: any) => void
+): Promise<any> => {
   if (!config.app.browser_control_enabled) {
     return
   }
@@ -591,10 +598,9 @@ const actionRequest = async (item, action, data, cb) => {
     }
 
     return response
-  } catch (error) {
+  } catch (error: any) {
     console.error(error)
     toast.error(`Failed to perform action: ${error.message}`)
   }
 }
-
 </script>
diff --git a/ui/app/pages/logs.vue b/ui/app/pages/logs.vue
index c983aac1..3950f042 100644
--- a/ui/app/pages/logs.vue
+++ b/ui/app/pages/logs.vue
@@ -172,7 +172,7 @@ watch(() => config.app.file_logging, async v => {
 const filteredItems = computed(() => {
   const raw = query.value.trim().toLowerCase()
   const contextMatch = raw.match(/context:(\d+)/)
-  const context = contextMatch ? parseInt(contextMatch[1], 10) : 0
+  const context = contextMatch ? parseInt(String(contextMatch[1]), 10) : 0
   const searchTerm = raw.replace(/context:\d+/, '').trim()
 
   if (!searchTerm) {
@@ -191,7 +191,7 @@ const filteredItems = computed(() => {
   })
 
   Array.from(matchedIndexes).sort((a: any, b: any) => a - b).forEach((index: any) => {
-    result.push(logs.value[index])
+    result.push(logs.value[index] as log_line)
   })
 
   return result
@@ -276,21 +276,20 @@ const scrollToBottom = (fast = false) => {
   })
 }
 
+const log_handler = (data: log_line) => {
+  logs.value.push(data)
+
+  nextTick(() => {
+    if (autoScroll.value && bottomMarker.value) {
+      bottomMarker.value.scrollIntoView({ behavior: 'smooth' })
+    }
+  })
+}
+
 onMounted(async () => {
   await fetchLogs()
+  socket.on('log_lines', log_handler)
   socket.emit('subscribe', 'log_lines')
-
-  socket.on('log_lines', (data: any) => {
-    logs.value.push(data)
-
-    nextTick(() => {
-      if (autoScroll.value && bottomMarker.value) {
-        bottomMarker.value.scrollIntoView({ behavior: 'smooth' })
-      }
-    })
-
-  })
-
   if (bg_enable.value) {
     document.querySelector('body')?.setAttribute("style", `opacity: 1.0`)
   }
@@ -298,7 +297,7 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
   socket.emit('unsubscribe', 'log_lines')
-  socket.off('log_lines')
+  socket.off('log_lines', log_handler)
   if (bg_enable.value) {
     document.querySelector('body')?.setAttribute("style", `opacity: ${bg_opacity.value}`)
   }
@@ -306,7 +305,7 @@ onBeforeUnmount(() => {
 
 onBeforeUnmount(() => {
   socket.emit('unsubscribe', 'log_lines')
-  socket.off('log_lines')
+  socket.off('log_lines', log_handler)
   if (scrollTimeout) clearTimeout(scrollTimeout)
 
 })
diff --git a/ui/app/stores/SocketStore.ts b/ui/app/stores/SocketStore.ts
index 779a52f1..da7a668f 100644
--- a/ui/app/stores/SocketStore.ts
+++ b/ui/app/stores/SocketStore.ts
@@ -20,7 +20,7 @@ export const useSocketStore = defineStore('socket', () => {
     event.forEach(e => socket.value?.on(e, (...args) => true === withEvent ? callback(e, ...args) : callback(...args)))
   }
 
-  const off = (event: string | string[], callback: (...args: any[]) => void): any => {
+  const off = (event: string | string[], callback?: (...args: any[]) => void): any => {
     if (!Array.isArray(event)) {
       event = [event]
     }
diff --git a/ui/app/types/filebrowser.d.ts b/ui/app/types/filebrowser.d.ts
new file mode 100644
index 00000000..3bd6db03
--- /dev/null
+++ b/ui/app/types/filebrowser.d.ts
@@ -0,0 +1,20 @@
+type FileItem = {
+  type: 'file' | 'dir' | 'link'
+  content_type: 'image' | 'video' | 'text' | 'subtitle' | 'metadata' | 'dir' | string
+  name: string
+  path: string
+  size: number
+  mime: string
+  mtime: string
+  ctime: string
+  is_dir: boolean
+  is_file: boolean
+  is_symlink: boolean
+}
+
+type FileBrowserResponse = {
+  path: string
+  contents: FileItem[]
+}
+
+export type { FileItem, FileBrowserResponse }