From ac18768bc3650ce5695e7e3428b33c43c5880d2c Mon Sep 17 00:00:00 2001
From: Aryan Iyappan <69184573+aryan340@users.noreply.github.com>
Date: Sun, 10 Mar 2024 17:29:07 +0530
Subject: [PATCH] add overall app scroll

---
 client/app/settings/appearance/page.tsx       |  4 +--
 client/app/settings/layout.tsx                |  6 ++--
 client/app/settings/page.tsx                  |  8 ++---
 client/app/settings/passkeys/page.tsx         | 15 ++++++---
 client/app/settings/sessions/page.tsx         | 31 +++----------------
 .../settings/passkeys/passkeys-list.tsx       | 30 ++++++++++++++++++
 .../settings/sessions/user-session-card.tsx   | 18 ++++++++---
 .../settings/sessions/user-session-list.tsx   | 31 +++++++++++++++++++
 client/styles/globals.css                     | 21 +++----------
 9 files changed, 103 insertions(+), 61 deletions(-)
 create mode 100644 client/components/settings/passkeys/passkeys-list.tsx
 create mode 100644 client/components/settings/sessions/user-session-list.tsx

diff --git a/client/app/settings/appearance/page.tsx b/client/app/settings/appearance/page.tsx
index 6ebcfd7..777863b 100644
--- a/client/app/settings/appearance/page.tsx
+++ b/client/app/settings/appearance/page.tsx
@@ -3,9 +3,9 @@ import AppearanceForm from '@/components/settings/appearance/appearance-form';
 export default function AppearanceSettingsPage() {
   return (
     <div className='space-y-6'>
-      <div>
+      <div className='flex flex-col'>
         <h3 className='text-lg font-medium'>Appearance</h3>
-        <p className='text-muted-foreground text-sm'>
+        <p className='text-sm text-muted-foreground'>
           Manage how your app looks here.
         </p>
       </div>
diff --git a/client/app/settings/layout.tsx b/client/app/settings/layout.tsx
index 280d75c..66f4530 100644
--- a/client/app/settings/layout.tsx
+++ b/client/app/settings/layout.tsx
@@ -33,7 +33,7 @@ export default function SettingsLayout({
   children: React.ReactNode;
 }) {
   return (
-    <main className='flex min-h-screen w-full flex-col'>
+    <main className='flex h-full w-full max-w-full flex-col'>
       <div className='border-b p-4'>
         <div className='mx-auto flex max-w-7xl items-center justify-between'>
           <h1 className='font-semibold'>Settings</h1>
@@ -44,12 +44,12 @@ export default function SettingsLayout({
           </Link>
         </div>
       </div>
-      <div className='mb-8 flex min-h-full flex-1'>
+      <div className='mb-8 flex flex-1'>
         <div className='mx-auto flex min-h-full max-w-7xl flex-1 flex-col space-y-8 p-4 lg:flex-row lg:space-x-12 lg:space-y-0'>
           <aside className='lg:w-1/6'>
             <SidebarNav items={sidebarNavItems} />
           </aside>
-          <div className='min-h-full flex-1 lg:max-w-2xl'>{children}</div>
+          <div className='h-full flex-1 lg:max-w-2xl'>{children}</div>
         </div>
       </div>
     </main>
diff --git a/client/app/settings/page.tsx b/client/app/settings/page.tsx
index 99c33a1..ea87086 100644
--- a/client/app/settings/page.tsx
+++ b/client/app/settings/page.tsx
@@ -17,9 +17,9 @@ export default function AccountSettingsPage() {
 
   return (
     <div className='space-y-6'>
-      <div>
+      <div className='flex flex-col'>
         <h3 className='text-lg font-medium'>User profile</h3>
-        <p className='text-muted-foreground text-sm'>
+        <p className='text-sm text-muted-foreground'>
           This is how others will see you on {APP_NAME}.
         </p>
       </div>
@@ -48,13 +48,13 @@ export default function AccountSettingsPage() {
               </Link>
             </TooltipContent>
           </Tooltip>
-          <p className='text-muted-foreground text-sm'>User avatar</p>
+          <p className='text-sm text-muted-foreground'>User avatar</p>
         </div>
       </div>
       <Separator />
       <div>
         <h3 className='text-lg font-medium'>User email</h3>
-        <p className='text-muted-foreground text-sm'>
+        <p className='text-sm text-muted-foreground'>
           Manage your email address here.
         </p>
       </div>
diff --git a/client/app/settings/passkeys/page.tsx b/client/app/settings/passkeys/page.tsx
index 8c7d7e7..aab8acf 100644
--- a/client/app/settings/passkeys/page.tsx
+++ b/client/app/settings/passkeys/page.tsx
@@ -1,11 +1,16 @@
+import { Button } from '@/components/ui/button';
+
 export default function PasskeysSettingsPage() {
   return (
     <div className='space-y-6'>
-      <div>
-        <h3 className='text-lg font-medium'>Passkeys</h3>
-        <p className='text-muted-foreground text-sm'>
-          Manage your passkeys here.
-        </p>
+      <div className='flex w-full justify-between gap-4'>
+        <div className='flex flex-col'>
+          <h3 className='text-lg font-medium'>Passkeys</h3>
+          <p className='text-sm text-muted-foreground'>
+            Manage your passkeys here.
+          </p>
+        </div>
+        <Button>Add passkey</Button>
       </div>
     </div>
   );
diff --git a/client/app/settings/sessions/page.tsx b/client/app/settings/sessions/page.tsx
index 60559f9..45a6396 100644
--- a/client/app/settings/sessions/page.tsx
+++ b/client/app/settings/sessions/page.tsx
@@ -1,40 +1,17 @@
 'use client';
-import UserSessionCard from '@/components/settings/sessions/user-session-card';
-import { Button } from '@/components/ui/button';
-import useUserSessions from '@/lib/hooks/useUserSessions';
-import React from 'react';
+import UserSessionList from '@/components/settings/sessions/user-session-list';
 
 export default function SessionsSettingsPage() {
-  const userSessions = useUserSessions();
-
   return (
-    <div className='space-y-6'>
-      <div>
+    <div className='flex h-full flex-col space-y-6'>
+      <div className='flex flex-col'>
         <h3 className='text-lg font-medium'>Sessions</h3>
         <p className='text-sm text-muted-foreground'>
           Here are all the sessions that are currently active. Revoke any
           sessions that you do not recognize.
         </p>
       </div>
-      <div className='flex flex-col gap-4'>
-        {userSessions.data.pages.map((page, i) => (
-          <React.Fragment key={i}>
-            {page.entities.map((userSession) => (
-              <UserSessionCard userSession={userSession} key={userSession.id} />
-            ))}
-          </React.Fragment>
-        ))}
-        {userSessions.hasNextPage ? (
-          <Button
-            className='w-full'
-            variant='outline'
-            onClick={() => userSessions.fetchNextPage()}
-            disabled={userSessions.isFetchingNextPage}
-          >
-            {userSessions.isFetchingNextPage ? 'Loading more...' : 'Load More'}
-          </Button>
-        ) : null}
-      </div>
+      <UserSessionList />
     </div>
   );
 }
diff --git a/client/components/settings/passkeys/passkeys-list.tsx b/client/components/settings/passkeys/passkeys-list.tsx
new file mode 100644
index 0000000..fdc6214
--- /dev/null
+++ b/client/components/settings/passkeys/passkeys-list.tsx
@@ -0,0 +1,30 @@
+'use client';
+import { Button } from '@/components/ui/button';
+import useUserSessions from '@/lib/hooks/useUserSessions';
+import React from 'react';
+
+export default function PasskeysList() {
+  const userSessions = useUserSessions();
+
+  return (
+    <div className='flex flex-col gap-4'>
+      {userSessions.data.pages.map((page, i) => (
+        <React.Fragment key={i}>
+          {page.entities.map((userSession) => (
+            <p key={userSession.id} />
+          ))}
+        </React.Fragment>
+      ))}
+      {userSessions.hasNextPage ? (
+        <Button
+          className='w-full'
+          variant='outline'
+          onClick={() => userSessions.fetchNextPage()}
+          disabled={userSessions.isFetchingNextPage}
+        >
+          {userSessions.isFetchingNextPage ? 'Loading more...' : 'Load More'}
+        </Button>
+      ) : null}
+    </div>
+  );
+}
diff --git a/client/components/settings/sessions/user-session-card.tsx b/client/components/settings/sessions/user-session-card.tsx
index a794560..cf62e57 100644
--- a/client/components/settings/sessions/user-session-card.tsx
+++ b/client/components/settings/sessions/user-session-card.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -8,7 +9,7 @@ import {
 import { UserSessionSchema } from '@/generated/openapi/v1.0';
 import useDeleteUserSession from '@/lib/hooks/useDeleteUserSession';
 
-const createdAtFormat = new Intl.DateTimeFormat('en', {
+const dateTimeFormat = new Intl.DateTimeFormat('en', {
   day: '2-digit',
   month: 'long',
   year: 'numeric',
@@ -25,6 +26,9 @@ export default function UserSessionCard({
     await deleteUserSession.mutateAsync({ sessionId: userSession.id });
   }
 
+  console.log(userSession.loggedOutAt);
+  console.log(userSession.createdAt);
+
   return (
     <Card>
       <CardHeader>
@@ -48,9 +52,15 @@ export default function UserSessionCard({
         </div>
       </CardContent>
       <CardFooter>
-        <p className='text-xs text-muted-foreground'>
-          created on {createdAtFormat.format(userSession.createdAt)}
-        </p>
+        {userSession.loggedOutAt !== null ? (
+          <p className='text-xs text-muted-foreground'>
+            logged out on {dateTimeFormat.format(userSession.createdAt)}
+          </p>
+        ) : (
+          <p className='text-xs text-muted-foreground'>
+            created on {dateTimeFormat.format(userSession.createdAt)}
+          </p>
+        )}
       </CardFooter>
     </Card>
   );
diff --git a/client/components/settings/sessions/user-session-list.tsx b/client/components/settings/sessions/user-session-list.tsx
new file mode 100644
index 0000000..8a91325
--- /dev/null
+++ b/client/components/settings/sessions/user-session-list.tsx
@@ -0,0 +1,31 @@
+'use client';
+import { Button } from '@/components/ui/button';
+import useUserSessions from '@/lib/hooks/useUserSessions';
+import React from 'react';
+import UserSessionCard from './user-session-card';
+
+export default function UserSessionList() {
+  const userSessions = useUserSessions();
+
+  return (
+    <div className='flex h-full flex-1 flex-col gap-4'>
+      {userSessions.data.pages.map((page, i) => (
+        <React.Fragment key={i}>
+          {page.entities.map((userSession) => (
+            <UserSessionCard userSession={userSession} key={userSession.id} />
+          ))}
+        </React.Fragment>
+      ))}
+      {userSessions.hasNextPage ? (
+        <Button
+          className='w-full'
+          variant='outline'
+          onClick={() => userSessions.fetchNextPage()}
+          disabled={userSessions.isFetchingNextPage}
+        >
+          {userSessions.isFetchingNextPage ? 'Loading more...' : 'Load More'}
+        </Button>
+      ) : null}
+    </div>
+  );
+}
diff --git a/client/styles/globals.css b/client/styles/globals.css
index da5d241..1411be0 100644
--- a/client/styles/globals.css
+++ b/client/styles/globals.css
@@ -59,6 +59,10 @@
     @apply font-sans antialiased;
   }
 
+  html {
+    position: fixed;
+  }
+
   html,
   body,
   body > main,
@@ -66,21 +70,6 @@
     @apply h-full w-full;
     @apply whitespace-normal;
     @apply box-border;
-  }
-
-  /* Custom Scrollbar Styles */
-  ::-webkit-scrollbar {
-    @apply w-4;
-  }
-
-  ::-webkit-scrollbar-track {
-    @apply bg-secondary;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    @apply bg-primary;
-    @apply rounded-xl;
-    @apply border-x-4 border-solid border-transparent;
-    @apply bg-clip-padding;
+    @apply overflow-y-auto;
   }
 }