CRT/waybetter-for-x
1
0
Fork 0
Code Issues Pull requests Releases Activity

wayBetter for X 1.0.2

Browse source
This commit is contained in:
CRTkafa 2026-10-02 02:54:04 +07:00
parent 7e2515aa42
commit 467aea2e28
212 changed files with 10208 additions and 2345 deletions
Download patch file Download diff file Expand all files Collapse all files

9
apps/desktop/scripts/theme-matrix/chat-fixtures.mjs
View file

@ -85,6 +85,9 @@ export const CHAT_CSS = `
.scrollbar-thin-custom { scrollbar-width: thin; scrollbar-color: rgba(156, 163, 175, 0.5) transparent; }
.backdrop-blur-md { backdrop-filter: blur(var(--blur-md)); }
.rounded-chat { border-radius: 16px; } .rounded-full { border-radius: 9999px; }
/* Read live 2026-10-01: the rounded utilities carry their own radius scale (and a squircle corner). */
:is(.rounded-xxs, .rounded-legacy, .rounded-xs, .rounded-sm, .rounded, .rounded-md, .rounded-lg, .rounded-xl) { --x-radius-m: 1.8; } .rounded-md { border-radius: calc(16px * var(--x-radius-m)); }
:root, :host { --radius-2xl: 1rem; --radius-3xl: 1.5rem; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-3xl { border-radius: var(--radius-3xl); }
.max-w-5xl { max-width: var(--container-5xl); } .min-w-\\[400px\\] { min-width: 400px; } .w-full { width: 100%; }
.\\@container { container-type: inline-size; }
@container (width >= 918px) { .\\@wide\\:block { display: block; } .\\@wide\\:w-\\[35\\%\\] { width: 35%; } .\\@wide\\:max-w-xl { max-width: var(--container-xl); } .\\@wide\\:shrink-0 { flex-shrink: 0; } }
@ -100,7 +103,7 @@ export const CHAT_CSS = `
.fx-glyph { width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 5px; }
`;
const avatar = (size, extra = '') => `<div class="bg-gray-300" style="width: ${size}px; height: ${size}px; min-width: ${size}px; border-radius: 9999px; overflow: hidden; ${extra}"><div style="width: 100%; height: 100%; background: linear-gradient(135deg, #8aa4b8, #4f6b80);"></div></div>`;
const avatar = (size, extra = '') => `<div class="bg-gray-300 overflow-hidden rounded-full" style="width: ${size}px; height: ${size}px; min-width: ${size}px; ${extra}"><div style="width: 100%; height: 100%; background: linear-gradient(135deg, #8aa4b8, #4f6b80);"></div></div>`;
const iconButton = (testid, size = 48, classes = 'bg-btn-tertiary text-primary hover:bg-btn-tertiary-hover') => `<button type="button" data-slot="xds-button"${testid ? ` data-testid="${testid}"` : ''} class="fx-btn ${classes}" style="width: ${size}px; height: ${size}px;"><span class="fx-glyph"></span></button>`;
const stamp = (time, mine) => `<div style="position: absolute; bottom: 0; inset-inline-end: 0;"><div class="${mine ? 'text-white' : 'text-gray700'}" style="display: flex; align-items: center; gap: 4px;"><span class="fx-f fx-sub3 text-[color:inherit]">${time}</span></div></div>`;
@ -146,7 +149,7 @@ function inbox() {
<input data-testid="dm-search-input" data-slot="xds-input" placeholder="Search" class="fx-f fx-body rounded-full w-full text-primary border border-transparent bg-inputs placeholder:text-tertiary" style="height: 40px; padding: 0 40px; outline: 0;"></div></div>
</header><div style="padding: 8px 0;"></div>
<div role="listbox" style="display: flex; min-height: 0; flex: 1; flex-direction: column;"><div data-testid="dm-conversation-scroller" class="scrollbar-thin-custom border-transparent" style="height: 100%; overflow: hidden auto; width: 100%; border-top-width: 1px;"><ul style="margin: 0; padding: 0; list-style: none;">
${rows.map((r, i) => `<li><div data-testid="dm-conversation-item-fx${i}"><a href="#" role="option" aria-selected="${!!r.selected}" style="display: block;"><div class="hover:bg-fg-alpha-05/50${r.selected ? ' bg-fg-alpha-05! dark:bg-fg-alpha-10!' : ''}" style="margin: 0 16px; display: flex; gap: 16px; border-radius: 12px; padding: 0 16px 0 8px; cursor: pointer;">
${rows.map((r, i) => `<li><div data-testid="dm-conversation-item-fx${i}"><a href="#" role="option" aria-selected="${!!r.selected}" style="display: block;"><div class="rounded-md hover:bg-fg-alpha-05/50${r.selected ? ' bg-fg-alpha-05! dark:bg-fg-alpha-10!' : ''}" style="margin: 0 16px; display: flex; gap: 16px; padding: 0 16px 0 8px; cursor: pointer;">
<div style="padding: 12px 0;">${avatar(48)}</div>
<div style="display: flex; min-width: 0; flex: 1; flex-direction: column; justify-content: center; gap: 4px;">
<div class="fx-f fx-body" style="display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 500;"><div style="min-width: 0; flex: 1;"><div class="text-text fx-clamp1" data-fx-min="7">${r.name}</div></div><div class="${r.unread ? 'text-primary' : 'text-secondary'}" style="flex-shrink: 0;"><div class="fx-sub2 text-[color:inherit]">${r.time}</div></div></div>
@ -194,7 +197,7 @@ function conversation(kind) {
const typed = group ? '' : 'a message being written';
const composer = `<div data-testid="dm-composer-container" class="max-w-5xl w-full fx-opaque-btn" style="position: absolute; bottom: 0; left: 50%; isolation: isolate; z-index: 10; transform: translateX(-50%); padding: 16px;">
<div style="display: flex; align-items: flex-end; gap: 8px;">${iconButton('dm-composer-attachment-button')}
<form data-testid="dm-composer-form" style="position: relative; min-width: 0; flex: 1; margin: 0;"><div data-testid="dm-composer-input-container" class="fx-f fx-body bg-btn-tertiary" style="display: flex; align-items: flex-end; overflow: hidden; border-radius: 24px; padding: 8px; line-height: 24px;">
<form data-testid="dm-composer-form" style="position: relative; min-width: 0; flex: 1; margin: 0;"><div data-testid="dm-composer-input-container" class="fx-f fx-body bg-btn-tertiary rounded-3xl" style="display: flex; align-items: flex-end; overflow: hidden; padding: 8px; line-height: 24px;">
<textarea data-testid="dm-composer-textarea" rows="1" placeholder="${group ? 'Message' : 'Unencrypted message'}" class="text-primary placeholder:text-tertiary" style="flex: 1; min-width: 0; border: 0; outline: 0; resize: none; height: 32px; padding: 4px 8px;">${typed}</textarea>
${typed ? `<button type="button" data-testid="dm-composer-send-button" class="fx-btn bg-btn-primary text-inverted" style="width: 32px; height: 32px;"><span class="fx-f fx-sub2" style="font-weight: 700;">↑</span></button>` : iconButton('dm-composer-voice-button', 32, 'bg-gray-0 text-primary')}
</div></form></div></div>`;