Refactor: removed nested meals component

src/frontend/src/features/notes/ui/MealsList.tsx

@@ -1,23 +1,41 @@
-import { useMemo, type FC } from 'react';
-import { type NoteItem, getMealTypes, groupNotesByMealType } from '../models';
-import { MealsListItem } from './MealsListItem';
+import { List, ListItem, ListSubheader, Stack, Typography } from '@mui/material';
+import { type FC, useMemo, type PropsWithChildren } from 'react';
+import { getMealName, type NoteItem, type MealType } from '../models';
+import { NotesList } from './NotesList';
 
-interface Props {
+interface Props extends PropsWithChildren {
+  mealType: MealType;
   notes: NoteItem[];
 }
 
-export const MealsList: FC<Props> = ({ notes }) => {
-  const notesGroupedByMealType = useMemo(() => groupNotesByMealType(notes), [notes]);
+export const MealsList: FC<Props> = ({ mealType, notes }: Props) => {
+  const mealName = useMemo(() => getMealName(mealType), [mealType]);
+  const totalCalories = useMemo(() => notes.reduce((sum, note) => sum + note.calories, 0), [notes]);
 
   return (
-    <>
-      {getMealTypes().map(mealType => (
-        <MealsListItem
-          key={mealType}
-          mealType={mealType}
-          notes={notesGroupedByMealType.get(mealType) ?? []}
-        />
-      ))}
-    </>
+    <List
+      subheader={
+        <ListSubheader disableGutters>
+          <Stack direction="row" spacing={1} justifyContent="space-between">
+            <Typography fontSize="inherit" fontWeight="inherit" component="span" noWrap>
+              {mealName}
+            </Typography>
+            <Typography
+              fontSize="inherit"
+              fontWeight="inherit"
+              component="span"
+              width={100}
+              align="right"
+            >
+              {totalCalories} kcal
+            </Typography>
+          </Stack>
+        </ListSubheader>
+      }
+    >
+      <ListItem disableGutters>
+        <NotesList notes={notes} />
+      </ListItem>
+    </List>
   );
 };

src/frontend/src/features/notes/ui/index.ts

@@ -1,2 +1,2 @@
-export * from './MealsList';
 export * from './NotesTable';
+export * from './MealsList';

src/frontend/src/pages/ui/PageDetailPage.tsx

@@ -1,6 +1,12 @@
-import { type FC } from 'react';
+import { useMemo, type FC } from 'react';
 import { useLoaderData } from 'react-router-dom';
-import { notesApi, MealsList, useNotes } from '@/features/notes';
+import {
+  notesApi,
+  useNotes,
+  groupNotesByMealType,
+  getMealTypes,
+  MealsList,
+} from '@/features/notes';
 import { pagesApi } from '@/features/pages';
 import PageContentHeader from '@/features/pages/components/PageContentHeader';
 import store from '@/store';
@@ -28,14 +34,21 @@ export const Component: FC = () => {
   const { pageId } = useLoaderData() as LoaderData;
   const getPageByIdQuery = pagesApi.useGetPageByIdQuery(pageId);
   const notes = useNotes(pageId);
+  const notesGroupedByMealType = useMemo(() => groupNotesByMealType(notes.data), [notes]);
 
   return (
     <PrivateLayout
       header={
         getPageByIdQuery.data && <PageContentHeader page={getPageByIdQuery.data.currentPage} />
       }
     >
-      <MealsList notes={notes.data} />
+      {getMealTypes().map(mealType => (
+        <MealsList
+          key={mealType}
+          mealType={mealType}
+          notes={notesGroupedByMealType.get(mealType) ?? []}
+        />
+      ))}
     </PrivateLayout>
   );
 };