Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-09-19 09:40:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: simplify sorting UI by removing popover and integrating sort controls directly

Browse Source
This commit is contained in:
hamster1963
2026-06-01 15:07:55 +08:00
parent eac9d6a245
commit f323f4248b
1 changed files with 56 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Server.tsx
+56 -140
View File
@@ -3,7 +3,6 @@ import {
ArrowsUpDownIcon,
ArrowUpIcon,
ChartBarSquareIcon,
CheckIcon,
MapIcon,
ViewColumnsIcon,
} from "@heroicons/react/20/solid";
@@ -17,12 +16,7 @@ import ServerCard from "@/components/ServerCard";
import ServerCardInline from "@/components/ServerCardInline";
import ServerOverview from "@/components/ServerOverview";
import { ServiceTracker } from "@/components/ServiceTracker";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { SORT_ORDERS, SORT_TYPES } from "@/context/sort-context";
import { SORT_TYPES } from "@/context/sort-context";
import { useSort } from "@/hooks/use-sort";
import { useStatus } from "@/hooks/use-status";
import { useWebSocketContext } from "@/hooks/use-websocket-context";
@@ -43,7 +37,6 @@ export default function Servers() {
const [showMap, setShowMap] = useState<string>("0");
const [inline, setInline] = useState<string>("0");
const containerRef = useRef<HTMLDivElement>(null);
const [settingsOpen, setSettingsOpen] = useState<boolean>(false);
const [currentGroup, setCurrentGroup] = useState<string>("All");
const customBackgroundImage =
@@ -51,12 +44,6 @@ export default function Servers() {
? window.CustomBackgroundImage
: undefined;
const currentSortTypeLabel =
sortType === "default"
? "Default"
: sortType.charAt(0).toUpperCase() + sortType.slice(1);
const _currentSortOrderLabel = sortOrder === "asc" ? "Asc" : "Desc";
const restoreScrollPosition = useCallback(() => {
const savedPosition = sessionStorage.getItem("scrollPosition");
if (savedPosition && containerRef.current) {
@@ -363,133 +350,62 @@ export default function Servers() {
setCurrentTab={handleTagChange}
/>
</section>
<Popover onOpenChange={setSettingsOpen}>
<PopoverTrigger asChild>
<button
aria-label="Open sort settings"
className={cn(
"flex h-8 items-center gap-1.5 rounded-full border border-stone-200 bg-white px-3 text-sm text-stone-600 shadow-xs transition-all dark:border-stone-700 dark:bg-stone-800 dark:text-stone-300 dark:shadow-none",
{
"shadow-inner": settingsOpen,
},
{
"dark:border-stone-600/80 dark:bg-stone-800/80 bg-white/75":
customBackgroundImage,
},
{
"border-blue-400/90 text-blue-600 dark:border-blue-400/70 dark:text-blue-400":
sortType !== "default",
},
)}
>
{sortOrder === "asc" && sortType !== "default" ? (
<ArrowUpIcon className="size-3.5 shrink-0" />
) : sortOrder === "desc" && sortType !== "default" ? (
<ArrowDownIcon className="size-3.5 shrink-0" />
) : (
<ArrowsUpDownIcon className="size-3.5 shrink-0" />
)}
<span className="font-medium text-stone-900 dark:text-stone-100">
Sort
</span>
<span className="text-stone-300 dark:text-stone-600">|</span>
<span className="font-medium whitespace-nowrap">
{sortType === "default" ? "System" : currentSortTypeLabel}
</span>
</button>
</PopoverTrigger>
<PopoverContent
align="end"
className="w-72 overflow-hidden rounded-2xl p-0 shadow-xl"
<div
className={cn(
"flex h-8 items-center rounded-full border border-stone-200 bg-white text-sm text-stone-600 shadow-xs transition-all dark:border-stone-700 dark:bg-stone-800 dark:text-stone-300 dark:shadow-none shrink-0",
{
"dark:border-stone-600/80 dark:bg-stone-800/80 bg-white/75":
customBackgroundImage,
},
{
"border-blue-400/90 text-blue-600 dark:border-blue-400/70 dark:text-blue-400":
sortType !== "default",
},
)}
>
<button
aria-label="Toggle sort direction"
onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
disabled={sortType === "default"}
className="flex h-full cursor-pointer items-center gap-1.5 px-3 disabled:cursor-not-allowed disabled:opacity-40"
>
<div className="border-b border-stone-200 bg-linear-to-br from-blue-50 to-white p-3 dark:border-stone-700 dark:from-stone-800 dark:to-stone-900">
<div className="flex items-start justify-between gap-3">
<div>
<p className="text-xs font-semibold text-stone-800 dark:text-stone-100">
Sort Servers
</p>
<p className="text-[10px] text-stone-500 dark:text-stone-400">
Choose metric and direction
</p>
</div>
<button
onClick={() => {
setSortType("default");
setSortOrder("desc");
}}
className="rounded-full border border-stone-300 px-2 py-1 text-[10px] font-medium text-stone-600 transition-colors hover:bg-stone-100 dark:border-stone-600 dark:text-stone-300 dark:hover:bg-stone-700"
>
Reset
</button>
</div>
</div>
<div className="space-y-3 p-3">
<div className="space-y-2">
<p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
Metric
</p>
<div className="flex flex-wrap gap-1.5">
{SORT_TYPES.map((type) => {
const isActive = sortType === type;
const label =
type === "default"
? "Default"
: type.charAt(0).toUpperCase() + type.slice(1);
return (
<button
key={type}
onClick={() => {
setSortType(type);
if (type === "default") {
setSortOrder("desc");
}
}}
className={cn(
"inline-flex items-center gap-1 rounded-full border px-2 py-1 text-[10px] font-medium transition-all",
isActive
? "border-blue-500 bg-blue-500 text-white shadow-sm"
: "border-stone-200 bg-stone-50 text-stone-600 hover:border-stone-300 hover:bg-stone-100 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-300 dark:hover:bg-stone-700",
)}
>
{isActive && <CheckIcon className="size-3" />}
{label}
</button>
);
})}
</div>
</div>
<div className="space-y-2">
<p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
Direction
</p>
<div className="grid grid-cols-2 gap-1.5 rounded-full bg-stone-100 p-1 dark:bg-stone-800">
{SORT_ORDERS.map((order) => (
<button
key={order}
onClick={() => setSortOrder(order)}
disabled={sortType === "default"}
className={cn(
"flex items-center justify-center gap-1 rounded-lg px-2 py-1.5 text-[10px] font-semibold transition-all",
sortOrder === order && sortType !== "default"
? "bg-white text-blue-600 shadow-sm dark:bg-stone-900 dark:text-blue-300"
: "text-stone-500 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-100",
"disabled:cursor-not-allowed disabled:opacity-40",
)}
>
{order === "asc" ? (
<ArrowUpIcon className="size-3" />
) : (
<ArrowDownIcon className="size-3" />
)}
{order === "asc" ? "Ascending" : "Descending"}
</button>
))}
</div>
</div>
</div>
</PopoverContent>
</Popover>
{sortOrder === "asc" && sortType !== "default" ? (
<ArrowUpIcon className="size-3.5 shrink-0" />
) : sortOrder === "desc" && sortType !== "default" ? (
<ArrowDownIcon className="size-3.5 shrink-0" />
) : (
<ArrowsUpDownIcon className="size-3.5 shrink-0" />
)}
<span className="font-medium text-stone-900 dark:text-stone-100">
Sort
</span>
</button>
<span className="text-stone-300 dark:text-stone-600 mb-0.5">|</span>
<span className="relative ml-2 mr-3.25 inline-flex items-center">
<span
className="pointer-events-none select-none opacity-0 text-sm font-medium whitespace-nowrap"
aria-hidden
>
{sortType.charAt(0).toUpperCase() + sortType.slice(1)}
</span>
<select
aria-label="Sort metric"
value={sortType}
onChange={(e) => {
const val = e.target.value as typeof sortType;
setSortType(val);
if (val === "default") setSortOrder("desc");
}}
className="absolute inset-0 cursor-pointer appearance-none bg-transparent text-sm font-medium outline-none"
>
{SORT_TYPES.map((type) => (
<option key={type} value={type}>
{type.charAt(0).toUpperCase() + type.slice(1)}
</option>
))}
</select>
</span>
</div>
</div>
{showMap === "1" && (
<GlobalMap