From 60eb89c0fbcdcf8469e2709e7ee58f9f55e51174 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sat, 9 Aug 2025 13:05:47 +0800
Subject: [PATCH] Add commenter device info display feature

---
 packages/comment-widget/package.json          |  3 +-
 .../comment-widget/src/base-comment-item.ts   | 27 ++++--
 packages/comment-widget/src/comment-item.ts   |  1 +
 .../comment-widget/src/commenter-ua-bar.ts    | 93 +++++++++++++++++++
 packages/comment-widget/src/reply-item.ts     |  1 +
 packages/comment-widget/src/types/index.ts    |  1 +
 packages/example/index.html                   | 20 ++--
 pnpm-lock.yaml                                | 71 ++++++++++++++
 src/main/resources/extensions/settings.yaml   |  4 +
 9 files changed, 204 insertions(+), 17 deletions(-)
 create mode 100644 packages/comment-widget/src/commenter-ua-bar.ts

diff --git a/packages/comment-widget/package.json b/packages/comment-widget/package.json
index 1c4a8ed..612dbf2 100644
--- a/packages/comment-widget/package.json
+++ b/packages/comment-widget/package.json
@@ -48,7 +48,8 @@
     "javascript-time-ago": "^2.5.11",
     "lit": "^3.3.1",
     "ofetch": "^1.4.1",
-    "tiptap-extension-code-block-shiki": "file:lib/tiptap-extension-code-block-shiki-0.5.1.tgz"
+    "tiptap-extension-code-block-shiki": "file:lib/tiptap-extension-code-block-shiki-0.5.1.tgz",
+    "ua-parser-js": "^2.0.4"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.367",
diff --git a/packages/comment-widget/src/base-comment-item.ts b/packages/comment-widget/src/base-comment-item.ts
index c7f462c..ce45c72 100644
--- a/packages/comment-widget/src/base-comment-item.ts
+++ b/packages/comment-widget/src/base-comment-item.ts
@@ -1,12 +1,16 @@
 import './user-avatar';
 import { msg } from '@lit/localize';
 import { css, html, LitElement, unsafeCSS } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { codeToHtml } from 'shiki/bundle/full';
 import baseStyles from './styles/base';
 import contentStyles from './styles/content.css?inline';
 import { formatDate, timeAgo } from './utils/date';
+import './commenter-ua-bar';
+import { consume } from '@lit/context';
+import { configMapDataContext } from './context';
+import type { ConfigMapData } from './types';
 
 export class BaseCommentItem extends LitElement {
   @property({ type: String })
@@ -30,6 +34,13 @@ export class BaseCommentItem extends LitElement {
   @property({ type: String })
   content = '';
 
+  @property({ type: String })
+  ua: string = '';
+
+  @consume({ context: configMapDataContext })
+  @state()
+  configMapData: ConfigMapData | undefined;
+
   protected override firstUpdated() {
     const codeElements = this.shadowRoot?.querySelectorAll('pre>code');
     if (!codeElements?.length) return;
@@ -81,22 +92,26 @@ export class BaseCommentItem extends LitElement {
         ></user-avatar>
       </div>
       <div class="item-main flex-[1_1_auto] min-w-0 w-full">
-        <div class="item-meta flex items-center gap-3">
+        <div class="item-meta flex items-center gap-3 flex-wrap">
           ${
             this.userWebsite
               ? html`<a
-                class="item-author font-medium text-sm"
+                class="item-author font-medium text-sm text-text-1"
                 target="_blank"
                 href=${this.userWebsite}
                 rel="noopener noreferrer"
               >
                 ${this.userDisplayName}
               </a>`
-              : html`<div class="item-author font-medium text-sm">${this.userDisplayName}</div>`
+              : html`<span class="item-author font-medium text-sm text-text-1">${this.userDisplayName}</span>`
           }
-          <div class="item-meta-info text-xs text-text-2" title=${formatDate(this.creationTime)}>
+          
+          ${this.ua && this.configMapData?.basic.showCommenterDevice ? html`<commenter-ua-bar .ua=${this.ua}></commenter-ua-bar>` : ''}
+
+          <time class="item-meta-info text-xs text-text-2" title=${formatDate(this.creationTime)}>
             ${timeAgo(this.creationTime)}
-          </div>
+          </time>
+
           ${
             !this.approved
               ? html`<div class="item-meta-info text-xs text-text-2">${msg('Reviewing')}</div>`
diff --git a/packages/comment-widget/src/comment-item.ts b/packages/comment-widget/src/comment-item.ts
index 3938e97..cfdc66a 100644
--- a/packages/comment-widget/src/comment-item.ts
+++ b/packages/comment-widget/src/comment-item.ts
@@ -119,6 +119,7 @@ export class CommentItem extends LitElement {
       .creationTime="${this.comment?.spec.creationTime}"
       .approved=${this.comment?.spec.approved}
       .userWebsite=${this.comment?.spec.owner.annotations?.website}
+      .ua=${this.comment?.spec.userAgent}
     >
       <button slot="action" class="icon-button group -ml-2" type="button" @click="${this.handleUpvote}">
         <div class="icon-button-icon">
diff --git a/packages/comment-widget/src/commenter-ua-bar.ts b/packages/comment-widget/src/commenter-ua-bar.ts
new file mode 100644
index 0000000..4fcb635
--- /dev/null
+++ b/packages/comment-widget/src/commenter-ua-bar.ts
@@ -0,0 +1,93 @@
+import { css, html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import type { UAParser } from 'ua-parser-js';
+import baseStyles from './styles/base';
+
+const OS_ICON_MAP = {
+  Windows: 'i-logos:microsoft-windows-icon',
+  macOS: 'i-logos:apple',
+  Linux: 'i-logos:linux-tux',
+  Android: 'i-logos:android-icon',
+  iOS: 'i-logos:apple',
+  'Chrome OS': 'i-logos:chrome',
+  Arch: 'i-logos:archlinux',
+  Manjaro: 'i-logos:manjaro',
+  Ubuntu: 'i-logos:ubuntu',
+  Fedora: 'i-logos:fedora',
+};
+
+const BROWSER_ICON_MAP = {
+  Chrome: 'i-logos:chrome',
+  'Mobile Chrome': 'i-logos:chrome',
+  'Chrome WebView': 'i-logos:chrome',
+  Firefox: 'i-logos:firefox',
+  'Mobile Firefox': 'i-logos:firefox',
+  Safari: 'i-logos:safari',
+  'Mobile Safari': 'i-logos:safari',
+  Edge: 'i-logos:microsoft-edge',
+  'Edge WebView': 'i-logos:microsoft-edge',
+  'Edge WebView2': 'i-logos:microsoft-edge',
+  Opera: 'i-logos:opera',
+};
+
+export class CommenterUABar extends LitElement {
+  @property({ type: String })
+  ua: string = '';
+
+  @state()
+  parser: UAParser | undefined;
+
+  getOSIcon(os?: string) {
+    return OS_ICON_MAP[os as keyof typeof OS_ICON_MAP];
+  }
+
+  getBrowserIcon(browser?: string) {
+    return BROWSER_ICON_MAP[browser as keyof typeof BROWSER_ICON_MAP];
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.init();
+  }
+
+  async init() {
+    const { UAParser } = await import('ua-parser-js');
+    this.parser = new UAParser(this.ua);
+  }
+
+  protected override render() {
+    if (!this.parser) {
+      return html``;
+    }
+
+    const osIcon = this.getOSIcon(this.parser.getOS().name);
+    const browserIcon = this.getBrowserIcon(this.parser.getBrowser().name);
+
+    return html`<div class="inline-flex gap-2 items-center">
+      <div class="inline-flex items-center gap-1 bg-muted-3 rounded-md px-1.5 py-1">
+        ${osIcon ? html`<i class="${osIcon} opacity-90 size-3"></i>` : ''}
+        <span class="text-xs text-text-2">${this.parser.getOS().name}</span>
+      </div>
+      <div class="inline-flex items-center gap-1 bg-muted-3 rounded-md px-1.5 py-1">
+        ${browserIcon ? html`<i class="${browserIcon} opacity-90 size-3"></i>` : ''}
+        <span class="text-xs text-text-2">${this.parser.getBrowser().name}</span>
+      </div>
+    </div>`;
+  }
+
+  static override styles = [
+    ...baseStyles,
+    css`
+      @unocss-placeholder;
+    `,
+  ];
+}
+
+customElements.get('commenter-ua-bar') ||
+  customElements.define('commenter-ua-bar', CommenterUABar);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'commenter-ua-bar': CommenterUABar;
+  }
+}
diff --git a/packages/comment-widget/src/reply-item.ts b/packages/comment-widget/src/reply-item.ts
index d586400..2b18e56 100644
--- a/packages/comment-widget/src/reply-item.ts
+++ b/packages/comment-widget/src/reply-item.ts
@@ -122,6 +122,7 @@ export class ReplyItem extends LitElement {
         .approved=${this.reply?.spec.approved}
         .breath=${this.isQuoteReplyHovered}
         .userWebsite=${this.reply?.spec.owner.annotations?.website}
+        .ua=${this.reply?.spec.userAgent}
       >
         <button slot="action" class="icon-button group -ml-2" type="button" @click="${this.handleUpvote}">
           <div class="icon-button-icon ">
diff --git a/packages/comment-widget/src/types/index.ts b/packages/comment-widget/src/types/index.ts
index 5ba2afd..537c60d 100644
--- a/packages/comment-widget/src/types/index.ts
+++ b/packages/comment-widget/src/types/index.ts
@@ -10,6 +10,7 @@ interface BasicConfig {
   size: number;
   withReplySize: number;
   replySize: number;
+  showCommenterDevice?: boolean;
 }
 
 interface SecurityConfig {
diff --git a/packages/example/index.html b/packages/example/index.html
index 5939e99..f8b3505 100644
--- a/packages/example/index.html
+++ b/packages/example/index.html
@@ -14,18 +14,18 @@
       }
 
       :root {
-        color-scheme: dark;
-        --halo-cw-primary-1-color: #059669; /* green-600 */
-        --halo-cw-primary-2-color: #047857; /* green-700 */
-        --halo-cw-primary-3-color: #065f46; /* green-800 */
+        /* color-scheme: dark;
+        --halo-cw-primary-1-color: #059669; 
+        --halo-cw-primary-2-color: #047857; 
+        --halo-cw-primary-3-color: #065f46; 
 
-        --halo-cw-text-1-color: #f9fafb; /* gray-50 */
-        --halo-cw-text-2-color: #e5e7eb; /* gray-200 */
-        --halo-cw-text-3-color: #9ca3af; /* gray-400 */
+        --halo-cw-text-1-color: #f9fafb; 
+        --halo-cw-text-2-color: #e5e7eb; 
+        --halo-cw-text-3-color: #9ca3af; 
 
-        --halo-cw-muted-1-color: #4b5563; /* gray-600 */
-        --halo-cw-muted-2-color: #374151; /* gray-700 */
-        --halo-cw-muted-3-color: #1f2937; /* gray-800 */
+        --halo-cw-muted-1-color: #4b5563; 
+        --halo-cw-muted-2-color: #374151; 
+        --halo-cw-muted-3-color: #1f2937;  */
       }
     </style>
   </head>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9fd1bf4..805c2d4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -90,6 +90,9 @@ importers:
       tiptap-extension-code-block-shiki:
         specifier: file:lib/tiptap-extension-code-block-shiki-0.5.1.tgz
         version: file:packages/comment-widget/lib/tiptap-extension-code-block-shiki-0.5.1.tgz(@tiptap/core@3.0.9(@tiptap/pm@3.0.9))(@tiptap/extension-code-block@3.0.9(@tiptap/core@3.0.9(@tiptap/pm@3.0.9))(@tiptap/pm@3.0.9))(@tiptap/pm@3.0.9)(shiki@3.9.2)
+      ua-parser-js:
+        specifier: ^2.0.4
+        version: 2.0.4
     devDependencies:
       '@iconify/json':
         specifier: ^2.2.367
@@ -1048,6 +1051,9 @@ packages:
   '@types/mdurl@2.0.0':
     resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
 
+  '@types/node-fetch@2.6.13':
+    resolution: {integrity: sha512-QGpRVpzSaUs30JBSGPjOg4Uveu384erbHBoT1zeONvyCfwQxIkUshLAOqN/k9EjGviPRmWTTe6aH2qySWKTVSw==}
+
   '@types/node@18.19.18':
     resolution: {integrity: sha512-80CP7B8y4PzZF0GWx15/gVWRrB5y/bIjNI84NK3cmQJu0WZwvmj2WMA5LcofQFVfLqqCSp545+U2LsrVzX36Zg==}
 
@@ -1404,6 +1410,9 @@ packages:
   destr@2.0.5:
     resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
 
+  detect-europe-js@0.1.2:
+    resolution: {integrity: sha512-lgdERlL3u0aUdHocoouzT10d9I89VVhk0qNRmll7mXdGfJT1/wqZ2ZLA4oJAjeACPY5fT1wsbq2AT+GkuInsow==}
+
   detect-libc@2.0.4:
     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
@@ -1648,6 +1657,9 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  is-standalone-pwa@0.1.1:
+    resolution: {integrity: sha512-9Cbovsa52vNQCjdXOzeQq5CnCbAcRk05aU62K20WO372NrTv0NxibLFCK6lQ4/iZEFdEA3p3t2VNOn8AJ53F5g==}
+
   javascript-time-ago@2.5.11:
     resolution: {integrity: sha512-Zeyf5R7oM1fSMW9zsU3YgAYwE0bimEeF54Udn2ixGd8PUwu+z1Yc5t4Y8YScJDMHD6uCx6giLt3VJR5K4CMwbg==}
 
@@ -1896,6 +1908,15 @@ packages:
   node-fetch-native@1.6.7:
     resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
 
+  node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -2287,6 +2308,9 @@ packages:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
+  tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
@@ -2320,6 +2344,13 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  ua-is-frozen@0.1.2:
+    resolution: {integrity: sha512-RwKDW2p3iyWn4UbaxpP2+VxwqXh0jpvdxsYpZ5j/MLLiQOfbsV5shpgQiw93+KMYQPcteeMQ289MaAFzs3G9pw==}
+
+  ua-parser-js@2.0.4:
+    resolution: {integrity: sha512-XiBOnM/UpUq21ZZ91q2AVDOnGROE6UQd37WrO9WBgw4u2eGvUCNOheMmZ3EfEUj7DLHr8tre+Um/436Of/Vwzg==}
+    hasBin: true
+
   uc.micro@2.1.0:
     resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
 
@@ -2456,6 +2487,12 @@ packages:
     resolution: {integrity: sha512-UEvwfpD+XQw99sLKiH5B1T4QwpwNyWJxp59cnlRwFfhUW6JsQpw5jMeMwi7580sNou8YL3kYoS7BWLm+yJ/jVQ==}
     hasBin: true
 
+  webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+
+  whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -3334,6 +3371,11 @@ snapshots:
 
   '@types/mdurl@2.0.0': {}
 
+  '@types/node-fetch@2.6.13':
+    dependencies:
+      '@types/node': 18.19.18
+      form-data: 4.0.4
+
   '@types/node@18.19.18':
     dependencies:
       undici-types: 5.26.5
@@ -3738,6 +3780,8 @@ snapshots:
 
   destr@2.0.5: {}
 
+  detect-europe-js@0.1.2: {}
+
   detect-libc@2.0.4: {}
 
   devlop@1.1.0:
@@ -3979,6 +4023,8 @@ snapshots:
 
   is-number@7.0.0: {}
 
+  is-standalone-pwa@0.1.1: {}
+
   javascript-time-ago@2.5.11:
     dependencies:
       relative-time-format: 1.1.6
@@ -4231,6 +4277,10 @@ snapshots:
 
   node-fetch-native@1.6.7: {}
 
+  node-fetch@2.7.0:
+    dependencies:
+      whatwg-url: 5.0.0
+
   normalize-path@3.0.0: {}
 
   object-inspect@1.13.4: {}
@@ -4671,6 +4721,8 @@ snapshots:
 
   totalist@3.0.1: {}
 
+  tr46@0.0.3: {}
+
   trim-lines@3.0.1: {}
 
   ts-simple-type@2.0.0-next.0: {}
@@ -4691,6 +4743,18 @@ snapshots:
 
   typescript@5.8.2: {}
 
+  ua-is-frozen@0.1.2: {}
+
+  ua-parser-js@2.0.4:
+    dependencies:
+      '@types/node-fetch': 2.6.13
+      detect-europe-js: 0.1.2
+      is-standalone-pwa: 0.1.1
+      node-fetch: 2.7.0
+      ua-is-frozen: 0.1.2
+    transitivePeerDependencies:
+      - encoding
+
   uc.micro@2.1.0: {}
 
   ufo@1.6.1: {}
@@ -4844,6 +4908,13 @@ snapshots:
       typescript: 5.2.2
       yargs: 17.7.2
 
+  webidl-conversions@3.0.1: {}
+
+  whatwg-url@5.0.0:
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+
   wrap-ansi@7.0.0:
     dependencies:
       ansi-styles: 4.3.0
diff --git a/src/main/resources/extensions/settings.yaml b/src/main/resources/extensions/settings.yaml
index 71f9880..7a6f4db 100644
--- a/src/main/resources/extensions/settings.yaml
+++ b/src/main/resources/extensions/settings.yaml
@@ -31,6 +31,10 @@ spec:
           key: withReplySize
           validation: required
           value: 5
+        - $formkit: checkbox
+          label: 显示评论者设备信息
+          name: showCommenterDevice
+          value: false
     - group: security
       label: 安全设置
       formSchema: