rename all enums to plural

src/View/Components/boardViewToggleButton.tsx

@@ -1,7 +1,7 @@
 import * as React from "bloatless-react";
 
 import BoardViewModel, {
-    BoardPageType,
+    BoardPageTypes,
 } from "../../ViewModel/Pages/boardViewModel";
 
 import { RibbonButton } from "./ribbonButton";
@@ -9,7 +9,7 @@ import { RibbonButton } from "./ribbonButton";
 export function BoardViewToggleButton(
     label: string,
     icon: string,
-    page: BoardPageType,
+    page: BoardPageTypes,
     boardViewModel: BoardViewModel,
 ) {
     function select() {

src/View/Components/chatMessage.tsx

@@ -1,7 +1,7 @@
 import * as React from "bloatless-react";
 
 import { ChatMessageInfoModal } from "../Modals/chatMessageInfoModal";
-import { ChatMessageStatus } from "../../Model/Chat/chatModel";
+import { ChatMessageStatuses } from "../../Model/Chat/chatModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { translations } from "../translations";
 import { MessageReactionButtonRow } from "./messageReactionButtonRow";
@@ -11,11 +11,11 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
         [chatMessageViewModel.status],
         () => {
             switch (chatMessageViewModel.status.value) {
-                case ChatMessageStatus.Outbox:
+                case ChatMessageStatuses.Outbox:
                     return "hourglass_top";
-                case ChatMessageStatus.Sent:
+                case ChatMessageStatuses.Sent:
                     return "check";
-                case ChatMessageStatus.Received:
+                case ChatMessageStatuses.Received:
                     return "done_all";
                 default:
                     return "warning";

src/View/Components/chatViewToggleButton.tsx

@@ -1,7 +1,7 @@
 import * as React from "bloatless-react";
 
 import ChatViewModel, {
-    ChatPageType,
+    ChatPageTypes,
 } from "../../ViewModel/Chat/chatViewModel";
 
 import { RibbonButton } from "./ribbonButton";
@@ -9,7 +9,7 @@ import { RibbonButton } from "./ribbonButton";
 export function ChatViewToggleButton(
     label: string,
     icon: string,
-    page: ChatPageType,
+    page: ChatPageTypes,
     chatViewModel: ChatViewModel,
 ) {
     function select() {
@@ -22,7 +22,7 @@ export function ChatViewToggleButton(
     );
 
     const isHighlighted = new React.State(false);
-    if (page == ChatPageType.Messages) {
+    if (page == ChatPageTypes.Messages) {
         chatViewModel.hasUnreadMessages.subscribe(
             (hasUnreadMessages) => (isHighlighted.value = hasUnreadMessages),
         );

src/View/Components/colorPicker.tsx

@@ -1,11 +1,11 @@
 import * as React from "bloatless-react";
 
-import { Color } from "../../colors";
+import { Colors } from "../../colors";
 
-export function ColorPicker(selectedColor: React.State<Color>) {
+export function ColorPicker(selectedColor: React.State<Colors>) {
     return (
         <div class="flex-row gap width-input">
-            {...Object.values(Color).map((color) => {
+            {...Object.values(Colors).map((color) => {
                 const isSelected = React.createProxyState(
                     [selectedColor],
                     () => selectedColor.value == color,

src/View/Components/ribbonButton.tsx

@@ -1,7 +1,7 @@
 import * as React from "bloatless-react";
 
 import BoardViewModel, {
-    BoardPageType,
+    BoardPageTypes,
 } from "../../ViewModel/Pages/boardViewModel";
 
 export function RibbonButton(