dtoro/mule-image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(layout): move Date filter inputs to topbar, Active Heap to right sidebar

Browse Source 
- FilterBar: new Date pill hosts from/to inputs; calendar stays in left
  sidebar (always visible, no collapse) with reduced padding and a
  taller MONTH_HEIGHT so 6-week months render fully.
- LeftSidebar: drop Library collapse; Heaps regains its chevron toggle
  to match Views/Folders.
- RightSidebar: render ActiveHeapCard above the Metadata header (with
  its own eyebrow); preview overlay reuses RightSidebar so the active
  heap stays visible there too.
- Toaster: top-right, more compact (smaller padding, font, gap).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
authentik Default Admin
2026-04-15 21:21:57 +02:00
parent c5582ffc65
commit e6ca78881f
8 changed files with 107 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
frontend/src/components/filter/DateRangePicker.tsx
View File

@@ -1,21 +1,16 @@
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Filter, X } from 'lucide-react'
import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
import { DayPicker } from 'react-day-picker'
import { useVirtualizer } from '@tanstack/react-virtual'
import { cn } from '@/lib/utils'
import { usePhotosQuery } from '../../hooks/usePhotosQuery'
import { usePhotoStore } from '../../store/photoStore'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/components/ui/popover'
import { buttonVariants } from '@/components/ui/button'
// Fixed month height so snap points are uniform regardless of whether
// a given month lays out as 5 or 6 weeks. Sized to fit the tallest
// (6-week) case: caption ~18px + weekday head ~14px + 6 rows × 24px +
// padding ~12px.
// (6-week) case: caption ~20px + weekday head ~14px + 6 rows × 24px
// + 5 × 2px row gap = 154px. Plus a few px slack so the last row
// never gets clipped on months that span 6 weeks (e.g. Nov 2025).
const MONTH_HEIGHT = 200
/**
@@ -214,9 +209,9 @@ export function DateRangePicker({
const next = photosByDate[lo]
const best =
!prev ? next
: !next ? prev
: target - prev.t <= next.t - target ? prev
: next
: !next ? prev
: target - prev.t <= next.t - target ? prev
: next
if (best) jumpToPhoto(best.id)
},
[photosByDate, jumpToPhoto]
@@ -224,14 +219,8 @@ export function DateRangePicker({
return (
<div className="space-y-1.5">
<div className="flex items-center justify-end gap-1">
<DateFilterPopover
from={from}
to={to}
onFromChange={onFromChange}
onToChange={onToChange}
/>
{hasSelection && (
{hasSelection && (
<div className="flex items-center justify-end">
<button
onClick={() => {
onFromChange(null)
@@ -241,8 +230,8 @@ export function DateRangePicker({
>
Clear
</button>
)}
</div>
</div>
)}
{/* Single-month viewport — container height matches exactly one
* month so the previous / next months stay off-screen. Uses
* scroll-snap so a wheel tick or drag settles on a whole month
@@ -256,7 +245,7 @@ export function DateRangePicker({
* sets scrollTop even when overflow is hidden. */}
<div
ref={scrollRef}
className="overflow-hidden rounded border border-border bg-bg"
className="overflow-hidden"
style={{ height: MONTH_HEIGHT }}
>
<div
@@ -272,7 +261,7 @@ export function DateRangePicker({
return (
<div
key={k}
className="flex items-start justify-center px-1 py-1"
className="flex items-start justify-center"
style={{
position: 'absolute',
top: 0,
@@ -341,7 +330,7 @@ const MonthGrid = memo(function MonthGrid({
month={monthDate}
disableNavigation
showOutsideDays={false}
className="p-1"
className="p-0"
classNames={{
months: 'flex flex-col',
month: 'flex flex-col gap-1',
@@ -392,82 +381,6 @@ const MonthGrid = memo(function MonthGrid({
)
})
/** Compact popover with two native date inputs for setting a range
* explicitly. Lives behind the "Filter" button next to the calendar. */
function DateFilterPopover({
from,
to,
onFromChange,
onToChange,
}: {
from: string | null
to: string | null
onFromChange: (v: string | null) => void
onToChange: (v: string | null) => void
}) {
const [open, setOpen] = useState(false)
const active = !!(from || to)
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger
className={cn(
'flex items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] uppercase tracking-wider',
active
? 'border-primary/60 bg-primary/10 text-primary'
: 'border-border text-text-muted hover:bg-surface-2 hover:text-text',
)}
>
<Filter className="h-3 w-3" />
Filter
</PopoverTrigger>
<PopoverContent className="w-56 space-y-2 p-3" side="bottom" align="end">
<div className="flex items-center justify-between">
<h3 className="text-[11px] font-semibold uppercase tracking-wide text-text">
Date range
</h3>
{active && (
<button
onClick={() => {
onFromChange(null)
onToChange(null)
}}
className="flex items-center gap-0.5 rounded px-1 py-0.5 text-[10px] text-text-muted hover:bg-surface-2 hover:text-text"
title="Clear range"
>
<X className="h-3 w-3" />
Clear
</button>
)}
</div>
<label className="block space-y-0.5">
<span className="text-[10px] uppercase tracking-wider text-text-muted">
From
</span>
<input
type="date"
value={from ?? ''}
onChange={(e) => onFromChange(e.target.value || null)}
max={to ?? undefined}
className="w-full rounded border border-border bg-bg px-2 py-1 text-xs text-text"
/>
</label>
<label className="block space-y-0.5">
<span className="text-[10px] uppercase tracking-wider text-text-muted">
To
</span>
<input
type="date"
value={to ?? ''}
onChange={(e) => onToChange(e.target.value || null)}
min={from ?? undefined}
className="w-full rounded border border-border bg-bg px-2 py-1 text-xs text-text"
/>
</label>
</PopoverContent>
</Popover>
)
}
function isInRange(d: Date, from?: Date, to?: Date): boolean {
if (!from && !to) return false
const t = d.getTime()

48
frontend/src/components/filter/FilterBar.tsx
View File

@@ -77,6 +77,10 @@ export function FilterBar({
const tagIds = useFilterStore((s) => s.tagIds)
const needsReview = useFilterStore((s) => s.needsReview)
const setNeedsReview = useFilterStore((s) => s.setNeedsReview)
const dateFrom = useFilterStore((s) => s.dateFrom)
const dateTo = useFilterStore((s) => s.dateTo)
const setDateFrom = useFilterStore((s) => s.setDateFrom)
const setDateTo = useFilterStore((s) => s.setDateTo)
const currentSection = useFilterStore((s) => s.currentSection)
// Only the Flag pill is hidden inside the Discarded section. Flag has
@@ -173,8 +177,48 @@ export function FilterBar({
{/* Pills — left side, scroll horizontally if they overflow. */}
<div className="flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto">
{/* Date filter is rendered inline at the top of the right
* sidebar (always visible) — no pill needed here. */}
{/* Date */}
<FilterPill
label="Date"
value={
dateFrom || dateTo
? dateFrom && dateTo && dateFrom === dateTo
? dateFrom
: `${dateFrom ?? '…'} → ${dateTo ?? '…'}`
: null
}
isActive={dateFrom !== null || dateTo !== null}
onClear={() => {
setDateFrom(null)
setDateTo(null)
}}
contentClassName="w-56 space-y-2 p-3"
>
<label className="block space-y-0.5">
<span className="text-[10px] uppercase tracking-wider text-text-muted">
From
</span>
<input
type="date"
value={dateFrom ?? ''}
onChange={(e) => setDateFrom(e.target.value || null)}
max={dateTo ?? undefined}
className="w-full rounded border border-border bg-bg px-2 py-1 text-xs text-text"
/>
</label>
<label className="block space-y-0.5">
<span className="text-[10px] uppercase tracking-wider text-text-muted">
To
</span>
<input
type="date"
value={dateTo ?? ''}
onChange={(e) => setDateTo(e.target.value || null)}
min={dateFrom ?? undefined}
className="w-full rounded border border-border bg-bg px-2 py-1 text-xs text-text"
/>
</label>
</FilterPill>
{/* Type */}
<FilterPill

5
frontend/src/components/heaps/ActiveHeapCard.tsx
View File

@@ -56,6 +56,10 @@ export function ActiveHeapCard() {
}))
return (
<>
<div className="flex h-9 flex-shrink-0 items-center border-b border-border px-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-text-muted">
Active Heap
</div>
<div className="m-1.5 rounded-md border border-border bg-surface-2 shadow-sm">
{/* Header — clickable, navigates to the heap section. */}
<button
@@ -135,6 +139,7 @@ export function ActiveHeapCard() {
)}
</div>
</div>
</>
)
}

28
frontend/src/components/heaps/HeapsPanel.tsx
View File

@@ -44,27 +44,13 @@ import {
* - filter heapId: which heap is currently filtered to (visual)
* - heap.is_active: which heap T adds to (server-side, single per row)
*/
interface HeapsPanelProps {
/** Controlled expand state. When both props are supplied the panel
* defers to the parent for collapse/expand, so the sidebar's pane
* sizing layer can flex the Heaps pane only when it is open. */
expanded?: boolean
onExpandedChange?: (expanded: boolean) => void
}
export function HeapsPanel({ expanded: expandedProp, onExpandedChange }: HeapsPanelProps = {}) {
export function HeapsPanel() {
const { data: heaps = [] } = useHeapsQuery()
const navigateToSection = useFilterStore((s) => s.navigateToSection)
const currentSection = useFilterStore((s) => s.currentSection)
const queryClient = useQueryClient()
const [expandedInternal, setExpandedInternal] = useState(true)
const expanded = expandedProp ?? expandedInternal
const setExpanded = (next: boolean | ((prev: boolean) => boolean)) => {
const resolved = typeof next === 'function' ? (next as (p: boolean) => boolean)(expanded) : next
if (onExpandedChange) onExpandedChange(resolved)
else setExpandedInternal(resolved)
}
const [expanded, setExpanded] = useState(true)
const [creating, setCreating] = useState(false)
const [newName, setNewName] = useState('')
// Which heap row is currently being hovered with a drag — used to render
@@ -188,9 +174,9 @@ export function HeapsPanel({ expanded: expandedProp, onExpandedChange }: HeapsPa
return (
<div>
{/* Section header — mirrors the Folders section eyebrow in
* LeftSidebar so Heaps sits alongside it at the same visual
* tier, with heap rows indented the same as folder rows. */}
{/* Section header — mirrors the Views/Folders section eyebrows
* in LeftSidebar so Heaps sits alongside them at the same
* visual tier, including the click-to-collapse chevron. */}
<div
className="group mt-2 flex cursor-pointer items-center gap-1 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-text-muted hover:text-text"
onClick={() => setExpanded((v) => !v)}
@@ -226,7 +212,7 @@ export function HeapsPanel({ expanded: expandedProp, onExpandedChange }: HeapsPa
</div>
{expanded && (
<div>
<div>
{/* Inline create form */}
{creating && (
<div
@@ -490,7 +476,7 @@ export function HeapsPanel({ expanded: expandedProp, onExpandedChange }: HeapsPa
</div>
)
})}
</div>
</div>
)}
{/* Shared with me */}

118
frontend/src/components/layout/LeftSidebar.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useState } from 'react'
import { useState } from 'react'
import {
ChevronRight,
ChevronDown,
@@ -33,7 +33,6 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from '../ToastContainer'
import { useFilterStore } from '../../store/filterStore'
import { HeapsPanel } from '../heaps/HeapsPanel'
import { ActiveHeapCard } from '../heaps/ActiveHeapCard'
import { PHOTO_DRAG_MIME } from '../timeline/PhotoThumbnail'
import { useFolderTreeQuery } from '../../hooks/useFolderTreeQuery'
import { useTagsQuery } from '../../hooks/useTagsQuery'
@@ -84,7 +83,6 @@ export function LeftSidebar() {
const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set(['library', 'folders', 'heaps']))
// Library pane collapse. Its body holds Views, Folders, Shared, and
// Heaps, so a single toggle hides the whole navigation area.
const [libraryPaneOpen, setLibraryPaneOpen] = useState(true)
// Inline rename state for source-root rows. Stores the id being edited
// and the draft name. Double-click a folder row to start.
const [renamingId, setRenamingId] = useState<string | null>(null)
@@ -838,40 +836,18 @@ export function LeftSidebar() {
return (
<div className="flex h-full flex-col bg-surface">
{/* Active heap card — pinned at the very top so it stays visible
* even when the date filter is expanded into a tall calendar.
* Returns null when no heap is active, so the layout collapses
* cleanly. */}
<ActiveHeapCard />
{/* Date range filter — always visible, collapsible. Drives the
* global dateFrom/dateTo on the filter store, so it applies to
* every section regardless of which tree item is selected. */}
{/* Date range calendar — always visible, collapsible. The
* from/to range inputs live on the top filter bar; this block
* just hosts the calendar visualisation and click-to-jump. */}
<DateFilterSection />
{/* Resizable two-pane region: Library (Views + Folders + Shared)
* on top, Heaps on the bottom. Each pane collapses to its
* header; when both are expanded a drag divider splits the
* vertical space between them (persisted to localStorage). */}
{/* Library pane — the sole navigation section. Contains Views,
* Folders, Shared-with-me, and Heaps in a single scroll area;
* collapses to its header when hidden. */}
<div
className="flex min-h-0 flex-col"
style={{ flex: libraryPaneOpen ? '1 1 0' : '0 0 auto' }}
>
<div
className="group flex h-9 flex-shrink-0 cursor-pointer items-center gap-2 border-b border-border px-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-text-muted hover:text-text"
onClick={() => setLibraryPaneOpen((v) => !v)}
aria-expanded={libraryPaneOpen}
role="button"
>
{/* Library — the sole navigation section. Contains Views,
* Folders, Shared-with-me, and Heaps in a single scroll area. */}
<div className="flex min-h-0 flex-1 flex-col">
<div className="group flex h-9 flex-shrink-0 items-center gap-2 border-b border-border px-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-text-muted">
<span className="flex-1 truncate">Library</span>
<button
onClick={(e) => {
e.stopPropagation()
setUploadTarget({ open: true, folderId: null })
}}
onClick={() => setUploadTarget({ open: true, folderId: null })}
className="rounded p-0.5 text-text-muted hover:bg-surface-2 hover:text-text"
title="Upload photos"
aria-label="Upload photos"
@@ -879,8 +855,7 @@ export function LeftSidebar() {
<UploadIcon className="h-3.5 w-3.5" />
</button>
</div>
{libraryPaneOpen && (
<div className="min-h-0 flex-1 overflow-y-auto pb-2">
<div className="min-h-0 flex-1 overflow-y-auto pb-2">
{libraryTree.map((item) => renderTreeItem(item))}
{/* Shared with me — folders shared by other users */}
@@ -929,11 +904,9 @@ export function LeftSidebar() {
</div>
)}
{/* Heaps — nested inside the Library section; HeapsPanel owns
* its own eyebrow header + collapse state. */}
{/* Heaps — nested inside the Library section. */}
<HeapsPanel />
</div>
)}
</div>
</div>
{/* Bottom panel — user identity + settings, pinned below the tree. */}
@@ -999,69 +972,22 @@ export function LeftSidebar() {
)
}
/** Collapsible date-range filter block. Lives at the top of the left
* sidebar and drives the global dateFrom/dateTo filter-store fields,
* so it applies across every section. The calendar component itself
* supports range selection and decorates days that have photos.
* Open state persists across sessions via localStorage. */
const DATE_FILTER_OPEN_KEY = 'mulita:dateFilterOpen'
/** Always-visible calendar block at the top of the left sidebar.
* Drives the same global dateFrom/dateTo filter-store fields as the
* topbar Date pill, and visualises photo density per day. */
function DateFilterSection() {
const dateFrom = useFilterStore((s) => s.dateFrom)
const dateTo = useFilterStore((s) => s.dateTo)
const setDateFrom = useFilterStore((s) => s.setDateFrom)
const setDateTo = useFilterStore((s) => s.setDateTo)
const active = dateFrom !== null || dateTo !== null
// Default open; remembered across sessions. localStorage is read
// lazily inside the initialiser so SSR / disabled-storage fall back
// cleanly to the default.
const [open, setOpen] = useState<boolean>(() => {
try {
const v = localStorage.getItem(DATE_FILTER_OPEN_KEY)
if (v === null) return true
return v === '1'
} catch {
return true
}
})
useEffect(() => {
try {
localStorage.setItem(DATE_FILTER_OPEN_KEY, open ? '1' : '0')
} catch {
// Ignore — quota / disabled storage is non-fatal.
}
}, [open])
const summary = active
? dateFrom && dateTo && dateFrom === dateTo
? dateFrom
: `${dateFrom ?? '…'} → ${dateTo ?? '…'}`
: 'Any date'
return (
<div className="flex-shrink-0">
<div
onClick={() => setOpen((v) => !v)}
className="group flex h-9 cursor-pointer items-center gap-2 border-b border-border px-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-text-muted hover:text-text"
aria-expanded={open}
role="button"
>
<span className="flex-1 truncate">
{active ? summary : 'Date'}
</span>
{active && (
<span className="rounded bg-primary/20 px-1 py-px text-[9px] uppercase tracking-wider text-primary">
Filtering
</span>
)}
</div>
{open && (
<div className="border-b border-border px-3 py-3">
<DateRangePicker
from={dateFrom}
to={dateTo}
onFromChange={setDateFrom}
onToChange={setDateTo}
/>
</div>
)}
<div className="flex-shrink-0 border-b border-border px-2 py-2">
<DateRangePicker
from={dateFrom}
to={dateTo}
onFromChange={setDateFrom}
onToChange={setDateTo}
/>
</div>
)
}

3
frontend/src/components/layout/RightSidebar.tsx
View File

@@ -14,6 +14,7 @@ import { HEAPS_QUERY_KEY } from '../../hooks/useHeapsQuery'
import { useTagsQuery, TAGS_QUERY_KEY } from '../../hooks/useTagsQuery'
import { stripPhotosFromCache } from '../../hooks/usePhotosQuery'
import { toast } from '../ToastContainer'
import { ActiveHeapCard } from '../heaps/ActiveHeapCard'
import { PhotoInfoPanel } from '../sidebar/PhotoInfoPanel'
import { BulkTakenAtEditor } from '../sidebar/BulkTakenAtEditor'
import { BulkTagsEditor } from '../sidebar/BulkTagsEditor'
@@ -221,6 +222,7 @@ export function RightSidebar() {
role="region"
aria-label="Photo metadata"
>
<ActiveHeapCard />
<Header />
<div className="flex flex-1 items-center justify-center p-4 text-center">
<div className="text-text-muted">
@@ -255,6 +257,7 @@ export function RightSidebar() {
role="region"
aria-label="Photo metadata"
>
<ActiveHeapCard />
<Header />
<PhotoInfoPanel photoId={id} />
</div>

4
frontend/src/components/preview/PreviewView.tsx
View File

@@ -11,7 +11,7 @@ import type { Photo } from '../../types/photo'
import { PreviewImage } from './PreviewImage'
import { PreviewFilmstrip } from './PreviewFilmstrip'
import { getPreviewImageSrc, isVideo } from './previewSrc'
import { PhotoInfoPanel } from '../sidebar/PhotoInfoPanel'
import { RightSidebar } from '../layout/RightSidebar'
import { KeyboardHints } from '../KeyboardHints'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
@@ -309,7 +309,7 @@ export function PreviewView() {
* but lives inside the preview overlay so it isn't covered by it. */}
{infoPanelOpen && (
<aside className="w-80 shrink-0 overflow-hidden border-l border-border bg-surface">
<PhotoInfoPanel photoId={currentPhoto.id} />
<RightSidebar />
</aside>
)}
</div>

16
frontend/src/components/ui/sonner.tsx
View File

@@ -8,22 +8,22 @@ type ToasterProps = React.ComponentProps<typeof Sonner>
// existing call sites don't need edits.
const Toaster = ({ ...props }: ToasterProps) => (
<Sonner
position="bottom-left"
position="top-right"
theme="dark"
// Compact toasts: tight padding, smaller gap, single-line title+desc
// so they don't hog the corner of the screen.
gap={6}
gap={4}
toastOptions={{
classNames: {
toast:
'group toast !gap-1.5 !p-2 !min-h-0 bg-surface/90 border border-border backdrop-blur-md text-text shadow',
title: 'text-text text-xs font-medium leading-tight',
description: 'text-text-muted text-[11px] leading-tight',
'group toast !gap-1 !p-1.5 !min-h-0 !w-auto !min-w-0 bg-surface/90 border border-border backdrop-blur-md text-text shadow',
title: 'text-text text-[11px] font-medium leading-tight',
description: 'text-text-muted text-[10px] leading-tight',
actionButton:
'!h-6 bg-primary text-bg hover:bg-primary/90 rounded-md px-1.5 text-[11px] font-medium',
'!h-5 bg-primary text-bg hover:bg-primary/90 rounded px-1.5 text-[10px] font-medium',
cancelButton:
'!h-6 bg-surface-2 text-text-muted hover:bg-surface-offset rounded-md px-1.5 text-[11px]',
icon: '!size-3.5 !mr-1',
'!h-5 bg-surface-2 text-text-muted hover:bg-surface-offset rounded px-1.5 text-[10px]',
icon: '!size-3 !mr-1',
success: 'border-l-2 border-l-pick',
error: 'border-l-2 border-l-reject',
info: 'border-l-2 border-l-primary',