create separate component for home page buttons

src/Model/Chat/chatModel.ts

@@ -119,7 +119,6 @@ export default class ChatModel {
             this.storageModel.writeStringifiable(reactionPath, reaction);
         }
         this.reactionHandlerManager.trigger(reaction);
-
     };
 
     handleMessageSent = (chatMessage: ChatMessage): void => {
@@ -417,7 +416,11 @@ export default class ChatModel {
         const fileContent = FileModel.createFileContent(v4(), "reaction");
         const reaction: ChatMessageReaction = {
             ...fileContent,
-            fileId: ChatModel.createMessageReactionId(messageId, content, sender),
+            fileId: ChatModel.createMessageReactionId(
+                messageId,
+                content,
+                sender,
+            ),
 
             messageId,
             sender,
@@ -427,9 +430,13 @@ export default class ChatModel {
         return reaction;
     };
 
-    static createMessageReactionId = (messageId: string, content: ReactionSymbols, sender: string): string => {
+    static createMessageReactionId = (
+        messageId: string,
+        content: ReactionSymbols,
+        sender: string,
+    ): string => {
         return messageId + sender + reactionStringMap[content];
-    }
+    };
 }
 
 // types
@@ -442,8 +449,8 @@ export enum ReactionSymbols {
     Question = "❓",
 }
 
-const reactionStringMap: {[key: ReactionSymbols|string]: string} = {}
-Object.entries(ReactionSymbols).forEach(value => {
+const reactionStringMap: { [key: ReactionSymbols | string]: string } = {};
+Object.entries(ReactionSymbols).forEach((value) => {
     reactionStringMap[value[1]] = value[0];
 });
 

src/View/ChatPages/messagePage.css

@@ -40,7 +40,6 @@
 }
 
 @media (min-width: 700px) {
-
     #message-page #composer .content-width-constraint,
     #message-page #composer .input-width-constraint {
         display: flex;
@@ -171,22 +170,22 @@
     text-align: right;
 }
 
-.message-bubble>.message-reaction-row {
+.message-bubble > .message-reaction-row {
     max-width: var(--max-input-width);
     width: 100%;
 
     padding: var(--gap-between-tiles);
     background: var(--surface);
-    
+
     display: none !important;
     overflow: hidden;
 }
 
-.message-bubble>.message-reaction-row:has(button:not([zero])) {
+.message-bubble > .message-reaction-row:has(button:not([zero])) {
     display: grid !important;
 }
 
-.message-bubble>.message-reaction-row button {
+.message-bubble > .message-reaction-row button {
     min-height: unset;
     height: 100%;
     width: 100%;
@@ -196,7 +195,7 @@
     animation: slide-up var(--animation-duration);
 }
 
-.message-bubble>.message-reaction-row button[zero] {
+.message-bubble > .message-reaction-row button[zero] {
     display: none;
 }
 
@@ -208,4 +207,4 @@
     .message-reaction-row {
         grid-template-columns: repeat(3, minmax(80px, 1fr));
     }
-}
+}

src/View/Components/chatMessage.tsx

@@ -57,7 +57,6 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
                         <span class="icon">info</span>
                     </button>
                 </div>
-
             </div>
             {MessageReactionButtonRow(chatMessageViewModel)}
             {ChatMessageInfoModal(chatMessageViewModel)}

src/View/Components/homePageButton.tsx

@@ -0,0 +1,12 @@
+import * as React from "bloatless-react";
+
+export function HomePageButton(action: () => void, label: string) {
+    return (
+        <button class="tile flex-no" on:click={action}>
+            <span class="icon">sync_alt</span>
+            <div>
+                <span>{label}</span>
+            </div>
+        </button>
+    );
+}

src/View/Components/messageReactionButton.tsx

@@ -1,5 +1,8 @@
 import * as React from "bloatless-react";
-import { ChatMessageReaction, ReactionSymbols } from "../../Model/Chat/chatModel";
+import {
+    ChatMessageReaction,
+    ReactionSymbols,
+} from "../../Model/Chat/chatModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { translations } from "../translations";
 
@@ -68,7 +71,7 @@ export function MessageReactionButton(
     reactionState.subscribe(() => {
         isActive.value = checkIsHighlighted();
         isZero.value = reactionState.value.size == 0;
-    })
+    });
 
     return (
         <button

src/View/Components/messageReactionButtonRow.tsx

@@ -13,14 +13,8 @@ export function MessageReactionButtonRow(
                 chatMessageViewModel,
                 ReactionSymbols.ThumbsUp,
             )}
-            {MessageReactionButton(
-                chatMessageViewModel,
-                ReactionSymbols.Check,
-            )}
-            {MessageReactionButton(
-                chatMessageViewModel,
-                ReactionSymbols.Stop,
-            )}
+            {MessageReactionButton(chatMessageViewModel, ReactionSymbols.Check)}
+            {MessageReactionButton(chatMessageViewModel, ReactionSymbols.Stop)}
             {MessageReactionButton(
                 chatMessageViewModel,
                 ReactionSymbols.Attention,

src/View/homePage.tsx

@@ -12,6 +12,7 @@ import SettingsViewModel from "../ViewModel/Global/settingsViewModel";
 import StorageViewModel from "../ViewModel/Global/storageViewModel";
 import { translations } from "./translations";
 import CoreViewModel from "../ViewModel/Global/coreViewModel";
+import { HomePageButton } from "./Components/homePageButton";
 
 export function HomePage(
     coreVieWModel: CoreViewModel,
@@ -129,25 +130,14 @@ export function HomePage(
 
             <hr></hr>
 
-            <button
-                class="tile flex-no"
-                on:click={fileTransferViewModel.showDirectionSelectionModal}
-            >
-                <span class="icon">sync_alt</span>
-                <div>
-                    <span>{translations.homePage.transferDataButton}</span>
-                </div>
-            </button>
-
-            <button
-                class="tile flex-no"
-                on:click={storageViewModel.showStorageModal}
-            >
-                <span class="icon">hard_drive_2</span>
-                <div>
-                    <span>{translations.homePage.manageStorageButton}</span>
-                </div>
-            </button>
+            {HomePageButton(
+                fileTransferViewModel.showDirectionSelectionModal,
+                translations.homePage.transferDataButton,
+            )}
+            {HomePageButton(
+                storageViewModel.showStorageModal,
+                translations.homePage.manageStorageButton,
+            )}
 
             <hr></hr>
 

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -107,7 +107,11 @@ export default class ChatMessageViewModel {
     };
 
     sendReaction = (content: ReactionSymbols, isDeleting: boolean): void => {
-        this.messagePageViewModel.sendReaction(this.chatMessage.id, content, isDeleting);
+        this.messagePageViewModel.sendReaction(
+            this.chatMessage.id,
+            content,
+            isDeleting,
+        );
     };
 
     // load

src/ViewModel/Global/coreViewModel.ts

@@ -1,7 +1,7 @@
 import * as React from "bloatless-react";
 
 export default class CoreViewModel {
-    readonly BUILD = "Build 26.04.08.C"
+    readonly BUILD = "Build 26.04.08.C";
 
     // DRAG & DROP
     draggedObject: React.State<any> = new React.State<any>(undefined);

src/ViewModel/Pages/boardViewModel.ts

@@ -273,7 +273,8 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
 
         this.color.subscribe(() => {
             if (this.isSelected.value == false) return;
-            if (this.chatViewModel.selectedPage.value != ChatPageTypes.Tasks) return;
+            if (this.chatViewModel.selectedPage.value != ChatPageTypes.Tasks)
+                return;
             this.applyColor();
         });
 

src/ViewModel/Pages/messagePageViewModel.ts

@@ -41,8 +41,16 @@ export default class MessagePageViewModel {
         messageViewModel.loadData();
     };
 
-    sendReaction = (messageId: string, content: ReactionSymbols, isDeleting: boolean): void => {
-        this.chatViewModel.chatModel.sendReaction(messageId, content, isDeleting);
+    sendReaction = (
+        messageId: string,
+        content: ReactionSymbols,
+        isDeleting: boolean,
+    ): void => {
+        this.chatViewModel.chatModel.sendReaction(
+            messageId,
+            content,
+            isDeleting,
+        );
     };
 
     // view