Firefly-Shelter/Firefly_Launcher
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 24 Wiki Activity

UPDATE: Backgroud setting, Remake ui/ux

Browse Source
This commit is contained in:
Azen Kain
2025-10-19 23:37:04 +07:00
parent 09434fcc5b
commit 787962c6d0
38 changed files with 426 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
frontend/src/components/header/index.tsx
View File

@@ -1,12 +1,35 @@
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";
import { motion } from "motion/react";
export default function Header() {
const { setIsOpenSettingModal } = useModalStore()
const controlButtons = [
{
icon: <Settings className="w-5 h-5 text-white" />,
action: () => setIsOpenSettingModal(true),
tip: "Settings",
hover: { rotate: 20, color: "#ffffff" },
},
{
icon: <Minus className="w-5 h-5 text-white" />,
action: () => AppService.MinimizeApp(),
tip: "Minimize",
hover: { rotate: 20, color: "#ffffff" },
},
{
icon: <X className="w-5 h-5 text-white" />,
action: () => AppService.CloseApp(),
tip: "Close",
hover: {color: "#ffffff", rotate: -10 },
},
]
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">
<div className="navbar-start">
<div className="dropdown">
<div tabIndex={0} role="button" className="btn btn-ghost md:hidden">
@@ -14,7 +37,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>
@@ -50,36 +73,79 @@ export default function Header() {
</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" />
</button>
<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}>
<motion.button
whileHover={btn.hover}
transition={{ type: "spring"}}
onClick={btn.action}
className="btn btn-ghost btn-circle bg-transparent border-none flex items-center justify-center"
>
{btn.icon}
</motion.button>
</div>
))}
</div>
</div>
</div>
)