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.

frontend/src/hooks/usePageTitle.ts

@@ -1,22 +1,25 @@
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
-const TITLES: Record<string, string> = {
-  '/': 'Overview',
-  '/inbounds': 'Inbounds',
-  '/clients': 'Clients',
-  '/nodes': 'Nodes',
-  '/settings': 'Settings',
-  '/xray': 'Xray Config',
-  '/api-docs': 'API Docs',
+const TITLE_KEYS: Record<string, string> = {
+  '/': 'menu.dashboard',
+  '/inbounds': 'menu.inbounds',
+  '/clients': 'menu.clients',
+  '/nodes': 'menu.nodes',
+  '/settings': 'menu.settings',
+  '/xray': 'menu.xray',
+  '/api-docs': 'menu.apiDocs',
 };
 
 export function usePageTitle() {
   const { pathname } = useLocation();
+  const { t } = useTranslation();
 
   useEffect(() => {
-    const title = TITLES[pathname] || '3X-UI';
+    const key = TITLE_KEYS[pathname];
+    const title = key ? t(key) : '3X-UI';
     const host = window.location.hostname;
     document.title = host ? `${host} - ${title}` : title;
-  }, [pathname]);
+  }, [pathname, t]);
 }