From e7d62c29e1ea25ec2809ff022cd05120cc8baf0c Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Wed, 8 Apr 2026 21:27:56 +0200
Subject: [PATCH] feat: change empty state

---
 frontend/src/components/timeline/Timeline.tsx | 112 +++++++++---------
 1 file changed, 56 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/timeline/Timeline.tsx b/frontend/src/components/timeline/Timeline.tsx
index bcdbba1..e41de9c 100644
--- a/frontend/src/components/timeline/Timeline.tsx
+++ b/frontend/src/components/timeline/Timeline.tsx
@@ -433,7 +433,7 @@ export function Timeline() {
   if (photos.length === 0) {
     return (
       <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>
     )
   }
@@ -456,18 +456,39 @@ export function Timeline() {
         className="h-full overflow-auto bg-bg"
         style={{ padding: `${PADDING}px` }}
       >
-      <div
-        style={{
-          height: `${virtualizer.getTotalSize()}px`,
-          width: '100%',
-          position: 'relative',
-        }}
-      >
-        {virtualizer.getVirtualItems().map((virtualItem) => {
-          const item = items[virtualItem.index]
-          if (!item) return null
+        <div
+          style={{
+            height: `${virtualizer.getTotalSize()}px`,
+            width: '100%',
+            position: 'relative',
+          }}
+        >
+          {virtualizer.getVirtualItems().map((virtualItem) => {
+            const item = items[virtualItem.index]
+            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 (
               <div
                 key={virtualItem.key}
@@ -479,53 +500,32 @@ export function Timeline() {
                   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 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>
             )
-          }
-
-          // 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>
   )