create separate component for home page buttons

dist/index.js

@@ -1495,7 +1495,11 @@
         const fileContent = FileModel2.createFileContent(v4_default(), "reaction");
         const reaction = {
           ...fileContent,
-          fileId: _ChatModel.createMessageReactionId(messageId, content, sender),
+          fileId: _ChatModel.createMessageReactionId(
+            messageId,
+            content,
+            sender
+          ),
           messageId,
           sender,
           content,
@@ -2103,7 +2107,11 @@
         }
       };
       this.sendReaction = (content, isDeleting) => {
-        this.messagePageViewModel.sendReaction(this.chatMessage.id, content, isDeleting);
+        this.messagePageViewModel.sendReaction(
+          this.chatMessage.id,
+          content,
+          isDeleting
+        );
       };
       // load
       this.loadData = () => {
@@ -2144,7 +2152,11 @@
         messageViewModel.loadData();
       };
       this.sendReaction = (messageId, content, isDeleting) => {
-        this.chatViewModel.chatModel.sendReaction(messageId, content, isDeleting);
+        this.chatViewModel.chatModel.sendReaction(
+          messageId,
+          content,
+          isDeleting
+        );
       };
       // view
       this.showChatMessage = (chatMessage) => {
@@ -2525,7 +2537,8 @@
       );
       this.color.subscribe(() => {
         if (this.isSelected.value == false) return;
-        if (this.chatViewModel.selectedPage.value != "tasks" /* Tasks */) return;
+        if (this.chatViewModel.selectedPage.value != "tasks" /* Tasks */)
+          return;
         this.applyColor();
       });
       this.selectedPage.subscribeSilent(() => {
@@ -4047,13 +4060,7 @@
     return /* @__PURE__ */ createElement("div", { class: "grid gap width-100 message-reaction-row" }, MessageReactionButton(
       chatMessageViewModel,
       "\u{1F44D}" /* ThumbsUp */
-    ), MessageReactionButton(
+    ), MessageReactionButton(chatMessageViewModel, "\u2705" /* Check */), MessageReactionButton(chatMessageViewModel, "\u{1F6D1}" /* Stop */), MessageReactionButton(
-      chatMessageViewModel,
-      "\u2705" /* Check */
-    ), MessageReactionButton(
-      chatMessageViewModel,
-      "\u{1F6D1}" /* Stop */
-    ), MessageReactionButton(
       chatMessageViewModel,
       "\u2757\uFE0F" /* Attention */
     ), MessageReactionButton(
@@ -6009,6 +6016,11 @@
     return ChatEntry(chatViewModel);
   };
 
+  // src/View/Components/homePageButton.tsx
+  function HomePageButton(action, label) {
+    return /* @__PURE__ */ createElement("button", { class: "tile flex-no", "on:click": action }, /* @__PURE__ */ createElement("span", { class: "icon" }, "sync_alt"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, label)));
+  }
+
   // src/View/homePage.tsx
   function HomePage(coreVieWModel2, storageViewModel2, settingsViewModel2, connectionViewModel2, fileTransferViewModel2, chatListViewModel2) {
     const overviewSection = /* @__PURE__ */ createElement("div", { id: "overview-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.overviewHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.serverAddress), /* @__PURE__ */ createElement(
@@ -6079,22 +6091,12 @@
         i.toString(),
         i.toString() == settingsViewModel2.firstDayOfWeekInput.value
       )
-    )), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
+    )), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), HomePageButton(
-      "button",
+      fileTransferViewModel2.showDirectionSelectionModal,
-      {
+      translations.homePage.transferDataButton
-        class: "tile flex-no",
+    ), HomePageButton(
-        "on:click": fileTransferViewModel2.showDirectionSelectionModal
+      storageViewModel2.showStorageModal,
-      },
+      translations.homePage.manageStorageButton
-      /* @__PURE__ */ createElement("span", { class: "icon" }, "sync_alt"),
-      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.transferDataButton))
-    ), /* @__PURE__ */ createElement(
-      "button",
-      {
-        class: "tile flex-no",
-        "on:click": storageViewModel2.showStorageModal
-      },
-      /* @__PURE__ */ createElement("span", { class: "icon" }, "hard_drive_2"),
-      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.manageStorageButton))
     ), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("b", { class: "secondary" }, coreVieWModel2.BUILD), /* @__PURE__ */ createElement("div", { class: "mobile-only" }, /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, /* @__PURE__ */ createElement("button", { class: "ghost width-50", "on:click": scrollToChat }, translations.homePage.scrollToChatButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))));
     const chatSection = /* @__PURE__ */ createElement("div", { id: "chat-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.chatsHeadline), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
       "input",

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} = {}
+const reactionStringMap: { [key: ReactionSymbols | string]: string } = {};
-Object.entries(ReactionSymbols).forEach(value => {
+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;

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(
+            {MessageReactionButton(chatMessageViewModel, ReactionSymbols.Check)}
-                chatMessageViewModel,
+            {MessageReactionButton(chatMessageViewModel, ReactionSymbols.Stop)}
-                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
+            {HomePageButton(
-                class="tile flex-no"
+                fileTransferViewModel.showDirectionSelectionModal,
-                on:click={fileTransferViewModel.showDirectionSelectionModal}
+                translations.homePage.transferDataButton,
-            >
+            )}
-                <span class="icon">sync_alt</span>
+            {HomePageButton(
-                <div>
+                storageViewModel.showStorageModal,
-                    <span>{translations.homePage.transferDataButton}</span>
+                translations.homePage.manageStorageButton,
-                </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>
 
             <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 => {
+    sendReaction = (
-        this.chatViewModel.chatModel.sendReaction(messageId, content, isDeleting);
+        messageId: string,
+        content: ReactionSymbols,
+        isDeleting: boolean,
+    ): void => {
+        this.chatViewModel.chatModel.sendReaction(
+            messageId,
+            content,
+            isDeleting,
+        );
     };
 
     // view