From 98d56ee6b4c12d5334191c5e4bf4de5cc4b6f4b0 Mon Sep 17 00:00:00 2001
From: "codeautopilot[bot]"
 <131053011+codeautopilot[bot]@users.noreply.github.com>
Date: Sat, 3 Aug 2024 23:43:07 +0000
Subject: [PATCH] autopilot proposal

---
 .../src/components/message/message.css        |  1 +
 .../src/components/messages/messages.tsx      | 75 +++++++++++++------
 app/frontend/src/manifest.json                |  4 +-
 3 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/app/frontend/src/components/message/message.css b/app/frontend/src/components/message/message.css
index 5f631e8..4b76099 100644
--- a/app/frontend/src/components/message/message.css
+++ b/app/frontend/src/components/message/message.css
@@ -32,6 +32,7 @@
     grid-area: body;
     padding-left: 5px;
     padding-right: 5px;
+    white-space: pre-line;
 }
 
 .messagetags {
diff --git a/app/frontend/src/components/messages/messages.tsx b/app/frontend/src/components/messages/messages.tsx
index 7265ed4..76b0f2f 100644
--- a/app/frontend/src/components/messages/messages.tsx
+++ b/app/frontend/src/components/messages/messages.tsx
@@ -4,7 +4,7 @@ import { useLastOpenTime } from '../../hooks/use-lastopen';
 import { useMessageReceiver } from '../../hooks/use-messagereceiver';
 import Message from '../message/message';
 import style from './messages.css';
-import { useEffect } from 'preact/hooks';
+import { useEffect, useState } from 'preact/hooks';
 
 const Messages: FunctionalComponent = () => {
     const messages = useMessageReceiver();
@@ -13,33 +13,64 @@ const Messages: FunctionalComponent = () => {
     const newMessages = messages.filter(e => !(e.receivedAt <= lastOpenTime));
     const oldMessages = messages.filter(e => e.receivedAt <= lastOpenTime);
 
+    const [currentPage, setCurrentPage] = useState(1);
+    const [messagesPerPage] = useState(10);
+
+    const indexOfLastMessage = currentPage * messagesPerPage;
+    const indexOfFirstMessage = indexOfLastMessage - messagesPerPage;
+    const currentNewMessages = newMessages.slice(indexOfFirstMessage, indexOfLastMessage);
+    const currentOldMessages = oldMessages.slice(indexOfFirstMessage, indexOfLastMessage);
+
+    const totalPagesNew = Math.ceil(newMessages.length / messagesPerPage);
+    const totalPagesOld = Math.ceil(oldMessages.length / messagesPerPage);
+
+    const handleNextPage = () => {
+        if (currentPage < Math.max(totalPagesNew, totalPagesOld)) {
+            setCurrentPage(currentPage + 1);
+        }
+    };
+
+    const handlePrevPage = () => {
+        if (currentPage > 1) {
+            setCurrentPage(currentPage - 1);
+        }
+    };
+
     useEffect(() => {
         if (navigator && (navigator as any).clearAppBadge) {
             (navigator as any).clearAppBadge();
         }
     }, [messages]);
 
-    return (<div class={style.content}>
-        <div class={style.main}>
-            <ul class={style.messagelist}>
-                {newMessages.map((message) => (
-                    <li class={style.nobullet}>
-                        <Message message={message} />
-                    </li>)
-                )}
-            </ul>
-
-            {(newMessages.length > 0) && <div class={style.divider}></div>}
-
-            <ul class={style.messagelist}>
-                {oldMessages.map((message) => (
-                    <li class={style.nobullet}>
-                        <Message message={message} />
-                    </li>)
-                )}
-            </ul>
+    return (
+        <div class={style.content}>
+            <div class={style.main}>
+                <ul class={style.messagelist}>
+                    {currentNewMessages.map((message) => (
+                        <li class={style.nobullet}>
+                            <Message message={message} />
+                        </li>
+                    ))}
+                </ul>
+
+                {(newMessages.length > 0) && <div class={style.divider}></div>}
+
+                <ul class={style.messagelist}>
+                    {currentOldMessages.map((message) => (
+                        <li class={style.nobullet}>
+                            <Message message={message} />
+                        </li>
+                    ))}
+                </ul>
+
+                <div class={style.pagination}>
+                    <button onClick={handlePrevPage} disabled={currentPage === 1}>Previous</button>
+                    <span>Page {currentPage}</span>
+                    <button onClick={handleNextPage} disabled={currentPage >= Math.max(totalPagesNew, totalPagesOld)}>Next</button>
+                </div>
+            </div>
         </div>
-    </div>)
-}
+    );
+};
 
 export default Messages;
\ No newline at end of file
diff --git a/app/frontend/src/manifest.json b/app/frontend/src/manifest.json
index e21f93f..cacca1c 100644
--- a/app/frontend/src/manifest.json
+++ b/app/frontend/src/manifest.json
@@ -55,7 +55,7 @@
       "platform": "android"
     },
     {
-      "src": "/assets/icons/desktop-screenshot.png",
+      "src": "/assets/screenshots/desktop-screenshot.png",
       "sizes": "2038x1301",
       "type": "image/png",
       "form_factor": "wide",
@@ -63,7 +63,7 @@
       "platform": "windows"
     },
     {
-      "src": "/assets/icons/desktop-screenshot.png",
+      "src": "/assets/screenshots/desktop-screenshot.png",
       "sizes": "2038x1301",
       "type": "image/png",
       "form_factor": "wide",