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

feat: change empty state

Browse Source
This commit is contained in:
authentik Default Admin
2026-04-08 21:27:56 +02:00
parent 8e00dd40f0
commit e7d62c29e1
1 changed files with 56 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
frontend/src/components/timeline/Timeline.tsx
View File

@@ -433,7 +433,7 @@ export function Timeline() {
if (photos.length === 0) { if (photos.length === 0) {
return ( return (
<div className="flex items-center justify-center h-full"> <div className="flex items-center justify-center h-full">
<div className="text-text-muted">No photos found. Add a source folder to get started.</div> <div className="text-text-muted">(╯°□°）╯︵ ┻━┻</div>
</div> </div>
) )
} }
@@ -456,18 +456,39 @@ export function Timeline() {
className="h-full overflow-auto bg-bg" className="h-full overflow-auto bg-bg"
style={{ padding: `${PADDING}px` }} style={{ padding: `${PADDING}px` }}
> >
<div <div
style={{ style={{
height: `${virtualizer.getTotalSize()}px`, height: `${virtualizer.getTotalSize()}px`,
width: '100%', width: '100%',
position: 'relative', position: 'relative',
}} }}
> >
{virtualizer.getVirtualItems().map((virtualItem) => { {virtualizer.getVirtualItems().map((virtualItem) => {
const item = items[virtualItem.index] const item = items[virtualItem.index]
if (!item) return null if (!item) return null
if (item.type === 'header') { if (item.type === 'header') {
return (
<div
key={virtualItem.key}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: `${virtualItem.size}px`,
transform: `translateY(${virtualItem.start}px)`,
}}
className="flex items-end pb-1"
>
<h3 className="text-sm font-semibold uppercase tracking-wide text-text-muted">
{item.label}
</h3>
</div>
)
}
// row
return ( return (
<div <div
key={virtualItem.key} key={virtualItem.key}
@@ -479,53 +500,32 @@ export function Timeline() {
height: `${virtualItem.size}px`, height: `${virtualItem.size}px`,
transform: `translateY(${virtualItem.start}px)`, transform: `translateY(${virtualItem.start}px)`,
}} }}
className="flex items-end pb-1"
> >
<h3 className="text-sm font-semibold uppercase tracking-wide text-text-muted"> <div className="flex" style={{ gap: `${GAP}px` }}>
{item.label} {item.cells.map(({ photo, globalIndex }) => (
</h3> <PhotoThumbnail
key={photo.id}
photo={photo}
size={THUMBNAIL_SIZE}
isSelected={selectedPhotos.includes(photo.id)}
isInActiveHeap={activeHeapMembers.has(photo.id)}
onClick={(e) => {
if (e.shiftKey && lastSelectedIndex !== null) {
selectRange(globalIndex)
} else if (e.ctrlKey || e.metaKey) {
togglePhotoSelection(photo.id, globalIndex)
} else {
selectPhoto(photo.id, globalIndex)
}
}}
onDoubleClick={() => openPreview(photo.id)}
/>
))}
</div>
</div> </div>
) )
} })}
</div>
// row
return (
<div
key={virtualItem.key}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: `${virtualItem.size}px`,
transform: `translateY(${virtualItem.start}px)`,
}}
>
<div className="flex" style={{ gap: `${GAP}px` }}>
{item.cells.map(({ photo, globalIndex }) => (
<PhotoThumbnail
key={photo.id}
photo={photo}
size={THUMBNAIL_SIZE}
isSelected={selectedPhotos.includes(photo.id)}
isInActiveHeap={activeHeapMembers.has(photo.id)}
onClick={(e) => {
if (e.shiftKey && lastSelectedIndex !== null) {
selectRange(globalIndex)
} else if (e.ctrlKey || e.metaKey) {
togglePhotoSelection(photo.id, globalIndex)
} else {
selectPhoto(photo.id, globalIndex)
}
}}
onDoubleClick={() => openPreview(photo.id)}
/>
))}
</div>
</div>
)
})}
</div>
</div> </div>
</div> </div>
) )