add share size to list

* New translations en-us.ts (German)

* New translations en-us.ts (Spanish)

* New translations en-us.ts (French)

* New translations en-us.ts (Danish)

* New translations en-us.ts (Greek)

* New translations en-us.ts (Finnish)

* New translations en-us.ts (Hungarian)

* New translations en-us.ts (Italian)

* New translations en-us.ts (Japanese)

* New translations en-us.ts (Polish)

* New translations en-us.ts (Russian)

* New translations en-us.ts (Slovenian)

* New translations en-us.ts (Serbian (Cyrillic))

* New translations en-us.ts (Swedish)

* New translations en-us.ts (Ukrainian)

* New translations en-us.ts (Chinese Simplified)

* New translations en-us.ts (Chinese Traditional)

* New translations en-us.ts (Portuguese, Brazilian)

* New translations en-us.ts (Thai)

* New translations en-us.ts (Dutch, Belgium)

* New translations en-us.ts (Arabic, Egypt)

backend/prisma/migrations/20240501154254_share_name_property/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Share" ADD COLUMN "name" TEXT;

backend/prisma/schema.prisma

@@ -75,6 +75,7 @@ model Share {
   id        String   @id @default(uuid())
   createdAt DateTime @default(now())
 
+  name          String?
   uploadLocked  Boolean  @default(false)
   isZipReady    Boolean  @default(false)
   views         Int      @default(0)

backend/src/reverseShare/dto/reverseShareTokenWithShares.ts

@@ -13,7 +13,7 @@ export class ReverseShareTokenWithShares extends OmitType(ReverseShareDTO, [
   @Type(() => OmitType(MyShareDTO, ["recipients", "hasPassword"] as const))
   shares: Omit<
     MyShareDTO,
-    "recipients" | "files" | "from" | "fromList" | "hasPassword"
+    "recipients" | "files" | "from" | "fromList" | "hasPassword" | "size"
   >[];
 
   @Expose()

backend/src/share/dto/adminShare.dto.ts

@@ -0,0 +1,27 @@
+import { OmitType } from "@nestjs/swagger";
+import { Expose, plainToClass } from "class-transformer";
+import { ShareDTO } from "./share.dto";
+
+export class AdminShareDTO extends OmitType(ShareDTO, [
+  "files",
+  "from",
+  "fromList",
+] as const) {
+  @Expose()
+  views: number;
+
+  @Expose()
+  createdAt: Date;
+
+  from(partial: Partial<AdminShareDTO>) {
+    return plainToClass(AdminShareDTO, partial, {
+      excludeExtraneousValues: true,
+    });
+  }
+
+  fromList(partial: Partial<AdminShareDTO>[]) {
+    return partial.map((part) =>
+      plainToClass(AdminShareDTO, part, { excludeExtraneousValues: true }),
+    );
+  }
+}

backend/src/share/dto/createShare.dto.ts

@@ -18,6 +18,10 @@ export class CreateShareDTO {
   @Length(3, 50)
   id: string;
 
+  @Length(3, 30)
+  @IsOptional()
+  name: string;
+
   @IsString()
   expiration: string;
 

backend/src/share/dto/share.dto.ts

@@ -6,6 +6,9 @@ export class ShareDTO {
   @Expose()
   id: string;
 
+  @Expose()
+  name?: string;
+
   @Expose()
   expiration: Date;
 
@@ -23,6 +26,9 @@ export class ShareDTO {
   @Expose()
   hasPassword: boolean;
 
+  @Expose()
+  size: number;
+
   from(partial: Partial<ShareDTO>) {
     return plainToClass(ShareDTO, partial, { excludeExtraneousValues: true });
   }

backend/src/share/share.controller.ts

@@ -26,6 +26,7 @@ import { ShareOwnerGuard } from "./guard/shareOwner.guard";
 import { ShareSecurityGuard } from "./guard/shareSecurity.guard";
 import { ShareTokenSecurity } from "./guard/shareTokenSecurity.guard";
 import { ShareService } from "./share.service";
+import { AdminShareDTO } from "./dto/adminShare.dto";
 @Controller("shares")
 export class ShareController {
   constructor(private shareService: ShareService) {}
@@ -33,9 +34,7 @@ export class ShareController {
   @Get("all")
   @UseGuards(JwtGuard, AdministratorGuard)
   async getAllShares() {
-    return new MyShareDTO().fromList(
-      await this.shareService.getShares(),
-    );
+    return new AdminShareDTO().fromList(await this.shareService.getShares());
   }
 
   @Get()

backend/src/share/share.service.ts

@@ -199,13 +199,13 @@ export class ShareService {
       orderBy: {
         expiration: "desc",
       },
-      include: { recipients: true, files: true, creator: true },
+      include: { files: true, creator: true },
     });
 
     return shares.map((share) => {
       return {
         ...share,
-        recipients: share.recipients.map((recipients) => recipients.email),
+        size: share.files.reduce((acc, file) => acc + parseInt(file.size), 0),
       };
     });
   }

backend/test/newman-system-tests.json

@@ -432,7 +432,7 @@
 											"    const responseBody = pm.response.json();",
 											"    pm.expect(responseBody).to.have.property(\"id\")",
 											"    pm.expect(responseBody).to.have.property(\"expiration\")",
-											"    pm.expect(Object.keys(responseBody).length).be.equal(3)",
+											"    pm.expect(Object.keys(responseBody).length).be.equal(4)",
 											"});",
 											""
 										],
@@ -626,7 +626,7 @@
 											"    const responseBody = pm.response.json();",
 											"    pm.expect(responseBody).to.have.property(\"id\")",
 											"    pm.expect(responseBody).to.have.property(\"expiration\")",
-											"    pm.expect(Object.keys(responseBody).length).be.equal(3)",
+											"    pm.expect(Object.keys(responseBody).length).be.equal(4)",
 											"});",
 											""
 										],

frontend/src/components/account/showShareInformationsModal.tsx

@@ -17,13 +17,9 @@ const showShareInformationsModal = (
   const t = translateOutsideContext();
   const link = `${appUrl}/s/${share.id}`;
 
-  let shareSize: number = 0;
-  for (let file of share.files as FileMetaData[])
-    shareSize += parseInt(file.size);
-
-  const formattedShareSize = byteToHumanSizeString(shareSize);
+  const formattedShareSize = byteToHumanSizeString(share.size);
   const formattedMaxShareSize = byteToHumanSizeString(maxShareSize);
-  const shareSizeProgress = (shareSize / maxShareSize) * 100;
+  const shareSizeProgress = (share.size / maxShareSize) * 100;
 
   const formattedCreatedAt = moment(share.createdAt).format("LLL");
   const formattedExpiration =
@@ -42,12 +38,18 @@ const showShareInformationsModal = (
           </b>
           {share.id}
         </Text>
+        <Text size="sm">
+          <b>
+            <FormattedMessage id="account.shares.table.name" />:{" "}
+          </b>
+          {share.name || "-"}
+        </Text>
 
         <Text size="sm">
           <b>
             <FormattedMessage id="account.shares.table.description" />:{" "}
           </b>
-          {share.description || "No description"}
+          {share.description || "-"}
         </Text>
 
         <Text size="sm">
@@ -75,15 +77,15 @@ const showShareInformationsModal = (
         </Text>
 
         <Flex align="center" justify="center">
-          {shareSize / maxShareSize < 0.1 && (
+          {share.size / maxShareSize < 0.1 && (
             <Text size="xs" style={{ marginRight: "4px" }}>
               {formattedShareSize}
             </Text>
           )}
           <Progress
             value={shareSizeProgress}
-            label={shareSize / maxShareSize >= 0.1 ? formattedShareSize : ""}
-            style={{ width: shareSize / maxShareSize < 0.1 ? "70%" : "80%" }}
+            label={share.size / maxShareSize >= 0.1 ? formattedShareSize : ""}
+            style={{ width: share.size / maxShareSize < 0.1 ? "70%" : "80%" }}
             size="xl"
             radius="xl"
           />

frontend/src/components/admin/shares/ManageShareTable.tsx

@@ -1,23 +1,29 @@
-import { ActionIcon, Box, Group, MediaQuery, Skeleton, Table } from "@mantine/core";
+import {
+  ActionIcon,
+  Box,
+  Group,
+  MediaQuery,
+  Skeleton,
+  Table,
+} from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
 import moment from "moment";
 import { TbLink, TbTrash } from "react-icons/tb";
-import showShareLinkModal from "../../account/showShareLinkModal";
+import { FormattedMessage } from "react-intl";
 import useConfig from "../../../hooks/config.hook";
 import useTranslate from "../../../hooks/useTranslate.hook";
 import { MyShare } from "../../../types/share.type";
-import { FormattedMessage, useIntl } from "react-intl";
+import { byteToHumanSizeString } from "../../../utils/fileSize.util";
 import toast from "../../../utils/toast.util";
+import showShareLinkModal from "../../account/showShareLinkModal";
 
 const ManageShareTable = ({
   shares,
-  getShares,
   deleteShare,
   isLoading,
 }: {
   shares: MyShare[];
-  getShares: () => void;
   deleteShare: (share: MyShare) => void;
   isLoading: boolean;
 }) => {
@@ -31,20 +37,21 @@ const ManageShareTable = ({
       <Table verticalSpacing="sm">
         <thead>
           <tr>
+            <th>
+              <FormattedMessage id="account.shares.table.id" />
+            </th>
             <th>
               <FormattedMessage id="account.shares.table.name" />
             </th>
-            <MediaQuery smallerThan="md" styles={{ display: "none" }}>
-              <th>
-                <FormattedMessage id="account.shares.table.description" />
-              </th>
-            </MediaQuery>
             <th>
               <FormattedMessage id="admin.shares.table.username" />
             </th>
             <th>
               <FormattedMessage id="account.shares.table.visitors" />
             </th>
+            <th>
+              <FormattedMessage id="account.shares.table.size" />
+            </th>
             <th>
               <FormattedMessage id="account.shares.table.expiresAt" />
             </th>
@@ -55,62 +62,52 @@ const ManageShareTable = ({
           {isLoading
             ? skeletonRows
             : shares.map((share) => (
-              <tr key={share.id}>
-                <td>{share.id}</td>
-                <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
-                  <td
-                    style={{
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap",
-                      maxWidth: "300px",
-                    }}
-                  >
-                    {share.description || ""}
+                <tr key={share.id}>
+                  <td>{share.id}</td>
+                  <td>{share.name}</td>
+                  <td>{share.creator.username}</td>
+                  <td>{share.views}</td>
+                  <td>{byteToHumanSizeString(share.size)}</td>
+                  <td>
+                    {moment(share.expiration).unix() === 0
+                      ? "Never"
+                      : moment(share.expiration).format("LLL")}
                   </td>
-                </MediaQuery>
-                <td>{share.creator.username}</td>
-                <td>{share.views}</td>
-                <td>
-                  {moment(share.expiration).unix() === 0
-                    ? "Never"
-                    : moment(share.expiration).format("LLL")}
-                </td>
-                <td>
-                  <Group position="right">
-                    <ActionIcon
-                      color="victoria"
-                      variant="light"
-                      size={25}
-                      onClick={() => {
-                        if (window.isSecureContext) {
-                          clipboard.copy(
-                            `${config.get("general.appUrl")}/s/${share.id}`,
-                          );
-                          toast.success(t("common.notify.copied"));
-                        } else {
-                          showShareLinkModal(
-                            modals,
-                            share.id,
-                            config.get("general.appUrl"),
-                          );
-                        }
-                      }}
-                    >
-                      <TbLink />
-                    </ActionIcon>
-                    <ActionIcon
-                      variant="light"
-                      color="red"
-                      size="sm"
-                      onClick={() => deleteShare(share)}
-                    >
-                      <TbTrash />
-                    </ActionIcon>
-                  </Group>
-                </td>
-              </tr>
-            ))}
+                  <td>
+                    <Group position="right">
+                      <ActionIcon
+                        color="victoria"
+                        variant="light"
+                        size={25}
+                        onClick={() => {
+                          if (window.isSecureContext) {
+                            clipboard.copy(
+                              `${config.get("general.appUrl")}/s/${share.id}`,
+                            );
+                            toast.success(t("common.notify.copied"));
+                          } else {
+                            showShareLinkModal(
+                              modals,
+                              share.id,
+                              config.get("general.appUrl"),
+                            );
+                          }
+                        }}
+                      >
+                        <TbLink />
+                      </ActionIcon>
+                      <ActionIcon
+                        variant="light"
+                        color="red"
+                        size="sm"
+                        onClick={() => deleteShare(share)}
+                      >
+                        <TbTrash />
+                      </ActionIcon>
+                    </Group>
+                  </td>
+                </tr>
+              ))}
         </tbody>
       </Table>
     </Box>

frontend/src/components/upload/modals/showCreateUploadModal.tsx

@@ -92,11 +92,16 @@ const CreateUploadModalBody = ({
       .matches(new RegExp("^[a-zA-Z0-9_-]*$"), {
         message: t("upload.modal.link.error.invalid"),
       }),
+    name: yup
+      .string()
+      .transform((value) => value || undefined)
+      .min(3, t("common.error.too-short", { length: 3 }))
+      .max(30, t("common.error.too-long", { length: 30 })),
     password: yup
       .string()
       .transform((value) => value || undefined)
-      .min(3)
-      .max(30),
+      .min(3, t("common.error.too-short", { length: 3 }))
+      .max(30, t("common.error.too-long", { length: 30 })),
     maxViews: yup
       .number()
       .transform((value) => value || undefined)
@@ -105,6 +110,7 @@ const CreateUploadModalBody = ({
 
   const form = useForm({
     initialValues: {
+      name: undefined,
       link: generatedLink,
       recipients: [] as string[],
       password: undefined,
@@ -154,6 +160,7 @@ const CreateUploadModalBody = ({
       uploadCallback(
         {
           id: values.link,
+          name: values.name,
           expiration: expirationString,
           recipients: values.recipients,
           description: values.description,
@@ -308,14 +315,21 @@ const CreateUploadModalBody = ({
           <Accordion>
             <Accordion.Item value="description" sx={{ borderBottom: "none" }}>
               <Accordion.Control>
-                <FormattedMessage id="upload.modal.accordion.description.title" />
+                <FormattedMessage id="upload.modal.accordion.name-and-description.title" />
               </Accordion.Control>
               <Accordion.Panel>
                 <Stack align="stretch">
+                  <TextInput
+                    variant="filled"
+                    placeholder={t(
+                      "upload.modal.accordion.name-and-description.name.placeholder",
+                    )}
+                    {...form.getInputProps("name")}
+                  />
                   <Textarea
                     variant="filled"
                     placeholder={t(
-                      "upload.modal.accordion.description.placeholder",
+                      "upload.modal.accordion.name-and-description.description.placeholder",
                     )}
                     {...form.getInputProps("description")}
                   />

frontend/src/i18n/translations/ar-EG.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Months",
   "upload.modal.expires.year-singular": "Year",
   "upload.modal.expires.year-plural": "Years",
-  "upload.modal.accordion.description.title": "Description",
-  "upload.modal.accordion.description.placeholder": "Note for the recipients of this share",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Email recipients",
   "upload.modal.accordion.email.placeholder": "Enter email recipients",
   "upload.modal.accordion.email.invalid-email": "Invalid email address",

frontend/src/i18n/translations/da-DK.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Måneder",
   "upload.modal.expires.year-singular": "År",
   "upload.modal.expires.year-plural": "År",
-  "upload.modal.accordion.description.title": "Beskrivelse",
-  "upload.modal.accordion.description.placeholder": "Bemærkning til modtagerne af dette share",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "E-mail modtagere",
   "upload.modal.accordion.email.placeholder": "Indtast e-mail modtagere",
   "upload.modal.accordion.email.invalid-email": "Ugyldig e-mailadresse",

frontend/src/i18n/translations/de-DE.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Monate",
   "upload.modal.expires.year-singular": "Jahr",
   "upload.modal.expires.year-plural": "Year",
-  "upload.modal.accordion.description.title": "Beschreibung",
-  "upload.modal.accordion.description.placeholder": "Hinweis für die Empfänger dieser Freigabe",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Email Empfänger",
   "upload.modal.accordion.email.placeholder": "Email der Empfänger eingeben",
   "upload.modal.accordion.email.invalid-email": "Ungültige Emailadresse",

frontend/src/i18n/translations/el-GR.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Μήνες",
   "upload.modal.expires.year-singular": "Έτος",
   "upload.modal.expires.year-plural": "Έτη",
-  "upload.modal.accordion.description.title": "Περιγραφή",
-  "upload.modal.accordion.description.placeholder": "Σημείωση για τους παραλήπτες αυτής της κοινοποίησης",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Αποδέκτες email",
   "upload.modal.accordion.email.placeholder": "Εισάγετε αποδέκτες email",
   "upload.modal.accordion.email.invalid-email": "Μη έγκυρη διεύθυνση e-mail",

frontend/src/i18n/translations/en-US.ts

@@ -321,8 +321,9 @@ export default {
   "upload.modal.expires.year-singular": "Year",
   "upload.modal.expires.year-plural": "Years",
 
-  "upload.modal.accordion.description.title": "Description",
-  "upload.modal.accordion.description.placeholder":
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder":
     "Note for the recipients of this share",
 
   "upload.modal.accordion.email.title": "Email recipients",

frontend/src/i18n/translations/es-ES.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Meses",
   "upload.modal.expires.year-singular": "Año",
   "upload.modal.expires.year-plural": "Años",
-  "upload.modal.accordion.description.title": "Descripción",
-  "upload.modal.accordion.description.placeholder": "Nota para los destinatarios de este compartido",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Correo de los destinatarios",
   "upload.modal.accordion.email.placeholder": "Ingresa los correos de los destinatarios",
   "upload.modal.accordion.email.invalid-email": "Dirección de correo inválida",

frontend/src/i18n/translations/fi-FI.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Kuukautta",
   "upload.modal.expires.year-singular": "Vuosi",
   "upload.modal.expires.year-plural": "Vuotta",
-  "upload.modal.accordion.description.title": "Kuvaus",
-  "upload.modal.accordion.description.placeholder": "Huomautus tämän jaon vastaanottajille",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Sähköpostin vastaanottajat",
   "upload.modal.accordion.email.placeholder": "Syötä sähköpostin vastaanottajat",
   "upload.modal.accordion.email.invalid-email": "Virheellinen sähköpostiosoite",

frontend/src/i18n/translations/fr-FR.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Mois",
   "upload.modal.expires.year-singular": "An",
   "upload.modal.expires.year-plural": "Ans",
-  "upload.modal.accordion.description.title": "Description",
-  "upload.modal.accordion.description.placeholder": "Note pour les destinataires de ce partage",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Adresse courriel des destinataires",
   "upload.modal.accordion.email.placeholder": "Saisir les destinataires de ce partage",
   "upload.modal.accordion.email.invalid-email": "Courriel invalide",

frontend/src/i18n/translations/hu-HU.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Months",
   "upload.modal.expires.year-singular": "Year",
   "upload.modal.expires.year-plural": "Years",
-  "upload.modal.accordion.description.title": "Description",
-  "upload.modal.accordion.description.placeholder": "Note for the recipients of this share",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Email recipients",
   "upload.modal.accordion.email.placeholder": "Enter email recipients",
   "upload.modal.accordion.email.invalid-email": "Invalid email address",

frontend/src/i18n/translations/it-IT.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Mesi",
   "upload.modal.expires.year-singular": "Anno",
   "upload.modal.expires.year-plural": "Anni",
-  "upload.modal.accordion.description.title": "Descrizione",
-  "upload.modal.accordion.description.placeholder": "Nota per i destinatari di questa condivisione",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Destinatari di posta elettronica",
   "upload.modal.accordion.email.placeholder": "Inserisci le email dei destinatari",
   "upload.modal.accordion.email.invalid-email": "Indirizzo email non valido",

frontend/src/i18n/translations/ja-JP.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "ヶ月間",
   "upload.modal.expires.year-singular": "年間",
   "upload.modal.expires.year-plural": "年間",
-  "upload.modal.accordion.description.title": "説明",
-  "upload.modal.accordion.description.placeholder": "この共有に関する受信者へのメモ",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "メールで受け取る相手",
   "upload.modal.accordion.email.placeholder": "メールの宛先を入力",
   "upload.modal.accordion.email.invalid-email": "無効なメールアドレスです",

frontend/src/i18n/translations/nl-BE.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Maanden",
   "upload.modal.expires.year-singular": "Jaar",
   "upload.modal.expires.year-plural": "Jaren",
-  "upload.modal.accordion.description.title": "Beschrijving",
-  "upload.modal.accordion.description.placeholder": "Opmerking voor de ontvangers van deze share",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "E-mail van de ontvangers",
   "upload.modal.accordion.email.placeholder": "Voer e-mail ontvangers in",
   "upload.modal.accordion.email.invalid-email": "Ongeldig e-mailadres",

frontend/src/i18n/translations/pl-PL.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Miesiące/ęcy",
   "upload.modal.expires.year-singular": "Rok",
   "upload.modal.expires.year-plural": "Lat/a",
-  "upload.modal.accordion.description.title": "Opis",
-  "upload.modal.accordion.description.placeholder": "Notatka dla odbiorców tego udziału",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Odbiorcy wiadomości e-mail",
   "upload.modal.accordion.email.placeholder": "Wprowadź adresatów wiadomości e-mail",
   "upload.modal.accordion.email.invalid-email": "Adres e-mail jest nieprawidłowy",

frontend/src/i18n/translations/pt-BR.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Meses",
   "upload.modal.expires.year-singular": "Ano",
   "upload.modal.expires.year-plural": "Anos",
-  "upload.modal.accordion.description.title": "Descrição",
-  "upload.modal.accordion.description.placeholder": "Nota para os destinatários deste compartilhamento",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Destinatários de e-mail",
   "upload.modal.accordion.email.placeholder": "Insira os destinatários do e-mail",
   "upload.modal.accordion.email.invalid-email": "Endereço de e-mail inválido",

frontend/src/i18n/translations/ru-RU.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Месяца(-ев)",
   "upload.modal.expires.year-singular": "Год",
   "upload.modal.expires.year-plural": "Года (лет)",
-  "upload.modal.accordion.description.title": "Описание",
-  "upload.modal.accordion.description.placeholder": "Примечание для получателей этой загрузки",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Получатели письма",
   "upload.modal.accordion.email.placeholder": "Получатели e-mail",
   "upload.modal.accordion.email.invalid-email": "Недопустимый адрес электронной почты",

frontend/src/i18n/translations/sl-SI.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Meseci",
   "upload.modal.expires.year-singular": "Leto",
   "upload.modal.expires.year-plural": "Leta",
-  "upload.modal.accordion.description.title": "Opis",
-  "upload.modal.accordion.description.placeholder": "Sporočilo za prejemnika te delitve",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Prejemnik e-pošte",
   "upload.modal.accordion.email.placeholder": "Vnesite prejemnika e-pošte",
   "upload.modal.accordion.email.invalid-email": "Neveljaven e-poštni naslov",

frontend/src/i18n/translations/sr-SP.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Месеци",
   "upload.modal.expires.year-singular": "Година",
   "upload.modal.expires.year-plural": "Године",
-  "upload.modal.accordion.description.title": "Опис",
-  "upload.modal.accordion.description.placeholder": "Напомена за примаоце овог дељења",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Примаоци е-поште",
   "upload.modal.accordion.email.placeholder": "Унесите примаоце е-поште",
   "upload.modal.accordion.email.invalid-email": "Неисправна адреса е-поште",

frontend/src/i18n/translations/sv-SE.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Månader",
   "upload.modal.expires.year-singular": "År",
   "upload.modal.expires.year-plural": "År",
-  "upload.modal.accordion.description.title": "Beskrivning",
-  "upload.modal.accordion.description.placeholder": "Anteckning till mottagare av denna delning",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "E-postmottagare",
   "upload.modal.accordion.email.placeholder": "Ange e-postmottagare",
   "upload.modal.accordion.email.invalid-email": "Ogiltig e-postadress",

frontend/src/i18n/translations/th-TH.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "เดือน",
   "upload.modal.expires.year-singular": "ปี",
   "upload.modal.expires.year-plural": "ปี",
-  "upload.modal.accordion.description.title": "คำอธิบาย",
-  "upload.modal.accordion.description.placeholder": "หมายเหตุสำหรับผู้รับการแชร์นี้",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "ผู้รับอีเมล์",
   "upload.modal.accordion.email.placeholder": "ป้อนผู้รับอีเมล์",
   "upload.modal.accordion.email.invalid-email": "ที่อยู่อีเมล์ไม่ถูกต้อง",

frontend/src/i18n/translations/uk-UA.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "Місяця(-ів)",
   "upload.modal.expires.year-singular": "Рік",
   "upload.modal.expires.year-plural": "Роки (роки)",
-  "upload.modal.accordion.description.title": "Опис",
-  "upload.modal.accordion.description.placeholder": "Примітка для одержувачів цього завантаження",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Одержувачі листа",
   "upload.modal.accordion.email.placeholder": "Одержувачі e-mail",
   "upload.modal.accordion.email.invalid-email": "Неприпустима адреса електронної пошти",

frontend/src/i18n/translations/zh-CN.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "月",
   "upload.modal.expires.year-singular": "1 年",
   "upload.modal.expires.year-plural": "年",
-  "upload.modal.accordion.description.title": "描述",
-  "upload.modal.accordion.description.placeholder": "共享文件备注信息",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "邮件提醒",
   "upload.modal.accordion.email.placeholder": "收件人电子邮件地址",
   "upload.modal.accordion.email.invalid-email": "邮件地址不可用",

frontend/src/i18n/translations/zh-TW.ts

@@ -229,8 +229,9 @@ export default {
   "upload.modal.expires.month-plural": "月",
   "upload.modal.expires.year-singular": "年",
   "upload.modal.expires.year-plural": "年",
-  "upload.modal.accordion.description.title": "描述",
-  "upload.modal.accordion.description.placeholder": "分享檔案備註資訊",
+  "upload.modal.accordion.name-and-description.title": "Name and description",
+  "upload.modal.accordion.name-and-description.name.placeholder": "Name",
+  "upload.modal.accordion.name-and-description.description.placeholder": "Note for the recipients of this share",
   "upload.modal.accordion.email.title": "Email提醒",
   "upload.modal.accordion.email.placeholder": "收件人Email地址",
   "upload.modal.accordion.email.invalid-email": "Email地址不可用",

frontend/src/pages/account/shares.tsx

@@ -68,15 +68,12 @@ const MyShares = () => {
           <Table>
             <thead>
               <tr>
+                <th>
+                  <FormattedMessage id="account.shares.table.id" />
+                </th>
                 <th>
                   <FormattedMessage id="account.shares.table.name" />
                 </th>
-                <MediaQuery smallerThan="md" styles={{ display: "none" }}>
-                  <th>
-                    <FormattedMessage id="account.shares.table.description" />
-                  </th>
-                </MediaQuery>
-
                 <th>
                   <FormattedMessage id="account.shares.table.visitors" />
                 </th>
@@ -90,18 +87,7 @@ const MyShares = () => {
               {shares.map((share) => (
                 <tr key={share.id}>
                   <td>{share.id}</td>
-                  <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
-                    <td
-                      style={{
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                        maxWidth: "300px",
-                      }}
-                    >
-                      {share.description || ""}
-                    </td>
-                  </MediaQuery>
+                  <td>{share.name}</td>
                   <td>{share.views}</td>
                   <td>
                     {moment(share.expiration).unix() === 0

frontend/src/pages/admin/index.tsx

@@ -10,7 +10,7 @@ import {
 } from "@mantine/core";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import { TbRefresh, TbSettings, TbCameraShare, TbUsers } from "react-icons/tb";
+import { TbLink, TbRefresh, TbSettings, TbUsers } from "react-icons/tb";
 import { FormattedMessage } from "react-intl";
 import Meta from "../../components/Meta";
 import useTranslate from "../../hooks/useTranslate.hook";
@@ -43,7 +43,7 @@ const Admin = () => {
     },
     {
       title: t("admin.button.shares"),
-      icon: TbCameraShare,
+      icon: TbLink,
       route: "/admin/shares",
     },
     {

frontend/src/pages/admin/shares.tsx

@@ -1,11 +1,9 @@
-import { Button, Group, Space, Text, Title } from "@mantine/core";
+import { Group, Space, Text, Title } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { useEffect, useState } from "react";
-import { TbPlus } from "react-icons/tb";
 import { FormattedMessage } from "react-intl";
 import Meta from "../../components/Meta";
 import ManageShareTable from "../../components/admin/shares/ManageShareTable";
-import useConfig from "../../hooks/config.hook";
 import useTranslate from "../../hooks/useTranslate.hook";
 import shareService from "../../services/share.service";
 import { MyShare } from "../../types/share.type";
@@ -15,7 +13,6 @@ const Shares = () => {
   const [shares, setShares] = useState<MyShare[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
-  const config = useConfig();
   const modals = useModals();
   const t = useTranslate();
 
@@ -66,7 +63,6 @@ const Shares = () => {
 
       <ManageShareTable
         shares={shares}
-        getShares={getShares}
         deleteShare={deleteShare}
         isLoading={isLoading}
       />

frontend/src/pages/share/[shareId]/index.tsx

@@ -91,13 +91,13 @@ const Share = ({ shareId }: { shareId: string }) => {
   return (
     <>
       <Meta
-        title={t("share.title", { shareId })}
+        title={t("share.title", { shareId: share?.name || shareId })}
         description={t("share.description")}
       />
 
       <Group position="apart" mb="lg">
         <Box style={{ maxWidth: "70%" }}>
-          <Title order={3}>{share?.id}</Title>
+          <Title order={3}>{share?.name || share?.id}</Title>
           <Text size="sm">{share?.description}</Text>
         </Box>
         {share?.files.length > 1 && <DownloadAllButton shareId={shareId} />}

frontend/src/types/share.type.ts

@@ -2,15 +2,18 @@ import User from "./user.type";
 
 export type Share = {
   id: string;
+  name?: string;
   files: any;
   creator: User;
   description?: string;
   expiration: Date;
+  size: number;
   hasPassword: boolean;
 };
 
 export type CreateShare = {
   id: string;
+  name?: string;
   description?: string;
   recipients: string[];
   expiration: string;