aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-22 08:14:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: move highlight timestamp to top-right corner of cards

Browse Source
This commit is contained in:
Gigi
2025-10-13 12:55:00 +02:00
parent c1a628260c
commit 9a6f788b98
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/HighlightItem.tsx
View File

@@ -303,6 +303,10 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
onClick={handleItemClick}
style={{ cursor: onHighlightClick ? 'pointer' : 'default' }}
>
<span className="highlight-timestamp">
{formatDateCompact(highlight.created_at)}
</span>
<div className="highlight-quote-icon">
<FontAwesomeIcon icon={faQuoteLeft} />
{relayIndicator && (
@@ -333,10 +337,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
<span className="highlight-author">
{getUserDisplayName()}
</span>
<span className="highlight-meta-separator">•</span>
<span className="highlight-time">
{formatDateCompact(highlight.created_at)}
</span>
<div className="highlight-menu-wrapper" ref={menuRef}>
<button

4
src/styles/layout/highlights.css
View File

@@ -100,10 +100,12 @@
.empty-hint { font-size: 0.875rem; color: #666; margin-top: 0.5rem; }
.highlights-list { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.highlight-item { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 1rem; display: flex; gap: 0.75rem; transition: border-color 0.2s ease; }
.highlight-item { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 1rem; display: flex; gap: 0.75rem; transition: border-color 0.2s ease; position: relative; }
.highlight-item:hover { border-color: #646cff; }
.highlight-item.selected { border-color: #646cff; background: #252525; box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.3); }
.highlight-timestamp { position: absolute; top: 0.5rem; right: 0.75rem; font-size: 0.75rem; color: #888; font-weight: 500; white-space: nowrap; pointer-events: none; }
/* Level colors in sidebar items */
.highlight-item.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 25%, transparent); }
.highlight-item.level-friends { border-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-friends, #f97316) 25%, transparent); }