From 49382f8f061c0124613fcd87712418e7a43d046a Mon Sep 17 00:00:00 2001
From: yangy <eafonyang@gamilc.com>
Date: Fri, 24 Apr 2026 11:37:56 +0800
Subject: [PATCH] Update logo and enhance layout responsiveness; add stroke
 animation for frequency chart paths

---
 client/public/logo.png                  | Bin 817 -> 1149 bytes
 client/src/components/ConnectScreen.tsx |  22 ++++++++++++++--------
 client/src/components/Layout.tsx        |  11 +++++++----
 client/src/index.css                    |  17 +++++++++++++++++
 client/src/pages/EQPage.tsx             |  12 ++++++++++++
 5 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/client/public/logo.png b/client/public/logo.png
index 121484ad28e011494950a411314b1467812d7a76..268413727f2813d1fd48c842963a0ee6b538789b 100644
GIT binary patch
delta 1143
zcmV--1c>{w2K@*jiBL{Q4GJ0x0000DNk~Le0000`0000P2nGNE0H#K%36UWee*`Z{
zL_t(oh2@z`h+IV!hQCf`5nmA{@qryDGNMG?_(&ikN)UAfZBbMl7l9CFBL-$MAc8QX
z3uPctVSFscWZ@<nMPWpv+4w*b8C1w31S3O699?7~nurb(969nA9*=eVcHi!?WBlRL
zx2jH^d+vX${yJ4%TU=b+1YFKvf7lDmbNXSpOYdfW?f~Y1Q6um$u+kZf15>9FeHR0t
z0xN(;;K>f&?{VO6;0)kvVA--R2YV{wE|F)bY4lWuk@r1tK5)W({2vHB7|K6&;Ol4L
zEZ_&=8k@O&6&>9arom&tbjEHUutxVsff3;8U^5bQsSZ3JY<2(#bl(8(e*w-diSa#P
z7cc|706YkM32e>S))mLCZnQ4Qe$2(U1$Z0yQKN8MRRY%q-Mp~CZjH0M3^)Q@9s0fl
zT<gkvfPPnAaOCX|ZDrV{kGolRH>y10`q>AW1R@s}<DjN|(#`LH4c@31Q}{NCdBO$2
zPTg-01ex8C?%!;ayoB{4e<NM%U7L~jQieQ_nikeZuCeL}>;&`rqT|lTpvZeD_<d1R
zkT6OO$Mo_=h}xIKb0Vk}Oy*>&7X+f|U{hnGs~ZY7hk$2Xc|~X+E709m(a89GUw+X?
z9&~MeN@ILXJtNR?KM-@!1k=6SL*4OUJK?k~VNM!4LpfsK17U&Le=2G5BwioA_BxG;
zdPvYck5@x^rADy7hO|oVuMo>frfw`#_cwHlzy}KI&n)S8U8c@7>7q=%O`Y8t!gJ`?
zqSFp?TfEY3Uyi^nEj)B@C|{LXrFND`M7@cKPpUm)RQ2PT>sYXji_Vh3UhrGxW(k*y
zjAjBoA2g|^74cEkf5%+U@NOvY$%uGDUnW2F$n9khYWgM=`R*z#&?kVm+(@wBmnG7N
zG7tMeFYs(gMQY(gc%0PeNyz1UkLV+$I8uI?gnhVV9~+;&@NW?~lL;Ot(m71&y0Sp<
zJ&c@fuG}cd_olU@iTPog4KeL0!z)!uX$MIIr$yrNHv5lif1i1>p#2-*J|_p4WOUEx
zdsA-PmN2P)?O=Dz*Om%)9+-1I+~j#5Yfl@|2z%n(;pKV2y})u;m(#QO{EvXMfg4)j
zA^NjD_$K$v6#o^#EhTZpSpM<uMFgHo*scZW!-AMT2Oci?s7sFj!g=7@@RvixQ@tXO
z4hgi8F{|saf370D9;QMw+q&A5@3MSuqNIJFw0KtcT}4#_>)L&oh77c@by{B1?lGbi
zWI+Bq*{?TrCfP54t92mIHB=?=PT&`}NPN~ppH(gTUaKS<`Twe7jE0*-E<2k$5a<L|
z3A7dK9Ctcfw*C7;N9t(mH^ZE>tt;28icfTanzn@lO^T&!=wy1l2E3sh@HgQ1CbpK7
z**{t~qW=6hs|hT(OuA*h?GKz^E5>N~r;S2OKMXbkyO$pVe*iw);M+?M7<T{w002ov
JPDHLkV1jUd9?1Xz

delta 808
zcmV+@1K0fh2(bnsiBL{Q4GJ0x0000DNk~Le0000v0000I2nGNE0O50XaFHPwe*)u4
zL_t(oh1Hi!NLE1<$A6!G^r9poh@i-5B?e)EWJJ=Uu$OH_a1kwfY@(e6?V<=Hgb1RD
zGAIJ0g1`bxXc0y9fP_GW9#B+}S{oPTqWI##f8sRU`*p8a*dK;_=FFUX=09`JnR^SR
zQfV1*9H<1|0v$|0bOA%a#T+YZe*xATpCYgUSf_!yX-KjgXqG$*+|FQQ1Wy4!tW(qp
z{xA5HW1YsU5J+alATS>o2Wlgmk9s}?mH^f2Uj{lQ-%z9&9sv7vN^8sbH$N97e*s>(
zu|vQfV3zvdfoDJ~&?}w!>&!#4BEy_Y<@Z_j_iJ;^S)*Ib5s_{z^R58Pf5R%tFMum4
zwngb4Y2$hW**qk(!d|>Xd1T>o5}4_14*(y4dZ)VsJkId`*+4@?a6->;qDxh%e$|#N
zr!yJs2HrX61xKbg!~6Px^C@EoooqgqtMxejZz(Vtk~1>SYg1?jjEj80O()x_A9n4D
zP9uwtfDY%c+D|f)BN++!f3RqA`tFqZJEL@%7ungOPU~72cP*eDSX^d3DC|AHCQYhP
z_>>%hv>m+X<TF6OTC>yN)w4lG$0OvYUwEf-v(`0Fbn_obW<m(pAvd{Qu|DitNaS#u
z1y#&CXE*Bds3*!ppP$zxcSSy|y>XQk<>r);+@w+;PP8azq18y=e-!O>fZ1-B-0v#g
zsPeGQZBVFwHIa`hXNNW_4##hkA!*;PvCi^lVWhhcymWmF$CZ-%qQ$hj#P?&~<~1-D
zT?Gq(&k1%mXN3sf(%PCd7FXb~_Cej3sU-geh7-P;?1DcA3{18EJXgpz<;;NJB?tS2
z+pF$i!nn`DG{giKen~g1G?*0fkUXj|sgLg=VUClN-n&(&w=suL+t}x_o2!t|jXa-q
zV=Cz*DdYApx<<K`go%`VF9-9rO4p9rJ^kAxcLA4FUC$+qpV0le8n~V?zD4%$Q^v0*
m=<E)+Ysx;-!{10g06zhxkEUhLg-X)^0000<MNUMnLSTZLmV2Q9

diff --git a/client/src/components/ConnectScreen.tsx b/client/src/components/ConnectScreen.tsx
index 0324cd0..13d394c 100644
--- a/client/src/components/ConnectScreen.tsx
+++ b/client/src/components/ConnectScreen.tsx
@@ -27,13 +27,19 @@ export default function ConnectScreen() {
     <div className="min-h-screen bg-black flex flex-col items-center justify-center px-6">
       {/* Logo / Brand */}
       <div className="mb-10 flex flex-col items-center">
-        <img
-          src={`${import.meta.env.BASE_URL}logo.png`}
-          alt="Luxsin"
-          className="mb-4 h-auto w-20 object-contain"
-        />
-        <h1 className="text-[30px] font-bold text-white tracking-tight">Luxsin X8</h1>
-        <p className="text-[14px] text-white/35 mt-1 tracking-wide">Controller</p>
+        <div
+          className="mb-4 flex size-[5.5rem] shrink-0 items-center justify-center rounded-[17px] border border-white/15 bg-white/[0.02]"
+        >
+          <img
+            src={`${import.meta.env.BASE_URL}logo.png`}
+            alt="Luxsin"
+            className="h-auto max-h-[3.75rem] w-auto max-w-[3.75rem] object-contain"
+          />
+        </div>
+        <h1 className="text-[16px] font-semibold tracking-tight text-white/70">
+          Luxsin X8 Controller
+        </h1>
+        
       </div>
 
       {/* Connection card */}
@@ -58,7 +64,7 @@ export default function ConnectScreen() {
               style={{
                 background: "rgba(44,44,46,0.8)",
                 border: "1px solid rgba(255,255,255,0.08)",
-                fontFamily: "'JetBrains Mono', monospace",
+                fontFamily: "inherit",
               }}
               onFocus={(e) => { e.target.style.borderColor = "rgba(0,255,246,0.4)"; e.target.style.boxShadow = "0 0 0 3px rgba(0,255,246,0.06)"; }}
               onBlur={(e) => { e.target.style.borderColor = "rgba(255,255,255,0.08)"; e.target.style.boxShadow = "none"; }}
diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
index 52c7bb1..6a8043a 100644
--- a/client/src/components/Layout.tsx
+++ b/client/src/components/Layout.tsx
@@ -16,21 +16,24 @@ interface LayoutProps {
 
 export default function Layout({ children, title, subtitle }: LayoutProps) {
   return (
-    <div className="min-h-screen flex flex-col" style={{ background: "#0d1117" }}>
+    <div
+      className="min-h-screen flex min-w-0 flex-col max-lg:overflow-x-hidden"
+      style={{ background: "#0d1117" }}
+    >
       {/* Global Status Bar */}
       <StatusBar />
 
-      <div className="flex flex-1">
+      <div className="flex min-w-0 flex-1">
         {/* Desktop sidebar — hidden on mobile */}
         <div className="hidden lg:block">
           <Sidebar />
         </div>
 
         {/* Main content area */}
-        <div className="flex-1 flex flex-col min-h-screen lg:ml-[220px]">
+        <div className="flex min-h-screen min-w-0 flex-1 flex-col max-lg:overflow-x-hidden lg:ml-[220px]">
           <TopBar title={title} subtitle={subtitle} />
         <main
-          className="flex-1 p-4 md:p-6 overflow-y-auto"
+          className="min-w-0 flex-1 overflow-y-auto p-4 md:p-6 max-lg:overflow-x-hidden"
           /* On mobile, add bottom padding so content isn't hidden behind BottomNav */
           style={{ paddingBottom: "calc(5rem + env(safe-area-inset-bottom, 0px))" }}
         >
diff --git a/client/src/index.css b/client/src/index.css
index ae14da3..86fd4bd 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -132,6 +132,23 @@
   input[type="radio"]:not(:disabled) {
     @apply cursor-pointer;
   }
+
+  /* Phones & tablets: no whole-app horizontal pan / rubber-band */
+  @media (max-width: 1024px), (hover: none) and (pointer: coarse) {
+    html {
+      overflow-x: hidden;
+      overscroll-behavior-x: none;
+    }
+    body {
+      overflow-x: hidden;
+      overscroll-behavior-x: none;
+    }
+    #root {
+      overflow-x: hidden;
+      width: 100%;
+      max-width: 100%;
+    }
+  }
 }
 
 @layer components {
diff --git a/client/src/pages/EQPage.tsx b/client/src/pages/EQPage.tsx
index c6a6791..eff4d1d 100644
--- a/client/src/pages/EQPage.tsx
+++ b/client/src/pages/EQPage.tsx
@@ -109,6 +109,8 @@ function FreqChart({
   const svgRef = useRef<SVGSVGElement | null>(null);
   const draggingBandRef = useRef<number | null>(null);
   const curvePathRef = useRef<SVGPathElement | null>(null);
+  const rawPathRef = useRef<SVGPathElement | null>(null);
+  const equalizedPathRef = useRef<SVGPathElement | null>(null);
   const [chartWidth, setChartWidth] = useState(340);
   const W = chartWidth;
   const [isBandDragging, setIsBandDragging] = useState(false);
@@ -221,6 +223,14 @@ function FreqChart({
     enabled: !isBandDragging,
     durationMs: 1350,
   });
+  useStrokeDrawAnimation(rawPathRef, rawPathD, {
+    enabled: !isBandDragging && !!rawPathD,
+    durationMs: 1350,
+  });
+  useStrokeDrawAnimation(equalizedPathRef, equalizedPathD, {
+    enabled: !isBandDragging && !!equalizedPathD,
+    durationMs: 1350,
+  });
 
   const freqLabels = [20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000];
   const gainLabels = [20, 15, 10, 5, 0, -5, -10, -15, -20];
@@ -337,6 +347,7 @@ function FreqChart({
           {/* Raw */}
           {rawPathD && showRaw && (
             <path
+              ref={rawPathRef}
               d={rawPathD}
               fill="none"
               stroke="#ffffff"
@@ -349,6 +360,7 @@ function FreqChart({
           {/* Equalized = EQ + Raw */}
           {equalizedPathD && showEqualized && (
             <path
+              ref={equalizedPathRef}
               d={equalizedPathD}
               fill="none"
               stroke="#23d2fe"