(feat:background) Improve the coloring of the top bar

src/backend/stores/mihoyo.ts

@@ -10,6 +10,8 @@ import { fetch } from "@tauri-apps/api/http";
 import { exists } from "@tauri-apps/api/fs";
 import { convertFileSrc } from "@tauri-apps/api/tauri";
 
+import { prominent } from "color.js";
+
 import { LauncherResponse, StoreWrite, SupportedGames } from "@backend/types.ts";
 import { AppDataPath, LauncherUrls } from "@app/constants.ts";
 
@@ -85,24 +87,36 @@ export async function getBackgroundFile(hash: string): Promise<string> {
     return convertFileSrc(`${AppDataPath}/bg/${hash}.png`);
 }
 
+type BackgroundData = {
+    url: string;
+    colors: string[];
+}
+
 /**
  * React hook which returns the URL of the locally cached background image.
  */
-export function useBackground() {
+export function useBackground(): BackgroundData {
     const { selectedGame } = useSettings();
     const { backgroundHash, fetchLatestBackground } =
         selectedGame == SupportedGames.GenshinImpact ? useGenshinStore() : useStarRailStore();
     const [background, setBackground] = useState<string | null>(null);
+    const [colorPalette, setColorPalette] = useState<string[] | null>(null);
 
     useEffect(() => {
         (async () => {
             if (backgroundHash != "") {
-                setBackground(await getBackgroundFile(backgroundHash));
+                const filePath = await getBackgroundFile(backgroundHash);
+                setBackground(filePath);
+                setColorPalette(await prominent(filePath,
+                    { amount: 5, format: "hex" }) as string[]);
             } else {
                 fetchLatestBackground();
             }
         })();
     }, [backgroundHash, fetchLatestBackground]);
 
-    return background;
+    return {
+        url: background ?? "",
+        colors: colorPalette ?? []
+    };
 }

src/ui/App.tsx

@@ -16,10 +16,10 @@ function App() {
     return (
         <div class={"App"}
              style={{
-                 backgroundImage: `url(${background})`
+                 backgroundImage: `url(${background.url})`
              }}
         >
-            <TopBar />
+            <TopBar color={background.colors[2]} />
 
             <Router>
                 <Route path={PageRoutes.HOME} component={Launcher} />

src/ui/components/TopBar.tsx

@@ -1,8 +1,14 @@
 import "@css/components/TopBar.scss";
 
-function TopBar() {
+interface IProps {
+    color: string | null;
+}
+
+function TopBar(props: IProps) {
     return (
-        <div class={"TopBar"} data-tauri-drag-region>
+        <div class={"TopBar"} data-tauri-drag-region
+             style={{ backgroundColor: `${props.color}55` }}
+        >
             <div class={"flex flex-row gap-1 text-white"}>
                 <p>Cultivation</p>
                 <p>2.0.0</p>

src/ui/css/App.scss

@@ -13,7 +13,7 @@ body {
 }
 
 .App {
-    @apply w-full h-screen;
+    @apply w-full h-screen bg-no-repeat bg-contain;
 }
 
 p {

src/ui/css/components/TopBar.scss

@@ -1,6 +1,6 @@
 .TopBar {
     @apply flex flex-row justify-between items-center w-full;
-    @apply bg-gray-900 pl-4 pr-4;
+    @apply pl-4 pr-4 backdrop-blur-3xl;
 
     height: 40px;
 }