FelisMC/Felis
2
0 Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

style(panel): refine search and filter layout to align with header

Browse Source
This commit is contained in:
Lemon-miaow committed 2026-07-02 03:30:50 +08:00
1 parent a9dbc8bc61
commit fa7bab5ec1
1 file changed
+57 -53
Download Patch File Download Diff File Expand all files Collapse all files
panel/src/pages/MyServers.tsx
+57 -53
View File
@@ -46,65 +46,69 @@ export function MyServers() {
return ( return (
<> <>
<div className="flex items-center gap-3"> <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<Server className="h-6 w-6 text-primary" /> <div className="flex items-center gap-3">
<div> <Server className="h-6 w-6 text-primary" />
<h1 className="text-2xl font-semibold tracking-tight">{t("my_servers_title")}</h1> <div>
<p className="text-sm text-muted-foreground"> <h1 className="text-2xl font-semibold tracking-tight">{t("my_servers_title")}</h1>
{t("my_servers_subtitle")} <p className="text-sm text-muted-foreground">
</p> {t("my_servers_subtitle")}
</p>
</div>
</div> </div>
</div>
{servers.length > 0 && cfg && ( {servers.length > 0 && cfg && (
<div className="flex flex-col gap-3 sm:flex-row sm:items-center my-4"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center w-full md:w-auto">
<div className="relative flex-1 max-w-md"> <div className="relative w-full sm:w-64">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" /> <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
<Input <Input
placeholder={t("search_placeholder")} placeholder={t("search_placeholder")}
className="pl-9 pr-8" className="h-8 pl-8 pr-8 text-sm"
value={searchQuery} value={searchQuery}
onChange={(e) => { onChange={(e) => {
setSearchQuery(e.target.value); setSearchQuery(e.target.value);
setPage(1); setPage(1);
}} }}
/> autoComplete="off"
{searchQuery && ( spellCheck={false}
<button />
type="button" {searchQuery && (
onClick={() => { <button
setSearchQuery(""); type="button"
onClick={() => {
setSearchQuery("");
setPage(1);
}}
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
>
<X className="h-3.5 w-3.5" />
</button>
)}
</div>
<div className="w-full sm:w-36">
<Select
value={statusFilter}
onValueChange={(val) => {
setStatusFilter(val);
setPage(1); setPage(1);
}} }}
className="absolute right-2.5 top-2.5 text-muted-foreground hover:text-foreground"
> >
<X className="h-4 w-4" /> <SelectTrigger className="h-8 text-sm">
</button> <SelectValue placeholder={t("filter_status_all")} />
)} </SelectTrigger>
<SelectContent>
<SelectItem value="all">{t("filter_status_all")}</SelectItem>
<SelectItem value="Running">{t("phase_running")}</SelectItem>
<SelectItem value="Starting">{t("phase_starting")}</SelectItem>
<SelectItem value="Stopping">{t("phase_stopping")}</SelectItem>
<SelectItem value="Stopped">{t("phase_stopped")}</SelectItem>
<SelectItem value="Failed">{t("phase_failed")}</SelectItem>
</SelectContent>
</Select>
</div>
</div> </div>
<div className="w-[180px]"> )}
<Select </div>
value={statusFilter}
onValueChange={(val) => {
setStatusFilter(val);
setPage(1);
}}
>
<SelectTrigger className="w-full">
<SelectValue placeholder={t("filter_status_all")} />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">{t("filter_status_all")}</SelectItem>
<SelectItem value="Running">{t("phase_running")}</SelectItem>
<SelectItem value="Starting">{t("phase_starting")}</SelectItem>
<SelectItem value="Stopping">{t("phase_stopping")}</SelectItem>
<SelectItem value="Stopped">{t("phase_stopped")}</SelectItem>
<SelectItem value="Failed">{t("phase_failed")}</SelectItem>
</SelectContent>
</Select>
</div>
</div>
)}
{loading && !data ? ( {loading && !data ? (
<Loading /> <Loading />