UPDATE: Add muti language

This commit is contained in:
2026-04-03 18:37:01 +07:00
parent 2b0c82bd7e
commit 45d345d7cb
24 changed files with 2451 additions and 430 deletions

View File

@@ -2,26 +2,42 @@ import { Link } from "@tanstack/react-router";
import useModalStore from "@/stores/modalStore";
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";
import LanguageSwitcher from "../languageSwitcher";
import { useTranslation } from "react-i18next";
import useSettingStore from "@/stores/settingStore";
export default function Header() {
const { setIsOpenSettingModal } = useModalStore()
const { setIsOpenSettingModal, setIsOpenCloseModal } = useModalStore()
const { closingOption } = useSettingStore()
const { t } = useTranslation()
const controlButtons = [
{
icon: <Settings className="w-5 h-5" />,
action: () => setIsOpenSettingModal(true),
tip: "Settings",
tip: t("header.settings"),
},
{
icon: <Minus className="w-5 h-5" />,
action: () => AppService.MinimizeApp(),
tip: "Minimize",
tip: t("header.minimize"),
},
{
icon: <X className="w-5 h-5" />,
action: () => AppService.CloseApp(),
tip: "Close",
action: () => {
if (closingOption.isAsk) {
setIsOpenCloseModal(true)
return
}
if (closingOption.isMinimize) {
AppService.HideApp()
return
}
AppService.CloseApp()
},
tip: t("header.close"),
},
]
return (
@@ -42,26 +58,26 @@ export default function Header() {
tabIndex={0}
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><Link to="/">{t("header.home")}</Link></li>
<li>
<a>Tools</a>
<a>{t("header.tools")}</a>
<ul className="p-2">
<li><Link to="/language">Language</Link></li>
<li><Link to="/diff">Diff</Link></li>
<li><Link to="/language">{t("header.language")}</Link></li>
<li><Link to="/diff">{t("header.client_update")}</Link></li>
</ul>
</li>
<li>
<a>Plugins</a>
<a>{t("header.plugins")}</a>
<ul className="p-2">
<li><Link to="/analysis">Analysis (Veritas)</Link></li>
<li><Link to="/srtools">SrTools</Link></li>
<li><Link to="/analysis">{t("header.analysis")}</Link></li>
<li><Link to="/srtools">{t("header.firefly_tools")}</Link></li>
</ul>
</li>
<li><Link to="/howto">How to?</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/howto">{t("header.how_to")}</Link></li>
<li><Link to="/about">{t("header.about")}</Link></li>
</ul>
</div>
@@ -71,11 +87,11 @@ export default function Header() {
<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="bg-clip-text text-transparent bg-linear-to-r from-emerald-400 via-orange-500 to-red-500">
Launcher
</span>
</h1>
<p className="text-white text-sm">By Firefly Shelter</p>
<p className="text-white text-sm">{t("header.by")}</p>
</div>
</div>
</Link>
@@ -89,24 +105,24 @@ export default function Header() {
<ul className="menu menu-horizontal px-1 gap-4 text-white">
<li>
<Link to="/" className="flex items-center gap-2 hover:text-cyan-300">
<Home size={18} /> Home
<Home size={18} /> {t("header.home")}
</Link>
</li>
<li>
<details>
<summary className="flex items-center gap-2 cursor-pointer hover:text-cyan-300">
<Wrench size={18} /> Tools
<summary className="flex items-center gap-2 cursor-pointer hover:text-cyan-300 w-full">
<Wrench size={18} /> {t("header.tools")}
</summary>
<ul className="p-2 bg-black/75 text-white rounded-lg">
<ul className="p-2 bg-black/75 text-white rounded-lg min-w-40 whitespace-nowrap">
<li>
<Link to="/language" className="flex items-center gap-2 hover:text-cyan-300">
<Languages size={18} /> Language
<Languages size={18} /> {t("header.language")}
</Link>
</li>
<li>
<Link to="/diff" className="flex items-center gap-2 hover:text-cyan-300">
<Diff size={18} /> Client update
<Diff size={18} /> {t("header.client_update")}
</Link>
</li>
</ul>
@@ -115,18 +131,18 @@ export default function Header() {
<li>
<details>
<summary className="flex items-center gap-2 cursor-pointer hover:text-cyan-300">
<Puzzle size={18} /> Plugins
<summary className="flex items-center gap-2 cursor-pointer hover:text-cyan-300 w-full">
<Puzzle size={18} /> {t("header.plugins")}
</summary>
<ul className="p-2 bg-black/75 text-white rounded-lg">
<ul className="p-2 bg-black/75 text-white rounded-lg min-w-40 whitespace-nowrap">
<li>
<Link to="/analysis" className="flex items-center gap-2 hover:text-cyan-300">
<TrendingUpDown size={18} /> Analysis (Veritas)
<TrendingUpDown size={18} /> {t("header.analysis")}
</Link>
</li>
<li>
<Link to="/srtools" className="flex items-center gap-2 hover:text-cyan-300">
<Blend size={18} /> Firefly Tools
<Blend size={18} /> {t("header.firefly_tools")}
</Link>
</li>
</ul>
@@ -135,13 +151,13 @@ export default function Header() {
<li>
<Link to="/howto" className="flex items-center gap-2 hover:text-cyan-300">
<BookOpen size={18} /> How to?
<BookOpen size={18} /> {t("header.how_to")}
</Link>
</li>
<li>
<Link to="/about" className="flex items-center gap-2 hover:text-cyan-300">
<Info size={18} /> About
<Info size={18} /> {t("header.about")}
</Link>
</li>
</ul>
@@ -150,9 +166,10 @@ export default function Header() {
{/* RIGHT */}
<div
className="navbar-end flex gap-2 z-52"
style={{ '--wails-draggable': 'no-drag' } as any}
>
<div className="flex items-center gap-2 bg-black/40 backdrop-blur-sm rounded-lg">
<div className="flex items-center gap-2 bg-black/40 backdrop-blur-sm rounded-lg" style={{ '--wails-draggable': 'no-drag' } as any}>
<LanguageSwitcher />
{controlButtons.map((btn, i) => (
<div key={i} className="tooltip tooltip-bottom" data-tip={btn.tip}>
<button
@@ -167,4 +184,4 @@ export default function Header() {
</div>
</div>
)
}
}