Add option to separate messages

src/index.ts

@@ -1,25 +1,31 @@
 import Settings from "./ui/pages/Settings";
 import { storage } from "@vendetta/plugin";
-import { after } from "@vendetta/patcher";
+import { after, before } from "@vendetta/patcher";
 import { findByName } from "@vendetta/metro";
 import renderTimestamp from "./lib/renderTimestamp";
 
 const RowManager = findByName("RowManager")
-let unpatch: () => void;
+let patches = [];
 
 export default {
     onLoad: () => {
         storage.selected ??= "calendar"
         storage.customFormat ??= "dddd, MMMM Do YYYY, h:mm:ss a"
 
-        unpatch = after("generate", RowManager.prototype, ([row], { message }) => {
+        patches.push(before("generate", RowManager.prototype, ([row]) => {
             // Return if it's not a message row
             if (row.rowType !== 1) return
-            message.timestamp = renderTimestamp(row.message.timestamp, storage.selected)
-        })
+            if (storage.separateMessages) row.isFirst = true
+        }))
+
+        patches.push(after("generate", RowManager.prototype, ([row], { message }) => {
+            // Return if it's not a message row
+            if (row.rowType !== 1) return
+            if (message.timestamp) message.timestamp = renderTimestamp(row.message.timestamp, storage.selected)
+        }))
     },
     onUnload: () => {
-        unpatch()
+        patches.forEach(unpatch => unpatch())
     },
     settings: Settings,
 }

src/ui/pages/Settings.tsx

@@ -6,7 +6,7 @@ import { Forms, General } from "@vendetta/ui/components";
 import renderTimestamp from "../../lib/renderTimestamp";
 
 const { ScrollView } = General;
-const { FormSection, FormRow, FormDivider } = Forms;
+const { FormSection, FormRow, FormDivider, FormSwitchRow } = Forms;
 const RowCheckmark = findByName("RowCheckmark");
 const { ClearButtonVisibility, default: InputView } = findByProps("ClearButtonVisibility");
 
@@ -39,5 +39,15 @@ export default function Settings() {
             )}
             {storage.selected === "custom" && <CustomTimeInputRow value={storage.customFormat} onChangeText={(t) => storage.customFormat = t} placeholder="dddd, MMMM Do YYYY, h:mm:ss a" />}
         </FormSection>
+        <FormSection>
+            <FormSwitchRow
+                label="Separate messages"
+                subLabel="Always shows username, avatar and timestamp for each message"
+                value={storage.separateMessages}
+                onValueChange={(v: boolean) => {
+                    storage.separateMessages = v;
+                }}
+            />
+        </FormSection>
     </ScrollView>
 }