Update to use list

src/apps/dashboard/features/logs/components/LogItemList.tsx

@@ -0,0 +1,53 @@
+import React, { FunctionComponent } from 'react';
+import type { LogFile } from '@jellyfin/sdk/lib/generated-client/models/log-file';
+import { Box, List, ListItem, ListItemButton, ListItemText, useTheme } from '@mui/material';
+import { useApi } from 'hooks/useApi';
+import datetime from 'scripts/datetime';
+
+type LogItemProps = {
+    logs: LogFile[];
+};
+
+const LogItemList: FunctionComponent<LogItemProps> = ({ logs }: LogItemProps) => {
+    const { api } = useApi();
+    const theme = useTheme();
+
+    const getLogFileUrl = (logFile: LogFile) => {
+        if (!api) return '';
+
+        let url = api.basePath + '/System/Logs/Log';
+
+        url += '?name=' + encodeURIComponent(String(logFile.Name));
+        url += '&api_key=' + encodeURIComponent(api.accessToken);
+
+        return url;
+    };
+
+    const getDate = (logFile: LogFile) => {
+        const date = datetime.parseISO8601Date(logFile.DateModified, true);
+        return datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date);
+    };
+
+    return (
+        <Box sx={{ backgroundColor: theme.palette.background.paper }}>
+            <List>
+                {logs.map(log => {
+                    return (
+                        <ListItem key={log.Name} disablePadding>
+                            <ListItemButton href={getLogFileUrl(log)} target='_blank'>
+                                <ListItemText
+                                    primary={log.Name}
+                                    primaryTypographyProps={{ variant: 'h3' }}
+                                    secondary={getDate(log)}
+                                    secondaryTypographyProps={{ variant: 'body1' }}
+                                />
+                            </ListItemButton>
+                        </ListItem>
+                    );
+                })}
+            </List>
+        </Box>
+    );
+};
+
+export default LogItemList;

src/apps/dashboard/routes/logs/index.tsx

@@ -1,6 +1,5 @@
 import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
-import LogItem from 'apps/dashboard/features/logs/components/LogItem';
 import Loading from 'components/loading/LoadingComponent';
 import Page from 'components/Page';
 import globalize from 'lib/globalize';
@@ -11,6 +10,7 @@ import { useServerLogs } from 'apps/dashboard/features/logs/api/useServerLogs';
 import { useConfiguration } from 'hooks/useConfiguration';
 import type { ServerConfiguration } from '@jellyfin/sdk/lib/generated-client/models/server-configuration';
 import { ActionData } from 'types/actionData';
+import LogItemList from 'apps/dashboard/features/logs/components/LogItemList';
 
 export const action = async ({ request }: ActionFunctionArgs) => {
     const api = ServerConnections.getCurrentApi();
@@ -69,7 +69,7 @@ const Logs = () => {
         setIsSubmitting(true);
     }, []);
 
-    if (isLogEntriesPending || isConfigurationPending || loading) {
+    if (isLogEntriesPending || isConfigurationPending || loading || !logs) {
         return <Loading />;
     }
 
@@ -122,12 +122,7 @@ const Logs = () => {
                     </Stack>
                 </Form>
                 <Stack className='serverLogs readOnlyContent' spacing={1} sx={{ mt: 1 }}>
-                    {logs?.map(log => {
-                        return <LogItem
-                            key={log.Name}
-                            logFile={log}
-                        />;
-                    })}
+                    <LogItemList logs={logs} />
                 </Stack>
             </Box>
         </Page>