style(history): give the page the site's own visual language

Design polish, but specific rather than "make it nicer" -- four devices the
homepage already uses, applied to the three surfaces that talk about saved
work, so they read as one feature instead of three screens.

Hairlines move into the shadow layer: box-shadow 0 0 0 1px instead of a border,
the way Geist draws surfaces. Outside the box model, so rounded corners stop
clipping a row's hover fill and the line animates with the surface. The
document list, the recovery card and the homepage's autosave line all changed
together.

Mono is for stamping, not for reading: the file-kind badge and the storage
count are machine facts and take Geist Mono, the same as the homepage's chip
and trust row. Prose stays in the sans -- the failure mode here is making every
label monospace.

Status is a dot, not a grey pill. "Not exported" marks the rows holding the
only copy of that work, which is the entire reason the list exists; a 5px dot
in the warning colour with a soft ring says that, where a grey pill said
"another piece of metadata". Same device as the homepage chip's live dot and
the recovery card's title.

The page now opens chip -> title -> intro, the homepage hero's own sequence, so
arriving from it does not feel like arriving at an admin screen.

And the empty state stops being an ellipsis where the product thinking should
be: it says why the list is empty, what will fill it, and offers the one thing
to do next -- with a real icon from ranui's set (lazily bundled as its own
chunk) rather than a typographic character standing in for one.

docs/design-system.md now carries these four devices, since the point of
writing them down is that the next page inherits them.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: chaxus

docs/design-system.md

@@ -57,12 +57,33 @@ Notion 正文 708）。**不存在"一个正确的宽度"，只存在按内容
 依据是"这个按钮作用于什么"，不是"它在哪"。一行一个的表格操作若与 CTA 同尺寸，
 一屏就变成一叠行动号召。组件库的 `size` 分级是同一个道理。
 
-## 五、颜色一律走 `--ran-*`
+## 五、四个视觉手法（站点自己的语言，新页面照抄）
+
+这几条不是装饰，是让不同页面看起来出自同一处的东西。首页早就在用，`/history`、
+恢复条、首页的自动保存条现在也用同一套：
+
+1. **hairline 画在 shadow 层，不用 border**：`box-shadow: 0 0 0 1px var(--ran-color-border)`。
+   零偏移零模糊的 1px 扩散，不占 box model，所以圆角处不会裁掉行的 hover 底色，
+   线本身也能跟着表面一起过渡。Geist 的做法，比真 border 更轻。
+2. **mono 用来"盖章"，不用来读**：文件类型、时间戳、用量这些机器事实用
+   `--ran-font-mono`（首页 chip / trust 行、`/history` 的格式徽章与计数）。
+   反过来说——**不要把每个标签都做成 mono**，正文永远是 Geist Sans。
+3. **状态用点，不用灰色 pill**：一个 6px 的圆点加一个词，点用语义色
+   （成功绿、警示橙）并带一圈 22% 透明的光晕，读起来是"亮着的"而不是"画上去的"。
+   首页 chip、`/history` 的"未导出"、恢复条标题都是这个形状。
+4. **chip → 标题 → 说明** 是页面开场的固定顺序（首页 hero 定的），
+   `/history` 沿用，所以从首页走过去不会觉得进了另一个后台。
+
+**空状态是要做产品判断的地方，不是省略号**：说明为什么是空的、接下来做什么，
+并给一个真图标（ranui 内置 52 个，`<r-icon name="book">` 零注册懒加载，
+打包成独立 chunk），不是拿排版字符凑。
+
+## 六、颜色一律走 `--ran-*`
 
 不写死任何颜色值。暗色模式因此不需要任何额外工作——token 层自己翻转，
 `/history` 的暗色版本是零成本得到的。
 
-## 六、已知的合理例外
+## 七、已知的合理例外
 
 - **首页 h1 是 64px**，比其它页大——hero 就该更重，这是有意的层级差。
 - **`/embed-demo.html` 是全宽两栏**（340px 控制面板 + 编辑器），侧栏文字行宽 41 字符。

lib/history-page.ts

@@ -13,6 +13,7 @@
  */
 import 'ranui/button';
 import 'ranui/input';
+import 'ranui/icon';
 import { Div, View } from 'ranui/builder';
 import '../styles/history.css';
 import { applyDocumentLanguage, t } from '@ranuts/shared/i18n';
@@ -90,7 +91,14 @@ function buildRow(doc: HistoryDoc, refresh: () => void): HTMLElement {
         .attr('href', `/editor?doc=${encodeURIComponent(doc.id)}`)
         .text(doc.title)
         .build(),
-      ...(hasUnsavedWork(doc) ? [Div().class('history-badge').text(t('historyUnsaved')).build()] : []),
+      ...(hasUnsavedWork(doc)
+        ? [
+            Div()
+              .class('history-badge')
+              .children(View('i').class('history-dot').build(), View('span').text(t('historyUnsaved')).build())
+              .build(),
+          ]
+        : []),
     )
     .build();
 
@@ -236,6 +244,13 @@ async function render(): Promise<void> {
   const header = Div()
     .class('history-header')
     .children(
+      // chip -> title -> intro: the homepage hero's own opening, so the page a
+      // visitor reaches from it is recognisably the same product rather than
+      // an admin screen that happens to share a header.
+      Div()
+        .class('history-chip')
+        .children(View('i').class('history-chip-dot').build(), View('span').text(t('historyChip')).build())
+        .build(),
       Div()
         .class('history-title-row')
         .children(
@@ -267,7 +282,38 @@ async function render(): Promise<void> {
     : Div()
         .class('history-empty')
         .id('history-empty')
-        .text(query ? t('historyEmptySearch') : t('historyEmpty'))
+        .children(
+          Div()
+            .class('history-empty-mark')
+            .text(query ? '⌕' : '⌂')
+            .attr('aria-hidden', 'true')
+            .build(),
+          Div()
+            .class('history-empty-title')
+            .text(query ? t('historyEmptySearchTitle') : t('historyEmptyTitle'))
+            .build(),
+          Div()
+            .class('history-empty-body')
+            .text(query ? t('historyEmptySearch') : t('historyEmpty'))
+            .build(),
+          query
+            ? button(
+                t('historyClearSearch'),
+                () => {
+                  query = '';
+                  page = 1;
+                  refresh();
+                },
+                { type: 'text', class: 'history-empty-action' },
+              )
+            : button(
+                t('historyBack'),
+                () => {
+                  window.location.href = '/';
+                },
+                { type: 'primary', class: 'history-empty-action' },
+              ),
+        )
         .build();
 
   // The two standing facts about this data live under the list, where they read

lib/history/recovery.ts

@@ -108,7 +108,10 @@ function buildBar(doc: HistoryDoc): HTMLElement {
       Div()
         .class('recovery-bar-text')
         .children(
-          Div().class('recovery-bar-title').text(t('recoveryTitle')).build(),
+          Div()
+            .class('recovery-bar-title')
+            .children(View('i').class('recovery-dot').build(), View('span').text(t('recoveryTitle')).build())
+            .build(),
           Div()
             .class('recovery-bar-body')
             .text(t('recoveryBody', { title: doc.title, when: formatRelativeTime(doc.updatedAt) }))

packages/shared/src/i18n.ts

@@ -223,6 +223,7 @@ export interface I18nMessages {
    */
   recoveryDismiss: string;
   recoveryViewAll: string;
+  historyChip: string;
   historyTitle: string;
   historyIntro: string;
   historyColDocument: string;
@@ -231,8 +232,11 @@ export interface I18nMessages {
   historyColExpires: string;
   historyNotBackup: string;
   historySearchPlaceholder: string;
+  historyEmptyTitle: string;
   historyEmpty: string;
+  historyEmptySearchTitle: string;
   historyEmptySearch: string;
+  historyClearSearch: string;
   historyOpen: string;
   historyDelete: string;
   historyCancel: string;
@@ -336,6 +340,7 @@ const completeMessages: Record<LanguageCode.ZH | LanguageCode.EN, I18nMessages>
     recoveryRestore: '继续编辑',
     recoveryDismiss: '以后再说',
     recoveryViewAll: '全部文档',
+    historyChip: '本机存储 · 从不上传',
     historyTitle: '本机保存的文档',
     historyIntro:
       '你编辑过的文档，副本保存在这台设备的浏览器里——刷新、误关标签页、浏览器崩溃之后都能找回。这些内容从未上传。',
@@ -345,8 +350,11 @@ const completeMessages: Record<LanguageCode.ZH | LanguageCode.EN, I18nMessages>
     historyColExpires: '自动删除',
     historyNotBackup: '这些副本是为了让你接着做没做完的事，不是备份——想长期保留，请导出保存到电脑。',
     historySearchPlaceholder: '按文件名搜索',
-    historyEmpty: '这里还是空的。你在本站编辑过的文档会自动出现在这个列表里。',
-    historyEmptySearch: '没有文件名匹配的文档。',
+    historyEmptyTitle: '这里还是空的',
+    historyEmpty: '你在本站编辑过的文档会自动出现在这里，不需要手动保存。',
+    historyEmptySearchTitle: '没有匹配的文档',
+    historyEmptySearch: '没有文件名包含这段文字的文档。',
+    historyClearSearch: '清除搜索',
     historyOpen: '打开',
     historyDelete: '删除',
     historyCancel: '取消',
@@ -439,6 +447,7 @@ const completeMessages: Record<LanguageCode.ZH | LanguageCode.EN, I18nMessages>
     recoveryRestore: 'Pick up where I left off',
     recoveryDismiss: 'Not now',
     recoveryViewAll: 'Saved documents',
+    historyChip: 'On this device · never uploaded',
     historyTitle: 'Saved documents',
     historyIntro:
       'Copies of the documents you edited, kept in this browser on this device, so a refresh, a closed tab or a crash cannot cost you the work. None of this was uploaded.',
@@ -449,8 +458,11 @@ const completeMessages: Record<LanguageCode.ZH | LanguageCode.EN, I18nMessages>
     historyNotBackup:
       'These copies exist so you can pick up work you were in the middle of. They are not a backup -- export anything you want to keep.',
     historySearchPlaceholder: 'Search by file name',
-    historyEmpty: 'Nothing saved yet. Documents you edit here will show up in this list on their own.',
-    historyEmptySearch: 'No file name matches that search.',
+    historyEmptyTitle: 'Nothing saved yet',
+    historyEmpty: 'Documents you edit here show up in this list on their own -- there is nothing to save by hand.',
+    historyEmptySearchTitle: 'No matches',
+    historyEmptySearch: 'No file name contains that text.',
+    historyClearSearch: 'Clear search',
     historyOpen: 'Open',
     historyDelete: 'Delete',
     historyCancel: 'Cancel',

public/home.css

@@ -944,9 +944,11 @@
   display: block;
   max-width: 62ch;
   padding: var(--ran-space-3) var(--ran-space-4);
-  border: 1px solid var(--ran-color-border);
   border-radius: var(--ran-radius-md);
   background: var(--ran-color-bg-subtle);
+  /* Hairline in the shadow layer, matching the document list and the recovery
+     card: the three surfaces that talk about saved work look like one feature. */
+  box-shadow: 0 0 0 1px var(--ran-color-border);
   font-size: 14px;
   line-height: 1.6;
   color: var(--ran-color-text-secondary);

styles/base.css

@@ -387,10 +387,13 @@ r-dropdown[role='listbox'] {
   flex-direction: column;
   gap: var(--ran-space-3);
   padding: var(--ran-space-4) var(--ran-space-5, 20px);
-  border: 1px solid var(--ran-color-border);
   border-radius: var(--ran-radius-lg);
   background: var(--ran-color-bg-elevated);
-  box-shadow: var(--ran-shadow-modal);
+  /* The hairline lives in the shadow layer with the elevation, the way the rest
+     of the site draws its surfaces -- one line, no box-model side effects. */
+  box-shadow:
+    0 0 0 1px var(--ran-color-border),
+    var(--ran-shadow-modal);
   color: var(--ran-color-text);
   animation: recovery-bar-in 200ms ease-out;
 }
@@ -405,10 +408,23 @@ r-dropdown[role='listbox'] {
   flex-direction: column;
   gap: var(--ran-space-1);
 }
+/* Dot and title, the site's way of stating a state (homepage chip, the "only
+   copy here" marker in the document list). */
 .recovery-bar-title {
+  display: flex;
+  align-items: center;
+  gap: var(--ran-space-2);
   font-weight: 600;
   font-size: 15px;
 }
+.recovery-dot {
+  width: 6px;
+  height: 6px;
+  flex-shrink: 0;
+  border-radius: var(--ran-radius-full);
+  background: var(--ran-color-warning);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ran-color-warning) 22%, transparent);
+}
 .recovery-bar-body {
   color: var(--ran-color-text-secondary);
   font-size: 13px;