add placeholderView component

dist/index.js

@@ -3238,6 +3238,11 @@
     return TaskEntry(taskViewModel);
   };
 
+  // src/View/Components/placeholderView.tsx
+  function PlaceholderView(text) {
+    return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 flex-column justify-center align-center" }, /* @__PURE__ */ createElement("span", { class: "secondary slide-up" }, text));
+  }
+
   // src/View/ChatPages/calendarPage.tsx
   function CalendarPage(coreViewModel2, calendarPageViewModel) {
     calendarPageViewModel.loadData();
@@ -3279,7 +3284,9 @@
             [listState],
             () => {
               if (listState.value.size == 0) {
-                return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 flex-column justify-center align-center" }, /* @__PURE__ */ createElement("span", { class: "secondary slide-up" }, coreViewModel2.translations.chatPage.calendar.noEvents));
+                return PlaceholderView(
+                  coreViewModel2.translations.chatPage.calendar.noEvents
+                );
               } else {
                 return /* @__PURE__ */ createElement(
                   "div",
@@ -4377,7 +4384,9 @@
       () => {
         const selectedBoardId = taskPageViewModel.selectedBoardId.value;
         if (selectedBoardId == void 0) {
-          return /* @__PURE__ */ createElement("div", { class: "pane align-center justify-center" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.chatPage.task.noBoardSelected));
+          return PlaceholderView(
+            coreViewModel2.translations.chatPage.task.noBoardSelected
+          );
         }
         const selectedBoard = taskPageViewModel.boardViewModels.value.get(selectedBoardId);
         if (selectedBoard == void 0) {
@@ -6420,7 +6429,16 @@
 
   // src/View/Components/splitModal.tsx
   function SplitModal(leftView, rightView, extendedStyle = false, navigationState) {
-    const view = /* @__PURE__ */ createElement("div", { class: "split-modal", "toggle:extended": extendedStyle, "toggle:primitive": navigationState == void 0 }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": leftView })), /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": rightView }));
+    const view = /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "split-modal",
+        "toggle:extended": extendedStyle,
+        "toggle:primitive": navigationState == void 0
+      },
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": leftView })),
+      /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": rightView })
+    );
     function scrollToDetails() {
       view.scrollLeft = view.scrollWidth;
     }
@@ -6871,9 +6889,7 @@
   function SettingsRegionalPane(coreViewModel2, settingsViewModel2) {
     return /* @__PURE__ */ createElement("div", { class: "slide-up" }, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.settings.pages.regional), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.settings.language), OptionButtonList(
       new ListState(
-        Object.values(Languages).map(
+        Object.values(Languages).map((x) => [languageNames[x], x])
-          (x) => [languageNames[x], x]
-        )
       ),
       settingsViewModel2.language
     ), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.settings.firstDayOfWeekLabel), OptionButtonList(

src/View/ChatPages/calendarPage.tsx

@@ -9,6 +9,7 @@ import { TaskSettingsModal } from "../Modals/taskSettingsModal";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { setFocusWithDelay } from "../utility";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import { PlaceholderView } from "../Components/placeholderView";
 
 export function CalendarPage(
     coreViewModel: CoreViewModel,
@@ -58,15 +59,9 @@ export function CalendarPage(
                     [listState],
                     () => {
                         if (listState.value.size == 0) {
-                            return (
+                            return PlaceholderView(
-                                <div class="width-100 height-100 flex-column justify-center align-center">
+                                coreViewModel.translations.chatPage.calendar
-                                    <span class="secondary slide-up">
+                                    .noEvents,
-                                        {
-                                            coreViewModel.translations.chatPage
-                                                .calendar.noEvents
-                                        }
-                                    </span>
-                                </div>
                             );
                         } else {
                             return (

src/View/ChatPages/taskPage.tsx

@@ -6,6 +6,7 @@ import { BoardPage } from "./boardPage";
 import { BoardViewModelToEntry } from "../Components/boardEntry";
 import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import { PlaceholderView } from "../Components/placeholderView";
 
 export function TaskPage(
     coreViewModel: CoreViewModel,
@@ -23,15 +24,8 @@ export function TaskPage(
         () => {
             const selectedBoardId = taskPageViewModel.selectedBoardId.value;
             if (selectedBoardId == undefined) {
-                return (
+                return PlaceholderView(
-                    <div class="pane align-center justify-center">
+                    coreViewModel.translations.chatPage.task.noBoardSelected,
-                        <span class="secondary">
-                            {
-                                coreViewModel.translations.chatPage.task
-                                    .noBoardSelected
-                            }
-                        </span>
-                    </div>
                 );
             }
             const selectedBoard =

src/View/Components/placeholderView.tsx

@@ -0,0 +1,9 @@
+import * as React from "bloatless-react";
+
+export function PlaceholderView(text: string) {
+    return (
+        <div class="width-100 height-100 flex-column justify-center align-center">
+            <span class="secondary slide-up">{text}</span>
+        </div>
+    );
+}

src/View/Components/splitModal.tsx

@@ -9,7 +9,11 @@ export function SplitModal(
     navigationState?: React.State<any>,
 ) {
     const view = (
-        <div class="split-modal" toggle:extended={extendedStyle} toggle:primitive={navigationState == undefined}>
+        <div
+            class="split-modal"
+            toggle:extended={extendedStyle}
+            toggle:primitive={navigationState == undefined}
+        >
             <div>
                 <div class="scroll-area" children:set={leftView}></div>
             </div>

src/View/Modals/settingsModal.tsx

@@ -137,9 +137,7 @@ function SettingsRegionalPane(
             <h3>{coreViewModel.translations.settings.language}</h3>
             {OptionButtonList(
                 new React.ListState<[string, string]>(
-                    Object.values(Languages).map(
+                    Object.values(Languages).map((x) => [languageNames[x], x]),
-                        (x) => [languageNames[x], x],
-                    ),
                 ),
                 settingsViewModel.language,
             )}