autopilot proposal

K0IN · Aug 3, 2024 · 29d3a88 · 29d3a88
1 parent 153d417
commit 29d3a88
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 24 deletions.
diff --git 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
@@ -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;
diff --git a/app/frontend/src/manifest.json b/app/frontend/src/manifest.json
@@ -55,15 +55,15 @@
       "platform": "android"
     },
     {
-      "src": "/assets/icons/desktop-screenshot.png",
+      "src": "/assets/screenshots/desktop-screenshot.png",
       "sizes": "2038x1301",
       "type": "image/png",
       "form_factor": "wide",
       "label": "Home screen of Awesome App",
       "platform": "windows"
     },
     {
-      "src": "/assets/icons/desktop-screenshot.png",
+      "src": "/assets/screenshots/desktop-screenshot.png",
       "sizes": "2038x1301",
       "type": "image/png",
       "form_factor": "wide",