From 84c7b46155c064eab1dbd030add4a00dee412469 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Fri, 30 Aug 2024 18:27:22 +0800
Subject: [PATCH 1/6] feat: update invitations

Signed-off-by: Innei <i@innei.in>
---
 .../src/modules/settings/tabs/invitations.tsx | 51 +++++++++++++------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/renderer/src/modules/settings/tabs/invitations.tsx b/src/renderer/src/modules/settings/tabs/invitations.tsx
index 96b00aa3e0..5c0d4acac8 100644
--- a/src/renderer/src/modules/settings/tabs/invitations.tsx
+++ b/src/renderer/src/modules/settings/tabs/invitations.tsx
@@ -1,6 +1,11 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@renderer/components/ui/avatar"
-import { Button } from "@renderer/components/ui/button"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@renderer/components/ui/avatar"
 import { CopyButton } from "@renderer/components/ui/code-highlighter"
+import { RootPortal } from "@renderer/components/ui/portal"
+import { useScrollViewElement } from "@renderer/components/ui/scroll-area/hooks"
 import {
   Table,
   TableBody,
@@ -27,22 +32,33 @@ export const SettingInvitations = () => {
     async onError(err) {
       toast.error(getFetchErrorMessage(err))
     },
-    onSuccess() {
+    onSuccess(data) {
       Queries.invitations.list().invalidate()
-      toast("🎉 New invitation generated")
+      toast("🎉 New invitation generated, invite code is copied")
+      navigator.clipboard.writeText(data.data)
     },
   })
   const presentUserProfile = usePresentUserProfileModal("drawer")
 
+  const scrollViewElement = useScrollViewElement()
+
   return (
     <>
       <SettingsTitle />
-      <div className="mt-4">
-        <Button onClick={() => newInvitation.mutate()}>
-          New invitation
-        </Button>
+      <div className="relative mt-4">
+        <RootPortal to={scrollViewElement!}>
+          <button
+            type="button"
+            onClick={() => {
+              newInvitation.mutate()
+            }}
+            className="center absolute bottom-4 right-4 size-8 rounded-full bg-accent text-white drop-shadow"
+          >
+            <i className="i-mingcute-user-add-2-line size-4" />
+          </button>
+        </RootPortal>
         <Table className="mt-4">
-          <TableHeader>
+          <TableHeader className="border-b">
             <TableRow className="[&_*]:!font-semibold">
               <TableHead className="w-16 text-center" size="sm">
                 Code
@@ -55,19 +71,19 @@ export const SettingInvitations = () => {
               </TableHead>
             </TableRow>
           </TableHeader>
-          <TableBody>
+          <TableBody className="border-t-[12px] border-transparent">
             {invitations.data?.map((row) => (
               <TableRow key={row.code}>
                 <TableCell align="center" size="sm">
-                  <div className="group relative flex items-center justify-center gap-2">
+                  <div className="group relative flex items-center justify-center gap-2 font-mono">
                     <span>{row.code}</span>
                     <CopyButton
                       value={row.code}
-                      className="absolute -right-6 p-0.5 opacity-0 group-hover:opacity-100"
+                      className="absolute -right-6 p-1 opacity-0 group-hover:opacity-100 [&_i]:size-3"
                     />
                   </div>
                 </TableCell>
-                <TableCell align="center" size="sm">
+                <TableCell align="center" className="tabular-nums" size="sm">
                   {row.createdAt && new Date(row.createdAt).toLocaleString()}
                 </TableCell>
                 <TableCell align="center" size="sm">
@@ -79,11 +95,14 @@ export const SettingInvitations = () => {
                     >
                       <Avatar className="aspect-square size-5 border border-border ring-1 ring-background">
                         <AvatarImage src={row.users?.image || undefined} />
-                        <AvatarFallback>{row.users?.name?.slice(0, 2)}</AvatarFallback>
+                        <AvatarFallback>
+                          {row.users?.name?.slice(0, 2)}
+                        </AvatarFallback>
                       </Avatar>
                     </div>
-                  ) : "Not used"}
-
+                  ) : (
+                    "Not used"
+                  )}
                 </TableCell>
               </TableRow>
             ))}

From 06073d53bc6e69867b3e6102c755e6bd1f9be9bf Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Fri, 30 Aug 2024 20:50:43 +0800
Subject: [PATCH 2/6] fix: dark mode entry content color in electron

Signed-off-by: Innei <i@innei.in>
---
 src/renderer/src/components/ui/select.tsx        | 2 +-
 src/renderer/src/hooks/common/useDark.ts         | 6 ++----
 src/renderer/src/modules/entry-content/index.tsx | 2 +-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/components/ui/select.tsx b/src/renderer/src/components/ui/select.tsx
index 8a01594299..3534370ea1 100644
--- a/src/renderer/src/components/ui/select.tsx
+++ b/src/renderer/src/components/ui/select.tsx
@@ -27,7 +27,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <i className="i-mingcute-down-line ml-2 size-4 opacity-50" />
+      <i className="i-mingcute-down-line ml-2 size-4 shrink-0 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
diff --git a/src/renderer/src/hooks/common/useDark.ts b/src/renderer/src/hooks/common/useDark.ts
index 91678aa277..fcdd5298b7 100644
--- a/src/renderer/src/hooks/common/useDark.ts
+++ b/src/renderer/src/hooks/common/useDark.ts
@@ -19,15 +19,13 @@ const themeAtom = !window.electron ?
     },
   ) :
   atom("system" as ColorMode)
-function useDarkElectron() {
-  return useAtomValue(themeAtom) === "dark"
-}
+
 function useDarkWebApp() {
   const systemIsDark = useDarkQuery()
   const mode = useAtomValue(themeAtom)
   return mode === "dark" || (mode === "system" && systemIsDark)
 }
-export const useIsDark = window.electron ? useDarkElectron : useDarkWebApp
+export const useIsDark = useDarkWebApp
 
 export const useThemeAtomValue = () => useAtomValue(themeAtom)
 
diff --git a/src/renderer/src/modules/entry-content/index.tsx b/src/renderer/src/modules/entry-content/index.tsx
index a3f990d12d..6f5a01d9ef 100644
--- a/src/renderer/src/modules/entry-content/index.tsx
+++ b/src/renderer/src/modules/entry-content/index.tsx
@@ -449,7 +449,7 @@ const ContainerToc: FC = () => {
               "max-h-[calc(100vh-100px)] overflow-auto scrollbar-none",
 
               "@[500px]:-translate-x-12",
-              "@[700px]:-translate-x-8 @[800px]:-translate-x-16 @[900px]:translate-x-0 @[900px]:items-start",
+              "@[700px]:-translate-x-12 @[800px]:-translate-x-16 @[900px]:translate-x-0 @[900px]:items-start",
             )}
           />
         </div>

From 5f93e4baac340998b08aaa273e2185893fe88e92 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Fri, 30 Aug 2024 20:53:34 +0800
Subject: [PATCH 3/6] fix: optimize invitation page

Signed-off-by: Innei <i@innei.in>
---
 .../src/modules/settings/tabs/invitations.tsx | 119 ++++++++++--------
 1 file changed, 66 insertions(+), 53 deletions(-)

diff --git a/src/renderer/src/modules/settings/tabs/invitations.tsx b/src/renderer/src/modules/settings/tabs/invitations.tsx
index 5c0d4acac8..bff2e2ec3f 100644
--- a/src/renderer/src/modules/settings/tabs/invitations.tsx
+++ b/src/renderer/src/modules/settings/tabs/invitations.tsx
@@ -3,6 +3,7 @@ import {
   AvatarFallback,
   AvatarImage,
 } from "@renderer/components/ui/avatar"
+import { Button } from "@renderer/components/ui/button"
 import { CopyButton } from "@renderer/components/ui/code-highlighter"
 import { RootPortal } from "@renderer/components/ui/portal"
 import { useScrollViewElement } from "@renderer/components/ui/scroll-area/hooks"
@@ -57,60 +58,72 @@ export const SettingInvitations = () => {
             <i className="i-mingcute-user-add-2-line size-4" />
           </button>
         </RootPortal>
-        <Table className="mt-4">
-          <TableHeader className="border-b">
-            <TableRow className="[&_*]:!font-semibold">
-              <TableHead className="w-16 text-center" size="sm">
-                Code
-              </TableHead>
-              <TableHead className="text-center" size="sm">
-                Creation Time
-              </TableHead>
-              <TableHead className="text-center" size="sm">
-                Used by
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody className="border-t-[12px] border-transparent">
-            {invitations.data?.map((row) => (
-              <TableRow key={row.code}>
-                <TableCell align="center" size="sm">
-                  <div className="group relative flex items-center justify-center gap-2 font-mono">
-                    <span>{row.code}</span>
-                    <CopyButton
-                      value={row.code}
-                      className="absolute -right-6 p-1 opacity-0 group-hover:opacity-100 [&_i]:size-3"
-                    />
-                  </div>
-                </TableCell>
-                <TableCell align="center" className="tabular-nums" size="sm">
-                  {row.createdAt && new Date(row.createdAt).toLocaleString()}
-                </TableCell>
-                <TableCell align="center" size="sm">
-                  {row.users ? (
-                    <div
-                      onClick={() => {
-                        presentUserProfile(row.users?.id)
-                      }}
-                    >
-                      <Avatar className="aspect-square size-5 border border-border ring-1 ring-background">
-                        <AvatarImage src={row.users?.image || undefined} />
-                        <AvatarFallback>
-                          {row.users?.name?.slice(0, 2)}
-                        </AvatarFallback>
-                      </Avatar>
-                    </div>
-                  ) : (
-                    "Not used"
-                  )}
-                </TableCell>
+
+        {invitations.data?.length ? (
+          <Table className="mt-4">
+            <TableHeader className="border-b">
+              <TableRow className="[&_*]:!font-semibold">
+                <TableHead className="w-16 text-center" size="sm">
+                  Code
+                </TableHead>
+                <TableHead className="text-center" size="sm">
+                  Creation Time
+                </TableHead>
+                <TableHead className="text-center" size="sm">
+                  Used by
+                </TableHead>
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-        {!invitations.data?.length && (
-          <div className="my-2 w-full text-center text-sm text-zinc-400">
-            No invitations
+            </TableHeader>
+            <TableBody className="border-t-[12px] border-transparent">
+              {invitations.data?.map((row) => (
+                <TableRow key={row.code}>
+                  <TableCell align="center" size="sm">
+                    <div className="group relative flex items-center justify-center gap-2 font-mono">
+                      <span>{row.code}</span>
+                      <CopyButton
+                        value={row.code}
+                        className="absolute -right-6 p-1 opacity-0 group-hover:opacity-100 [&_i]:size-3"
+                      />
+                    </div>
+                  </TableCell>
+                  <TableCell align="center" className="tabular-nums" size="sm">
+                    {row.createdAt && new Date(row.createdAt).toLocaleString()}
+                  </TableCell>
+                  <TableCell align="center" size="sm">
+                    {row.users ? (
+                      <div
+                        onClick={() => {
+                          presentUserProfile(row.users?.id)
+                        }}
+                      >
+                        <Avatar className="aspect-square size-5 border border-border ring-1 ring-background">
+                          <AvatarImage src={row.users?.image || undefined} />
+                          <AvatarFallback>
+                            {row.users?.name?.slice(0, 2)}
+                          </AvatarFallback>
+                        </Avatar>
+                      </div>
+                    ) : (
+                      "Not used"
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : (
+          <div className="mt-36 w-full text-center text-sm text-zinc-400">
+            <p>No invitations</p>
+
+            <div className="mt-6">
+              <Button
+                onClick={() => {
+                  newInvitation.mutate()
+                }}
+              >
+                Create Invitation
+              </Button>
+            </div>
           </div>
         )}
       </div>

From abe9fc302c7af871f210ad5e2fd1eff0c7c2620e Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Fri, 30 Aug 2024 20:54:10 +0800
Subject: [PATCH 4/6] chore: motion button

Signed-off-by: Innei <i@innei.in>
---
 src/renderer/src/modules/settings/tabs/invitations.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/modules/settings/tabs/invitations.tsx b/src/renderer/src/modules/settings/tabs/invitations.tsx
index bff2e2ec3f..47be41ed91 100644
--- a/src/renderer/src/modules/settings/tabs/invitations.tsx
+++ b/src/renderer/src/modules/settings/tabs/invitations.tsx
@@ -3,7 +3,7 @@ import {
   AvatarFallback,
   AvatarImage,
 } from "@renderer/components/ui/avatar"
-import { Button } from "@renderer/components/ui/button"
+import { Button, MotionButtonBase } from "@renderer/components/ui/button"
 import { CopyButton } from "@renderer/components/ui/code-highlighter"
 import { RootPortal } from "@renderer/components/ui/portal"
 import { useScrollViewElement } from "@renderer/components/ui/scroll-area/hooks"
@@ -48,7 +48,7 @@ export const SettingInvitations = () => {
       <SettingsTitle />
       <div className="relative mt-4">
         <RootPortal to={scrollViewElement!}>
-          <button
+          <MotionButtonBase
             type="button"
             onClick={() => {
               newInvitation.mutate()
@@ -56,7 +56,7 @@ export const SettingInvitations = () => {
             className="center absolute bottom-4 right-4 size-8 rounded-full bg-accent text-white drop-shadow"
           >
             <i className="i-mingcute-user-add-2-line size-4" />
-          </button>
+          </MotionButtonBase>
         </RootPortal>
 
         {invitations.data?.length ? (

From 47d9fe65d842d246c69661f79b6985b06c0462f5 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Fri, 30 Aug 2024 20:54:31 +0800
Subject: [PATCH 5/6] chore(release): release v0.0.1-alpha.9

---
 CHANGELOG.md | 5 ++++-
 package.json | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6d49008de6..0dacccd9ea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # CHANGELOG
 
-## [0.0.1-alpha.8](https://github.com/RSSNext/follow/compare/v0.0.1-alpha.3...v0.0.1-alpha.8) (2024-08-30)
+## [0.0.1-alpha.9](https://github.com/RSSNext/follow/compare/v0.0.1-alpha.3...v0.0.1-alpha.9) (2024-08-30)
 
 
 ### Bug Fixes
@@ -43,6 +43,7 @@
 * copywrite ([8967d20](https://github.com/RSSNext/follow/commit/8967d20102bc1ad6f2f94b38909c7abfca6168d1))
 * daily report animation ([ff16272](https://github.com/RSSNext/follow/commit/ff162722a927d3708f3d857626e6412ae35d3880))
 * daily report link title ([0a58159](https://github.com/RSSNext/follow/commit/0a58159acd4fbc12e970f745f27e6488904a99d9))
+* dark mode entry content color in electron ([06073d5](https://github.com/RSSNext/follow/commit/06073d53bc6e69867b3e6102c755e6bd1f9be9bf))
 * date item layout animation ([e2fec9c](https://github.com/RSSNext/follow/commit/e2fec9c250b9641a645d0f24ec3f038a5b630cfd))
 * **db:** remove remaining data if unfollow feed ([1edf560](https://github.com/RSSNext/follow/commit/1edf5605e9621219e6cdfc732f12e6464113f765))
 * debug proxy inject env ([6b80cdc](https://github.com/RSSNext/follow/commit/6b80cdc6e7141913643f77a0b9a089333b86278d))
@@ -103,6 +104,7 @@
 * only windows 11 can manually resize logic ([338803a](https://github.com/RSSNext/follow/commit/338803a18936c29fcea694c95baef1b3e8650980))
 * optimize ai daily modal ([8872067](https://github.com/RSSNext/follow/commit/88720679df1371543c0feb5d3a48b7b7e664a20b))
 * optimize code string parser ([b3d32d0](https://github.com/RSSNext/follow/commit/b3d32d09fd4d5b53ae1692ffdc154e8d37a77fdd))
+* optimize invitation page ([5f93e4b](https://github.com/RSSNext/follow/commit/5f93e4baac340998b08aaa273e2185893fe88e92))
 * optional response data for check new, fixed [#195](https://github.com/RSSNext/follow/issues/195) ([2c650b0](https://github.com/RSSNext/follow/commit/2c650b08ae031e18dbe4b25d9c124c3eb7ff4f9a))
 * panel split color in dark mode ([3a0cfa1](https://github.com/RSSNext/follow/commit/3a0cfa1ebf794351d7f7b1132c0068a55ff2e9a6))
 * peek modal header background color and copywrite ([b8be81b](https://github.com/RSSNext/follow/commit/b8be81b2105d2c229955a433af91c43f5286194a))
@@ -252,6 +254,7 @@
 * toast when upgrade ([2a71bfc](https://github.com/RSSNext/follow/commit/2a71bfc0756011c0226c16ef53a755a47cf44acb))
 * toc hoverable ([3be6f2b](https://github.com/RSSNext/follow/commit/3be6f2ba019cb914e8ff452065d252e01e7ae496))
 * toc position calcation ([a7828d4](https://github.com/RSSNext/follow/commit/a7828d41e1e8e849a4f7df7e0c5e50c5d15a2491))
+* update invitations ([84c7b46](https://github.com/RSSNext/follow/commit/84c7b46155c064eab1dbd030add4a00dee412469))
 * update readwise logo ([c85460c](https://github.com/RSSNext/follow/commit/c85460c5bd13a3dadda1d4592b1ce6e434f4a8c6))
 * update redirect page layout ([bca6276](https://github.com/RSSNext/follow/commit/bca627696eca663abb02483ffb5c98ed2dc0eebc))
 * video player ([#225](https://github.com/RSSNext/follow/issues/225)) ([bb7d312](https://github.com/RSSNext/follow/commit/bb7d3127a9fe4543af12edfc49ce745e6ee7099e))
diff --git a/package.json b/package.json
index 670ebfe4d7..913481cfb0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "Follow",
   "type": "module",
-  "version": "0.0.1-alpha.8",
+  "version": "0.0.1-alpha.9",
   "private": true,
   "packageManager": "pnpm@9.7.1",
   "description": "Next generation information browser",

From 0cd183780f299b94a800cd86342484afa7f716bd Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Fri, 30 Aug 2024 21:10:46 +0800
Subject: [PATCH 6/6] fix: update invitation fab

Signed-off-by: Innei <i@innei.in>
---
 .../src/modules/settings/tabs/invitations.tsx | 170 +++++++++---------
 1 file changed, 90 insertions(+), 80 deletions(-)

diff --git a/src/renderer/src/modules/settings/tabs/invitations.tsx b/src/renderer/src/modules/settings/tabs/invitations.tsx
index 47be41ed91..c54d19d565 100644
--- a/src/renderer/src/modules/settings/tabs/invitations.tsx
+++ b/src/renderer/src/modules/settings/tabs/invitations.tsx
@@ -5,8 +5,7 @@ import {
 } from "@renderer/components/ui/avatar"
 import { Button, MotionButtonBase } from "@renderer/components/ui/button"
 import { CopyButton } from "@renderer/components/ui/code-highlighter"
-import { RootPortal } from "@renderer/components/ui/portal"
-import { useScrollViewElement } from "@renderer/components/ui/scroll-area/hooks"
+import { ScrollArea } from "@renderer/components/ui/scroll-area"
 import {
   Table,
   TableBody,
@@ -15,6 +14,7 @@ import {
   TableHeader,
   TableRow,
 } from "@renderer/components/ui/table"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@renderer/components/ui/tooltip"
 import { useAuthQuery } from "@renderer/hooks/common"
 import { apiClient, getFetchErrorMessage } from "@renderer/lib/api-fetch"
 import { usePresentUserProfileModal } from "@renderer/modules/profile/hooks"
@@ -41,91 +41,101 @@ export const SettingInvitations = () => {
   })
   const presentUserProfile = usePresentUserProfileModal("drawer")
 
-  const scrollViewElement = useScrollViewElement()
-
   return (
     <>
       <SettingsTitle />
-      <div className="relative mt-4">
-        <RootPortal to={scrollViewElement!}>
-          <MotionButtonBase
-            type="button"
-            onClick={() => {
-              newInvitation.mutate()
-            }}
-            className="center absolute bottom-4 right-4 size-8 rounded-full bg-accent text-white drop-shadow"
-          >
-            <i className="i-mingcute-user-add-2-line size-4" />
-          </MotionButtonBase>
-        </RootPortal>
+      <div className="absolute inset-x-0 bottom-10 top-4 flex flex-col">
+        <Tooltip>
+          <TooltipTrigger>
+            <MotionButtonBase
+              type="button"
+              onClick={() => {
+                newInvitation.mutate()
+              }}
+              className="center absolute bottom-0 right-2 size-10 rounded-full bg-accent text-white drop-shadow"
+            >
+              <i className="i-mingcute-user-add-2-line size-4" />
+            </MotionButtonBase>
+          </TooltipTrigger>
 
-        {invitations.data?.length ? (
-          <Table className="mt-4">
-            <TableHeader className="border-b">
-              <TableRow className="[&_*]:!font-semibold">
-                <TableHead className="w-16 text-center" size="sm">
-                  Code
-                </TableHead>
-                <TableHead className="text-center" size="sm">
-                  Creation Time
-                </TableHead>
-                <TableHead className="text-center" size="sm">
-                  Used by
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody className="border-t-[12px] border-transparent">
-              {invitations.data?.map((row) => (
-                <TableRow key={row.code}>
-                  <TableCell align="center" size="sm">
-                    <div className="group relative flex items-center justify-center gap-2 font-mono">
-                      <span>{row.code}</span>
-                      <CopyButton
-                        value={row.code}
-                        className="absolute -right-6 p-1 opacity-0 group-hover:opacity-100 [&_i]:size-3"
-                      />
-                    </div>
-                  </TableCell>
-                  <TableCell align="center" className="tabular-nums" size="sm">
-                    {row.createdAt && new Date(row.createdAt).toLocaleString()}
-                  </TableCell>
-                  <TableCell align="center" size="sm">
-                    {row.users ? (
-                      <div
-                        onClick={() => {
-                          presentUserProfile(row.users?.id)
-                        }}
-                      >
-                        <Avatar className="aspect-square size-5 border border-border ring-1 ring-background">
-                          <AvatarImage src={row.users?.image || undefined} />
-                          <AvatarFallback>
-                            {row.users?.name?.slice(0, 2)}
-                          </AvatarFallback>
-                        </Avatar>
-                      </div>
-                    ) : (
-                      "Not used"
-                    )}
-                  </TableCell>
+          <TooltipContent>
+            new invitation
+          </TooltipContent>
+        </Tooltip>
+        <ScrollArea.ScrollArea scrollbarClassName="w-1" rootClassName="flex grow">
+          {invitations.data?.length ? (
+            <Table className="mt-4">
+              <TableHeader className="border-b">
+                <TableRow className="[&_*]:!font-semibold">
+                  <TableHead className="w-16 text-center" size="sm">
+                    Code
+                  </TableHead>
+                  <TableHead className="text-center" size="sm">
+                    Creation Time
+                  </TableHead>
+                  <TableHead className="text-center" size="sm">
+                    Used by
+                  </TableHead>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        ) : (
-          <div className="mt-36 w-full text-center text-sm text-zinc-400">
-            <p>No invitations</p>
+              </TableHeader>
+              <TableBody className="border-t-[12px] border-transparent">
+                {invitations.data?.map((row) => (
+                  <TableRow key={row.code}>
+                    <TableCell align="center" size="sm">
+                      <div className="group relative flex items-center justify-center gap-2 font-mono">
+                        <span>{row.code}</span>
+                        <CopyButton
+                          value={row.code}
+                          className="absolute -right-6 p-1 opacity-0 group-hover:opacity-100 [&_i]:size-3"
+                        />
+                      </div>
+                    </TableCell>
+                    <TableCell
+                      align="center"
+                      className="tabular-nums"
+                      size="sm"
+                    >
+                      {row.createdAt &&
+                        new Date(row.createdAt).toLocaleString()}
+                    </TableCell>
+                    <TableCell align="center" size="sm">
+                      {row.users ? (
+                        <div
+                          onClick={() => {
+                            presentUserProfile(row.users?.id)
+                          }}
+                        >
+                          <Avatar className="aspect-square size-5 border border-border ring-1 ring-background">
+                            <AvatarImage src={row.users?.image || undefined} />
+                            <AvatarFallback>
+                              {row.users?.name?.slice(0, 2)}
+                            </AvatarFallback>
+                          </Avatar>
+                        </div>
+                      ) : (
+                        "Not used"
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          ) : (
+            <div className="mt-36 w-full text-center text-sm text-zinc-400">
+              <p>No invitations</p>
 
-            <div className="mt-6">
-              <Button
-                onClick={() => {
-                  newInvitation.mutate()
-                }}
-              >
-                Create Invitation
-              </Button>
+              <div className="mt-6">
+                <Button
+                  onClick={() => {
+                    newInvitation.mutate()
+                  }}
+                >
+                  Create Invitation
+                </Button>
+              </div>
             </div>
-          </div>
-        )}
+          )}
+        </ScrollArea.ScrollArea>
       </div>
     </>
   )