feat: minor ui improvements

src/components/layout/AppHeader.tsx

@@ -9,7 +9,10 @@ interface AppHeaderProps {
   uiFade: Record<string, unknown>;
 }
 
-export const AppHeader = memo(function AppHeader({ playPressSound, uiFade }: AppHeaderProps) {
+export const AppHeader = memo(function AppHeader({
+  playPressSound,
+  uiFade,
+}: AppHeaderProps) {
   return (
     <motion.div
       key="header"
@@ -26,7 +29,7 @@ export const AppHeader = memo(function AppHeader({ playPressSound, uiFade }: App
           className="w-4 h-4 object-contain block pointer-events-none"
           style={{ imageRendering: "pixelated" }}
         />
-        <span className="text-xs text-gray-300 mc-text-shadow opacity-90 tracking-wide leading-none block pt-[1px] pointer-events-none">
+        <span className="text-xs text-gray-30 mc-text-shadow block pt-[1px] pointer-events-none">
           Emerald Legacy Launcher
         </span>
       </div>

src/components/views/GoldMapperView.tsx

@@ -5,9 +5,6 @@ import {
   type GoldMapperMapping,
 } from "../../services/TauriService";
 import { useUI, useConfig, useAudio } from "../../context/LauncherContext";
-
-const EMERALD_ICON = "/images/emerald_0.png";
-
 const KEY_FALLBACK = [
   "KEY_A",
   "KEY_D",
@@ -21,7 +18,6 @@ const KEY_FALLBACK = [
 ];
 
 const MOUSE_IDS = ["MOUSE_LEFT", "MOUSE_MIDDLE", "MOUSE_RIGHT"];
-
 const MOUSE_LABELS: Record<string, string> = {
   MOUSE_LEFT: "Left Click",
   MOUSE_MIDDLE: "Middle Click",
@@ -81,7 +77,6 @@ const GoldMapperView = memo(function GoldMapperView() {
   const [keyInputError, setKeyInputError] = useState<string | null>(null);
   const [focusIndex, setFocusIndex] = useState<number | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-
   useEffect(() => {
     TauriService.goldMapperGetDefaults()
       .then((defaults) => {
@@ -112,11 +107,7 @@ const GoldMapperView = memo(function GoldMapperView() {
       .catch(console.error);
   }, []);
 
-  const getTo = useCallback(
+  const getTo = useCallback((id: string) => binds[id] ?? id, [binds]);
-    (id: string) => binds[id] ?? id,
-    [binds],
-  );
-
   const buildPayload = useCallback(
     (nextBinds: Record<string, string>): GoldMapperMapping[] => {
       const rows: GoldMapperMapping[] = [];
@@ -154,9 +145,7 @@ const GoldMapperView = memo(function GoldMapperView() {
       playPressSound();
       setEditing(id);
       setModalFocusIndex(0);
-      setKeyInput(
+      setKeyInput(/^KEY_/.test(getTo(id)) ? displayName(getTo(id)) : "");
-        /^KEY_/.test(getTo(id)) ? displayName(getTo(id)) : "",
-      );
       setKeyInputError(null);
     },
     [playPressSound, getTo],
@@ -202,7 +191,11 @@ const GoldMapperView = memo(function GoldMapperView() {
   const rows: Row[] = useMemo(() => {
     const list: Row[] = [{ kind: "reset", key: "reset" }];
     list.push({ kind: "enable", key: "enable" });
-    list.push({ kind: "header", key: "controller_header", label: "Controller" });
+    list.push({
+      kind: "header",
+      key: "controller_header",
+      label: "Controller",
+    });
     for (const id of controllerIds) {
       list.push({
         kind: "bind",
@@ -341,7 +334,6 @@ const GoldMapperView = memo(function GoldMapperView() {
     const isEnable = row.kind === "enable";
     const focusIdx = nextFocusIndex();
     const focused = focusIndex === focusIdx;
-
     return (
       <button
         key={row.key}
@@ -397,16 +389,14 @@ const GoldMapperView = memo(function GoldMapperView() {
               ? "Enable GoldMapper"
               : row.label}
         </span>
-        {!isReset &&
+        {!isReset && !isEnable && row.kind === "bind" && (
-          !isEnable &&
+          <span className="tracking-widest text-base opacity-70 ml-3 shrink-0">
-          row.kind === "bind" && (
+            {displayName(getTo(row.id))}
-            <span className="tracking-widest text-base opacity-70 ml-3 shrink-0">
+          </span>
-              {displayName(getTo(row.id))}
+        )}
-            </span>
-          )}
         {isEnable && (
           <img
-            src={EMERALD_ICON}
+            src="/images/goldmapper.png"
             alt=""
             className="w-6 h-6 object-contain shrink-0 ml-3"
             style={{ imageRendering: "pixelated" }}
@@ -470,9 +460,7 @@ const GoldMapperView = memo(function GoldMapperView() {
                       onMouseEnter={() => setModalFocusIndex(i)}
                       onClick={() => pickTarget(editing, id)}
                       className={`h-10 px-2 flex items-center justify-center text-sm tracking-widest outline-none border-none cursor-pointer transition-colors ${
-                        getTo(editing) === id
+                        getTo(editing) === id ? "text-[#ffff00]" : "text-white"
-                          ? "text-[#ffff00]"
-                          : "text-white"
                       }`}
                       style={stoneButtonStyle(modalFocusIndex === i)}
                     >
@@ -556,8 +544,7 @@ const GoldMapperView = memo(function GoldMapperView() {
               }
               onClick={closeModal}
               className={`w-full h-12 flex items-center justify-center text-xl mc-text-shadow transition-colors outline-none border-none cursor-pointer ${
-                modalFocusIndex ===
+                modalFocusIndex === MOUSE_IDS.length + controllerIds.length + 1
-                MOUSE_IDS.length + controllerIds.length + 1
                   ? "text-[#ffff00]"
                   : "text-white"
               }`}

src/components/views/HomeView.tsx

@@ -162,7 +162,7 @@ const HomeView = memo(function HomeView() {
               }
             }}
             disabled={btn.disabled}
-            className={`w-full h-12 flex items-center justify-between px-6 text-2xl mc-text-shadow transition-colors outline-none border-none ${btn.disabled ? "text-gray-400 cursor-not-allowed" : menuFocus === i ? (btn.isDanger ? "text-red-400" : "text-[#FFFF55]") : btn.isDanger ? "text-red-500" : "text-white"}`}
+            className={`w-full h-12 flex items-center justify-between px-6 text-xl mc-text-shadow transition-colors outline-none border-none ${btn.disabled ? "text-gray-400 cursor-not-allowed" : menuFocus === i ? (btn.isDanger ? "text-red-400" : "text-[#FFFF55]") : btn.isDanger ? "text-red-500" : "text-white"}`}
             style={{
               backgroundImage: btn.disabled
                 ? "url('/images/Button_Background.png')"

src/components/views/SettingsView.tsx

@@ -249,8 +249,12 @@ const SettingsView = memo(function SettingsView() {
     const fullPath = tracks[currentTrack];
     if (fullPath) {
       trackName =
-        fullPath.split("/").pop()?.replace(".ogg", "").replace(".wav", "") ||
+        fullPath
-        "Unknown";
+          .split("/")
+          .pop()
+          ?.replace(".ogg", "")
+          .replace(".wav", "")
+          .replace(".opus", "") || "Unknown";
     }
   }
 
@@ -778,20 +782,6 @@ const SettingsView = memo(function SettingsView() {
       transition={{ duration: animationsEnabled ? 0.3 : 0 }}
       className="flex flex-col items-center w-full max-w-5xl outline-none"
     >
-      <h2 className="text-2xl text-white mc-text-shadow mt-2 mb-4 border-b-2 border-[#373737] pb-2 w-[40%] max-w-[200px] text-center tracking-widest uppercase opacity-80 whitespace-nowrap px-4">
-        {currentSubMenu === "main"
-          ? "Settings"
-          : currentSubMenu === "audio"
-            ? "Audio"
-            : currentSubMenu === "video"
-              ? "Video"
-              : currentSubMenu === "game"
-                ? "Game"
-                : currentSubMenu === "plugins"
-                  ? "Plugins"
-                  : "Launcher"}
-      </h2>
-
       {currentSubMenu === "main" ? (
         <div className="w-full max-w-[680px] space-y-2 mb-4 p-6 flex flex-col items-center overflow-y-auto max-h-[55vh] settings-scrollbar">
           {settingsItems.map((item, index) => {
@@ -821,7 +811,7 @@ const SettingsView = memo(function SettingsView() {
                       value={item.value}
                       onChange={(e) => item.onChange(parseInt(e.target.value))}
                       onMouseUp={playPressSound}
-                      className="mc-slider-custom w-[calc(100%+16px)] h-full opacity-100 cursor-pointer z-20 outline-none m-0"
+                      className="mc-slider-custom w-[calc(100%+16px)] h-full opacity-100 cursor-pointer z-0 outline-none m-0"
                     />
                   </div>
                 </div>
@@ -851,7 +841,7 @@ const SettingsView = memo(function SettingsView() {
                 style={getItemStyle(index)}
               >
                 <span
-                  className={`mc-text-shadow tracking-widest uppercase ${isSmall ? "text-xs" : item.label.length > 20 ? "text-lg" : "text-xl"} truncate w-full text-center`}
+                  className={`mc-text-shadow ${isSmall ? "text-xs" : item.label.length > 20 ? "text-lg" : "text-xl"} truncate w-full text-center`}
                 >
                   {item.label}
                 </span>
@@ -943,7 +933,7 @@ const SettingsView = memo(function SettingsView() {
                     style={getSliderStyle(index)}
                   >
                     <span
-                      className={`absolute z-10 text-xl pointer-events-none transition-colors tracking-widest ${focusIndex === index ? "text-[#ffff00]" : item.id === "music" || item.id === "sfx" ? "text-white" : "text-[#2a2a2a]"}`}
+                      className={`absolute z-30 text-xl mc-text-shadow pointer-events-none transition-colors tracking-widest ${focusIndex === index ? "text-[#ffff00]" : item.id === "music" || item.id === "sfx" ? "text-white" : "text-[#2a2a2a]"}`}
                     >
                       {item.label}
                     </span>
@@ -958,7 +948,7 @@ const SettingsView = memo(function SettingsView() {
                           item.onChange(parseInt(e.target.value))
                         }
                         onMouseUp={playPressSound}
-                        className="mc-slider-custom w-[calc(100%+16px)] h-full opacity-100 cursor-pointer z-20 outline-none m-0"
+                        className="mc-slider-custom w-[calc(100%+16px)] h-full opacity-100 cursor-pointer z-10 outline-none m-0"
                       />
                     </div>
                   </div>

src/css/App.css

@@ -19,16 +19,20 @@
   padding: 0;
 }
 
+.mc-slider-custom::-webkit-slider-runnable-track {
+  height: 100%;
+}
+
 .mc-slider-custom::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 14px;
+  width: 20px;
-  height: 44px;
+  height: 100%;
   background: url('/images/Slider_Handle.png') no-repeat center;
   background-size: 100% 100%;
   cursor: pointer;
   position: relative;
-  z-index: 30;
+  z-index: 1;
 }
 
 *:focus {