fix(ui): Logo to PNG, start.sh port fix, LOGIN position, Up/Down horizontal

- Logo: Use LOGO_TCK_small.png instead of SVG
- start.sh: Fix arbitrary port handling (dev:8888 now works)
- Header: Move LOGIN indicator to top-left next to logo
- NavigationButtons: Make Up/Down horizontal, match title size

sample_interface/src/app/components/Header.tsx

@@ -4,7 +4,7 @@ import { useSensorStore } from "../stores/sensorStore";
 import { VoltageDisplay } from "./VoltageDisplay";
 import { BatteryStatus } from "./BatteryStatus";
 import { LoginIndicator } from "./LoginIndicator";
-import TCKLogo from "../../../../logo/tck_logo.svg";
+import TCKLogo from "../../../../logo/LOGO_TCK_small.png";
 
 export function Header() {
   const [currentTime, setCurrentTime] = useState(new Date());
@@ -36,10 +36,13 @@ export function Header() {
 
   return (
     <div className="bg-gray-950 border-b border-gray-700 px-2 py-1 flex items-center gap-2 text-xs">
-      {/* Logo */}
-      <div className="flex items-center gap-1">
-        <img src={TCKLogo} alt="TCK" className="w-6 h-6" />
-        <span className="text-white font-semibold">RTU</span>
+      {/* Logo + Login (left side) */}
+      <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1">
+          <img src={TCKLogo} alt="TCK" className="w-6 h-6" />
+          <span className="text-white font-semibold">RTU</span>
+        </div>
+        <LoginIndicator isLoggedIn={isLoggedIn} />
       </div>
 
       <div className="flex-1 flex items-center gap-2 justify-end">
@@ -84,9 +87,6 @@ export function Header() {
           <span className="text-white">{data.station.version}</span>
         </div>
 
-        {/* Login Status */}
-        <LoginIndicator isLoggedIn={isLoggedIn} />
-
         {/* Solar Voltage */}
         <div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
           <span className="text-gray-400">Solar:</span>

sample_interface/src/app/components/NavigationButtons.tsx

@@ -2,7 +2,7 @@ import { ChevronUp, ChevronDown } from "lucide-react";
 import { Button } from "./ui/button";
 
 export function NavigationButtons() {
-  const scrollAmount = 300; // pixels to scroll
+  const scrollAmount = 200;
 
   const scrollUp = () => {
     const panel = document.getElementById("details-panel");
@@ -19,20 +19,20 @@ export function NavigationButtons() {
   };
 
   return (
-    <div className="fixed top-20 right-4 flex flex-col gap-2 z-10">
+    <div className="fixed top-16 right-4 flex gap-1 z-10">
       <Button
         onClick={scrollUp}
-        size="lg"
-        className="bg-blue-600 hover:bg-blue-700 text-white shadow-lg h-14 w-14 p-0"
+        className="bg-blue-600 hover:bg-blue-700 text-white shadow-lg h-8 px-3 text-sm"
       >
-        <ChevronUp className="w-6 h-6" />
+        <ChevronUp className="w-4 h-4 mr-1" />
+        Up
       </Button>
       <Button
         onClick={scrollDown}
-        size="lg"
-        className="bg-blue-600 hover:bg-blue-700 text-white shadow-lg h-14 w-14 p-0"
+        className="bg-blue-600 hover:bg-blue-700 text-white shadow-lg h-8 px-3 text-sm"
       >
-        <ChevronDown className="w-6 h-6" />
+        Down
+        <ChevronDown className="w-4 h-4 ml-1" />
       </Button>
     </div>
   );