Change design of Backups page a bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/features/backups/index.tsx

@@ -1,19 +1,58 @@
 import React, { useEffect, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { FormattedDate, defineMessages, useIntl } from 'react-intl';
 
 import { fetchBackups, createBackup } from 'soapbox/actions/backups';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, FormActions, Text } from 'soapbox/components/ui';
+import { Button, Card, Column, FormActions, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
+import type { Backup as BackupEntity } from 'soapbox/reducers/backups';
+
 const messages = defineMessages({
   heading: { id: 'column.backups', defaultMessage: 'Backups' },
   create: { id: 'backups.actions.create', defaultMessage: 'Create backup' },
   emptyMessage: { id: 'backups.empty_message', defaultMessage: 'No backups found. {action}' },
   emptyMessageAction: { id: 'backups.empty_message.action', defaultMessage: 'Create one now?' },
+  download: { id: 'backups.download', defaultMessage: 'Download' },
   pending: { id: 'backups.pending', defaultMessage: 'Pending' },
 });
 
+interface IBackup {
+  backup: BackupEntity;
+}
+
+const Backup: React.FC<IBackup> = ({ backup }) => {
+  const intl = useIntl();
+
+  const button = (
+    <Button theme='primary' disabled={!backup.processed}>
+      {intl.formatMessage(backup.processed ? messages.download : messages.pending)}
+    </Button>
+  );
+
+  return (
+    <div key={backup.id} className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+      <Stack space={2}>
+        <Stack>
+          <Text size='md'>
+            <FormattedDate
+              value={backup.inserted_at}
+              hour12
+              year='numeric'
+              month='short'
+              day='2-digit'
+              hour='numeric'
+              minute='2-digit'
+            />
+          </Text>
+        </Stack>
+        <HStack justifyContent='end'>
+          {backup.processed ? <a href={backup.url} target='_blank'>{button}</a> : button}
+        </HStack>
+      </Stack>
+    </div>
+  );
+};
+
 const Backups = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -35,34 +74,29 @@ const Backups = () => {
 
   const showLoading = isLoading && backups.count() === 0;
 
-  const emptyMessageAction = (
-    <a href='#' onClick={handleCreateBackup}>
-      <Text tag='span' theme='primary' size='sm' className='hover:underline'>
-        {intl.formatMessage(messages.emptyMessageAction)}
-      </Text>
-    </a>
+  const emptyMessage = (
+    <Card variant='rounded' size='lg'>
+      {intl.formatMessage(messages.emptyMessage, {
+        action: (
+          <a href='#' onClick={handleCreateBackup}>
+            <Text tag='span' theme='primary' size='sm' className='hover:underline'>
+              {intl.formatMessage(messages.emptyMessageAction)}
+            </Text>
+          </a>
+        ),
+      })}
+    </Card>
+  );
+
+  const body = showLoading ? <Spinner /> : backups.isEmpty() ? emptyMessage : (
+    <div className='mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2'>
+      {backups.map((backup) => <Backup key={backup.id} backup={backup} />)}
+    </div>
   );
 
   return (
     <Column label={intl.formatMessage(messages.heading)}>
-      <ScrollableList
-        isLoading={isLoading}
-        showLoading={showLoading}
-        scrollKey='backups'
-        emptyMessage={intl.formatMessage(messages.emptyMessage, { action: emptyMessageAction })}
-      >
-        {backups.map((backup) => (
-          <div
-            className='p-4'
-            key={backup.id}
-          >
-            {backup.processed
-              ? <a href={backup.url} target='_blank'>{backup.inserted_at}</a>
-              : <Text theme='subtle'>{intl.formatMessage(messages.pending)}: {backup.inserted_at}</Text>
-            }
-          </div>
-        ))}
-      </ScrollableList>
+      {body}
 
       <FormActions>
         <Button theme='primary' disabled={isLoading} onClick={handleCreateBackup}>

src/locales/en.json

@@ -190,6 +190,7 @@
   "auth.logged_out": "Logged out.",
   "authorize.success": "Approved",
   "backups.actions.create": "Create backup",
+  "backups.download": "Download",
   "backups.empty_message": "No backups found. {action}",
   "backups.empty_message.action": "Create one now?",
   "backups.pending": "Pending",

src/reducers/backups.tsx

@@ -8,7 +8,7 @@ import {
 import type { AnyAction } from 'redux';
 import type { APIEntity } from 'soapbox/types/entities';
 
-const BackupRecord = ImmutableRecord({
+export const BackupRecord = ImmutableRecord({
   id: null as number | null,
   content_type: '',
   url: '',
@@ -17,7 +17,7 @@ const BackupRecord = ImmutableRecord({
   inserted_at: '',
 });
 
-type Backup = ReturnType<typeof BackupRecord>;
+export type Backup = ReturnType<typeof BackupRecord>;
 type State = ImmutableMap<string, Backup>;
 
 const initialState: State = ImmutableMap();