From 7382a3a08d44f6dc44d4a62ca225011167b20be3 Mon Sep 17 00:00:00 2001
From: Nikolai Papin <nikolai@weirdcat.ru>
Date: Fri, 28 Nov 2025 21:20:29 +0300
Subject: [PATCH] refactor: ts

---
 frontend/src/App.svelte                    |  5 ++---
 frontend/src/components/Header.svelte      |  2 +-
 frontend/src/components/Overview.svelte    |  2 +-
 frontend/src/components/Settings.svelte    |  2 +-
 frontend/src/components/StatusPanel.svelte |  2 +-
 frontend/src/components/Tabs.svelte        |  5 +++--
 frontend/src/components/Terminal.svelte    | 23 ++++++++++++----------
 frontend/src/stores/appStore.js            | 20 -------------------
 frontend/src/stores/appStore.ts            | 23 ++++++++++++++++++++++
 9 files changed, 45 insertions(+), 39 deletions(-)
 delete mode 100644 frontend/src/stores/appStore.js
 create mode 100644 frontend/src/stores/appStore.ts

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 17e0ee9..68b4b18 100644
--- a/frontend/src/App.svelte
+++ b/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) => event.preventDefault();
+    const handleContextMenu = (event: MouseEvent) => event.preventDefault();
     document.addEventListener('contextmenu', handleContextMenu);
     
     return () => {
diff --git a/frontend/src/components/Header.svelte b/frontend/src/components/Header.svelte
index 3edc193..d354f96 100644
--- a/frontend/src/components/Header.svelte
+++ b/frontend/src/components/Header.svelte
@@ -1,5 +1,5 @@
 <!-- src/components/Header.svelte -->
-<script>
+<script lang="ts">
   import { isOnline } from '../stores/appStore';
 </script>
 
diff --git a/frontend/src/components/Overview.svelte b/frontend/src/components/Overview.svelte
index 4f0b803..783cd3a 100644
--- a/frontend/src/components/Overview.svelte
+++ b/frontend/src/components/Overview.svelte
@@ -1,5 +1,5 @@
 <!-- components/Overview.svelte -->
-<script>
+<script lang="ts">
   import StatusPanel from './StatusPanel.svelte';
 </script>
 
diff --git a/frontend/src/components/Settings.svelte b/frontend/src/components/Settings.svelte
index d4ca83a..6bb2632 100644
--- a/frontend/src/components/Settings.svelte
+++ b/frontend/src/components/Settings.svelte
@@ -1,5 +1,5 @@
 <!-- components/Settings.svelte -->
-<script>
+<script lang="ts">
 </script>
 
 <div class="settings-content">
diff --git a/frontend/src/components/StatusPanel.svelte b/frontend/src/components/StatusPanel.svelte
index ec0bdb9..05c5384 100644
--- a/frontend/src/components/StatusPanel.svelte
+++ b/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>
 
diff --git a/frontend/src/components/Tabs.svelte b/frontend/src/components/Tabs.svelte
index 36e0978..2d81d7a 100644
--- a/frontend/src/components/Tabs.svelte
+++ b/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}
diff --git a/frontend/src/components/Terminal.svelte b/frontend/src/components/Terminal.svelte
index 1ee7004..ebfe35f 100644
--- a/frontend/src/components/Terminal.svelte
+++ b/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 {
diff --git a/frontend/src/stores/appStore.js b/frontend/src/stores/appStore.js
deleted file mode 100644
index 25e22b8..0000000
--- a/frontend/src/stores/appStore.js
+++ /dev/null
@@ -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' }
-];
diff --git a/frontend/src/stores/appStore.ts b/frontend/src/stores/appStore.ts
new file mode 100644
index 0000000..9ddde24
--- /dev/null
+++ b/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...'
+]);