feat(branding): update logo, adopt NixOS 26.05 and refresh authentic screenshots

README.md

@@ -1,8 +1,24 @@
-# NaxOS Web Dashboard (`naxos-ui`)
+<p align="center">
+  <img src="public/logo.svg" alt="NaxOS Logo" width="140" height="140" />
+</p>
 
-[![Gitea Actions](https://git.lholz.de/naxos/naxos-ui/actions/workflows/ci.yaml/badge.svg)](https://git.lholz.de/naxos/naxos-ui/actions)
+<h1 align="center">NaxOS Web Dashboard</h1>
 
-The **NaxOS Web Dashboard** is a modern, responsive, non-technical web interface for managing the NaxOS storage appliance. Built with React, TypeScript, Tailwind CSS, Lucide Icons, and embedded CNCF Perses analytics.
+<p align="center">
+  <b>Modern, Responsive Web Interface for NaxOS Storage Appliance (NixOS 26.05 & OpenZFS)</b>
+  <br />
+  Built with React 18, TypeScript, Tailwind CSS, Lucide Icons, and Embedded CNCF Perses Analytics
+</p>
+
+<p align="center">
+  <a href="https://git.lholz.de/naxos/naxos-ui/actions"><img src="https://git.lholz.de/naxos/naxos-ui/actions/workflows/ci.yaml/badge.svg" alt="Gitea Actions" /></a>
+  <a href="https://git.lholz.de/naxos/-/packages"><img src="https://img.shields.io/badge/package-gitea%20registry-blue.svg" alt="Gitea Packages" /></a>
+  <a href="https://git.lholz.de/naxos/naxos-ui"><img src="https://img.shields.io/badge/nixos-26.05-5277C3.svg?logo=nixos&logoColor=white" alt="NixOS 26.05" /></a>
+</p>
+
+---
+
+The **NaxOS Web Dashboard** is a modern, responsive, non-technical web interface for managing the NaxOS storage appliance running on NixOS 26.05. Built with React, TypeScript, Tailwind CSS, Lucide Icons, and embedded CNCF Perses analytics.
 
 ## Dashboard Showcase
 

docs/images/logo.svg

@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700" width="100%" height="100%">
+  <!-- NaxOS Logo with Transparent Background -->
+
+  <!-- 1. Snowflake (Background Layer) -->
+  <g id="snowflake" stroke="#0cb3e5" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Center Vertical Stem -->
+    <line x1="350" y1="336.5" x2="350" y2="162" />
+    <line x1="350" y1="336.5" x2="350" y2="530" />
+
+    <!-- Top Chevron (inside doorway) -->
+    <line x1="350" y1="202" x2="305" y2="162" />
+    <line x1="350" y1="202" x2="395" y2="162" />
+
+    <!-- Bottom Chevron (inside doorway plinth) -->
+    <line x1="350" y1="475" x2="315" y2="510" />
+    <line x1="350" y1="475" x2="385" y2="510" />
+
+    <!-- Upper Left Arm -->
+    <line x1="350" y1="336.5" x2="145" y2="258" />
+    <line x1="145" y1="258" x2="93" y2="215" />
+    <line x1="145" y1="258" x2="93" y2="301" />
+    <line x1="176" y1="242" x2="158" y2="165" />
+
+    <!-- Lower Left Arm -->
+    <line x1="350" y1="336.5" x2="145" y2="416" />
+    <line x1="145" y1="416" x2="93" y2="373" />
+    <line x1="145" y1="416" x2="93" y2="459" />
+    <line x1="176" y1="432" x2="158" y2="510" />
+
+    <!-- Upper Right Arm -->
+    <line x1="350" y1="336.5" x2="555" y2="258" />
+    <line x1="555" y1="258" x2="607" y2="215" />
+    <line x1="555" y1="258" x2="607" y2="301" />
+    <line x1="524" y1="242" x2="542" y2="165" />
+
+    <!-- Lower Right Arm -->
+    <line x1="350" y1="336.5" x2="555" y2="416" />
+    <line x1="555" y1="416" x2="607" y2="373" />
+    <line x1="555" y1="416" x2="607" y2="459" />
+    <line x1="524" y1="432" x2="542" y2="510" />
+  </g>
+
+  <!-- 2. Portara (Middle Layer) -->
+  <g id="portara">
+    <!-- Dark Navy Outer Frame & Stepped Plinth -->
+    <path d="M 180 56 H 520 V 460 L 525 465 V 540 H 380 V 442 H 420 V 162 H 280 V 442 H 320 V 540 H 175 V 465 L 180 460 Z" fill="#0e4079" />
+    <!-- Royal Blue Inset Fill -->
+    <path d="M 200 76 H 500 V 460 L 505 465 V 540 H 400 V 462 H 440 V 142 H 260 V 462 H 300 V 540 H 195 V 465 L 200 460 Z" fill="#2462b3" />
+  </g>
+
+  <!-- 3. Snow Hills (Foreground Layer) -->
+  <g id="snow">
+    <!-- Right Hill Body -->
+    <path d="M 335 536 C 430 508, 600 510, 665 618 H 180 L 335 536 Z" fill="#acc4db" />
+    <!-- Left Hill Body -->
+    <path d="M 35 618 C 80 545, 220 480, 335 536 L 180 618 Z" fill="#acc4db" />
+
+    <!-- White Crests & Dividing Ridge -->
+    <path d="M 335 536 C 430 508, 600 510, 665 618" fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M 35 618 C 80 545, 220 480, 335 536 L 180 618" fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" />
+  </g>
+</svg>

public/logo.svg

@@ -1,6 +1,62 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700" width="100%" height="100%">
-  <rect width="100" height="100" rx="24" fill="#0f172a"/>
+  <!-- NaxOS Logo with Transparent Background -->
-  <path d="M25 32H40L55 68H40L25 32Z" fill="#10b981"/>
+
-  <path d="M45 32H60L75 68H60L45 32Z" fill="#06b6d4"/>
+  <!-- 1. Snowflake (Background Layer) -->
-  <circle cx="50" cy="50" r="8" fill="#3b82f6"/>
+  <g id="snowflake" stroke="#0cb3e5" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Center Vertical Stem -->
+    <line x1="350" y1="336.5" x2="350" y2="162" />
+    <line x1="350" y1="336.5" x2="350" y2="530" />
+
+    <!-- Top Chevron (inside doorway) -->
+    <line x1="350" y1="202" x2="305" y2="162" />
+    <line x1="350" y1="202" x2="395" y2="162" />
+
+    <!-- Bottom Chevron (inside doorway plinth) -->
+    <line x1="350" y1="475" x2="315" y2="510" />
+    <line x1="350" y1="475" x2="385" y2="510" />
+
+    <!-- Upper Left Arm -->
+    <line x1="350" y1="336.5" x2="145" y2="258" />
+    <line x1="145" y1="258" x2="93" y2="215" />
+    <line x1="145" y1="258" x2="93" y2="301" />
+    <line x1="176" y1="242" x2="158" y2="165" />
+
+    <!-- Lower Left Arm -->
+    <line x1="350" y1="336.5" x2="145" y2="416" />
+    <line x1="145" y1="416" x2="93" y2="373" />
+    <line x1="145" y1="416" x2="93" y2="459" />
+    <line x1="176" y1="432" x2="158" y2="510" />
+
+    <!-- Upper Right Arm -->
+    <line x1="350" y1="336.5" x2="555" y2="258" />
+    <line x1="555" y1="258" x2="607" y2="215" />
+    <line x1="555" y1="258" x2="607" y2="301" />
+    <line x1="524" y1="242" x2="542" y2="165" />
+
+    <!-- Lower Right Arm -->
+    <line x1="350" y1="336.5" x2="555" y2="416" />
+    <line x1="555" y1="416" x2="607" y2="373" />
+    <line x1="555" y1="416" x2="607" y2="459" />
+    <line x1="524" y1="432" x2="542" y2="510" />
+  </g>
+
+  <!-- 2. Portara (Middle Layer) -->
+  <g id="portara">
+    <!-- Dark Navy Outer Frame & Stepped Plinth -->
+    <path d="M 180 56 H 520 V 460 L 525 465 V 540 H 380 V 442 H 420 V 162 H 280 V 442 H 320 V 540 H 175 V 465 L 180 460 Z" fill="#0e4079" />
+    <!-- Royal Blue Inset Fill -->
+    <path d="M 200 76 H 500 V 460 L 505 465 V 540 H 400 V 462 H 440 V 142 H 260 V 462 H 300 V 540 H 195 V 465 L 200 460 Z" fill="#2462b3" />
+  </g>
+
+  <!-- 3. Snow Hills (Foreground Layer) -->
+  <g id="snow">
+    <!-- Right Hill Body -->
+    <path d="M 335 536 C 430 508, 600 510, 665 618 H 180 L 335 536 Z" fill="#acc4db" />
+    <!-- Left Hill Body -->
+    <path d="M 35 618 C 80 545, 220 480, 335 536 L 180 618 Z" fill="#acc4db" />
+
+    <!-- White Crests & Dividing Ridge -->
+    <path d="M 335 536 C 430 508, 600 510, 665 618" fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M 35 618 C 80 545, 220 480, 335 536 L 180 618" fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" />
+  </g>
 </svg>

src/api/client.ts

@@ -92,7 +92,7 @@ function getFallbackData(endpoint: string, options?: RequestInit): any {
         zfsPoolsCount: 1,
         activeSharesCount: 3,
         runningAppsCount: 2,
-        osVersion: 'NaxOS 24.11 (NixOS Vicuna)',
+        osVersion: 'NaxOS 26.05 (NixOS)',
         nixosGeneration: 42,
       },
     };

src/components/Sidebar.tsx

@@ -32,10 +32,8 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentTab, onSelectTab }) =>
     <aside className="w-64 bg-slate-900/90 border-r border-slate-800 flex flex-col backdrop-blur-xl shrink-0">
       {/* Brand Header */}
       <div className="h-16 flex items-center px-6 gap-3 border-b border-slate-800">
-        <div className="h-9 w-9 rounded-xl bg-gradient-to-tr from-emerald-500 to-teal-400 p-0.5 shadow-lg shadow-emerald-500/20">
+        <div className="h-10 w-10 rounded-xl bg-slate-950 border border-slate-800/80 p-1 flex items-center justify-center shadow-lg shadow-emerald-500/10 shrink-0">
-          <div className="h-full w-full bg-slate-950 rounded-[10px] flex items-center justify-center">
+          <img src="/logo.svg" alt="NaxOS Logo" className="h-full w-full object-contain" />
-            <Server className="h-5 w-5 text-emerald-400" />
-          </div>
         </div>
         <div>
           <div className="font-bold tracking-tight text-white flex items-center gap-1.5">

src/views/GitOpsView.tsx

@@ -92,7 +92,7 @@ export const GitOpsView: React.FC<GitOpsViewProps> = ({
               onChange={(e) => setSelectedChannel(e.target.value as any)}
               className="bg-slate-950 border border-slate-800 rounded-lg px-2.5 py-1 text-slate-200 text-xs font-semibold focus:outline-none focus:border-emerald-500"
             >
-              <option value="stable">Stable (24.11 Vicuna)</option>
+              <option value="stable">Stable (26.05)</option>
               <option value="beta">Beta Channel</option>
               <option value="nightly">Nightly Unstable</option>
             </select>

src/views/OverviewView.tsx

@@ -34,7 +34,7 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
         <div>
           <h2 className="text-xl font-bold text-white tracking-tight">Appliance Overview</h2>
           <p className="text-xs text-slate-400 mt-1">
-            Running {status?.osVersion || 'NaxOS 24.11'} on OpenZFS storage engine
+            Running {status?.osVersion || 'NaxOS 26.05'} on OpenZFS storage engine
           </p>
         </div>
         <div className="flex items-center gap-3">