feat(file-browser): make entire file card clickable in list view

Improve the user experience in the file browser list view by allowing users to click anywhere on a file card to open it, rather than just the specific link. - Add a click event listener to the file browser to handle navigation when clicking a card in list view. - Ensure interactive elements (like buttons or inputs) inside the card do not trigger the card-wide click. - Add `cursor: pointer` to list view file cards to indicate they are clickable. - Update retro theme CSS to style the entire card on hover and focus.
feat(ui): limit visible reactions and overhaul retro theme
2026-06-02 14:45:55 +03:00 · 2026-06-02 14:43:16 +03:00 · 2026-06-02 13:02:51 +03:00
37 changed files with 1344 additions and 138 deletions
--- a/backend/libs/handlers/app.go
+++ b/backend/libs/handlers/app.go
@@ -20,9 +20,14 @@ type App struct {
 	banService      *services.BanService
 	rateLimiter     *rateLimiter
 	uploadGroups    *uploadGrouper
+	fileIcons       *fileIconSet
 }

 func NewApp(cfg config.Config, logger *slog.Logger, renderer *web.Renderer, uploadService *services.UploadService, authService *services.AuthService, settingsService *services.SettingsService, reactionService *services.ReactionService, banService *services.BanService) *App {
+	fileIcons, err := loadFileIcons(cfg.StaticDir)
+	if err != nil {
+		logger.Warn("failed to load file icon map", "source", "handlers", "severity", "warn", "error", err.Error())
+	}
 	return &App{
 		cfg:             cfg,
 		logger:          logger,
@@ -34,6 +39,7 @@ func NewApp(cfg config.Config, logger *slog.Logger, renderer *web.Renderer, uplo
 		banService:      banService,
 		rateLimiter:     newRateLimiter(),
 		uploadGroups:    newUploadGrouper(),
+		fileIcons:       fileIcons,
 	}
 }

--- a/backend/libs/handlers/download.go
+++ b/backend/libs/handlers/download.go
@@ -45,8 +45,12 @@ type fileView struct {
 	URL          string
 	DownloadURL  string
 	ThumbnailURL string
+	HasThumbnail bool
+	IconURL      string
+	IconRetroURL string
 	ReactURL     string
 	Reactions    []reactionView
+	ReactionMore int
 	Reacted      bool
 }

@@ -55,6 +59,7 @@ type reactionView struct {
 	URL     string `json:"url"`
 	Label   string `json:"label"`
 	Count   int    `json:"count"`
+	Visible bool   `json:"visible"`
 }

 type emojiTabView struct {
@@ -350,6 +355,8 @@ func (a *App) fileView(box services.Box, file services.File) fileView {
 }

 func (a *App) fileViewWithReactions(box services.Box, file services.File, reactions []services.ReactionSummary, reacted bool) fileView {
+	icon := a.fileIcons.lookup(file.Name, file.ContentType)
+	reactionViews := a.reactionViews(reactions)
 	return fileView{
 		ID:           file.ID,
 		Name:         file.Name,
@@ -359,8 +366,12 @@ func (a *App) fileViewWithReactions(box services.Box, file services.File, reacti
 		URL:          fmt.Sprintf("/d/%s/f/%s", box.ID, file.ID),
 		DownloadURL:  fmt.Sprintf("/d/%s/f/%s/download", box.ID, file.ID),
 		ThumbnailURL: fmt.Sprintf("/d/%s/thumb/%s", box.ID, file.ID),
+		HasThumbnail: file.Thumbnail != "",
+		IconURL:      fileIconURL("standard", icon.Standard),
+		IconRetroURL: fileIconURL("retro", icon.Retro),
 		ReactURL:     fmt.Sprintf("/d/%s/f/%s/react", box.ID, file.ID),
-		Reactions:    a.reactionViews(reactions),
+		Reactions:    reactionViews,
+		ReactionMore: reactionOverflowCount(reactionViews),
 		Reacted:      reacted,
 	}
 }
@@ -406,17 +417,25 @@ func (a *App) ReactToFile(w http.ResponseWriter, r *http.Request) {

 func (a *App) reactionViews(reactions []services.ReactionSummary) []reactionView {
 	views := make([]reactionView, 0, len(reactions))
-	for _, reaction := range reactions {
+	for index, reaction := range reactions {
 		views = append(views, reactionView{
 			EmojiID: reaction.EmojiID,
 			URL:     emojiURL(reaction.EmojiID),
 			Label:   emojiLabel(reaction.EmojiID),
 			Count:   reaction.Count,
+			Visible: index < 2,
 		})
 	}
 	return views
 }

+func reactionOverflowCount(reactions []reactionView) int {
+	if len(reactions) <= 2 {
+		return 0
+	}
+	return len(reactions) - 2
+}
+
 func (a *App) emojiTabs() ([]emojiTabView, error) {
 	root := a.emojiRoot()
 	entries, err := os.ReadDir(root)
--- a/backend/libs/handlers/icons.go
+++ b/backend/libs/handlers/icons.go
@@ -0,0 +1,152 @@
+package handlers
+
+import (
+	"encoding/json"
+	"fmt"
+	"os"
+	"path/filepath"
+	"strings"
+)
+
+// fileIcon holds the two icon filenames for a file type: the standard (modern)
+// icon and the retro (Win98) icon. The filenames are resolved against
+// static/file-icons/standard and static/file-icons/retro respectively.
+type fileIcon struct {
+	Standard string `json:"standard"`
+	Retro    string `json:"retro"`
+}
+
+type iconType struct {
+	Mime       string   `json:"mime"`
+	Standard   string   `json:"standard"`
+	Retro      string   `json:"retro"`
+	Extensions []string `json:"extensions"`
+}
+
+type iconMapFile struct {
+	Default iconType   `json:"default"`
+	Types   []iconType `json:"types"`
+}
+
+type mimeRule struct {
+	pattern string // exact mime ("application/pdf") or major prefix ("image/")
+	prefix  bool
+	icon    fileIcon
+}
+
+// fileIconSet is the loaded icon map: an extension lookup plus content-type
+// rules and a fallback. It is built once at startup from icon-map.json.
+type fileIconSet struct {
+	byExt    map[string]fileIcon
+	byMime   []mimeRule
+	fallback fileIcon
+}
+
+// loadFileIcons reads static/file-icons/icon-map.json and indexes it by
+// extension and content type so icons can be assigned at render time.
+func loadFileIcons(staticDir string) (*fileIconSet, error) {
+	data, err := os.ReadFile(filepath.Join(staticDir, "file-icons", "icon-map.json"))
+	if err != nil {
+		return nil, err
+	}
+	var raw iconMapFile
+	if err := json.Unmarshal(data, &raw); err != nil {
+		return nil, err
+	}
+
+	set := &fileIconSet{
+		byExt:    make(map[string]fileIcon),
+		fallback: fileIcon{Standard: raw.Default.Standard, Retro: raw.Default.Retro},
+	}
+	if err := validateFileIcon(staticDir, set.fallback); err != nil {
+		return nil, err
+	}
+	for _, t := range raw.Types {
+		icon := fileIcon{Standard: t.Standard, Retro: t.Retro}
+		if err := validateFileIcon(staticDir, icon); err != nil {
+			return nil, err
+		}
+		for _, ext := range t.Extensions {
+			set.byExt[strings.ToLower(strings.TrimPrefix(ext, "."))] = icon
+		}
+		if t.Mime == "" {
+			continue
+		}
+		if strings.HasSuffix(t.Mime, "/*") {
+			set.byMime = append(set.byMime, mimeRule{pattern: strings.TrimSuffix(t.Mime, "*"), prefix: true, icon: icon})
+		} else {
+			set.byMime = append(set.byMime, mimeRule{pattern: strings.ToLower(t.Mime), icon: icon})
+		}
+	}
+	return set, nil
+}
+
+func validateFileIcon(staticDir string, icon fileIcon) error {
+	if icon.Standard != "" {
+		if err := validateFileIconPath(staticDir, "standard", icon.Standard); err != nil {
+			return err
+		}
+	}
+	if icon.Retro != "" {
+		if err := validateFileIconPath(staticDir, "retro", icon.Retro); err != nil {
+			return err
+		}
+	}
+	return nil
+}
+
+func validateFileIconPath(staticDir, theme, name string) error {
+	if strings.Contains(name, "/") || strings.Contains(name, "\\") || strings.Contains(name, "..") {
+		return fmt.Errorf("invalid %s file icon path %q", theme, name)
+	}
+	path := filepath.Join(staticDir, "file-icons", theme, name)
+	info, err := os.Stat(path)
+	if err != nil {
+		return fmt.Errorf("missing %s file icon %q: %w", theme, name, err)
+	}
+	if info.IsDir() {
+		return fmt.Errorf("%s file icon %q is a directory", theme, name)
+	}
+	return nil
+}
+
+// lookup resolves a file's icon from its name (extension) first, falling back to
+// its content type, then to the default icon. Extension wins because stored
+// content types are often the generic application/octet-stream.
+func (s *fileIconSet) lookup(name, contentType string) fileIcon {
+	if s == nil {
+		return fileIcon{}
+	}
+	if ext := strings.ToLower(strings.TrimPrefix(filepath.Ext(name), ".")); ext != "" {
+		if icon, ok := s.byExt[ext]; ok {
+			return icon
+		}
+	}
+
+	ct := strings.ToLower(strings.TrimSpace(contentType))
+	if i := strings.IndexByte(ct, ';'); i >= 0 {
+		ct = strings.TrimSpace(ct[:i])
+	}
+	if ct != "" && ct != "application/octet-stream" {
+		for _, rule := range s.byMime { // exact matches first
+			if !rule.prefix && rule.pattern == ct {
+				return rule.icon
+			}
+		}
+		for _, rule := range s.byMime { // then major-type prefixes
+			if rule.prefix && strings.HasPrefix(ct, rule.pattern) {
+				return rule.icon
+			}
+		}
+	}
+	return s.fallback
+}
+
+// fileIconURL builds the /static URL for an icon filename in the given theme
+// directory ("standard" or "retro").
+func fileIconURL(theme, name string) string {
+	if name == "" {
+		return ""
+	}
+	return "/static/file-icons/" + theme + "/" + name
+}
--- a/backend/libs/handlers/icons_test.go
+++ b/backend/libs/handlers/icons_test.go
@@ -0,0 +1,54 @@
+package handlers
+
+import (
+	"path/filepath"
+	"testing"
+)
+
+func TestFileIconMapLoadsAndResolvesCommonTypes(t *testing.T) {
+	icons, err := loadFileIcons(filepath.Join("..", "..", "static"))
+	if err != nil {
+		t.Fatalf("loadFileIcons returned error: %v", err)
+	}
+
+	tests := []struct {
+		name         string
+		contentType  string
+		wantStandard string
+		wantRetro    string
+	}{
+		{
+			name:         "photo.jpg",
+			contentType:  "application/octet-stream",
+			wantStandard: "image-document-svgrepo-com.svg",
+			wantRetro:    "shimgvw.dll_14_1-2.png",
+		},
+		{
+			name:         "movie.mkv",
+			contentType:  "",
+			wantStandard: "video-document-svgrepo-com.svg",
+			wantRetro:    "wmploc.dll_14_504-2.png",
+		},
+		{
+			name:         "archive.7z",
+			contentType:  "",
+			wantStandard: "zip-document-svgrepo-com.svg",
+			wantRetro:    "zipfldr.dll_14_101-2.png",
+		},
+		{
+			name:         "unknown.bin",
+			contentType:  "application/octet-stream",
+			wantStandard: "txt-document-svgrepo-com.svg",
+			wantRetro:    "shell32.dll_14_152-2.png",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			got := icons.lookup(tt.name, tt.contentType)
+			if got.Standard != tt.wantStandard || got.Retro != tt.wantRetro {
+				t.Fatalf("lookup returned %+v, want standard=%q retro=%q", got, tt.wantStandard, tt.wantRetro)
+			}
+		})
+	}
+}
--- a/backend/static/css/16-retro.css
+++ b/backend/static/css/16-retro.css
@@ -592,31 +592,152 @@
  content: "\23F1  ";
 }

-/* List / Thumbnails / Preview images = a Win98 toolbar (menubar) of flat
-   buttons that raise on hover and depress when active. */
+/* The file browser becomes a Win98 Explorer window: blue titlebar, grey
+   toolbar, sunken content pane and flat rows. */
+:root[data-theme="retro"] .file-browser-window {
+  border: 1px solid #000000;
+  border-radius: 0;
+  background: #c0c0c0;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
+}
+
+:root[data-theme="retro"] .file-browser-titlebar {
+  min-height: 1.8rem;
+  margin: 3px 3px 0;
+  padding: 0.2rem 0.45rem;
+  border: 0;
+  background: linear-gradient(to right, #000078 0%, #000078 80%, #0f80cd 100%);
+  color: #ffffff;
+}
+
+:root[data-theme="retro"] .file-browser-titlebar strong,
+:root[data-theme="retro"] .file-browser-titlebar span {
+  color: #ffffff;
+  font-size: 0.78rem;
+}
+
+:root[data-theme="retro"] .file-browser-window-actions {
+  display: none;
+}
+
+:root[data-theme="retro"] .file-browser-toolbar {
+  justify-content: space-between;
+  margin: 0 3px;
+  padding: 3px;
+  border: 0;
+  border-bottom: 1px solid #808080;
+  background: #c0c0c0;
+}
+
 :root[data-theme="retro"] .view-toolbar {
  justify-content: flex-start;
  gap: 2px;
-  margin-top: 1rem;
-  padding: 3px;
+  margin-top: 0;
+  padding: 0;
  background: #c0c0c0;
-  border: 1px solid #000000;
-  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
+  border: 0;
+  box-shadow: none;
 }

-:root[data-theme="retro"] .view-toolbar .button {
+:root[data-theme="retro"] .view-toolbar .button,
+:root[data-theme="retro"] .file-browser-toolbar > .button {
+  display: inline-grid;
+  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  font-weight: 400;
 }

-:root[data-theme="retro"] .view-toolbar .button:hover {
+:root[data-theme="retro"] .view-toolbar .icon-button {
+  width: 2.2rem;
+  height: 2rem;
+  padding: 0;
+}
+
+:root[data-theme="retro"] .view-toolbar .icon-button svg {
+  margin: 0;
+  display: block;
+}
+
+:root[data-theme="retro"] .view-toolbar .button:hover,
+:root[data-theme="retro"] .file-browser-toolbar > .button:hover {
  background: #c0c0c0;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff;
 }

-:root[data-theme="retro"] .view-toolbar .button.is-active {
+:root[data-theme="retro"] .view-toolbar .button.is-active,
+:root[data-theme="retro"] .file-browser-toolbar > .button.is-active {
  background: #d4d0c8;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
 }
+
+:root[data-theme="retro"] .file-browser-head {
+  margin: 0 3px;
+  border: 0;
+  border-bottom: 1px solid #808080;
+  background: #c0c0c0;
+  color: #000000;
+  text-transform: none;
+}
+
+:root[data-theme="retro"] .file-browser {
+  margin: 0 3px 3px;
+  border: 1px solid #000000;
+  background: #ffffff;
+  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
+}
+
+:root[data-theme="retro"] .download-item {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+:root[data-theme="retro"] .file-open {
+  border-radius: 0;
+  color: #000000;
+}
+
+:root[data-theme="retro"] .file-open:hover,
+:root[data-theme="retro"] .file-open:focus-visible {
+  background: transparent;
+  color: #000000;
+  outline: 2px solid #000078;
+  outline-offset: -2px;
+}
+
+:root[data-theme="retro"] .file-browser.is-list .file-card:hover,
+:root[data-theme="retro"] .file-browser.is-list .file-card:focus-within {
+  background: transparent;
+  outline: 2px solid #000078;
+  outline-offset: -2px;
+}
+
+:root[data-theme="retro"] .file-browser.is-list .file-card:hover .file-open,
+:root[data-theme="retro"] .file-browser.is-list .file-card:focus-within .file-open {
+  outline: 0;
+}
+
+:root[data-theme="retro"] .file-media {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+:root[data-theme="retro"] .file-browser.is-thumbs .file-open {
+  align-content: start;
+  justify-content: center;
+}
+
+:root[data-theme="retro"] .file-browser.is-thumbs .file-media {
+  justify-self: center;
+  align-self: start;
+}
+
+:root[data-theme="retro"] .file-type,
+:root[data-theme="retro"] .file-size,
+:root[data-theme="retro"] .file-main small {
+  color: inherit;
+}
--- a/backend/static/css/30-download.css
+++ b/backend/static/css/30-download.css
@@ -46,12 +46,22 @@
  text-decoration: none;
 }

-.view-toolbar {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-top: 1rem;
+.thumb-link {
+  flex: 0 0 4.75rem;
+  width: 4.75rem;
+  aspect-ratio: 16 / 10;
+  display: block;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 0.2rem);
+  background: var(--muted);
+}
+
+.thumb-link img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
 }

 .button.is-active {
@@ -59,26 +69,148 @@
  color: var(--primary-foreground);
 }

+.file-browser-window {
+  overflow: hidden;
+  margin-top: 1.25rem;
+  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--primary));
+  border-radius: var(--radius);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--background) 92%, transparent));
+  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
+  text-align: left;
+}
+
+.file-browser-titlebar {
+  min-height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0.9rem;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--muted) 62%, transparent);
+}
+
+.file-browser-titlebar > div:first-child {
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+}
+
+.file-browser-titlebar strong {
+  font-size: 0.95rem;
+}
+
+.file-browser-titlebar span {
+  color: var(--muted-foreground);
+  font-size: 0.78rem;
+  white-space: nowrap;
+}
+
+.file-browser-window-actions {
+  display: inline-flex;
+  gap: 0.35rem;
+}
+
+.file-browser-window-actions span {
+  width: 0.72rem;
+  height: 0.72rem;
+  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--foreground));
+  border-radius: 999px;
+  background: var(--muted);
+}
+
+.file-browser-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.65rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--card) 74%, transparent);
+}
+
+.view-toolbar {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.view-toolbar .button,
+.file-browser-toolbar > .button {
+  min-height: 2rem;
+  padding: 0.35rem 0.65rem;
+  font-size: 0.78rem;
+}
+
+.view-toolbar .icon-button {
+  width: 2.25rem;
+  padding-inline: 0;
+  justify-content: center;
+}
+
+.view-toolbar svg {
+  width: 0.95rem;
+  height: 0.95rem;
+}
+
+.file-browser-head {
+  display: grid;
+  grid-template-columns: 3rem minmax(0, 1fr) minmax(8rem, 0.38fr) minmax(5rem, 0.18fr) minmax(8rem, 0.32fr);
+  gap: 0.75rem;
+  padding: 0.42rem 1rem;
+  border-bottom: 1px solid var(--border);
+  color: var(--muted-foreground);
+  background: color-mix(in srgb, var(--background) 78%, transparent);
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.file-browser-head span:first-child {
+  grid-column: 2;
+}
+
 .file-browser {
+  display: grid;
+  gap: 0;
+  padding: 0.35rem;
  transition: opacity 160ms ease;
 }

+.file-browser .download-item {
+  display: grid;
+  min-width: 0;
+  border: 0;
+  border-radius: calc(var(--radius) - 0.25rem);
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+  transform: none;
+}
+
+.file-browser .download-item:hover {
+  transform: none;
+}
+
 .file-card {
  position: relative;
-  padding-bottom: 2.6rem;
+  padding: 0;
 }

 .file-reaction-dock {
-  position: absolute;
-  right: 0.65rem;
-  bottom: 0.55rem;
+  position: static;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
-  max-width: calc(100% - 1.3rem);
+  min-width: 0;
+  max-width: 100%;
  gap: 0.35rem;
  pointer-events: none;
+  padding-right: 0.65rem;
 }

 .file-reactions {
@@ -87,10 +219,13 @@
  justify-content: flex-end;
  min-width: 0;
  gap: 0.25rem;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  white-space: nowrap;
 }

 .reaction-pill {
+  appearance: none;
+  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
@@ -104,6 +239,11 @@
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  pointer-events: auto;
+  cursor: pointer;
+}
+
+.reaction-pill.is-hidden-summary {
+  display: none;
 }

 .reaction-pill img {
@@ -112,6 +252,31 @@
  display: block;
 }

+.reaction-more {
+  appearance: none;
+  flex: 0 0 auto;
+  min-height: 1.6rem;
+  padding: 0.16rem 0.45rem;
+  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--primary));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--card) 88%, #000);
+  color: var(--foreground);
+  font-size: 0.75rem;
+  font-weight: 800;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.reaction-pill:hover,
+.reaction-pill:focus-visible,
+.reaction-more:hover,
+.reaction-more:focus-visible {
+  border-color: var(--primary);
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
 .reaction-button {
  width: 2.1rem;
  height: 2.1rem;
@@ -212,6 +377,30 @@ html.reaction-picker-open body {
  font-size: 0.75rem;
 }

+.reaction-existing {
+  padding: 0.55rem 0.7rem 0;
+}
+
+.reaction-existing small,
+.reaction-readonly-note {
+  display: block;
+  color: var(--muted-foreground);
+  font-size: 0.74rem;
+  font-weight: 700;
+}
+
+.reaction-existing-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-top: 0.4rem;
+}
+
+.reaction-readonly-note {
+  margin: 0;
+  padding: 0.55rem 0.7rem 0.7rem;
+}
+
 .reaction-picker-tabs {
  display: flex;
  gap: 0.35rem;
@@ -303,76 +492,182 @@ html.reaction-picker-open body {
  object-fit: contain;
 }

-.thumb-link {
-  display: block;
+/* A file row behaves like an entry in a desktop file explorer: a small
+   thumbnail/icon followed by the name and metadata. The whole row is the click
+   target (raw view of the file). */
+.file-open {
+  min-width: 0;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 3rem minmax(0, 1fr) minmax(8rem, 0.38fr) minmax(5rem, 0.18fr);
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--foreground);
+  text-decoration: none;
+  padding: 0.55rem 0.65rem;
+  border-radius: calc(var(--radius) - 0.25rem);
+}
+
+.file-open:hover,
+.file-open:focus-visible {
+  background: var(--surface-1-hover);
+}
+
+.file-media {
+  flex: 0 0 3rem;
+  width: 3rem;
+  height: 3rem;
+  display: grid;
+  place-items: center;
  overflow: hidden;
-  flex: 0 0 4.75rem;
-  width: 4.75rem;
-  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 0.125rem);
  background: var(--muted);
 }

-.thumb-link img {
+.file-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
 }

+.file-icon {
+  width: 2.1rem;
+  height: 2.1rem;
+  display: block;
+  object-fit: contain;
+}
+
+/* Retro (Win98) icons are tiny pixel art — keep them crisp and swap them in
+   only when the retro theme is active. */
+.file-icon-retro {
+  display: none;
+  image-rendering: pixelated;
+}
+
+[data-theme="retro"] .file-icon-standard {
+  display: none;
+}
+
+[data-theme="retro"] .file-icon-retro {
+  display: block;
+}
+
 .file-main {
  min-width: 0;
  max-width: 100%;
-  flex: 1;
  color: var(--foreground);
  text-decoration: none;
 }

-.file-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
+.file-name {
+  min-width: 0;
 }

-.preview-action [hidden] {
-  display: none;
+.file-main small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-type,
+.file-size {
+  overflow: hidden;
+  color: var(--muted-foreground);
+  font-size: 0.78rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-size {
+  text-align: right;
 }

 .file-browser.is-thumbs {
-  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  gap: 0.75rem;
+  padding: 0.75rem;
+  grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
+}
+
+.file-browser-window.is-icon-view .file-browser-head {
+  display: none;
 }

 .file-browser.is-thumbs .file-card {
  display: grid;
+  min-height: 13.75rem;
  min-width: 0;
  align-content: start;
-  gap: 0.7rem;
+  gap: 0.5rem;
+}
+
+.file-browser.is-list .file-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.32fr);
+  align-items: center;
+  min-height: 4.25rem;
+  cursor: pointer;
+}
+
+.file-browser.is-list .file-card:hover,
+.file-browser.is-list .file-card:focus-within {
+  background: var(--surface-1-hover);
+}
+
+.file-browser.is-list .file-card:hover .file-open,
+.file-browser.is-list .file-card:focus-within .file-open {
+  background: transparent;
+}
+
+.file-browser.is-thumbs .file-open {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 6.75rem auto;
+  gap: 1rem;
+  height: 100%;
+  min-height: 0;
+  padding: 0.65rem 0.65rem 3.05rem;
+  text-align: center;
+  justify-items: center;
+  align-content: start;
+  overflow: hidden;
+}
+
+.file-browser.is-thumbs .file-media {
+  width: min(6.75rem, 76%);
+  height: 6.75rem;
+  flex-basis: auto;
+  aspect-ratio: 1;
+}
+
+.file-browser.is-thumbs .file-icon {
+  width: 64%;
+  height: 64%;
 }

 .file-browser.is-thumbs .file-main {
  width: 100%;
+  grid-template-columns: 1fr;
+  gap: 0.25rem;
+  align-self: start;
+  padding-top: 0.25rem;
 }

-.file-browser.is-thumbs .thumb-link {
-  width: 100%;
-  flex-basis: auto;
-}
-
-.file-browser.is-thumbs .button {
-  width: 100%;
-}
-
-.file-browser.is-thumbs .file-actions {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.file-browser.images-only .file-card:not([data-kind="image"]) {
+.file-browser.is-thumbs .file-type,
+.file-browser.is-thumbs .file-size {
  display: none;
 }

+.file-browser.is-thumbs .file-reaction-dock {
+  position: absolute;
+  right: 0.6rem;
+  bottom: 0.65rem;
+  max-width: calc(100% - 1.2rem);
+  padding-right: 0;
+}
+
 .context-menu {
  position: fixed;
  z-index: 30;
--- a/backend/static/css/90-responsive.css
+++ b/backend/static/css/90-responsive.css
@@ -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%;
--- a/backend/static/file-icons/icon-map.json
+++ b/backend/static/file-icons/icon-map.json
@@ -0,0 +1,112 @@
+{
+  "_comment": "Maps a file's type (resolved from its extension / content type) to a file-type icon. 'standard' icons live in file-icons/standard, 'retro' (Win98) icons in file-icons/retro. The server reads this at startup and picks the icon per file; thumbnails always win over icons when present.",
+  "default": {
+    "mime": "application/octet-stream",
+    "standard": "txt-document-svgrepo-com.svg",
+    "retro": "shell32.dll_14_152-2.png"
+  },
+  "types": [
+    {
+      "mime": "image/*",
+      "standard": "image-document-svgrepo-com.svg",
+      "retro": "shimgvw.dll_14_1-2.png",
+      "extensions": ["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg", "ico", "tif", "tiff", "heic", "heif", "avif", "jfif"]
+    },
+    {
+      "mime": "image/vnd.adobe.photoshop",
+      "standard": "psd-document-svgrepo-com.svg",
+      "retro": "shimgvw.dll_14_1-2.png",
+      "extensions": ["psd"]
+    },
+    {
+      "mime": "audio/*",
+      "standard": "audio-document-svgrepo-com.svg",
+      "retro": "wmploc.dll_14_610-2.png",
+      "extensions": ["mp3", "wav", "flac", "aac", "ogg", "oga", "m4a", "wma", "opus", "aiff", "aif", "mid", "midi"]
+    },
+    {
+      "mime": "video/mp4",
+      "standard": "mp4-document-svgrepo-com.svg",
+      "retro": "wmploc.dll_14_504-2.png",
+      "extensions": ["mp4", "m4v"]
+    },
+    {
+      "mime": "video/*",
+      "standard": "video-document-svgrepo-com.svg",
+      "retro": "wmploc.dll_14_504-2.png",
+      "extensions": ["mkv", "mov", "avi", "webm", "wmv", "flv", "mpg", "mpeg", "3gp", "ogv", "ts", "m2ts"]
+    },
+    {
+      "mime": "application/zip",
+      "standard": "zip-document-svgrepo-com.svg",
+      "retro": "zipfldr.dll_14_101-2.png",
+      "extensions": ["zip", "rar", "7z", "gz", "tar", "bz2", "xz", "tgz", "zst", "lz", "lzma", "cab", "iso"]
+    },
+    {
+      "mime": "application/pdf",
+      "standard": "pdf-document-svgrepo-com.svg",
+      "retro": "shell32.dll_14_152-2.png",
+      "extensions": ["pdf"]
+    },
+    {
+      "mime": "text/html",
+      "standard": "html-document-svgrepo-com.svg",
+      "retro": "mshtml.dll_14_2660-2.png",
+      "extensions": ["html", "htm", "xhtml", "mhtml"]
+    },
+    {
+      "mime": "application/x-shockwave-flash",
+      "standard": "flash-document-svgrepo-com.svg",
+      "retro": "shell32.dll_14_152-2.png",
+      "extensions": ["swf", "fla"]
+    },
+    {
+      "mime": "application/vnd.ms-excel",
+      "standard": "excel-document-svgrepo-com.svg",
+      "retro": "shell32.dll_14_151-2.png",
+      "extensions": ["xls", "xlsx", "xlsm", "ods"]
+    },
+    {
+      "mime": "text/csv",
+      "standard": "csv-document-svgrepo-com.svg",
+      "retro": "shell32.dll_14_151-2.png",
+      "extensions": ["csv", "tsv"]
+    },
+    {
+      "mime": "application/msword",
+      "standard": "word-document-svgrepo-com.svg",
+      "retro": "shell32.dll_14_2-0.png",
+      "extensions": ["doc", "docx", "odt"]
+    },
+    {
+      "mime": "application/rtf",
+      "standard": "rtf-document-svgrepo-com.svg",
+      "retro": "shell32.dll_14_2-0.png",
+      "extensions": ["rtf"]
+    },
+    {
+      "mime": "application/vnd.apple.pages",
+      "standard": "pages-document-svgrepo-com.svg",
+      "retro": "shell32.dll_14_2-0.png",
+      "extensions": ["pages"]
+    },
+    {
+      "mime": "application/vnd.visio",
+      "standard": "visio-document-svgrepo-com.svg",
+      "retro": "shell32.dll_14_152-2.png",
+      "extensions": ["vsd", "vsdx"]
+    },
+    {
+      "mime": "application/x-msdownload",
+      "standard": "exe-document-svgrepo-com.svg",
+      "retro": "shell32.dll_14_3-0.png",
+      "extensions": ["exe", "msi", "bat", "cmd", "com", "app", "dmg", "apk", "deb", "rpm", "appimage"]
+    },
+    {
+      "mime": "text/plain",
+      "standard": "txt-document-svgrepo-com.svg",
+      "retro": "shell32.dll_14_151-2.png",
+      "extensions": ["txt", "text", "log", "md", "markdown", "ini", "cfg", "conf", "json", "xml", "yaml", "yml", "toml", "js", "ts", "jsx", "tsx", "go", "py", "rb", "php", "java", "c", "h", "cpp", "cc", "cs", "rs", "sh", "bash", "css", "scss", "sql"]
+    }
+  ]
+}
--- a/backend/static/file-icons/retro/mshtml.dll_14_2660-2.png
+++ b/backend/static/file-icons/retro/mshtml.dll_14_2660-2.png
--- a/backend/static/file-icons/retro/shell32.dll_14_151-2.png
+++ b/backend/static/file-icons/retro/shell32.dll_14_151-2.png
--- a/backend/static/file-icons/retro/shell32.dll_14_152-2.png
+++ b/backend/static/file-icons/retro/shell32.dll_14_152-2.png
--- a/backend/static/file-icons/retro/shell32.dll_14_2-0.png
+++ b/backend/static/file-icons/retro/shell32.dll_14_2-0.png
--- a/backend/static/file-icons/retro/shell32.dll_14_3-0.png
+++ b/backend/static/file-icons/retro/shell32.dll_14_3-0.png
--- a/backend/static/file-icons/retro/shimgvw.dll_14_1-2.png
+++ b/backend/static/file-icons/retro/shimgvw.dll_14_1-2.png
--- a/backend/static/file-icons/retro/wmploc.dll_14_504-2.png
+++ b/backend/static/file-icons/retro/wmploc.dll_14_504-2.png
--- a/backend/static/file-icons/retro/wmploc.dll_14_610-2.png
+++ b/backend/static/file-icons/retro/wmploc.dll_14_610-2.png
--- a/backend/static/file-icons/retro/zipfldr.dll_14_101-2.png
+++ b/backend/static/file-icons/retro/zipfldr.dll_14_101-2.png
--- a/backend/static/file-icons/standard/audio-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/audio-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M5.151.012c-2.802 0-5.073 2.272-5.073 5.073v53.842c0 2.802 2.272 5.073 5.073 5.073h45.774c2.803 0 5.075-2.271 5.075-5.073v-38.606l-18.903-20.309h-31.946z" fill="#379FD3"/>
+
+<path d="M56 20.357v1h-12.8s-6.312-1.26-6.128-6.707c0 0 .208 5.707 6.003 5.707h12.925z" fill="#2987C8"/>
--- a/backend/static/file-icons/standard/csv-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/csv-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<path d="M5.106 0c-2.802 0-5.073 2.272-5.073 5.074v53.841c0 2.803 2.271 5.074 5.073 5.074h45.774c2.801 0 5.074-2.271 5.074-5.074v-38.605l-18.903-20.31h-31.945z" fill-rule="evenodd" clip-rule="evenodd" fill="#45B058"/>
+
+<path d="M20.306 43.197c.126.144.198.324.198.522 0 .378-.306.72-.703.72-.18 0-.378-.072-.504-.234-.702-.846-1.891-1.387-3.007-1.387-2.629 0-4.627 2.017-4.627 4.88 0 2.845 1.999 4.879 4.627 4.879 1.134 0 2.25-.486 3.007-1.369.125-.144.324-.233.504-.233.415 0 .703.359.703.738 0 .18-.072.36-.198.504-.937.972-2.215 1.693-4.015 1.693-3.457 0-6.176-2.521-6.176-6.212s2.719-6.212 6.176-6.212c1.8.001 3.096.721 4.015 1.711zm6.802 10.714c-1.782 0-3.187-.594-4.213-1.495-.162-.144-.234-.342-.234-.54 0-.361.27-.757.702-.757.144 0 .306.036.432.144.828.739 1.98 1.314 3.367 1.314 2.143 0 2.827-1.152 2.827-2.071 0-3.097-7.112-1.386-7.112-5.672 0-1.98 1.764-3.331 4.123-3.331 1.548 0 2.881.467 3.853 1.278.162.144.252.342.252.54 0 .36-.306.72-.703.72-.144 0-.306-.054-.432-.162-.882-.72-1.98-1.044-3.079-1.044-1.44 0-2.467.774-2.467 1.909 0 2.701 7.112 1.152 7.112 5.636.001 1.748-1.187 3.531-4.428 3.531zm16.994-11.254l-4.159 10.335c-.198.486-.685.81-1.188.81h-.036c-.522 0-1.008-.324-1.207-.81l-4.142-10.335c-.036-.09-.054-.18-.054-.288 0-.36.323-.793.81-.793.306 0 .594.18.72.486l3.889 9.992 3.889-9.992c.108-.288.396-.486.72-.486.468 0 .81.378.81.793.001.09-.017.198-.052.288z" fill="#ffffff"/>
+
+<g fill-rule="evenodd" clip-rule="evenodd">
--- a/backend/static/file-icons/standard/excel-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/excel-document-svgrepo-com.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M5.112.006c-2.802 0-5.073 2.273-5.073 5.074v53.841c0 2.803 2.271 5.074 5.073 5.074h45.774c2.801 0 5.074-2.271 5.074-5.074v-38.605l-18.902-20.31h-31.946z" fill-rule="evenodd" clip-rule="evenodd" fill="#45B058"/><path d="M19.429 53.938c-.216 0-.415-.09-.54-.27l-3.728-4.97-3.745 4.97c-.126.18-.324.27-.54.27-.396 0-.72-.306-.72-.72 0-.144.035-.306.144-.432l3.89-5.131-3.619-4.826c-.09-.126-.145-.27-.145-.414 0-.342.288-.72.721-.72.216 0 .432.108.576.288l3.438 4.628 3.438-4.646c.127-.18.324-.27.541-.27.378 0 .738.306.738.72 0 .144-.036.288-.127.414l-3.619 4.808 3.891 5.149c.09.126.125.27.125.414 0 .396-.324.738-.719.738zm9.989-.126h-5.455c-.595 0-1.081-.486-1.081-1.08v-10.317c0-.396.324-.72.774-.72.396 0 .721.324.721.72v10.065h5.041c.359 0 .648.288.648.648 0 .396-.289.684-.648.684zm6.982.216c-1.782 0-3.188-.594-4.213-1.495-.162-.144-.234-.342-.234-.54 0-.36.27-.756.702-.756.144 0 .306.036.433.144.828.738 1.98 1.314 3.367 1.314 2.143 0 2.826-1.152 2.826-2.071 0-3.097-7.111-1.386-7.111-5.672 0-1.98 1.764-3.331 4.123-3.331 1.548 0 2.881.468 3.853 1.278.162.144.253.342.253.54 0 .36-.307.72-.703.72-.145 0-.307-.054-.432-.162-.883-.72-1.98-1.044-3.079-1.044-1.44 0-2.467.774-2.467 1.909 0 2.701 7.112 1.152 7.112 5.636 0 1.748-1.188 3.53-4.43 3.53z" fill="#ffffff"/><path d="M55.953 20.352v1h-12.801s-6.312-1.26-6.127-6.707c0 0 .207 5.707 6.002 5.707h12.926z" fill-rule="evenodd" clip-rule="evenodd" fill="#349C42"/><path d="M37.049 0v14.561c0 1.656 1.104 5.791 6.104 5.791h12.801l-18.905-20.352z" opacity=".5" fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff"/></svg>
--- a/backend/static/file-icons/standard/exe-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/exe-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<path d="M5.112.025c-2.802 0-5.073 2.272-5.073 5.074v53.841c0 2.803 2.271 5.074 5.073 5.074h45.774c2.801 0 5.074-2.271 5.074-5.074v-38.605l-18.902-20.31h-31.946z" fill-rule="evenodd" clip-rule="evenodd" fill="#8199AF"/>
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M55.961 20.377v1h-12.799s-6.312-1.26-6.129-6.708c0 0 .208 5.708 6.004 5.708h12.924z" fill="#617F9B"/>
--- a/backend/static/file-icons/standard/flash-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/flash-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<path d="M5.112.009c-2.802 0-5.073 2.273-5.073 5.074v53.841c0 2.803 2.271 5.074 5.073 5.074h45.775c2.801 0 5.074-2.271 5.074-5.074v-38.605l-18.904-20.31h-31.945z" fill-rule="evenodd" clip-rule="evenodd" fill="#E53C3C"/>
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M55.961 20.346v1h-12.799s-6.312-1.26-6.129-6.707c0 0 .208 5.707 6.004 5.707h12.924z" fill="#DE2D2D"/>
--- a/backend/static/file-icons/standard/html-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/html-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<path d="M5.135.008c-2.803 0-5.074 2.272-5.074 5.074v53.84c0 2.803 2.271 5.074 5.074 5.074h45.775c2.801 0 5.074-2.271 5.074-5.074v-38.605l-18.903-20.309h-31.946z" fill-rule="evenodd" clip-rule="evenodd" fill="#F7622C"/>
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M55.976 20.352v1h-12.799s-6.312-1.26-6.129-6.707c0 0 .208 5.707 6.004 5.707h12.924z" fill="#F54921"/>
--- a/backend/static/file-icons/standard/image-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/image-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M5.125.042c-2.801 0-5.072 2.273-5.072 5.074v53.841c0 2.803 2.271 5.073 5.072 5.073h45.775c2.801 0 5.074-2.271 5.074-5.073v-38.604l-18.904-20.311h-31.945z" fill="#49C9A7"/>
+
+<path d="M55.977 20.352v1h-12.799s-6.312-1.26-6.129-6.707c0 0 .208 5.707 6.004 5.707h12.924z" fill="#37BB91"/>
--- a/backend/static/file-icons/standard/mp4-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/mp4-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M5.116.006c-2.801 0-5.072 2.272-5.072 5.074v53.841c0 2.803 2.271 5.074 5.072 5.074h45.775c2.801 0 5.074-2.271 5.074-5.074v-38.605l-18.903-20.31h-31.946z" fill="#9B64B2"/>
+
+<path d="M55.977 20.352v1h-12.799s-6.312-1.26-6.129-6.707c0 0 .208 5.707 6.004 5.707h12.924z" fill="#824B9E"/>
--- a/backend/static/file-icons/standard/pages-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/pages-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<path d="M5.111-.006c-2.801 0-5.072 2.272-5.072 5.074v53.841c0 2.803 2.271 5.074 5.072 5.074h45.775c2.801 0 5.074-2.271 5.074-5.074v-38.605l-18.903-20.31h-31.946z" fill-rule="evenodd" clip-rule="evenodd" fill="#6A6AE2"/>
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M55.976 20.352v1h-12.799s-6.312-1.26-6.129-6.707c0 0 .208 5.707 6.004 5.707h12.924z" fill="#4F4FDA"/>
--- a/backend/static/file-icons/standard/pdf-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/pdf-document-svgrepo-com.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+	 width="800px" height="800px" viewBox="0 0 56 64" enable-background="new 0 0 56 64" xml:space="preserve">
+<g>
+	<path fill="#8C181A" d="M5.1,0C2.3,0,0,2.3,0,5.1v53.8C0,61.7,2.3,64,5.1,64h45.8c2.8,0,5.1-2.3,5.1-5.1V20.3L37.1,0H5.1z"/>
+	<path fill="#6B0D12" d="M56,20.4v1H43.2c0,0-6.3-1.3-6.1-6.7c0,0,0.2,5.7,6,5.7H56z"/>
+	<path opacity="0.5" fill="#FFFFFF" enable-background="new    " d="M37.1,0v14.6c0,1.7,1.1,5.8,6.1,5.8H56L37.1,0z"/>
+</g>
+<path fill="#FFFFFF" d="M14.9,49h-3.3v4.1c0,0.4-0.3,0.7-0.8,0.7c-0.4,0-0.7-0.3-0.7-0.7V42.9c0-0.6,0.5-1.1,1.1-1.1h3.7
+	c2.4,0,3.8,1.7,3.8,3.6C18.7,47.4,17.3,49,14.9,49z M14.8,43.1h-3.2v4.6h3.2c1.4,0,2.4-0.9,2.4-2.3C17.2,44,16.2,43.1,14.8,43.1z
+	 M25.2,53.8h-3c-0.6,0-1.1-0.5-1.1-1.1v-9.8c0-0.6,0.5-1.1,1.1-1.1h3c3.7,0,6.2,2.6,6.2,6C31.4,51.2,29,53.8,25.2,53.8z M25.2,43.1
+	h-2.6v9.3h2.6c2.9,0,4.6-2.1,4.6-4.7C29.9,45.2,28.2,43.1,25.2,43.1z M41.5,43.1h-5.8V47h5.7c0.4,0,0.6,0.3,0.6,0.7
+	s-0.3,0.6-0.6,0.6h-5.7v4.8c0,0.4-0.3,0.7-0.8,0.7c-0.4,0-0.7-0.3-0.7-0.7V42.9c0-0.6,0.5-1.1,1.1-1.1h6.2c0.4,0,0.6,0.3,0.6,0.7
+	C42.2,42.8,41.9,43.1,41.5,43.1z"/>
--- a/backend/static/file-icons/standard/psd-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/psd-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<path d="M5.112.051c-2.802 0-5.073 2.273-5.073 5.075v53.841c0 2.802 2.271 5.073 5.073 5.073h45.775c2.801 0 5.074-2.271 5.074-5.073v-38.606l-18.903-20.31h-31.946z" fill-rule="evenodd" clip-rule="evenodd" fill="#0C77C6"/>
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M55.977 20.352v1h-12.799s-6.312-1.26-6.129-6.707c0 0 .208 5.707 6.004 5.707h12.924z" fill="#0959B7"/>
--- a/backend/static/file-icons/standard/rtf-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/rtf-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<path d="M5.113.006c-2.803 0-5.074 2.273-5.074 5.074v53.841c0 2.803 2.271 5.074 5.074 5.074h45.774c2.801 0 5.074-2.271 5.074-5.074v-38.605l-18.903-20.31h-31.945z" fill-rule="evenodd" clip-rule="evenodd" fill="#00A1EE"/>
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M55.977 20.352v1h-12.799s-6.312-1.26-6.129-6.707c0 0 .208 5.707 6.004 5.707h12.924z" fill="#0089E9"/>
--- a/backend/static/file-icons/standard/txt-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/txt-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<path d="M5.151-.036c-2.803 0-5.074 2.272-5.074 5.074v53.841c0 2.803 2.271 5.074 5.074 5.074h45.774c2.801 0 5.074-2.271 5.074-5.074v-38.605l-18.902-20.31h-31.946z" fill-rule="evenodd" clip-rule="evenodd" fill="#F9CA06"/>
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M56.008 20.316v1h-12.799s-6.312-1.26-6.129-6.708c0 0 .208 5.708 6.004 5.708h12.924z" fill="#F7BC04"/>
--- a/backend/static/file-icons/standard/video-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/video-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<path d="M5.15.011c-2.801 0-5.072 2.272-5.072 5.074v53.841c0 2.803 2.272 5.074 5.072 5.074h45.775c2.802 0 5.075-2.271 5.075-5.074v-38.606l-18.904-20.309h-31.946z" fill-rule="evenodd" clip-rule="evenodd" fill="#8E4C9E"/>
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M55.977 20.352v1h-12.799s-6.312-1.26-6.129-6.707c0 0 .208 5.707 6.004 5.707h12.924z" fill="#713985"/>
--- a/backend/static/file-icons/standard/visio-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/visio-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<path d="M5.111.006c-2.801 0-5.072 2.272-5.072 5.074v53.841c0 2.803 2.271 5.074 5.072 5.074h45.775c2.801 0 5.074-2.271 5.074-5.074v-38.606l-18.903-20.309h-31.946z" fill-rule="evenodd" clip-rule="evenodd" fill="#496AB3"/>
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M55.977 20.352v1h-12.799s-6.312-1.26-6.129-6.707c0 0 .208 5.707 6.004 5.707h12.924z" fill="#374FA0"/>
--- a/backend/static/file-icons/standard/word-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/word-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<g fill-rule="evenodd">
+
+<path d="m5.11 0a5.07 5.07 0 0 0 -5.11 5v53.88a5.07 5.07 0 0 0 5.11 5.12h45.78a5.07 5.07 0 0 0 5.11-5.12v-38.6l-18.94-20.28z" fill="#107cad"/>
+
+<path d="m56 20.35v1h-12.82s-6.31-1.26-6.13-6.71c0 0 .21 5.71 6 5.71z" fill="#084968"/>
--- a/backend/static/file-icons/standard/zip-document-svgrepo-com.svg
+++ b/backend/static/file-icons/standard/zip-document-svgrepo-com.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-4 0 64 64" xmlns="http://www.w3.org/2000/svg">
+
+<path d="M5.113-.026c-2.803 0-5.074 2.272-5.074 5.074v53.841c0 2.803 2.271 5.074 5.074 5.074h45.773c2.801 0 5.074-2.271 5.074-5.074v-38.605l-18.901-20.31h-31.946z" fill-rule="evenodd" clip-rule="evenodd" fill="#8199AF"/>
+
+<g fill-rule="evenodd" clip-rule="evenodd">
+
+<path d="M55.977 20.352v1h-12.799s-6.312-1.26-6.129-6.707c0 0 .208 5.707 6.004 5.707h12.924z" fill="#617F9B"/>
--- a/backend/static/js/10-file-browser.js
+++ b/backend/static/js/10-file-browser.js
@@ -1,33 +1,50 @@
 (function () {
  const fileBrowser = document.querySelector("[data-file-browser]");
  const viewButtons = document.querySelectorAll("[data-view-button]");
-  const previewImages = document.querySelector("[data-preview-images]");
  const previewActions = document.querySelectorAll("[data-preview-action]");
  const fileContextMenu = document.querySelector("[data-file-context-menu]");
+  const fileBrowserWindow = document.querySelector("[data-file-browser-window]");

  let ctrlCopyMode = false;
  let contextFile = null;
  const contextMenuCloseDistance = 80;
+  const viewStorageKey = "warpbox.fileBrowser.view";

  if (fileBrowser) {
+    applySavedFileBrowserPreferences();
+
    viewButtons.forEach((button) => {
      button.addEventListener("click", () => {
        const view = button.getAttribute("data-view-button");
-        fileBrowser.classList.toggle("is-list", view === "list");
-        fileBrowser.classList.toggle("is-thumbs", view === "thumbs");
-        viewButtons.forEach((item) => item.classList.toggle("is-active", item === button));
+        setFileBrowserView(view);
+        savePreference(viewStorageKey, view);
      });
    });
-
-    if (previewImages) {
-      previewImages.addEventListener("click", () => {
-        fileBrowser.classList.toggle("images-only");
-        previewImages.classList.toggle("is-active");
-      });
-    }
  }

  if (fileBrowser && fileContextMenu) {
+    document.body.appendChild(fileContextMenu);
+
+    fileBrowser.addEventListener("click", (event) => {
+      if (!fileBrowser.classList.contains("is-list")) {
+        return;
+      }
+      if (event.target.closest("a, button, input, select, textarea")) {
+        return;
+      }
+      const card = event.target.closest("[data-file-context]");
+      const link = card ? card.querySelector(".file-open") : null;
+      if (!link) {
+        return;
+      }
+      event.preventDefault();
+      if (link.target === "_blank") {
+        window.Warpbox.openInNewTab(link.href);
+        return;
+      }
+      window.location.href = link.href;
+    });
+
    fileBrowser.addEventListener("contextmenu", (event) => {
      const card = event.target.closest("[data-file-context]");
      if (!card) {
@@ -188,4 +205,40 @@
      y >= rect.top - contextMenuCloseDistance &&
      y <= rect.bottom + contextMenuCloseDistance;
  }
+
+  function applySavedFileBrowserPreferences() {
+    const savedView = readPreference(viewStorageKey);
+    setFileBrowserView(savedView === "list" ? "list" : "thumbs");
+  }
+
+  function setFileBrowserView(view) {
+    const normalized = view === "thumbs" ? "thumbs" : "list";
+    fileBrowser.classList.toggle("is-list", normalized === "list");
+    fileBrowser.classList.toggle("is-thumbs", normalized === "thumbs");
+    if (fileBrowserWindow) {
+      fileBrowserWindow.classList.toggle("is-list-view", normalized === "list");
+      fileBrowserWindow.classList.toggle("is-icon-view", normalized === "thumbs");
+    }
+    viewButtons.forEach((item) => {
+      const active = item.getAttribute("data-view-button") === normalized;
+      item.classList.toggle("is-active", active);
+      item.setAttribute("aria-pressed", active ? "true" : "false");
+    });
+  }
+
+  function readPreference(key) {
+    try {
+      return window.localStorage.getItem(key);
+    } catch (_) {
+      return "";
+    }
+  }
+
+  function savePreference(key, value) {
+    try {
+      window.localStorage.setItem(key, value);
+    } catch (_) {
+      // LocalStorage can be unavailable in private or locked-down browsers.
+    }
+  }
 })();
--- a/backend/static/js/12-reactions.js
+++ b/backend/static/js/12-reactions.js
@@ -3,6 +3,10 @@
  const panel = picker ? picker.querySelector(".reaction-picker-panel") : null;
  const search = picker ? picker.querySelector("[data-reaction-search]") : null;
  const closeButton = picker ? picker.querySelector("[data-reaction-close]") : null;
+  const existingSection = picker ? picker.querySelector("[data-reaction-existing]") : null;
+  const existingList = picker ? picker.querySelector("[data-reaction-existing-list]") : null;
+  const readonlyNote = picker ? picker.querySelector("[data-reaction-readonly]") : null;
+  const chooserElements = picker ? Array.from(picker.querySelectorAll(".reaction-picker-tabs, .reaction-search, .reaction-grid-wrap")) : [];
  const tabs = picker ? Array.from(picker.querySelectorAll("[data-reaction-tab]")) : [];
  const panels = picker ? Array.from(picker.querySelectorAll("[data-reaction-panel]")) : [];

@@ -17,6 +21,36 @@
    });
  });

+  document.addEventListener("click", (event) => {
+    const pill = event.target.closest("[data-reaction-pill]");
+    if (pill) {
+      event.preventDefault();
+      event.stopPropagation();
+      const card = pill.closest("[data-reaction-card]") || activeCard;
+      if (!card) {
+        return;
+      }
+      if (card.dataset.reacted === "true") {
+        openPickerForCard(card, pill);
+        return;
+      }
+      submitReactionForCard(card, pill.dataset.reactionEmojiId);
+      return;
+    }
+
+    const more = event.target.closest("[data-reaction-more]");
+    if (!more) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    const card = more.closest("[data-reaction-card]");
+    if (card) {
+      openPickerForCard(card, more);
+    }
+  });
+
  if (!picker || !panel) {
    return;
  }
@@ -35,10 +69,10 @@

  panel.addEventListener("click", async (event) => {
    const emoji = event.target.closest("[data-emoji-id]");
-    if (!emoji || !activeButton || !activeCard) {
+    if (!emoji || !activeCard || activeCard.dataset.reacted === "true") {
      return;
    }
-    await submitReaction(emoji);
+    await submitReactionForCard(activeCard, emoji.dataset.emojiId);
  });

  tabs.forEach((tab) => {
@@ -62,6 +96,9 @@
    if (panel.contains(event.target) || event.target.closest("[data-reaction-button]")) {
      return;
    }
+    if (event.target.closest("[data-reaction-more]") || event.target.closest("[data-reaction-pill]")) {
+      return;
+    }
    closePicker();
  });

@@ -78,15 +115,24 @@
  });

  function openPicker(button) {
-    activeButton = button;
-    activeCard = button.closest("[data-reaction-card]");
+    openPickerForCard(button.closest("[data-reaction-card]"), button);
+  }
+
+  function openPickerForCard(card, trigger) {
+    if (!card) {
+      return;
+    }
+    activeButton = trigger || card.querySelector("[data-reaction-button]");
+    activeCard = card;
+    populateExistingReactions(card);
+    setPickerReadonly(card.dataset.reacted === "true");
    picker.hidden = false;
    picker.classList.add("is-open");
    if (search) {
      search.value = "";
      filterEmoji("");
    }
-    positionPicker(button);
+    positionPicker(activeButton || card);
  }

  function closePicker() {
@@ -95,6 +141,7 @@
    document.documentElement.classList.remove("reaction-picker-open");
    picker.style.left = "";
    picker.style.top = "";
+    setPickerReadonly(false);
    activeButton = null;
    activeCard = null;
  }
@@ -146,12 +193,18 @@
    });
  }

-  async function submitReaction(emoji) {
+  async function submitReactionForCard(card, emojiID) {
+    if (!card || !emojiID || card.dataset.reacted === "true") {
+      return;
+    }
    const body = new URLSearchParams();
-    body.set("emoji_id", emoji.dataset.emojiId);
+    body.set("emoji_id", emojiID);

-    activeButton.disabled = true;
-    const response = await fetch(activeButton.dataset.reactUrl, {
+    const reactButton = card.querySelector("[data-reaction-button]");
+    if (reactButton) {
+      reactButton.disabled = true;
+    }
+    const response = await fetch(card.dataset.reactUrl, {
      method: "POST",
      headers: {
        "Accept": "application/json",
@@ -161,14 +214,19 @@
    });

    if (!response.ok) {
-      activeButton.disabled = false;
+      if (reactButton) {
+        reactButton.disabled = false;
+      }
      closePicker();
      return;
    }

    const payload = await response.json();
-    renderReactions(activeCard, payload.reactions || []);
-    activeButton.remove();
+    renderReactions(card, payload.reactions || []);
+    card.dataset.reacted = "true";
+    if (reactButton) {
+      reactButton.remove();
+    }
    closePicker();
  }

@@ -179,20 +237,68 @@
    }
    list.replaceChildren();
    reactions.forEach((reaction) => {
-      const pill = document.createElement("span");
-      pill.className = "reaction-pill";
-      pill.title = reaction.label || reaction.emojiId;
-
-      const image = document.createElement("img");
-      image.src = reaction.url;
-      image.alt = reaction.label || reaction.emojiId;
-      image.loading = "lazy";
-
-      const count = document.createElement("span");
-      count.textContent = reaction.count;
-
-      pill.append(image, count);
+      const pill = buildReactionPill(reaction);
+      if (!reaction.visible) {
+        pill.classList.add("is-hidden-summary");
+      }
      list.append(pill);
    });
+    const hiddenCount = reactions.length > 2 ? reactions.length - 2 : 0;
+    if (hiddenCount > 0) {
+      const more = document.createElement("button");
+      more.className = "reaction-more";
+      more.type = "button";
+      more.dataset.reactionMore = "";
+      more.textContent = `+${hiddenCount}`;
+      more.setAttribute("aria-label", `Show ${hiddenCount} more reactions`);
+      list.append(more);
+    }
+  }
+
+  function buildReactionPill(reaction) {
+    const pill = document.createElement("button");
+    pill.className = "reaction-pill";
+    pill.type = "button";
+    pill.title = reaction.label || reaction.emojiId;
+    pill.dataset.reactionPill = "";
+    pill.dataset.reactionEmojiId = reaction.emojiId;
+    pill.dataset.reactionLabel = reaction.label || reaction.emojiId;
+    pill.dataset.reactionUrl = reaction.url;
+    pill.dataset.reactionCount = reaction.count;
+    pill.setAttribute("aria-label", `React with ${reaction.label || reaction.emojiId}`);
+
+    const image = document.createElement("img");
+    image.src = reaction.url;
+    image.alt = reaction.label || reaction.emojiId;
+    image.loading = "lazy";
+
+    const count = document.createElement("span");
+    count.textContent = reaction.count;
+
+    pill.append(image, count);
+    return pill;
+  }
+
+  function populateExistingReactions(card) {
+    if (!existingSection || !existingList) {
+      return;
+    }
+    existingList.replaceChildren();
+    card.querySelectorAll("[data-reaction-pill]").forEach((pill) => {
+      const clone = pill.cloneNode(true);
+      clone.classList.remove("is-hidden-summary");
+      existingList.append(clone);
+    });
+    existingSection.hidden = existingList.children.length === 0;
+  }
+
+  function setPickerReadonly(readonly) {
+    picker.classList.toggle("is-readonly", readonly);
+    chooserElements.forEach((element) => {
+      element.hidden = readonly;
+    });
+    if (readonlyNote) {
+      readonlyNote.hidden = !readonly;
+    }
  }
 })();
--- a/backend/templates/pages/download.html
+++ b/backend/templates/pages/download.html
@@ -24,64 +24,96 @@
      {{end}}

      {{if .Data.Files}}
+        {{$single := eq (len .Data.Files) 1}}
        <div class="badge-row">
          <span class="badge badge-expiry">Expires {{.Data.ExpiresLabel}}</span>
          {{if .Data.MaxDownloads}}<span class="badge">{{.Data.DownloadCount}} / {{.Data.MaxDownloads}} downloads</span>{{end}}
        </div>

        {{if not .Data.Locked}}
-          <a class="button button-primary button-wide" href="{{.Data.ZipURL}}">
-            <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
-            Download zip
-          </a>
+          {{if $single}}
+            {{$first := index .Data.Files 0}}
+            <a class="button button-primary button-wide" href="{{$first.DownloadURL}}" download="{{$first.Name}}">
+              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
+              Download
+            </a>
+          {{else}}
+            <a class="button button-primary button-wide" href="{{.Data.ZipURL}}">
+              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
+              Download zip
+            </a>
+          {{end}}
        {{end}}

-        <div class="view-toolbar" aria-label="File view options">
-          <button class="button button-outline is-active" type="button" data-view-button="list">List</button>
-          <button class="button button-outline" type="button" data-view-button="thumbs">Thumbnails</button>
-          <button class="button button-outline" type="button" data-preview-images>Preview images only</button>
-        </div>
-
-        <div class="download-list file-browser is-list" data-file-browser>
-          {{range .Data.Files}}
-            <article class="download-item file-card" data-kind="{{.PreviewKind}}" data-file-context data-preview-url="{{.URL}}" data-view-url="{{.DownloadURL}}?inline=1" data-download-url="{{.DownloadURL}}" data-file-name="{{.Name}}" data-reaction-card>
-              <a class="thumb-link" href="{{.DownloadURL}}?inline=1" aria-label="View {{.Name}}">
-                <img src="{{.ThumbnailURL}}" alt="" loading="lazy">
-              </a>
-              <a class="file-main" href="{{.DownloadURL}}?inline=1">
-                <strong class="file-name" title="{{.Name}}">{{.Name}}</strong>
-                <small>{{.Size}} · {{.ContentType}}</small>
-              </a>
-              {{if not $.Data.Locked}}
-                <div class="file-actions">
-                  <a class="button button-outline preview-action" href="{{.DownloadURL}}?inline=1" target="_blank" rel="noopener noreferrer" data-preview-action data-view-label="View" data-copy-label="Copy link">
-                    <svg data-preview-view-icon viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z" /><circle cx="12" cy="12" r="3" /></svg>
-                    <svg data-preview-copy-icon viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true" hidden><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
-                    <span data-preview-label>View</span>
-                  </a>
-                  <a class="button button-outline" href="{{.DownloadURL}}" download="{{.Name}}">
-                    <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
-                    Download
-                  </a>
-                </div>
-                <div class="file-reaction-dock" data-reaction-dock>
-                  <div class="file-reactions" data-reaction-list>
-                    {{range .Reactions}}
-                      <span class="reaction-pill" title="{{.Label}}">
-                        <img src="{{.URL}}" alt="{{.Label}}" loading="lazy">
-                        <span>{{.Count}}</span>
-                      </span>
+        <div class="file-browser-window" data-file-browser-window>
+          <div class="file-browser-titlebar">
+            <div>
+              <strong>File Browser</strong>
+              <span>{{len .Data.Files}} item{{if ne (len .Data.Files) 1}}s{{end}}</span>
+            </div>
+            <div class="file-browser-window-actions" aria-hidden="true">
+              <span></span><span></span><span></span>
+            </div>
+          </div>
+          <div class="file-browser-toolbar" aria-label="File view options">
+            <div class="view-toolbar">
+              <button class="button button-outline icon-button" type="button" data-view-button="list" aria-pressed="false" aria-label="List view" title="List view">
+                <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" /></svg>
+                <span class="sr-only">List view</span>
+              </button>
+              <button class="button button-outline icon-button is-active" type="button" data-view-button="thumbs" aria-pressed="true" aria-label="Icon view" title="Icon view">
+                <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
+                <span class="sr-only">Icon view</span>
+              </button>
+            </div>
+          </div>
+          <div class="file-browser-head" aria-hidden="true">
+            <span>Name</span>
+            <span>Type</span>
+            <span>Size</span>
+          </div>
+          <div class="download-list file-browser is-thumbs" data-file-browser>
+            {{range .Data.Files}}
+              <article class="download-item file-card" data-kind="{{.PreviewKind}}" data-file-context data-preview-url="{{.URL}}" data-view-url="{{.DownloadURL}}?inline=1" data-download-url="{{.DownloadURL}}" data-file-name="{{.Name}}" data-reaction-card data-react-url="{{.ReactURL}}" data-reacted="{{if .Reacted}}true{{else}}false{{end}}">
+                <a class="file-open" href="{{.DownloadURL}}?inline=1"{{if not $single}} target="_blank" rel="noopener noreferrer"{{end}} aria-label="Open {{.Name}}">
+                  <span class="file-media">
+                    {{if .HasThumbnail}}
+                      <img class="file-thumb" src="{{.ThumbnailURL}}" alt="" loading="lazy">
+                    {{else}}
+                      {{if .IconURL}}<img class="file-icon file-icon-standard" src="{{.IconURL}}" alt="" loading="lazy">{{end}}
+                      {{if .IconRetroURL}}<img class="file-icon file-icon-retro" src="{{.IconRetroURL}}" alt="" loading="lazy">{{end}}
+                    {{end}}
+                  </span>
+                  <span class="file-main">
+                    <strong class="file-name" title="{{.Name}}">{{.Name}}</strong>
+                    <small>{{.Size}} · {{.ContentType}}</small>
+                  </span>
+                  <span class="file-type">{{.ContentType}}</span>
+                  <span class="file-size">{{.Size}}</span>
+                </a>
+                {{if not $.Data.Locked}}
+                  <div class="file-reaction-dock" data-reaction-dock>
+                    <div class="file-reactions" data-reaction-list>
+                      {{range .Reactions}}
+                        <button class="reaction-pill {{if not .Visible}}is-hidden-summary{{end}}" type="button" title="{{.Label}}" data-reaction-pill data-reaction-emoji-id="{{.EmojiID}}" data-reaction-label="{{.Label}}" data-reaction-url="{{.URL}}" data-reaction-count="{{.Count}}" aria-label="{{if $.Data.Locked}}Reaction{{else}}React with {{.Label}}{{end}}">
+                          <img src="{{.URL}}" alt="{{.Label}}" loading="lazy">
+                          <span>{{.Count}}</span>
+                        </button>
+                      {{end}}
+                      {{if .ReactionMore}}
+                        <button class="reaction-more" type="button" data-reaction-more aria-label="Show all reactions">+{{.ReactionMore}}</button>
+                      {{end}}
+                    </div>
+                    {{if not .Reacted}}
+                      <button class="reaction-button" type="button" data-reaction-button data-react-url="{{.ReactURL}}" aria-label="React to {{.Name}}" title="React">
+                        <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 21a9 9 0 1 0-9-9 9 9 0 0 0 9 9Z" /><path d="M8 14s1.4 2 4 2 4-2 4-2" /><path d="M9 9h.01M15 9h.01" /></svg>
+                      </button>
                    {{end}}
                  </div>
-                  {{if not .Reacted}}
-                    <button class="reaction-button" type="button" data-reaction-button data-react-url="{{.ReactURL}}" aria-label="React to {{.Name}}" title="React">
-                      <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 21a9 9 0 1 0-9-9 9 9 0 0 0 9 9Z" /><path d="M8 14s1.4 2 4 2 4-2 4-2" /><path d="M9 9h.01M15 9h.01" /></svg>
-                    </button>
-                  {{end}}
-                </div>
-              {{end}}
-            </article>
-          {{end}}
+                {{end}}
+              </article>
+            {{end}}
+          </div>
        </div>
        {{if not .Data.Locked}}
          <div class="reaction-picker" data-reaction-picker hidden>
@@ -90,6 +122,11 @@
                <strong>React</strong>
                <button class="button button-ghost reaction-picker-close" type="button" data-reaction-close aria-label="Close reaction picker">Close</button>
              </div>
+              <div class="reaction-existing" data-reaction-existing hidden>
+                <small>Existing reactions</small>
+                <div class="reaction-existing-list" data-reaction-existing-list></div>
+              </div>
+              <p class="reaction-readonly-note" data-reaction-readonly hidden>You already reacted to this file.</p>
              <div class="reaction-picker-tabs" role="tablist" aria-label="Emoji themes">
                {{range $index, $tab := .Data.EmojiTabs}}
                  <button type="button" class="reaction-tab {{if eq $index 0}}is-active{{end}}" data-reaction-tab="{{$tab.ID}}" role="tab" aria-selected="{{if eq $index 0}}true{{else}}false{{end}}">{{$tab.Label}}</button>