From a0bc14d2c6f9f7947199b2f76eca7fc7a9f5499d Mon Sep 17 00:00:00 2001
From: he3als <65787561+he3als@users.noreply.github.com>
Date: Tue, 20 Aug 2024 19:32:37 +0100
Subject: [PATCH] feat(backup): icons, mobile support

---
 .../server/backups/BackupContainer.tsx        |  8 +-
 .../components/server/backups/BackupRow.tsx   | 93 ++++++++++---------
 2 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/resources/scripts/components/server/backups/BackupContainer.tsx b/resources/scripts/components/server/backups/BackupContainer.tsx
index 43618216d..1aadea77b 100644
--- a/resources/scripts/components/server/backups/BackupContainer.tsx
+++ b/resources/scripts/components/server/backups/BackupContainer.tsx
@@ -76,10 +76,10 @@ const BackupContainer = () => {
                             }}
                             className='p-1 border-[1px] border-[#ffffff12] rounded-xl'
                         >
-                            <div className='w-full h-full overflow-hidden rounded-lg flex flex-col gap-1'>
-                                <For each={items} memo>
-                                    {(backup) => <BackupRow key={backup.uuid} backup={backup} />}
-                                </For>
+                            <div className='flex h-full w-full flex-col gap-1 overflow-hidden rounded-lg'>
+                                {items.map((backup) => (
+                                    <BackupRow key={backup.uuid} backup={backup} />
+                                ))}
                             </div>
                         </div>
                     )
diff --git a/resources/scripts/components/server/backups/BackupRow.tsx b/resources/scripts/components/server/backups/BackupRow.tsx
index 22b231e9d..11bee3e5d 100644
--- a/resources/scripts/components/server/backups/BackupRow.tsx
+++ b/resources/scripts/components/server/backups/BackupRow.tsx
@@ -15,6 +15,8 @@ import getServerBackups from '@/api/swr/getServerBackups';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 
 import BackupContextMenu from './BackupContextMenu';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFile, faLock } from '@fortawesome/free-solid-svg-icons';
 
 interface Props {
     backup: ServerBackup;
@@ -34,12 +36,12 @@ export default ({ backup }: Props) => {
                         b.uuid !== backup.uuid
                             ? b
                             : {
-                                  ...b,
-                                  isSuccessful: parsed.is_successful || true,
-                                  checksum: (parsed.checksum_type || '') + ':' + (parsed.checksum || ''),
-                                  bytes: parsed.file_size || 0,
-                                  completedAt: new Date(),
-                              },
+                                ...b,
+                                isSuccessful: parsed.is_successful || true,
+                                checksum: (parsed.checksum_type || '') + ':' + (parsed.checksum || ''),
+                                bytes: parsed.file_size || 0,
+                                completedAt: new Date(),
+                            },
                     ),
                 }),
                 false,
@@ -51,52 +53,51 @@ export default ({ backup }: Props) => {
 
     return (
         <ContextMenu>
-            <ContextMenuTrigger>
-                <div
-                    className={`flex bg-[#ffffff11] hover:bg-[#ffffff19] transition duration-100 hover:duration-0 px-6 py-4 rounded-md items-center`}
-                >
-                    <div className={`flex items-center truncate w-full md:flex-1`}>
-                        <div className={`flex flex-col truncate`}>
-                            <div className={`flex items-center text-sm mb-1`}>
-                                {backup.completedAt !== null && !backup.isSuccessful && (
-                                    <span
-                                        className={`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}
-                                    >
-                                        Failed
-                                    </span>
-                                )}
-                                <div className={`flex gap-2 items-center justify-center`}>
-                                    <p className='break-words truncate text-lg'>{backup.name}</p>
-                                    {backup.completedAt !== null ? (
-                                        backup.isLocked ? (
-                                            <span className='font-bold z-10 rounded-full bg-brand px-2 py-1 text-xs text-white'>
-                                                Locked
-                                            </span>
-                                        ) : null
-                                    ) : (
-                                        <Spinner size={'small'} />
+            <ContextMenuTrigger className='flex flex-1 items-center rounded-md bg-[#ffffff11] px-6 py-4 transition duration-100 hover:bg-[#ffffff19] hover:duration-0 gap-4 flex-col sm:flex-row'>
+                <div className={`flex-auto max-w-full box-border`}>
+                    <div className='flex flex-row align-middle items-center gap-6 truncate'>
+                        <div className='flex-none'>
+                            {backup.completedAt === null ? (
+                                <Spinner size={'small'} />
+                            ) : backup.isLocked ? (
+                                <FontAwesomeIcon icon={faLock} className='text-red-500' />
+                            ) : (
+                                <FontAwesomeIcon icon={faFile} />
+                            )}
+                        </div>
+                        <div className={`flex items-center w-full md:flex-1`}>
+                            <div className={`flex flex-col`}>
+                                <div className={`flex items-center text-sm mb-1`}>
+                                    {backup.completedAt !== null && !backup.isSuccessful && (
+                                        <span
+                                            className={`bg-red-500 py-px px-2 rounded-full text-white text-xs uppercase border border-red-600 mr-2`}
+                                        >
+                                            Failed
+                                        </span>
                                     )}
+                                    <div className={`flex gap-2 items-center justify-center`}>
+                                        <p className='break-words truncate text-lg'>{backup.name}</p>
+                                    </div>
                                 </div>
+                                <p className={`mt-1 md:mt-0 text-xs text-zinc-400 font-mono truncate`}>{backup.checksum}</p>
                             </div>
-                            <p className={`mt-1 md:mt-0 text-xs text-zinc-400 font-mono truncate`}>{backup.checksum}</p>
                         </div>
                     </div>
-                    <div
-                        className={`w-1/6 justify-end flex flex-1 md:flex-none md:w-48 mt-4 md:mt-0 md:ml-8 md:text-center`}
-                    >
-                        {backup.completedAt !== null && backup.isSuccessful && (
-                            <span className={`text-xs hidden sm:inline`}>{bytesToString(backup.bytes)}</span>
-                        )}
-                    </div>
-                    <div className={`w-1/5 justify-end flex flex-1 md:flex-none mt-4 md:mt-0 md:ml-8 md:text-center`}>
-                        <p title={format(backup.createdAt, 'ddd, MMMM do, yyyy HH:mm:ss')} className={`text-xs`}>
-                            {formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
-                        </p>
-                    </div>
-                    <Can action={['backup.download', 'backup.restore', 'backup.delete']} matchAny>
-                        {!backup.completedAt ? <></> : <BackupContextMenu backup={backup} />}
-                    </Can>
                 </div>
+
+                <div className='flex flex-row justify-center font-medium sm:justify-between min-w-full sm:w-96 sm:min-w-40'>
+                    {backup.completedAt !== null && backup.isSuccessful && (
+                        <span className={`text-xs sm:flex-initial sm:ml-0`}>{bytesToString(backup.bytes)}</span>
+                    )}
+                    <p className={`text-xs inline sm:hidden`}>,&nbsp;</p>
+                    <p title={format(backup.createdAt, 'ddd, MMMM do, yyyy HH:mm:ss')} className={`text-xs sm:flex-initial`}>
+                        {formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
+                    </p>
+                </div>
+
+                <Can action={['backup.download', 'backup.restore', 'backup.delete']} matchAny>
+                    {!backup.completedAt ? <></> : <BackupContextMenu backup={backup} />}
+                </Can>
             </ContextMenuTrigger>
         </ContextMenu>
     );