add placeholderView component

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 (
-                                <div class="width-100 height-100 flex-column justify-center align-center">
-                                    <span class="secondary slide-up">
-                                        {
-                                            coreViewModel.translations.chatPage
-                                                .calendar.noEvents
-                                        }
-                                    </span>
-                                </div>
+                            return PlaceholderView(
+                                coreViewModel.translations.chatPage.calendar
+                                    .noEvents,
                             );
                         } 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 (
-                    <div class="pane align-center justify-center">
-                        <span class="secondary">
-                            {
-                                coreViewModel.translations.chatPage.task
-                                    .noBoardSelected
-                            }
-                        </span>
-                    </div>
+                return PlaceholderView(
+                    coreViewModel.translations.chatPage.task.noBoardSelected,
                 );
             }
             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(
-                        (x) => [languageNames[x], x],
-                    ),
+                    Object.values(Languages).map((x) => [languageNames[x], x]),
                 ),
                 settingsViewModel.language,
             )}