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

180
frontend/src/components/backgroudModal/index.tsx Normal file
View File

@@ -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>
)
}

2
frontend/src/components/closeModal/index.tsx
View File

@@ -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 })

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>
)

3
frontend/src/components/settingModal/index.tsx
View File

@@ -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.

30
frontend/src/components/themeController/index.tsx
View File

@@ -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>
)
}

2
frontend/src/components/updateModal/index.tsx
View File

@@ -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">