From cb516b7763bb1498491e38e64d35ee27c72bd70b Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Fri, 23 Jun 2023 17:57:48 +0200
Subject: [PATCH 01/16] Adding an information button to the shares and
 corrected MyShare interface

---
 .../account/showShareInformationsModal.tsx    | 49 +++++++++++++++++++
 frontend/src/pages/account/shares.tsx         | 19 ++++++-
 frontend/src/types/share.type.ts              |  2 +-
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/account/showShareInformationsModal.tsx

diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
new file mode 100644
index 000000000..3e1953810
--- /dev/null
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -0,0 +1,49 @@
+import { Stack, TextInput } from "@mantine/core";
+import { Text, Badge, Divider } from '@mantine/core';
+import { ModalsContextProps } from "@mantine/modals/lib/context";
+import { MyShare } from "../../types/share.type";
+import moment from "moment";
+import {byteToHumanSizeString} from "../../utils/fileSize.util";
+
+const showShareInformationsModal = (
+  modals: ModalsContextProps,
+  share: MyShare,
+  appUrl: string
+) => {
+  const link = `${appUrl}/share/${share.id}`;
+  console.log(share)
+  console.log(share.files)
+  return modals.openModal({
+    title: "Share informations",
+    children: (
+      <Stack align="stretch">
+          <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
+            ID: {share.id}
+          </Text>
+
+          <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
+            Author: N/A
+          </Text>
+
+          <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
+            Created at: {moment(share.createdAt).format("LLL")}
+          </Text>
+
+          <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
+            Expires at: {moment(share.expiration).format("LLL")}
+          </Text>
+
+          <Divider style={{ margin: '1rem 0' }} />
+
+          <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
+
+          </Text>
+
+          <Divider style={{ margin: '1rem 0' }} />
+
+      </Stack>
+    ),
+  });
+};
+
+export default showShareInformationsModal;
diff --git a/frontend/src/pages/account/shares.tsx b/frontend/src/pages/account/shares.tsx
index abd4d446c..b8703152d 100644
--- a/frontend/src/pages/account/shares.tsx
+++ b/frontend/src/pages/account/shares.tsx
@@ -15,7 +15,7 @@ import { useModals } from "@mantine/modals";
 import moment from "moment";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import { TbLink, TbTrash } from "react-icons/tb";
+import { TbLink, TbTrash, TbInfoCircle } from "react-icons/tb";
 import showShareLinkModal from "../../components/account/showShareLinkModal";
 import CenterLoader from "../../components/core/CenterLoader";
 import Meta from "../../components/Meta";
@@ -23,6 +23,7 @@ import useConfig from "../../hooks/config.hook";
 import shareService from "../../services/share.service";
 import { MyShare } from "../../types/share.type";
 import toast from "../../utils/toast.util";
+import showShareInformationsModal from "../../components/account/showShareInformationsModal";
 
 const MyShares = () => {
   const modals = useModals();
@@ -37,6 +38,8 @@ const MyShares = () => {
 
   if (!shares) return <CenterLoader />;
 
+  console.log(shares);
+
   return (
     <>
       <Meta title="My shares" />
@@ -77,6 +80,20 @@ const MyShares = () => {
                   </td>
                   <td>
                     <Group position="right">
+                      <ActionIcon
+                        color="blue"
+                        variant="light"
+                        size={25}
+                        onClick={() => {
+                          showShareInformationsModal(
+                            modals,
+                            share,
+                            config.get("general.appUrl")
+                          );
+                        }}
+                      >
+                        <TbInfoCircle />
+                      </ActionIcon>
                       <ActionIcon
                         color="victoria"
                         variant="light"
diff --git a/frontend/src/types/share.type.ts b/frontend/src/types/share.type.ts
index 4c8986f7c..5e910119a 100644
--- a/frontend/src/types/share.type.ts
+++ b/frontend/src/types/share.type.ts
@@ -24,7 +24,7 @@ export type ShareMetaData = {
 
 export type MyShare = Share & {
   views: number;
-  cratedAt: Date;
+  createdAt: Date;
 };
 
 export type MyReverseShare = {

From 34e8271388a2c639534fcd0c886ff9e13d8ad82d Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Fri, 23 Jun 2023 22:03:32 +0200
Subject: [PATCH 02/16] Adding other informations and disk usage

---
 .../account/showShareInformationsModal.tsx    | 49 +++++++++++++------
 frontend/src/pages/account/shares.tsx         |  3 +-
 2 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
index 3e1953810..f819508a7 100644
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -1,46 +1,67 @@
-import { Stack, TextInput } from "@mantine/core";
-import { Text, Badge, Divider } from '@mantine/core';
+import {Text, Divider, Progress, Stack, Group} from '@mantine/core';
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { MyShare } from "../../types/share.type";
 import moment from "moment";
 import {byteToHumanSizeString} from "../../utils/fileSize.util";
+import CopyTextField from "../upload/CopyTextField";
 
 const showShareInformationsModal = (
   modals: ModalsContextProps,
   share: MyShare,
-  appUrl: string
+  appUrl: string,
+  maxShareSize: number | string
 ) => {
   const link = `${appUrl}/share/${share.id}`;
-  console.log(share)
-  console.log(share.files)
+  const shareSize = 165564769; // TODO: get share size from backend
+  if (typeof maxShareSize === "string") {
+    maxShareSize = parseInt(maxShareSize);
+  }
   return modals.openModal({
     title: "Share informations",
+
     children: (
       <Stack align="stretch">
-          <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
-            ID: {share.id}
+          <Text size="sm" color="lightgray" style={{ margin: '0.5rem 0' }}>
+            <b>ID:</b> {share.id}
           </Text>
 
           <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
-            Author: N/A
+            <b>Creator :</b> You
           </Text>
 
           <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
-            Created at: {moment(share.createdAt).format("LLL")}
+            <b>Created at :</b> {moment(share.createdAt).format("LLL")}
           </Text>
 
-          <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
-            Expires at: {moment(share.expiration).format("LLL")}
+          <Text size="sm" color="lightgray">
+            <b>Expires at :</b> {moment(share.expiration).format("LLL")}
           </Text>
 
+          <Divider style={{ margin: '.5rem 0' }} />
+
+          <CopyTextField link={link} />
+
           <Divider style={{ margin: '1rem 0' }} />
 
           <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
-
+            <b>Size :</b> {byteToHumanSizeString(shareSize)} / {byteToHumanSizeString(maxShareSize)}
+            <Progress
+              value={((shareSize / maxShareSize) * 100)}
+              label={byteToHumanSizeString(shareSize)}
+              color="blue"
+              style={{ marginTop: '0.5rem' }}
+              size="xl"
+              radius="xl"
+            >
+              <Group
+                position="right">
+                <Text size="sm" color="lightgray" style={{ marginRight: '0.5rem' }}>
+                  {byteToHumanSizeString(maxShareSize)}
+                </Text>
+              </Group>
+            </Progress>
           </Text>
 
-          <Divider style={{ margin: '1rem 0' }} />
-
       </Stack>
     ),
   });
diff --git a/frontend/src/pages/account/shares.tsx b/frontend/src/pages/account/shares.tsx
index b8703152d..0d98d6c0a 100644
--- a/frontend/src/pages/account/shares.tsx
+++ b/frontend/src/pages/account/shares.tsx
@@ -88,7 +88,8 @@ const MyShares = () => {
                           showShareInformationsModal(
                             modals,
                             share,
-                            config.get("general.appUrl")
+                            config.get("general.appUrl"),
+                            config.get("share.maxSize")
                           );
                         }}
                       >

From b151f17e8b0fe995f5a3190752aef67de48afca7 Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Fri, 23 Jun 2023 23:17:40 +0200
Subject: [PATCH 03/16] Adding description, disk usage

---
 .../account/showShareInformationsModal.tsx    | 74 +++++++++++--------
 1 file changed, 45 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
index f819508a7..ac46f8908 100644
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -1,4 +1,4 @@
-import {Text, Divider, Progress, Stack, Group} from '@mantine/core';
+import {Text, Divider, Progress, Stack, Group, Flex} from '@mantine/core';
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { MyShare } from "../../types/share.type";
 import moment from "moment";
@@ -12,7 +12,7 @@ const showShareInformationsModal = (
   maxShareSize: number | string
 ) => {
   const link = `${appUrl}/share/${share.id}`;
-  const shareSize = 165564769; // TODO: get share size from backend
+  const shareSize = 565564769; // TODO: get share size from backend
   if (typeof maxShareSize === "string") {
     maxShareSize = parseInt(maxShareSize);
   }
@@ -21,46 +21,62 @@ const showShareInformationsModal = (
 
     children: (
       <Stack align="stretch">
-          <Text size="sm" color="lightgray" style={{ margin: '0.5rem 0' }}>
-            <b>ID:</b> {share.id}
-          </Text>
+        <Text size="sm" color="lightgray" style={{ margin: '0.5rem 0' }}>
+          <b>ID:</b> {share.id}
+        </Text>
 
-          <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
-            <b>Creator :</b> You
-          </Text>
+        <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
+          <b>Creator :</b> You
+        </Text>
 
-          <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
-            <b>Created at :</b> {moment(share.createdAt).format("LLL")}
-          </Text>
+        <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
+          <b>Description :</b> {share.description || "No description"}
+        </Text>
 
-          <Text size="sm" color="lightgray">
-            <b>Expires at :</b> {moment(share.expiration).format("LLL")}
-          </Text>
+        <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
+          <b>Created at :</b> {moment(share.createdAt).format("LLL")}
+        </Text>
 
-          <Divider style={{ margin: '.5rem 0' }} />
+        <Text size="sm" color="lightgray">
+          <b>Expires at :</b> {moment(share.expiration).format("LLL")}
+        </Text>
 
-          <CopyTextField link={link} />
+        <Divider style={{ margin: '.5rem 0' }} />
 
-          <Divider style={{ margin: '1rem 0' }} />
+        <CopyTextField link={link} />
 
-          <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
+        <Divider style={{ margin: '1rem 0' }} />
+
+        <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
+          <span>
             <b>Size :</b> {byteToHumanSizeString(shareSize)} / {byteToHumanSizeString(maxShareSize)}
+          </span>
+
+          { /* Faire un flex pour aligner le Progress et le text à droite */}
+
+          <Flex justify="center" direction={{base: 'row'}} align="center" style={{alignItems: "center", marginTop: "1rem"}}>
+            { (shareSize / maxShareSize < 0.1) && (
+              <Text size="xs" color="lightgray" style={{ marginRight: '4px'}}>
+                {byteToHumanSizeString(shareSize)}
+              </Text>
+            ) }
             <Progress
               value={((shareSize / maxShareSize) * 100)}
-              label={byteToHumanSizeString(shareSize)}
+              label={(shareSize / maxShareSize >= 0.1) ? (byteToHumanSizeString(shareSize)) : ""}
               color="blue"
-              style={{ marginTop: '0.5rem' }}
+              style={{ width: (shareSize / maxShareSize < 0.1) ? '70%' : '80%' }}
               size="xl"
               radius="xl"
-            >
-              <Group
-                position="right">
-                <Text size="sm" color="lightgray" style={{ marginRight: '0.5rem' }}>
-                  {byteToHumanSizeString(maxShareSize)}
-                </Text>
-              </Group>
-            </Progress>
-          </Text>
+
+            />
+            <Text size="xs" color="lightgray" style={{ marginLeft: '4px'}}>
+              {byteToHumanSizeString(maxShareSize)}
+            </Text>
+          </Flex>
+
+
+
+        </Text>
 
       </Stack>
     ),

From b1523b2ac87e61b87a26519c7c7d47aeb5d03a1a Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Fri, 23 Jun 2023 23:22:24 +0200
Subject: [PATCH 04/16] Add case if the expiration is never

---
 .../src/components/account/showShareInformationsModal.tsx     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
index ac46f8908..7b79b3d9d 100644
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -38,7 +38,9 @@ const showShareInformationsModal = (
         </Text>
 
         <Text size="sm" color="lightgray">
-          <b>Expires at :</b> {moment(share.expiration).format("LLL")}
+          <b>Expires at :</b> {moment(share.expiration).unix() === 0
+                                          ? "Never"
+                                          : moment(share.expiration).format("LLL")}
         </Text>
 
         <Divider style={{ margin: '.5rem 0' }} />

From 8136ac52653cdc4a6ea750374bb5b64bf636647c Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Sat, 24 Jun 2023 15:25:36 +0200
Subject: [PATCH 05/16] Adding file size and better UI

---
 backend/src/share/dto/myShare.dto.ts          | 16 +++-
 backend/src/share/share.service.ts            |  2 +-
 .../account/showShareInformationsModal.tsx    | 81 ++++++++++---------
 frontend/src/pages/account/shares.tsx         |  2 -
 4 files changed, 56 insertions(+), 45 deletions(-)

diff --git a/backend/src/share/dto/myShare.dto.ts b/backend/src/share/dto/myShare.dto.ts
index ef29c22e0..8b75883f0 100644
--- a/backend/src/share/dto/myShare.dto.ts
+++ b/backend/src/share/dto/myShare.dto.ts
@@ -1,7 +1,13 @@
-import { Expose, plainToClass } from "class-transformer";
+import { Expose, plainToClass, Type } from "class-transformer";
 import { ShareDTO } from "./share.dto";
+import {FileDTO} from "../../file/dto/file.dto";
+import {OmitType} from "@nestjs/swagger";
 
-export class MyShareDTO extends ShareDTO {
+export class MyShareDTO extends OmitType(ShareDTO, [
+  "files",
+  "from",
+  "fromList",
+] as const) {
   @Expose()
   views: number;
 
@@ -11,6 +17,10 @@ export class MyShareDTO extends ShareDTO {
   @Expose()
   recipients: string[];
 
+  @Expose()
+  @Type(() => OmitType(FileDTO, ["share", "from"] as const))
+  files: Omit<FileDTO, "share" | "from">[];
+
   from(partial: Partial<MyShareDTO>) {
     return plainToClass(MyShareDTO, partial, { excludeExtraneousValues: true });
   }
@@ -20,4 +30,4 @@ export class MyShareDTO extends ShareDTO {
       plainToClass(MyShareDTO, part, { excludeExtraneousValues: true })
     );
   }
-}
+}
\ No newline at end of file
diff --git a/backend/src/share/share.service.ts b/backend/src/share/share.service.ts
index 43927cc72..b75218be2 100644
--- a/backend/src/share/share.service.ts
+++ b/backend/src/share/share.service.ts
@@ -195,7 +195,7 @@ export class ShareService {
       orderBy: {
         expiration: "desc",
       },
-      include: { recipients: true },
+      include: { recipients: true, files: true },
     });
 
     return shares.map((share) => {
diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
index 7b79b3d9d..8fce7dd59 100644
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -4,6 +4,7 @@ import { MyShare } from "../../types/share.type";
 import moment from "moment";
 import {byteToHumanSizeString} from "../../utils/fileSize.util";
 import CopyTextField from "../upload/CopyTextField";
+import { FileMetaData} from "../../types/File.type";
 
 const showShareInformationsModal = (
   modals: ModalsContextProps,
@@ -11,75 +12,77 @@ const showShareInformationsModal = (
   appUrl: string,
   maxShareSize: number | string
 ) => {
+
   const link = `${appUrl}/share/${share.id}`;
-  const shareSize = 565564769; // TODO: get share size from backend
-  if (typeof maxShareSize === "string") {
-    maxShareSize = parseInt(maxShareSize);
-  }
+
+  let shareSize: number = 0;
+  for(let file of (share.files) as FileMetaData[]) shareSize += parseInt(file.size);
+
+  if (typeof maxShareSize === "string") maxShareSize = parseInt(maxShareSize);
+
+  const formattedShareSize = byteToHumanSizeString(shareSize);
+  const formattedMaxShareSize = byteToHumanSizeString(maxShareSize);
+  const shareProgress = (shareSize / maxShareSize) * 100;
+
+  const formattedCreatedAt = moment(share.createdAt).format("LLL");
+  const formattedExpiration = moment(share.expiration).unix() === 0 ? "Never"
+    : moment(share.expiration).format("LLL");
+
   return modals.openModal({
     title: "Share informations",
 
     children: (
-      <Stack align="stretch">
-        <Text size="sm" color="lightgray" style={{ margin: '0.5rem 0' }}>
+      <Stack align="stretch" spacing="xs">
+        <Text size="sm" color="lightgray">
           <b>ID:</b> {share.id}
         </Text>
 
-        <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
-          <b>Creator :</b> You
+        <Text size="sm" color="lightgray">
+          <b>Creator:</b> You
         </Text>
 
-        <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
-          <b>Description :</b> {share.description || "No description"}
+        <Text size="sm" color="lightgray">
+          <b>Description:</b> {share.description || "No description"}
         </Text>
 
-        <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
-          <b>Created at :</b> {moment(share.createdAt).format("LLL")}
+        <Text size="sm" color="lightgray">
+          <b>Created at:</b> {formattedCreatedAt}
         </Text>
 
         <Text size="sm" color="lightgray">
-          <b>Expires at :</b> {moment(share.expiration).unix() === 0
-                                          ? "Never"
-                                          : moment(share.expiration).format("LLL")}
+          <b>Expires at:</b> {formattedExpiration}
         </Text>
 
-        <Divider style={{ margin: '.5rem 0' }} />
+        <Divider />
 
         <CopyTextField link={link} />
 
-        <Divider style={{ margin: '1rem 0' }} />
-
-        <Text size="sm" color="lightgray" style={{ marginBottom: '0.5rem' }}>
-          <span>
-            <b>Size :</b> {byteToHumanSizeString(shareSize)} / {byteToHumanSizeString(maxShareSize)}
-          </span>
+        <Divider />
 
-          { /* Faire un flex pour aligner le Progress et le text à droite */}
+        <Flex align="center" justify="space-between" style={{ marginTop: "1rem" }}>
+          <Text size="sm" color="lightgray">
+            <b>Size:</b> {formattedShareSize} / {formattedMaxShareSize} ({(shareProgress.toFixed(1))}%)
+          </Text>
 
-          <Flex justify="center" direction={{base: 'row'}} align="center" style={{alignItems: "center", marginTop: "1rem"}}>
-            { (shareSize / maxShareSize < 0.1) && (
-              <Text size="xs" color="lightgray" style={{ marginRight: '4px'}}>
-                {byteToHumanSizeString(shareSize)}
+          <Flex align="center">
+            {shareSize / maxShareSize < 0.1 && (
+              <Text size="xs" color="lightgray" style={{ marginRight: '4px' }}>
+                {formattedShareSize}
               </Text>
-            ) }
+            )}
             <Progress
-              value={((shareSize / maxShareSize) * 100)}
-              label={(shareSize / maxShareSize >= 0.1) ? (byteToHumanSizeString(shareSize)) : ""}
+              value={shareProgress}
+              label={shareSize / maxShareSize >= 0.1 ? formattedShareSize : ""}
               color="blue"
-              style={{ width: (shareSize / maxShareSize < 0.1) ? '70%' : '80%' }}
+              style={{ width: shareSize / maxShareSize < 0.1 ? '70%' : '80%' }}
               size="xl"
               radius="xl"
-
             />
-            <Text size="xs" color="lightgray" style={{ marginLeft: '4px'}}>
-              {byteToHumanSizeString(maxShareSize)}
+            <Text size="xs" color="lightgray" style={{ marginLeft: '4px' }}>
+              {formattedMaxShareSize}
             </Text>
           </Flex>
-
-
-
-        </Text>
-
+        </Flex>
       </Stack>
     ),
   });
diff --git a/frontend/src/pages/account/shares.tsx b/frontend/src/pages/account/shares.tsx
index 0d98d6c0a..b85b6fd1c 100644
--- a/frontend/src/pages/account/shares.tsx
+++ b/frontend/src/pages/account/shares.tsx
@@ -38,8 +38,6 @@ const MyShares = () => {
 
   if (!shares) return <CenterLoader />;
 
-  console.log(shares);
-
   return (
     <>
       <Meta title="My shares" />

From e83ceeee904ebcf585b483751d7f6a66cc0b63de Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Sat, 24 Jun 2023 15:29:20 +0200
Subject: [PATCH 06/16] UI changes to Information Modal

---
 .../account/showShareInformationsModal.tsx    | 43 +++++++++----------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
index 8fce7dd59..0f34b105d 100644
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -32,7 +32,7 @@ const showShareInformationsModal = (
     title: "Share informations",
 
     children: (
-      <Stack align="stretch" spacing="xs">
+      <Stack align="stretch" spacing="md">
         <Text size="sm" color="lightgray">
           <b>ID:</b> {share.id}
         </Text>
@@ -59,29 +59,28 @@ const showShareInformationsModal = (
 
         <Divider />
 
-        <Flex align="center" justify="space-between" style={{ marginTop: "1rem" }}>
-          <Text size="sm" color="lightgray">
-            <b>Size:</b> {formattedShareSize} / {formattedMaxShareSize} ({(shareProgress.toFixed(1))}%)
-          </Text>
+        <Text size="sm" color="lightgray">
+          <b>Size:</b> {formattedShareSize} / {formattedMaxShareSize} ({(shareProgress.toFixed(1))}%)
+        </Text>
 
-          <Flex align="center">
-            {shareSize / maxShareSize < 0.1 && (
-              <Text size="xs" color="lightgray" style={{ marginRight: '4px' }}>
-                {formattedShareSize}
-              </Text>
-            )}
-            <Progress
-              value={shareProgress}
-              label={shareSize / maxShareSize >= 0.1 ? formattedShareSize : ""}
-              color="blue"
-              style={{ width: shareSize / maxShareSize < 0.1 ? '70%' : '80%' }}
-              size="xl"
-              radius="xl"
-            />
-            <Text size="xs" color="lightgray" style={{ marginLeft: '4px' }}>
-              {formattedMaxShareSize}
+        <Flex align="center" justify="center">
+          {shareSize / maxShareSize < 0.1 && (
+            <Text size="xs" color="lightgray" style={{ marginRight: '4px' }}>
+              {formattedShareSize}
             </Text>
-          </Flex>
+          )}
+          <Progress
+            value={shareProgress}
+            label={shareSize / maxShareSize >= 0.1 ? formattedShareSize : ""}
+
+            color="blue"
+            style={{ width: shareSize / maxShareSize < 0.1 ? '70%' : '80%' }}
+            size="xl"
+            radius="xl"
+          />
+          <Text size="xs" color="lightgray" style={{ marginLeft: '4px' }}>
+            {formattedMaxShareSize}
+          </Text>
         </Flex>
       </Stack>
     ),

From 4308e57809371f5063ab3397ff8a74fb934c1823 Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Sat, 24 Jun 2023 15:51:15 +0200
Subject: [PATCH 07/16] Adding description to the My Shares page

---
 frontend/src/pages/account/shares.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/pages/account/shares.tsx b/frontend/src/pages/account/shares.tsx
index b85b6fd1c..bf9771463 100644
--- a/frontend/src/pages/account/shares.tsx
+++ b/frontend/src/pages/account/shares.tsx
@@ -61,6 +61,7 @@ const MyShares = () => {
             <thead>
               <tr>
                 <th>Name</th>
+                <th>Description</th>
                 <th>Visitors</th>
                 <th>Expires at</th>
                 <th></th>
@@ -70,6 +71,7 @@ const MyShares = () => {
               {shares.map((share) => (
                 <tr key={share.id}>
                   <td>{share.id}</td>
+                  <td>{share.description || ""}</td>
                   <td>{share.views}</td>
                   <td>
                     {moment(share.expiration).unix() === 0

From eaa9140868651cff4223760fdce5fa97016139b3 Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Sat, 24 Jun 2023 16:00:52 +0200
Subject: [PATCH 08/16] Ran format

---
 .../account/showShareInformationsModal.tsx    | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
index 0f34b105d..c047baddc 100644
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -1,10 +1,10 @@
-import {Text, Divider, Progress, Stack, Group, Flex} from '@mantine/core';
+import { Text, Divider, Progress, Stack, Group, Flex } from "@mantine/core";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { MyShare } from "../../types/share.type";
 import moment from "moment";
-import {byteToHumanSizeString} from "../../utils/fileSize.util";
+import { byteToHumanSizeString } from "../../utils/fileSize.util";
 import CopyTextField from "../upload/CopyTextField";
-import { FileMetaData} from "../../types/File.type";
+import { FileMetaData } from "../../types/File.type";
 
 const showShareInformationsModal = (
   modals: ModalsContextProps,
@@ -12,11 +12,11 @@ const showShareInformationsModal = (
   appUrl: string,
   maxShareSize: number | string
 ) => {
-
   const link = `${appUrl}/share/${share.id}`;
 
   let shareSize: number = 0;
-  for(let file of (share.files) as FileMetaData[]) shareSize += parseInt(file.size);
+  for (let file of share.files as FileMetaData[])
+    shareSize += parseInt(file.size);
 
   if (typeof maxShareSize === "string") maxShareSize = parseInt(maxShareSize);
 
@@ -25,8 +25,10 @@ const showShareInformationsModal = (
   const shareProgress = (shareSize / maxShareSize) * 100;
 
   const formattedCreatedAt = moment(share.createdAt).format("LLL");
-  const formattedExpiration = moment(share.expiration).unix() === 0 ? "Never"
-    : moment(share.expiration).format("LLL");
+  const formattedExpiration =
+    moment(share.expiration).unix() === 0
+      ? "Never"
+      : moment(share.expiration).format("LLL");
 
   return modals.openModal({
     title: "Share informations",
@@ -60,25 +62,25 @@ const showShareInformationsModal = (
         <Divider />
 
         <Text size="sm" color="lightgray">
-          <b>Size:</b> {formattedShareSize} / {formattedMaxShareSize} ({(shareProgress.toFixed(1))}%)
+          <b>Size:</b> {formattedShareSize} / {formattedMaxShareSize} (
+          {shareProgress.toFixed(1)}%)
         </Text>
 
         <Flex align="center" justify="center">
           {shareSize / maxShareSize < 0.1 && (
-            <Text size="xs" color="lightgray" style={{ marginRight: '4px' }}>
+            <Text size="xs" color="lightgray" style={{ marginRight: "4px" }}>
               {formattedShareSize}
             </Text>
           )}
           <Progress
             value={shareProgress}
             label={shareSize / maxShareSize >= 0.1 ? formattedShareSize : ""}
-
             color="blue"
-            style={{ width: shareSize / maxShareSize < 0.1 ? '70%' : '80%' }}
+            style={{ width: shareSize / maxShareSize < 0.1 ? "70%" : "80%" }}
             size="xl"
             radius="xl"
           />
-          <Text size="xs" color="lightgray" style={{ marginLeft: '4px' }}>
+          <Text size="xs" color="lightgray" style={{ marginLeft: "4px" }}>
             {formattedMaxShareSize}
           </Text>
         </Flex>

From 2c81d2490648db43c28140077a3ee5104d949269 Mon Sep 17 00:00:00 2001
From: pierrbt <contact@veagle.fr>
Date: Sun, 25 Jun 2023 21:06:37 +0200
Subject: [PATCH 09/16] Remove string type

Co-authored-by: Elias Schneider <login@eliasschneider.com>
---
 frontend/src/components/account/showShareInformationsModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
index c047baddc..b1343f53a 100644
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -10,7 +10,7 @@ const showShareInformationsModal = (
   modals: ModalsContextProps,
   share: MyShare,
   appUrl: string,
-  maxShareSize: number | string
+  maxShareSize: number
 ) => {
   const link = `${appUrl}/share/${share.id}`;
 

From a0c493e80e35e52b949ddb503b36c3a104190024 Mon Sep 17 00:00:00 2001
From: pierrbt <contact@veagle.fr>
Date: Sun, 25 Jun 2023 21:06:53 +0200
Subject: [PATCH 10/16] Remove string type check

Co-authored-by: Elias Schneider <login@eliasschneider.com>
---
 frontend/src/components/account/showShareInformationsModal.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
index b1343f53a..0b1f56eed 100644
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -18,7 +18,6 @@ const showShareInformationsModal = (
   for (let file of share.files as FileMetaData[])
     shareSize += parseInt(file.size);
 
-  if (typeof maxShareSize === "string") maxShareSize = parseInt(maxShareSize);
 
   const formattedShareSize = byteToHumanSizeString(shareSize);
   const formattedMaxShareSize = byteToHumanSizeString(maxShareSize);

From 0db42f63ee6f311f5381f9d4bd5bb6b793850f57 Mon Sep 17 00:00:00 2001
From: pierrbt <contact@veagle.fr>
Date: Sun, 25 Jun 2023 21:07:09 +0200
Subject: [PATCH 11/16] Remove string type conversion

Co-authored-by: Elias Schneider <login@eliasschneider.com>
---
 frontend/src/pages/account/shares.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/account/shares.tsx b/frontend/src/pages/account/shares.tsx
index bf9771463..eed3d2b90 100644
--- a/frontend/src/pages/account/shares.tsx
+++ b/frontend/src/pages/account/shares.tsx
@@ -89,7 +89,7 @@ const MyShares = () => {
                             modals,
                             share,
                             config.get("general.appUrl"),
-                            config.get("share.maxSize")
+                            parseInt(config.get("share.maxSize"))
                           );
                         }}
                       >

From b8da2e392dfce9df540cfa06c1eef88485c73a37 Mon Sep 17 00:00:00 2001
From: pierrbt <contact@veagle.fr>
Date: Sun, 25 Jun 2023 21:07:54 +0200
Subject: [PATCH 12/16] Variable name changes

Co-authored-by: Elias Schneider <login@eliasschneider.com>
---
 frontend/src/components/account/showShareInformationsModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
index 0b1f56eed..7ca1a2561 100644
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -21,7 +21,7 @@ const showShareInformationsModal = (
 
   const formattedShareSize = byteToHumanSizeString(shareSize);
   const formattedMaxShareSize = byteToHumanSizeString(maxShareSize);
-  const shareProgress = (shareSize / maxShareSize) * 100;
+  const shareSizeProgress = (shareSize / maxShareSize) * 100;
 
   const formattedCreatedAt = moment(share.createdAt).format("LLL");
   const formattedExpiration =

From e69c186b050222b4ffe3c3e4e988d57998f6ef22 Mon Sep 17 00:00:00 2001
From: pierrbt <contact@veagle.fr>
Date: Sun, 25 Jun 2023 21:08:16 +0200
Subject: [PATCH 13/16] Remove color

Co-authored-by: Elias Schneider <login@eliasschneider.com>
---
 frontend/src/components/account/showShareInformationsModal.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
index 7ca1a2561..8e222f670 100644
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -74,7 +74,6 @@ const showShareInformationsModal = (
           <Progress
             value={shareProgress}
             label={shareSize / maxShareSize >= 0.1 ? formattedShareSize : ""}
-            color="blue"
             style={{ width: shareSize / maxShareSize < 0.1 ? "70%" : "80%" }}
             size="xl"
             radius="xl"

From d128d949e49f9919d31f62ec669e98bdcfe5fefc Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Sun, 25 Jun 2023 21:28:22 +0200
Subject: [PATCH 14/16] Requested changes made

---
 .../components/account/showShareInformationsModal.tsx |  8 ++------
 frontend/src/pages/account/shares.tsx                 | 11 ++++++++++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
index 8e222f670..bf44605c2 100644
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -38,10 +38,6 @@ const showShareInformationsModal = (
           <b>ID:</b> {share.id}
         </Text>
 
-        <Text size="sm" color="lightgray">
-          <b>Creator:</b> You
-        </Text>
-
         <Text size="sm" color="lightgray">
           <b>Description:</b> {share.description || "No description"}
         </Text>
@@ -62,7 +58,7 @@ const showShareInformationsModal = (
 
         <Text size="sm" color="lightgray">
           <b>Size:</b> {formattedShareSize} / {formattedMaxShareSize} (
-          {shareProgress.toFixed(1)}%)
+          {shareSizeProgress.toFixed(1)}%)
         </Text>
 
         <Flex align="center" justify="center">
@@ -72,7 +68,7 @@ const showShareInformationsModal = (
             </Text>
           )}
           <Progress
-            value={shareProgress}
+            value={shareSizeProgress}
             label={shareSize / maxShareSize >= 0.1 ? formattedShareSize : ""}
             style={{ width: shareSize / maxShareSize < 0.1 ? "70%" : "80%" }}
             size="xl"
diff --git a/frontend/src/pages/account/shares.tsx b/frontend/src/pages/account/shares.tsx
index eed3d2b90..b910ca2c2 100644
--- a/frontend/src/pages/account/shares.tsx
+++ b/frontend/src/pages/account/shares.tsx
@@ -71,7 +71,16 @@ const MyShares = () => {
               {shares.map((share) => (
                 <tr key={share.id}>
                   <td>{share.id}</td>
-                  <td>{share.description || ""}</td>
+                  <td
+                    style={{
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      maxWidth: "300px",
+                    }}
+                  >
+                    {share.description || ""}
+                  </td>
                   <td>{share.views}</td>
                   <td>
                     {moment(share.expiration).unix() === 0

From 6e7361326c4bc792f5951d7a41c49684b71740ed Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Sun, 25 Jun 2023 21:29:22 +0200
Subject: [PATCH 15/16] Ran format

---
 frontend/src/components/account/showShareInformationsModal.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/account/showShareInformationsModal.tsx b/frontend/src/components/account/showShareInformationsModal.tsx
index bf44605c2..6ec4064bc 100644
--- a/frontend/src/components/account/showShareInformationsModal.tsx
+++ b/frontend/src/components/account/showShareInformationsModal.tsx
@@ -18,7 +18,6 @@ const showShareInformationsModal = (
   for (let file of share.files as FileMetaData[])
     shareSize += parseInt(file.size);
 
-
   const formattedShareSize = byteToHumanSizeString(shareSize);
   const formattedMaxShareSize = byteToHumanSizeString(maxShareSize);
   const shareSizeProgress = (shareSize / maxShareSize) * 100;

From b214c1d2ba0507a34fe24683bb7d521a4c613034 Mon Sep 17 00:00:00 2001
From: pierrbt <pierre08bt@gmx.co.uk>
Date: Sun, 25 Jun 2023 22:52:21 +0200
Subject: [PATCH 16/16] Adding MediaQuery

---
 frontend/src/pages/account/shares.tsx | 28 ++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/account/shares.tsx b/frontend/src/pages/account/shares.tsx
index b910ca2c2..c54333dee 100644
--- a/frontend/src/pages/account/shares.tsx
+++ b/frontend/src/pages/account/shares.tsx
@@ -4,6 +4,7 @@ import {
   Button,
   Center,
   Group,
+  MediaQuery,
   Space,
   Stack,
   Table,
@@ -61,7 +62,10 @@ const MyShares = () => {
             <thead>
               <tr>
                 <th>Name</th>
-                <th>Description</th>
+                <MediaQuery smallerThan="md" styles={{ display: "none" }}>
+                  <th>Description</th>
+                </MediaQuery>
+
                 <th>Visitors</th>
                 <th>Expires at</th>
                 <th></th>
@@ -71,16 +75,18 @@ const MyShares = () => {
               {shares.map((share) => (
                 <tr key={share.id}>
                   <td>{share.id}</td>
-                  <td
-                    style={{
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap",
-                      maxWidth: "300px",
-                    }}
-                  >
-                    {share.description || ""}
-                  </td>
+                  <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
+                    <td
+                      style={{
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        maxWidth: "300px",
+                      }}
+                    >
+                      {share.description || ""}
+                    </td>
+                  </MediaQuery>
                   <td>{share.views}</td>
                   <td>
                     {moment(share.expiration).unix() === 0