create separate component for home page buttons

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>