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

---
 .../src/components/message/message.css        |  1 +
 .../src/components/messages/messages.tsx      | 68 +++++++++++++------
 app/frontend/src/manifest.json                |  4 +-
 3 files changed, 49 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..1cc09e7 100644
--- a/app/frontend/src/components/messages/messages.tsx
+++ b/app/frontend/src/components/messages/messages.tsx
@@ -4,42 +4,66 @@ 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();
     const lastOpenTime = useLastOpenTime();
+    const [currentPage, setCurrentPage] = useState(1);
+    const [messagesPerPage, setMessagesPerPage] = useState(10);
 
     const newMessages = messages.filter(e => !(e.receivedAt <= lastOpenTime));
     const oldMessages = messages.filter(e => e.receivedAt <= lastOpenTime);
 
+    const paginatedMessages = (messages) => {
+        const startIndex = (currentPage - 1) * messagesPerPage;
+        const endIndex = startIndex + messagesPerPage;
+        return messages.slice(startIndex, endIndex);
+    };
+
+    const handleNextPage = () => {
+        setCurrentPage(prevPage => prevPage + 1);
+    };
+
+    const handlePreviousPage = () => {
+        setCurrentPage(prevPage => Math.max(prevPage - 1, 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}>
+                    {paginatedMessages(newMessages).map((message) => (
+                        <li class={style.nobullet}>
+                            <Message message={message} />
+                        </li>
+                    ))}
+                </ul>
+
+                {(newMessages.length > 0) && <div class={style.divider}></div>}
+
+                <ul class={style.messagelist}>
+                    {paginatedMessages(oldMessages).map((message) => (
+                        <li class={style.nobullet}>
+                            <Message message={message} />
+                        </li>
+                    ))}
+                </ul>
+
+                <div class={style.paginationControls}>
+                    <button onClick={handlePreviousPage} disabled={currentPage === 1}>Previous</button>
+                    <span>Page {currentPage}</span>
+                    <button onClick={handleNextPage} disabled={(currentPage * messagesPerPage) >= messages.length}>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",