refactor: ts

frontend/src/App.svelte

@@ -1,5 +1,5 @@
 <!-- src/App.svelte -->
-<script>
+<script lang="ts">
   import './app.css';
   import { onMount } from 'svelte';
   import { activeTab } from './stores/appStore';
@@ -11,8 +11,7 @@
   import Terminal from './components/Terminal.svelte';
 
   onMount(() => {
-    // Prevent context menu
+    const handleContextMenu = (event: MouseEvent) => event.preventDefault();
-    const handleContextMenu = (event) => event.preventDefault();
     document.addEventListener('contextmenu', handleContextMenu);
     
     return () => {

frontend/src/components/Header.svelte

@@ -1,5 +1,5 @@
 <!-- src/components/Header.svelte -->
-<script>
+<script lang="ts">
   import { isOnline } from '../stores/appStore';
 </script>
 

frontend/src/components/Overview.svelte

@@ -1,5 +1,5 @@
 <!-- components/Overview.svelte -->
-<script>
+<script lang="ts">
   import StatusPanel from './StatusPanel.svelte';
 </script>
 

frontend/src/components/Settings.svelte

@@ -1,5 +1,5 @@
 <!-- components/Settings.svelte -->
-<script>
+<script lang="ts">
 </script>
 
 <div class="settings-content">

frontend/src/components/StatusPanel.svelte

@@ -1,5 +1,5 @@
 <!-- src/components/StatusPanel.svelte -->
-<script>
+<script lang="ts">
   import { status, uptime, qrCodesFound } from '../stores/appStore';
 </script>
 

frontend/src/components/Tabs.svelte

@@ -1,10 +1,11 @@
 <!-- src/components/Tabs.svelte -->
-<script>
+<script lang="ts">
   import { activeTab, TABS } from '../stores/appStore';
+  import type { Tab } from '../stores/appStore';
 </script>
 
 <div class="tabs-container">
-  {#each TABS as tab}
+  {#each TABS as tab (tab.id)}
     <button 
       class="tab {$activeTab === tab.id ? 'active' : ''}"
       on:click={() => $activeTab = tab.id}

frontend/src/components/Terminal.svelte

@@ -1,13 +1,14 @@
 <!-- src/components/Terminal.svelte -->
-<script>
+<script lang="ts">
   import { terminalLines } from '../stores/appStore';
   import { onMount, onDestroy } from 'svelte';
   
-  let terminalRef;
+  let terminalRef: HTMLDivElement;
   let isResizing = false;
-  let startY, startHeight;
+  let startY: number;
+  let startHeight: number;
   
-  function handleMouseDown(e) {
+  function handleMouseDown(e: MouseEvent): void {
     isResizing = true;
     startY = e.clientY;
     startHeight = parseInt(getComputedStyle(terminalRef).height, 10);
@@ -17,7 +18,7 @@
     e.preventDefault();
   }
   
-  function handleMouseMove(e) {
+  function handleMouseMove(e: MouseEvent): void {
     if (!isResizing) return;
     
     const height = startHeight - (e.clientY - startY);
@@ -29,15 +30,15 @@
     }
   }
   
-  function handleMouseUp() {
+  function handleMouseUp(): void {
     isResizing = false;
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('mouseup', handleMouseUp);
   }
   
-  function scrollToBottom() {
+  function scrollToBottom(): void {
     if (terminalRef) {
-      const content = terminalRef.querySelector('.terminal-content');
+      const content = terminalRef.querySelector('.terminal-content') as HTMLDivElement;
       if (content) {
         content.scrollTop = content.scrollHeight;
       }
@@ -84,10 +85,10 @@
 
   .resize-handle {
     position: absolute;
-    top: 0;
+    top: 10;
     left: 0;
     right: 0;
-    height: 4px;
+    height: 10px;
     cursor: row-resize;
     z-index: 10;
     background-color: transparent;
@@ -95,6 +96,8 @@
 
   .resize-handle:hover {
     background-color: var(--accent-primary);
+    border-radius: 100px;
+    opacity: 0.5;
   }
 
   .terminal-header {

frontend/src/stores/appStore.js

@@ -1,20 +0,0 @@
-import { writable } from 'svelte/store';
-
-// App state
-export const activeTab = writable('overview');
-export const status = writable('Looking for QR-codes');
-export const uptime = writable('1h 12m 15s');
-export const qrCodesFound = writable(12);
-export const isOnline = writable(true);
-export const terminalLines = writable([
-  'Window()',
-  '[Fx] INVOKE main.main.func1()',
-  '[Fx] BEFORE RUN provide: git.weirdcat.su/weirdcat/auto-attendance/internal/ui.NewBuilder()',
-  '[Fx] RUN provide: git.weirdcat.su/weirdcat/auto-attendance/internal/ui.NewBuilder() in 46.723905ms',
-]);
-
-// Constants
-export const TABS = [
-  { id: 'overview', label: 'Overview' },
-  { id: 'settings', label: 'Settings' }
-];

frontend/src/stores/appStore.ts

@@ -0,0 +1,23 @@
+// ./stores/appStore.ts
+import { writable } from 'svelte/store';
+
+export interface Tab {
+  id: 'overview' | 'settings';
+  label: string;
+}
+
+export const TABS: Tab[] = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'settings', label: 'Settings' }
+];
+
+export const activeTab = writable<Tab['id']>('overview');
+export const isOnline = writable<boolean>(false);
+export const status = writable<string>('Stopped');
+export const uptime = writable<string>('0s');
+export const qrCodesFound = writable<number>(0);
+export const terminalLines = writable<string[]>([
+  'Tea warming up...',
+  'Scanning QR-code...',
+  'Getting expelled...'
+]);