feat(ui): limit visible reactions and overhaul retro theme

- Limit the number of initially visible reactions per file to 2 and calculate the overflow count on the backend.
- Redesign the retro theme CSS to mimic a classic Windows 98 Explorer window, including title bars, toolbars, and sunken panes.
- Add local storage persistence for the file browser view preference (list vs. thumbnails).
This commit is contained in:
2026-06-02 14:43:16 +03:00
parent 8e3f783780
commit cf5d8bb50d
7 changed files with 740 additions and 110 deletions

View File

@@ -95,6 +95,41 @@
flex: 1;
}
.file-browser-toolbar {
align-items: stretch;
}
.file-browser-toolbar,
.file-browser-toolbar .view-toolbar {
width: 100%;
}
.file-browser-toolbar .view-toolbar .button,
.file-browser-toolbar > .button {
flex: 1 1 auto;
justify-content: center;
}
.file-browser-toolbar .view-toolbar .icon-button {
flex: 0 0 2.5rem;
}
.file-browser-head {
display: none;
}
.file-open {
grid-template-columns: 3rem minmax(0, 1fr) auto;
}
.file-type {
display: none;
}
.file-browser.is-list .file-card {
grid-template-columns: minmax(0, 1fr) minmax(7rem, auto);
}
h1 {
font-size: 1.65rem;
}
@@ -213,6 +248,54 @@
flex-wrap: wrap;
}
.file-browser-titlebar {
align-items: flex-start;
}
.file-browser-titlebar > div:first-child {
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
}
.file-browser {
padding: 0.25rem;
}
.file-open {
grid-template-columns: 2.65rem minmax(0, 1fr);
gap: 0.55rem;
padding: 0.5rem;
}
.file-media {
width: 2.65rem;
height: 2.65rem;
}
.file-size {
display: none;
}
.file-browser.is-list .file-card {
grid-template-columns: 1fr;
gap: 0.25rem;
}
.file-browser.is-list .file-reaction-dock {
justify-content: flex-end;
padding: 0 0.5rem 0.5rem;
}
.file-browser.is-thumbs {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 0.5rem;
}
.file-browser.is-thumbs .file-open {
height: 100%;
}
.file-actions,
.file-browser.is-thumbs .file-actions {
width: 100%;