[web] Add changelog description

maxijonson · Jul 16, 2023 · e4ae85f · e4ae85f
1 parent f3d6279
commit e4ae85f
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 27 deletions.
diff --git a/packages/web/src/changelog/index.ts b/packages/web/src/changelog/index.ts
@@ -5,12 +5,14 @@ import v4_4_1 from "./v4-4-1";
 export type ChangelogEntrySection = {
     label: ReactNode;
     items: ReactNode[];
+    description?: ReactNode;
 };
 
 export type ChangelogEntry = {
     version: string;
     date: Date;
     sections: ChangelogEntrySection[];
+    description?: ReactNode;
 };
 
 // First entry is the latest version

diff --git a/packages/web/src/changelog/v4-4-1.ts b/packages/web/src/changelog/v4-4-1.ts
@@ -4,12 +4,14 @@ import { CHANGELOG_SECTION } from "../config/constants";
 const v4_4_1: ChangelogEntry = {
     version: "4.4.1 - Performance Update",
     date: new Date("july 15 2023"),
+    description:
+        "Although performance was not an issue before, I saw many easy opportunities to improve it. This update contains many small improvements that should make the app feel more responsive and less resource intensive.",
     sections: [
         {
             label: CHANGELOG_SECTION.IMPROVEMENTS,
             items: [
                 "Further improved state management",
-                "Reduced initial bundle size",
+                "Significantly reduced bundle size by separating dependencies from the main bundle into separate chunks. They will only be loaded when needed.",
                 "Updated all project dependencies",
             ],
         },

diff --git a/packages/web/src/components/Changelog/Changelog.tsx b/packages/web/src/components/Changelog/Changelog.tsx
@@ -23,32 +23,46 @@ const Changelog = () => {
     return (
         <Box>
             <Timeline>
-                {changelog.map(({ version, date, sections }, i) => (
-                    <Timeline.Item
-                        key={version}
-                        title={`v${version}`}
-                        bulletSize={i === 0 ? 24 : 16}
-                        active
-                    >
-                        <Text color="dimmed" size="xs">
-                            {dateStr(date)}
-                        </Text>
-                        <Stack spacing="xs" mt="xs">
-                            {sections.map(({ label, items }, j) => (
-                                <Box key={j}>
-                                    <Title order={5}>{label}</Title>
-                                    <List withPadding pr="xl">
-                                        {items.map((item, k) => (
-                                            <List.Item key={k}>
-                                                {item}
-                                            </List.Item>
-                                        ))}
-                                    </List>
-                                </Box>
-                            ))}
-                        </Stack>
-                    </Timeline.Item>
-                ))}
+                {changelog.map(
+                    ({ version, date, sections, description }, i) => (
+                        <Timeline.Item
+                            key={version}
+                            title={`v${version}`}
+                            bulletSize={i === 0 ? 24 : 16}
+                            active
+                        >
+                            <Text color="dimmed" size="xs">
+                                {dateStr(date)}
+                            </Text>
+                            {description && (
+                                <Text mt="xs" size="sm">
+                                    {description}
+                                </Text>
+                            )}
+                            <Stack spacing="xs" mt="xs">
+                                {sections.map(
+                                    ({ label, items, description }, j) => (
+                                        <Box key={j}>
+                                            <Title order={5}>{label}</Title>
+                                            {description && (
+                                                <Text mt="xs" size="sm">
+                                                    {description}
+                                                </Text>
+                                            )}
+                                            <List withPadding pr="xl">
+                                                {items.map((item, k) => (
+                                                    <List.Item key={k}>
+                                                        {item}
+                                                    </List.Item>
+                                                ))}
+                                            </List>
+                                        </Box>
+                                    )
+                                )}
+                            </Stack>
+                        </Timeline.Item>
+                    )
+                )}
                 <Timeline.Item
                     active
                     title="<v4.4.0 - End of Changelog"