From 7b2fcb5d0d25222951e2b8e042cc20ec485626d8 Mon Sep 17 00:00:00 2001
From: Chen Asraf <casraf@pm.me>
Date: Mon, 21 Oct 2024 02:08:02 +0300
Subject: [PATCH] feat: screenshots pages update

---
 .../components/Loader/LoadingContainer.tsx    |  9 ++++++-
 frontend/src/components/Sidebar/Sidebar.tsx   |  2 +-
 .../src/pages/Screenshots/ScreenshotsPage.tsx | 25 ++++++++++++-------
 frontend/src/style.css                        | 10 ++++++++
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Loader/LoadingContainer.tsx b/frontend/src/components/Loader/LoadingContainer.tsx
index a1ab7fb..35453c4 100644
--- a/frontend/src/components/Loader/LoadingContainer.tsx
+++ b/frontend/src/components/Loader/LoadingContainer.tsx
@@ -8,5 +8,12 @@ export function LoadingContainer({
   children,
   ...rest
 }: HtmlProps<'div'> & { loading: boolean }) {
-  return loading ? <Loader className={cn('', className)} {...rest} /> : children
+  return loading ? (
+    <Loader
+      className={cn('w-full h-full flex items-center justify-center min-h-[50vh]', className)}
+      {...rest}
+    />
+  ) : (
+    children
+  )
 }
diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
index eda65ef..20ce41c 100644
--- a/frontend/src/components/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -8,7 +8,7 @@ export function Sidebar({ className, ...rest }: HtmlProps<'div'>) {
   return (
     <div className={cn('py-3 bg-bg-950 h-screen overflow-y-auto', className)} {...rest}>
       <ul>
-        <ListItem label="Games" to="/games" />
+        <ListItem label="Games" to="/games" match={(p) => p === '/' || p.startsWith('/games')} />
         <ListItem
           label="Screenshots"
           to="/screenshots"
diff --git a/frontend/src/pages/Screenshots/ScreenshotsPage.tsx b/frontend/src/pages/Screenshots/ScreenshotsPage.tsx
index b6a4c80..635a152 100644
--- a/frontend/src/pages/Screenshots/ScreenshotsPage.tsx
+++ b/frontend/src/pages/Screenshots/ScreenshotsPage.tsx
@@ -46,15 +46,15 @@ export function ScreenshotsPage() {
 function ScreenshotsHome() {
   const { screenshots, isFetching } = useScreenshotsDirs()
   return (
-    <div className={cn('p-4')}>
-      <h1 className="text-2xl mb-4">Screenshots</h1>
+    <div className="relative">
+      <h1 className="sticky top-0 p-4 bg-background text-2xl z-10">Screenshots</h1>
 
       <div>
         <LoadingContainer loading={isFetching}>
           <div className="flex flex-col gap-8">
             {screenshots.screenshotCollections?.map((dir) => (
-              <div key={dir.dir} className="flex flex-col gap-4">
-                <div className="flex items-center gap-2 justify-between">
+              <div key={dir.dir} className="flex flex-col gap-4 p-4">
+                <div className="sticky top-[32px] bg-background flex items-center gap-2 justify-between z-0">
                   <h2 className="text-xl">{dir.gameName}</h2>
                   <div className="flex items-center gap-2">
                     <Button variant="outline" asChild>
@@ -65,7 +65,7 @@ function ScreenshotsHome() {
                     </Button>
                   </div>
                 </div>
-                <div className="flex items-start gap-4 flex-wrap max-w-full">
+                <div className="flex items-start gap-4 flex-nowrap overflow-x-hidden max-w-full">
                   {dir.screenshots.map((file) => (
                     <img
                       className="max-w-64 rounded-md"
@@ -88,8 +88,8 @@ function ScreenshotsGamePage() {
   const { screenshots, isFetching } = useScreenshotsDir(gameId!)
   const [dir] = screenshots.screenshotCollections ?? [{ screenshots: [] }]
   return (
-    <div className={cn('p-4')}>
-      <div className="flex flex-col gap-2">
+    <div className="relative">
+      <div className="sticky top-0 p-4 bg-background flex flex-col gap-2 z-10">
         <div>
           <Button variant="outline" size="sm" asChild>
             <Link to="/screenshots">
@@ -98,10 +98,17 @@ function ScreenshotsGamePage() {
             </Link>
           </Button>
         </div>
-        <h1 className="text-2xl mb-4">Screenshots for {dir.gameName}</h1>
+        <div className="flex items-center gap-2 justify-between">
+          <h1 className="text-2xl p-4 bg-background">Screenshots for {dir.gameName}</h1>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" onClick={() => NativeOpen(dir.dir)}>
+              Browse Folder
+            </Button>
+          </div>
+        </div>
       </div>
 
-      <div>
+      <div className="p-4 pt-0">
         <LoadingContainer loading={isFetching}>
           <div className="flex flex-col gap-8">
             <div className="flex items-start gap-4 flex-wrap max-w-full">
diff --git a/frontend/src/style.css b/frontend/src/style.css
index e74b741..c21be2e 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -87,4 +87,14 @@ body {
   body {
     @apply bg-background text-foreground;
   }
+
+  *::-webkit-scrollbar {
+    @apply w-[18px];
+    @apply bg-background;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    @apply bg-border rounded-xl;
+    box-shadow: hsl(var(--background)) inset 0 0 0 4px;
+  }
 }