feat: added gallery view

src/components/BlobList/BlobList.css

@@ -22,3 +22,23 @@
 .blob-list .blob a {
   @apply cursor-pointer;
 }
+
+.blog-list-header {
+  @apply flex flex-row mt-4;
+}
+
+.blog-list-header h2 {
+  @apply flex-grow;
+}
+
+.blog-list-header button {
+  @apply bg-neutral-800 hover:bg-neutral-700 p-2 ml-2 rounded-lg;
+}
+
+.blog-list-header button.selected {
+  @apply bg-pink-700 text-white;
+}
+
+.blog-list-header svg {
+  @apply w-6 text-white opacity-80 hover:opacity-100;
+}

src/components/BlobList/BlobList.tsx

@@ -1,39 +1,122 @@
-import { DocumentIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { DocumentIcon, ListBulletIcon, PhotoIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { BlobDescriptor } from 'blossom-client-sdk';
 import { formatDate, formatFileSize } from '../../utils';
 import './BlobList.css';
+import { useState } from 'react';
+
+type ListMode = 'gallery' | 'list';
 
 type BlobListProps = {
   blobs: BlobDescriptor[];
   onDelete?: (blob: BlobDescriptor) => void;
+  title?: string;
 };
-const BlobList = ({ blobs, onDelete }: BlobListProps) => {
+
+const BlobList = ({ blobs, onDelete, title }: BlobListProps) => {
+  const [mode, setMode] = useState<ListMode>('list');
+
   return (
-    <div className="blob-list">
-      {blobs.map((blob: BlobDescriptor) => (
-        <div className="blob" key={blob.sha256}>
-          <span>
-            <DocumentIcon />
-          </span>
-          <span>
-            <a href={blob.url} target="_blank">
-              {blob.sha256}
-            </a>
-          </span>
-          <span>{formatFileSize(blob.size)}</span>
-          <span>{blob.type && `${blob.type}`}</span>
-          <span>{formatDate(blob.created)}</span>
-          {onDelete && (
+    <>
+      <div className="blog-list-header">
+        {title && <h2>{title}</h2>}
+        <div className=" content-center">
+          <button onClick={() => setMode('list')} className={mode == 'list' ? 'selected': ''}>
+            <ListBulletIcon />
+          </button>
+          <button onClick={() => setMode('gallery')} className={mode == 'gallery' ? 'selected': ''}>
+            <PhotoIcon />
+          </button>
+        </div>
+      </div>
+
+      {mode == 'gallery' && (
+        <div className="blob-list flex flex-wrap justify-center">
+          {blobs
+            .filter(b => b.type?.startsWith('image/'))
+            .map(blob => (
+              <div className="p-2 rounded-lg bg-neutral-900 m-2" style={{ display: 'inline-block' }}>
+                <a href={blob.url} target="_blank">
+                  <div
+                    className=""
+                    style={{
+                      width: 200,
+                      height: 200,
+                      cursor: 'pointer',
+                      display: 'inline-block',
+                      backgroundSize: 'contain',
+                      backgroundRepeat: 'no-repeat',
+                      backgroundPosition: 'center',
+                      backgroundImage: `url(https://images.slidestr.net/insecure/f:webp/rs:fill:300/plain/${blob.url})`,
+                    }}
+                  ></div>
+                </a>
+                <div className="flex flex-row text-xs">
+                  <span>{formatFileSize(blob.size)}</span>
+                  <span className=" flex-grow text-right">{formatDate(blob.created)}</span>
+                </div>
+              </div>
+            ))}
+        </div>
+      )}
+
+      {mode == 'list' && (
+        <div className="blob-list">
+          {blobs.map((blob: BlobDescriptor) => (
+            <div className="blob" key={blob.sha256}>
+              <span>
+                <DocumentIcon />
+              </span>
+              <span>
+                <a href={blob.url} target="_blank">
+                  {blob.sha256}
+                </a>
+              </span>
+              <span>{formatFileSize(blob.size)}</span>
+              <span>{blob.type && `${blob.type}`}</span>
+              <span>{formatDate(blob.created)}</span>
+              {onDelete && (
+                <span>
+                  <a onClick={() => onDelete(blob)}>
+                    <TrashIcon />
+                  </a>
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+  /*
+    )}
+  } else {
+    return (
+      <div className="blob-list">
+        {blobs.map((blob: BlobDescriptor) => (
+          <div className="blob" key={blob.sha256}>
             <span>
-              <a onClick={() => onDelete(blob)}>
-                <TrashIcon />
+              <DocumentIcon />
+            </span>
+            <span>
+              <a href={blob.url} target="_blank">
+                {blob.sha256}
               </a>
             </span>
-          )}
-        </div>
-      ))}
-    </div>
-  );
+            <span>{formatFileSize(blob.size)}</span>
+            <span>{blob.type && `${blob.type}`}</span>
+            <span>{formatDate(blob.created)}</span>
+            {onDelete && (
+              <span>
+                <a onClick={() => onDelete(blob)}>
+                  <TrashIcon />
+                </a>
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  }*/
 };
 
 export default BlobList;

src/components/ServerList/ServerList.tsx

@@ -12,7 +12,7 @@ type ServerListProps = {
   onCheck?: (server: string) => void;
 };
 
-export const ServerList = ({ servers, selectedServer, setSelectedServer, onTransfer, onCancel, onCheck }: ServerListProps) => {
+export const ServerList = ({ servers, selectedServer, setSelectedServer, onTransfer, onCancel }: ServerListProps) => {
   const { serverInfo, distribution } = useServerInfo();
   const blobsWithOnlyOneOccurance = Object.values(distribution)
     .filter(d => d.servers.length == 1)

src/pages/Home.tsx

@@ -68,19 +68,17 @@ function Home() {
       ></ServerList>
 
       {selectedServer && serverInfo[selectedServer] && selectedServerBlobs && (
-        <>
-          <h2>Your objects on {serverInfo[selectedServer].name}</h2>
-          <BlobList
-            blobs={selectedServerBlobs}
-            onDelete={blob =>
-              deleteBlob.mutate({
-                serverName: serverInfo[selectedServer].name,
-                serverUrl: serverInfo[selectedServer].url,
-                hash: blob.sha256,
-              })
-            }
-          ></BlobList>
-        </>
+        <BlobList
+          title={`Your objects on ${serverInfo[selectedServer].name}`}
+          blobs={selectedServerBlobs}
+          onDelete={blob =>
+            deleteBlob.mutate({
+              serverName: serverInfo[selectedServer].name,
+              serverUrl: serverInfo[selectedServer].url,
+              hash: blob.sha256,
+            })
+          }
+        ></BlobList>
       )}
     </>
   );