aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-02-18 13:34:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

style(highlights): move collapse button to far right of highlights header

Browse Source
This commit is contained in:
Gigi
2025-10-05 22:04:01 +01:00
parent 256540bf60
commit 5e788b0026
2 changed files with 72 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/HighlightsPanel.tsx
View File

@@ -123,69 +123,71 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
<div className="highlights-container">
<div className="highlights-header">
<div className="highlights-actions">
{onHighlightVisibilityChange && (
<div className="highlight-level-toggles">
<div className="highlights-actions-left">
{onHighlightVisibilityChange && (
<div className="highlight-level-toggles">
<button
onClick={() => onHighlightVisibilityChange({
...highlightVisibility,
nostrverse: !highlightVisibility.nostrverse
})}
className={`level-toggle-btn ${highlightVisibility.nostrverse ? 'active' : ''}`}
title="Toggle nostrverse highlights"
aria-label="Toggle nostrverse highlights"
style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
>
<FontAwesomeIcon icon={faGlobe} />
</button>
<button
onClick={() => onHighlightVisibilityChange({
...highlightVisibility,
friends: !highlightVisibility.friends
})}
className={`level-toggle-btn ${highlightVisibility.friends ? 'active' : ''}`}
title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
aria-label="Toggle friends highlights"
style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
disabled={!currentUserPubkey}
>
<FontAwesomeIcon icon={faUserGroup} />
</button>
<button
onClick={() => onHighlightVisibilityChange({
...highlightVisibility,
mine: !highlightVisibility.mine
})}
className={`level-toggle-btn ${highlightVisibility.mine ? 'active' : ''}`}
title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
aria-label="Toggle my highlights"
style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
disabled={!currentUserPubkey}
>
<FontAwesomeIcon icon={faUser} />
</button>
</div>
)}
{onRefresh && (
<button
onClick={() => onHighlightVisibilityChange({
...highlightVisibility,
nostrverse: !highlightVisibility.nostrverse
})}
className={`level-toggle-btn ${highlightVisibility.nostrverse ? 'active' : ''}`}
title="Toggle nostrverse highlights"
aria-label="Toggle nostrverse highlights"
style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
onClick={onRefresh}
className="refresh-highlights-btn"
title="Refresh highlights"
aria-label="Refresh highlights"
disabled={loading}
>
<FontAwesomeIcon icon={faGlobe} />
<FontAwesomeIcon icon={faRotate} spin={loading} />
</button>
)}
{filteredHighlights.length > 0 && (
<button
onClick={() => onHighlightVisibilityChange({
...highlightVisibility,
friends: !highlightVisibility.friends
})}
className={`level-toggle-btn ${highlightVisibility.friends ? 'active' : ''}`}
title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
aria-label="Toggle friends highlights"
style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
disabled={!currentUserPubkey}
onClick={handleToggleUnderlines}
className="toggle-underlines-btn"
title={showUnderlines ? 'Hide underlines' : 'Show underlines'}
aria-label={showUnderlines ? 'Hide underlines' : 'Show underlines'}
>
<FontAwesomeIcon icon={faUserGroup} />
<FontAwesomeIcon icon={showUnderlines ? faEye : faEyeSlash} />
</button>
<button
onClick={() => onHighlightVisibilityChange({
...highlightVisibility,
mine: !highlightVisibility.mine
})}
className={`level-toggle-btn ${highlightVisibility.mine ? 'active' : ''}`}
title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
aria-label="Toggle my highlights"
style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
disabled={!currentUserPubkey}
>
<FontAwesomeIcon icon={faUser} />
</button>
</div>
)}
{onRefresh && (
<button
onClick={onRefresh}
className="refresh-highlights-btn"
title="Refresh highlights"
aria-label="Refresh highlights"
disabled={loading}
>
<FontAwesomeIcon icon={faRotate} spin={loading} />
</button>
)}
{filteredHighlights.length > 0 && (
<button
onClick={handleToggleUnderlines}
className="toggle-underlines-btn"
title={showUnderlines ? 'Hide underlines' : 'Show underlines'}
aria-label={showUnderlines ? 'Hide underlines' : 'Show underlines'}
>
<FontAwesomeIcon icon={showUnderlines ? faEye : faEyeSlash} />
</button>
)}
)}
</div>
<button
onClick={onToggleCollapse}
className="toggle-highlights-btn"

15
src/index.css
View File

@@ -1248,8 +1248,19 @@ body {
justify-content: space-between;
padding: 0.75rem 1rem;
border-bottom: 1px solid #333;
background: #1e1e1e;
border-radius: 12px 12px 0 0;
}
.highlights-actions {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.highlights-actions-left {
display: flex;
align-items: center;
gap: 0.5rem;
}
.highlights-title {