web: move logo to sidebar and add top actions bar

- Move logo into sidebar at 39x39 (30% larger than 30x30)\n- Remove "Stackdog Security Dashboard" header text\n- Add top bar with right-aligned actions menu button (...)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: vsilent

web/src/components/Dashboard.css

@@ -12,11 +12,30 @@
   min-height: 400px;
 }
 
-.dashboard-title {
-  font-size: 2rem;
-  font-weight: 700;
-  color: #2c3e50;
-  margin-bottom: 0.5rem;
+.dashboard-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.dashboard-topbar-spacer {
+  flex: 1;
+}
+
+.dashboard-actions-btn {
+  border: 1px solid #d1d5db;
+  background: #fff;
+  color: #374151;
+  border-radius: 8px;
+  padding: 4px 10px;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.dashboard-actions-btn:hover {
+  background: #f9fafb;
 }
 
 .dashboard-subtitle {
@@ -61,10 +80,6 @@
     padding: 10px;
   }
 
-  .dashboard-title {
-    font-size: 1.5rem;
-  }
-
   .stat-value {
     font-size: 2rem;
   }

web/src/components/Dashboard.tsx

@@ -9,8 +9,6 @@ import ContainerList from './ContainerList';
 import ThreatMap from './ThreatMap';
 import './Dashboard.css';
 
-const DASHBOARD_LOGO_URL = 'https://github.com/user-attachments/assets/0c8a9216-8315-4ef7-9b73-d96c40521ed1';
-
 const Dashboard: React.FC = () => {
   const [securityStatus, setSecurityStatus] = useState<SecurityStatus | null>(null);
   const [loading, setLoading] = useState(true);
@@ -81,16 +79,10 @@ const Dashboard: React.FC = () => {
     <Container fluid className="dashboard">
       <Row className="mb-4">
         <Col>
-          <h1 className="dashboard-title">
-            <img
-              src={DASHBOARD_LOGO_URL}
-              alt="Stackdog logo"
-              className="dashboard-logo"
-              width={30}
-              height={30}
-            />
-            Stackdog Security Dashboard
-          </h1>
+          <div className="dashboard-topbar">
+            <div className="dashboard-topbar-spacer" />
+            <button className="dashboard-actions-btn" aria-label="Actions menu">...</button>
+          </div>
           <p className="dashboard-subtitle">
             Real-time security monitoring for containers and Linux servers
           </p>

web/src/components/Sidebar.css

@@ -9,11 +9,20 @@
 }
 
 .sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   font-size: 1.1rem;
   font-weight: 700;
   margin-bottom: 20px;
 }
 
+.sidebar-logo {
+  width: 39px;
+  height: 39px;
+  object-fit: contain;
+}
+
 .sidebar-nav {
   display: flex;
   flex-direction: column;

web/src/components/Sidebar.tsx

@@ -1,10 +1,21 @@
 import React from 'react';
 import './Sidebar.css';
 
+const DASHBOARD_LOGO_URL = 'https://github.com/user-attachments/assets/0c8a9216-8315-4ef7-9b73-d96c40521ed1';
+
 const Sidebar: React.FC = () => {
   return (
     <aside className="sidebar">
-      <div className="sidebar-brand">Stackdog</div>
+      <div className="sidebar-brand">
+        <img
+          src={DASHBOARD_LOGO_URL}
+          alt="Stackdog logo"
+          className="sidebar-logo"
+          width={39}
+          height={39}
+        />
+        <span>Stackdog</span>
+      </div>
       <nav className="sidebar-nav">
         <a href="#overview">Overview</a>
         <a href="#threats">Threat Map</a>