From e4ae85fc684b1fb066d2de38a3890307d09164fb Mon Sep 17 00:00:00 2001
From: Tristan Chin <tristan.chin@chintristan.io>
Date: Sun, 16 Jul 2023 01:15:13 -0400
Subject: [PATCH] [web] Add changelog description

---
 packages/web/src/changelog/index.ts           |  2 +
 packages/web/src/changelog/v4-4-1.ts          |  4 +-
 .../src/components/Changelog/Changelog.tsx    | 66 +++++++++++--------
 3 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/packages/web/src/changelog/index.ts b/packages/web/src/changelog/index.ts
index 70f0f13..15b6432 100644
--- 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
index d12373d..7e05365 100644
--- 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
index 8d58ffa..e1677be 100644
--- 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"