refactor: update status panel styling

- Remove background and border for cleaner appearance
- Maintain grid layout and information hierarchy
- Improve integration with overall design system

frontend/src/App.svelte

@@ -4,12 +4,38 @@ 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';
 
 let activeTab = 'overview';
 let status = 'Status';
 let uptime = '0s';
 let qrCodesFound = 0;
 let isOnline = false;
+let 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',
+    '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',
+    ' '
+];
+
+document.addEventListener('contextmenu', function(event) {
+    event.preventDefault();
+});
 </script>
 
 <div class="app-window">
@@ -24,6 +50,10 @@ let isOnline = false;
             <Settings />
         {/if}
     </main>
+    <!-- Terminal Output -->
+    <aside class="terminal-layout">
+        <Terminal {terminalLines} />
+    </aside>
 </div>
 
 <style>
@@ -47,13 +77,18 @@ let isOnline = false;
     --spacing-lg: 16px;
     --spacing-xl: 24px;
 
-    --border-radius-sm: 4px;
+    --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);
+    touch-action: manipulation;
+    user-select: none; /* Standard syntax */
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
 }
 
 * {
@@ -67,12 +102,15 @@ let isOnline = false;
     background-color: var(--bg-primary);
     height: 100vh;
     color: var(--text-primary);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
 .main-layout {
     padding: var(--spacing-lg);
     overflow: hidden;
-    height: auto;
     flex-grow: 1;
 }
+
 </style>

frontend/src/components/Header.svelte

@@ -1,11 +1,9 @@
 <!-- components/Header.svelte -->
 <script>
 export let isOnline = true;
-export let title = "QRminator";
 </script>
 
 <header class="headerbar">
-    <h1 class="header-title">{title}</h1>
     <div class="header-status">
         {#if isOnline}
             <span>Online</span>
@@ -13,11 +11,6 @@ export let title = "QRminator";
             <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>
@@ -31,9 +24,10 @@ export let title = "QRminator";
 }
 
 .header-title {
-    font-size: 1rem;
+    font-size: 16px;
     font-weight: bold;
     color: var(--text-primary);
+    line-height: 0;
 }
 
 .header-status {

frontend/src/components/Overview.svelte

@@ -1,41 +1,17 @@
 <!-- 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>
 
 <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} />
     </div>
-
-    <!-- Terminal Output -->
-    <Terminal {terminalLines} />
 </div>
 
 <style>

frontend/src/components/StatusPanel.svelte

@@ -26,9 +26,6 @@ export let qrCodesFound = 0;
 
 <style>
 .status-panel {
-    background-color: var(--bg-primary);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
     padding: var(--spacing-lg);
     width: 80%;
 }
@@ -37,7 +34,6 @@ export let qrCodesFound = 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
     padding: var(--spacing-sm) 0;
-    border-bottom: 1px solid var(--border-color);
 }
 
 .status-row:last-child {

frontend/src/components/Terminal.svelte

@@ -1,50 +1,128 @@
 <!-- components/Terminal.svelte -->
 <script>
-export let terminalLines = [];
+  export let terminalLines = [];
+  
+  let terminalRef;
+  let isResizing = false;
+  let startY, startHeight;
+  
+  function handleMouseDown(e) {
+    isResizing = true;
+    startY = e.clientY;
+    startHeight = parseInt(document.defaultView.getComputedStyle(terminalRef).height, 10);
+    
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    e.preventDefault();
+  }
+  
+  function handleMouseMove(e) {
+    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() {
+    isResizing = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  }
+  
+  // Scroll to bottom when new lines are added
+  $: {
+    if (terminalLines.length > 0) {
+      setTimeout(() => {
+        const content = terminalRef?.querySelector('.terminal-content');
+        if (content) {
+          content.scrollTop = content.scrollHeight;
+        }
+      }, 0);
+    }
+  }
 </script>
 
-<div class="terminal">
+<div class="terminal" bind:this={terminalRef}>
-    <div class="terminal-header">Output</div>
+  <div class="resize-handle" on:mousedown={handleMouseDown}></div>
-    <div class="terminal-content">
+  <div class="terminal-header">Logs</div>
-        {#each terminalLines as line}
+  <div class="terminal-content">
-            <div class="terminal-line">{line}</div>
+    {#each terminalLines as line}
-        {/each}
+      <div class="terminal-line">{line}</div>
-    </div>
+    {/each}
+  </div>
 </div>
 
 <style>
-.terminal {
+  .terminal {
-    background-color: var(--bg-primary);
+    background-color: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
+    margin: 20px;
+    margin-top: auto;
+    height: 200px; /* Default height */
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    resize: vertical;
     overflow: hidden;
-    flex-grow: 1;
+  }
-}
 
-.terminal-header {
+  @media (max-height: 500px) {
-    background-color: var(--bg-secondary);
+    .terminal {
+      display: none;
+    }
+  }
+
+  .resize-handle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    cursor: row-resize;
+    z-index: 10;
+    background-color: transparent;
+  }
+
+  .resize-handle:hover {
+    background-color: var(--accent-color);
+  }
+
+  .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-grow: 1;
     overflow-y: auto;
     white-space: nowrap;
-}
+    user-select: text;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+  }
 
-.terminal-line {
+  .terminal-line {
     margin-bottom: 2px;
-}
+  }
 
-.terminal-line:last-child {
+  .terminal-line:last-child {
     margin-bottom: 0;
-}
+  }
 </style>