From 7c566e3ff096bbfb726a4859539461558467fdff Mon Sep 17 00:00:00 2001
From: neoapps-dev <asd22.info@gmail.com>
Date: Sun, 30 Aug 2026 23:21:22 +0300
Subject: [PATCH] feat: minor ui improvements

---
 public/images/goldmapper.png            | Bin 0 -> 4009 bytes
 src/components/layout/AppHeader.tsx     |   7 ++--
 src/components/views/GoldMapperView.tsx |  43 +++++++++---------------
 src/components/views/HomeView.tsx       |   2 +-
 src/components/views/SettingsView.tsx   |  30 ++++++-----------
 src/css/App.css                         |  10 ++++--
 6 files changed, 38 insertions(+), 54 deletions(-)
 create mode 100644 public/images/goldmapper.png

diff --git a/public/images/goldmapper.png b/public/images/goldmapper.png
new file mode 100644
index 0000000000000000000000000000000000000000..93622c382161104360cf8b14c46951a6ac6d22f3
GIT binary patch
literal 4009
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
N_BCo>u}i?!e*@XkK_dVF

literal 0
HcmV?d00001

diff --git a/src/components/layout/AppHeader.tsx b/src/components/layout/AppHeader.tsx
index e953180..78235a7 100644
--- a/src/components/layout/AppHeader.tsx
+++ b/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>
diff --git a/src/components/views/GoldMapperView.tsx b/src/components/views/GoldMapperView.tsx
index dabfff1..c8eaebf 100644
--- a/src/components/views/GoldMapperView.tsx
+++ b/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(
-    (id: string) => binds[id] ?? id,
-    [binds],
-  );
-
+  const getTo = useCallback((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(
-        /^KEY_/.test(getTo(id)) ? displayName(getTo(id)) : "",
-      );
+      setKeyInput(/^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 &&
-          !isEnable &&
-          row.kind === "bind" && (
-            <span className="tracking-widest text-base opacity-70 ml-3 shrink-0">
-              {displayName(getTo(row.id))}
-            </span>
-          )}
+        {!isReset && !isEnable && row.kind === "bind" && (
+          <span className="tracking-widest text-base opacity-70 ml-3 shrink-0">
+            {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
-                          ? "text-[#ffff00]"
-                          : "text-white"
+                        getTo(editing) === id ? "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 ===
-                MOUSE_IDS.length + controllerIds.length + 1
+                modalFocusIndex === MOUSE_IDS.length + controllerIds.length + 1
                   ? "text-[#ffff00]"
                   : "text-white"
               }`}
diff --git a/src/components/views/HomeView.tsx b/src/components/views/HomeView.tsx
index 5139024..a919e44 100644
--- a/src/components/views/HomeView.tsx
+++ b/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')"
diff --git a/src/components/views/SettingsView.tsx b/src/components/views/SettingsView.tsx
index a9fd860..b46e02d 100644
--- a/src/components/views/SettingsView.tsx
+++ b/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", "") ||
-        "Unknown";
+        fullPath
+          .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>
diff --git a/src/css/App.css b/src/css/App.css
index c60b78b..56d3c31 100644
--- a/src/css/App.css
+++ b/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;
-  height: 44px;
+  width: 20px;
+  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 {