add type annotations, improve ui

dist/index.js

@@ -2246,7 +2246,7 @@
   };
 
   // src/ViewModel/Global/coreViewModel.ts
-  var CoreViewModel = class {
+  var CoreViewModel = class _CoreViewModel {
     // init
     constructor(storageModel2, settingsModel2, connectionModel2, chatListModel2, fileTransferModel2) {
       this.storageModel = storageModel2;
@@ -2275,6 +2275,7 @@
         this.logContexts();
       };
       this.handleKeyDown = (e) => {
+        if (_CoreViewModel.checkIsKeystroke(e) == false) return;
         const contexts = this.contexts;
         while (contexts.length > 0) {
           const currentContext = contexts.pop();
@@ -3192,6 +3193,7 @@
           this.color.value
         );
         this.taskPageViewModel.updateBoard(newBoardInfoFileContent);
+        this.taskPageViewModel.selectBoard(this);
       };
       this.applyColor = () => {
         this.taskPageViewModel.chatViewModel.setDisplayedColor(
@@ -3370,8 +3372,10 @@
         () => this.searchViewModel.appliedQuery.value != ""
       );
       this.registerKeyStroke("=" /* Filter */, this.showFilterModal);
-      this.registerKeyStroke("backspace" /* CloseOrCancel */, this.hideFilterModal);
       this.registerKeyStroke("-" /* Reset */, this.resetFilter);
+      this.registerKeyStroke("backspace" /* CloseOrCancel */, this.hideFilterModal);
+      this.registerKeyStroke("," /* Settings */, this.showSettings);
+      this.registerKeyStroke("enter" /* Apply */, this.hideSettings);
       this.taskPageViewModel.registerContext(this.boardInfo.fileId, this);
     }
   };
@@ -4584,7 +4588,7 @@
     return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { class: "title" }, coreViewModel2.translations.chatPage.message.messagesHeadline), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
       "button",
       {
-        class: "ghost",
+        class: "ghost inset-outline",
         "on:click": messagePageViewModel.showFilterModal,
         "aria-label": coreViewModel2.translations.chatPage.message.filterMessagesButtonAudioLabel,
         "toggle:selected": messagePageViewModel.isFilterActive
@@ -4927,6 +4931,7 @@
 
   // src/View/Modals/boardSettingsModal.tsx
   function BoardSettingsModal(coreViewModel2, boardViewModel) {
+    boardViewModel.isPresentingSettingsModal.subscribe(setFocusWithDelay);
     return /* @__PURE__ */ createElement(
       "div",
       {
@@ -4936,6 +4941,7 @@
       /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.chatPage.task.boardSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.chatPage.task.boardNameInputLabel), /* @__PURE__ */ createElement(
         "input",
         {
+          id: "focused",
           "on:enter": boardViewModel.saveSettings,
           "bind:value": boardViewModel.name
         }

src/Model/Chat/chatListModel.ts

@@ -42,7 +42,7 @@ export default class ChatListModel {
         channel: string,
         fn: (chatModel: ChatModel) => void,
     ): void => {
-        const allChannels = channel.split("/");
+        const allChannels: string[] = channel.split("/");
 
         for (const chatModel of this.chatModels) {
             for (const channel of allChannels) {

src/Model/Chat/chatModel.ts

@@ -165,10 +165,10 @@ export default class ChatModel {
     };
 
     getNameAndChannel = (): [string, string] | false => {
-        const senderName = this.settingsModel.username;
+        const senderName: string = this.settingsModel.username;
         if (senderName == "") return false;
 
-        const allChannels = [this.info.primaryChannel];
+        const allChannels: string[] = [this.info.primaryChannel];
         for (const secondaryChannel of this.info.secondaryChannels) {
             allChannels.push(secondaryChannel);
         }
@@ -388,7 +388,7 @@ export default class ChatModel {
             stringifiedFile: "",
         };
         if (fileContent != undefined) {
-            const stringifiedFile = stringify(fileContent);
+            const stringifiedFile: string = stringify(fileContent);
             chatMessage.stringifiedFile = stringifiedFile;
         }
 
@@ -412,7 +412,8 @@ export default class ChatModel {
         content: ReactionSymbols,
         isDeleting: boolean,
     ): ChatMessageReaction => {
-        const fileContent = FileModel.createFileContent(v4(), "reaction");
+        const fileContent: FileContent<"reaction"> =
+            FileModel.createFileContent(v4(), "reaction");
         const reaction: ChatMessageReaction = {
             ...fileContent,
             fileId: ChatModel.createMessageReactionId(messageId, sender),

src/Model/Files/calendarModel.ts

@@ -71,7 +71,7 @@ export default class CalendarModel {
         date.setMonth(month - 1);
         date.setFullYear(year);
 
-        const firstWeekdayOfMonth = date.getDay();
+        const firstWeekdayOfMonth: number = date.getDay();
         const firstDayOfWeekSetting: number = parseInt(
             this.settingsModel.firstDayOfWeek,
         );

src/Model/Global/connectionModel.ts

@@ -75,7 +75,7 @@ export default class ConnectionModel {
             StorageModelSubPaths.ConnectionModel,
             filePaths.connectionModel.mailboxes,
         );
-        const mailboxFilePath = [...mailboxDirPath, address];
+        const mailboxFilePath: string[] = [...mailboxDirPath, address];
         return mailboxFilePath;
     };
 

src/Model/Global/settingsModel.ts

@@ -26,22 +26,22 @@ export default class SettingsModel {
     setName = (newValue: string): void => {
         this.username = newValue;
         this.storeSetting("username", newValue);
-    }
+    };
 
     setFirstDayOfWeek = (newValue: string): void => {
         this.firstDayOfWeek = newValue;
         this.storeSetting("firstDayOfWeek", newValue);
-    }
+    };
 
     setLanguage = (newValue: string): void => {
         this.language = newValue;
         this.storeSetting("language", newValue);
-    }
+    };
 
     setTheme = (newValue: string): void => {
         this.theme = newValue;
         this.storeSetting("theme", newValue);
-    }
+    };
 
     // load
     private readSetting = (
@@ -52,27 +52,27 @@ export default class SettingsModel {
             filePaths.settingsModel[pathName],
         );
         return this.storageModel.read(path);
-    }
+    };
 
     loadUsername = (): void => {
-        const content = this.readSetting("username");
+        const content: string | null = this.readSetting("username");
         this.username = content ?? "";
-    }
+    };
 
     loadFirstDayofWeek = (): void => {
-        const content = this.readSetting("firstDayOfWeek");
+        const content: string | null = this.readSetting("firstDayOfWeek");
         this.firstDayOfWeek = content ?? "0";
-    }
+    };
 
     loadLanguage = (): void => {
-        const content = this.readSetting("language");
+        const content: string | null = this.readSetting("language");
         this.language = content ?? SettingsModel.getSystemLanguage();
-    }
+    };
 
     loadTheme = (): void => {
-        const content = this.readSetting("theme");
+        const content: string | null = this.readSetting("theme");
         this.theme = content ?? ThemeSettings.System;
-    }
+    };
 
     // init
     constructor(storageModel: StorageModel) {

src/View/ChatPages/messagePage.tsx

@@ -66,7 +66,7 @@ export function MessagePage(
                         </span>
                         <span>
                             <button
-                                class="ghost"
+                                class="ghost inset-outline"
                                 on:click={messagePageViewModel.showFilterModal}
                                 aria-label={
                                     coreViewModel.translations.chatPage.message

src/View/Modals/boardSettingsModal.tsx

@@ -4,11 +4,14 @@ import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 import { ColorPicker } from "../Components/colorPicker";
 import { DangerousActionButton } from "../Components/dangerousActionButton";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import { setFocusWithDelay } from "../utility";
 
 export function BoardSettingsModal(
     coreViewModel: CoreViewModel,
     boardViewModel: BoardViewModel,
 ) {
+    boardViewModel.isPresentingSettingsModal.subscribe(setFocusWithDelay);
+
     return (
         <div
             class="modal"
@@ -33,6 +36,7 @@ export function BoardSettingsModal(
                                 }
                             </span>
                             <input
+                                id="focused"
                                 on:enter={boardViewModel.saveSettings}
                                 bind:value={boardViewModel.name}
                             ></input>

src/View/Modals/dataTransferModal.tsx

@@ -450,7 +450,9 @@ function TransferDataInputModal(
                                     }
                                 </span>
                                 <input
-                                    on:enter={fileTransferViewModel.prepareReceivingData}
+                                    on:enter={
+                                        fileTransferViewModel.prepareReceivingData
+                                    }
                                     bind:value={
                                         fileTransferViewModel.receivingTransferChannel
                                     }
@@ -468,7 +470,9 @@ function TransferDataInputModal(
                                     }
                                 </span>
                                 <input
-                                    on:enter={fileTransferViewModel.prepareReceivingData}
+                                    on:enter={
+                                        fileTransferViewModel.prepareReceivingData
+                                    }
                                     bind:value={
                                         fileTransferViewModel.receivingTransferKey
                                     }

src/View/Modals/searchModal.tsx

@@ -28,7 +28,7 @@ export function SearchModal<T>(
                     <h2>{headline}</h2>
                     <div class="flex-row width-input">
                         <input
-                        id="focused"
+                            id="focused"
                             placeholder={
                                 coreViewModel.translations.general.searchLabel
                             }

src/View/utility.ts

@@ -11,7 +11,9 @@ export function reload() {
 }
 
 export function setFocus() {
-    const focusedInModal = document.querySelector(".modal[open] #focused") as HTMLElement;
+    const focusedInModal = document.querySelector(
+        ".modal[open] #focused",
+    ) as HTMLElement;
     if (focusedInModal) return focusedInModal.focus();
     document.getElementById("focused")?.focus();
 }

src/ViewModel/Chat/chatListViewModel.ts

@@ -88,7 +88,8 @@ export default class ChatListViewModel {
     loadChats = (): void => {
         this.chatViewModels.clear();
         for (const chatModel of this.coreViewModel.chatListModel.chatModels.values()) {
-            const chatViewModel = this.createChatViewModel(chatModel);
+            const chatViewModel: ChatViewModel =
+                this.createChatViewModel(chatModel);
             this.trackChat(chatViewModel);
         }
         this.updateIndices();

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -138,7 +138,7 @@ export default class ChatMessageViewModel {
                 return;
             }
 
-            let count = 0;
+            let count: number = 0;
             switch (content) {
                 case ReactionSymbols.ThumbsUp: {
                     count = this.reactionsThumbsUpCount.value;

src/ViewModel/Chat/chatViewModel.ts

@@ -210,7 +210,9 @@ export default class ChatViewModel extends ContextHost<ChatPageTypes> {
         );
 
         // context
-        this.chatListViewModel.selectedChat.subscribeSilent(this.updateContexts);
+        this.chatListViewModel.selectedChat.subscribeSilent(
+            this.updateContexts,
+        );
         this.selectedPage.subscribeSilent(this.updateContexts);
     }
 }

src/ViewModel/Global/coreViewModel.ts

@@ -34,9 +34,14 @@ export default class CoreViewModel {
         this.logContexts();
     }
     closeContext = (contextId: string): void => {
-        if (!this.contexts.map(context=>context.contextId).includes(contextId)) return;
+        if (
+            !this.contexts
+                .map((context) => context.contextId)
+                .includes(contextId)
+        )
+            return;
         while (this.contexts.length > 0) {
-            const currentContext = this.context;
+            const currentContext: Context = this.context;
             this.contextStack.delete(currentContext.contextId);
             if (currentContext.contextId == contextId) break;
         }
@@ -44,9 +49,10 @@ export default class CoreViewModel {
     };
 
     handleKeyDown = (e: KeyboardEvent): void => {
-        const contexts = this.contexts;
+        if (CoreViewModel.checkIsKeystroke(e) == false) return;
+        const contexts: Context[] = this.contexts;
         while (contexts.length > 0) {
-            const currentContext = contexts.pop();
+            const currentContext: Context | undefined = contexts.pop();
             if (!currentContext) contexts;
             const isHandled: boolean = currentContext.handleKeystroke(e);
             if (isHandled == true) break;
@@ -90,7 +96,9 @@ export class Context {
     keystrokes = new Map<string, () => void>();
 
     handleKeystroke = (e: KeyboardEvent): boolean => {
-        const fn = this.keystrokes.get(e.key.toLowerCase());
+        const fn: (() => void) | undefined = this.keystrokes.get(
+            e.key.toLowerCase(),
+        );
         if (!fn) return false;
         e.preventDefault();
         fn();
@@ -122,7 +130,9 @@ export class ContextHost<T> extends Context {
 
     closeContext = (): void => {
         if (this.currentContext.value) {
-            this.coreViewModel.closeContext(this.currentContext.value.contextId);
+            this.coreViewModel.closeContext(
+                this.currentContext.value.contextId,
+            );
         }
         this.currentContext.value = undefined;
     };
@@ -130,11 +140,13 @@ export class ContextHost<T> extends Context {
     updateContexts = (): void => {
         if (this.isOpen == false) return;
 
-        const selectedContext = this.contexts.get(this.contextSelection);
+        const selectedContext: Context | undefined = this.contexts.get(
+            this.contextSelection,
+        );
         if (!selectedContext) return;
         if (selectedContext != this.currentContext.value) {
             this.closeContext();
-        };
+        }
 
         this.coreViewModel.logContexts();
 

src/ViewModel/Global/notificationViewModel.ts

@@ -13,7 +13,8 @@ export default class NotificationViewModel {
 
     // main
     showNotification = (message: ChatMessage): void => {
-        const notification = NotificationViewModel.createNotification(message);
+        const notification: Notification =
+            NotificationViewModel.createNotification(message);
         if (this.seenMessageIds.has(message.id)) return;
 
         const currentChat =
@@ -32,7 +33,7 @@ export default class NotificationViewModel {
     };
 
     openNotification = () => {
-        const notification = this.marquee.value;
+        const notification: Notification = this.marquee.value;
         if (notification == undefined) return;
 
         const chat = [
@@ -51,7 +52,7 @@ export default class NotificationViewModel {
             return this.stopLoop();
         }
 
-        const notification = this.messagesInMarquee.shift();
+        const notification: Notification = this.messagesInMarquee.shift();
         this.seenMessageIds.delete(notification.messageId);
         this.marquee.value = notification;
     };

src/ViewModel/Global/settingsViewModel.ts

@@ -64,7 +64,7 @@ export default class SettingsViewModel extends Context {
 
     // view
     applyTheme = (): void => {
-        let theme = this.theme.value;
+        let theme: string = this.theme.value;
         if (theme == ThemeSettings.System) {
             theme = SettingsViewModel.getSystemTheme();
         }
@@ -100,7 +100,10 @@ export default class SettingsViewModel extends Context {
         );
 
         // keystrokes
-        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideSettingsModal);
+        this.registerKeyStroke(
+            CommonKeys.CloseOrCancel,
+            this.hideSettingsModal,
+        );
     }
 
     static generateThemeMedia(): MediaQueryList {

src/ViewModel/Global/storageViewModel.ts

@@ -24,10 +24,11 @@ export default class StorageViewModel extends Context {
 
     // methods
     getSelectedItemContent = (): string => {
-        const path = StorageModel.stringToPathComponents(
+        const path: string[] = StorageModel.stringToPathComponents(
             this.selectedPath.value,
         );
-        const content = this.coreViewModel.storageModel.read(path);
+        const content: string | undefined =
+            this.coreViewModel.storageModel.read(path);
         return (
             (content ?? this.coreViewModel.translations.storage.notAFile) ||
             this.coreViewModel.translations.storage.contentEmpty
@@ -35,7 +36,7 @@ export default class StorageViewModel extends Context {
     };
 
     deleteSelectedItem = (): void => {
-        const path = StorageModel.stringToPathComponents(
+        const path: string[] = StorageModel.stringToPathComponents(
             this.selectedPath.value,
         );
         this.lastDeletedItemPath.value = this.selectedPath.value;

src/ViewModel/Pages/boardViewModel.ts

@@ -65,6 +65,8 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
                 this.color.value,
             );
         this.taskPageViewModel.updateBoard(newBoardInfoFileContent);
+
+        this.taskPageViewModel.selectBoard(this);
     };
 
     applyColor = (): void => {
@@ -305,8 +307,10 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
 
         // keystrokes
         this.registerKeyStroke(CommonKeys.Filter, this.showFilterModal);
-        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideFilterModal);
         this.registerKeyStroke(CommonKeys.Reset, this.resetFilter);
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideFilterModal);
+        this.registerKeyStroke(CommonKeys.Settings, this.showSettings);
+        this.registerKeyStroke(CommonKeys.Apply, this.hideSettings);
 
         this.taskPageViewModel.registerContext(this.boardInfo.fileId, this);
     }

src/ViewModel/Pages/taskPageViewModel.ts

@@ -22,7 +22,7 @@ export default class TaskPageViewModel extends ContextHost<string> {
     getBasePath = (): string[] => {
         return [...this.boardsAndTasksModel.getViewPath()];
     };
-    getBoardViewPath = (boardId): string[] => {
+    getBoardViewPath = (boardId: string): string[] => {
         return [...this.getBasePath(), boardId];
     };
     getLastUsedBoardPath = (): string[] => {

src/ViewModel/Pages/taskViewModel.ts

@@ -18,16 +18,16 @@ export default class TaskViewModel extends Context {
     // util
     get sortingString(): string {
         const splitDate: string[] = this.date.value.split("-");
-        const year = padZero(splitDate[0], 4);
-        const month = padZero(splitDate[1], 2);
-        const date = padZero(splitDate[2], 2);
+        const year: string = padZero(splitDate[0], 4);
+        const month: string = padZero(splitDate[1], 2);
+        const date: string = padZero(splitDate[2], 2);
 
         const splitTime: string[] = this.time.value.split(":");
-        const hour = padZero(splitTime[0], 2);
-        const minute = padZero(splitTime[1], 2);
+        const hour: string = padZero(splitTime[0], 2);
+        const minute: string = padZero(splitTime[1], 2);
 
-        const priorityNumber = parseInt(this.priority.value);
-        const invertedPriority = 100 - priorityNumber;
+        const priorityNumber: number = parseInt(this.priority.value);
+        const invertedPriority: number = 100 - priorityNumber;
 
         return (
             year +
@@ -168,7 +168,9 @@ export default class TaskViewModel extends Context {
     loadVersionIds = (): void => {
         const versionIds: string[] =
             this.boardsAndTasksModel.listTaskVersionIds(this.task.fileId);
-        const sortedVersionIds = versionIds.sort(localeCompare).reverse();
+        const sortedVersionIds: string[] = versionIds
+            .sort(localeCompare)
+            .reverse();
         this.versionIds.clear();
         this.versionIds.add(...sortedVersionIds);
     };