🌫🎲🎰🎇📟🎏

client/src/App.css

@@ -43,6 +43,7 @@
 
 .photo-wall {
   display: flex;
+  justify-content: center;
   flex-wrap: wrap;
   margin: 2rem;
 }
@@ -86,3 +87,29 @@
   text-transform: uppercase;
   letter-spacing: 0.05rem;
 }
+
+.ant-modal-content {
+  border-radius: 1rem;
+  padding: 0 !important;
+}
+
+.ant-modal-body img {
+  border-radius: 0.5rem;
+}
+
+.ant-modal-close {
+  font-weight: bold;
+}
+
+.ant-card {
+  border: 1px solid #0005;
+  border-radius: 0.2rem;
+}
+
+.ant-card-head {
+  background: #333a;
+  color: white;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.2rem;
+}

client/src/components/ScrollToTop.tsx

@@ -0,0 +1,23 @@
+import { Button } from 'antd'
+import React from 'react'
+
+export const ScrollToTop = () => {
+  const handleClick = () => {
+    window.scrollTo(0, 0)
+    console.log('')
+  }
+
+  return (
+    <Button
+      type="link"
+      style={{
+        position: 'fixed',
+        right: 20,
+        bottom: 20,
+      }}
+      onClick={handleClick}
+    >
+      ⤴️ Scroll To Top
+    </Button>
+  )
+}

client/src/components/SessionPictures.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
-import { Card, Modal, Row, Spin, Typography } from 'antd'
+import { Card, Modal, Row, Select, Typography } from 'antd'
 import { getSession } from '../api'
+import { ScrollToTop } from './ScrollToTop'
 
 type Props = {
   clientId: string
@@ -9,6 +10,9 @@ type Props = {
 export const SessionPictures = ({ clientId }: Props) => {
   const [urls, setUrls] = useState<string[] | null>(null)
   const [activeUrl, setActiveUrl] = useState<string | null>(null)
+  const [focusPhotos, setFocusPhotos] = useState<string[]>(
+    JSON.parse(window.localStorage.getItem('focusPhotos') || '[]'),
+  )
 
   useEffect(() => {
     const get = async () => {
@@ -32,14 +36,29 @@ export const SessionPictures = ({ clientId }: Props) => {
 
   if (!urls?.length) return null
 
+  const photos = urls.sort((a, b) =>
+    a.split('_')[0].localeCompare(b.split('_')[0]),
+  )
+
   const u = urls.length / 89
 
+  const handleSelect = (v: string[]) => {
+    console.log('SEelcted', v)
+    window.localStorage.setItem('focusPhotos', JSON.stringify(v))
+    setFocusPhotos(v)
+  }
+
+  const filteredPhotos = photos.filter((name) => {
+    const num = name.split('_')[0]
+    return focusPhotos.includes(num)
+  })
+
   return (
     <>
       <Modal
         visible={!!activeUrl}
         onOk={closeModal}
-        cancelText={null}
+        footer={null}
         onCancel={closeModal}
         width="50%"
       >
@@ -50,9 +69,31 @@ export const SessionPictures = ({ clientId }: Props) => {
           alt="large modal"
         ></img>
       </Modal>
-      <Row align="middle" justify="center">
-        <Typography.Title level={3}>Session Pictures</Typography.Title>
+      <Row
+        align="middle"
+        justify="space-around"
+        style={{ display: 'flex', width: '100%' }}
+      >
+        <Typography.Title style={{ margin: '0.5rem 1rem 0.7rem' }} level={3}>
+          Session Pictures
+        </Typography.Title>
         <Typography.Text>{urls.length}/ 89 loaded</Typography.Text>
+        <Typography.Text>Select Featured Photos:</Typography.Text>
+
+        <Select
+          mode="multiple"
+          allowClear
+          placeholder="Please select featured"
+          style={{ width: '35%' }}
+          defaultValue={focusPhotos}
+          value={focusPhotos}
+          onChange={handleSelect}
+        >
+          {photos.map((name) => {
+            const val = name.split('_')[0]
+            return <Select.Option value={val}>{val}</Select.Option>
+          })}
+        </Select>
       </Row>
 
       <div className="loading-bar-container">
@@ -60,27 +101,31 @@ export const SessionPictures = ({ clientId }: Props) => {
           className="loading-bar"
           style={{
             width: `${u * 100}%`,
-            background: `hsl(${Math.floor(1 * 120)}, 90%, 70%)`,
+            background: `hsl(${Math.floor(u * 120)}, 90%, 70%)`,
           }}
         ></div>
       </div>
-      <div className="photo-wall">
-        {urls ? (
-          urls
-            .sort((a, b) => a.split('_')[0].localeCompare(b.split('_')[0]))
-            .map((src) => (
-              <Card key={src} className="photo" title={src.split('_')[0]}>
-                <img
-                  onClick={() => setActiveUrl(src)}
-                  src={`${host}/output/${clientId}/${src}`}
-                  alt="lol"
-                />
-              </Card>
-            ))
-        ) : (
-          <Spin />
-        )}
+      <div className="featured-photos" style={{ marginTop: '2rem' }}>
+        {filteredPhotos.map((src) => (
+          <img
+            onClick={() => setActiveUrl(src)}
+            src={`${host}/output/${clientId}/${src}`}
+            alt="lol"
+          />
+        ))}
       </div>
+      <div className="photo-wall">
+        {photos.map((src) => (
+          <Card key={src} className="photo" title={src.split('_')[0]}>
+            <img
+              onClick={() => setActiveUrl(src)}
+              src={`${host}/output/${clientId}/${src}`}
+              alt="lol"
+            />
+          </Card>
+        ))}
+      </div>
+      <ScrollToTop />
     </>
   )
 }