From f205cce04445938f67029b6e746b9a52b26131c8 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 8 May 2026 13:32:44 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20Phase=205f-ii=20=E2=80=94=20i?=
 =?UTF-8?q?nbound=20list=20table=20+=20search/filter=20+=20auto-refresh?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fleshes out the inbound list with the full column set, search & filter
toolbar, row enable toggle wired to /panel/api/inbounds/setEnable/:id,
and a per-row action dropdown that emits events the parent will route
to modals as those land in 5f-iii through 5f-vii.

- InboundList.vue (new): toolbar (Add inbound + General actions
  dropdown + Refresh + auto-refresh popover), search-or-filter switch
  with the legacy radio buttons (Active/Disabled/Depleted/Depleting/
  Online), and a a-table with desktop and mobile column variants.
  Cells use AD-Vue 4's #bodyCell slot — protocol/clients/traffic/
  allTime/expiry/info cells render the same popovers and tags as
  legacy. Row enable switch is optimistic with rollback on POST
  failure.
- visibleInbounds computed mirrors the legacy search and filter
  projection: deep search through dbInbound + clients, or filter
  reduces inbound.settings.clients to the selected bucket so the
  table only shows matching client rows.
- Auto-refresh interval is read/written to localStorage with the
  same keys (`isRefreshEnabled`, `refreshInterval`) as the legacy
  panel. WebSocket delta updates are still deferred.
- Action menu emits event payloads {key, dbInbound}; the parent
  currently shows a "coming in later 5f subphase" toast for each.
  Modals (edit/qr/clone/delete/reset/info/clients) land in
  5f-iii through 5f-vii.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/pages/inbounds/InboundList.vue  | 516 +++++++++++++++++++
 frontend/src/pages/inbounds/InboundsPage.vue |  89 ++--
 2 files changed, 553 insertions(+), 52 deletions(-)
 create mode 100644 frontend/src/pages/inbounds/InboundList.vue

diff --git a/frontend/src/pages/inbounds/InboundList.vue b/frontend/src/pages/inbounds/InboundList.vue
new file mode 100644
index 00000000..020a9aaa
--- /dev/null
+++ b/frontend/src/pages/inbounds/InboundList.vue
@@ -0,0 +1,516 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import {
+  PlusOutlined,
+  MenuOutlined,
+  SyncOutlined,
+  DownOutlined,
+  SearchOutlined,
+  FilterOutlined,
+  MoreOutlined,
+  EditOutlined,
+  QrcodeOutlined,
+  UserAddOutlined,
+  UsergroupAddOutlined,
+  CopyOutlined,
+  FileDoneOutlined,
+  ExportOutlined,
+  ImportOutlined,
+  ReloadOutlined,
+  RestOutlined,
+  RetweetOutlined,
+  BlockOutlined,
+  DeleteOutlined,
+  InfoCircleOutlined,
+} from '@ant-design/icons-vue';
+
+import { HttpUtil, ObjectUtil, SizeFormatter, IntlUtil, ColorUtils } from '@/utils';
+import { DBInbound } from '@/models/dbinbound.js';
+import { Inbound } from '@/models/inbound.js';
+
+const props = defineProps({
+  dbInbounds: { type: Array, required: true },
+  clientCount: { type: Object, required: true },
+  onlineClients: { type: Array, required: true },
+  refreshing: { type: Boolean, default: false },
+  expireDiff: { type: Number, default: 0 },
+  trafficDiff: { type: Number, default: 0 },
+  pageSize: { type: Number, default: 0 },
+  isMobile: { type: Boolean, default: false },
+  subEnable: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'refresh',
+  'add-inbound',
+  'general-action',
+  'row-action',
+]);
+
+// ============ Toolbar / search & filter =============================
+const enableFilter = ref(false);
+const searchKey = ref('');
+const filterBy = ref('');
+
+// Auto-refresh — same defaults as legacy (5s, opt-in via switch).
+const isRefreshEnabled = ref(localStorage.getItem('isRefreshEnabled') === 'true');
+const refreshIntervalMs = ref(Number(localStorage.getItem('refreshInterval')) || 5000);
+
+let timer = null;
+function startAutoRefresh() {
+  stopAutoRefresh();
+  timer = setInterval(() => emit('refresh'), refreshIntervalMs.value);
+}
+function stopAutoRefresh() {
+  if (timer != null) {
+    clearInterval(timer);
+    timer = null;
+  }
+}
+watch(isRefreshEnabled, (next) => {
+  localStorage.setItem('isRefreshEnabled', String(next));
+  if (next) startAutoRefresh();
+  else stopAutoRefresh();
+}, { immediate: true });
+watch(refreshIntervalMs, (next) => {
+  localStorage.setItem('refreshInterval', String(next));
+  if (isRefreshEnabled.value) startAutoRefresh();
+});
+
+// Toggle the filter mode — flip cleans the other input.
+function onToggleFilter() {
+  if (enableFilter.value) searchKey.value = '';
+  else filterBy.value = '';
+}
+
+// ============ Search / filter projection =============================
+// Mirrors the legacy logic: when searching, keep inbounds that match
+// anywhere (deep search); when filtering, keep inbounds that have at
+// least one client in the requested bucket and reduce their settings
+// to that bucket.
+function projectInbound(dbInbound, predicate) {
+  const next = new DBInbound(dbInbound);
+  let settings = {};
+  try {
+    settings = JSON.parse(dbInbound.settings || '{}');
+  } catch (_e) {
+    settings = {};
+  }
+  if (!Array.isArray(settings.clients)) return next;
+  const filtered = settings.clients.filter(predicate);
+  next.settings = Inbound.Settings.fromJson(dbInbound.protocol, { clients: filtered });
+  next.invalidateCache();
+  return next;
+}
+
+const visibleInbounds = computed(() => {
+  if (enableFilter.value) {
+    if (ObjectUtil.isEmpty(filterBy.value)) return [...props.dbInbounds];
+    const out = [];
+    for (const dbInbound of props.dbInbounds) {
+      const c = props.clientCount[dbInbound.id];
+      if (!c || !c[filterBy.value] || c[filterBy.value].length === 0) continue;
+      const list = c[filterBy.value];
+      out.push(projectInbound(dbInbound, (client) => list.includes(client.email)));
+    }
+    return out;
+  }
+  if (ObjectUtil.isEmpty(searchKey.value)) return [...props.dbInbounds];
+  const out = [];
+  for (const dbInbound of props.dbInbounds) {
+    if (!ObjectUtil.deepSearch(dbInbound, searchKey.value)) continue;
+    out.push(projectInbound(dbInbound, (client) => ObjectUtil.deepSearch(client, searchKey.value)));
+  }
+  return out;
+});
+
+// ============ Columns =================================================
+// `key`-driven so we can render via the body-cell slot below. AD-Vue 4's
+// `responsive` array still works on column defs.
+const desktopColumns = [
+  { title: 'ID', dataIndex: 'id', key: 'id', align: 'right', width: 30, responsive: ['xs'] },
+  { title: 'Action', key: 'action', align: 'center', width: 30 },
+  { title: 'Enable', key: 'enable', align: 'center', width: 35 },
+  { title: 'Remark', dataIndex: 'remark', key: 'remark', align: 'center', width: 60 },
+  { title: 'Port', dataIndex: 'port', key: 'port', align: 'center', width: 40 },
+  { title: 'Protocol', key: 'protocol', align: 'left', width: 70 },
+  { title: 'Clients', key: 'clients', align: 'left', width: 50 },
+  { title: 'Traffic', key: 'traffic', align: 'center', width: 90 },
+  { title: 'All-time', key: 'allTimeInbound', align: 'center', width: 60 },
+  { title: 'Expiry', key: 'expiryTime', align: 'center', width: 40 },
+];
+const mobileColumns = [
+  { title: 'ID', dataIndex: 'id', key: 'id', align: 'right', width: 10, responsive: ['s'] },
+  { title: 'Action', key: 'action', align: 'center', width: 25 },
+  { title: 'Remark', dataIndex: 'remark', key: 'remark', align: 'left', width: 70 },
+  { title: 'Info', key: 'info', align: 'center', width: 10 },
+];
+const columns = computed(() => (props.isMobile ? mobileColumns : desktopColumns));
+
+// ============ Pagination ============================================
+function paginationFor(rows) {
+  const size = props.pageSize > 0 ? props.pageSize : rows.length || 1;
+  return {
+    pageSize: size,
+    showSizeChanger: false,
+    hideOnSinglePage: true,
+  };
+}
+
+// ============ Per-row enable switch =================================
+async function onSwitchEnable(dbInbound, next) {
+  const previous = dbInbound.enable;
+  dbInbound.enable = next; // optimistic
+  try {
+    const formData = new FormData();
+    formData.append('enable', String(next));
+    const msg = await HttpUtil.post(`/panel/api/inbounds/setEnable/${dbInbound.id}`, formData);
+    if (!msg?.success) dbInbound.enable = previous;
+  } catch (_e) {
+    dbInbound.enable = previous;
+  }
+}
+
+// ============ Helpers shared with the templates =====================
+function isClientOnline(email) {
+  return props.onlineClients.includes(email);
+}
+
+// Whether to show the "Switch xray" / qrcode menu entry — same predicate
+// as legacy: SS single-user inbounds and WireGuard inbounds expose
+// inbound-wide QR codes.
+function showQrCodeMenu(dbInbound) {
+  if (dbInbound.isWireguard) return true;
+  if (dbInbound.isSS) {
+    try {
+      return !dbInbound.toInbound().isSSMultiUser;
+    } catch (_e) {
+      return false;
+    }
+  }
+  return false;
+}
+</script>
+
+<template>
+  <a-card hoverable>
+    <template #title>
+      <a-space direction="horizontal">
+        <a-button type="primary" @click="emit('add-inbound')">
+          <template #icon><PlusOutlined /></template>
+          <template v-if="!isMobile">Add inbound</template>
+        </a-button>
+        <a-dropdown :trigger="['click']">
+          <a-button type="primary">
+            <template #icon><MenuOutlined /></template>
+            <template v-if="!isMobile">General actions</template>
+          </a-button>
+          <template #overlay>
+            <a-menu @click="(a) => emit('general-action', a.key)">
+              <a-menu-item key="import">
+                <ImportOutlined /> Import inbound
+              </a-menu-item>
+              <a-menu-item key="export">
+                <ExportOutlined /> Export
+              </a-menu-item>
+              <a-menu-item v-if="subEnable" key="subs">
+                <ExportOutlined /> Export — Subscription
+              </a-menu-item>
+              <a-menu-item key="resetInbounds">
+                <ReloadOutlined /> Reset all traffic
+              </a-menu-item>
+              <a-menu-item key="resetClients">
+                <FileDoneOutlined /> Reset all client traffic
+              </a-menu-item>
+              <a-menu-item key="delDepletedClients" class="danger-item">
+                <RestOutlined /> Delete depleted clients
+              </a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </a-space>
+    </template>
+
+    <template #extra>
+      <a-button-group>
+        <a-button :loading="refreshing" @click="emit('refresh')">
+          <template #icon><SyncOutlined /></template>
+        </a-button>
+        <a-popover placement="bottomRight" trigger="click">
+          <template #title>
+            <div class="auto-refresh-title">
+              <a-switch v-model:checked="isRefreshEnabled" size="small" />
+              <span>Auto refresh</span>
+            </div>
+          </template>
+          <template #content>
+            <a-space direction="vertical">
+              <span>Auto-refresh interval</span>
+              <a-select
+                v-model:value="refreshIntervalMs"
+                :disabled="!isRefreshEnabled"
+                :style="{ width: '100%' }"
+              >
+                <a-select-option v-for="key in [5, 10, 30, 60]" :key="key" :value="key * 1000">
+                  {{ key }}s
+                </a-select-option>
+              </a-select>
+            </a-space>
+          </template>
+          <a-button>
+            <template #icon><DownOutlined /></template>
+          </a-button>
+        </a-popover>
+      </a-button-group>
+    </template>
+
+    <a-space direction="vertical" :style="{ width: '100%' }">
+      <!-- Search / filter toolbar -->
+      <div :class="isMobile ? 'filter-bar mobile' : 'filter-bar'">
+        <a-switch v-model:checked="enableFilter" @change="onToggleFilter">
+          <template #checkedChildren><SearchOutlined /></template>
+          <template #unCheckedChildren><FilterOutlined /></template>
+        </a-switch>
+        <a-input
+          v-if="!enableFilter"
+          v-model:value="searchKey"
+          placeholder="Search"
+          autofocus
+          :size="isMobile ? 'small' : 'middle'"
+          :style="{ maxWidth: '300px' }"
+        />
+        <a-radio-group
+          v-if="enableFilter"
+          v-model:value="filterBy"
+          button-style="solid"
+          :size="isMobile ? 'small' : 'middle'"
+        >
+          <a-radio-button value="">None</a-radio-button>
+          <a-radio-button value="active">Active</a-radio-button>
+          <a-radio-button value="deactive">Disabled</a-radio-button>
+          <a-radio-button value="depleted">Depleted</a-radio-button>
+          <a-radio-button value="expiring">Depleting</a-radio-button>
+          <a-radio-button value="online">Online</a-radio-button>
+        </a-radio-group>
+      </div>
+
+      <a-table
+        :columns="columns"
+        :data-source="visibleInbounds"
+        :row-key="(r) => r.id"
+        :pagination="paginationFor(visibleInbounds)"
+        :scroll="isMobile ? {} : { x: 1000 }"
+        :style="{ marginTop: '10px' }"
+        size="small"
+      >
+        <template #bodyCell="{ column, record }">
+          <!-- ============== Action dropdown ============== -->
+          <template v-if="column.key === 'action'">
+            <a-dropdown :trigger="['click']">
+              <MoreOutlined class="row-action-trigger" @click.prevent />
+              <template #overlay>
+                <a-menu @click="(a) => emit('row-action', { key: a.key, dbInbound: record })">
+                  <a-menu-item key="edit"><EditOutlined /> Edit</a-menu-item>
+                  <a-menu-item v-if="showQrCodeMenu(record)" key="qrcode">
+                    <QrcodeOutlined /> QR code
+                  </a-menu-item>
+                  <template v-if="record.isMultiUser()">
+                    <a-menu-item key="addClient"><UserAddOutlined /> Add client</a-menu-item>
+                    <a-menu-item key="addBulkClient"><UsergroupAddOutlined /> Add bulk clients</a-menu-item>
+                    <a-menu-item key="copyClients"><CopyOutlined /> Copy clients from inbound</a-menu-item>
+                    <a-menu-item key="resetClients"><FileDoneOutlined /> Reset client traffic</a-menu-item>
+                    <a-menu-item key="export"><ExportOutlined /> Export</a-menu-item>
+                    <a-menu-item v-if="subEnable" key="subs">
+                      <ExportOutlined /> Export — Subscription
+                    </a-menu-item>
+                    <a-menu-item key="delDepletedClients" class="danger-item">
+                      <RestOutlined /> Delete depleted clients
+                    </a-menu-item>
+                  </template>
+                  <template v-else>
+                    <a-menu-item key="showInfo"><InfoCircleOutlined /> Info</a-menu-item>
+                  </template>
+                  <a-menu-item key="clipboard"><CopyOutlined /> Export inbound</a-menu-item>
+                  <a-menu-item key="resetTraffic"><RetweetOutlined /> Reset traffic</a-menu-item>
+                  <a-menu-item key="clone"><BlockOutlined /> Clone</a-menu-item>
+                  <a-menu-item key="delete" class="danger-item">
+                    <DeleteOutlined /> Delete
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </template>
+
+          <!-- ============== Enable switch (desktop) ============== -->
+          <template v-else-if="column.key === 'enable'">
+            <a-switch
+              :checked="record.enable"
+              @change="(next) => onSwitchEnable(record, next)"
+            />
+          </template>
+
+          <!-- ============== Protocol tags ============== -->
+          <template v-else-if="column.key === 'protocol'">
+            <div class="protocol-tags">
+              <a-tag color="purple">{{ record.protocol }}</a-tag>
+              <template v-if="record.isVMess || record.isVLess || record.isTrojan || record.isSS">
+                <a-tag color="green">{{ record.toInbound().stream.network }}</a-tag>
+                <a-tag v-if="record.toInbound().stream.isTls" color="blue">TLS</a-tag>
+                <a-tag v-if="record.toInbound().stream.isReality" color="blue">Reality</a-tag>
+              </template>
+            </div>
+          </template>
+
+          <!-- ============== Clients tag + popovers ============== -->
+          <template v-else-if="column.key === 'clients'">
+            <template v-if="clientCount[record.id]">
+              <a-tag color="green" style="margin: 0">{{ clientCount[record.id].clients }}</a-tag>
+              <a-popover v-if="clientCount[record.id].deactive.length" title="Disabled">
+                <template #content>
+                  <div v-for="email in clientCount[record.id].deactive" :key="email">{{ email }}</div>
+                </template>
+                <a-tag style="margin: 0; padding: 0 2px">{{ clientCount[record.id].deactive.length }}</a-tag>
+              </a-popover>
+              <a-popover v-if="clientCount[record.id].depleted.length" title="Depleted">
+                <template #content>
+                  <div v-for="email in clientCount[record.id].depleted" :key="email">{{ email }}</div>
+                </template>
+                <a-tag color="red" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].depleted.length }}</a-tag>
+              </a-popover>
+              <a-popover v-if="clientCount[record.id].expiring.length" title="Depleting soon">
+                <template #content>
+                  <div v-for="email in clientCount[record.id].expiring" :key="email">{{ email }}</div>
+                </template>
+                <a-tag color="orange" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].expiring.length }}</a-tag>
+              </a-popover>
+              <a-popover v-if="clientCount[record.id].online.length" title="Online">
+                <template #content>
+                  <div v-for="email in clientCount[record.id].online" :key="email">{{ email }}</div>
+                </template>
+                <a-tag color="blue" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].online.length }}</a-tag>
+              </a-popover>
+            </template>
+          </template>
+
+          <!-- ============== Traffic ============== -->
+          <template v-else-if="column.key === 'traffic'">
+            <a-popover>
+              <template #content>
+                <table cellpadding="2">
+                  <tr>
+                    <td>↑ {{ SizeFormatter.sizeFormat(record.up) }}</td>
+                    <td>↓ {{ SizeFormatter.sizeFormat(record.down) }}</td>
+                  </tr>
+                  <tr v-if="record.total > 0 && record.up + record.down < record.total">
+                    <td>Remaining</td>
+                    <td>{{ SizeFormatter.sizeFormat(record.total - record.up - record.down) }}</td>
+                  </tr>
+                </table>
+              </template>
+              <a-tag :color="ColorUtils.usageColor(record.up + record.down, trafficDiff, record.total)">
+                {{ SizeFormatter.sizeFormat(record.up + record.down) }} /
+                <template v-if="record.total > 0">{{ SizeFormatter.sizeFormat(record.total) }}</template>
+                <template v-else>∞</template>
+              </a-tag>
+            </a-popover>
+          </template>
+
+          <!-- ============== All-time inbound traffic ============== -->
+          <template v-else-if="column.key === 'allTimeInbound'">
+            <a-tag>{{ SizeFormatter.sizeFormat(record.allTime || 0) }}</a-tag>
+          </template>
+
+          <!-- ============== Expiry ============== -->
+          <template v-else-if="column.key === 'expiryTime'">
+            <a-popover v-if="record.expiryTime > 0">
+              <template #content>{{ IntlUtil.formatDate(record.expiryTime) }}</template>
+              <a-tag
+                :color="ColorUtils.usageColor(Date.now(), expireDiff, record._expiryTime)"
+                style="min-width: 50px"
+              >
+                {{ IntlUtil.formatRelativeTime(record.expiryTime) }}
+              </a-tag>
+            </a-popover>
+            <a-tag v-else color="purple">∞</a-tag>
+          </template>
+
+          <!-- ============== Mobile info popover ============== -->
+          <template v-else-if="column.key === 'info'">
+            <a-popover placement="bottomRight" trigger="click">
+              <template #content>
+                <table cellpadding="2">
+                  <tr>
+                    <td>Protocol</td>
+                    <td><a-tag color="purple">{{ record.protocol }}</a-tag></td>
+                  </tr>
+                  <tr>
+                    <td>Port</td>
+                    <td><a-tag>{{ record.port }}</a-tag></td>
+                  </tr>
+                  <tr v-if="clientCount[record.id]">
+                    <td>Clients</td>
+                    <td><a-tag color="blue">{{ clientCount[record.id].clients }}</a-tag></td>
+                  </tr>
+                  <tr>
+                    <td>Traffic</td>
+                    <td>
+                      <a-tag>
+                        {{ SizeFormatter.sizeFormat(record.up + record.down) }} /
+                        <template v-if="record.total > 0">{{ SizeFormatter.sizeFormat(record.total) }}</template>
+                        <template v-else>∞</template>
+                      </a-tag>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Expiry</td>
+                    <td>
+                      <a-tag v-if="record.expiryTime > 0">{{ IntlUtil.formatRelativeTime(record.expiryTime) }}</a-tag>
+                      <a-tag v-else color="purple">∞</a-tag>
+                    </td>
+                  </tr>
+                </table>
+              </template>
+              <InfoCircleOutlined class="row-info-trigger" />
+            </a-popover>
+          </template>
+        </template>
+      </a-table>
+    </a-space>
+  </a-card>
+</template>
+
+<style scoped>
+.auto-refresh-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.filter-bar.mobile {
+  display: block;
+}
+.filter-bar.mobile > * {
+  margin-bottom: 4px;
+}
+
+.protocol-tags {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.row-action-trigger,
+.row-info-trigger {
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.danger-item {
+  color: #ff4d4f;
+}
+</style>
diff --git a/frontend/src/pages/inbounds/InboundsPage.vue b/frontend/src/pages/inbounds/InboundsPage.vue
index 111cb224..57ba0740 100644
--- a/frontend/src/pages/inbounds/InboundsPage.vue
+++ b/frontend/src/pages/inbounds/InboundsPage.vue
@@ -1,13 +1,12 @@
 <script setup>
 import { computed, onMounted } from 'vue';
-import { theme as antdTheme } from 'ant-design-vue';
+import { theme as antdTheme, message } from 'ant-design-vue';
 import {
   SwapOutlined,
   PieChartOutlined,
   HistoryOutlined,
   BarsOutlined,
   TeamOutlined,
-  SyncOutlined,
 } from '@ant-design/icons-vue';
 
 import { SizeFormatter } from '@/utils';
@@ -15,6 +14,7 @@ import { theme as themeState } from '@/composables/useTheme.js';
 import { useMediaQuery } from '@/composables/useMediaQuery.js';
 import AppSidebar from '@/components/AppSidebar.vue';
 import CustomStatistic from '@/components/CustomStatistic.vue';
+import InboundList from './InboundList.vue';
 import { useInbounds } from './useInbounds.js';
 
 const antdThemeConfig = computed(() => ({
@@ -25,7 +25,13 @@ const {
   fetched,
   refreshing,
   dbInbounds,
+  clientCount,
+  onlineClients,
   totals,
+  expireDiff,
+  trafficDiff,
+  pageSize,
+  subSettings,
   refresh,
   fetchDefaultSettings,
 } = useInbounds();
@@ -38,6 +44,19 @@ onMounted(async () => {
   await fetchDefaultSettings();
   await refresh();
 });
+
+// Modal triggers come in 5f-iii…vii. Until then, action handlers are
+// no-op placeholders that surface a "coming soon" toast so the user
+// gets feedback when clicking through the menu items.
+function onAddInbound() {
+  message.info('Inbound add/edit modal — coming in 5f-iii');
+}
+function onGeneralAction(key) {
+  message.info(`General action "${key}" — coming in a later 5f subphase`);
+}
+function onRowAction({ key }) {
+  message.info(`Row action "${key}" — coming in a later 5f subphase`);
+}
 </script>
 
 <template>
@@ -104,57 +123,23 @@ onMounted(async () => {
                 </a-card>
               </a-col>
 
-              <!-- Inbound list (basic columns; row actions/modals come in later subphases) -->
+              <!-- Inbound list — toolbar, search/filter, columns, row actions -->
               <a-col :span="24">
-                <a-card hoverable>
-                  <template #title>
-                    <span>Inbounds</span>
-                  </template>
-                  <template #extra>
-                    <a-button :loading="refreshing" @click="refresh">
-                      <template #icon><SyncOutlined /></template>
-                    </a-button>
-                  </template>
-
-                  <a-table
-                    :columns="[
-                      { title: 'Enable', dataIndex: 'enable', key: 'enable', width: 80 },
-                      { title: 'Remark', dataIndex: 'remark', key: 'remark' },
-                      { title: 'Port', dataIndex: 'port', key: 'port', width: 100 },
-                      { title: 'Protocol', dataIndex: 'protocol', key: 'protocol', width: 130 },
-                      { title: 'Traffic', key: 'traffic', width: 200 },
-                      { title: 'Expiry', key: 'expiry', width: 140 },
-                    ]"
-                    :data-source="dbInbounds"
-                    :row-key="(r) => r.id"
-                    :pagination="false"
-                    size="small"
-                  >
-                    <template #bodyCell="{ column, record }">
-                      <template v-if="column.key === 'enable'">
-                        <a-switch :checked="record.enable" disabled />
-                      </template>
-                      <template v-else-if="column.key === 'protocol'">
-                        <a-tag color="purple">{{ record.protocol }}</a-tag>
-                      </template>
-                      <template v-else-if="column.key === 'traffic'">
-                        <a-tag>
-                          {{ SizeFormatter.sizeFormat(record.up + record.down) }}
-                          <template v-if="record.total > 0">
-                            / {{ SizeFormatter.sizeFormat(record.total) }}
-                          </template>
-                          <template v-else>/ ∞</template>
-                        </a-tag>
-                      </template>
-                      <template v-else-if="column.key === 'expiry'">
-                        <a-tag v-if="record.expiryTime > 0">
-                          {{ new Date(record.expiryTime).toLocaleDateString() }}
-                        </a-tag>
-                        <a-tag v-else color="purple">∞</a-tag>
-                      </template>
-                    </template>
-                  </a-table>
-                </a-card>
+                <InboundList
+                  :db-inbounds="dbInbounds"
+                  :client-count="clientCount"
+                  :online-clients="onlineClients"
+                  :refreshing="refreshing"
+                  :expire-diff="expireDiff"
+                  :traffic-diff="trafficDiff"
+                  :page-size="pageSize"
+                  :is-mobile="isMobile"
+                  :sub-enable="subSettings.enable"
+                  @refresh="refresh"
+                  @add-inbound="onAddInbound"
+                  @general-action="onGeneralAction"
+                  @row-action="onRowAction"
+                />
               </a-col>
             </a-row>
           </a-spin>