Feat: FileManager (#98) (#703)

* feat: add file manager module - Complete file manager implementation with UI/UX - Add drive management functionality - Add file upload/download with progress tracking - Add stamp integration and handling - Add bulk operations and context menus Co-authored-by: Roland Seres <roland.seres90@gmail.com> Co-authored-by: nidishk <nidishkrishnan45@gmail.com>
2025-11-12 11:26:00 +01:00
parent 1249c0df71
commit 5bfe2a0331
107 changed files with 21529 additions and 5578 deletions
@@ -0,0 +1,143 @@
+$bg-900: #212121;
+$bg-800: #262626;
+$bg-700: #3e3e3e;
+$border-400: #9da3ae;
+$text-100: #e5e7eb;
+$text-300: #c7ccd4;
+$accent: #ed8131;
+
+.fm-header-container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  height: 60px;
+  padding: 10px 16px;
+  background: $bg-900;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+}
+
+.fm-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.fm-header-logo {
+  width: 40px; height: 40px;
+  border-radius: 6px;
+  background: $accent;
+  color: $text-100;
+  display: grid; place-items: center;
+  font-weight: 700;
+  svg { width: 18px; height: 18px; }
+}
+.fm-header-title {
+  color: $text-100;
+  font-weight: 600;
+  letter-spacing: .2px;
+}
+
+.fm-header-search {
+  flex: 1 1 auto;
+  max-width: 900px;
+  display: flex; align-items: center; gap: 8px;
+  background: $bg-700;
+  border: 1px solid $border-400;
+  color: $text-300;
+  height: 36px; padding: 0 10px;
+  border-radius: 8px;
+
+  &:focus-within {
+    border-color: $accent;
+    box-shadow: 0 0 0 2px rgba(237,129,49,0.25);
+  }
+
+  .fm-header-search-icon { flex: 0 0 auto; }
+
+  input {
+    flex: 1 1 auto;
+    background: transparent; border: none; outline: none;
+    height: 100%;
+    color: $text-100; font-size: 14px;
+
+    &::placeholder { color: $text-300; }
+  }
+
+  .fm-header-search-clear {
+    appearance: none; border: none; background: transparent;
+    color: $text-300; font-size: 18px; line-height: 1;
+    padding: 0 2px; cursor: pointer;
+    &:hover { color: $text-100; }
+  }
+}
+
+.fm-header-actions {
+  margin-left: auto;
+  position: relative;
+}
+
+.fm-filter-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid $border-400;
+  background: $bg-800;
+  color: $text-100;
+  font-size: 13px;
+  cursor: pointer;
+
+  &:hover { background: mix($bg-800, #fff, 92%); }
+  &:focus-visible { outline: 2px solid rgba(237,129,49,0.4); outline-offset: 2px; }
+
+  &[aria-expanded="true"] {
+    border-color: $accent;
+    box-shadow: 0 0 0 2px rgba(237,129,49,0.25);
+  }
+}
+
+.fm-filter-menu {
+  position: absolute;
+  right: 0; top: calc(100% + 6px);
+  min-width: 260px;
+  background: $bg-800;
+  border: 1px solid $border-400;
+  border-radius: 10px;
+  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
+  padding: 10px;
+  z-index: 2000;
+  color: $text-100;
+}
+
+.fm-filter-group + .fm-filter-group { margin-top: 10px; }
+
+.fm-filter-group-title {
+  font-size: 12px;
+  color: $text-300;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+}
+
+.fm-filter-row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 4px; border-radius: 6px;
+  cursor: default;
+  color: $text-100;
+
+  input[type="checkbox"], input[type="radio"] {
+    width: 14px; height: 14px; margin: 0;
+    accent-color: $accent;
+  }
+
+  &:hover { background: rgba(255,255,255,0.05); }
+}
+
+.fm-filter-sep {
+  height: 1px;
+  background: rgba(255,255,255,0.08);
+  margin: 8px 0;
+}
+
+.fm-header-filters { display: none; }
+.fm-header-filters-label { display: none; }
+.fm-header-chip-group { display: none; }
+.fm-chip { display: none; }
@@ -0,0 +1,200 @@
+import { ReactElement, useMemo, useState, useEffect, useRef, useContext } from 'react'
+import SearchIcon from 'remixicon-react/SearchLineIcon'
+import FileIcon from 'remixicon-react/File2LineIcon'
+import FilterIcon from 'remixicon-react/FilterLineIcon'
+import './Header.scss'
+import { useSearch } from '../../../../pages/filemanager/SearchContext'
+import { Context as FMContext } from '../../../../providers/FileManager'
+
+// Defaults used to determine “active filters”
+const DEFAULT_FILTERS = {
+  scope: 'selected' as 'selected' | 'all',
+  includeActive: true,
+  includeTrashed: false,
+}
+
+export function Header(): ReactElement {
+  const {
+    query,
+    setQuery,
+    clear,
+    scope,
+    setScope,
+    includeActive,
+    setIncludeActive,
+    includeTrashed,
+    setIncludeTrashed,
+  } = useSearch()
+
+  const { currentDrive } = useContext(FMContext)
+
+  const currentDriveName = useMemo(() => {
+    return currentDrive?.name || ''
+  }, [currentDrive])
+
+  const [openFilters, setOpenFilters] = useState(false)
+  const menuRef = useRef<HTMLDivElement | null>(null)
+  const btnRef = useRef<HTMLButtonElement | null>(null)
+
+  const filtersActive = useMemo(() => {
+    return (
+      scope !== DEFAULT_FILTERS.scope ||
+      includeActive !== DEFAULT_FILTERS.includeActive ||
+      includeTrashed !== DEFAULT_FILTERS.includeTrashed
+    )
+  }, [scope, includeActive, includeTrashed])
+
+  const resetFilters = () => {
+    setScope(DEFAULT_FILTERS.scope)
+    setIncludeActive(DEFAULT_FILTERS.includeActive)
+    setIncludeTrashed(DEFAULT_FILTERS.includeTrashed)
+  }
+
+  useEffect(() => {
+    if (!openFilters) return
+    const onDocClick = (e: MouseEvent) => {
+      const t = e.target as Node
+
+      if (menuRef.current?.contains(t) || btnRef.current?.contains(t)) return
+      setOpenFilters(false)
+    }
+    const onEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpenFilters(false)
+    }
+    document.addEventListener('mousedown', onDocClick)
+    document.addEventListener('keydown', onEsc)
+
+    return () => {
+      document.removeEventListener('mousedown', onDocClick)
+      document.removeEventListener('keydown', onEsc)
+    }
+  }, [openFilters])
+
+  return (
+    <div className="fm-header-container">
+      <div className="fm-header-left">
+        <div className="fm-header-logo" aria-hidden>
+          <FileIcon />
+        </div>
+        <div className="fm-header-title">File Manager</div>
+      </div>
+
+      <div className="fm-header-search">
+        <SearchIcon className="fm-header-search-icon" size="16px" aria-hidden />
+        <input
+          type="text"
+          placeholder="Search files by name or type…"
+          value={query}
+          onChange={e => setQuery(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Escape') clear()
+          }}
+          aria-label="Search files"
+        />
+        {query && (
+          <button
+            type="button"
+            className="fm-header-search-clear"
+            aria-label="Clear search"
+            onClick={clear}
+            title="Clear"
+          >
+            ×
+          </button>
+        )}
+      </div>
+
+      <div className="fm-header-actions">
+        <button
+          ref={btnRef}
+          type="button"
+          className="fm-filter-btn"
+          aria-haspopup="menu"
+          aria-expanded={openFilters}
+          onClick={() => setOpenFilters(v => !v)}
+          title={filtersActive ? 'Filters (active)' : 'Filters'}
+          style={{ color: filtersActive ? 'orange' : undefined }}
+        >
+          <FilterIcon size="16px" />
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+            Filters
+            {filtersActive && (
+              <span
+                aria-label="Filters active"
+                title="Filters active"
+                // tiny inline badge, no external CSS
+                style={{
+                  fontWeight: 700,
+                  fontSize: 11,
+                  lineHeight: 1,
+                  padding: '0 4px',
+                  borderRadius: 8,
+                  border: '1px solid orange',
+                  color: 'orange',
+                  marginLeft: 2,
+                }}
+              >
+                !
+              </span>
+            )}
+          </span>
+        </button>
+
+        {openFilters && (
+          <div className="fm-filter-menu" role="menu" ref={menuRef}>
+            <div className="fm-filter-group" role="radiogroup" aria-label="Search scope">
+              <div className="fm-filter-group-title">Scope</div>
+              <label className="fm-filter-row">
+                <input
+                  type="radio"
+                  name="fm-scope"
+                  checked={scope === 'selected'}
+                  onChange={() => setScope('selected')}
+                />
+                <span title={currentDriveName ? `Search in ${currentDriveName}` : 'Search in selected drive'}>
+                  Selected{currentDriveName ? ` — ${currentDriveName}` : ''}
+                </span>
+              </label>
+              <label className="fm-filter-row">
+                <input type="radio" name="fm-scope" checked={scope === 'all'} onChange={() => setScope('all')} />
+                <span>All drives</span>
+              </label>
+            </div>
+
+            <div className="fm-filter-sep" />
+
+            <div className="fm-filter-group" aria-label="Status">
+              <div className="fm-filter-group-title">Status</div>
+              <label className="fm-filter-row">
+                <input type="checkbox" checked={includeActive} onChange={e => setIncludeActive(e.target.checked)} />
+                <span>Active</span>
+              </label>
+              <label className="fm-filter-row">
+                <input type="checkbox" checked={includeTrashed} onChange={e => setIncludeTrashed(e.target.checked)} />
+                <span>Trash</span>
+              </label>
+            </div>
+
+            <div className="fm-filter-sep" />
+
+            <div className="fm-filter-group" role="group" aria-label="Reset">
+              <button
+                type="button"
+                onClick={resetFilters}
+                title="Reset filters to default"
+                style={{
+                  padding: '6px 10px',
+                  borderRadius: 6,
+                  border: '1px solid #ccc',
+                  cursor: 'pointer',
+                }}
+              >
+                Reset to default
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}