@gemboss/ui 0.42.0 → 0.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +78 -0
- package/README.md +113 -7
- package/catalog/editor.html +1 -1
- package/catalog/index.html +147 -51
- package/gemboss-ui.css +3 -3
- package/package.json +6 -1
- package/parts/components.css +1 -1
- package/parts/core.css +2 -2
- package/parts/shell.css +1 -1
- package/src/assistant/engine.tsx +3 -2
- package/src/assistant.css +1 -1
- package/src/briefing-card.css +1 -0
- package/src/briefing-card.tsx +50 -0
- package/src/editor.css +1 -1
- package/src/gemboss-tokens.css +1 -1
- package/src/icons.tsx +2 -0
- package/src/index.ts +8 -2
- package/src/progress-ring.css +1 -0
- package/src/progress-ring.tsx +65 -0
- package/src/question-card.css +1 -0
- package/src/question-card.tsx +116 -0
- package/src/range-bar.css +1 -0
- package/src/range-bar.tsx +102 -0
- package/src/reactions.tsx +32 -6
- package/src/spot-art.css +1 -0
- package/src/spot-art.tsx +130 -0
- package/src/team-chat-plain.js +1 -1
- package/src/team-chat.css +1 -1
- package/src/team-chat.tsx +106 -9
- package/src/theme-dark.css +1 -1
package/catalog/index.html
CHANGED
|
@@ -27,8 +27,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
27
27
|
@media (max-width:760px){.cat{grid-template-columns:1fr;padding:16px}.cat-nav{position:static;flex-direction:row;flex-wrap:wrap}}
|
|
28
28
|
</style></head><body>
|
|
29
29
|
<div class="cat"><nav class="cat-nav" aria-label="Mục"><a href="#tokens">Token</a><a href="#buttons">Nút</a><a href="#fields">Ô nhập</a><a href="#choice">Tab, nhóm nút, thẻ</a><a href="#surfaces">Thẻ, số liệu, bảng, trạng thái trống</a><a href="#report">Báo cáo</a><a href="#collections">Bảng, list, lưới, board</a><a href="#resizer">Thanh kéo giữa hai cột</a><a href="#modal">Hộp thoại, toast, menu (JS thuần)</a><a href="#sheet">Ngăn trượt cạnh phải</a><a href="#reader">Hộp đọc tài liệu</a><a href="#settings">Hộp cài đặt</a><a href="#switcher">Chuyển dịch vụ</a><a href="#shell">Khung app</a><a href="#nav">Chờ điều hướng</a><a href="#page">Bề rộng nội dung</a><a href="#portal">Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</a><a href="#site">Trang công khai: thanh trên, logo cỡ site, nút, chân trang</a><a href="#auth">Đăng nhập</a><a href="#setup">Hướng dẫn thiết lập</a><a href="#chat">Thân chat</a><a href="#reactions">Reactions</a><a href="#team-chat">Chat đội</a><a href="#action-card">Thẻ hành động</a><a href="#assistant-engine">Trợ lý: chọn engine</a><a href="#assistant-bridge">Trợ lý: cầu nối trên máy (0.32.0)</a><a href="#assistant-chat">Trợ lý: khung chat (0.29.0)</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a><a href="#editor">Editor</a></nav>
|
|
30
|
-
<main><header class="cat-head"><h1>@gemboss/ui 0.
|
|
31
|
-
<section id="tokens"><h2>Token</h2><p>Đổi giao diện một bề mặt bằng cách đặt lại token, không viết đè class. Tên và giá trị đọc thẳng từ gemboss-ui.css.</p><div class="cat-swatches"><div class="cat-swatch"><i style="background:var(--gemboss-primary)"></i><code>--gemboss-primary</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-dark)"></i><code>--gemboss-primary-dark</code><span>#000000</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-soft)"></i><code>--gemboss-primary-soft</code><span>#f2f3f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent)"></i><code>--gemboss-accent</code><span>#5661f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-strong)"></i><code>--gemboss-accent-strong</code><span>#3a44de</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-soft)"></i><code>--gemboss-accent-soft</code><span>#eef0fe</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-strong)"></i><code>--gemboss-text-strong</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text)"></i><code>--gemboss-text</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-muted)"></i><code>--gemboss-text-muted</code><span>#686b71</span></div><div class="cat-swatch"><i style="background:var(--gemboss-surface)"></i><code>--gemboss-surface</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-canvas)"></i><code>--gemboss-canvas</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-preview-canvas)"></i><code>--gemboss-preview-canvas</code><span>#eceef1</span></div><div class="cat-swatch"><i style="background:var(--gemboss-rail-bg)"></i><code>--gemboss-rail-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-panel-bg)"></i><code>--gemboss-panel-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider)"></i><code>--gemboss-divider</code><span>#e5e7ea</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider-soft)"></i><code>--gemboss-divider-soft</code><span>#edeff2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-hover)"></i><code>--gemboss-hover</code><span>#eceef2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-bg)"></i><code>--gemboss-active-bg</code><span>#f0f1f4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-fg)"></i><code>--gemboss-active-fg</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger)"></i><code>--gemboss-danger</code><span>#d72c0d</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-strong)"></i><code>--gemboss-danger-strong</code><span>#b42318</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-soft)"></i><code>--gemboss-danger-soft</code><span>#fff0e9</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-border)"></i><code>--gemboss-danger-border</code><span>#f5c9bc</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success)"></i><code>--gemboss-success</code><span>#007f5f</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-strong)"></i><code>--gemboss-success-strong</code><span>#0a6a4c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-soft)"></i><code>--gemboss-success-soft</code><span>#e3f1df</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-border)"></i><code>--gemboss-success-border</code><span>#b7dfcd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning)"></i><code>--gemboss-warning</code><span>#9a6700</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-soft)"></i><code>--gemboss-warning-soft</code><span>#fff8e0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-border)"></i><code>--gemboss-warning-border</code><span>#f5d569</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-bg)"></i><code>--gemboss-dark-bg</code><span>#0a0a0c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-rail)"></i><code>--gemboss-dark-rail</code><span>#0e0e11</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface)"></i><code>--gemboss-dark-surface</code><span>#16161a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface-2)"></i><code>--gemboss-dark-surface-2</code><span>#1e1e24</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-divider)"></i><code>--gemboss-dark-divider</code><span>#2a2a31</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-text)"></i><code>--gemboss-dark-text</code><span>#ededf0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-muted)"></i><code>--gemboss-dark-muted</code><span>#9a9aa4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg)"></i><code>--gemboss-field-bg</code><span>#fdfdfd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg-hover)"></i><code>--gemboss-field-bg-hover</code><span>#fafafa</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-ink)"></i><code>--gemboss-field-ink</code><span>#303030</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-placeholder)"></i><code>--gemboss-field-placeholder</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line)"></i><code>--gemboss-field-line</code><span>#8a8a8a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-hover)"></i><code>--gemboss-field-line-hover</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-active)"></i><code>--gemboss-field-line-active</code><span>#1a1a1a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-ink)"></i><code>--gemboss-chip-ink</code><span>#303633</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line)"></i><code>--gemboss-chip-line</code><span>#cfd6ce</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line-hover)"></i><code>--gemboss-chip-line-hover</code><span>#aab4ad</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-bg-hover)"></i><code>--gemboss-chip-bg-hover</code><span>#f6f7f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-on-primary)"></i><code>--gemboss-on-primary</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-app-bg)"></i><code>--gemboss-app-bg</code><span>#ffffff</span></div></div><table class="ui-table cat-scale"><thead><tr><th>Token</th><th>Giá trị</th><th>Mẫu</th></tr></thead><tbody><tr><td><code>--gemboss-fs-micro</code></td><td>11px</td><td style="font-size:var(--gemboss-fs-micro)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-caption</code></td><td>12px</td><td style="font-size:var(--gemboss-fs-caption)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body</code></td><td>14px</td><td style="font-size:var(--gemboss-fs-body)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body-lg</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-body-lg)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h3</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-h3)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h2</code></td><td>20px</td><td style="font-size:var(--gemboss-fs-h2)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h1</code></td><td>24px</td><td style="font-size:var(--gemboss-fs-h1)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-display</code></td><td>30px</td><td style="font-size:var(--gemboss-fs-display)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-radius-xs</code></td><td>4px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xs)"></i></td></tr><tr><td><code>--gemboss-radius-sm</code></td><td>6px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-sm)"></i></td></tr><tr><td><code>--gemboss-radius-md</code></td><td>8px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-md)"></i></td></tr><tr><td><code>--gemboss-radius-lg</code></td><td>12px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-lg)"></i></td></tr><tr><td><code>--gemboss-radius-xl</code></td><td>16px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xl)"></i></td></tr><tr><td><code>--gemboss-radius-2xl</code></td><td>20px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-2xl)"></i></td></tr><tr><td><code>--gemboss-radius-full</code></td><td>999px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-full)"></i></td></tr><tr><td><code>--gemboss-shadow-resting</code></td><td class="cat-small">0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-resting);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-raised</code></td><td class="cat-small">0 4px 16px rgba(31, 30, 29, 0.10)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-raised);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-overlay</code></td><td class="cat-small">0 16px 48px rgba(31, 30, 29, 0.18)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-overlay);border:0"></i></td></tr></tbody></table></section>
|
|
30
|
+
<main><header class="cat-head"><h1>@gemboss/ui 0.43.0</h1><p>Ngôn ngữ thiết kế chung của các công cụ GemBoss. Markup dưới mỗi ví dụ là đúng thứ package render ra; bề mặt không dùng React (HTML tĩnh, Python) chép markup này và nạp <code>gemboss-ui.css</code>. Dựng từ gemboss <code>976cc8bd86a5</code>.</p></header>
|
|
31
|
+
<section id="tokens"><h2>Token</h2><p>Đổi giao diện một bề mặt bằng cách đặt lại token, không viết đè class. Tên và giá trị đọc thẳng từ gemboss-ui.css.</p><div class="cat-swatches"><div class="cat-swatch"><i style="background:var(--gemboss-primary)"></i><code>--gemboss-primary</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-dark)"></i><code>--gemboss-primary-dark</code><span>#000000</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-soft)"></i><code>--gemboss-primary-soft</code><span>#f2f3f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent)"></i><code>--gemboss-accent</code><span>#5661f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-strong)"></i><code>--gemboss-accent-strong</code><span>#3a44de</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-soft)"></i><code>--gemboss-accent-soft</code><span>#eef0fe</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-wash)"></i><code>--gemboss-accent-wash</code><span>#f7f8ff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-tint)"></i><code>--gemboss-accent-tint</code><span>#dfe2ff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-mid)"></i><code>--gemboss-accent-mid</code><span>#c9cffd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-strong)"></i><code>--gemboss-text-strong</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text)"></i><code>--gemboss-text</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-muted)"></i><code>--gemboss-text-muted</code><span>#686b71</span></div><div class="cat-swatch"><i style="background:var(--gemboss-surface)"></i><code>--gemboss-surface</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-canvas)"></i><code>--gemboss-canvas</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-preview-canvas)"></i><code>--gemboss-preview-canvas</code><span>#eceef1</span></div><div class="cat-swatch"><i style="background:var(--gemboss-rail-bg)"></i><code>--gemboss-rail-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-panel-bg)"></i><code>--gemboss-panel-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider)"></i><code>--gemboss-divider</code><span>#e5e7ea</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider-soft)"></i><code>--gemboss-divider-soft</code><span>#edeff2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-hover)"></i><code>--gemboss-hover</code><span>#eceef2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-bg)"></i><code>--gemboss-active-bg</code><span>#f0f1f4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-fg)"></i><code>--gemboss-active-fg</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger)"></i><code>--gemboss-danger</code><span>#d72c0d</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-strong)"></i><code>--gemboss-danger-strong</code><span>#b42318</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-soft)"></i><code>--gemboss-danger-soft</code><span>#fff0e9</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-border)"></i><code>--gemboss-danger-border</code><span>#f5c9bc</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success)"></i><code>--gemboss-success</code><span>#007f5f</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-strong)"></i><code>--gemboss-success-strong</code><span>#0a6a4c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-soft)"></i><code>--gemboss-success-soft</code><span>#e3f1df</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-border)"></i><code>--gemboss-success-border</code><span>#b7dfcd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning)"></i><code>--gemboss-warning</code><span>#9a6700</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-soft)"></i><code>--gemboss-warning-soft</code><span>#fff8e0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-border)"></i><code>--gemboss-warning-border</code><span>#f5d569</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-bg)"></i><code>--gemboss-dark-bg</code><span>#0a0a0c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-rail)"></i><code>--gemboss-dark-rail</code><span>#0e0e11</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface)"></i><code>--gemboss-dark-surface</code><span>#16161a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface-2)"></i><code>--gemboss-dark-surface-2</code><span>#1e1e24</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-divider)"></i><code>--gemboss-dark-divider</code><span>#2a2a31</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-text)"></i><code>--gemboss-dark-text</code><span>#ededf0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-muted)"></i><code>--gemboss-dark-muted</code><span>#9a9aa4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg)"></i><code>--gemboss-field-bg</code><span>#fdfdfd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg-hover)"></i><code>--gemboss-field-bg-hover</code><span>#fafafa</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-ink)"></i><code>--gemboss-field-ink</code><span>#303030</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-placeholder)"></i><code>--gemboss-field-placeholder</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line)"></i><code>--gemboss-field-line</code><span>#8a8a8a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-hover)"></i><code>--gemboss-field-line-hover</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-active)"></i><code>--gemboss-field-line-active</code><span>#1a1a1a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-ink)"></i><code>--gemboss-chip-ink</code><span>#303633</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line)"></i><code>--gemboss-chip-line</code><span>#cfd6ce</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line-hover)"></i><code>--gemboss-chip-line-hover</code><span>#aab4ad</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-bg-hover)"></i><code>--gemboss-chip-bg-hover</code><span>#f6f7f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-on-primary)"></i><code>--gemboss-on-primary</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-app-bg)"></i><code>--gemboss-app-bg</code><span>#ffffff</span></div></div><table class="ui-table cat-scale"><thead><tr><th>Token</th><th>Giá trị</th><th>Mẫu</th></tr></thead><tbody><tr><td><code>--gemboss-fs-micro</code></td><td>11px</td><td style="font-size:var(--gemboss-fs-micro)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-caption</code></td><td>12px</td><td style="font-size:var(--gemboss-fs-caption)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body</code></td><td>14px</td><td style="font-size:var(--gemboss-fs-body)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body-lg</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-body-lg)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h3</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-h3)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h2</code></td><td>20px</td><td style="font-size:var(--gemboss-fs-h2)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h1</code></td><td>24px</td><td style="font-size:var(--gemboss-fs-h1)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-display</code></td><td>30px</td><td style="font-size:var(--gemboss-fs-display)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-radius-xs</code></td><td>4px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xs)"></i></td></tr><tr><td><code>--gemboss-radius-sm</code></td><td>6px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-sm)"></i></td></tr><tr><td><code>--gemboss-radius-md</code></td><td>8px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-md)"></i></td></tr><tr><td><code>--gemboss-radius-lg</code></td><td>12px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-lg)"></i></td></tr><tr><td><code>--gemboss-radius-xl</code></td><td>16px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xl)"></i></td></tr><tr><td><code>--gemboss-radius-2xl</code></td><td>20px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-2xl)"></i></td></tr><tr><td><code>--gemboss-radius-full</code></td><td>999px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-full)"></i></td></tr><tr><td><code>--gemboss-shadow-resting</code></td><td class="cat-small">0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-resting);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-raised</code></td><td class="cat-small">0 4px 16px rgba(31, 30, 29, 0.10)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-raised);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-overlay</code></td><td class="cat-small">0 16px 48px rgba(31, 30, 29, 0.18)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-overlay);border:0"></i></td></tr></tbody></table></section>
|
|
32
32
|
<section id="buttons"><h2>Nút</h2><p>Một lớp <code>ui-btn</code>, ba biến thể, tông đỏ, một cỡ nhỏ. Cao 28px dưới chuột như Button của Polaris (ô nhập và ô chọn 32, như TextField), 44px dưới ngón tay và ở khổ điện thoại, cỡ nhỏ cũng vậy. Dùng được trên <code><button></code> lẫn <code><a></code> (căn giữa sẵn).</p><figure class="cat-demo"><figcaption>Mặc định · chính · ghost · nhỏ · tắt</figcaption><div class="cat-live"><div class="cat-row"><button type="button" class="ui-btn">Lưu nháp</button><button type="button" class="ui-btn ui-btn--primary">Xuất bản</button><button type="button" class="ui-btn ui-btn--ghost">Huỷ</button><button type="button" class="ui-btn ui-btn--sm">Nhỏ</button><button type="button" class="ui-btn ui-btn--primary" disabled>Đang lưu…</button><a class="ui-btn" href="#buttons">Link dạng nút</a></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="cat-row">
|
|
33
33
|
<button type="button" class="ui-btn">Lưu nháp</button>
|
|
34
34
|
<button type="button" class="ui-btn ui-btn--primary">Xuất bản</button>
|
|
@@ -7537,7 +7537,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
7537
7537
|
</div>
|
|
7538
7538
|
</div>
|
|
7539
7539
|
</div></code></pre></details></figure></section>
|
|
7540
|
-
<section id="team-chat"><h2>Chat đội</h2><p>Lớp <code>team-chat</code> (20/10/2026, CSS <code>team-chat.css</code> do component tự nạp): chat kênh của GemCare thành chung cho cả fleet, GemCare (HTML thuần) và GemCommunity (React) vẽ cùng một thứ. Cột kênh có số chưa đọc và <code>@</code> gọi tên, vạch ngày, vạch "New messages", tin liền nhau của một người gộp thành một lượt, trích tin được trả lời, thanh thao tác khi rê chuột (dưới ngón tay: chạm vào tin là hiện), reactions của gói, luồng bên phải, nút về tin mới nhất, và cột người. Màn tự quyết theo bề rộng CỦA NÓ (container query): trên 1100px ngăn phải là một cột, từ 1100px trở xuống là ngăn trượt phủ lên cuộc trò chuyện, từ 760px trở xuống chỉ hiện danh sách kênh HOẶC cuộc trò chuyện. Markup của từng phần là hợp đồng ở README "The team chat layer" (test giữ React và hợp đồng khớp nhau). HTML thuần (GemCare) không viết tay markup đó: <code>team-chat-plain.js</code> (<code>gembossUI.teamChat</code>) dựng tin, vạch ngày, vạch "New messages", nút về tin mới nhất, hàng kênh và hàng người từ dữ liệu, cùng markup với component (test so từng nút trong Chromium); khung cuối chạy thật.</p><figure class="cat-demo cat-screen"><figcaption>Desktop 1366: cột kênh · cuộc trò chuyện · luồng</figcaption><div class="cat-wide"><iframe title="Desktop 1366: cột kênh · cuộc trò chuyện · luồng" style="height:680px;width:1366px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation" data-panel="thread"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section><div class="gb-tc-scrim" aria-hidden="true"></div><aside id="tc-thread" class="gb-tc-thread" aria-labelledby="tc-thread-title" tabindex="-1"><header class="gb-tc-panel-head"><div class="gb-tc-panel-head__text"><h2 class="gb-tc-panel-head__title" id="tc-thread-title">Thread</h2><p class="gb-tc-panel-head__sub">#general</p></div><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close" aria-label="Close thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg></button></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-labelledby="tc-thread-title" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-thread__count"><span>2 replies</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">17:02</time></div><div class="gb-tc-msg__body">I can take the cart drawer.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction" aria-pressed="false" title="Linh" aria-label="👍, Linh. Add yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Quan Le" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">17:05</time></div><div class="gb-tc-msg__body">Hero copy is mine.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label><textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Reply…"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div><label class="ui-check gb-tc-composer__also"><input type="checkbox"/><span>Also send to #general</span></label></form></aside></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
7540
|
+
<section id="team-chat"><h2>Chat đội</h2><p>Lớp <code>team-chat</code> (20/10/2026, CSS <code>team-chat.css</code> do component tự nạp): chat kênh của GemCare thành chung cho cả fleet, GemCare (HTML thuần) và GemCommunity (React) vẽ cùng một thứ. Cột kênh có số chưa đọc và <code>@</code> gọi tên, vạch ngày, vạch "New messages", tin liền nhau của một người gộp thành một lượt, trích tin được trả lời, thanh thao tác khi rê chuột (dưới ngón tay: chạm vào tin là hiện), reactions của gói, luồng bên phải, nút về tin mới nhất, và cột người. Màn tự quyết theo bề rộng CỦA NÓ (container query): trên 1100px ngăn phải là một cột, từ 1100px trở xuống là ngăn trượt phủ lên cuộc trò chuyện, từ 760px trở xuống chỉ hiện danh sách kênh HOẶC cuộc trò chuyện. Markup của từng phần là hợp đồng ở README "The team chat layer" (test giữ React và hợp đồng khớp nhau). HTML thuần (GemCare) không viết tay markup đó: <code>team-chat-plain.js</code> (<code>gembossUI.teamChat</code>) dựng tin, vạch ngày, vạch "New messages", nút về tin mới nhất, hàng kênh và hàng người từ dữ liệu, cùng markup với component (test so từng nút trong Chromium); khung cuối chạy thật.</p><figure class="cat-demo cat-screen"><figcaption>Desktop 1366: cột kênh · cuộc trò chuyện · luồng</figcaption><div class="cat-wide"><iframe title="Desktop 1366: cột kênh · cuộc trò chuyện · luồng" style="height:680px;width:1366px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation" data-panel="thread"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section><div class="gb-tc-scrim" aria-hidden="true"></div><aside id="tc-thread" class="gb-tc-thread" aria-labelledby="tc-thread-title" tabindex="-1"><header class="gb-tc-panel-head"><div class="gb-tc-panel-head__text"><h2 class="gb-tc-panel-head__title" id="tc-thread-title">Thread</h2><p class="gb-tc-panel-head__sub">#general</p></div><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close" aria-label="Close thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg></button></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-labelledby="tc-thread-title" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-thread__count"><span>2 replies</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">17:02</time></div><div class="gb-tc-msg__body">I can take the cart drawer.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction" aria-pressed="false" title="Linh" aria-label="👍, Linh. Add yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Quan Le" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">17:05</time></div><div class="gb-tc-msg__body">Hero copy is mine.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label><textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Reply…"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div><label class="ui-check gb-tc-composer__also"><input type="checkbox"/><span>Also send to #general</span></label></form></aside></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
7541
7541
|
<div style="position:fixed;inset:0">
|
|
7542
7542
|
<div class="gb-tc" data-view="conversation" data-panel="thread">
|
|
7543
7543
|
<nav class="gb-tc-rail" aria-label="Channels">
|
|
@@ -8054,14 +8054,26 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
8054
8054
|
<label class="gb-tc-sr" for="tc-input">Message</label>
|
|
8055
8055
|
<textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general">
|
|
8056
8056
|
</textarea>
|
|
8057
|
-
<button type="
|
|
8057
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
8058
8058
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
8059
8059
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
8060
|
-
<
|
|
8061
|
-
</
|
|
8062
|
-
<path d="
|
|
8060
|
+
<circle cx="10" cy="10" r="6.5">
|
|
8061
|
+
</circle>
|
|
8062
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
8063
8063
|
</path>
|
|
8064
|
-
|
|
8064
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
8065
|
+
</path>
|
|
8066
|
+
</g>
|
|
8067
|
+
</svg>
|
|
8068
|
+
</button>
|
|
8069
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
8070
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
8071
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
8072
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
8073
|
+
</path>
|
|
8074
|
+
<path d="M9.5 11 16.5 3.5">
|
|
8075
|
+
</path>
|
|
8076
|
+
</g>
|
|
8065
8077
|
</svg>
|
|
8066
8078
|
</button>
|
|
8067
8079
|
</div>
|
|
@@ -8258,15 +8270,27 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
8258
8270
|
<label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label>
|
|
8259
8271
|
<textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Reply…">
|
|
8260
8272
|
</textarea>
|
|
8261
|
-
<button type="
|
|
8273
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
8262
8274
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
8263
8275
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
8264
|
-
<
|
|
8265
|
-
</
|
|
8266
|
-
<path d="
|
|
8276
|
+
<circle cx="10" cy="10" r="6.5">
|
|
8277
|
+
</circle>
|
|
8278
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
8267
8279
|
</path>
|
|
8268
|
-
|
|
8269
|
-
|
|
8280
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
8281
|
+
</path>
|
|
8282
|
+
</g>
|
|
8283
|
+
</svg>
|
|
8284
|
+
</button>
|
|
8285
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
8286
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
8287
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
8288
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
8289
|
+
</path>
|
|
8290
|
+
<path d="M9.5 11 16.5 3.5">
|
|
8291
|
+
</path>
|
|
8292
|
+
</g>
|
|
8293
|
+
</svg>
|
|
8270
8294
|
</button>
|
|
8271
8295
|
</div>
|
|
8272
8296
|
<label class="ui-check gb-tc-composer__also">
|
|
@@ -8276,7 +8300,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
8276
8300
|
</form>
|
|
8277
8301
|
</aside>
|
|
8278
8302
|
</div>
|
|
8279
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Desktop 1366, tối: cột người (Online / Members)</figcaption><div class="cat-wide"><iframe title="Desktop 1366, tối: cột người (Online / Members)" style="height:680px;width:1366px" srcdoc="<!doctype html><html data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation" data-panel="people"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="true" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section><div class="gb-tc-scrim" aria-hidden="true"></div><aside id="tc-people" class="gb-tc-people" aria-labelledby="tc-people-title" tabindex="-1"><header class="gb-tc-panel-head"><div class="gb-tc-panel-head__text"><h2 class="gb-tc-panel-head__title" id="tc-people-title">Members</h2></div><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-people__toggle" aria-expanded="true" aria-controls="tc-people-body" aria-label="Hide members" title="Hide members"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="2"></rect><path d="M12.5 3.5v13"></path></g></svg></button></header><div class="gb-tc-people__body" id="tc-people-body"><div class="gb-tc-people__section" role="group" aria-labelledby="tc-on-h"><h3 class="gb-tc-people__heading" id="tc-on-h">Online — 3</h3><ul class="gb-tc-people__list"><li><button type="button" class="gb-tc-person" title="Linh Tran"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="4" aria-hidden="true">LT</span><span class="gb-tc-presence gb-tc-presence--online"><span class="gb-tc-sr">Online</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Linh Tran</span><span class="gb-tc-person__sub">Support lead</span></span><span class="gb-tc-person__role">Admin</span></button></li><li><button type="button" class="gb-tc-person" title="Mai Pham"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="7" aria-hidden="true">MP</span><span class="gb-tc-presence gb-tc-presence--online"><span class="gb-tc-sr">Online</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Mai Pham</span><span class="gb-tc-person__sub">Writing the hero copy</span></span></button></li><li><button type="button" class="gb-tc-person" title="Quan Le"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">QL</span><span class="gb-tc-presence gb-tc-presence--away"><span class="gb-tc-sr">Away</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Quan Le</span><span class="gb-tc-person__sub">In a meeting until 11:00</span></span></button></li></ul></div><div class="gb-tc-people__section" role="group" aria-labelledby="tc-all-h"><h3 class="gb-tc-people__heading" id="tc-all-h">Members — 2</h3><ul class="gb-tc-people__list"><li><button type="button" class="gb-tc-person gb-tc-person--offline" title="Bo Nguyen"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">BN</span><span class="gb-tc-presence gb-tc-presence--offline"><span class="gb-tc-sr">Offline</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Bo Nguyen</span><span class="gb-tc-person__sub">Back Monday</span></span></button></li><li><button type="button" class="gb-tc-person gb-tc-person--offline" title="An Vo"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="4" aria-hidden="true">AV</span><span class="gb-tc-presence gb-tc-presence--offline"><span class="gb-tc-sr">Offline</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">An Vo</span></span></button></li></ul></div></div></aside></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
8303
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Desktop 1366, tối: cột người (Online / Members)</figcaption><div class="cat-wide"><iframe title="Desktop 1366, tối: cột người (Online / Members)" style="height:680px;width:1366px" srcdoc="<!doctype html><html data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation" data-panel="people"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="true" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section><div class="gb-tc-scrim" aria-hidden="true"></div><aside id="tc-people" class="gb-tc-people" aria-labelledby="tc-people-title" tabindex="-1"><header class="gb-tc-panel-head"><div class="gb-tc-panel-head__text"><h2 class="gb-tc-panel-head__title" id="tc-people-title">Members</h2></div><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-people__toggle" aria-expanded="true" aria-controls="tc-people-body" aria-label="Hide members" title="Hide members"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="2"></rect><path d="M12.5 3.5v13"></path></g></svg></button></header><div class="gb-tc-people__body" id="tc-people-body"><div class="gb-tc-people__section" role="group" aria-labelledby="tc-on-h"><h3 class="gb-tc-people__heading" id="tc-on-h">Online — 3</h3><ul class="gb-tc-people__list"><li><button type="button" class="gb-tc-person" title="Linh Tran"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="4" aria-hidden="true">LT</span><span class="gb-tc-presence gb-tc-presence--online"><span class="gb-tc-sr">Online</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Linh Tran</span><span class="gb-tc-person__sub">Support lead</span></span><span class="gb-tc-person__role">Admin</span></button></li><li><button type="button" class="gb-tc-person" title="Mai Pham"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="7" aria-hidden="true">MP</span><span class="gb-tc-presence gb-tc-presence--online"><span class="gb-tc-sr">Online</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Mai Pham</span><span class="gb-tc-person__sub">Writing the hero copy</span></span></button></li><li><button type="button" class="gb-tc-person" title="Quan Le"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">QL</span><span class="gb-tc-presence gb-tc-presence--away"><span class="gb-tc-sr">Away</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Quan Le</span><span class="gb-tc-person__sub">In a meeting until 11:00</span></span></button></li></ul></div><div class="gb-tc-people__section" role="group" aria-labelledby="tc-all-h"><h3 class="gb-tc-people__heading" id="tc-all-h">Members — 2</h3><ul class="gb-tc-people__list"><li><button type="button" class="gb-tc-person gb-tc-person--offline" title="Bo Nguyen"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">BN</span><span class="gb-tc-presence gb-tc-presence--offline"><span class="gb-tc-sr">Offline</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Bo Nguyen</span><span class="gb-tc-person__sub">Back Monday</span></span></button></li><li><button type="button" class="gb-tc-person gb-tc-person--offline" title="An Vo"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="4" aria-hidden="true">AV</span><span class="gb-tc-presence gb-tc-presence--offline"><span class="gb-tc-sr">Offline</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">An Vo</span></span></button></li></ul></div></div></aside></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
8280
8304
|
<div style="position:fixed;inset:0">
|
|
8281
8305
|
<div class="gb-tc" data-view="conversation" data-panel="people">
|
|
8282
8306
|
<nav class="gb-tc-rail" aria-label="Channels">
|
|
@@ -8793,14 +8817,26 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
8793
8817
|
<label class="gb-tc-sr" for="tc-input">Message</label>
|
|
8794
8818
|
<textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general">
|
|
8795
8819
|
</textarea>
|
|
8796
|
-
<button type="
|
|
8820
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
8797
8821
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
8798
8822
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
8799
|
-
<
|
|
8800
|
-
</
|
|
8801
|
-
<path d="
|
|
8823
|
+
<circle cx="10" cy="10" r="6.5">
|
|
8824
|
+
</circle>
|
|
8825
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
8802
8826
|
</path>
|
|
8803
|
-
|
|
8827
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
8828
|
+
</path>
|
|
8829
|
+
</g>
|
|
8830
|
+
</svg>
|
|
8831
|
+
</button>
|
|
8832
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
8833
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
8834
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
8835
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
8836
|
+
</path>
|
|
8837
|
+
<path d="M9.5 11 16.5 3.5">
|
|
8838
|
+
</path>
|
|
8839
|
+
</g>
|
|
8804
8840
|
</svg>
|
|
8805
8841
|
</button>
|
|
8806
8842
|
</div>
|
|
@@ -8908,7 +8944,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
8908
8944
|
</div>
|
|
8909
8945
|
</aside>
|
|
8910
8946
|
</div>
|
|
8911
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1024: luồng là ngăn trượt phủ lên, cuộc trò chuyện giữ nguyên bề rộng</figcaption><div class="cat-wide"><iframe title="1024: luồng là ngăn trượt phủ lên, cuộc trò chuyện giữ nguyên bề rộng" style="height:640px;width:1024px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation" data-panel="thread"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section><div class="gb-tc-scrim" aria-hidden="true"></div><aside id="tc-thread" class="gb-tc-thread" aria-labelledby="tc-thread-title" tabindex="-1"><header class="gb-tc-panel-head"><div class="gb-tc-panel-head__text"><h2 class="gb-tc-panel-head__title" id="tc-thread-title">Thread</h2><p class="gb-tc-panel-head__sub">#general</p></div><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close" aria-label="Close thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg></button></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-labelledby="tc-thread-title" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-thread__count"><span>2 replies</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">17:02</time></div><div class="gb-tc-msg__body">I can take the cart drawer.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction" aria-pressed="false" title="Linh" aria-label="👍, Linh. Add yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Quan Le" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">17:05</time></div><div class="gb-tc-msg__body">Hero copy is mine.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label><textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Reply…"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div><label class="ui-check gb-tc-composer__also"><input type="checkbox"/><span>Also send to #general</span></label></form></aside></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
8947
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1024: luồng là ngăn trượt phủ lên, cuộc trò chuyện giữ nguyên bề rộng</figcaption><div class="cat-wide"><iframe title="1024: luồng là ngăn trượt phủ lên, cuộc trò chuyện giữ nguyên bề rộng" style="height:640px;width:1024px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation" data-panel="thread"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section><div class="gb-tc-scrim" aria-hidden="true"></div><aside id="tc-thread" class="gb-tc-thread" aria-labelledby="tc-thread-title" tabindex="-1"><header class="gb-tc-panel-head"><div class="gb-tc-panel-head__text"><h2 class="gb-tc-panel-head__title" id="tc-thread-title">Thread</h2><p class="gb-tc-panel-head__sub">#general</p></div><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close" aria-label="Close thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg></button></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-labelledby="tc-thread-title" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-thread__count"><span>2 replies</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">17:02</time></div><div class="gb-tc-msg__body">I can take the cart drawer.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction" aria-pressed="false" title="Linh" aria-label="👍, Linh. Add yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Quan Le" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">17:05</time></div><div class="gb-tc-msg__body">Hero copy is mine.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label><textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Reply…"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div><label class="ui-check gb-tc-composer__also"><input type="checkbox"/><span>Also send to #general</span></label></form></aside></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
8912
8948
|
<div style="position:fixed;inset:0">
|
|
8913
8949
|
<div class="gb-tc" data-view="conversation" data-panel="thread">
|
|
8914
8950
|
<nav class="gb-tc-rail" aria-label="Channels">
|
|
@@ -9425,14 +9461,26 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
9425
9461
|
<label class="gb-tc-sr" for="tc-input">Message</label>
|
|
9426
9462
|
<textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general">
|
|
9427
9463
|
</textarea>
|
|
9428
|
-
<button type="
|
|
9464
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
9429
9465
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
9430
9466
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
9431
|
-
<
|
|
9432
|
-
</
|
|
9433
|
-
<path d="
|
|
9467
|
+
<circle cx="10" cy="10" r="6.5">
|
|
9468
|
+
</circle>
|
|
9469
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
9434
9470
|
</path>
|
|
9435
|
-
|
|
9471
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
9472
|
+
</path>
|
|
9473
|
+
</g>
|
|
9474
|
+
</svg>
|
|
9475
|
+
</button>
|
|
9476
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
9477
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
9478
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
9479
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
9480
|
+
</path>
|
|
9481
|
+
<path d="M9.5 11 16.5 3.5">
|
|
9482
|
+
</path>
|
|
9483
|
+
</g>
|
|
9436
9484
|
</svg>
|
|
9437
9485
|
</button>
|
|
9438
9486
|
</div>
|
|
@@ -9629,15 +9677,27 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
9629
9677
|
<label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label>
|
|
9630
9678
|
<textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Reply…">
|
|
9631
9679
|
</textarea>
|
|
9632
|
-
<button type="
|
|
9680
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
9633
9681
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
9634
9682
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
9635
|
-
<
|
|
9636
|
-
</
|
|
9637
|
-
<path d="
|
|
9683
|
+
<circle cx="10" cy="10" r="6.5">
|
|
9684
|
+
</circle>
|
|
9685
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
9638
9686
|
</path>
|
|
9639
|
-
|
|
9640
|
-
|
|
9687
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
9688
|
+
</path>
|
|
9689
|
+
</g>
|
|
9690
|
+
</svg>
|
|
9691
|
+
</button>
|
|
9692
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
9693
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
9694
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
9695
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
9696
|
+
</path>
|
|
9697
|
+
<path d="M9.5 11 16.5 3.5">
|
|
9698
|
+
</path>
|
|
9699
|
+
</g>
|
|
9700
|
+
</svg>
|
|
9641
9701
|
</button>
|
|
9642
9702
|
</div>
|
|
9643
9703
|
<label class="ui-check gb-tc-composer__also">
|
|
@@ -9647,7 +9707,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
9647
9707
|
</form>
|
|
9648
9708
|
</aside>
|
|
9649
9709
|
</div>
|
|
9650
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Điện thoại 390: cuộc trò chuyện (nút quay về danh sách ở đầu)</figcaption><div class="cat-wide"><iframe title="Điện thoại 390: cuộc trò chuyện (nút quay về danh sách ở đầu)" style="height:720px;width:390px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
9710
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Điện thoại 390: cuộc trò chuyện (nút quay về danh sách ở đầu)</figcaption><div class="cat-wide"><iframe title="Điện thoại 390: cuộc trò chuyện (nút quay về danh sách ở đầu)" style="height:720px;width:390px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
9651
9711
|
<div style="position:fixed;inset:0">
|
|
9652
9712
|
<div class="gb-tc" data-view="conversation">
|
|
9653
9713
|
<nav class="gb-tc-rail" aria-label="Channels">
|
|
@@ -10164,21 +10224,33 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
10164
10224
|
<label class="gb-tc-sr" for="tc-input">Message</label>
|
|
10165
10225
|
<textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general">
|
|
10166
10226
|
</textarea>
|
|
10167
|
-
<button type="
|
|
10227
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
10168
10228
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
10169
10229
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
10170
|
-
<
|
|
10171
|
-
</
|
|
10172
|
-
<path d="
|
|
10230
|
+
<circle cx="10" cy="10" r="6.5">
|
|
10231
|
+
</circle>
|
|
10232
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
10173
10233
|
</path>
|
|
10174
|
-
|
|
10234
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
10235
|
+
</path>
|
|
10236
|
+
</g>
|
|
10237
|
+
</svg>
|
|
10238
|
+
</button>
|
|
10239
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
10240
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
10241
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
10242
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
10243
|
+
</path>
|
|
10244
|
+
<path d="M9.5 11 16.5 3.5">
|
|
10245
|
+
</path>
|
|
10246
|
+
</g>
|
|
10175
10247
|
</svg>
|
|
10176
10248
|
</button>
|
|
10177
10249
|
</div>
|
|
10178
10250
|
</form>
|
|
10179
10251
|
</section>
|
|
10180
10252
|
</div>
|
|
10181
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Điện thoại 390, tối: danh sách kênh</figcaption><div class="cat-wide"><iframe title="Điện thoại 390, tối: danh sách kênh" style="height:520px;width:390px" srcdoc="<!doctype html><html data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="list"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
10253
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Điện thoại 390, tối: danh sách kênh</figcaption><div class="cat-wide"><iframe title="Điện thoại 390, tối: danh sách kênh" style="height:520px;width:390px" srcdoc="<!doctype html><html data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="list"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
10182
10254
|
<div style="position:fixed;inset:0">
|
|
10183
10255
|
<div class="gb-tc" data-view="list">
|
|
10184
10256
|
<nav class="gb-tc-rail" aria-label="Channels">
|
|
@@ -10695,21 +10767,33 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
10695
10767
|
<label class="gb-tc-sr" for="tc-input">Message</label>
|
|
10696
10768
|
<textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general">
|
|
10697
10769
|
</textarea>
|
|
10698
|
-
<button type="
|
|
10770
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
10699
10771
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
10700
10772
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
10701
|
-
<
|
|
10702
|
-
</
|
|
10703
|
-
<path d="
|
|
10773
|
+
<circle cx="10" cy="10" r="6.5">
|
|
10774
|
+
</circle>
|
|
10775
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
10704
10776
|
</path>
|
|
10705
|
-
|
|
10777
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
10778
|
+
</path>
|
|
10779
|
+
</g>
|
|
10780
|
+
</svg>
|
|
10781
|
+
</button>
|
|
10782
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
10783
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
10784
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
10785
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
10786
|
+
</path>
|
|
10787
|
+
<path d="M9.5 11 16.5 3.5">
|
|
10788
|
+
</path>
|
|
10789
|
+
</g>
|
|
10706
10790
|
</svg>
|
|
10707
10791
|
</button>
|
|
10708
10792
|
</div>
|
|
10709
10793
|
</form>
|
|
10710
10794
|
</section>
|
|
10711
10795
|
</div>
|
|
10712
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>HTML thuần (team-chat-plain.js, chạy thật): cột kênh và các tin dựng từ dữ liệu bằng gembossUI.teamChat, cùng markup với component</figcaption><div class="cat-wide"><iframe title="HTML thuần (team-chat-plain.js, chạy thật): cột kênh và các tin dựng từ dữ liệu bằng gembossUI.teamChat, cùng markup với component" style="height:600px;width:1280px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2></div><div class="gb-tc-rail__scroll"></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"></ol></div></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section></div></div><script src="../src/team-chat-plain.js"></script><script>
|
|
10796
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>HTML thuần (team-chat-plain.js, chạy thật): cột kênh và các tin dựng từ dữ liệu bằng gembossUI.teamChat, cùng markup với component</figcaption><div class="cat-wide"><iframe title="HTML thuần (team-chat-plain.js, chạy thật): cột kênh và các tin dựng từ dữ liệu bằng gembossUI.teamChat, cùng markup với component" style="height:600px;width:1280px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2></div><div class="gb-tc-rail__scroll"></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"></ol></div></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section></div></div><script src="../src/team-chat-plain.js"></script><script>
|
|
10713
10797
|
var tc = gembossUI.teamChat, noop = function () {}, at = function (hm) { return "2026-10-20T" + hm + ":00+07:00"; };
|
|
10714
10798
|
document.querySelector(".gb-tc-rail__scroll").replaceChildren(
|
|
10715
10799
|
tc.channelSection({ id: "p-ch", label: "Channels", items: [{ name: "general", active: true, onOpen: noop }, { name: "launch-week", unread: 12, mentions: 2, onOpen: noop }, { name: "payroll", kind: "private", onOpen: noop }] }),
|
|
@@ -10795,14 +10879,26 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
10795
10879
|
<label class="gb-tc-sr" for="tc-input">Message</label>
|
|
10796
10880
|
<textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general">
|
|
10797
10881
|
</textarea>
|
|
10798
|
-
<button type="
|
|
10882
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
10799
10883
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
10800
10884
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
10801
|
-
<
|
|
10802
|
-
</
|
|
10803
|
-
<path d="
|
|
10885
|
+
<circle cx="10" cy="10" r="6.5">
|
|
10886
|
+
</circle>
|
|
10887
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
10804
10888
|
</path>
|
|
10805
|
-
|
|
10889
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
10890
|
+
</path>
|
|
10891
|
+
</g>
|
|
10892
|
+
</svg>
|
|
10893
|
+
</button>
|
|
10894
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
10895
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
10896
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
10897
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
10898
|
+
</path>
|
|
10899
|
+
<path d="M9.5 11 16.5 3.5">
|
|
10900
|
+
</path>
|
|
10901
|
+
</g>
|
|
10806
10902
|
</svg>
|
|
10807
10903
|
</button>
|
|
10808
10904
|
</div>
|
|
@@ -11971,7 +12067,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11971
12067
|
</div>
|
|
11972
12068
|
</aside>
|
|
11973
12069
|
</div></code></pre></details></figure></section>
|
|
11974
|
-
<section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 54 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code><g></code>, không trên <code><svg></code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="reaction"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg><code>reaction</code></div><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="moon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg><code>moon</code></div><div class="gnav-ico cat-icon" title="sun"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="3.2"></circle><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3"></path></g></svg><code>sun</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="more"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg><code>more</code></div><div class="gnav-ico cat-icon" title="apps"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="4.5" r="1"></circle><circle cx="10" cy="4.5" r="1"></circle><circle cx="15.5" cy="4.5" r="1"></circle><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle><circle cx="4.5" cy="15.5" r="1"></circle><circle cx="10" cy="15.5" r="1"></circle><circle cx="15.5" cy="15.5" r="1"></circle></g></svg><code>apps</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div><div class="gnav-ico cat-icon" title="sparkle"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z"></path><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z"></path></g></svg><code>sparkle</code></div><div class="gnav-ico cat-icon" title="hash"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg><code>hash</code></div><div class="gnav-ico cat-icon" title="lock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg><code>lock</code></div><div class="gnav-ico cat-icon" title="reply"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg><code>reply</code></div><div class="gnav-ico cat-icon" title="thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg><code>thread</code></div><div class="gnav-ico cat-icon" title="paperclip"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg><code>paperclip</code></div><div class="gnav-ico cat-icon" title="send"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg><code>send</code></div><div class="gnav-ico cat-icon" title="chevronLeft"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg><code>chevronLeft</code></div><div class="gnav-ico cat-icon" title="chevronsDown"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><code>chevronsDown</code></div><div class="gnav-ico cat-icon" title="panelRight"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="2"></rect><path d="M12.5 3.5v13"></path></g></svg><code>panelRight</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
12070
|
+
<section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 55 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code><g></code>, không trên <code><svg></code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="reaction"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg><code>reaction</code></div><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="moon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg><code>moon</code></div><div class="gnav-ico cat-icon" title="sun"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="3.2"></circle><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3"></path></g></svg><code>sun</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="more"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg><code>more</code></div><div class="gnav-ico cat-icon" title="apps"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="4.5" r="1"></circle><circle cx="10" cy="4.5" r="1"></circle><circle cx="15.5" cy="4.5" r="1"></circle><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle><circle cx="4.5" cy="15.5" r="1"></circle><circle cx="10" cy="15.5" r="1"></circle><circle cx="15.5" cy="15.5" r="1"></circle></g></svg><code>apps</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div><div class="gnav-ico cat-icon" title="sparkle"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z"></path><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z"></path></g></svg><code>sparkle</code></div><div class="gnav-ico cat-icon" title="hash"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg><code>hash</code></div><div class="gnav-ico cat-icon" title="lock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg><code>lock</code></div><div class="gnav-ico cat-icon" title="reply"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg><code>reply</code></div><div class="gnav-ico cat-icon" title="thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg><code>thread</code></div><div class="gnav-ico cat-icon" title="paperclip"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg><code>paperclip</code></div><div class="gnav-ico cat-icon" title="send"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg><code>send</code></div><div class="gnav-ico cat-icon" title="chevronLeft"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg><code>chevronLeft</code></div><div class="gnav-ico cat-icon" title="chevronsDown"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><code>chevronsDown</code></div><div class="gnav-ico cat-icon" title="panelRight"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="2"></rect><path d="M12.5 3.5v13"></path></g></svg><code>panelRight</code></div><div class="gnav-ico cat-icon" title="emoji"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg><code>emoji</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
11975
12071
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
11976
12072
|
<rect x="3" y="3.5" width="4" height="13" rx="1.2">
|
|
11977
12073
|
</rect>
|