Fix changelog and move group to category

renderer/src/data/changelog.js

@@ -1,6 +1,11 @@
+import config from "./config";
+
 // fixed, improved, added, progress
 export default {
+    title: "BetterDiscord",
+    subtitle: `v${config.version}`,
     video: "https://www.youtube.com/embed/evyvq9eQTqA?si=opmzjGjUArT4VLrj&vq=hd720p&hd=1&rel=0&showinfo=0&mute=1&loop=1&autohide=1",
+    banner: "https://i.imgur.com/wuh5yMK.png",
     blurb: "A hotfix to get things going again. Plugins and Themes will take time to update.",
     changes: [
         {

renderer/src/modules/api/ui.js

@@ -163,16 +163,16 @@ const UI = {
      * Creates a settings panel (react element) based on json-like data.
      * 
      * The `settings` array here is an array of the same settings types described in `buildSetting` above.
-     * However, this API allows one additional setting "type" called `group`. This has the same properties
+     * However, this API allows one additional setting "type" called `category`. This has the same properties
-     * as the React Component found under the `Components` API.
+     * as the Group React Component found under the `Components` API.
      * 
-     * `onChange` will always be given 3 arguments: group id, setting id, and setting value. In the case
+     * `onChange` will always be given 3 arguments: category id, setting id, and setting value. In the case
-     * that you have settings on the "root" of the panel, the group id is `null`.
+     * that you have settings on the "root" of the panel, the category id is `null`.
      * 
-     * `onDrawerToggle` is given 2 arguments: group id, and the current shown state. You can use this to
+     * `onDrawerToggle` is given 2 arguments: category id, and the current shown state. You can use this to
      * save drawer states.
      * 
-     * `getDrawerState` is given 2 arguments: group id, and the default shown state. You can use this to
+     * `getDrawerState` is given 2 arguments: category id, and the default shown state. You can use this to
      * recall a saved drawer state.
      * 
      * @param {object} props 
@@ -186,14 +186,14 @@ const UI = {
         if (!settings?.length) throw new Error("No settings provided!");
         if (typeof(onChange) !== "function") throw new Error("No change listener provided!");
         return React.createElement(React.Fragment, null, settings.map(setting => {
-            if (setting.type === "group") {
+            if (setting.type === "category") {
                 const shownByDefault = setting.hasOwnProperty("shown") ? setting.shown : true;
-                const groupProps = Object.assign({}, setting, {
+                const categoryProps = Object.assign({}, setting, {
                     onChange,
                     onDrawerToggle: state => onDrawerToggle?.(setting.id, state),
                     shown: getDrawerState?.(setting.id, shownByDefault) ?? shownByDefault
                 });
-                return React.createElement(Group, groupProps);
+                return React.createElement(Group, categoryProps);
             }
             return buildSetting(Object.assign({}, setting, {onChange: value => onChange(null, setting.id, value)}));
         }));

renderer/src/modules/core.js

@@ -86,13 +86,7 @@ export default new class Core {
 
         const previousVersion = DataStore.getBDData("version");
         if (Config.version !== previousVersion) {
-            Modals.showChangelogModal(Object.assign({
+            Modals.showChangelogModal(Changelog);
-                banner: "https://i.imgur.com/wuh5yMK.png",
-                blurb: "",
-                changes: [],
-                title: "BetterDiscord",
-                subtitle: `v${Config.version}`
-            }, Changelog));
             DataStore.setBDData("version", Config.version);
         }
     }

renderer/src/ui/modals/changelog.jsx

@@ -78,9 +78,13 @@ export default function ChangelogModal({transitionState, footer, title, subtitle
     </Footer>, [footer]);
 
     const changelogItems = useMemo(() => {
-        const items = [video ? <Video src={video} poster={poster} /> : <img src={banner} className="bd-changelog-poster" />];
+        const items = [];
+        if (video) items.push(<Video src={video} poster={poster} />);
+        else if (banner) items.push(<img src={banner} className="bd-changelog-poster" />);
+
         if (blurb) items.push(<p>{SimpleMarkdownExt.parseToReact(blurb)}</p>);
-        for (let c = 0; c < changes.length; c++) {
+
+        for (let c = 0; c < changes?.length; c++) {
             const entry = changes[c];
             const type = "bd-changelog-" + entry.type;
             const margin = c == 0 ? " bd-changelog-first" : "";
@@ -95,6 +99,6 @@ export default function ChangelogModal({transitionState, footer, title, subtitle
     return <Root className="bd-changelog-modal" transitionState={transitionState} size={Root.Sizes.MEDIUM} style={Root.Styles.STANDARD}>
         {ChangelogHeader}
         <Content>{changelogItems}</Content>
-        {ChangelogFooter}
+        {(footer || title === "BetterDiscord") && ChangelogFooter}
     </Root>;
 }