feat(settings): sidebar submenu nav for settings and xray with icon tabs

Settings and Xray Configs are now expandable sidebar submenus that list their sections; clicking a section opens it via the URL hash (e.g. #general, #basic) and the in-page top tab bar is removed on both pages.

Within each section the collapse groups become horizontal tabs, each with an icon; on mobile only the icon shows with the label in a tooltip, via a shared catTabLabel helper used by both settings and xray.

Subscription Formats: the nested collapses in Fragment/Noises/Mux/Direct are replaced with a cleaner layout - framed field groups, and each noise is a card with a delete button plus a dashed add button.

Xray: the Reset to Default button is now a solid danger button so its hover state is visible.
This commit is contained in:
MHSanaei
2026-06-03 09:26:25 +02:00
parent e63cde8fcb
commit ac89ec724f
12 changed files with 400 additions and 458 deletions
@@ -0,0 +1,17 @@
import type { ReactNode } from 'react';
import { Tooltip } from 'antd';
/* Builds a settings category tab label: icon + text on desktop, and on
mobile just the icon with the text moved into a tooltip — mirroring the
old top tab bar's icons-only behaviour. */
export function catTabLabel(icon: ReactNode, text: ReactNode, iconsOnly: boolean): ReactNode {
if (iconsOnly) {
return <Tooltip title={text}>{icon}</Tooltip>;
}
return (
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
{icon}
<span>{text}</span>
</span>
);
}