FIX: Drag drop, ui/ux

UPDATE: Backgroud setting, Remake ui/ux
UPDATE: System tray
2025-10-20 17:20:16 +07:00 · 2025-10-19 23:37:04 +07:00 · 2025-10-13 09:09:55 +07:00
39 changed files with 485 additions and 103 deletions
--- a/5
+++ b/5
@@ -22,6 +22,11 @@ build:
 	wails3 build
 	@echo Done!

+generate:
+	@echo Generating bindings...
+	wails3 generate bindings -ts
+	@echo Done!
+
 release:
 	@echo Building release application...
 	wails3 package
--- a/build/windows/wails.exe.manifest
+++ b/build/windows/wails.exe.manifest
@@ -15,7 +15,7 @@
    <trustInfo xmlns="urn:schemas-microsoft-com:asm.v3">
        <security>
            <requestedPrivileges>
-                <requestedExecutionLevel level="asInvoker" uiAccess="false"/>
+                <requestedExecutionLevel level="requireAdministrator" uiAccess="false"/>
            </requestedPrivileges>
        </security>
    </trustInfo>
--- a/frontend/bindings/firefly-launcher/internal/app-service/appservice.js
+++ b/frontend/bindings/firefly-launcher/internal/app-service/appservice.js
@@ -28,9 +28,30 @@ export function GetCurrentLauncherVersion() {
    return $Call.ByID(3575133982);
 }

+/**
+ * @returns {$CancellablePromise<[boolean, string]>}
+ */
+export function HideApp() {
+    return $Call.ByID(88003266);
+}
+
+/**
+ * @returns {$CancellablePromise<[boolean, string]>}
+ */
+export function MaximizeApp() {
+    return $Call.ByID(1257306588);
+}
+
 /**
 * @returns {$CancellablePromise<[boolean, string]>}
 */
 export function MinimizeApp() {
    return $Call.ByID(3434614194);
 }
+
+/**
+ * @returns {$CancellablePromise<[boolean, string]>}
+ */
+export function RestoreApp() {
+    return $Call.ByID(3115625834);
+}
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="dracula">

 <head>
    <meta charset="UTF-8" />
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,6 +16,7 @@
        "path-browserify": "^1.0.1",
        "react": "^19.1.1",
        "react-dom": "^19.1.1",
+        "react-easy-crop": "^5.5.3",
        "react-toastify": "^11.0.5",
        "tailwindcss": "^4.1.14",
        "zustand": "^5.0.8"
@@ -3783,6 +3784,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==",
+      "license": "BSD-3-Clause"
+    },
    "node_modules/optionator": {
      "version": "0.9.4",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -4000,6 +4007,20 @@
        "react": "^19.2.0"
      }
    },
+    "node_modules/react-easy-crop": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.5.3.tgz",
+      "integrity": "sha512-iKwFTnAsq+IVuyF6N0Q3zjRx9DG1NMySkwWxVfM/xAOeHYH1vhvM+V2kFiq5HOIQGWouITjfltCx54mbDpMpmA==",
+      "license": "MIT",
+      "dependencies": {
+        "normalize-wheel": "^1.0.1",
+        "tslib": "^2.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.0",
+        "react-dom": ">=16.4.0"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
    "path-browserify": "^1.0.1",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
+    "react-easy-crop": "^5.5.3",
    "react-toastify": "^11.0.5",
    "tailwindcss": "^4.1.14",
    "zustand": "^5.0.8"
--- a/frontend/public/bg-1.jpeg
+++ b/frontend/public/bg-1.jpeg
--- a/frontend/public/bg-10.jpg
+++ b/frontend/public/bg-10.jpg
--- a/frontend/public/bg-11.jpeg
+++ b/frontend/public/bg-11.jpeg
--- a/frontend/public/bg-12.jpg
+++ b/frontend/public/bg-12.jpg
--- a/frontend/public/bg-13.jpg
+++ b/frontend/public/bg-13.jpg
--- a/frontend/public/bg-16.jpg
+++ b/frontend/public/bg-16.jpg
--- a/frontend/public/bg-2.png
+++ b/frontend/public/bg-2.png
--- a/frontend/public/bg-3.png
+++ b/frontend/public/bg-3.png
--- a/frontend/public/bg-5.jpeg
+++ b/frontend/public/bg-5.jpeg
--- a/frontend/public/bg-6.png
+++ b/frontend/public/bg-6.png
--- a/frontend/public/bg-7.jpeg
+++ b/frontend/public/bg-7.jpeg
--- a/frontend/public/bg-8.png
+++ b/frontend/public/bg-8.png
--- a/frontend/public/bg-9.jpeg
+++ b/frontend/public/bg-9.jpeg
--- a/frontend/public/bg.jpg
+++ b/frontend/public/bg.jpg
--- a/frontend/src/components/backgroudModal/index.tsx
+++ b/frontend/src/components/backgroudModal/index.tsx
@@ -0,0 +1,180 @@
+'use client'
+
+import { useState, useRef } from 'react'
+import { X, Image as ImageIcon, Plus, Upload, Check } from 'lucide-react'
+import useSettingStore from '@/stores/settingStore'
+import Cropper from 'react-easy-crop'
+import getCroppedImg from '@/utils/cropImage' 
+
+const initialImages = {
+  "bg-1": "bg-1.jpeg",
+  "bg-2": "bg-2.png",
+  "bg-3": "bg-3.png",
+  "bg-6": "bg-6.png",
+  "bg-7": "bg-7.jpeg",
+  "bg-8": "bg-8.png",
+  "bg-9": "bg-9.jpeg",
+  "bg-10": "bg-10.jpg",
+  "bg-11": "bg-11.jpeg",
+  "bg-12": "bg-12.jpg",
+  "bg-13": "bg-13.jpg",
+  "bg-16": "bg-16.jpg",
+}
+
+export const BackgroundSelector = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [newUrl, setNewUrl] = useState('')
+  const [croppingImage, setCroppingImage] = useState<string | null>(null)
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(1)
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<any>(null)
+  const { background, setBackground, extraBackgrounds, setExtraBackgrounds } = useSettingStore()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleSelect = (img: string) => {
+    setIsOpen(false)
+    setBackground(img)
+  }
+
+  const handleAddUrl = () => {
+    if (!newUrl.trim()) return setCroppingImage(newUrl)
+    setNewUrl('')
+  }
+
+  const handleRemoveExtra = (url: string) => {
+    setExtraBackgrounds(extraBackgrounds.filter(bg => bg !== url))
+  }
+
+  const handleUploadFile = (file: File) => {
+    const reader = new FileReader()
+    reader.onload = () => setCroppingImage(reader.result as string)
+    reader.readAsDataURL(file)
+  }
+
+  const handleCropComplete = async () => {
+    if (!croppingImage || !croppedAreaPixels) return
+    const croppedBase64 = await getCroppedImg(croppingImage, croppedAreaPixels)
+    setExtraBackgrounds([croppedBase64, ...extraBackgrounds])
+    setCroppingImage(null)
+  }
+
+  const allBackgrounds = [...extraBackgrounds, ...Object.values(initialImages)]
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <div className="tooltip tooltip-right" data-tip="Select Background">
+        <button
+          className="group btn btn-primary btn-circle flex items-center justify-center shadow-md transition-all duration-300 hover:scale-110 hover:shadow-lg hover:bg-primary/80"
+          onClick={() => setIsOpen(true)}
+        >
+          <ImageIcon size={22} className="text-white transition-all duration-300 group-hover:rotate-6 group-hover:scale-110 group-hover:text-yellow-300" />
+        </button>
+      </div>
+
+      {isOpen && (
+        <div className="fixed inset-0 z-40 flex items-center justify-center bg-base-200/60 pt-10">
+          <div className="bg-base-200 text-white rounded-xl shadow-xl p-6 w-[90%] max-w-2xl relative">
+            <button className="btn btn-ghost btn-circle absolute top-3 right-3" onClick={() => setIsOpen(false)}>
+              <X size={20} />
+            </button>
+
+            <h2 className="text-lg font-semibold mb-4">Choose Background</h2>
+
+            {/* Add via URL */}
+            <div className="flex gap-2 mb-4">
+              <input
+                type="text"
+                placeholder="Paste image URL (https://...)"
+                className="input input-bordered w-full text-info"
+                value={newUrl}
+                onChange={(e) => setNewUrl(e.target.value)}
+              />
+              <button className="btn btn-success flex items-center gap-1" onClick={handleAddUrl}>
+                <Plus size={16} /> Add
+              </button>
+            </div>
+
+            {/* Upload from computer */}
+            <div className="flex mb-4">
+              <button
+                className="btn btn-warning flex items-center gap-1"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                <Upload size={16} /> Upload from computer
+              </button>
+              <input
+                type="file"
+                accept="image/*"
+                className="hidden"
+                ref={fileInputRef}
+                onChange={(e) => {
+                  const file = e.target.files?.[0]
+                  if (file) handleUploadFile(file)
+                  e.target.value = ''
+                }}
+              />
+            </div>
+
+            {/* Crop Modal */}
+            {croppingImage && (
+              <div className="fixed inset-0 z-60 flex flex-col items-center justify-center bg-black/70 p-4">
+                <div className="relative w-full max-w-3xl h-[400px] bg-gray-800 rounded-lg">
+                  <Cropper
+                    image={croppingImage}
+                    crop={crop}
+                    zoom={zoom}
+                    aspect={16 / 9}
+                    onCropChange={setCrop}
+                    onZoomChange={setZoom}
+                    onCropComplete={(_, croppedAreaPixels) => setCroppedAreaPixels(croppedAreaPixels)}
+                  />
+                  <button
+                    className="absolute bottom-4 left-1/2 -translate-x-1/2 btn btn-success"
+                    onClick={handleCropComplete}
+                  >
+                       <Check size={20} /> Done
+                  </button>
+                  <button
+                    className="absolute top-2 right-2 btn btn-ghost btn-circle"
+                    onClick={() => setCroppingImage(null)}
+                  >
+                    <X size={20} />
+                  </button>
+                </div>
+              </div>
+            )}
+
+            <div className="grid grid-cols-3 gap-4 max-h-[60vh] overflow-y-auto">
+              {allBackgrounds.map((value, i) => {
+                const isExtra = i < extraBackgrounds.length
+                return (
+                  <div
+                    key={i}
+                    className={`relative rounded-lg overflow-hidden cursor-pointer border-2 transition-all duration-200 ${
+                      value === background ? 'border-blue-500' : 'border-transparent hover:border-gray-500'
+                    }`}
+                    onClick={() => handleSelect(value)}
+                  >
+                    <img src={value} alt={`bg-${i}`} loading="lazy" className="w-full h-28 object-cover" />
+                    {isExtra && (
+                      <button
+                        className="absolute top-1 right-1 bg-black/50 hover:bg-black/70 text-white rounded-full p-1"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleRemoveExtra(value)
+                        }}
+                      >
+                        <X size={14} />
+                      </button>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
--- a/frontend/src/components/closeModal/index.tsx
+++ b/frontend/src/components/closeModal/index.tsx
@@ -53,7 +53,7 @@ export default function CloseModal({
                        className="btn btn-warning"
                        onClick={async () => {
                            onClose()
-                            const [success, message] = await AppService.MinimizeApp()
+                            const [success, message] = await AppService.HideApp()
                            if (!success) toast.error(message)
                            if (!closingOption.isAsk) {
                                setClosingOption({ isMinimize: true, isAsk: false })
--- a/frontend/src/components/header/index.tsx
+++ b/frontend/src/components/header/index.tsx
@@ -1,12 +1,31 @@
 import { Link } from "@tanstack/react-router";
-import ThemeController from "../themeController";
 import useModalStore from "@/stores/modalStore";
-import { Settings2 } from "lucide-react";
+import { Blend, BookOpen, Diff, Home, Info, Languages, Minus, Puzzle, Settings, TrendingUpDown, Wrench, X } from "lucide-react";
+import { AppService } from "@bindings/firefly-launcher/internal/app-service";

 export default function Header() {
    const { setIsOpenSettingModal } = useModalStore()
+
+    const controlButtons = [
+        {
+            icon: <Settings className="w-5 h-5" />,
+            action: () => setIsOpenSettingModal(true),
+            tip: "Settings",
+        },
+        {
+            icon: <Minus className="w-5 h-5" />,
+            action: () => AppService.MinimizeApp(),
+            tip: "Minimize",
+        },
+        {
+            icon: <X className="w-5 h-5" />,
+            action: () => AppService.CloseApp(),
+            tip: "Close",
+        },
+    ]
+
    return (
-        <div className="navbar bg-base-100 shadow-sm sticky top-0 z-50 px-3">
+        <div className="navbar sticky top-0 z-50 px-3" style={{ '--wails-draggable': 'drag' } as any}>
            <div className="navbar-start">
                <div className="dropdown">
                    <div tabIndex={0} role="button" className="btn btn-ghost md:hidden">
@@ -14,7 +33,7 @@ export default function Header() {
                    </div>
                    <ul
                        tabIndex={0}
-                        className="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
+                        className="menu menu-sm dropdown-content bg-black/50 backdrop-blur-md rounded-box z-1 mt-3 w-52 p-2 shadow">
                        <li><Link to="/">Home</Link></li>

                        <li>
@@ -35,52 +54,110 @@ export default function Header() {
                        <li><Link to="/about">About</Link></li>
                    </ul>
                </div>
-                <Link to="/" className="grid grid-cols-1 items-start text-left gap-0 hover:scale-105 px-2">
+                <Link to="/" className="grid grid-cols-1 items-start text-left gap-0">
                    <div className="flex items-center justify-center">
                        <img src="/appicon.png" alt="Logo" className='w-13 h-13 rounded-lg mx-2' />
                        <div className="flex flex-col justify-center items-start">
                            <h1 className="text-xl font-bold">
-                                <span className="text-emerald-500">Firefly </span>
-                                <span className="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-orange-500 to-red-500">
+                                <span className="text-emerald-500"
+                                    style={{
+                                        textShadow: '0 1px 2px rgba(255, 255, 255, 0.2)',
+                                    }}
+                                >Firefly </span>
+                                <span className="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-orange-500 to-red-500"
+                                    style={{
+                                        textShadow: '0 1px 2px rgba(255, 255, 255, 0.2)',
+                                    }}
+                                >
                                    Launcher
                                </span>
                            </h1>
-                            <p className="text-sm text-gray-500">By Kain</p>
+                            <p
+                                className="text-white text-sm"
+                                style={{
+                                    textShadow: '0 1px 2px rgba(0, 0, 0, 0.8)',
+                                }}
+                            >
+                                By Kain
+                            </p>
                        </div>
                    </div>
                </Link>
            </div>
-            <div className="navbar-center hidden md:flex">
-                <ul className="menu menu-horizontal px-1 gap-4">
-                    <li><Link to="/">Home</Link></li>
+            <div className="navbar-center hidden md:flex bg-black/40 backdrop-blur-sm rounded-lg shadow-lg">
+                <ul className="menu menu-horizontal px-1 gap-4 text-white">
+                    <li>
+                        <Link to="/" className="flex items-center gap-2 hover:text-cyan-300 transition-colors">
+                            <Home size={18} /> Home
+                        </Link>
+                    </li>
                    <li>
                        <details>
-                            <summary>Tools</summary>
-                            <ul className="p-2">
-                                <li><Link to="/language">Language</Link></li>
-                                <li><Link to="/diff">Diff</Link></li>
+                            <summary className="flex items-center gap-2 cursor-pointer hover:text-cyan-300 transition-colors">
+                                <Wrench size={18} /> Tools
+                            </summary>
+                            <ul className="p-2 bg-black/75 text-white rounded-lg">
+                                <li>
+                                    <Link to="/language" className="flex items-center gap-2 hover:text-cyan-300">
+                                        <Languages size={18} /> Language
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link to="/diff" className="flex items-center gap-2 hover:text-cyan-300">
+                                        <Diff size={18} /> Client update
+                                    </Link>
+                                </li>
                            </ul>
                        </details>
                    </li>
                    <li>
                        <details>
-                            <summary>Plugins</summary>
-                            <ul className="p-2">
-                                <li><Link to="/analysis">Analysis (Veritas)</Link></li>
-                                <li><Link to="/srtools">Firefly Tools</Link></li>
+                            <summary className="flex items-center gap-2 cursor-pointer hover:text-cyan-300 transition-colors">
+                                <Puzzle size={18} /> Plugins
+                            </summary>
+                            <ul className="p-2 bg-black/75 text-white rounded-lg">
+                                <li>
+                                    <Link to="/analysis" className="flex items-center gap-2 hover:text-cyan-300">
+                                        <TrendingUpDown size={18} /> Analysis (Veritas)
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link to="/srtools" className="flex items-center gap-2 hover:text-cyan-300">
+                                        <Blend size={18} /> Firefly Tools
+                                    </Link>
+                                </li>
                            </ul>
                        </details>
                    </li>
-                    <li><Link to="/howto">How to?</Link></li>
-                    <li><Link to="/about">About</Link></li>
+                    <li>
+                        <Link to="/howto" className="flex items-center gap-2 hover:text-cyan-300 transition-colors">
+                            <BookOpen size={18} /> How to?
+                        </Link>
+                    </li>
+                    <li>
+                        <Link to="/about" className="flex items-center gap-2 hover:text-cyan-300 transition-colors">
+                            <Info size={18} /> About
+                        </Link>
+                    </li>
                </ul>
            </div>
-            <div className="navbar-end flex gap-2">
-                <ThemeController />
-                <button className="btn btn-ghost btn-circle" onClick={() => setIsOpenSettingModal(true)}>
-                    <Settings2 className="w-5 h-5" />
+
+            <div className="navbar-end flex gap-2 z-52">
+                <div className="flex items-center gap-2 bg-black/40 backdrop-blur-sm rounded-lg">
+                    {controlButtons.map((btn, i) => (
+                        <div key={i} className="tooltip tooltip-bottom" data-tip={btn.tip}>
+                            <button
+                                onClick={btn.action}
+                                className="btn btn-ghost btn-circle bg-transparent border-none flex items-center justify-center"
+                            >
+                                <div className="hover:text-cyan-300 transition-colors">
+                                    {btn.icon}
+                                </div>
                            </button>
                        </div>
+                    ))}
+                </div>
+            </div>
        </div>
    )
 }
--- a/frontend/src/components/settingModal/index.tsx
+++ b/frontend/src/components/settingModal/index.tsx
@@ -72,7 +72,6 @@ export default function SettingModal({
                                className="checkbox checkbox-primary w-5 h-5 mt-1"
                                checked={!closingOption.isAsk}
                                onChange={(e) => {
-                                    console.log(!e.target.checked)
                                    setClosingOption({
                                        isMinimize: closingOption.isMinimize,
                                        isAsk: !e.target.checked
@@ -83,7 +82,7 @@ export default function SettingModal({
                                <span className="text-base font-medium text-info">
                                    Set do not ask again
                                </span>
-                                <span className="text-sm text-warning">
+                                <span className="text-sm text-accent">
                                    Next time you close the app, it will automatically{" "}
                                    {closingOption.isMinimize ? "minimize to system tray" : "quit the app"}{" "}
                                    without asking.
--- a/frontend/src/components/themeController/index.tsx
+++ b/frontend/src/components/themeController/index.tsx
@@ -1,30 +0,0 @@
-import { useEffect, useState } from "react";
-
-export default function ThemeController() {
-    const [theme, setTheme] = useState(localStorage.getItem("theme") ?? "night");
-
-    const handleToggle = (e: any) => {
-        if (e.target.checked) {
-            setTheme("cupcake");
-        } else {
-            setTheme("night");
-        }
-    };
-
-    useEffect(() => {
-        localStorage.setItem('theme', theme!)
-        const localTheme = localStorage.getItem('theme')
-        document.querySelector('html')?.setAttribute('data-theme', localTheme!)
-    }, [theme]);
-
-
-    return (
-        <label className="toggle text-base-content">
-            <input type="checkbox" onChange={handleToggle} className="theme-controller" />
-
-            <svg aria-label="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></g></svg>
-            <svg aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></g></svg>
-
-        </label>
-    )
-}
--- a/frontend/src/components/updateModal/index.tsx
+++ b/frontend/src/components/updateModal/index.tsx
@@ -35,7 +35,7 @@ export default function UpdateModal({ isOpen, title, message, buttons, onClose }

        <div className="px-6 pb-6">
          <div className="mb-6">
-            <p className="text-warning text-lg">{message}</p>
+            <p className="text-accent text-lg">{message}</p>
          </div>

          <div className="flex justify-end gap-3">
--- a/frontend/src/pages/about/index.tsx
+++ b/frontend/src/pages/about/index.tsx
@@ -14,7 +14,7 @@ export default function AboutPage() {
              I created a lightweight and modern <span className="font-semibold text-success">Game Launcher</span> to help users easily launch and manage their games with better performance and simplicity.
            </p>
            <p className="text-lg leading-relaxed">
-              The launcher is built using <span className="font-mono text-info">Go + Wails3</span>, with a clean and responsive interface styled with <span className="text-warning">Tailwind CSS</span> and <span className="text-warning">DaisyUI</span>.
+              The launcher is built using <span className="font-mono text-info">Go + Wails3</span>, with a clean and responsive interface styled with <span className="text-accent">Tailwind CSS</span> and <span className="text-accent">DaisyUI</span>.
            </p>
            <p className="text-lg leading-relaxed">
              My goal is to make tools that are fast, efficient, and enjoyable to use — and this launcher is just the beginning.
--- a/frontend/src/pages/analysis/index.tsx
+++ b/frontend/src/pages/analysis/index.tsx
@@ -64,7 +64,7 @@ export default function AnalysisPage() {
                                </div>
                                <a
                                    href="https://sranalysis.kain.id.vn/"
-                                    className="link link-warning font-mono text-sm break-all"
+                                    className="link link-accent font-mono text-sm break-all"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
@@ -79,7 +79,7 @@ export default function AnalysisPage() {
                                </div>
                                <a
                                    href="https://firefly-sranalysis.vercel.app/"
-                                    className="link link-warning font-mono text-sm break-all"
+                                    className="link link-accent font-mono text-sm break-all"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
--- a/frontend/src/pages/diff/index.tsx
+++ b/frontend/src/pages/diff/index.tsx
@@ -309,7 +309,7 @@ export default function DiffPage() {
                                    <div className="w-full p-4">
                                        <div className="space-y-3">
                                            <div className="flex justify-center items-center text-sm text-white/80">
-                                                <span className="font-bold text-lg text-warning">{stageType}:</span>
+                                                <span className="font-bold text-lg text-accent">{stageType}:</span>
                                                <div className="flex items-center gap-4 ml-2">
                                                {stageType !== 'Cut Data' && <span className="text-white font-bold">{progressUpdate.toFixed(0)} / {maxProgressUpdate.toFixed(0)}</span>}
                                                {stageType === 'Cut Data' && <span className="text-white font-bold truncate max-w-full overflow-hidden whitespace-nowrap">{messageUpdate}</span>}
--- a/frontend/src/pages/fireflytools/index.tsx
+++ b/frontend/src/pages/fireflytools/index.tsx
@@ -19,7 +19,7 @@ export default function FireflyToolsPage() {
                                This site is a another version of {" "}
                                <span className="font-semibold text-success">Firefly Tools {" "}</span>
                                developed by {" "}
-                                <span className="font-semibold text-warning">Me {"(Kain)"}</span>
+                                <span className="font-semibold text-accent">Me {"(Kain)"}</span>
                            </p>
                        </div>
                        <div className="grid md:grid-cols-2 gap-4">
@@ -30,7 +30,7 @@ export default function FireflyToolsPage() {
                                </div>
                                <a
                                    href="https://srtools.kain.id.vn/"
-                                    className="link link-warning font-mono text-sm break-all"
+                                    className="link link-accent font-mono text-sm break-all"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
@@ -45,7 +45,7 @@ export default function FireflyToolsPage() {
                                </div>
                                <a
                                    href="https://firefly-srtools.vercel.app/"
-                                    className="link link-warning font-mono text-sm break-all"
+                                    className="link link-accent font-mono text-sm break-all"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
@@ -55,14 +55,14 @@ export default function FireflyToolsPage() {
                        </div>
                        <div className="flex items-start gap-3">
                            <div className="text-blue-600 text-lg">👨‍💻</div>
-                            <p>The original tool was created by a third-party developer named <span className="font-semibold text-warning">Amazing</span>. This version is directly based on that work, without modification to core logic.</p>
+                            <p>The original tool was created by a third-party developer named <span className="font-semibold text-accent">Amazing</span>. This version is directly based on that work, without modification to core logic.</p>
                        </div>
                        <div className="flex items-start gap-3">
                            <div className="text-blue-600 text-lg">🔗</div>
                            <p>There is also a more modern version by the same author available at{" "}
                                <a
                                    href="https://srtools.neonteam.dev/"
-                                    className="link link-warning"
+                                    className="link link-accent"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
@@ -71,7 +71,7 @@ export default function FireflyToolsPage() {
                                {" "}and the original version at{" "}
                                <a
                                    href="https://srtools.pages.dev/"
-                                    className="link link-warning"
+                                    className="link link-accent"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
@@ -95,14 +95,14 @@ export default function FireflyToolsPage() {
                        </div>
                        <div className="flex items-start gap-3">
                            <div className="text-green-600 text-lg">🔌</div>
-                            <p>Instantly apply setups to <span className="font-semibold text-warning">Firefly GO Server</span> using <span className="font-semibold">Connect PS</span> — no manual file uploads required.</p>
+                            <p>Instantly apply setups to <span className="font-semibold text-accent">Firefly GO Server</span> using <span className="font-semibold">Connect PS</span> — no manual file uploads required.</p>
                        </div>
                        <div className="flex items-start gap-3">
                            <div className="text-green-600 text-2xl">✨</div>
                            <div>
                                <h4 className="font-semibold text-green-800 text-lg">Extra Settings</h4>
                                <p className="text-green-700 mt-1">
-                                    Enhance your <span className="font-semibold text-warning">Firefly GO Server</span> experience with extra features:
+                                    Enhance your <span className="font-semibold text-accent">Firefly GO Server</span> experience with extra features:
                                </p>
                                <ul className="list-disc list-inside mt-2 space-y-1 text-green-700">
                                    <li>🎭 <span className="font-medium">Hidden Game UI</span> — remove the entire game interface.</li>
--- a/frontend/src/pages/howto/index.tsx
+++ b/frontend/src/pages/howto/index.tsx
@@ -56,7 +56,7 @@ export default function HowToPage() {

                    <p className="text-blue-700 mb-4">
                        Below are in-game chat commands you can use. Some commands require you to enable{" "}
-                        <span className="font-semibold text-warning">Theorycraft Mode</span>.
+                        <span className="font-semibold text-accent">Theorycraft Mode</span>.
                    </p>

                    {/* Theorycraft Mode Warning */}
--- a/frontend/src/pages/language/index.tsx
+++ b/frontend/src/pages/language/index.tsx
@@ -208,10 +208,10 @@ export default function LanguagePage() {

                                <div className="bg-warning/5 rounded-lg p-2 border border-warning/30">
                                    <div className="flex items-center gap-2 mb-1">
-                                        <Mic size={20} className="text-warning" />
-                                        <span className="font-bold text-warning">Voice Language</span>
+                                        <Mic size={20} className="text-accent" />
+                                        <span className="font-bold text-accent">Voice Language</span>
                                    </div>
-                                    <p className="text-2xl font-bold text-warning">
+                                    <p className="text-2xl font-bold text-accent">
                                        {getLanguageLabel(voiceLang)}
                                    </p>
                                </div>
@@ -250,7 +250,7 @@ export default function LanguagePage() {

                            {/* Voice Language */}
                            <div className="space-y-3">
-                                <label className="flex text-sm font-medium text-warning items-center gap-2">
+                                <label className="flex text-sm font-medium text-accent items-center gap-2">
                                    <Mic size={16} />
                                    Voice Language
                                </label>
--- a/frontend/src/pages/launcher/index.tsx
+++ b/frontend/src/pages/launcher/index.tsx
@@ -11,6 +11,9 @@ import { motion } from 'motion/react';
 import { Link } from '@tanstack/react-router';
 import { CheckUpdateLauncher, CheckUpdateProxy, CheckUpdateServer, sleep, UpdateLauncher, UpdateProxy, UpdateServer } from '@/helper';
 import UpdateModal from '@/components/updateModal';
+import { BackgroundSelector } from '@/components/backgroudModal';
+
+

 export default function LauncherPage() {
    const { gamePath,
@@ -21,6 +24,7 @@ export default function LauncherPage() {
        gameDir,
        serverVersion,
        proxyVersion,
+        background
    } = useSettingStore()

    const {
@@ -265,24 +269,24 @@ export default function LauncherPage() {

    return (
        <div className="relative min-h-fit overflow-hidden">
-            <div
-                className="fixed inset-0 z-0 w-full h-full"
-                style={{
-                    backgroundImage: "url('/bg.jpg')",
-                    backgroundSize: "cover",
-                    backgroundPosition: "center",
-                    backgroundRepeat: "no-repeat"
+            <img
+                src={background}
+                alt="background"
+                className="fixed inset-0 w-full h-full object-cover z-0"
+                onError={(e) => {
+                    const target = e.currentTarget as HTMLImageElement
+                    target.src = "bg-12.jpg"
                }}
-            ></div>
+            />

            {/* Header */}
-            <header className="hidden sm:flex fixed z-10 items-center justify-between p-6">
-                <div className="text-2xl font-bold text-white">Firefly GO</div>
+            <header className="hidden sm:flex fixed z-10 items-center justify-between py-6 px-4 ">
+                <div className="text-2xl font-bold text-white bg-gray-500/5 rounded-full p-1">Firefly GO</div>
            </header>

-            <div className="hidden sm:flex fixed top-1/4 left-4 z-10 flex-col space-y-3 bg-black/30 backdrop-blur-md rounded-xl p-3 shadow-lg">
+            <div className="hidden sm:flex fixed top-1/4 right-4 z-10 flex-col space-y-3 bg-white/5 rounded-xl p-3 shadow-lg">
                {widgetLinks.map((link, idx) => (
-                    <div key={idx} className="tooltip tooltip-right" data-tip={link.tooltip}>
+                    <div key={idx} className="tooltip tooltip-left" data-tip={link.tooltip}>
                        <a
                            className={`btn btn-circle ${link.btnClass}`}
                            target="_blank"
@@ -297,7 +301,7 @@ export default function LauncherPage() {
                    </div>
                ))}

-                <div className="tooltip tooltip-right" data-tip="How to use all tools & commands">
+                <div className="tooltip tooltip-left" data-tip="How to use all tools & commands">
                    <Link
                        to="/howto"
                        className="btn btn-warning btn-circle"
@@ -307,6 +311,9 @@ export default function LauncherPage() {
                </div>
            </div>

+            <div className="hidden sm:flex fixed top-1/2 left-4 z-10 ">
+                <BackgroundSelector />
+            </div>

            {/* Bottom Panel */}
            {serverReady && proxyReady && !isDownloading && (
@@ -461,10 +468,50 @@ export default function LauncherPage() {

            {/* Version Info */}
            {serverReady && proxyReady && !isDownloading && (
-                <div className="hidden md:block fixed bottom-4 left-4 z-10 text-sm font-bold bg-black/20 backdrop-blur-sm rounded-lg p-2 shadow">
-                    <p className="text-primary">Version server: {serverVersion}</p>
-                    <p className="mt-2 text-secondary">Version proxy: {proxyVersion}</p>
-                    <p className="mt-2 text-success">Version launcher: {launcherVersion}</p>
+                <div className="hidden md:block fixed bottom-4 left-4 z-10 text-sm font-bold bg-white/5 rounded-lg p-2 shadow">
+                    <p className="text-pink-600 "
+                        style={{
+                            textShadow: `
+                                0.5px 0 rgba(255, 255, 255, 0.5),
+                                -0.5px 0 rgba(255, 255, 255, 0.5),
+                                0 0.5px rgba(255, 255, 255, 0.5),
+                                0 -0.5px rgba(255, 255, 255, 0.5),
+                                0.5px 0.5px rgba(255, 255, 255, 0.5),
+                                -0.5px -0.5px rgba(255, 255, 255, 0.5),
+                                0.5px -0.5px rgba(255, 255, 255, 0.5),
+                                -0.5px 0.5px rgba(255, 255, 255, 0.5)
+                            `,
+                        }}
+                    >Version server: {serverVersion}</p>
+                    <p
+                        className="mt-2 text-purple-600"
+                        style={{
+                            textShadow: `
+                                0.5px 0 rgba(255, 255, 255, 0.5),
+                                -0.5px 0 rgba(255, 255, 255, 0.5),
+                                0 0.5px rgba(255, 255, 255, 0.5),
+                                0 -0.5px rgba(255, 255, 255, 0.5),
+                                0.5px 0.5px rgba(255, 255, 255, 0.5),
+                                -0.5px -0.5px rgba(255, 255, 255, 0.5),
+                                0.5px -0.5px rgba(255, 255, 255, 0.5),
+                                -0.5px 0.5px rgba(255, 255, 255, 0.5)
+                            `,
+                        }}
+                    >Version proxy: {proxyVersion}</p>
+                    <p className="mt-2 text-cyan-600 "
+                        style={{
+                            textShadow: `
+                                0.5px 0 rgba(255, 255, 255, 0.5),
+                                -0.5px 0 rgba(255, 255, 255, 0.5),
+                                0 0.5px rgba(255, 255, 255, 0.5),
+                                0 -0.5px rgba(255, 255, 255, 0.5),
+                                0.5px 0.5px rgba(255, 255, 255, 0.5),
+                                -0.5px -0.5px rgba(255, 255, 255, 0.5),
+                                0.5px -0.5px rgba(255, 255, 255, 0.5),
+                                -0.5px 0.5px rgba(255, 255, 255, 0.5)
+                            `,
+                        }}
+                    >Version launcher: {launcherVersion}</p>
                </div>
            )}

--- a/frontend/src/stores/settingStore.ts
+++ b/frontend/src/stores/settingStore.ts
@@ -14,6 +14,10 @@ interface SettingState {
        isMinimize: boolean;
        isAsk: boolean;
    }
+    background: string;
+    extraBackgrounds: string[];
+    setExtraBackgrounds: (newExtraBackgrounds: string[]) => void;
+    setBackground: (newBackground: string) => void;
    setClosingOption: (newClosingOption: { isMinimize: boolean; isAsk: boolean }) => void;
    setLocale: (newLocale: string) => void;
    setGamePath: (newGamePath: string) => void;
@@ -38,6 +42,10 @@ const useSettingStore = create<SettingState>()(
                isMinimize: false,
                isAsk: true,
            },
+            background: "bg-12.jpg",
+            extraBackgrounds: [],
+            setExtraBackgrounds: (newExtraBackgrounds: string[]) => set({ extraBackgrounds: newExtraBackgrounds }),
+            setBackground: (newBackground: string) => set({ background: newBackground }),
            setClosingOption: (newClosingOption: { isMinimize: boolean; isAsk: boolean }) => set({ closingOption: newClosingOption }),
            setLocale: (newLocale: string) => set({ locale: newLocale }),
            setGamePath: (newGamePath: string) => set({ gamePath: newGamePath }),
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -1,4 +1,4 @@
@import "tailwindcss";
@plugin "daisyui"{
-    themes: night --default, night --prefersdark, cupcake;
+    themes: dracula --default;
 }
--- a/frontend/src/utils/cropImage.ts
+++ b/frontend/src/utils/cropImage.ts
@@ -0,0 +1,25 @@
+
+export default function getCroppedImg(imageSrc: string, crop: any): Promise<string> {
+  const image = new Image()
+  image.src = imageSrc
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')!
+  canvas.width = crop.width
+  canvas.height = crop.height
+  return new Promise((resolve) => {
+    image.onload = () => {
+      ctx.drawImage(
+        image,
+        crop.x,
+        crop.y,
+        crop.width,
+        crop.height,
+        0,
+        0,
+        crop.width,
+        crop.height
+      )
+      resolve(canvas.toDataURL('image/jpeg'))
+    }
+  })
+}
--- a/internal/app-service/app.go
+++ b/internal/app-service/app.go
@@ -26,7 +26,7 @@ func (a *AppService) CloseApp() (bool, string) {
 	return true, ""
 }

-func (a *AppService) MinimizeApp() (bool, string) {
+func (a *AppService) HideApp() (bool, string) {
 	window := application.Get().Window.Current()
 	if window == nil {
 		return false, "not found window"
@@ -35,3 +35,29 @@ func (a *AppService) MinimizeApp() (bool, string) {
 	return true, ""
 }

+func (a *AppService) MinimizeApp() (bool, string) {
+	window := application.Get().Window.Current()
+	if window == nil {
+		return false, "not found window"
+	}
+	window.Minimise()
+	return true, ""
+}
+
+func (a *AppService) MaximizeApp() (bool, string) {
+	window := application.Get().Window.Current()
+	if window == nil {
+		return false, "not found window"
+	}
+	window.Maximise()
+	return true, ""
+}
+
+func (a *AppService) RestoreApp() (bool, string) {
+	window := application.Get().Window.Current()
+	if window == nil {
+		return false, "not found window"
+	}
+	window.Restore()
+	return true, ""
+}
--- a/main.go
+++ b/main.go
@@ -93,10 +93,12 @@ func main() {
 			TitleBar:                application.MacTitleBarHiddenInset,
 		},
 		BackgroundColour: application.NewRGB(27, 38, 54),
-		Width:            1200,
-		Height:           600,
+		Width:            1280,
+		Height:           720,
 		URL:              "/",
 		DevToolsEnabled:  true,
+		Frameless:        true,
+		DisableResize:    true,
 	})

 	iconBytes, _ := tools.ReadFile("assets/appicon.png")
--- a/pkg/constant/constant.go
+++ b/pkg/constant/constant.go
@@ -10,7 +10,7 @@ const ProxyZipFile = "64bit.zip"
 const LauncherFile = "firefly-launcher.exe"
 const TempUrl = "./temp"

-const CurrentLauncherVersion = "2.1.0"
+const CurrentLauncherVersion = "2.2.1"

 type ToolFile string
Author	SHA1	Message	Date
AzenKain	ca612797ee	FIX: Drag drop, ui/ux	2025-10-20 17:20:16 +07:00
AzenKain	787962c6d0	UPDATE: Backgroud setting, Remake ui/ux	2025-10-19 23:37:04 +07:00
AzenKain	09434fcc5b	UPDATE: System tray	2025-10-13 09:09:55 +07:00