From 903e8ed93afc5b35d0fa1d33c86da2b3fae9ba9f Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Mon, 6 Jul 2026 22:48:01 +0800
Subject: [PATCH] fix(web): clarify archive session confirmation copy (#1428)

* fix(web): clarify archive session confirmation copy

* fix(web): drop delete mention from archive confirmation copy

* feat(web): add archived-sessions restore entry to mobile settings

Mobile used a separate settings bottom-sheet with no archived-sessions
restore surface, so the archive confirmation pointing users to Settings
to restore was untrue on mobile. Add an Archived sessions sub-view to
the mobile settings sheet with search, sort and restore, mirroring the
desktop Settings tab.

* fix(web): refresh mobile archived list and use Input primitive

Refresh the archived-sessions list each time the mobile sub-view opens so
sessions archived from the mobile switcher show up without remounting the
sheet, and replace the hand-rolled search input plus inline svg with the
shared Input primitive.

* fix(web): use Button primitive for mobile archived restore

Render the mobile Archived sessions restore action with the shared Button
primitive instead of a hand-rolled button and scoped CSS, matching the
desktop archived list and the app's design-system rule.
---
 .changeset/web-archive-confirm-copy.md        |   5 +
 .../components/mobile/MobileSettingsSheet.vue | 217 +++++++++++++++++-
 apps/kimi-web/src/i18n/locales/en/mobile.ts   |   3 +
 apps/kimi-web/src/i18n/locales/en/sidebar.ts  |   2 +-
 apps/kimi-web/src/i18n/locales/zh/mobile.ts   |   3 +
 apps/kimi-web/src/i18n/locales/zh/sidebar.ts  |   2 +-
 6 files changed, 228 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/web-archive-confirm-copy.md

diff --git a/.changeset/web-archive-confirm-copy.md b/.changeset/web-archive-confirm-copy.md
new file mode 100644
index 000000000..97ecc63b0
--- /dev/null
+++ b/.changeset/web-archive-confirm-copy.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+web: Add an Archived sessions entry to the mobile settings sheet and clarify the archive confirmation to mention restoring from Settings.
diff --git a/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue b/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
index 07697e723..24034c703 100644
--- a/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
+++ b/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
@@ -6,11 +6,12 @@
 <!-- (theme / color scheme / language) and the sign-in/out entry, which previously -->
 <!-- had no mobile counterpart. -->
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { ConversationStatus, PermissionMode } from '../../types';
-import type { AppModel, ThinkingLevel } from '../../api/types';
+import type { AppModel, AppSession, ThinkingLevel } from '../../api/types';
 import type { ColorScheme } from '../../composables/useKimiWebClient';
+import { useKimiWebClient } from '../../composables/useKimiWebClient';
 import {
   coerceThinkingForModel,
   commitLevel,
@@ -20,6 +21,8 @@ import {
 } from '../../lib/modelThinking';
 import BottomSheet from '../dialogs/BottomSheet.vue';
 import LanguageSwitcher from '../settings/LanguageSwitcher.vue';
+import Button from '../ui/Button.vue';
+import Input from '../ui/Input.vue';
 import SegmentedControl from '../ui/SegmentedControl.vue';
 
 const { t } = useI18n();
@@ -146,6 +149,94 @@ function onLogout(): void {
   emit('logout');
   emit('update:modelValue', false);
 }
+
+// ---------------------------------------------------------------------------
+// Archived-sessions sub-view — mirrors the desktop Settings "Archived" tab so
+// the mobile archive confirmation (which points users to Settings to restore)
+// is true here too. Loads all archived sessions once when the view opens;
+// search + sort run client-side over the full set.
+// ---------------------------------------------------------------------------
+const client = useKimiWebClient();
+type SheetView = 'main' | 'archived';
+const view = ref<SheetView>('main');
+
+const archivedItems = ref<AppSession[]>([]);
+const archivedLoading = ref(false);
+const archivedLoaded = ref(false);
+const archiveQuery = ref('');
+const archiveSort = ref<'archived-desc' | 'created-desc' | 'name-asc'>('archived-desc');
+
+const ARCHIVED_PAGE_SIZE = 100;
+
+async function loadAllArchived(): Promise<void> {
+  if (archivedLoading.value) return;
+  archivedLoading.value = true;
+  archivedLoaded.value = false;
+  try {
+    const all: AppSession[] = [];
+    let beforeId: string | undefined;
+    for (;;) {
+      const page = await client.loadArchivedSessions({ beforeId, pageSize: ARCHIVED_PAGE_SIZE });
+      all.push(...page.items);
+      if (!page.hasMore || page.items.length === 0) break;
+      const next = page.items.at(-1)?.id;
+      if (next === undefined) break;
+      beforeId = next;
+    }
+    archivedItems.value = all;
+    archivedLoaded.value = true;
+  } catch (err) {
+    console.warn('loadAllArchived failed', err);
+  } finally {
+    archivedLoading.value = false;
+  }
+}
+
+function openArchived(): void {
+  view.value = 'archived';
+  archiveQuery.value = '';
+  void loadAllArchived();
+}
+
+function backToMain(): void {
+  view.value = 'main';
+}
+
+const filteredArchived = computed<AppSession[]>(() => {
+  const q = archiveQuery.value.trim().toLowerCase();
+  let rows = archivedItems.value.filter((s) => s.archived === true);
+  if (q) rows = rows.filter((s) => s.title.toLowerCase().includes(q));
+  rows = rows.slice();
+  if (archiveSort.value === 'archived-desc') {
+    rows.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
+  } else if (archiveSort.value === 'created-desc') {
+    rows.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+  } else {
+    rows.sort((a, b) => a.title.localeCompare(b.title, 'zh'));
+  }
+  return rows;
+});
+
+async function onRestore(id: string): Promise<void> {
+  const ok = await client.restoreSession(id);
+  if (ok) archivedItems.value = archivedItems.value.filter((s) => s.id !== id);
+}
+
+function archiveTime(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  const pad = (n: number): string => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+// Reset to the main view whenever the sheet is closed, so reopening starts at
+// the top rather than mid-list.
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (!open) view.value = 'main';
+  },
+);
 </script>
 
 <template>
@@ -154,6 +245,7 @@ function onLogout(): void {
     :title="t('mobile.settingsTitle')"
     @update:model-value="emit('update:modelValue', $event)"
   >
+    <template v-if="view === 'main'">
     <div class="group-title">{{ t('mobile.groupSession') }}</div>
 
     <!-- Model → opens ModelPicker -->
@@ -228,6 +320,15 @@ function onLogout(): void {
 
     <div class="group-title">{{ t('mobile.groupApp') }}</div>
 
+    <!-- Archived sessions → opens the archived restore sub-view -->
+    <button type="button" class="srow" @click="openArchived">
+      <span class="srow-main">
+        <span class="srow-label">{{ t('mobile.archivedSessions') }}</span>
+        <span class="srow-sub">{{ t('mobile.archivedSessionsSub') }}</span>
+      </span>
+      <span class="chev">›</span>
+    </button>
+
     <!-- App preferences (the desktop settings-popover controls) -->
     <div class="srow read-only pref">
       <span class="srow-main">
@@ -297,6 +398,53 @@ function onLogout(): void {
       </span>
       <span class="srow-val dim">{{ serverVersion }}</span>
     </div>
+    </template>
+
+    <template v-else>
+      <!-- Archived sessions sub-view -->
+      <div class="arch-subhead">
+        <button type="button" class="arch-back" @click="backToMain">
+          <span class="chev back">‹</span> {{ t('mobile.archivedBack') }}
+        </button>
+        <span class="arch-count">{{ t('mobile.sessionCount', { n: filteredArchived.length }) }}</span>
+      </div>
+
+      <div class="arch-tools">
+        <Input
+          class="arch-search-input"
+          :model-value="archiveQuery"
+          size="sm"
+          :placeholder="t('settings.archivedSearch')"
+          @update:model-value="archiveQuery = $event"
+        />
+        <SegmentedControl
+          size="sm"
+          :model-value="archiveSort"
+          :options="[
+            { value: 'archived-desc', label: t('settings.archivedSortArchived') },
+            { value: 'created-desc', label: t('settings.archivedSortCreated') },
+            { value: 'name-asc', label: t('settings.archivedSortName') },
+          ]"
+          @update:model-value="archiveSort = $event as 'archived-desc' | 'created-desc' | 'name-asc'"
+        />
+      </div>
+
+      <div v-if="archivedLoading" class="arch-empty">{{ t('settings.archivedLoadingAll') }}</div>
+
+      <template v-else-if="filteredArchived.length > 0">
+        <div v-for="s in filteredArchived" :key="s.id" class="arch-row">
+          <div class="arch-meta">
+            <div class="arch-name">{{ s.title }}</div>
+            <div class="arch-time">{{ t('settings.archivedAt', { time: archiveTime(s.updatedAt) }) }}</div>
+          </div>
+          <Button variant="secondary" size="sm" @click="onRestore(s.id)">{{ t('settings.archivedRestore') }}</Button>
+        </div>
+      </template>
+
+      <div v-else class="arch-empty">
+        {{ archivedItems.length === 0 ? t('settings.archivedEmpty') : t('settings.archivedNoMatch') }}
+      </div>
+    </template>
   </BottomSheet>
 </template>
 
@@ -478,4 +626,69 @@ function onLogout(): void {
 .srow,
 .srow-sub,
 .srow-val { font-family: var(--sans); }
+
+/* Archived sessions sub-view */
+.arch-subhead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3) var(--space-1);
+}
+.arch-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  border: none;
+  background: none;
+  padding: var(--space-1) var(--space-2) var(--space-1) 0;
+  font-family: var(--font-ui);
+  font-size: var(--text-base);
+  color: var(--color-accent-hover);
+  cursor: pointer;
+}
+.chev.back { font-size: 20px; }
+.arch-count {
+  font-family: var(--font-ui);
+  font-size: var(--text-sm);
+  color: var(--color-text-faint);
+}
+.arch-tools {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  flex-wrap: wrap;
+}
+.arch-search-input { flex: 1; min-width: 160px; }
+.arch-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: 56px;
+  padding: var(--space-2) var(--space-3);
+  border-top: 1px solid var(--color-line);
+}
+.arch-row:first-of-type { border-top: none; }
+.arch-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.arch-name {
+  font-family: var(--font-ui);
+  font-size: var(--text-base);
+  color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.arch-time {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-text-faint);
+}
+.arch-empty {
+  padding: var(--space-6) var(--space-4);
+  text-align: center;
+  font-family: var(--font-ui);
+  font-size: var(--text-sm);
+  color: var(--color-text-faint);
+}
 </style>
diff --git a/apps/kimi-web/src/i18n/locales/en/mobile.ts b/apps/kimi-web/src/i18n/locales/en/mobile.ts
index 01dc4ecd4..ae60023dd 100644
--- a/apps/kimi-web/src/i18n/locales/en/mobile.ts
+++ b/apps/kimi-web/src/i18n/locales/en/mobile.ts
@@ -16,4 +16,7 @@ export default {
   permYoloSub: 'auto-approve all',
   planModeSub: 'Plan mode',
   swarmModeSub: 'Swarm mode',
+  archivedSessions: 'Archived sessions',
+  archivedSessionsSub: 'Browse and restore archived sessions',
+  archivedBack: 'Back',
 } as const;
diff --git a/apps/kimi-web/src/i18n/locales/en/sidebar.ts b/apps/kimi-web/src/i18n/locales/en/sidebar.ts
index cda064d44..3bb705ca3 100644
--- a/apps/kimi-web/src/i18n/locales/en/sidebar.ts
+++ b/apps/kimi-web/src/i18n/locales/en/sidebar.ts
@@ -12,7 +12,7 @@ export default {
   newChat: 'New Chat',
   newWorkspace: 'New Workspace',
   emptyState: 'No sessions yet · click New Session to start',
-  archiveConfirm: 'Archive session?',
+  archiveConfirm: 'Archive this session? You can restore it later from Settings.',
   options: 'Options',
   rename: 'Rename',
   copyPath: 'Copy path',
diff --git a/apps/kimi-web/src/i18n/locales/zh/mobile.ts b/apps/kimi-web/src/i18n/locales/zh/mobile.ts
index f4f8690f7..22799adf2 100644
--- a/apps/kimi-web/src/i18n/locales/zh/mobile.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/mobile.ts
@@ -16,4 +16,7 @@ export default {
   permYoloSub: '全部自动批准',
   planModeSub: '计划模式',
   swarmModeSub: 'Swarm 模式',
+  archivedSessions: '已归档会话',
+  archivedSessionsSub: '查看并恢复已归档会话',
+  archivedBack: '返回',
 } as const;
diff --git a/apps/kimi-web/src/i18n/locales/zh/sidebar.ts b/apps/kimi-web/src/i18n/locales/zh/sidebar.ts
index 473f3eeca..bea56f556 100644
--- a/apps/kimi-web/src/i18n/locales/zh/sidebar.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/sidebar.ts
@@ -12,7 +12,7 @@ export default {
   newChat: '新建对话',
   newWorkspace: '新建工作区',
   emptyState: '还没有会话 · 点击 新建会话 开始',
-  archiveConfirm: '归档会话？',
+  archiveConfirm: '确认归档会话？归档后可以从「设置」中恢复',
   options: '选项',
   rename: '重命名',
   copyPath: '复制路径',