5 Commits

Author	SHA1	Message	Date
Sanaei	709b332d17	feat(hosts): managed Hosts for per-host subscription link overrides (#5409) ... * test(sub): characterize current link output (externalProxy + single-link baselines) Phase 0 of the Hosts feature. Locks current subscription-link output for the externalProxy paths (vless/vmess/trojan/ss exact, reality/hysteria by Contains) so the upcoming ShareEndpoint refactor can be proven behavior-preserving. These must stay green and unedited through every later phase. * refactor(sub): unify external-proxy link building behind ShareEndpoint (TDD, snapshot-locked) Phase 1 of the Hosts feature. Collapse the duplicated externalProxy link builders (param-form for vless/trojan/ss, object-form for vmess) onto a single ShareEndpoint abstraction so Phase 4 can add Host-driven links with ~zero new branching. Design: an externalProxy-derived endpoint carries the original entry map and applies it through the UNCHANGED applyExternalProxyTLS{Params,Obj} helpers, so output is provably byte-identical. buildExternalProxyURLLinks / buildVmessExternalProxyLinks become thin adapters; the genVless/Trojan/SS/Vmess call sites are untouched. genHysteriaLink is deliberately left on its own path (hex pinSHA256, not pcs). The no-externalProxy default tails are unchanged. TDD: N1-N4 (externalProxyToEndpoint, inboundDefaultEndpoint, buildEndpointLinks, buildEndpointVmessLinks) written failing-first against stubs, then implemented. Mutation sanity (performed + reverted): dropping the ep-carry in externalProxyToEndpoint makes the Phase-0 C1/C2 characterization snapshots go red (TLS overrides vanish), proving the snapshots guard the emitted output. Gate: go test ./internal/sub/... and go test ./... green with ZERO edits to the Phase-0 snapshots; go build ./... green on linux and windows; go vet clean. * feat(model): Host entity + automigrate + openapi codegen (TDD) Phase 2 of the Hosts feature. Adds the Host GORM model: an override endpoint attached to an inbound (address/port + TLS/transport/clash overrides + sub scoping), superseding the legacy externalProxy array functionally while leaving it intact. - model.Host with snake_case column tags, json serializer for slices, text for free-JSON (mux/sockopt/xhttp), validate tags (remark 1-40, port 0-65535, security + mihomoIpVersion enums); TableName "hosts". NodeGuids column is added now but unused (host->node scoping deferred to v2). - Registered in BOTH initModels() (db.go) and migrationModels() (migrate_data.go); the latter is required for cross-DB migration and is easy to miss. PG sequence resync iterates the initModels slice, so it is covered automatically. - pruneOrphanedHosts() deletes hosts whose inbound_id has no inbound, called alongside pruneOrphanedClientInbounds(). - openapigen manifest: Host added to StructAllow with MuxParams/SockoptParams/ XhttpExtraParams -> KindAny; regenerated frontend/src/generated/* + openapi.json. TDD: TestHostTableName, TestHostValidation, TestHostAutoMigrateCreatesColumns (+ _Postgres), TestPruneOrphanedHosts written failing-first against a wrong-name, untagged, unregistered stub, then implemented. Gate: go test ./... green on SQLite AND a real Postgres DSN (local container); go build/vet/gofmt clean; npm run gen succeeds with the new Host type/schema/ example/zod; npm run typecheck + npm run test (542) green. * feat(api): Host CRUD service + controller + routes (TDD) Phase 3 of the Hosts feature. - service/host.go (HostService, empty struct + database.GetDB() like ClientService): GetHosts, GetHostsByInbound, GetHost, AddHost (verifies the inbound exists — no hard FK), UpdateHost (inbound + sort order immutable here), DeleteHost, SetHostEnable, SetHostsEnable, DeleteHosts, ReorderHosts (single driver-safe transaction), GetAllTags. - controller/host.go mirrors NodeController: routes under /panel/api/hosts (list/get/byInbound/tags + add/update/del/setEnable/reorder + bulk/setEnable, bulk/del), binds via middleware.BindAndValidate so the model validate tags are enforced, {success,msg,obj} envelopes. - Wired the hosts group into api.go after nodes (inherits checkAPIAuth + CSRF). - DelInbound now cascades: deleting an inbound deletes its hosts. - Documented all 11 routes in api-docs endpoints.ts (referencing the generated Host schema) and regenerated openapi.json; extended TestAPIRoutesDocumented's controller->basePath switch for host.go. Backend en toast keys added. TDD: service tests (Add/GetByInbound, RejectsUnknownInbound, Reorder, Set/Bulk enable, DeleteHosts, DeleteInboundCascadesHosts, GetAllTags) written failing- first against a nil-returning stub; controller test (AddListGetDelete envelope round-trip + AuthInherited 401) added. Gate: go test ./internal/web/... + go test ./... green; npm run gen + typecheck + lint + test (542) + build green. * feat(sub): render subscription links from hosts; legacy fallback when none (TDD, mutation-checked) Phase 4 of the Hosts feature. Inserts host resolution between inbound and link across all three subscription formats. Mechanism: hostEndpoints(inbound, format) loads the inbound's enabled hosts (filtered by ExcludeFromSubTypes, ordered by sort_order then id) and projects each onto the externalProxy entry shape the raw/json/clash renderers already consume. So a host fans out one link/proxy reusing the exact existing rendering (address/port/security/sni/fp/alpn/pins/ech) with zero new TLS code. Host header and path overrides are applied additively in the raw builders (no-op for legacy externalProxy, which never carries those keys — characterization snapshots stay green). Clash ip-version (MihomoIpVersion) is set last on the proxy. Integration points: - getSubs (raw): per inbound, hostEndpoints AFTER projectThroughFallbackMaster; len>0 -> linkFromHosts (renders only the hosts), else legacy GetLink. - GetJson/GetClash: inject the host endpoints into the inbound's externalProxy before the existing getConfig/getProxies loop. - Precedence: hosts win over any legacy externalProxy (injection replaces it). Backward compat: a zero-host inbound takes the legacy path -> byte-identical output (all Phase-0 characterization snapshots unchanged). TDD: 9 cycles (zero-hosts identical, N-links-ordered with host/path override, disabled skipped, host-vs-externalProxy precedence, no-dedup, sort composes with SubSortIndex, host-over-fallback, resolve-via-client-inbounds, ExcludeFromSubTypes per format) written failing-first against unwired helpers, then wired green. Mutation sanity (performed + reverted, documented here): - zero-hosts fallback: flipping the len(hostEps)>0 guard to >=0 makes TestSub_ZeroHosts_IdenticalOutput go red (host path yields "" for no hosts). - no-dedup: adding a remark-dedup in hostEndpoints makes TestSub_NHosts_NoDedup go red (two distinct hosts collapse to one link). Gate: go test ./internal/sub/... + go test ./... green with ZERO edits to the Phase-0 snapshots; go build green on linux and windows; go vet + gofmt clean. * feat(migration): seed hosts from inbound externalProxy (TDD, idempotent, dual-driver) Phase 5 of the Hosts feature. One-time migration so existing installs surface their legacy externalProxy entries as first-class Host rows. - seedHostsFromExternalProxy() is self-gated on a HistoryOfSeeders "HostsFromExternalProxy" row (run-once) and wired into runSeeders. For each inbound it parses StreamSettings, reads externalProxy[], and creates one Host per entry: forceTls->Security (unknown->same), dest->Address, port->Port, remark->Remark (generated when blank, capped at 40), sni/fingerprint/alpn/ pinnedPeerCertSha256/echConfigList copied; SortOrder=index; InboundId set. - Additive: externalProxy is left intact in StreamSettings (rollback-safe; the sub layer prefers hosts when present, §Phase 4). - Postgres: GORM db.Create advances hosts_id_seq via the sequence, so no extra resync is needed beyond the existing startup resync. TDD: field-mapping, idempotency (second run no-op), no-externalProxy->no-hosts, externalProxy-kept-intact written failing-first against a stub; plus a Postgres counterpart that skips without XUI_DB_DSN. Gate: go test ./internal/web/service/... ./internal/database/... green on SQLite; the *_Postgres tests green against a real Postgres container; go build green on linux and windows; go vet + gofmt clean. (Running the whole database package under XUI_DB_TYPE=postgres is not supported — the SQLite-path tests share the one DSN — so only the t.Skip-gated *_Postgres tests run with the env set.) * feat(ui): Hosts page + schema + query hooks + link preview helper (TDD on schema/helpers) Phase 6 of the Hosts feature — the admin UI. - schemas/api/host.ts: HostFormSchema (validation: remark 1-40, tags ^[A-Z0-9_:]+$ ≤10×≤36, port 0-65535, security/mihomoIpVersion enums, alpn/fingerprint reused from the shared primitives) + a loose HostRecordSchema/HostListSchema for reads. - lib/hosts/host-link.ts: hostToExternalProxyEntry — the frontend mirror of the backend hostToExternalProxyMap (security->forceTls, sni override rules, port inherit), for share-link previews. - api/queries/useHostsQuery.ts + useHostMutations.ts (mirror the node hooks): list/get + add/update/del/setEnable/reorder/bulk; queryKeys.hosts.* added; mutations invalidate keys.hosts.root(). - pages/hosts/{HostsPage,HostList,HostFormModal}.tsx (+CSS) mirroring pages/nodes: list with remark · address:port · inbound · security · tags · enable Switch · per-inbound move up/down (reorder) · bulk enable/disable/delete; form grouped into Basic / Advanced / Clash / Subscription-scope sections. - Route '/hosts' + sidebar item (Global icon); menu.hosts + pages.hosts.* added to the en-US bundle (other locales fall back to English until translated). TDD: HostFormSchema (10 cases) and hostToExternalProxyEntry (6 cases) written failing-first, then implemented. UI verified by lint/typecheck/test/build. Deferred (documented enhancement): the live in-form share-link preview (needs inbound+client context) and a per-host host/path override in JSON/Clash output (raw already overrides; JSON/Clash inherit the inbound's host/path). Gate: cd frontend && npm run lint && npm run typecheck && npm run test (557) && npm run build all green; go build ./... + go test ./... still green. * refactor(ui): remove the External Proxy form from the inbound stream settings Hosts supersede the legacy externalProxy: the subscription renders from hosts (hosts win when both exist) and the migration converts existing externalProxy entries to hosts. externalProxy's only real consumers were the subscription (now covered) and this form's preview — the backend per-client copy-link never used it — so removing the editor has no functional regression. - Drop ExternalProxyForm + toggleExternalProxy from InboundFormModal and delete the orphaned form component + its export; remove its block test + snapshot. - KEEP the externalProxy schema field and backend parsing/link-generation: an existing inbound's externalProxy still round-trips through the form (not silently destroyed on edit) and still renders if a host was removed. Gate: cd frontend && npm run typecheck + lint + test (556) + build green. * fix(ui): use Alert `title` instead of deprecated `message` (antd 6) Ant Design 6 deprecated <Alert message=> in favor of <Alert title=>; the panel was mid-migration (21 Alerts already on title). Renamed the 7 remaining stragglers across 5 files (SubLinksModal, InboundFormModal, sockopt, EmailTab, TelegramTab), silencing the runtime deprecation warning. description= is unchanged. Pre-existing warning, surfaced while testing Hosts — not introduced by it. Gate: npm run typecheck + lint + test (556) + build green. * style(ui): align Hosts page with Clients/Inbounds cards + reorder columns - page-shell.css never listed .hosts-page, so the Hosts page got no content padding / transparent-layout / summary-card spacing. Add a .hosts-page shell block (background, dark/ultra vars, content-area + summary-card padding). This is the actual "card spacing" bug. - HostList: match the Clients/Inbounds list card — hoverable + the toolbar moved into the card title as a .card-toolbar (Add when nothing selected; selected count + bulk enable/disable/delete on selection). Re-declare .card-toolbar in HostList.css since the shared rule lives in a lazily-loaded page stylesheet. - Reorder table columns as requested: Actions, Enable, then Remark, Endpoint, Inbound, Security, Tags. Added scroll x for narrow screens. - HostsPage: add a summary card (Total / Enabled / Disabled) like the other pages. New i18n keys: pages.hosts.selectedCount + pages.hosts.summary.*. Gate: npm run typecheck + lint + test (556) + build green. * style(ui): use Tabs instead of Collapse in the Add/Edit Host form The Basic / Advanced / Clash / Subscription-scope sections are now tabs. Each pane sets forceRender so all fields stay mounted — required because the form uses preserve=false, so an unmounted tab's values would otherwise be dropped on submit (and a required field on a hidden tab still blocks submit). Gate: npm run typecheck + lint + test (556) + build green. * style(ui): split Host form into Security + Advanced tabs; drop unused JSON fields - Remove the Mux/Sockopt/XHTTP raw-JSON fields from the Host form: they were not wired into link generation and the inbound's structured editors are inbound- specific (not reusable). The DB columns + read schema + generated type stay, so they can get proper editors later. (HostFormSchema drops them; HostRecordSchema keeps them.) - Reorganize tabs to Basic / Security / Advanced / Clash / Subscription scope: Security holds the TLS/cert fields (security, sni, sni-overrides, alpn, fingerprint, pins, verify-by-name, ech); Advanced now holds the transport overrides (host header, path). - i18n: add pages.hosts.sections.security; drop the 3 unused field labels. Gate: npm run typecheck + lint + test (556) + build green. * style(ui): restore Mux/Sockopt/XHTTP fields in the Host Advanced tab Put the three free-JSON override fields back, in the Advanced tab next to host header / path (as JSON inputs — the inbound's structured editors aren't reusable here). Re-added to HostFormSchema + defaults + the i18n labels. Gate: npm run typecheck + lint + test (556) + build green. * feat(hosts): add allowInsecure (rendered) + serverDescription/mihomoX25519/vlessRouteId fields Closes most of the Remnawave-host gap analysis. - model.Host: + allowInsecure, serverDescription (≤64), vlessRouteId (0-65535), mihomoX25519. Auto-migrated (SQLite + Postgres verified); openapi regenerated. - allowInsecure is fully RENDERED into subscription output (TDD): - raw link: allowInsecure=1 (TLS/Reality, skipped for none) via the endpoint builder; - JSON/Clash: applyExternalProxyTLSToStream writes tlsSettings.settings. allowInsecure, and clash applySecurity now emits skip-cert-verify for the tls case (it previously only did so for Hysteria — a pre-existing gap, so inbound allowInsecure now renders for vless/trojan/ss clash too). - Frontend: the four fields added to the Host form (allowInsecure → Security, serverDescription → Basic, vlessRouteId → Advanced, mihomoX25519 → Clash); serverDescription shown under the remark in the list. Schema + i18n updated. serverDescription / vlessRouteId / mihomoX25519 are stored + editable; their deeper rendering (and per-host mux/sockopt/xhttp into JSON/Clash, plus a per-host xray JSON template) are tracked as follow-ups. Gate: go test ./... green (SQLite + Postgres for the host schema/migration); go build linux+windows; go vet + gofmt clean; npm run gen + typecheck + lint + test (556) + build green; generated files in sync. * feat(sub): render host sockopt + xhttp-extra params into JSON/Clash output (TDD) A host's sockoptParams and xhttpExtraParams (free-JSON) now take effect: applyHostStreamOverrides injects sockopt into the per-host stream (re-added since the base stream strips it) and merges xhttpExtraParams into xhttpSettings, called in both getConfig (JSON) and getProxies (Clash) right after the per-host TLS apply. No-op for legacy externalProxy entries (keys absent) — characterization snapshots unchanged. mux rendering is outbound-level (overrides outbound.Mux) and needs a genVless/ genVnext/genServer signature change — deferred, along with the per-host xray JSON template. Gate: go test ./internal/sub/... + go test ./... green (snapshots unchanged); go build + vet + gofmt clean. * feat(sub): render host muxParams as a per-host JSON outbound mux override (TDD) genVnext/genVless/genServer take a muxOverride: a host's muxParams (when valid JSON) overrides the global mux on its JSON outbound; empty falls back to the panel mux (behavior unchanged for non-host configs). Completes the host mux/sockopt/xhttp trio. Test call sites updated for the new signature. Gate: go test ./internal/sub/... + go test ./... green (snapshots unchanged); go build + gofmt clean. * style(ui): show Host security fields conditionally per security (like externalProxy) * feat(sub): apply host SNI + fingerprint override for reality (TDD) A reality host now overrides SNI and fingerprint while inheriting publicKey/ shortId from the inbound (reality keys can't be host-supplied). Previously the reality link kept the inbound's serverName because the TLS appliers are gated to security=="tls". - raw: applyEndpointRealityParams sets sni/fp on the params for reality; - JSON/Clash: applyHostStreamOverrides sets realitySettings.serverName + serverNames from the host SNI. Gated to host endpoints via an isHost marker on the synthesized ep, so the legacy externalProxy path stays byte-identical (characterization snapshots unchanged). The marker is internal and never emitted. Gate: go test ./internal/sub/... + go test ./... green; go build + vet + gofmt clean. * fix(ui): start the Host inbound select unselected instead of showing 0 A new host left inboundId defaulting to 0, so the Select rendered "0". inboundId is now optional in the form (undefined until chosen), so it shows its placeholder ("Select an inbound"); the required rule still enforces a choice on save. Port keeps 0 (means "inherit the inbound's port"). Gate: npm run typecheck + lint + build green. * fix(ui): drop redundant :port suffix from the Host inbound select label The inbound tag (e.g. in-59303-tcp) already carries the port, so the appended ":59303" was duplicated. Show just the remark/tag. Gate: npm run typecheck + lint + build green. * style(ui): apply the shared card hover shadows to the Hosts page page-cards.css scoped its card styling + hover shadows to each page class but not .hosts-page, so Hosts fell back to antd's default hoverable (a larger/blurry shadow + pointer cursor). Add a .hosts-page block matching the other pages. Gate: npm run build green. * feat(hosts): move Tags to Basic tab, add Nodes field, accept VLESS route ranges - Move the Tags field into the Host form's Basic tab and add a Nodes multi-select (visual-only assignment, backed by the existing node_guids column) so the Basic tab matches the reference layout. - Replace the single-port vlessRouteId integer with a free-form vlessRoute string that accepts comma-separated ports/ranges (e.g. 53,443,1000-2000); format-validated on the frontend, stored verbatim on the backend. - Regenerated frontend types/openapi from the changed model. * feat(hosts): structured editors for Mux/Sockopt/XHTTP + new Final Mask Replace the raw JSON textareas in the Host form's Advanced tab with the same structured editors used elsewhere, under a nested tabbed layout (General / Mux / Sockopt / XHTTP / Final Mask), mirroring the Sub-JSON settings tab: - Mux: the Sub-JSON mux editor (enable + concurrency/xudpConcurrency/xudp443). - Sockopt + XHTTP: reuse the outbound SockoptForm / XhttpForm, wrapped in an isolated form that serializes the edited subtree back to the host's JSON string (pruned so the override stays sparse). - Final Mask: new host field (model + column + JSON-render wiring that merges the masks into the host's JSON-subscription stream), edited via the shared FinalMaskForm like the Sub-JSON Final Mask editor. Each editor stays a controlled value/onChange component bound to its existing host JSON string field; backend rendering of mux/sockopt/xhttp is unchanged. * feat(hosts): drop XHTTP + Xray-JSON-template overrides; fix mobile form layout Remove the host's XHTTP extra-params and Xray-JSON-template overrides entirely (model fields + columns, JSON-subscription render paths incl. hostTemplateOutbound, schema, form tab/field, i18n, openapi codegen, and their tests) — they did not fit the host model. Mux, Sockopt and Final Mask stay as structured editors. Mobile fixes for the Edit Host modal: - responsive width (95vw on mobile, was a fixed 760px that overflowed the viewport and clipped the tabs/labels) + a scrollable body so the footer stays on screen; - Mux fields use responsive Row/Col (stack on mobile) instead of a fixed-width label grid. * fix(hosts): hide the spurious horizontal scrollbar in the Edit Host modal Setting overflowY:auto on the modal body forced overflow-x to auto too (CSS rule), so antd Row's negative gutter margins triggered a horizontal scrollbar. Pin overflowX:hidden. * feat(hosts): inbound-style responsive field layout + icon empty state - Host form (main form + Mux/Sockopt/Final Mask editors) now use the inbound form's label layout: label beside the input on desktop (labelCol sm span 8 / wrapperCol sm span 14, right-aligned), stacked label-above-input on mobile. Rewrote HostMuxForm onto an internal antd Form so it follows the same layout instead of a manual grid. - Empty hosts table now shows the host icon + the shared 'Nothing here yet' (noData) text, matching Nodes/Inbounds/Clients, replacing the bespoke 'No hosts yet…' string. * fix(hosts): avoid nested <form> in the Edit Host modal The Mux/Sockopt/Final Mask editors each render their own antd Form inside the host's main Form, producing an invalid nested <form> DOM node (hydration warning). Render those inner forms with component={false} so they keep the form instance/context but emit no <form> element. * fix(hosts): make the Mux enable toggle work The Switch's checked state came from Form.useWatch('mux'), but the mux object field had no registered Form.Item while disabled, so setFieldValue never notified the watcher and the toggle stayed off. Bind the Switch to a real name='enabled' field (antd drives its checked state directly) and keep the sub-fields registered via hidden={!enabled}, serialized to the flat mux JSON. * refactor(hosts): reuse the outbound MuxForm instead of a bespoke Mux editor The Mux fields duplicated the outbound MuxForm. Reuse it through the same wrapper as Sockopt: generalize OutboundSubtreeJsonForm with defaultSubtree (pre-fill on enable) and a serialize hook, and have HostMuxForm render MuxForm at the ['mux'] path. The host keeps its inherit-when-off semantics by storing '' unless mux.enabled. Also drops the now-unused enableSwitch path from the wrapper (only the removed XHTTP editor used it). * style(hosts): use default-width Port input like the inbound form The host Port used width:100% (full width); the inbound's numeric inputs use antd's default width. Drop the override so Port matches. The Mux number inputs already use the default width via the reused MuxForm. * refactor(sockopt): readable customSockopt editor as a shared component The customSockopt rows were a single cramped Space.Compact line and duplicated verbatim in the inbound and outbound sockopt forms. Extract a shared CustomSockoptList that renders each entry as a titled group of labeled fields (System / Level / Opt / Type / Value), matching the rest of the form, and use it in both (and thus the host Sockopt editor). * fix(finalmask): drop the empty Custom Tables tag on a new sudoku mask The sudoku TCP-mask default seeded customTables: [''] (one empty string), which rendered as a blank removable tag. Seed [] instead. * fix(sockopt): make the outbound (and host) Sockopt client-only Per the XTLS sockopt docs, tproxy / acceptProxyProtocol / V6Only / trustedXForwardedFor only apply to an inbound (listening socket); they are meaningless on an outbound/dialer. Drop them from the outbound SockoptForm (which the host reuses). The Sockopt default object still seeds those keys, so the host also strips them on serialize, keeping its override honest to the server/client split. The inbound SockoptForm is left unchanged. * fix(sockopt): make the inbound Sockopt server-only Complete the server/client split: drop the outbound/dialer-only fields from the inbound SockoptForm — dialerProxy, domainStrategy, interface, addressPortStrategy, happyEyeballs, tcpMptcp (client-only since Go 1.24 auto-enables MPTCP on listen). mark stays (xray applies SO_MARK on inbound sockets too). Update the form-blocks snapshot to the server-side field set (intentional spec change). * feat(hosts): populate Sockopt dialerProxy with the panel's outbound tags The host Sockopt editor reused the outbound SockoptForm with outboundTags=[], so the dialerProxy dropdown was empty. Feed it the panel's outbound tags via the existing useOutboundTags hook (shares the cached xray-config query; blackhole excluded), so a host can chain through a subscription outbound by tag. * fix(hosts): empty-state styling on direct load + exclude balancers from dialerProxy - .card-empty was only defined in lazily-loaded Clients/Inbounds/Nodes stylesheets, so a direct /hosts refresh rendered the empty table state unstyled (faint + uncentered) until another page was visited. Re-declare it in HostList.css so it's correct on first load. - The Sockopt dialerProxy dropdown listed balancer tags (useOutboundTags merges them in for mtproto egress). dialerProxy chains a single outbound, so balancers aren't valid — switch to useOutboundTagGroups and use only the outbound group. * fix(outbounds): icon + 'Nothing here yet' empty state; stop fading other pages The Outbounds empty state was a faint '—', and OutboundsTab.css set the global .card-empty to opacity:0.4 — which leaked onto whichever page's empty state was shown after the Outbounds CSS had loaded (e.g. Hosts went faint after visiting Outbounds). Render the icon + noData ('Nothing here yet') like the other lists, and align .card-empty to the shared centered/secondary style (no opacity). * fix(outbounds): custom empty state on the desktop table too The desktop Outbounds Table had no locale.emptyText, so it showed antd's default 'No data' box. Add the same ExportOutlined + noData empty state as the card (mobile) view. * style(sidebar): use ExportOutlined for the Outbounds nav item The Outbounds sidebar item used UploadOutlined (an upload tray). Switch to ExportOutlined, matching the outbound icon now used in the routing target and the outbounds empty states. * feat(hosts): icons on the form tabs (icon-only on mobile) Wrap every Host form tab label (Basic/Security/Advanced/Clash/Subscription scope and the nested General/Mux/Sockopt/Final Mask) with catTabLabel, so the tabs show icon + text on desktop and just the icon (with a tooltip) on mobile, matching the Settings/Xray tab bars. * refactor(hosts): fold Exclude-from-formats into Advanced, drop the one-field tab The Subscription scope tab held only excludeFromSubTypes after Tags moved to Basic — a niche per-format scoping knob. Move it into the Advanced > General sub-tab and remove the standalone tab (and its now-unused subScope label/icon). * feat(sub): per-client remark template variables; drop the remark model & Show Usage Info * fix(migration): cap seeded host remark at the model's 256-char limit, not 40	2026-06-17 12:06:55 +02:00
MHSanaei	a27d57b2ff	fix(ui): keep dropdown action menus inside the viewport (#5133) ... The inbound/client context menus hold a dozen items; when antd flips a tall menu upward near the screen edge it overflowed the top of the viewport, hiding the first entries. Cap the overlay height and scroll.	2026-06-12 01:21:54 +02:00
MHSanaei	2fea71387b	fix(ui): polish across routing, groups, inbounds, mobile sidebar ... A bundle of small UI fixes that surfaced together while reviewing the panel. Routing rules — stale Edit after drag: - Dragging a rule and then clicking its Edit button used to open the modal with the *previous* rule's content. Root cause: desktopColumns was memoized with [t, isMobile, rows.length] (rows.length doesn't change on reorder), so the cached render function kept handing AntD the openEdit closure that captured the pre-drag rules array. Fix is a rulesRef updated each render and read inside openEdit, so even the cached closure sees the live array. - Mobile rule cards on the same page were hard to tell apart: bumped the inter-card gap, slightly stronger border, soft shadow, and a small centered divider line between adjacent cards. Mobile drawer (dark / ultra): - The AntD Menu inside the mobile drawer was rendering with its own darkItemBg (#15161a / #050507) while the drawer body used the lighter colorBgElevated, producing visible two-tone seams. Force the drawer-content / drawer-body to the same dark color that the desktop sider uses, and make the menus transparent so they inherit. Row menus — visual grouping: - Groups page row menu: moved Rename above the divider so the ordering reads safe → divider → destructive (Remove from group, Delete clients, Delete group only) instead of mixing the two groups. - Inbounds page row menu: inserted a divider before delAllClients / delete so the destructive items sit visually separated from the earlier safe actions. Dropdown affordances: - Non-danger dropdown items had no perceivable hover state (default colorBgTextHover is too subtle, especially under the light theme). Apply the same primary-tint pattern the sider/drawer menu uses: 14% primary background and primary color on label + icon. - ant-dropdown-menu-item-divider now uses var(--ant-color-border) (and an explicit rgba in dark) so the separator is actually visible in the light theme. Clients toolbar — narrow-desktop wrap: - Between 769px and 920px, the bulk-action bar (Attach / Detach / Add to group / Ungroup / more + Delete) wrapped to two rows with Delete stranded alone on the right. In that range, switch the toolbar buttons to icon-only, tighten gap to 6px and inline padding to 8px so everything stays on one line.	2026-05-28 13:25:43 +02:00
MHSanaei	93eda06878	feat(clients,groups): client groups + sub-links export + dedicated groups page ... Persistent client groups - New ClientGroup model + client_groups table that holds empty (placeholder) groups so a user can define a label before any client references it. ListGroups merges these with the distinct group_name values already stored on clients and reports {name, clientCount}. - ClientRecord gains group_name column; the model.Client wire shape gains a matching `group` JSON field that survives the inbound.settings → SyncInbound round-trip. - Rename/Delete on a group mutates client_groups (rename row / delete row) AND propagates to all matching clients in ClientRecord and in every owning inbound's settings JSON, all in one transaction. Bulk operations - AssignGroup(emails, group) updates clients.group_name + patches each affected inbound's settings JSON in one read-modify-write per inbound. Empty group clears the label. Auto-creates the client_groups row when the user assigns to a brand-new name. - BulkResetTraffic(emails) loops the existing single-reset path so the caller can zero traffic across a whole selection or a whole group. - EmailsByGroup(name) returns just the email list (used by the groups page to fan a single bulk action over every member). Endpoints (all under /panel/api/clients) - GET /groups — summaries with counts - GET /groups/:name/emails — emails in a group - POST /groups/create — empty placeholder group - POST /groups/rename — rename (table + clients + JSON) - POST /groups/delete — drop label everywhere (clients survive) - POST /bulkAssignGroup — assign N selected clients - POST /bulkResetTraffic — reset traffic on a list Clients page UX - New Group column (Actions → Client → Group → Inbounds → …) with a click-to-filter chip. - FilterDrawer gains a multi-select Group filter whose options come from the new ClientPageResponse.groups field (sourced from ListGroups so empty/placeholder groups are pickable too). - Single-client and bulk-add forms gain a Group AutoComplete pre-loaded with all known group names. - New toolbar buttons when selection > 0: "Group ({n})" opens BulkAssignGroupModal, "Sub links ({n})" opens SubLinksModal. Sub-links export modal (new SubLinksModal.tsx) - Table of selected clients with their subscription URL (and JSON URL when subJsonEnable is on), per-row copy, Copy all, and Download as sub-links-<timestamp>.txt. Warns when subscription is disabled or none of the selected clients have a subId. Dedicated Groups page (new pages/groups/GroupsPage.tsx) - /groups route + sidebar entry (TagsOutlined icon) + page title key. - Card-based layout matching Clients/Inbounds/Nodes — summary card with Total/Grouped/Empty stats, main card with Add Group button + table. - Per-row More dropdown (icon-first column on the left): Sub links, Adjust (days+traffic), Reset traffic, Rename, Delete clients in group, Delete group (keep clients). Empty groups disable the client-targeted actions. - Reuses SubLinksModal and ClientBulkAdjustModal — emails for the group are fetched on demand from GET /groups/:name/emails. Other polish - /groups + groups-page selectors added to page-shell.css and page-cards.css so the new page inherits the same background, padding, card borders, hover shadow, and summary-card padding. - .card-toolbar gains a small vertical padding so the larger toolbar buttons (now default size, matching Inbounds) don't crowd the top of the card-head on Clients and Groups pages.	2026-05-27 17:30:55 +02:00
Sanaei	dc37f9b731	Migrate frontend models/api/utils to TypeScript and modernize AntD theming (#4563) ... * refactor(frontend): port api/* and reality-targets to TypeScript Phase 1 of the JS→TS migration: convert three small, isolated files (axios-init, websocket, reality-targets) to typed sources so future phases can lean on their interfaces. - api/axios-init.ts: typed CSRF cache, interceptors, request retry - api/websocket.ts: typed listener map, message envelope guard, reconnect timer - models/reality-targets.ts: RealityTarget interface, readonly list - env.d.ts: minimal qs module shim (stringify/parse) - consumers: drop ".js" extension from @/api imports * refactor(frontend): port utils/index to TypeScript Phase 2 of the JS→TS migration: convert the 858-line utility module that 30+ pages and hooks depend on. - Msg<T = any> generic with success/msg/obj shape preserved - HttpUtil get/post/postWithModal generic over response shape - RandomUtil, Wireguard, Base64 fully typed - SizeFormatter/CPUFormatter/TimeFormatter/NumberFormatter typed - ColorUtils.usageColor returns 'green'|'orange'|'red'|'purple' union - LanguageManager.supportedLanguages readonly typed - IntlUtil.formatDate/formatRelativeTime accept null/undefined - ObjectUtil.clone/deepClone/cloneProps/equals kept as `any`-shaped to preserve the prior JS contract used by class-instance callers (AllSetting.cloneProps(this, data), etc.) * refactor(frontend): port models/outbound to TypeScript (hybrid typing) Phase 4 of the JS→TS migration: rename outbound.js to outbound.ts and make it compile under strict mode with a minimal hybrid type pass. - Enum-like constants kept as typed objects (Protocols, SSMethods, …) - Top-level DNS helpers strictly typed - CommonClass gets [key: string]: any so all subclasses can keep their loose this.foo = bar assignments without per-field declarations - Constructor / fromJson / toJson signatures typed as any to preserve the prior JS contract used by consumers and parsers - Outbound declares static fields for the dynamically-attached Settings subclasses (Settings, FreedomSettings, VmessSettings, …) - urlParams.get() results that feed parseInt now use the non-null assertion since the surrounding has() check already guards them - File-level eslint-disable for no-explicit-any/no-var/prefer-const to keep the JS-derived code building without churn * refactor(frontend): port models/inbound to TypeScript (hybrid typing) Phase 5 of the JS→TS migration. Same hybrid approach as outbound.ts: constants typed strictly, classes get [key: string]: any from XrayCommonClass, constructor / fromJson / toJson signatures use any. - XrayCommonClass gains [key: string]: any plus typed static helpers (toJsonArray, fallbackToJson, toHeaders, toV2Headers) - TcpStreamSettings/TlsStreamSettings/RealityStreamSettings/Inbound declare static fields for their dynamically-attached subclasses (TcpRequest, TcpResponse, Cert, Settings, ClientBase, Vmess/VLESS/ Trojan/Shadowsocks/Hysteria/Tunnel/Mixed/Http/Wireguard/TunSettings) - All gen*Link, applyXhttpExtra*, applyExternalProxyTLS*, applyFinalMask* and related helpers explicitly any-typed - Constructor positional client-args (email, limitIp, totalGB, …) typed as optional any across Vmess/VLESS/Trojan/Shadowsocks/Hysteria.VMESS| VLESS|Trojan|Shadowsocks|Hysteria - File-level eslint-disable for no-explicit-any/prefer-const/ no-case-declarations/no-array-constructor to silence churn without changing behavior * refactor(frontend): port models/dbinbound to TypeScript Phase 6 — final phase of the JS→TS migration. Frontend src/ no longer contains any *.js files. - DBInbound declares all fields explicitly (id, userId, up, down, total, …, nodeId, fallbackParent) with proper types - _expiryTime getter/setter typed against dayjs.Dayjs - coerceInboundJsonField takes unknown, returns any - Private cache fields (_cachedInbound, _clientStatsMap) declared - Consumers (InboundFormModal, InboundsPage, useInbounds): drop ".js" extension from @/models/dbinbound imports * refactor(frontend): drop .js extensions from TS-resolved imports Cleanup after the JS→TS migration: - All consumers that imported @/models/{inbound,outbound,dbinbound}.js now drop the .js extension (TS module resolution lands on the .ts file automatically) - eslint.config.js: remove the **/*.js block since the only remaining JS file under src/ is endpoints.js (build-script consumed only) and js.configs.recommended already covers it correctly * refactor(frontend): tighten inbound.ts cleanup wins Checkpoint before the full any → typed pass: - Wrap 15 case bodies in braces (no-case-declarations) - Convert 14 let → const in genLink helpers (prefer-const) - new Array() → [] for shadowsocks passwords (no-array-constructor) - XrayCommonClass: HeaderEntry, FallbackEntry, JsonObject interfaces; fromJson/toV2Headers/toHeaders typed against them; static methods return JsonObject / HeaderEntry[] instead of any - Reduce file-level eslint-disable scope from 4 rules to just no-explicit-any (the only one still needed) * refactor(frontend): drop eslint-disable from models/dbinbound Replace `any` with explicit domain types: - `coerceInboundJsonField` returns `Record<string, unknown>` (settings/streamSettings/sniffing are always objects). - Add `RawJsonField`, `ClientStats`, `FallbackParentRef`, `DBInboundInit` types. - `_cachedInbound: Inbound | null`, `toInbound(): Inbound`. - `getClientStats(email): ClientStats | undefined`. - `genInboundLinks(): string` (matches actual return from Inbound.genInboundLinks). - Constructor now accepts `DBInboundInit`. * refactor(frontend): drop eslint-disable from InboundsPage Type all callbacks against DBInbound from @/models/dbinbound: - state setters use DBInbound | null - helpers (projectChildThroughMaster, checkFallback, findClientIndex, exportInboundLinks, etc.) take DBInbound - drop `(dbInbounds as any[])` casts; useInbounds already returns DBInbound[] - introduce ClientMatchTarget for findClientIndex's `client` param - tighten DBInbound.clientStats to ClientStats[] (default []) - single boundary cast at <InboundList onRowAction=> to bridge InboundList's narrower DBInboundRecord (cleanup belongs with InboundList) * refactor(frontend): drop file-level eslint-disable from utils/index - ObjectUtil.clone/deepClone become generic <T> - cloneProps/delProps accept `object` (cast internally to AnyRecord) - equals accepts `unknown` with proper narrowing - ColorUtils.usageColor narrows data/threshold to `number`; total widened to `number | { valueOf(): number } | null | undefined` so Dayjs works - Utils.debounce replaces `const self = this` with lexical arrow closure (no-this-alias clean) - InboundList._expiryTime narrowed from `unknown` to `{ valueOf(): number } | null` - Single-line eslint-disable remains on `Msg<T = any>` and HttpUtil generic defaults (idiomatic API envelope; changing default to unknown cascades through 34 consumer files) * refactor(frontend): drop eslint-disable from OutboundFormModal field section Replace `type OB = any` with `type OB = Outbound`. Body code still sees protocol fields as `any` via Outbound's inherited [key: string]: any index signature (CommonClass) — that escape hatch will narrow as Phase 6 tightens outbound.ts itself. The intentional `// eslint-disable-next-line` on `useRef<any>(null)` at line 72 stays — out of scope per plan. * refactor(frontend): drop file-level eslint-disable from InboundFormModal Add minimal local interfaces for protocol-specific shapes the form reads: - StreamLike, TlsCert, VlessClient, ShadowsocksClient, HttpAccount, WireguardPeer (replace with real exports from inbound.ts as Phase 7 exports them). - Props typed as DBInbound | null + DBInbound[]. - Drop unnecessary `(Inbound as any).X`, `(RandomUtil as any).X`, `(Wireguard as any).X`, `(DBInbound as any)(...)` casts — they are already typed classes; only `Inbound.Settings`/`Inbound.HttpSettings` remain `any` via static field on Inbound (will tighten in Phase 7). - inboundRef/dbFormRef retain single-line `// eslint-disable-next-line` for `useRef<any>(null)` — nullable narrowing across ~30 callsites exceeds Phase 5 scope. - payload locals typed Record<string, unknown>; setAdvancedAllValue parses JSON into a narrowed object instead of `let parsed: any`. * refactor(frontend): narrow outbound.ts eslint-disable to no-explicit-any only - Fix all 36 prefer-const violations: convert never-reassigned `let` to `const`; for mixed-mutability destructuring (fromParamLink, fromHysteriaLink) split into separate `const`/`let` declarations by index instead of destructuring. - Fix both no-var violations: `var stream` / `var settings` → `let`. - File still carries `/* eslint-disable @typescript-eslint/no-explicit-any */` because tightening 223 `any` uses requires removing CommonClass's `[key: string]: any` escape hatch and reshaping ~30 dynamically-attached subclass patterns into named classes — multi-hour architectural work tracked as Phase 7's twin for outbound. * refactor(frontend): align sub page chrome with login + AntD defaults - Theme + language buttons now both use AntD `<Button shape="circle" size="large" className="toolbar-btn">` with TranslationOutlined and the SVG theme icon — identical hover/border behaviour. - Language popover content switched from hand-rolled `<ul.lang-list>` to AntD `<Menu mode="vertical" selectable />`; gains native hover/keyboard nav + active highlight. - Drop `.info-table` `!important` border overrides (8 selectors) so Descriptions inherits the AntD theme border colour. - Drop `.qr-code` padding/background/border-radius overrides; only `cursor: pointer` remains (QRCode handles padding/bg itself). - Remove now-unused `.theme-cycle`, `.lang-list`, `.lang-item*`, `.lang-select`, `.settings-popover` rules. * refactor(frontend): drop CustomStatistic wrapper, move overrides to theme tokens - Delete `<CustomStatistic>` (a pass-through wrapper over <Statistic>) and its unscoped global `.ant-statistic-*` CSS overrides; consumers (IndexPage, ClientsPage, InboundsPage, NodesPage) now import AntD `<Statistic>` directly. - Add Statistic component tokens to ConfigProvider so the title (11px) and content (17px) font sizes still apply, without `!important` global selectors. - Move dark / ultra-dark card border colours from `body.dark .ant-card` + `html[data-theme='ultra-dark'] .ant-card` selectors into Card `colorBorderSecondary` tokens; page-cards.css now only carries the custom radius/shadow/transition that has no token equivalent. - Simplify XrayStatusCard badge: remove the custom `xray-pulse` dot keyframe and per-state ring-colour overrides; AntD `<Badge status="processing" color={…}>` already pulses the ring in the same colour, no extra CSS needed. * refactor(frontend): modernize login page with AntD primitives - Theme cycle button switched from `<button.theme-cycle>` + custom CSS to AntD `<Button shape="circle" className="toolbar-btn">` (matches sub page chrome already established). - Theme icons switched from hand-rolled inline SVG (sun, moon, moon+star) to AntD `<SunOutlined />`, `<MoonOutlined />`, `<MoonFilled />` for the three light / dark / ultra-dark states. - Language popover content switched from `<ul.lang-list>` + `<button.lang-item>` to AntD `<Menu mode="vertical" selectable />` with `selectedKeys=[lang]`; native hover / keyboard nav / active highlight come for free. - Drop CSS for `.theme-cycle`, `.lang-list`, `.lang-item*` (now unused). `.toolbar-btn` retained since it sizes both circular buttons. * refactor(frontend): switch sub page theme icons to AntD primitives Replace the three hand-rolled SVG theme icons (sun, moon, moon+star) with AntD `<SunOutlined />`, `<MoonOutlined />`, `<MoonFilled />` for the light / dark / ultra-dark states. Switch the theme `<Button>` to use the `icon` prop instead of children so it renders the same way as the language button. Drop `.toolbar-btn svg` CSS — no longer needed once the icon comes from AntD. * refactor(frontend): drop !important overrides from pages CSS (Clients + Log modals + Settings tabs) - ClientsPage: pagination size-changer `min-width !important` removed; the 3-level selector specificity already beats AntD's defaults. Scope `body.dark .client-card` to `.clients-page.is-dark .client-card` (avoid leaking into other pages). - LogModal + XrayLogModal: move the mobile full-screen tweaks (`top: 0`, `padding-bottom: 0`, `max-width: 100vw`) from `!important` class rules to the Modal's `style` prop; keep `.ant-modal-content` / `.ant-modal-body` overrides as plain CSS via the className. - SubscriptionFormatsTab: drop `display: block !important` on `.nested-block` — div is already block by default. - TwoFactorModal: drop `padding/background/border-radius !important` on `.qr-code`; AntD QRCode handles those itself. * refactor(frontend): scope dark overrides and switch list borders to AntD CSS variables Scope page-level dark overrides: - inbounds/InboundList: scope `.ant-table` border-radius rules and the mobile @media `.ant-card-*` tweaks to `.inbounds-page` (were global and leaked into other pages); scope `.inbound-card` dark variant to `.inbounds-page.is-dark`. - nodes/NodeList: scope `.node-card` dark to `.nodes-page.is-dark`. - xray/RoutingTab, OutboundsTab: scope `.rule-card`, `.criterion-chip`, `.criterion-more`, `.address-pill` dark to `.xray-page.is-dark`. Modernize list borders to use AntD CSS vars instead of body.dark forks: - index/BackupModal, PanelUpdateModal, VersionModal: replace hard-coded `rgba(5,5,5,0.06)` + `body.dark`/`html[data-theme]` override pairs with `var(--ant-color-border-secondary)`; replace custom text colours with `var(--ant-color-text)` / `var(--ant-color-text-tertiary)`. - xray/DnsPresetsModal: same border-color treatment. - xray/NordModal, WarpModal: collapse `.row-odd` light + `body.dark` pair into a single neutral `rgba(128,128,128,0.06)` that works on both themes; scope under `.nord-data-table` / `.warp-data-table`. * refactor(frontend): switch shared components CSS to AntD CSS variables Replace body.dark / html[data-theme] forks with AntD CSS variables in shared components (work in both light and dark, scale to ultra): - SettingListItem: borders + text colours via `--ant-color-border-secondary`, `--ant-color-text`, `--ant-color-text-tertiary`. - InputAddon: bg/border/text via `--ant-color-fill-tertiary`, `--ant-color-border`, `--ant-color-text`. - JsonEditor: host border/bg via `--ant-color-border`, `--ant-color-bg-container`; focus border via `--ant-color-primary`. - Sparkline (SVG): grid/text colours via `--ant-color-text*` and `--ant-color-border-secondary`; only the tooltip drop-shadow retains a body.dark fork (filter opacity needs explicit value). * refactor(frontend): swap custom Sparkline SVG for Recharts AreaChart Replace the 368-line hand-rolled SVG sparkline (with manual ResizeObserver, gradient/shadow/glow filters, grid + ticks + tooltip, custom Y-axis label thinning) with a thin Recharts `<AreaChart>` wrapper that keeps the same prop API. - Preserved props: data, labels, height, stroke, strokeWidth, maxPoints, showGrid, fillOpacity, showMarker, markerRadius, showAxes, yTickStep, tickCountX, showTooltip, valueMin, valueMax, yFormatter, tooltipFormatter. - Dropped: `vbWidth`, `gridColor`, `paddingLeft/Right/Top/Bottom` — Recharts' ResponsiveContainer handles width, and margins are wired to whether axes are visible. Removed the unused `vbWidth` prop from SystemHistoryModal, XrayMetricsModal, NodeHistoryPanel callsites. - Tooltip, grid, and axis text now use AntD CSS variables for automatic light/dark adaptation; replaced the SVG body.dark forks in Sparkline.css with a single 5-line stylesheet. - Bundle: vendor +~100KB gzip (Recharts + its d3 deps), trade-off for less custom chart code to maintain and a more standard API for future charts (multi-series, brush, etc.). * build(frontend): split Recharts + d3 deps into vendor-recharts chunk Pulls Recharts (~75KB gzip) and its d3-shape/array/color/path/scale + victory-vendor deps out of the catch-all vendor chunk so they load on demand on the three pages that use Sparkline (SystemHistoryModal, XrayMetricsModal, NodeHistoryPanel) and cache independently from the rest of the panel JS. * refactor(frontend): drop body.dark forks in favor of AntD CSS variables - ClientInfoModal/InboundInfoModal: link-panel-text and link-panel-anchor now use var(--ant-color-fill-tertiary) and color-mix on --ant-color-primary, removing the body.dark light/dark background pair. - InboundFormModal: advanced-panel uses --ant-color-border-secondary and --ant-color-fill-quaternary; body.dark/html[data-theme='ultra-dark'] pair gone. - CustomGeoSection: custom-geo-count, custom-geo-ext-code, custom-geo-copyable:hover use --ant-color-fill-tertiary/-secondary; body.dark forks gone. - SystemHistoryModal: cpu-chart-wrap collapsed from three theme-specific gradients into one using color-mix on --ant-color-primary and --ant-color-fill-quaternary. - page-cards.css: body.dark / html[data-theme='ultra-dark'] selectors renamed to page-scoped .is-dark / .is-dark.is-ultra, keeping the same shadow tuning but consistent with the page-scoping convention used elsewhere. * refactor(sidebar): modernize AppSidebar with AntD CSS variables and icons - Replace hardcoded rgba(0,0,0,X) colors with var(--ant-color-text) and var(--ant-color-text-secondary) so light/dark adapt automatically. - Replace rgba(128,128,128,0.15) borders with var(--ant-color-border-secondary) and rgba(128,128,128,0.18) backgrounds with var(--ant-color-fill-tertiary). - Drop all body.dark/html[data-theme='ultra-dark'] color forks for .drawer-brand, .sider-brand, .drawer-close, .sidebar-theme-cycle, .sidebar-donate (CSS variables already adapt). - Drop the body.dark Drawer background !important pair; AntD's colorBgElevated token from the dark algorithm handles it now. - Replace inline sun/moon SVGs in ThemeCycleButton with AntD's SunOutlined/MoonOutlined/MoonFilled to match LoginPage/SubPage. - Convert .sidebar-theme-cycle hover and the menu item selected/hover highlights from hardcoded #4096ff to color-mix on --ant-color-primary, keeping !important on menu rules to beat AntD's CSS-in-JS specificity. * refactor(frontend): swap hardcoded AntD palette colors for CSS variables The dot/badge/pill styles still hardcoded AntD's default palette values (#52c41a, #1677ff, #ff4d4f, #fa8c16, #ff4d4f). Replace each with its semantic --ant-color-* equivalent so they auto-adapt to any theme customization through ConfigProvider. - ClientsPage: .dot-green/.dot-blue/.dot-red/.dot-orange/.dot-gray now use --ant-color-success / -primary / -error / -warning / -text-quaternary. .bulk-count / .client-card / .client-card.is-selected backgrounds use color-mix on --ant-color-primary and --ant-color-fill-quaternary, which also let the body-dark .client-card fork go away. - XrayMetricsModal: .obs-dot is-alive/is-dead and its pulse keyframe now build their box-shadow tint via color-mix on --ant-color-success and --ant-color-error instead of rgba literals. - IndexPage: .action-update warning color uses --ant-color-warning. - OutboundsTab: .outbound-card border, .address-pill background, and .mode-badge tint now use AntD CSS variables; the .xray-page.is-dark .address-pill fork is gone. - InboundFormModal/InboundsPage/ClientBulkAddModal: drop the stale `, #1677ff`/`, #1890ff` fallbacks on var(--ant-color-primary), and switch .danger-icon to --ant-color-error. The teal/cyan brand colors (#008771, #3c89e8, #e04141) used by traffic and pill rows are intentionally kept hardcoded — they are brand-specific shades, not AntD palette colors. * refactor(frontend): swap neutral gray rgba literals for AntD CSS variables Across 12 files the same neutral grays kept reappearing — rgba(128,128,128, 0.06|0.08|0.12|0.15|0.18|0.2|0.25) for borders, dividers, and subtle backgrounds. Each maps cleanly to an AntD CSS variable that already adapts to light/dark and to any theme customization through ConfigProvider: - 0.12–0.18 borders → var(--ant-color-border-secondary) - 0.2–0.25 borders → var(--ant-color-border) - 0.06–0.08 backgrounds → var(--ant-color-fill-tertiary) - 0.02–0.03 card surfaces → var(--ant-color-fill-quaternary) Card surfaces (InboundList .inbound-card, NodeList .node-card) had a light/dark fork pair — the variable covers both, so the .is-dark .card override is gone. RoutingTab .rule-card.drop-before/after used hardcoded #1677ff for the inset focus shadow; replaced with var(--ant-color-primary) so reordering indicators follow the theme primary. ClientsPage bucketBadgeColor returned hex literals (#ff4d4f, #fa8c16, #52c41a, rgba gray) for a Badge color prop. Switched to status="error"| "warning"|"success"|"default" so the dot color now comes from AntD's semantic palette directly. * refactor(xray): collapse RoutingTab dark forks into AntD CSS variables - .criterion-more bg light/dark fork → var(--ant-color-fill-tertiary) - .xray-page.is-dark .rule-card and .criterion-chip overrides removed; the rules already use --bg-card and --ant-color-fill-tertiary that adapt to the theme on their own. * refactor(frontend): inline style hex literals and Alert icon redundancy - FinalMaskForm: five DeleteOutlined icons used rgb(255,77,79) inline; swap for var(--ant-color-error) so they follow theme customization. - NodesPage: CheckCircleOutlined / CloseCircleOutlined statistic prefixes switch to var(--ant-color-success) / -error. - NodeList: ExclamationCircleOutlined warning icons (two callsites) now use var(--ant-color-warning). - BasicsTab: four <Alert type="warning"> blocks shipped a custom ExclamationCircleFilled icon styled to match the warning palette — exactly the icon and color AntD Alert renders for type="warning" by default. Replace the icon prop with showIcon and drop the now-unused ExclamationCircleFilled import. - JsonEditor: focus-within box-shadow tint now uses color-mix on --ant-color-primary instead of an rgba(22,119,255,0.1) literal. * refactor(logs): collapse log-container dark forks to AntD CSS variables LogModal and XrayLogModal each had a body.dark fork that overrode the log container's background, border-color, and text color in addition to the --log-* severity tokens. Background/border/color all map cleanly to var(--ant-color-fill-tertiary) / var(--ant-color-border) / var(--ant-color-text) which already adapt to the theme, so only the severity color tokens remain inside the dark/ultra-dark blocks. * refactor(xray): drop stale --ant-primary-color fallbacks and hex literals - RoutingTab .drop-before/.drop-after box-shadow: #1677ff → var(--ant-color-primary) - OutboundFormModal .random-icon: drop the --ant-primary-color/#1890ff pair (the old AntD v4 token name with stale fallback) for the v6 --ant-color-primary; .danger-icon hex #ff4d4f → var(--ant-color-error). - XrayPage .restart-icon: same drop of the --ant-primary-color fallback. These were all leftovers from the AntD v4 → v6 rename — the v6 --ant-color-primary is already populated by ConfigProvider, so the fallback hex was dead code that would only trigger if AntD wasn't mounted. * refactor(frontend): consolidate margin utility classes into one stylesheet Page CSS files each carried their own copies of the same atomic margin utilities (.mt-4, .mt-8, .mb-12, .ml-8, .my-10, ...). The definitions were identical everywhere they appeared, with each file holding only the subset it happened to need. Move all of them into a single styles/utils.css imported once from main.tsx, and delete the per-page copies from InboundFormModal, CustomGeoSection, PanelUpdateModal, VersionModal, BasicsTab, NordModal, OutboundFormModal, and WarpModal. The classes are available globally on the panel app; login.tsx and subpage.tsx entries do not consume any of them so they stay untouched. * refactor(frontend): consolidate shared page-shell rules into one stylesheet Every panel page CSS file repeated the same wrapper boilerplate — the --bg-page/--bg-card token triples for light/dark/ultra-dark, the min-height + background root rule, the .ant-layout transparent reset, the .content-shell transparent reset, and the .loading-spacer min-height. That's ~30 identical lines duplicated across IndexPage, ClientsPage, InboundsPage, XrayPage, SettingsPage, NodesPage, and ApiDocsPage. Move all of it into styles/page-shell.css and import it once from main.tsx alongside utils.css and page-cards.css. Each page CSS file now only contains genuinely page-specific rules (content-area padding overrides, page-specific tokens like ApiDocs's Swagger --sw-* set). Also drop the per-page `import '@/styles/page-cards.css'` statements from the 7 page tsx files now that main.tsx loads it globally. Net: -211 deleted, +6 inserted in the touched files, plus the new page-shell.css. .zero-margin (Divider override used by Nord/Warp modals) folded into utils.css alongside the margin classes. * refactor(frontend): move default content-area padding to page-shell.css After page-shell.css landed, six of the seven panel pages still kept an identical `.X-page .content-area { padding: 24px }` desktop rule, plus three of them kept an identical `padding: 8px` mobile rule. Hoist both defaults into page-shell.css under a single 6-page selector group and delete the per-page copies. What stays page-specific: - IndexPage keeps its mobile override (padding 12px + padding-top: 64px for the fixed drawer handle clearance). - ApiDocsPage keeps its tighter desktop padding (16px) and its own mobile padding-top: 56px. Settings .ldap-no-inbounds also switches from #999 to var(--ant-color-text-tertiary) for theme adaptation. * refactor(frontend): hoist .header-row, .icons-only, .summary-card to page-shell.css Settings and Xray pages both carried identical .header-row / .header-actions / .header-info rules and an identical six-rule .icons-only block that styles tabbed page navigation. Clients, Inbounds, and Nodes all carried identical .summary-card padding rules with the same mobile reduction. None of these are page-specific. Consolidate: - .header-row family → page-shell scoped to .settings-page, .xray-page - .icons-only family → page-shell global (the class is a deliberate opt-in marker, no scope needed) - .summary-card → page-shell scoped to .clients-page, .inbounds-page, .nodes-page (also fixes InboundsPage's missing scope — its rule was global and would have matched stray .summary-card uses elsewhere) InboundsPage.css and NodesPage.css became empty after the move so the files and their per-page imports are deleted. * refactor(frontend): hoist .random-icon to utils.css Three form modals each carried identical .random-icon styles (small primary-tinted icon next to randomizable inputs): ClientBulkAddModal, InboundFormModal, OutboundFormModal Single definition lives in utils.css now. ClientBulkAddModal.css was just this one rule, so the file and its import are deleted along the way. .danger-icon is left per file — the margin-left differs slightly between InboundFormModal (6px) and OutboundFormModal (8px), so it stays as a page-local rule rather than getting averaged into utils.css. * refactor(frontend): hoist .danger-icon to utils.css and use it everywhere InboundFormModal (margin-left 6px) and OutboundFormModal (margin-left 8px) each carried their own .danger-icon, and FinalMaskForm wrote the same color/cursor/marginLeft trio inline five times. Unify on a single .danger-icon in utils.css with margin-left: 8px — matching the more generous OutboundFormModal value — and: - Drop the per-file .danger-icon copies from InboundFormModal.css and OutboundFormModal.css. - Replace the five inline style props in FinalMaskForm.tsx with className="danger-icon". The visible change is a 2px wider gap to the right of the delete icons on InboundFormModal's protocol/peer dividers.	2026-05-25 14:34:53 +02:00