feat: changelog improvements/fixes

- use a Modal for it/tweak the design
- add a release date
- i18n
- ensure it actually shows up after updating the app

Author: Rexogamer

docs/dev/release-checklist.md

@@ -10,7 +10,7 @@
 - [ ] Update `versionName` and `versionCode` in `android/app/build.gradle`
 - [ ] Update the `version` field in the `package.json` file
 - [ ] Create a new file in `fastlane/metadata/android/en-US/changelogs/` - named `xyz.txt`, with `xyz` being the new `versionCode` - and note the biggest changes in the release, with a link to the full `CHANGELOG.md` entry - **this cannot exceed 500 characters**
-- [ ] Update `changelogParagraphs` in `src/components/sheets/ChangelogSheet.tsx` with a short summary of the changes
+- [ ] Update `changelogParagraphs` in `src/components/sheets/ChangelogSheet.tsx` with a short summary of the changes, and update `releaseDate` to reflect the update's release date
 - [ ] Write out a full changelog entry for `CHANGELOG.md` - use the previous entries as a guide for formatting
   - You can use `git log v[LASTVERSION]...main --format="%s (%h)"` to get a clean list of commits since the last release - this can help make sure you don't miss anything
 - [ ] Stage and commit these changes in a commit titled `release: x.y.z` (with `x.y.z` being the new version) - do **not** push the commit yet

i18n/strings/en.json

@@ -52,6 +52,14 @@
             "Supporter": "Donator",
             "Translator": "Translator"
         },
+        "changelog": {
+            "header": "Changelog for v{{version}}",
+            "header_newly_updated": "Clerotri has been updated to v{{version}}",
+            "released_on": "Released on {{date}}",
+            "donate": "Donate",
+            "see_full_changelog": "See the full changelog",
+            "dismiss": "Dismiss"
+        },
         "channel_list": {
             "direct_messages_header": "Direct Messages"
         },

src/Generic.tsx

@@ -209,9 +209,9 @@ export const app = {
       `[FUNCTIONS] Tried to run uninitialised function openAnalyticsMenu (args: ${state}, ${blockClosing})`,
     );
   },
-  openChangelog: (state: boolean) => {
+  openChangelog: (state: boolean, isNewlyUpdated?: boolean) => {
     console.log(
-      `[FUNCTIONS] Tried to run uninitialised function openChangelog (args: ${state})`,
+      `[FUNCTIONS] Tried to run uninitialised function openChangelog (args: ${state}, ${isNewlyUpdated})`,
     );
   },
   openModActionModal: (member: MemberWithModAction | null) => {

src/LoggedInViews.tsx

@@ -14,7 +14,7 @@ import {settings} from '@clerotri/lib/settings';
 import {ChannelContext, ServerContext} from '@clerotri/lib/state';
 import {storage} from '@clerotri/lib/storage';
 import {CVChannel} from '@clerotri/lib/types';
-import {checkLastVersion, openLastChannel, sleep} from '@clerotri/lib/utils';
+import {checkLastVersion, openLastChannel} from '@clerotri/lib/utils';
 
 export function LoggedInViews({
   channelNotificationSettings,
@@ -54,10 +54,7 @@ export function LoggedInViews({
       if (lastVersion) {
         if (settings.get('app.showChangelogs')) {
           console.log(`[APP] Opening changelog...`);
-          // don't ask why but the sheet doesn't appear without this
-          sleep(50).then(() => {
-            app.openChangelog(true);
-          });
+          app.openChangelog(true, true);
         }
       }
     }

src/Modals.tsx

@@ -154,10 +154,6 @@ const BottomSheets = observer(() => {
     openOrCloseSheet(!!m, 'messageMenu');
   });
 
-  setFunction('openChangelog', (show: boolean) => {
-    openOrCloseSheet(show, 'changelog');
-  });
-
   return (
     <BottomSheet sheetRef={sheetRef} onChange={handleSheetIndexChange}>
       {currentSheet === 'statusMenu' ? (
@@ -178,8 +174,6 @@ const BottomSheets = observer(() => {
         <MemberListSheet context={memberListContext} />
       ) : currentSheet === 'messageMenu' ? (
         <MessageMenuSheet message={messageMenuMessage} />
-      ) : currentSheet === 'changelog' ? (
-        <ChangelogSheet />
       ) : null}
     </BottomSheet>
   );
@@ -421,27 +415,48 @@ export const PreLoginModals = observer(() => {
     useState(false);
   const [analyticsSettingsBlockClosing, setAnalyticsSettingsBlockClosing] =
     useState(false);
+  const [changelogVisibility, setChangelogVisibility] = useState(false);
+  const [changelogIsNewlyUpdated, setChangelogIsNewlyUpdated] = useState(false);
 
   setFunction('openAnalyticsMenu', (o: boolean, blockClosing?: boolean) => {
     setAnalyticsSettingsBlockClosing(blockClosing || false);
     setAnalyticsSettingsVisibility(o);
   });
 
+  setFunction('openChangelog', (show: boolean, isNewlyUpdated?: boolean) => {
+    setChangelogIsNewlyUpdated(isNewlyUpdated || false);
+    setChangelogVisibility(show);
+  });
+
   return (
-    <Modal
-      visible={analyticsSettingsVisibility}
-      transparent={true}
-      animationType="fade"
-      statusBarTranslucent
-      navigationBarTranslucent
-      onRequestClose={() =>
-        app.handleAnalyticsSettingsVisibility(setAnalyticsSettingsVisibility)
-      }>
-      <AnalyticsSettingsSheet
-        blockClosing={analyticsSettingsBlockClosing}
-        setState={() => setAnalyticsSettingsVisibility(false)}
-      />
-    </Modal>
+    <>
+      <Modal
+        visible={analyticsSettingsVisibility}
+        transparent={true}
+        animationType="fade"
+        statusBarTranslucent
+        navigationBarTranslucent
+        onRequestClose={() =>
+          app.handleAnalyticsSettingsVisibility(setAnalyticsSettingsVisibility)
+        }>
+        <AnalyticsSettingsSheet
+          blockClosing={analyticsSettingsBlockClosing}
+          setState={() => setAnalyticsSettingsVisibility(false)}
+        />
+      </Modal>
+      <Modal
+        visible={changelogVisibility}
+        transparent={true}
+        animationType="slide"
+        statusBarTranslucent
+        navigationBarTranslucent
+        onRequestClose={() => setChangelogVisibility(false)}>
+        <ChangelogSheet
+          setState={() => setChangelogVisibility(false)}
+          isNewlyUpdated={changelogIsNewlyUpdated}
+        />
+      </Modal>
+    </>
   );
 });
 

src/components/sheets/ChangelogSheet.tsx

@@ -1,8 +1,7 @@
 import {useContext, useMemo} from 'react';
 import {View} from 'react-native';
-import {observer} from 'mobx-react-lite';
-
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {StyleSheet} from 'react-native-unistyles';
+import {useTranslation} from 'react-i18next';
 
 import {Text} from '@clerotri/components/common/atoms';
 import {NewContextButton} from '@clerotri/components/common/buttons';
@@ -13,65 +12,127 @@ import {APP_VERSION} from '@clerotri/lib/metadata';
 import {commonValues, ThemeContext} from '@clerotri/lib/themes';
 import {openUrl} from '@clerotri/lib/utils';
 
+const releaseDate = 'foo/bar/2026';
+
 const changelogParagraphs = [
   'This release includes **better message rendering**, a bunch of styling and design improvements and a new language - French!',
   `Also note that **Clerotri is now on Bluesky!** Get updates and support at [**@clerotri.upryzing.app**](${BLUESKY_PROFILE}).`,
 ];
 
-export const ChangelogSheet = observer(() => {
-  const insets = useSafeAreaInsets();
+const ChangelogHeader = ({isNewlyUpdated}: {isNewlyUpdated: boolean}) => {
+  const {t} = useTranslation();
+
+  return (
+    <View>
+      <Text type={'h1'}>
+        {t(`app.changelog.header${isNewlyUpdated ? '_newly_updated' : ''}`, {
+          version: APP_VERSION,
+        })}
+      </Text>
+      <Text useNewText colour={'foregroundSecondary'}>
+        {t('app.changelog.released_on', {date: releaseDate})}
+      </Text>
+      <View style={localStyles.paragraphsContainer}>
+        {changelogParagraphs.map((paragraph, index) => (
+          <View key={`changelog-paragraph-${index}`}>
+            <MarkdownView>{paragraph}</MarkdownView>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const ChangelogButtons = ({setState}: {setState: (show: boolean) => void}) => {
   const {currentTheme} = useContext(ThemeContext);
 
+  const {t} = useTranslation();
+
   const donateGradient = useMemo(
     () => generateDonateGradient(currentTheme),
     [currentTheme],
   );
 
   return (
-    <View
-      style={{
-        padding: commonValues.sizes.xl,
-        paddingBlockEnd: commonValues.sizes.medium + insets.bottom,
-        flex: 1,
-        justifyContent: 'space-between',
-      }}>
-      <View style={{justifyContent: 'center'}}>
-        <Text type={'h1'}>v{APP_VERSION}</Text>
-        {changelogParagraphs.map((paragraph, index) => (
-          <View
-            key={`changelog-paragraph-${index}`}
-            style={{marginBlockEnd: commonValues.sizes.medium}}>
-            <MarkdownView>{paragraph}</MarkdownView>
-          </View>
-        ))}
-      </View>
-      <View>
-        <NewContextButton
-          type={'start'}
-          icon={{
-            pack: 'community',
-            name: 'heart',
-            colour: 'accentColor',
-          }}
-          textString={'Donate'}
-          style={{
-            justifyContent: 'center',
-            experimental_backgroundImage: [donateGradient],
-          }}
-          onPress={() => {
-            openUrl(`${DONATIONS_INFO}_iac_${APP_VERSION}`);
-          }}
-        />
-        <NewContextButton
-          type={'end'}
-          icon={{pack: 'community', name: 'book-open-variant'}}
-          textString={'See full changelog'}
-          style={{justifyContent: 'center'}}
-          onPress={() => {
-            openUrl(CHANGELOG);
-          }}
-        />
+    <View>
+      <NewContextButton
+        type={'start'}
+        icon={{
+          pack: 'community',
+          name: 'heart',
+          colour: 'accentColor',
+        }}
+        textString={t('app.changelog.donate')}
+        style={[
+          localStyles.changelogButton,
+          {experimental_backgroundImage: [donateGradient]},
+        ]}
+        onPress={() => {
+          openUrl(`${DONATIONS_INFO}_iac_${APP_VERSION}`);
+        }}
+      />
+      <NewContextButton
+        type={'end'}
+        icon={{pack: 'community', name: 'book-open-variant'}}
+        textString={t('app.changelog.see_full_changelog')}
+        style={[localStyles.changelogButton, localStyles.fullChangelogButton]}
+        onPress={() => {
+          openUrl(CHANGELOG);
+        }}
+      />
+      <NewContextButton
+        type={'detatched'}
+        icon={{pack: 'regular', name: 'close'}}
+        textString={t('app.changelog.dismiss')}
+        style={[localStyles.changelogButton, localStyles.closeButton]}
+        onPress={() => {
+          setState(false);
+        }}
+      />
+    </View>
+  );
+};
+
+export const ChangelogSheet = ({
+  setState,
+  isNewlyUpdated,
+}: {
+  setState: (show: boolean) => void;
+  isNewlyUpdated: boolean;
+}) => {
+  return (
+    <View style={localStyles.container}>
+      <View style={localStyles.innerContainer}>
+        <ChangelogHeader isNewlyUpdated={isNewlyUpdated} />
+        <ChangelogButtons setState={setState} />
       </View>
     </View>
   );
-});
+};
+
+const localStyles = StyleSheet.create((currentTheme, rt) => ({
+  container: {
+    flex: 1,
+    padding: commonValues.sizes.xl,
+    paddingBlockStart: commonValues.sizes.xl + rt.insets.top,
+    paddingBlockEnd: commonValues.sizes.xl + rt.insets.bottom,
+    backgroundColor: currentTheme.backgroundPrimary,
+  },
+  innerContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  paragraphsContainer: {
+    marginBlockStart: commonValues.sizes.large,
+    gap: commonValues.sizes.medium,
+  },
+  changelogButton: {
+    flex: 0,
+    justifyContent: 'center',
+  },
+  fullChangelogButton: {
+    backgroundColor: currentTheme.backgroundSecondary,
+    marginBlockEnd: commonValues.sizes.xs,
+  },
+  closeButton: {marginBlockEnd: 0},
+}));