feat: delivery status indicator, GIF picker CSS to TDS file (M-6, M-7)

- Message.tsx: show delivery status (sending/sent/failed) on own messages when
  no read receipts yet; hidden once server confirms (status null); TDS-styled
- GifPicker.tsx: move terminal CSS from runtime <style> tag into lotus-terminal.css.ts
  eliminating flash of unstyled content (M-6)
- lotus-terminal.css.ts: add [data-gif-terminal] selector rules for GIF picker
This commit is contained in:
root
2026-05-16 01:49:25 -04:00
parent 4c4d61600d
commit 0897e2ce4c
3 changed files with 80 additions and 37 deletions
-36
View File
@@ -8,41 +8,6 @@ import { settingsAtom } from '../state/settings';
const PICKER_WIDTH = 312;
const TERMINAL_CSS = `
[data-gif-terminal] input,
[data-gif-terminal] form {
background: #030c14 !important;
color: #e8edf5 !important;
font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace !important;
border: 1px solid rgba(255,107,0,0.35) !important;
border-radius: 4px !important;
font-size: 12px !important;
box-shadow: none !important;
}
[data-gif-terminal] input:focus {
border-color: rgba(255,107,0,0.7) !important;
box-shadow: 0 0 0 2px rgba(255,107,0,0.12) !important;
outline: none !important;
}
[data-gif-terminal] input::placeholder {
color: rgba(255,107,0,0.4) !important;
font-family: 'JetBrains Mono', monospace !important;
}
[data-gif-terminal] svg,
[data-gif-terminal] button[type="reset"] {
display: none !important;
}
[data-gif-terminal] ::-webkit-scrollbar {
width: 4px;
}
[data-gif-terminal] ::-webkit-scrollbar-track {
background: #030508;
}
[data-gif-terminal] ::-webkit-scrollbar-thumb {
background: rgba(255,107,0,0.4);
border-radius: 2px;
}
`;
type GifPickerInnerProps = {
onSelect: (url: string, width: number, height: number) => void;
@@ -142,7 +107,6 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
data-gif-terminal={lotusTerminal ? '' : undefined}
style={containerStyle}
>
{lotusTerminal && <style>{TERMINAL_CSS}</style>}
<SearchContextManager apiKey={apiKey} initialTerm="">
<GifPickerInner onSelect={onSelect} requestClose={requestClose} lotusTerminal={!!lotusTerminal} />
</SearchContextManager>