refactor: ts

refactor: enhanced structure
refactor: update status panel styling
2025-11-28 21:20:29 +03:00 · 2025-11-28 20:57:24 +03:00 · 2025-11-28 20:30:33 +03:00 · 2025-11-28 20:30:33 +03:00 · 2025-11-28 20:30:33 +03:00 · 2025-11-28 20:30:33 +03:00
11 changed files with 363 additions and 299 deletions
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,78 +1,59 @@
-<!-- App.svelte -->
-<script>
-import Header from './components/Header.svelte';
-import Tabs from './components/Tabs.svelte';
-import Overview from './components/Overview.svelte';
-import Settings from './components/Settings.svelte';
+<!-- src/App.svelte -->
+<script lang="ts">
+  import './app.css';
+  import { onMount } from 'svelte';
+  import { activeTab } from './stores/appStore';
  
-let activeTab = 'overview';
-let status = 'Status';
-let uptime = '0s';
-let qrCodesFound = 0;
-let isOnline = false;
+  import Header from './components/Header.svelte';
+  import Tabs from './components/Tabs.svelte';
+  import Overview from './components/Overview.svelte';
+  import Settings from './components/Settings.svelte';
+  import Terminal from './components/Terminal.svelte';
+
+  onMount(() => {
+    const handleContextMenu = (event: MouseEvent) => event.preventDefault();
+    document.addEventListener('contextmenu', handleContextMenu);
+    
+    return () => {
+      document.removeEventListener('contextmenu', handleContextMenu);
+    };
+  });
 </script>

 <div class="app-window">
-    <Header {isOnline} />
-
-    <Tabs bind:activeTab />
+  <Header />
+  <Tabs />
  
  <main class="main-layout">
-        {#if activeTab === 'overview'}
-            <Overview {status} {uptime} {qrCodesFound} />
-        {:else}
+    {#if $activeTab === 'overview'}
+      <Overview />
+    {:else if $activeTab === 'settings'}
      <Settings />
    {/if}
  </main>
+  
+  <aside class="terminal-layout">
+    <Terminal />
+  </aside>
 </div>

 <style>
-:root {
-    --bg-primary: #1c1c1c;
-    --bg-secondary: #121212;
-    --bg-header: #811A10;
-    --accent-primary: #a02c2c;
-    --accent-secondary: #7a2727;
-    --text-primary: #ebebeb;
-    --text-secondary: rgba(235, 235, 235, 0.7);
-    --text-dim: rgba(235, 235, 235, 0.5);
-    --border-color: rgba(0, 0, 0, 0.26);
-    --success: #a0662c;
-    --warning: #2ca02c;
-    --error: #2ca0a0;
-
-    --spacing-xs: 4px;
-    --spacing-sm: 8px;
-    --spacing-md: 12px;
-    --spacing-lg: 16px;
-    --spacing-xl: 24px;
-
-    --border-radius-sm: 4px;
-    --border-radius-md: 6px;
-    --border-radius-lg: 8px;
-
-    --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    --shadow-md: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
-    --shadow-lg: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-.app-window {
+  .app-window {
    border-radius: var(--border-radius-md);
    background-color: var(--bg-primary);
    height: 100vh;
    color: var(--text-primary);
-}
+    display: flex;
+    flex-direction: column;
+  }

-.main-layout {
+  .main-layout {
    padding: var(--spacing-lg);
    overflow: hidden;
-    height: auto;
-    flex-grow: 1;
-}
+    flex: 1;
+  }
+
+  .terminal-layout {
+    flex-shrink: 0;
+  }
 </style>
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,54 +1,57 @@
-#logo {
-    display: block;
-    width: 50%;
-    height: 50%;
-    margin: auto;
-    padding: 10% 0 0;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    background-origin: content-box;
+/* src/app.css */
+:root {
+    --bg-primary: #1c1c1c;
+    --bg-secondary: #121212;
+    --bg-header: #811A10;
+    --accent-primary: #a02c2c;
+    --accent-secondary: #7a2727;
+    --text-primary: #ebebeb;
+    --text-secondary: rgba(235, 235, 235, 0.7);
+    --text-dim: rgba(235, 235, 235, 0.5);
+    --border-color: rgba(0, 0, 0, 0.26);
+    --success: #a0662c;
+    --warning: #2ca02c;
+    --error: #2ca0a0;
+
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 12px;
+    --spacing-lg: 16px;
+    --spacing-xl: 24px;
+
+    --border-radius-sm: 10px;
+    --border-radius-md: 6px;
+    --border-radius-lg: 8px;
+
+    --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    --shadow-md: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
+    --shadow-lg: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
 }

-.result {
-    height: 20px;
-    line-height: 20px;
-    margin: 1.5rem auto;
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }

-.input-box .btn {
-    width: 60px;
-    height: 30px;
-    line-height: 30px;
-    border-radius: 3px;
-    border: none;
-    margin: 0 0 0 20px;
-    padding: 0 8px;
-    cursor: pointer;
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    touch-action: manipulation;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    height: 100vh;
+    overflow: hidden;
 }

-.input-box .btn:hover {
-    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
-    color: #333333;
+/* Utility classes */
+.text-dim { 
+    color: var(--text-dim); 
 }

-.input-box .input {
-    border: none;
-    border-radius: 3px;
-    outline: none;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 10px;
-    background-color: rgba(240, 240, 240, 1);
-    -webkit-font-smoothing: antialiased;
-}
-
-.input-box .input:hover {
-    border: none;
-    background-color: rgba(255, 255, 255, 1);
-}
-
-.input-box .input:focus {
-    border: none;
-    background-color: rgba(255, 255, 255, 1);
+.text-secondary { 
+    color: var(--text-secondary); 
 }
--- a/frontend/src/assets/app.css
+++ b/frontend/src/assets/app.css
@@ -0,0 +1,27 @@
+:root {
+  /* CSS variables from theme.js would be injected here */
+  --bg-primary: #1c1c1c;
+  --bg-secondary: #121212;
+  /* ... all other theme variables */
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+/* Utility classes */
+.text-dim { color: var(--text-dim); }
+.text-secondary { color: var(--text-secondary); }
--- a/frontend/src/components/Header.svelte
+++ b/frontend/src/components/Header.svelte
@@ -1,82 +1,33 @@
-<!-- components/Header.svelte -->
-<script>
-export let isOnline = true;
-export let title = "QRminator";
+<!-- src/components/Header.svelte -->
+<script lang="ts">
+  import { isOnline } from '../stores/appStore';
 </script>

 <header class="headerbar">
-    <h1 class="header-title">{title}</h1>
  <div class="header-status">
-        {#if isOnline}
+    {#if $isOnline}
      <span>Online</span>
    {:else}
      <span class="text-dim">Offline</span>
    {/if}
  </div>
-    <div class="header-controls">
-        <button class="control-button toggle">
-            <div class="toggle-indicator"></div>
-        </button>
-    </div>
 </header>

 <style>
-.headerbar {
+  .headerbar {
    background-color: var(--bg-header);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
-}
+  }

-.header-title {
-    font-size: 1rem;
-    font-weight: bold;
-    color: var(--text-primary);
-}
-
-.header-status {
+  .header-status {
    font-size: 0.875rem;
    color: var(--text-secondary);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
-}
-
-.header-controls {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-}
-
-.control-button {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    border: none;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.control-button:hover {
-    transform: scale(1.1);
-}
-
-.control-button.toggle {
-    background-color: var(--accent-primary);
-    position: relative;
-}
-
-.toggle-indicator {
-    width: 12px;
-    height: 12px;
-    background-color: var(--bg-primary);
-    border-radius: 50%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    transition: all 0.3s ease;
-}
+  }
 </style>
--- a/frontend/src/components/Overview.svelte
+++ b/frontend/src/components/Overview.svelte
@@ -1,41 +1,12 @@
 <!-- components/Overview.svelte -->
-<script>
-import StatusPanel from './StatusPanel.svelte';
-import Terminal from './Terminal.svelte';
-
-export let status = 'Looking for QR-codes';
-export let uptime = '1h 12m 15s';
-export let qrCodesFound = 12;
-
-const terminalLines = [
-    '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',
-    '[Fx] BEFORE RUN provide: git.weirdcat.su/weirdcat/auto-attendance/internal/ui.NewMainWindow()',
-    '[Fx] RUN provide: git.weirdcat.su/weirdcat/auto-attendance/internal/ui.NewMainWindow()',
-    'in 11.655448ms',
-    '[Fx] RUNNING',
-    ' '
-];
+<script lang="ts">
+  import StatusPanel from './StatusPanel.svelte';
 </script>

 <div class="overview-layout">
    <div class="grid-layout">
-        <!-- QR Code Section -->
-        <!-- <div class="qr-container"> -->
-        <!--     <div class="qr-placeholder"> -->
-        <!--         QR Code Display -->
-        <!--     </div> -->
-        <!-- </div> -->
-
-        <!-- Status Panel -->
-        <StatusPanel {status} {uptime} {qrCodesFound} />
+        <StatusPanel />
    </div>
-
-    <!-- Terminal Output -->
-    <Terminal {terminalLines} />
 </div>

 <style>
@@ -44,7 +15,6 @@ const terminalLines = [
    flex-direction: column;
    gap: var(--spacing-lg);
    height: 100%;
-
 }

 .grid-layout {
--- a/frontend/src/components/Settings.svelte
+++ b/frontend/src/components/Settings.svelte
@@ -1,6 +1,5 @@
 <!-- components/Settings.svelte -->
-<script>
-// Settings logic will go here
+<script lang="ts">
 </script>

 <div class="settings-content">
--- a/frontend/src/components/StatusPanel.svelte
+++ b/frontend/src/components/StatusPanel.svelte
@@ -1,22 +1,20 @@
-<!-- components/StatusPanel.svelte -->
-<script>
-export let status = '';
-export let uptime = '';
-export let qrCodesFound = 0;
+<!-- src/components/StatusPanel.svelte -->
+<script lang="ts">
+  import { status, uptime, qrCodesFound } from '../stores/appStore';
 </script>

 <div class="status-panel">
  <div class="status-row">
    <span class="status-label">Status</span>
-        <span class="status-value">{status}</span>
+    <span class="status-value">{$status}</span>
  </div>
  <div class="status-row">
    <span class="status-label">Uptime</span>
-        <span class="status-value">{uptime}</span>
+    <span class="status-value">{$uptime}</span>
  </div>
  <div class="status-row">
    <span class="status-label">QR-codes found</span>
-        <span class="status-value">{qrCodesFound}</span>
+    <span class="status-value">{$qrCodesFound}</span>
  </div>
  <div class="status-row">
    <span class="status-label">Link</span>
@@ -25,46 +23,38 @@ export let qrCodesFound = 0;
 </div>

 <style>
-.status-panel {
-    background-color: var(--bg-primary);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
+  .status-panel {
    padding: var(--spacing-lg);
    width: 80%;
-}
+  }

-.status-row {
+  .status-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--spacing-sm) 0;
-    border-bottom: 1px solid var(--border-color);
-}
+  }

-.status-row:last-child {
-    border-bottom: none;
-}
-
-.status-row > *:nth-child(2) {
+  .status-row > *:nth-child(2) {
    margin-left: auto;
-}
+  }

-.status-label {
+  .status-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
-}
+  }

-.status-value {
+  .status-value {
    color: var(--text-primary);
    font-weight: 500;
-}
+  }

-.status-value.link {
+  .status-value.link {
    color: var(--accent-primary);
    cursor: pointer;
    text-decoration: underline;
-}
+  }

-.status-value.link:hover {
+  .status-value.link:hover {
    color: #bd6b6b;
-}
+  }
 </style>
--- a/frontend/src/components/Tabs.svelte
+++ b/frontend/src/components/Tabs.svelte
@@ -1,17 +1,14 @@
-<!-- components/Tabs.svelte -->
-<script>
-export let activeTab = 'overview';
-export let tabs = [
-    { id: 'overview', label: 'Overview' },
-    { id: 'settings', label: 'Settings' }
-];
+<!-- src/components/Tabs.svelte -->
+<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}
+      class="tab {$activeTab === tab.id ? 'active' : ''}"
+      on:click={() => $activeTab = tab.id}
    >
      {tab.label}
    </button>
@@ -19,13 +16,13 @@ export let tabs = [
 </div>

 <style>
-.tabs-container {
+  .tabs-container {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
-}
+  }

-.tab {
+  .tab {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
@@ -35,17 +32,17 @@ export let tabs = [
    position: relative;
    transition: color 0.2s ease;
    font-size: 0.875rem;
-}
+  }

-.tab:hover {
+  .tab:hover {
    color: var(--text-primary);
-}
+  }

-.tab.active {
+  .tab.active {
    color: var(--text-primary);
-}
+  }

-.tab.active::after {
+  .tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
@@ -53,5 +50,5 @@ export let tabs = [
    right: 0;
    height: 2px;
    background-color: var(--accent-primary);
-}
+  }
 </style>
--- a/frontend/src/components/Terminal.svelte
+++ b/frontend/src/components/Terminal.svelte
@@ -1,50 +1,132 @@
-<!-- components/Terminal.svelte -->
-<script>
-export let terminalLines = [];
+<!-- src/components/Terminal.svelte -->
+<script lang="ts">
+  import { terminalLines } from '../stores/appStore';
+  import { onMount, onDestroy } from 'svelte';
+  
+  let terminalRef: HTMLDivElement;
+  let isResizing = false;
+  let startY: number;
+  let startHeight: number;
+  
+  function handleMouseDown(e: MouseEvent): void {
+    isResizing = true;
+    startY = e.clientY;
+    startHeight = parseInt(getComputedStyle(terminalRef).height, 10);
+    
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    e.preventDefault();
+  }
+  
+  function handleMouseMove(e: MouseEvent): void {
+    if (!isResizing) return;
+    
+    const height = startHeight - (e.clientY - startY);
+    const minHeight = 100;
+    const maxHeight = window.innerHeight * 0.8;
+    
+    if (height >= minHeight && height <= maxHeight) {
+      terminalRef.style.height = `${height}px`;
+    }
+  }
+  
+  function handleMouseUp(): void {
+    isResizing = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  }
+  
+  function scrollToBottom(): void {
+    if (terminalRef) {
+      const content = terminalRef.querySelector('.terminal-content') as HTMLDivElement;
+      if (content) {
+        content.scrollTop = content.scrollHeight;
+      }
+    }
+  }
+  
+  // Auto-scroll when new lines are added
+  $: $terminalLines, setTimeout(scrollToBottom, 0);
+  
+  onDestroy(() => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  });
 </script>

-<div class="terminal">
-    <div class="terminal-header">Output</div>
+<div class="terminal" bind:this={terminalRef}>
+  <div class="resize-handle" on:mousedown={handleMouseDown}></div>
+  <div class="terminal-header">Logs</div>
  <div class="terminal-content">
-        {#each terminalLines as line}
+    {#each $terminalLines as line}
      <div class="terminal-line">{line}</div>
    {/each}
  </div>
 </div>

 <style>
-.terminal {
-    background-color: var(--bg-primary);
+  .terminal {
+    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
+    margin: var(--spacing-lg);
+    height: 200px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
    overflow: hidden;
-    flex-grow: 1;
-}
+  }

-.terminal-header {
-    background-color: var(--bg-secondary);
+  @media (max-height: 500px) {
+    .terminal {
+      display: none;
+    }
+  }
+
+  .resize-handle {
+    position: absolute;
+    top: 10;
+    left: 0;
+    right: 0;
+    height: 10px;
+    cursor: row-resize;
+    z-index: 10;
+    background-color: transparent;
+  }
+
+  .resize-handle:hover {
+    background-color: var(--accent-primary);
+    border-radius: 100px;
+    opacity: 0.5;
+  }
+
+  .terminal-header {
+    background-color: var(--bg-header);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--text-secondary);
-}
+    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
+    user-select: none;
+  }

-.terminal-content {
+  .terminal-content {
    padding: var(--spacing-md);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-primary);
-    max-height: 200px;
+    flex: 1;
    overflow-y: auto;
-    white-space: nowrap;
-}
+    white-space: pre-wrap;
+    user-select: text;
+  }

-.terminal-line {
+  .terminal-line {
    margin-bottom: 2px;
-}
+  }

-.terminal-line:last-child {
+  .terminal-line:last-child {
    margin-bottom: 0;
-}
+  }
 </style>
--- a/frontend/src/constants/theme.js
+++ b/frontend/src/constants/theme.js
@@ -0,0 +1,41 @@
+export const THEME = {
+  colors: {
+    bg: {
+      primary: '#1c1c1c',
+      secondary: '#121212',
+      header: '#811A10'
+    },
+    accent: {
+      primary: '#a02c2c',
+      secondary: '#7a2727'
+    },
+    text: {
+      primary: '#ebebeb',
+      secondary: 'rgba(235, 235, 235, 0.7)',
+      dim: 'rgba(235, 235, 235, 0.5)'
+    },
+    status: {
+      success: '#a0662c',
+      warning: '#2ca02c',
+      error: '#2ca0a0'
+    },
+    border: 'rgba(0, 0, 0, 0.26)'
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '24px'
+  },
+  borderRadius: {
+    sm: '10px',
+    md: '6px',
+    lg: '8px'
+  },
+  shadows: {
+    sm: '0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
+    md: '0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23)',
+    lg: '0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22)'
+  }
+};
--- a/frontend/src/stores/appStore.ts
+++ 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...'
+]);
Author	SHA1	Message	Date
Nikolai Papin	7382a3a08d	refactor: ts	2025-11-28 21:20:29 +03:00
Nikolai Papin	ffa6afc913	refactor: enhanced structure	2025-11-28 20:57:24 +03:00
Nikolai Papin	9400c9d748	refactor: update status panel styling - Remove background and border for cleaner appearance - Maintain grid layout and information hierarchy - Improve integration with overall design system	2025-11-28 20:30:33 +03:00
Nikolai Papin	74d10877fc	refactor: clean up overview component - Remove terminal integration now handled by main layout - Streamline grid layout and component structure - Maintain status panel functionality	2025-11-28 20:30:33 +03:00
Nikolai Papin	298b315afa	refactor: simplify header component - Remove title and control buttons for cleaner interface - Maintain status indicator functionality - Improve visual hierarchy and spacing	2025-11-28 20:30:33 +03:00
Nikolai Papin	44a2051536	feat: add resizable terminal panel to main layout - Integrate terminal as persistent component in main App layout - Add drag-to-resize functionality with min/max height constraints - Implement auto-scroll to bottom for new terminal lines - Prevent context menu and enable text selection in terminal content - Add responsive behavior that hides terminal on small screens	2025-11-28 20:30:33 +03:00