improve keystrokes, cleanup

src/View/ChatPages/boardKanbanPage.tsx

@@ -10,8 +10,8 @@ import { FilteredList } from "../Components/filteredList";
 import { TaskCategoryBulkChangeViewModel } from "../../ViewModel/Utility/taskPropertyBulkChangeViewModel";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
-import { allowDrop } from "../utility";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import { ViewController } from "../viewController";
 
 export function BoardKanbanPage(
     coreViewModel: CoreViewModel,
@@ -75,7 +75,7 @@ function Column(
             const view = (
                 <div
                     class="flex-column flex-no"
-                    on:dragover={allowDrop}
+                    on:dragover={ViewController.allowDrop}
                     on:drop={drop}
                 >
                     <div class="flex-row width-input">

src/View/ChatPages/boardPage.tsx

@@ -11,7 +11,6 @@ import { BoardViewToggleButton } from "../Components/boardViewToggleButton";
 import { SearchModal } from "../Modals/searchModal";
 import { TaskSettingsModal } from "../Modals/taskSettingsModal";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
-import { setFocusWithDelay } from "../utility";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import { ViewController } from "../viewController";
 
@@ -23,7 +22,7 @@ export function BoardPage(
 
     // main content
     const persistenceId = boardViewModel.boardInfo.fileId;
-    const pages = ViewController.boardPages.setItems(persistenceId, () =>
+    const pages = ViewController.boardPages.setState(persistenceId, () =>
         React.createProxyState([boardViewModel.selectedPage], () => {
             switch (boardViewModel.selectedPage.value) {
                 case BoardPageTypes.Kanban: {
@@ -54,7 +53,7 @@ export function BoardPage(
             if (boardViewModel.selectedTaskViewModel.value == undefined) {
                 return <div></div>;
             } else {
-                setFocusWithDelay();
+                ViewController.setFocusWithDelay();
 
                 return TaskSettingsModal(
                     coreViewModel,

src/View/ChatPages/boardStatusGridPage.tsx

@@ -15,8 +15,8 @@ import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 import { FilteredList } from "../Components/filteredList";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
-import { allowDrop } from "../utility";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import { ViewController } from "../viewController";
 
 export function BoardStatusGridPage(
     coreViewModel: CoreViewModel,
@@ -246,7 +246,7 @@ function StatusColumn(
     const view = (
         <div
             class="status-column gap"
-            on:dragover={allowDrop}
+            on:dragover={ViewController.allowDrop}
             on:drop={drop}
             children:append={[taskViewModels, TaskViewModelToEntry]}
         ></div>

src/View/ChatPages/calendarPage.tsx

@@ -2,14 +2,13 @@ import "./calendarPage.css";
 
 import * as React from "bloatless-react";
 
-import CalendarModel from "../../Model/Files/calendarModel";
 import CalendarPageViewModel from "../../ViewModel/Pages/calendarPageViewModel";
 import { MonthGrid } from "../Components/monthGrid";
 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";
+import { ViewController } from "../viewController";
 
 export function CalendarPage(
     coreViewModel: CoreViewModel,
@@ -95,7 +94,7 @@ export function CalendarPage(
             ) {
                 return <div></div>;
             } else {
-                setFocusWithDelay();
+                ViewController.setFocusWithDelay();
 
                 return TaskSettingsModal(
                     coreViewModel,

src/View/ChatPages/messagePage.css

@@ -9,11 +9,19 @@
 
 #chat-page #main #message-page .content #message-container {
     --message-container-padding: var(--control-height);
-    padding-bottom: calc(var(--message-container-padding) + var(--content-padding)) !important;
+    padding-bottom: calc(
+        var(--message-container-padding) + var(--content-padding)
+    ) !important;
 }
 
-#chat-page #main #message-page .content:has(.reply-preview-wrapper .reply-preview) #message-container {
-    --message-container-padding: calc(2 * var(--control-height) + var(--gap-between-tiles));
+#chat-page
+    #main
+    #message-page
+    .content:has(.reply-preview-wrapper .reply-preview)
+    #message-container {
+    --message-container-padding: calc(
+        2 * var(--control-height) + var(--gap-between-tiles)
+    );
 }
 
 #message-page #message-container {
@@ -62,7 +70,7 @@
     gap: var(--gap-between-tiles);
 }
 
-#message-page #composer .reply-preview-wrapper .reply-preview>div {
+#message-page #composer .reply-preview-wrapper .reply-preview > div {
     display: flex;
     align-items: center;
     gap: var(--text-gap);
@@ -81,7 +89,6 @@
 }
 
 @media (min-width: 700px) {
-
     #message-page #composer .content-width-constraint,
     #message-page #composer .input-width-constraint {
         display: flex;
@@ -227,7 +234,7 @@
     text-align: right;
 }
 
-.message-bubble>.inline-reply {
+.message-bubble > .inline-reply {
     cursor: pointer;
 
     display: flex;
@@ -246,7 +253,7 @@
     border-left: var(--outline-width) solid var(--primary);
 }
 
-.message-bubble>.message-reaction-row {
+.message-bubble > .message-reaction-row {
     max-width: var(--max-input-width);
     width: 100%;
 
@@ -257,11 +264,11 @@
     overflow: hidden;
 }
 
-.message-bubble>.message-reaction-row:has(button:not([count="0"])) {
+.message-bubble > .message-reaction-row:has(button:not([count="0"])) {
     display: grid !important;
 }
 
-.message-bubble>.message-reaction-row button {
+.message-bubble > .message-reaction-row button {
     min-height: unset;
     height: 100%;
     width: 100%;
@@ -271,7 +278,7 @@
     animation: slide-up var(--animation-duration);
 }
 
-.message-bubble>.message-reaction-row button[count="0"] {
+.message-bubble > .message-reaction-row button[count="0"] {
     display: none;
 }
 
@@ -285,7 +292,6 @@
     }
 }
 
-
 .grid.message-reaction-filter {
     grid-template-columns: repeat(3, 1fr);
-}
+}

src/View/ChatPages/messagePage.tsx

@@ -7,7 +7,6 @@ import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { ChatMessage } from "../Components/chatMessage";
 import { MessageFilterModal } from "../Modals/messageFilterModal";
-import { setFocusWithDelay } from "../utility";
 import { ViewController } from "../viewController";
 import { ReplyPreview } from "../Components/replyPreview";
 
@@ -34,7 +33,7 @@ export function MessagePage(
     );
 
     const persistenceId = messagePageViewModel.chatViewModel.chatModel.id;
-    const replyPreview = ViewController.inlineReplies.setItems(
+    const replyPreview = ViewController.inlineReplies.setState(
         persistenceId,
         () =>
             React.createProxyState(
@@ -70,10 +69,9 @@ export function MessagePage(
     );
     setTimeout(() => scrollDown(true), 100);
 
-    messagePageViewModel.replyingMessage.subscribeSilent(() => {
-        setFocusWithDelay();
-    })
-    setFocusWithDelay();
+    messagePageViewModel.focusSetter.subscribeSilent(() => {
+        ViewController.setFocusWithDelay();
+    });
 
     return (
         <div id="message-page">

src/View/ChatPages/taskPage.tsx

@@ -22,7 +22,7 @@ export function TaskPage(
     );
 
     const persistenceId = taskPageViewModel.chatViewModel.chatModel.id;
-    const pages = ViewController.taskPages.setItems(persistenceId, () =>
+    const pages = ViewController.taskPages.setState(persistenceId, () =>
         React.createProxyState([taskPageViewModel.selectedBoardId], () => {
             const selectedBoardId = taskPageViewModel.selectedBoardId.value;
             if (selectedBoardId == undefined) {