feat: add ProjectFileManager component with file browser UI

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 10:20:49 +01:00
parent b87081dd2c
commit 3c1a35ae9c
2 changed files with 846 additions and 0 deletions
--- a/src/admin/admin.css
+++ b/src/admin/admin.css
@@ -2858,3 +2858,173 @@ img {
  background-color: var(--accent-color) !important;
 }

+/* ── File Manager ── */
+
+.fm-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.fm-full-path {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-tertiary);
+  user-select: all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.fm-toolbar-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.fm-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+  font-size: 12px;
+  min-height: 28px;
+}
+
+.fm-breadcrumb-segment {
+  display: inline-flex;
+  align-items: center;
+}
+
+.fm-breadcrumb-sep {
+  color: var(--text-tertiary);
+  margin: 0 4px;
+  user-select: none;
+}
+
+.fm-breadcrumb-btn {
+  background: none;
+  border: none;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  transition: all 0.15s ease;
+}
+
+.fm-breadcrumb-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.fm-breadcrumb-btn.active {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.fm-new-folder {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.fm-new-folder .admin-form-input {
+  max-width: 250px;
+}
+
+.fm-content {
+  position: relative;
+  border-radius: var(--border-radius-sm);
+  transition: border-color 0.2s ease;
+}
+
+.fm-content.fm-drag-over {
+  border: 2px dashed var(--accent-color);
+  background: var(--accent-light);
+}
+
+.fm-dropzone-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background: color-mix(in srgb, var(--bg-primary) 90%, transparent);
+  border-radius: var(--border-radius-sm);
+  z-index: 5;
+  color: var(--accent-color);
+  font-size: 13px;
+  font-weight: 500;
+  pointer-events: none;
+}
+
+.fm-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 2.5rem 1rem;
+  color: var(--text-tertiary);
+  font-size: 13px;
+}
+
+.fm-folder-link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--accent-color);
+  font-weight: 500;
+  font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.fm-folder-link:hover {
+  text-decoration: underline;
+}
+
+.fm-item-count {
+  font-size: 10px;
+  color: var(--text-tertiary);
+  font-weight: 400;
+}
+
+.fm-file-name {
+  color: var(--text-primary);
+}
+
+.fm-meta {
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.fm-actions {
+  display: inline-flex;
+  gap: 2px;
+  justify-content: flex-end;
+}
+
+.fm-name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.fm-symlink-badge {
+  display: inline-flex;
+  align-items: center;
+  color: var(--text-tertiary);
+  cursor: help;
+}
+