chore(ui): polish empty states + sidebar icon + i18n page titles

- AppSidebar: switch the inbounds icon from UserOutlined (a single
  person — wrong semantic) to ImportOutlined, matching the empty-state
  icon and reflecting the actual concept of an incoming entry point.
- usePageTitle: stop hardcoding English titles; resolve them through
  i18n (menu.* keys are already translated), so the browser tab now
  follows the active language.
- InboundList / NodeList: replace the bare "—" empty cell with a
  centered icon + t('noData') message (ImportOutlined for inbounds,
  ClusterOutlined for nodes), and swap opacity:0.4 for
  var(--ant-color-text-secondary) so the text stays readable on the
  light theme's tinted card background.
This commit is contained in:
MHSanaei
2026-05-27 15:06:57 +02:00
parent 2bba1d21d2
commit 6286bb8676
6 changed files with 54 additions and 20 deletions
+4 -4
View File
@@ -10,6 +10,7 @@ import {
CloseOutlined,
DashboardOutlined,
HeartOutlined,
ImportOutlined,
LogoutOutlined,
MenuOutlined,
MoonFilled,
@@ -18,7 +19,6 @@ import {
SunOutlined,
TeamOutlined,
ToolOutlined,
UserOutlined,
} from '@ant-design/icons';
import { HttpUtil } from '@/utils';
@@ -29,11 +29,11 @@ const SIDEBAR_COLLAPSED_KEY = 'isSidebarCollapsed';
const DONATE_URL = 'https://donate.sanaei.dev/';
const LOGOUT_KEY = '__logout__';
type IconName = 'dashboard' | 'user' | 'team' | 'setting' | 'tool' | 'cluster' | 'logout' | 'apidocs';
type IconName = 'dashboard' | 'inbound' | 'team' | 'setting' | 'tool' | 'cluster' | 'logout' | 'apidocs';
const iconByName: Record<IconName, ComponentType> = {
dashboard: DashboardOutlined,
user: UserOutlined,
inbound: ImportOutlined,
team: TeamOutlined,
setting: SettingOutlined,
tool: ToolOutlined,
@@ -101,7 +101,7 @@ export default function AppSidebar() {
const tabs = useMemo<{ key: string; icon: IconName; title: string }[]>(() => [
{ key: '/', icon: 'dashboard', title: t('menu.dashboard') },
{ key: '/inbounds', icon: 'user', title: t('menu.inbounds') },
{ key: '/inbounds', icon: 'inbound', title: t('menu.inbounds') },
{ key: '/clients', icon: 'team', title: t('menu.clients') },
{ key: '/nodes', icon: 'cluster', title: t('menu.nodes') },
{ key: '/settings', icon: 'setting', title: t('menu.settings') },