add method for filtering

src/Model/Files/fileModel.ts

@@ -70,150 +70,150 @@ export default class FileModel {
         const didStore: boolean = this.storeFileContent(fileContent);
         if (didStore == false) return;
 
-	switch (fileContent.type) {
-	    case "board-info":
-	    case "task": 
-		this.boardsAndTasksModel.handleFileContent(fileContent);
-		break;
-	    case "reaction":
-		this.chatModel.handleReaction(fileContent);
-		break;
-	}
+        switch (fileContent.type) {
+            case "board-info":
+            case "task":
+                this.boardsAndTasksModel.handleFileContent(fileContent);
+                break;
+            case "reaction":
+                this.chatModel.handleReaction(fileContent);
+                break;
+        }
     };
 
     // methods
     readonly addFileContentAndSend = (
-	fileContent: FileContent<string>,
+        fileContent: FileContent<string>,
     ): void => {
-	this.handleFileContent(fileContent);
-	this.chatModel.sendMessage("", undefined, fileContent);
+        this.handleFileContent(fileContent);
+        this.chatModel.sendMessage("", undefined, fileContent);
     };
 
     // storage
     readonly storeFileContent = (fileContent: FileContent<string>): boolean => {
-	const fileContentPath: string[] = this.getFileContentPath(
-	    fileContent.fileId,
-	    fileContent.fileContentId,
-	);
+        const fileContentPath: string[] = this.getFileContentPath(
+            fileContent.fileId,
+            fileContent.fileContentId,
+        );
 
-	// check if fileContent already exists
-	const existingFileContent: string | null =
-	    this.storageModel.read(fileContentPath);
-	if (existingFileContent != null) return false;
+        // check if fileContent already exists
+        const existingFileContent: string | null =
+            this.storageModel.read(fileContentPath);
+        if (existingFileContent != null) return false;
 
-	const stringifiedContent: string = stringify(fileContent);
-	this.storageModel.write(fileContentPath, stringifiedContent);
-	return true;
+        const stringifiedContent: string = stringify(fileContent);
+        this.storageModel.write(fileContentPath, stringifiedContent);
+        return true;
     };
 
     readonly listFileIds = (): string[] => {
-	return this.storageModel.list(this.basePath);
+        return this.storageModel.list(this.basePath);
     };
 
     readonly listFileContentIds = (fileId: string): string[] => {
-	const filePath: string[] = this.getFilePath(fileId);
-	return this.storageModel.list(filePath);
+        const filePath: string[] = this.getFilePath(fileId);
+        return this.storageModel.list(filePath);
     };
 
     readonly selectLatestFileContentId = (
-	fileContentIds: string[],
+        fileContentIds: string[],
     ): string | undefined => {
-	return fileContentIds[fileContentIds.length - 1];
+        return fileContentIds[fileContentIds.length - 1];
     };
 
     readonly getFileContent = <T extends FileContent<string>>(
-	fileId: string,
-	fileContentName: string,
-	reference: T,
+        fileId: string,
+        fileContentName: string,
+        reference: T,
     ): T | null => {
-	const filePath: string[] = this.getFileContentPath(
-	    fileId,
-	    fileContentName,
-	);
-	const fileContentOrNull: T | null = this.storageModel.readStringifiable(
-	    filePath,
-	    reference,
-	);
-	return fileContentOrNull;
+        const filePath: string[] = this.getFileContentPath(
+            fileId,
+            fileContentName,
+        );
+        const fileContentOrNull: T | null = this.storageModel.readStringifiable(
+            filePath,
+            reference,
+        );
+        return fileContentOrNull;
     };
 
     readonly getLatestFileContent = <T extends FileContent<string>>(
-	fileId: string,
-	reference: T,
+        fileId: string,
+        reference: T,
     ): T | null => {
-	const fileContentsIds: string[] = this.listFileContentIds(fileId);
-	const latestFileContentId: string | undefined =
-	    this.selectLatestFileContentId(fileContentsIds);
-	if (latestFileContentId == undefined) return null;
+        const fileContentsIds: string[] = this.listFileContentIds(fileId);
+        const latestFileContentId: string | undefined =
+            this.selectLatestFileContentId(fileContentsIds);
+        if (latestFileContentId == undefined) return null;
 
-	const fileContent: T | null = this.getFileContent(
-	    fileId,
-	    latestFileContentId,
-	    reference,
-	);
-	return fileContent;
+        const fileContent: T | null = this.getFileContent(
+            fileId,
+            latestFileContentId,
+            reference,
+        );
+        return fileContent;
     };
 
     // init
     constructor(
-	storageModel: StorageModel,
-	settingsModel: SettingsModel,
-	chatModel: ChatModel,
+        storageModel: StorageModel,
+        settingsModel: SettingsModel,
+        chatModel: ChatModel,
     ) {
-	this.chatModel = chatModel;
-	this.settingsModel = settingsModel;
-	this.storageModel = storageModel;
+        this.chatModel = chatModel;
+        this.settingsModel = settingsModel;
+        this.storageModel = storageModel;
 
-	this.boardsAndTasksModel = new BoardsAndTasksModel(
-	    this.storageModel,
-	    this.settingsModel,
-	    chatModel,
-	    this,
-	);
+        this.boardsAndTasksModel = new BoardsAndTasksModel(
+            this.storageModel,
+            this.settingsModel,
+            chatModel,
+            this,
+        );
     }
 
     // utility
     static generateFileContentId = (creationDate: string): string => {
-	return creationDate + v4();
+        return creationDate + v4();
     };
 
     static createFileContent = <T extends string>(
-	fileId: string,
-	type: T,
+        fileId: string,
+        type: T,
     ): FileContent<T> => {
-	const creationDate: string = createTimestamp();
-	const fileContentId: string =
-	    FileModel.generateFileContentId(creationDate);
+        const creationDate: string = createTimestamp();
+        const fileContentId: string =
+            FileModel.generateFileContentId(creationDate);
 
-	return {
-	    dataVersion: DATA_VERSION,
+        return {
+            dataVersion: DATA_VERSION,
 
-	    fileId,
-	    fileContentId,
-	    creationDate,
-	    type,
-	};
+            fileId,
+            fileContentId,
+            creationDate,
+            type,
+        };
     };
 }
 
 // paths
 export enum FileModelSubPath {
     Data = "data",
-	Model = "model",
-	ModelView = "view",
-	ModelTask = "tasks",
-	ModelCalendar = "calendar",
+    Model = "model",
+    ModelView = "view",
+    ModelTask = "tasks",
+    ModelCalendar = "calendar",
 }
 
 // types
 export interface FileContent<T extends string>
     extends ValidObject, StringEntryObject {
-	readonly fileId: string;
-	readonly fileContentId: string;
-	readonly creationDate: string;
+    readonly fileId: string;
+    readonly fileContentId: string;
+    readonly creationDate: string;
 
-	readonly type: T;
-    }
+    readonly type: T;
+}
 
 // references
 export const FileContentReference: FileContent<string> = {

src/Model/Global/fileTransferModel.ts

@@ -37,7 +37,7 @@ export default class FileTransferModel {
     };
 
     readonly prepareToSend = (): void => {
-	if (!this.transferData) return;
+        if (!this.transferData) return;
         this.direction = TransferDirections.Send;
         this.connectionModel.addChannel(this.transferData.channel);
     };
@@ -157,8 +157,7 @@ export default class FileTransferModel {
     };
 
     readonly prepareFileForSending = (filePath: string[]): string => {
-        const fileContent: string | null =
-            this.storageModel.read(filePath);
+        const fileContent: string | null = this.storageModel.read(filePath);
         if (fileContent == null) return "";
 
         const fileData: FileData = {
@@ -169,7 +168,7 @@ export default class FileTransferModel {
     };
 
     readonly sendFile = async (stringifiedFileData: string): Promise<void> => {
-	if (!this.transferData) return;
+        if (!this.transferData) return;
 
         const encryptedFileData: string = await encryptString(
             stringifiedFileData,

src/Model/Global/settingsModel.ts

@@ -46,7 +46,7 @@ export default class SettingsModel {
     // load
     private readonly readSetting = (
         pathName: keyof typeof filePaths.settingsModel,
-    ): string|null=> {
+    ): string | null => {
         const path = StorageModel.getPath(
             StorageModelSubPaths.SettingsModel,
             filePaths.settingsModel[pathName],

src/Model/Utility/utility.ts

@@ -1,5 +1,5 @@
 import { checkIsValidObject, checkMatchesObjectStructure } from "./typeSafety";
-import * as Hammer from "hammerjs";
+import * as React from "../../react";
 
 export interface Stringifiable {
     toString(): string;
@@ -18,7 +18,7 @@ export function createTimestamp(): string {
     return new Date().toISOString();
 }
 
-// filters etc
+// filters
 export type StringEntryObject = { [key: string]: Stringifiable | undefined };
 
 export function filterObjectsByStringEntries<T>(
@@ -28,7 +28,7 @@ export function filterObjectsByStringEntries<T>(
 ): Set<T> {
     const matches: Set<T> = new Set();
 
-    object_loop: for (const object of objects) {
+    for (const object of objects) {
         const doesMatch: boolean = checkDoesObjectMatchReference(
             reference,
             converter(object),
@@ -39,79 +39,6 @@ export function filterObjectsByStringEntries<T>(
     return matches;
 }
 
-export function checkDoesObjectMatchReference(
-    reference: StringEntryObject,
-    stringEntryObject: StringEntryObject,
-    explicitEmptyValue: boolean = false,
-): boolean {
-    reference_entry_loop: for (const referenceEntry of Object.entries(
-        reference,
-    )) {
-        const [referenceKey, referenceValue] = referenceEntry;
-        const stringEntryObjectValue: Stringifiable | undefined =
-            stringEntryObject[referenceKey];
-
-        if (referenceValue == undefined) return false;
-
-        if (referenceValue[0] == "-") {
-            const strippedReferenceValue: string = referenceValue
-                .toString()
-                .substring(1);
-            // property may not exist
-            if (
-                strippedReferenceValue == "" &&
-                stringEntryObjectValue != undefined &&
-                stringEntryObjectValue != ""
-            ) {
-                return false;
-            }
-
-            // property may not match
-            if (stringEntryObjectValue == strippedReferenceValue) {
-                return false;
-            }
-        } else {
-            if (explicitEmptyValue == false) {
-                // property must exist but be anything
-                if (
-                    referenceValue == "" &&
-                    (stringEntryObjectValue == undefined ||
-                        stringEntryObjectValue == "")
-                ) {
-                    return false;
-                } else if (referenceValue == "") {
-                    continue reference_entry_loop;
-                }
-            }
-
-            // property must match
-            if (stringEntryObjectValue != referenceValue) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-
-export function collectObjectValuesForKey<T>(
-    key: string,
-    converter: (object: T) => StringEntryObject,
-    objects: T[],
-): string[] {
-    const values: Set<string> = new Set();
-
-    for (const object of objects) {
-        const stringEntryObject: StringEntryObject = converter(object);
-        const stringEntryObjectValue: Stringifiable | undefined =
-            stringEntryObject[key];
-        if (stringEntryObjectValue == undefined) continue;
-
-        values.add(stringEntryObjectValue.toString());
-    }
-
-    return [...values.values()];
-}
-
 export function filterObjectsByWords<T>(
     query: string,
     getStringsOfObject: (object: T) => string[],
@@ -119,7 +46,7 @@ export function filterObjectsByWords<T>(
 ): Set<T> {
     const matches: Set<T> = new Set();
 
-    object_loop: for (const object of objects) {
+    for (const object of objects) {
         const doesMatch: boolean = checkDoesObjectMatchSearch(
             query,
             getStringsOfObject,
@@ -170,6 +97,26 @@ export function checkDoesObjectMatchSearch<T>(
     return true;
 }
 
+export default function implementFilter<T>(
+    allItems: React.ListState<T>|React.MapState<T>,
+    matches: React.ListState<T>,
+    query: React.State<string>,
+    itemToString: (item: T) => string,
+) {
+    function update() {
+        matches.clear();
+        allItems.value.forEach((item: T) => {
+            if (!itemToString(item).includes(query.value)) return;
+            matches.add(item);
+            allItems.handleRemoval(item, () => {
+                matches.remove(item);
+            });
+        });
+    }
+    query.subscribe(update);
+    allItems.handleAddition(update);
+}
+
 // handlers
 export type Handler<T> = (item: T) => void;
 
@@ -313,99 +260,174 @@ export function implementPinchZoom(canvas: HTMLElement) {
     const MIN = 0.25;
     const MAX = 5;
 
-    const element = (): HTMLElement|null=> canvas.querySelector(".zoom");
+    const element = (): HTMLElement | null => canvas.querySelector(".zoom");
     const distance = (e: TouchEvent) =>
-	Math.hypot(
-	    e.touches[0].pageX - e.touches[1].pageX,
-	    e.touches[0].pageY - e.touches[1].pageY,
-	);
+        Math.hypot(
+            e.touches[0].pageX - e.touches[1].pageX,
+            e.touches[0].pageY - e.touches[1].pageY,
+        );
     const point = (e: TouchEvent, direction: "x" | "y", i: number) =>
-	e.touches[i][direction == "x" ? "clientX" : "clientY"];
+        e.touches[i][direction == "x" ? "clientX" : "clientY"];
     const midpoint = (e: TouchEvent, direction: "x" | "y") =>
-	(point(e, direction, 0) + point(e, direction, 1)) / 2;
+        (point(e, direction, 0) + point(e, direction, 1)) / 2;
 
     function apply(factor: number, _offset?: [number, number]) {
-	const el = element();
-	if (!el) return;
-	if (factor < MIN) return apply(MIN, _offset);
-	if (factor > MAX) return apply(5, _offset);
+        const el = element();
+        if (!el) return;
+        if (factor < MIN) return apply(MIN, _offset);
+        if (factor > MAX) return apply(5, _offset);
 
-	let x: number, y: number;
-	if (_offset) [x, y] = _offset;
-	else {
-	    x = currentX
-	    y = currentY
-	}
-	el.style.transform = `scale(${factor.toString()}) translate(${x}px, ${y}px)`;
-	currentX = x;
-	currentY = y;
-	currentZoom = factor;
+        let x: number, y: number;
+        if (_offset) [x, y] = _offset;
+        else {
+            x = currentX;
+            y = currentY;
+        }
+        el.style.transform = `scale(${factor.toString()}) translate(${x}px, ${y}px)`;
+        currentX = x;
+        currentY = y;
+        currentZoom = factor;
     }
 
     canvas.addEventListener("wheel", (event: WheelEvent) => {
-	event.preventDefault();
+        event.preventDefault();
 
-	initialZoom = currentZoom;
-	initialX = currentX;
-	initialY = currentY;
+        initialZoom = currentZoom;
+        initialX = currentX;
+        initialY = currentY;
 
-	if (!event.shiftKey) {
-	    apply(currentZoom, [
-		currentX - event.deltaX,
-		currentY - event.deltaY,
-	    ]);
-	    return;
-	}
-	apply(currentZoom - event.deltaY * 0.01);
+        if (!event.shiftKey) {
+            apply(currentZoom, [
+                currentX - event.deltaX,
+                currentY - event.deltaY,
+            ]);
+            return;
+        }
+        apply(currentZoom - event.deltaY * 0.01);
     });
     canvas.addEventListener("scroll", (event: Event) => {
-	event.preventDefault();
+        event.preventDefault();
     });
 
     canvas.addEventListener("touchstart", (event: TouchEvent) => {
-	(document.activeElement as HTMLElement).blur();
+        (document.activeElement as HTMLElement).blur();
 
-	const el = element();
-	if (!el) return;
-	if (lastElement != undefined && lastElement != el) reset();
-	lastElement = el;
+        const el = element();
+        if (!el) return;
+        if (lastElement != undefined && lastElement != el) reset();
+        lastElement = el;
 
-	initialZoom = currentZoom;
-	initialX = currentX;
-	initialY = currentY;
+        initialZoom = currentZoom;
+        initialX = currentX;
+        initialY = currentY;
 
-	if (event.touches.length != 2) {
-	    pinching = false;
-	    initialTouchX = event.touches[0].clientX;
-	    initialTouchY = event.touches[0].clientY;
-	    return;
-	}
+        if (event.touches.length != 2) {
+            pinching = false;
+            initialTouchX = event.touches[0].clientX;
+            initialTouchY = event.touches[0].clientY;
+            return;
+        }
 
-	pinching = true;
-	initialDistance = distance(event);
-	initialTouchX = midpoint(event, "x");
-	initialTouchY = midpoint(event, "y");
+        pinching = true;
+        initialDistance = distance(event);
+        initialTouchX = midpoint(event, "x");
+        initialTouchY = midpoint(event, "y");
     });
     canvas.addEventListener("touchmove", (event: TouchEvent) => {
-	if (!pinching) {
-	    apply(currentZoom, [
-		initialX +
-		(event.touches[0].clientX - initialTouchX) / initialZoom,
-		initialY +
-		(event.touches[0].clientY - initialTouchY) / initialZoom,
-	    ]);
-	    return;
-	}
-	if (event.touches.length < 2) return;
-	event.preventDefault();
-	const currentDistance = distance(event);
-	const midX = midpoint(event, "x");
-	const midY = midpoint(event, "y");
-	const ratio = currentDistance / initialDistance;
-	const difference = currentDistance - initialDistance;
-	apply(initialZoom * ratio, [
-	    initialX + (midX - difference - initialTouchX) / initialZoom,
-	    initialY + (midY - difference - initialTouchY) / initialZoom,
-	]);
+        if (!pinching) {
+            apply(currentZoom, [
+                initialX +
+                    (event.touches[0].clientX - initialTouchX) / initialZoom,
+                initialY +
+                    (event.touches[0].clientY - initialTouchY) / initialZoom,
+            ]);
+            return;
+        }
+        if (event.touches.length < 2) return;
+        event.preventDefault();
+        const currentDistance = distance(event);
+        const midX = midpoint(event, "x");
+        const midY = midpoint(event, "y");
+        const ratio = currentDistance / initialDistance;
+        const difference = currentDistance - initialDistance;
+        apply(initialZoom * ratio, [
+            initialX + (midX - difference - initialTouchX) / initialZoom,
+            initialY + (midY - difference - initialTouchY) / initialZoom,
+        ]);
     });
 }
+
+// objecs
+export function collectObjectValuesForKey<T>(
+    key: string,
+    converter: (object: T) => StringEntryObject,
+    objects: T[],
+): string[] {
+    const values: Set<string> = new Set();
+
+    for (const object of objects) {
+        const stringEntryObject: StringEntryObject = converter(object);
+        const stringEntryObjectValue: Stringifiable | undefined =
+            stringEntryObject[key];
+        if (stringEntryObjectValue == undefined) continue;
+
+        values.add(stringEntryObjectValue.toString());
+    }
+
+    return [...values.values()];
+}
+
+// type safety
+export function checkDoesObjectMatchReference(
+    reference: StringEntryObject,
+    stringEntryObject: StringEntryObject,
+    explicitEmptyValue: boolean = false,
+): boolean {
+    reference_entry_loop: for (const referenceEntry of Object.entries(
+        reference,
+    )) {
+        const [referenceKey, referenceValue] = referenceEntry;
+        const stringEntryObjectValue: Stringifiable | undefined =
+            stringEntryObject[referenceKey];
+
+        if (referenceValue == undefined) return false;
+
+        if (referenceValue[0] == "-") {
+            const strippedReferenceValue: string = referenceValue
+                .toString()
+                .substring(1);
+            // property may not exist
+            if (
+                strippedReferenceValue == "" &&
+                stringEntryObjectValue != undefined &&
+                stringEntryObjectValue != ""
+            ) {
+                return false;
+            }
+
+            // property may not match
+            if (stringEntryObjectValue == strippedReferenceValue) {
+                return false;
+            }
+        } else {
+            if (explicitEmptyValue == false) {
+                // property must exist but be anything
+                if (
+                    referenceValue == "" &&
+                    (stringEntryObjectValue == undefined ||
+                        stringEntryObjectValue == "")
+                ) {
+                    return false;
+                } else if (referenceValue == "") {
+                    continue reference_entry_loop;
+                }
+            }
+
+            // property must match
+            if (stringEntryObjectValue != referenceValue) {
+                return false;
+            }
+        }
+    }
+    return true;
+}

src/View/ChatPages/boardKanbanPage.tsx

@@ -1,4 +1,3 @@
-import * as React from "../../react";
 import { ViewController } from "../viewController";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import {
@@ -6,6 +5,7 @@ import {
     createPropertyValueIndexState,
 } from "../Components/propertyValueList";
 import { FilteredList } from "../Components/filteredList";
+import * as React from "../../react";
 import { TaskCategoryBulkChangeViewModel } from "../../ViewModel/Utility/taskPropertyBulkChangeViewModel";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";

src/View/ChatPages/boardPage.tsx

@@ -1,4 +1,3 @@
-import * as React from "../../react";
 import { BoardStatusGridPage } from "./boardStatusGridPage";
 import { BoardKanbanPage } from "./boardKanbanPage";
 import { ViewController } from "../viewController";
@@ -7,6 +6,7 @@ import { SearchModal } from "../Modals/searchModal";
 import { BoardSettingsModal } from "../Modals/boardSettingsModal";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { BoardViewToggleButton } from "../Components/boardViewToggleButton";
+import * as React from "../../react";
 import BoardViewModel, {
     BoardPageTypes,
 } from "../../ViewModel/Pages/boardViewModel";

src/View/ChatPages/boardStatusGridPage.tsx

@@ -1,4 +1,3 @@
-import * as React from "../../react";
 import { ViewController } from "../viewController";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import {
@@ -8,6 +7,7 @@ import {
     createSortedPropertyValueState,
 } from "../Components/propertyValueList";
 import { FilteredList } from "../Components/filteredList";
+import * as React from "../../react";
 import {
     TaskCategoryBulkChangeViewModel,
     TaskStatusBulkChangeViewModel,

src/View/ChatPages/calendarPage.tsx

@@ -1,10 +1,10 @@
-import * as React from "../../react";
 import "./calendarPage.css";
 import { ViewController } from "../viewController";
 import { TaskSettingsModal } from "../Modals/taskSettingsModal";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { PlaceholderView } from "../Components/placeholderView";
 import { MonthGrid } from "../Components/monthGrid";
+import * as React from "../../react";
 import CalendarPageViewModel from "../../ViewModel/Pages/calendarPageViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 

src/View/ChatPages/messagePage.tsx

@@ -1,9 +1,9 @@
-import * as React from "../../react";
 import "./messagePage.css";
 import { ViewController } from "../viewController";
 import { MessageFilterModal } from "../Modals/messageFilterModal";
 import { ReplyPreview } from "../Components/replyPreview";
 import { ChatMessage } from "../Components/chatMessage";
+import * as React from "../../react";
 import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";

src/View/ChatPages/settingsPage.tsx

@@ -1,7 +1,7 @@
-import * as React from "../../react";
 import { DeletableListItem } from "../Components/deletableListItem";
 import { DangerousActionButton } from "../Components/dangerousActionButton";
 import { ColorPicker } from "../Components/colorPicker";
+import * as React from "../../react";
 import SettingsPageViewModel from "../../ViewModel/Pages/settingsPageViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 

src/View/ChatPages/taskPage.tsx

@@ -1,9 +1,9 @@
-import * as React from "../../react";
 import "./taskPage.css";
 import { BoardPage } from "./boardPage";
 import { ViewController } from "../viewController";
 import { PlaceholderView } from "../Components/placeholderView";
 import { BoardViewModelToEntry } from "../Components/boardEntry";
+import * as React from "../../react";
 import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 
@@ -62,7 +62,7 @@ export function TaskPage(
                         <div class="flex-row width-input">
                             <input
                                 class="no-outline"
-                                bind:value={taskPageViewModel.newBoardNameInput}
+                                bind:value={taskPageViewModel.boardQuery}
                                 on:enter={taskPageViewModel.createBoard}
                                 placeholder={
                                     coreViewModel.translations.chatPage.task
@@ -89,7 +89,7 @@ export function TaskPage(
                             class="grid gap"
                             style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
                             children:append={[
-                                taskPageViewModel.boardViewModels,
+                                taskPageViewModel.boardMatches,
                                 BoardViewModelToEntry,
                             ]}
                         ></div>

src/View/Components/boardEntry.tsx

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import { ViewController } from "../viewController";
+import * as React from "../../react";
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 
 export function BoardEntry(boardViewModel: BoardViewModel) {

src/View/Components/boardViewToggleButton.tsx

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import { RibbonButton } from "./ribbonButton";
+import * as React from "../../react";
 import BoardViewModel, {
     BoardPageTypes,
 } from "../../ViewModel/Pages/boardViewModel";

src/View/Components/chatMessage.tsx

@@ -1,7 +1,7 @@
-import * as React from "../../react";
 import { MessageReactionButtonRow } from "./messageReactionButtonRow";
 import { InlineReply } from "./inlineReply";
 import { ChatMessageInfoModal } from "../Modals/chatMessageInfoModal";
+import * as React from "../../react";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { ChatMessageStatuses } from "../../Model/Chat/chatModel";

src/View/Components/chatViewToggleButton.tsx

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import { RibbonButton } from "./ribbonButton";
+import * as React from "../../react";
 import ChatViewModel, {
     ChatPageTypes,
 } from "../../ViewModel/Chat/chatViewModel";

src/View/Components/inlineReply.tsx

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import { ViewController } from "../viewController";
+import * as React from "../../react";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 
 export function InlineReply(chatMessageViewModel: ChatMessageViewModel) {

src/View/Components/messageReactionButtonRow.tsx

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import { MessageReactionButton } from "./messageReactionButton";
+import * as React from "../../react";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { ReactionSymbols } from "../../Model/Chat/chatModel";

src/View/Components/monthGrid.tsx

@@ -1,6 +1,6 @@
-import * as React from "../../react";
 import "./monthGrid.css";
 import { ViewController } from "../viewController";
+import * as React from "../../react";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import { localeCompare } from "../../Model/Utility/utility";

src/View/Components/optionButtonList.tsx

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import { OptionButton } from "./optionButton";
+import * as React from "../../react";
 
 export function OptionButtonList<T>(
     options: React.ListState<[string, T]>,

src/View/Modals/boardSettingsModal.tsx

@@ -1,7 +1,7 @@
-import * as React from "../../react";
 import { ViewController } from "../viewController";
 import { DangerousActionButton } from "../Components/dangerousActionButton";
 import { ColorPicker } from "../Components/colorPicker";
+import * as React from "../../react";
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 

src/View/Modals/chatMessageInfoModal.tsx

@@ -1,7 +1,7 @@
-import * as React from "../../react";
 import { MessageReactionEntry } from "../Components/messageReactionEntry";
 import { MessageReactionButtonRow } from "../Components/messageReactionButtonRow";
 import { InfoTile } from "../Components/infoTile";
+import * as React from "../../react";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 

src/View/Modals/connectionModal.tsx

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import { DeletableListItem } from "../Components/deletableListItem";
+import * as React from "../../react";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ConnectionViewModel from "../../ViewModel/Global/connectionViewModel";
 

src/View/Modals/dataTransferModal.tsx

@@ -1,6 +1,6 @@
-import * as React from "../../react";
 import { ViewController } from "../viewController";
 import { StringToTextSpan } from "../Components/textSpan";
+import * as React from "../../react";
 import FileTransferViewModel, {
     FileTransferModals,
     FileTransferOption,
@@ -758,7 +758,9 @@ function ExportModal(
                                 </span>
                                 <input
                                     bind:value={fileTransferViewModel.exportKey}
-				    on:enter={fileTransferViewModel.downloadFile}
+                                    on:enter={
+                                        fileTransferViewModel.downloadFile
+                                    }
                                     type="password"
                                 ></input>
                             </div>
@@ -777,36 +779,38 @@ function ExportModal(
                                     bind:value={
                                         fileTransferViewModel.exportKeyConfirmation
                                     }
-				    on:enter={fileTransferViewModel.downloadFile}
-				    type="password"
-				></input>
-			    </div>
-			</label>
-		    </div>
-		</main>
-		<div class="flex-row width-100">
-		    <button
-			class="flex"
-			on:click={
-			    fileTransferViewModel.showExportSelectionModal
-			}
-		    >
-			{coreViewModel.translations.general.backButton}
-		    </button>
-		    <button
-			class="primary flex"
-			on:click={fileTransferViewModel.downloadFile}
-			toggle:disabled={fileTransferViewModel.cannotExport}
-		    >
-			{
-			    coreViewModel.translations.dataTransferModal
-			    .downloadFileButton
-			}
-			<span class="icon">download</span>
-		    </button>
-		</div>
-	    </div>
-	</div>
+                                    on:enter={
+                                        fileTransferViewModel.downloadFile
+                                    }
+                                    type="password"
+                                ></input>
+                            </div>
+                        </label>
+                    </div>
+                </main>
+                <div class="flex-row width-100">
+                    <button
+                        class="flex"
+                        on:click={
+                            fileTransferViewModel.showExportSelectionModal
+                        }
+                    >
+                        {coreViewModel.translations.general.backButton}
+                    </button>
+                    <button
+                        class="primary flex"
+                        on:click={fileTransferViewModel.downloadFile}
+                        toggle:disabled={fileTransferViewModel.cannotExport}
+                    >
+                        {
+                            coreViewModel.translations.dataTransferModal
+                                .downloadFileButton
+                        }
+                        <span class="icon">download</span>
+                    </button>
+                </div>
+            </div>
+        </div>
     );
 }
 
@@ -815,57 +819,57 @@ function ImportModal(
     fileTransferViewModel: FileTransferViewModel,
 ) {
     const isPresented = React.createProxyState(
-	[fileTransferViewModel.presentedModal],
-	() =>
-	fileTransferViewModel.presentedModal.value ==
-	FileTransferModals.ImportSelection,
+        [fileTransferViewModel.presentedModal],
+        () =>
+            fileTransferViewModel.presentedModal.value ==
+            FileTransferModals.ImportSelection,
     );
 
     return (
-	<div class="modal" toggle:open={isPresented}>
-	    <div>
-		<main>
-		    <h2>
-			{
-			    coreViewModel.translations.dataTransferModal
-			    .importHeadline
-			}
-		    </h2>
+        <div class="modal" toggle:open={isPresented}>
+            <div>
+                <main>
+                    <h2>
+                        {
+                            coreViewModel.translations.dataTransferModal
+                                .importHeadline
+                        }
+                    </h2>
 
-		    <div class="flex-column gap content-margin-bottom">
-			<input
-			    id="file-transfer-input"
-			    type="file"
-			    on:change={
-				fileTransferViewModel.updateImportSelection
-			    }
-			></input>
-		    </div>
-		</main>
+                    <div class="flex-column gap content-margin-bottom">
+                        <input
+                            id="file-transfer-input"
+                            type="file"
+                            on:change={
+                                fileTransferViewModel.updateImportSelection
+                            }
+                        ></input>
+                    </div>
+                </main>
 
-		<div class="flex-row width-100">
-		    <button
-			class="flex"
-			on:click={
-			    fileTransferViewModel.showDirectionSelectionModal
-			}
-		    >
-			{coreViewModel.translations.general.backButton}
-		    </button>
-		    <button
-			class="primary flex"
-			on:click={fileTransferViewModel.importFile}
-			toggle:disabled={fileTransferViewModel.cannotImport}
-		    >
-			{
-			    coreViewModel.translations.dataTransferModal
-			    .importFileButton
-			}
-			<span class="icon">arrow_forward</span>
-		    </button>
-		</div>
-	    </div>
-	</div>
+                <div class="flex-row width-100">
+                    <button
+                        class="flex"
+                        on:click={
+                            fileTransferViewModel.showDirectionSelectionModal
+                        }
+                    >
+                        {coreViewModel.translations.general.backButton}
+                    </button>
+                    <button
+                        class="primary flex"
+                        on:click={fileTransferViewModel.importFile}
+                        toggle:disabled={fileTransferViewModel.cannotImport}
+                    >
+                        {
+                            coreViewModel.translations.dataTransferModal
+                                .importFileButton
+                        }
+                        <span class="icon">arrow_forward</span>
+                    </button>
+                </div>
+            </div>
+        </div>
     );
 }
 
@@ -874,74 +878,76 @@ function ImportDecryptionDataModal(
     fileTransferViewModel: FileTransferViewModel,
 ) {
     const isPresented = React.createProxyState(
-	[fileTransferViewModel.presentedModal],
-	() =>
-	fileTransferViewModel.presentedModal.value ==
-	FileTransferModals.ImportDecryptData,
+        [fileTransferViewModel.presentedModal],
+        () =>
+            fileTransferViewModel.presentedModal.value ==
+            FileTransferModals.ImportDecryptData,
     );
 
     return (
-	<div class="modal" toggle:open={isPresented}>
-	    <div>
-		<main>
-		    <h2>
-			{
-			    coreViewModel.translations.dataTransferModal
-			    .importHeadline
-			}
-		    </h2>
+        <div class="modal" toggle:open={isPresented}>
+            <div>
+                <main>
+                    <h2>
+                        {
+                            coreViewModel.translations.dataTransferModal
+                                .importHeadline
+                        }
+                    </h2>
 
-		    <div class="flex-column gap content-margin-bottom">
-			<label class="tile">
-			    <span class="icon">key</span>
-			    <div>
-				<span class="secondary">
-				    {
-					coreViewModel.translations
-					.dataTransferModal.exportKey
-				    }
-				</span>
-				<input
-				    bind:value={fileTransferViewModel.importKey}
-				    on:enter={fileTransferViewModel.decryptImport}
-				    type="password"
-				></input>
-			    </div>
-			</label>
-		    </div>
+                    <div class="flex-column gap content-margin-bottom">
+                        <label class="tile">
+                            <span class="icon">key</span>
+                            <div>
+                                <span class="secondary">
+                                    {
+                                        coreViewModel.translations
+                                            .dataTransferModal.exportKey
+                                    }
+                                </span>
+                                <input
+                                    bind:value={fileTransferViewModel.importKey}
+                                    on:enter={
+                                        fileTransferViewModel.decryptImport
+                                    }
+                                    type="password"
+                                ></input>
+                            </div>
+                        </label>
+                    </div>
 
-		    <p
-			class="error"
-			toggle:hidden={fileTransferViewModel.isImportKeyCorrect}
-		    >
-			{
-			    coreViewModel.translations.dataTransferModal
-			    .incorrectPassphraseError
-			}
-		    </p>
-		</main>
-		<div class="flex-row width-100">
-		    <button
-			class="flex"
-			on:click={fileTransferViewModel.showImportModal}
-		    >
-			{coreViewModel.translations.general.backButton}
-		    </button>
-		    <button
-			class="primary flex"
-			on:click={fileTransferViewModel.decryptImport}
-			toggle:disabled={
-			    fileTransferViewModel.importDecryptSuccessful
-			}
-		    >
-			{
-			    coreViewModel.translations.dataTransferModal
-			    .decryptImportButton
-			}
-			<span class="icon">arrow_forward</span>
-		    </button>
-		</div>
-	    </div>
-	</div>
+                    <p
+                        class="error"
+                        toggle:hidden={fileTransferViewModel.isImportKeyCorrect}
+                    >
+                        {
+                            coreViewModel.translations.dataTransferModal
+                                .incorrectPassphraseError
+                        }
+                    </p>
+                </main>
+                <div class="flex-row width-100">
+                    <button
+                        class="flex"
+                        on:click={fileTransferViewModel.showImportModal}
+                    >
+                        {coreViewModel.translations.general.backButton}
+                    </button>
+                    <button
+                        class="primary flex"
+                        on:click={fileTransferViewModel.decryptImport}
+                        toggle:disabled={
+                            fileTransferViewModel.importDecryptSuccessful
+                        }
+                    >
+                        {
+                            coreViewModel.translations.dataTransferModal
+                                .decryptImportButton
+                        }
+                        <span class="icon">arrow_forward</span>
+                    </button>
+                </div>
+            </div>
+        </div>
     );
 }

src/View/Modals/messageFilterModal.tsx

@@ -1,6 +1,6 @@
-import * as React from "../../react";
 import { ViewController } from "../viewController";
 import { MessageReactionFilterButton } from "../Components/messageReactionFilterButton";
+import * as React from "../../react";
 import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import { ReactionSymbols } from "../../Model/Chat/chatModel";

src/View/Modals/searchModal.tsx

@@ -1,7 +1,7 @@
 import { v4 } from "uuid";
-import * as React from "../../react";
 import { ViewController } from "../viewController";
 import { StringToOption } from "../Components/option";
+import * as React from "../../react";
 import SearchViewModel from "../../ViewModel/Utility/searchViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 
@@ -29,8 +29,8 @@ export function SearchModal<T>(
                     <h2>{headline}</h2>
                     <div class="flex-row">
                         <input
-			    id="focused"
-			    style="max-width: unset"
+                            id="focused"
+                            style="max-width: unset"
                             placeholder={
                                 coreViewModel.translations.general.searchLabel
                             }
@@ -70,55 +70,73 @@ export function SearchModal<T>(
                         </button>
                     </div>
 
-		    <div
-			toggle:hidden={searchViewModel.hasNoSuggestions}>
-			<hr></hr>
-			<h3>{coreViewModel.translations.general.searchSuggestionsLabel}</h3>
-			<div
-			    class="flex-column gap"
-			    children:append={[
-				searchViewModel.suggestions,
-				(suggestion: string) => SuggestionView(suggestion, searchViewModel, coreViewModel),
-			    ]}
-			></div>
-		    </div>
-		</main>
-		<button on:click={close}>
-		    {coreViewModel.translations.general.closeButton}
-		    <span class="icon">close</span>
-		</button>
-	    </div>
-	</div>
+                    <div toggle:hidden={searchViewModel.hasNoSuggestions}>
+                        <hr></hr>
+                        <h3>
+                            {
+                                coreViewModel.translations.general
+                                    .searchSuggestionsLabel
+                            }
+                        </h3>
+                        <div
+                            class="flex-column gap"
+                            children:append={[
+                                searchViewModel.suggestions,
+                                (suggestion: string) =>
+                                    SuggestionView(
+                                        suggestion,
+                                        searchViewModel,
+                                        coreViewModel,
+                                    ),
+                            ]}
+                        ></div>
+                    </div>
+                </main>
+                <button on:click={close}>
+                    {coreViewModel.translations.general.closeButton}
+                    <span class="icon">close</span>
+                </button>
+            </div>
+        </div>
     );
 }
 
-function SuggestionView<T>(suggestion: string, searchViewModel: SearchViewModel<T>, coreViewModel: CoreViewModel) {
-    const isApplied = React.createProxyState([searchViewModel.appliedQuery], ()=>searchViewModel.appliedQuery.value == suggestion);
+function SuggestionView<T>(
+    suggestion: string,
+    searchViewModel: SearchViewModel<T>,
+    coreViewModel: CoreViewModel,
+) {
+    const isApplied = React.createProxyState(
+        [searchViewModel.appliedQuery],
+        () => searchViewModel.appliedQuery.value == suggestion,
+    );
 
     function deleteSuggestion() {
-	searchViewModel.deleteSuggestion(suggestion);
+        searchViewModel.deleteSuggestion(suggestion);
     }
 
     function applySuggestion() {
-	searchViewModel.search(suggestion);
+        searchViewModel.search(suggestion);
     }
 
-    return <div class="flex-row surface align-center">
-	<span class="width-100 flex-1 padding-h">{suggestion}</span>
-	<button
-	    class="danger"
-	    aria-label={coreViewModel.translations.general.deleteButton}
-	    on:click={deleteSuggestion}
-	>
-	    <span class="icon">delete</span>
-	</button>
-	<button
-	    class="primary"
-	    aria-label={coreViewModel.translations.general.applyButton}
-	    on:click={applySuggestion}
-	    toggle:disabled={isApplied}
-	>
-	    <span class="icon">check</span>
-	</button>
-    </div>
+    return (
+        <div class="flex-row surface align-center">
+            <span class="width-100 flex-1 padding-h">{suggestion}</span>
+            <button
+                class="danger"
+                aria-label={coreViewModel.translations.general.deleteButton}
+                on:click={deleteSuggestion}
+            >
+                <span class="icon">delete</span>
+            </button>
+            <button
+                class="primary"
+                aria-label={coreViewModel.translations.general.applyButton}
+                on:click={applySuggestion}
+                toggle:disabled={isApplied}
+            >
+                <span class="icon">check</span>
+            </button>
+        </div>
+    );
 }

src/View/Modals/settingsModal.tsx

@@ -1,10 +1,10 @@
-import * as React from "../../react";
 import { SplitModal } from "./splitModal";
 import { languageNames } from "../translations";
 import { PlaceholderView } from "../Components/placeholderView";
 import { OptionButtonList } from "../Components/optionButtonList";
 import { NavigationButton } from "../Components/navigationButton";
 import { InfoTile } from "../Components/infoTile";
+import * as React from "../../react";
 import SettingsViewModel, {
     SettingsModalPages,
 } from "../../ViewModel/Global/settingsViewModel";

src/View/Modals/splitModal.tsx

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import "./splitModal.css";
+import * as React from "../../react";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 
 export function SplitModal<T>(
@@ -10,7 +10,7 @@ export function SplitModal<T>(
     navigationState?: React.State<T | undefined>,
 ) {
     function closePage() {
-	if (!navigationState) return;
+        if (!navigationState) return;
         navigationState.value = undefined;
     }
 

src/View/Modals/storageModal.tsx

@@ -1,7 +1,7 @@
-import * as React from "../../react";
 import { SplitModal } from "./splitModal";
 import { DirectoryItemList } from "../Components/directoryItemList";
 import { DangerousActionButton } from "../Components/dangerousActionButton";
+import * as React from "../../react";
 import StorageViewModel from "../../ViewModel/Global/storageViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import { PATH_COMPONENT_SEPARATOR } from "../../Model/Global/storageModel";

src/View/Modals/taskSettingsModal.tsx

@@ -1,5 +1,4 @@
 import { v4 } from "uuid";
-import * as React from "../../react";
 import {
     Entry,
     Option,
@@ -7,6 +6,7 @@ import {
     VersionIdToOption,
 } from "../Components/option";
 import { DangerousActionButton } from "../Components/dangerousActionButton";
+import * as React from "../../react";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 
@@ -18,264 +18,269 @@ export function TaskSettingsModal(
     const statusSuggestionId = v4();
 
     const BoardOptionConverter: React.StateItemConverter<Entry> = (
-	entry: Entry,
+        entry: Entry,
     ) => {
-	const isSelected = entry[0] == taskViewModel.task.boardId;
-	return Option(entry[1], entry[0], isSelected);
+        const isSelected = entry[0] == taskViewModel.task.boardId;
+        return Option(entry[1], entry[0], isSelected);
     };
 
     return (
-	<div class="modal task-settings" open toggle:full-description={taskViewModel.isPresentingFullScreenDescription}>
-	    <div>
-		<main id="standard-main">
-		    <h2>
-			{
-			    coreViewModel.translations.chatPage.task
-			    .taskSettingsHeadline
-			}
-		    </h2>
+        <div
+            class="modal task-settings"
+            open
+            toggle:full-description={
+                taskViewModel.isPresentingFullScreenDescription
+            }
+        >
+            <div>
+                <main id="standard-main">
+                    <h2>
+                        {
+                            coreViewModel.translations.chatPage.task
+                                .taskSettingsHeadline
+                        }
+                    </h2>
 
-		    <div class="column-wrapper">
-			<div class="flex-column">
-			    <label class="tile flex-no">
-				<span class="icon">label</span>
-				<div>
-				    <span>
-					{
-					    coreViewModel.translations.chatPage.task
-					    .taskNameLabel
-					}
-				    </span>
-				    <input
-					bind:value={taskViewModel.name}
-				    ></input>
-				</div>
-			    </label>
+                    <div class="column-wrapper">
+                        <div class="flex-column">
+                            <label class="tile flex-no">
+                                <span class="icon">label</span>
+                                <div>
+                                    <span>
+                                        {
+                                            coreViewModel.translations.chatPage
+                                                .task.taskNameLabel
+                                        }
+                                    </span>
+                                    <input
+                                        bind:value={taskViewModel.name}
+                                    ></input>
+                                </div>
+                            </label>
 
-			    <label class="tile flex-no">
-				<span class="icon">category</span>
-				<div>
-				    <span>
-					{
-					    coreViewModel.translations.chatPage.task
-					    .taskBoardLabel
-					}
-				    </span>
-				    <select
-					bind:value={taskViewModel.boardId}
-					children:append={[
-					    taskViewModel.chatViewModel
-					    .taskBoardSuggestions,
-					    BoardOptionConverter,
-					]}
-				    ></select>
-				    <span class="icon">arrow_drop_down</span>
-				</div>
-			    </label>
+                            <label class="tile flex-no">
+                                <span class="icon">category</span>
+                                <div>
+                                    <span>
+                                        {
+                                            coreViewModel.translations.chatPage
+                                                .task.taskBoardLabel
+                                        }
+                                    </span>
+                                    <select
+                                        bind:value={taskViewModel.boardId}
+                                        children:append={[
+                                            taskViewModel.chatViewModel
+                                                .taskBoardSuggestions,
+                                            BoardOptionConverter,
+                                        ]}
+                                    ></select>
+                                    <span class="icon">arrow_drop_down</span>
+                                </div>
+                            </label>
 
-			    <label class="tile flex-no">
-				<span class="icon">description</span>
-				<div>
-				    <span>
-					{
-					    coreViewModel.translations.chatPage.task
-					    .taskDescriptionLabel
-					}
-				    </span>
-				    <textarea
-					rows="10"
-					bind:value={taskViewModel.description}
-				    ></textarea>
-				</div>
-			    </label>
-			    <div class="flex-row justify-end">
-				<button
-				    class="width-50"
-				    on:click={taskViewModel.openFullscreenDecription}
-				>
-				    {
-					coreViewModel.translations.general.fullscreenButton
-				    }
+                            <label class="tile flex-no">
+                                <span class="icon">description</span>
+                                <div>
+                                    <span>
+                                        {
+                                            coreViewModel.translations.chatPage
+                                                .task.taskDescriptionLabel
+                                        }
+                                    </span>
+                                    <textarea
+                                        rows="10"
+                                        bind:value={taskViewModel.description}
+                                    ></textarea>
+                                </div>
+                            </label>
+                            <div class="flex-row justify-end">
+                                <button
+                                    class="width-50"
+                                    on:click={
+                                        taskViewModel.openFullscreenDecription
+                                    }
+                                >
+                                    {
+                                        coreViewModel.translations.general
+                                            .fullscreenButton
+                                    }
 
-				    <span class="icon">fullscreen</span>
-				</button>
-			    </div>
-			</div>
+                                    <span class="icon">fullscreen</span>
+                                </button>
+                            </div>
+                        </div>
 
-			<hr class="mobile-only"></hr>
+                        <hr class="mobile-only"></hr>
 
-			<div class="flex-column">
-			    <label class="tile flex-no">
-				<span class="icon">category</span>
-				<div>
-				    <span>
-					{
-					    coreViewModel.translations.chatPage.task
-					    .taskCategoryLabel
-					}
-				    </span>
-				    <input
-					bind:value={taskViewModel.category}
-					list={categorySuggestionId}
-				    ></input>
-				</div>
-			    </label>
-			    <datalist
-				hidden
-				id={categorySuggestionId}
-				children:append={[
-				    taskViewModel.containingViewModel.taskCategorySuggestions,
-				    StringToOption,
-				]}
-			    ></datalist>
+                        <div class="flex-column">
+                            <label class="tile flex-no">
+                                <span class="icon">category</span>
+                                <div>
+                                    <span>
+                                        {
+                                            coreViewModel.translations.chatPage
+                                                .task.taskCategoryLabel
+                                        }
+                                    </span>
+                                    <input
+                                        bind:value={taskViewModel.category}
+                                        list={categorySuggestionId}
+                                    ></input>
+                                </div>
+                            </label>
+                            <datalist
+                                hidden
+                                id={categorySuggestionId}
+                                children:append={[
+                                    taskViewModel.containingViewModel
+                                        .taskCategorySuggestions,
+                                    StringToOption,
+                                ]}
+                            ></datalist>
 
-			<label class="tile flex-no">
-			    <span class="icon">clock_loader_40</span>
-			    <div>
-				<span>
-				    {
-					coreViewModel.translations.chatPage.task
-					.taskStatusLabel
-				    }
-				</span>
-				<input
-				    bind:value={taskViewModel.status}
-				    list={statusSuggestionId}
-				></input>
-			    </div>
-			</label>
-			<datalist
-			    hidden
-			    id={statusSuggestionId}
-			    children:append={[
-				taskViewModel.containingViewModel.taskStatusSuggestions,
-				StringToOption,
-			    ]}
-			></datalist>
+                            <label class="tile flex-no">
+                                <span class="icon">clock_loader_40</span>
+                                <div>
+                                    <span>
+                                        {
+                                            coreViewModel.translations.chatPage
+                                                .task.taskStatusLabel
+                                        }
+                                    </span>
+                                    <input
+                                        bind:value={taskViewModel.status}
+                                        list={statusSuggestionId}
+                                    ></input>
+                                </div>
+                            </label>
+                            <datalist
+                                hidden
+                                id={statusSuggestionId}
+                                children:append={[
+                                    taskViewModel.containingViewModel
+                                        .taskStatusSuggestions,
+                                    StringToOption,
+                                ]}
+                            ></datalist>
 
-		    <label class="tile flex-no">
-			<span class="icon">priority_high</span>
-			<div>
-			    <span>
-				{
-				    coreViewModel.translations.chatPage.task
-				    .taskPriorityLabel
-				}
-			    </span>
-			    <input
-				type="number"
-				bind:value={taskViewModel.priority}
-			    ></input>
-			</div>
-		    </label>
+                            <label class="tile flex-no">
+                                <span class="icon">priority_high</span>
+                                <div>
+                                    <span>
+                                        {
+                                            coreViewModel.translations.chatPage
+                                                .task.taskPriorityLabel
+                                        }
+                                    </span>
+                                    <input
+                                        type="number"
+                                        bind:value={taskViewModel.priority}
+                                    ></input>
+                                </div>
+                            </label>
 
-		    <hr></hr>
+                            <hr></hr>
 
-		    <label class="tile flex-no">
-			<span class="icon">calendar_month</span>
-			<div>
-			    <span>
-				{
-				    coreViewModel.translations.chatPage.task
-				    .taskDateLabel
-				}
-			    </span>
-			    <input
-				type="date"
-				bind:value={taskViewModel.date}
-			    ></input>
-			</div>
-		    </label>
+                            <label class="tile flex-no">
+                                <span class="icon">calendar_month</span>
+                                <div>
+                                    <span>
+                                        {
+                                            coreViewModel.translations.chatPage
+                                                .task.taskDateLabel
+                                        }
+                                    </span>
+                                    <input
+                                        type="date"
+                                        bind:value={taskViewModel.date}
+                                    ></input>
+                                </div>
+                            </label>
 
-		    <label class="tile flex-no">
-			<span class="icon">schedule</span>
-			<div>
-			    <span>
-				{
-				    coreViewModel.translations.chatPage.task
-				    .taskTimeLabel
-				}
-			    </span>
-			    <input
-				type="time"
-				bind:value={taskViewModel.time}
-			    ></input>
-			</div>
-		    </label>
-		</div>
-	    </div>
+                            <label class="tile flex-no">
+                                <span class="icon">schedule</span>
+                                <div>
+                                    <span>
+                                        {
+                                            coreViewModel.translations.chatPage
+                                                .task.taskTimeLabel
+                                        }
+                                    </span>
+                                    <input
+                                        type="time"
+                                        bind:value={taskViewModel.time}
+                                    ></input>
+                                </div>
+                            </label>
+                        </div>
+                    </div>
 
-	    <hr></hr>
+                    <hr></hr>
 
-	    <label class="tile flex-no">
-		<span class="icon">history</span>
-		<div>
-		    <span>
-			{
-			    coreViewModel.translations.general
-			    .fileVersionLabel
-			}
-		    </span>
-		    <select
-			bind:value={taskViewModel.selectedVersionId}
-			children:append={[
-			    taskViewModel.versionIds,
-			    VersionIdToOption,
-			]}
-		    ></select>
-		    <span class="icon">arrow_drop_down</span>
-		</div>
-	    </label>
+                    <label class="tile flex-no">
+                        <span class="icon">history</span>
+                        <div>
+                            <span>
+                                {
+                                    coreViewModel.translations.general
+                                        .fileVersionLabel
+                                }
+                            </span>
+                            <select
+                                bind:value={taskViewModel.selectedVersionId}
+                                children:append={[
+                                    taskViewModel.versionIds,
+                                    VersionIdToOption,
+                                ]}
+                            ></select>
+                            <span class="icon">arrow_drop_down</span>
+                        </div>
+                    </label>
 
-	    <hr></hr>
+                    <hr></hr>
 
-	    <div class="width-input">
-		{DangerousActionButton(
-		    coreViewModel,
-		    coreViewModel.translations.chatPage.task
-		    .deleteTaskButton,
-		    "delete_forever",
-		    taskViewModel.deleteTask,
-		)}
-	    </div>
-	</main>
-	<main id="fullscreen-main">
-	    <textarea
-		style="height: 100%; width: 100%; max-width: unset"
-		bind:value={taskViewModel.description}
-	    ></textarea>
-	</main>
-	<div
-	    class="flex-row width-100"
-	    id="fullscreen-exit"
-	>
-	<button
-	    class="flex"
-	    on:click={taskViewModel.closeFullscreenDecription}
-	>
-	    {coreViewModel.translations.general.exitButton}
-	    <span class="icon">fullscreen_exit</span>
-	</button>
-    </div>
-	<div
-	    class="flex-row width-100"
-	    id="controls"
-	>
-	    <button
-		class="flex"
-		on:click={taskViewModel.closeAndDiscard}
-	    >
-		{coreViewModel.translations.general.closeButton}
-	    </button>
-	    <button
-		class="flex primary"
-		on:click={taskViewModel.closeAndSave}
-	    >
-		{coreViewModel.translations.general.saveButton}
-		<span class="icon">save</span>
-	    </button>
-	</div>
-    </div>
-</div>
-);
+                    <div class="width-input">
+                        {DangerousActionButton(
+                            coreViewModel,
+                            coreViewModel.translations.chatPage.task
+                                .deleteTaskButton,
+                            "delete_forever",
+                            taskViewModel.deleteTask,
+                        )}
+                    </div>
+                </main>
+                <main id="fullscreen-main">
+                    <textarea
+                        style="height: 100%; width: 100%; max-width: unset"
+                        bind:value={taskViewModel.description}
+                    ></textarea>
+                </main>
+                <div class="flex-row width-100" id="fullscreen-exit">
+                    <button
+                        class="flex"
+                        on:click={taskViewModel.closeFullscreenDecription}
+                    >
+                        {coreViewModel.translations.general.exitButton}
+                        <span class="icon">fullscreen_exit</span>
+                    </button>
+                </div>
+                <div class="flex-row width-100" id="controls">
+                    <button
+                        class="flex"
+                        on:click={taskViewModel.closeAndDiscard}
+                    >
+                        {coreViewModel.translations.general.closeButton}
+                    </button>
+                    <button
+                        class="flex primary"
+                        on:click={taskViewModel.closeAndSave}
+                    >
+                        {coreViewModel.translations.general.saveButton}
+                        <span class="icon">save</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
 }

src/View/chatPage.css

@@ -65,9 +65,9 @@ body[showing-chat] #chat-page-wrapper {
     overflow: hidden;
 }
 
-@media (pointer: coarse) and (max-width: 480px){
+@media (pointer: coarse) and (max-width: 480px) {
     #chat-page > div > #main > div > .pane-wrapper > .pane {
-	flex-direction: column-reverse;
+        flex-direction: column-reverse;
     }
 }
 
@@ -78,13 +78,13 @@ body[showing-chat] #chat-page-wrapper {
 
 @media (min-width: 1024px) {
     #chat-page > div > #main > div > .pane-wrapper {
-	min-width: unset;
+        min-width: unset;
     }
 
     #chat-page > div > #main > div > .pane-wrapper.side {
-	width: 18rem;
-	min-width: 18rem;
-	max-width: 18rem;
+        width: 18rem;
+        min-width: 18rem;
+        max-width: 18rem;
     }
 }
 
@@ -114,21 +114,21 @@ body[showing-chat] #chat-page-wrapper {
 
 #chat-page > div > #ribbon > span,
 #chat-page
-> div
-> #main
-> div
-> .pane-wrapper
-> .pane
-> .toolbar
-> span.ribbon {
+    > div
+    > #main
+    > div
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    > span.ribbon {
     gap: var(--gap-between-tiles);
     padding: var(--gap-between-tiles);
 }
 
-@media (pointer: coarse) and (max-width: 480px){
-#chat-page > div > #ribbon #close-button {
-    order: 1;
-} 
+@media (pointer: coarse) and (max-width: 480px) {
+    #chat-page > div > #ribbon #close-button {
+        order: 1;
+    }
 }
 
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
@@ -192,13 +192,13 @@ body[showing-chat] #chat-page-wrapper {
 
 #chat-page > div > #ribbon button.ribbon-button,
 #chat-page
-> div
-> #main
-> div
-> .pane-wrapper
-> .pane
-> .toolbar
-button.ribbon-button {
+    > div
+    > #main
+    > div
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    button.ribbon-button {
     min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
     width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
     max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
@@ -211,14 +211,14 @@ button.ribbon-button {
 
 #chat-page > div > #ribbon button > .icon,
 #chat-page
-> div
-> #main
-> div
-> .pane-wrapper
-> .pane
-> .toolbar
-button
-> .icon {
+    > div
+    > #main
+    > div
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    button
+    > .icon {
     font-size: 1.1rem;
 }
 
@@ -244,13 +244,13 @@ button
 }
 
 #chat-page
-> div
-> #main
-> div
-> .pane-wrapper
-> .pane
-> .toolbar
-:is(input, select, button) {
+    > div
+    > #main
+    > div
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    :is(input, select, button) {
     height: 100%;
     flex: 1;
 }
@@ -262,18 +262,19 @@ button
 
 @media (min-width: 640px) {
     .modal.task-settings .column-wrapper {
-	display: flex;
-	flex-direction: row;
-	gap: var(--content-padding);
+        display: flex;
+        flex-direction: row;
+        gap: var(--content-padding);
     }
 
-    .modal.task-settings .column-wrapper > .flex-column{
-	width: 100%;
-	flex: 1;
+    .modal.task-settings .column-wrapper > .flex-column {
+        width: 100%;
+        flex: 1;
     }
 }
 
-.modal.task-settings:not([full-description]) :is(#fullscreen-exit, #fullscreen-main) {
+.modal.task-settings:not([full-description])
+    :is(#fullscreen-exit, #fullscreen-main) {
     display: none;
 }
 

src/View/chatPage.tsx

@@ -1,4 +1,3 @@
-import * as React from "../react";
 import { ViewController } from "./viewController";
 import "./homePage.css";
 import { ChatViewToggleButton } from "./Components/chatViewToggleButton";
@@ -6,6 +5,7 @@ import { TaskPage } from "./ChatPages/taskPage";
 import { SettingsPage } from "./ChatPages/settingsPage";
 import { MessagePage } from "./ChatPages/messagePage";
 import { CalendarPage } from "./ChatPages/calendarPage";
+import * as React from "../react";
 import CoreViewModel from "../ViewModel/Global/coreViewModel";
 import ChatViewModel, { ChatPageTypes } from "../ViewModel/Chat/chatViewModel";
 
@@ -73,8 +73,8 @@ export function ChatPage(
             <div>
                 <div id="ribbon">
                     <button
-			class="ghost"
-			id="close-button"
+                        class="ghost"
+                        id="close-button"
                         aria-label={
                             coreViewModel.translations.chatPage
                                 .closeChatAudioLabe
@@ -95,47 +95,48 @@ export function ChatPage(
                         toggle:hidden={
                             chatViewModel.connectionViewModel.isConnected
                         }
-			toggle:disabled={
-			    chatViewModel.connectionViewModel.hasNoPreviousConnections
-			}
-		    >
-			<span class="icon">signal_disconnected</span>
-		    </button>
+                        toggle:disabled={
+                            chatViewModel.connectionViewModel
+                                .hasNoPreviousConnections
+                        }
+                    >
+                        <span class="icon">signal_disconnected</span>
+                    </button>
 
-		    <span class="marquee" children:set={marqueeContent}></span>
+                    <span class="marquee" children:set={marqueeContent}></span>
 
-		    <span class="navigation-buttons">
-			{ChatViewToggleButton(
-			    coreViewModel.translations.chatPage.pages.calendar,
-			    "calendar_month",
-			    ChatPageTypes.Calendar,
-			    chatViewModel,
-			)}
-    {ChatViewToggleButton(
-	coreViewModel.translations.chatPage.pages.tasks,
-	"task_alt",
-	ChatPageTypes.Tasks,
-	chatViewModel,
-    )}
-    {ChatViewToggleButton(
-	coreViewModel.translations.chatPage.pages.messages,
-	"forum",
-	ChatPageTypes.Messages,
-	chatViewModel,
-    )}
-    {ChatViewToggleButton(
-	coreViewModel.translations.chatPage.pages.settings,
-	"settings",
-	ChatPageTypes.Settings,
-	chatViewModel,
-    )}
-</span>
-		</div>
-		<div
-		    id="main"
-		    children:set={ViewController.chatPages.state}
-		></div>
-	    </div>
-	</article>
+                    <span class="navigation-buttons">
+                        {ChatViewToggleButton(
+                            coreViewModel.translations.chatPage.pages.calendar,
+                            "calendar_month",
+                            ChatPageTypes.Calendar,
+                            chatViewModel,
+                        )}
+                        {ChatViewToggleButton(
+                            coreViewModel.translations.chatPage.pages.tasks,
+                            "task_alt",
+                            ChatPageTypes.Tasks,
+                            chatViewModel,
+                        )}
+                        {ChatViewToggleButton(
+                            coreViewModel.translations.chatPage.pages.messages,
+                            "forum",
+                            ChatPageTypes.Messages,
+                            chatViewModel,
+                        )}
+                        {ChatViewToggleButton(
+                            coreViewModel.translations.chatPage.pages.settings,
+                            "settings",
+                            ChatPageTypes.Settings,
+                            chatViewModel,
+                        )}
+                    </span>
+                </div>
+                <div
+                    id="main"
+                    children:set={ViewController.chatPages.state}
+                ></div>
+            </div>
+        </article>
     );
 }

src/View/chatPageWrapper.tsx

@@ -1,6 +1,6 @@
-import * as React from "../react";
 import "./chatPage.css";
 import { ChatPage } from "./chatPage";
+import * as React from "../react";
 import CoreViewModel from "../ViewModel/Global/coreViewModel";
 import ChatListViewModel from "../ViewModel/Chat/chatListViewModel";
 

src/View/homePage.tsx

@@ -1,8 +1,8 @@
-import * as React from "../react";
 import "./homePage.css";
 import { StringToOption } from "./Components/option";
 import { HomePageButton } from "./Components/homePageButton";
 import { ChatViewModelToChatEntry } from "./Components/chatEntry";
+import * as React from "../react";
 import StorageViewModel from "../ViewModel/Global/storageViewModel";
 import SettingsViewModel from "../ViewModel/Global/settingsViewModel";
 import FileTransferViewModel from "../ViewModel/Global/fileTransferViewModel";

src/View/viewController.ts

@@ -7,7 +7,7 @@ class Tracker<T> {
 class TrackerMap<T> {
     trackers = new Map<string, Tracker<T>>();
 
-    private register = (key: string): Tracker<T>=> {
+    private register = (key: string): Tracker<T> => {
         if (this.trackers.has(key)) {
             return this.trackers.get(key)!;
         }

src/ViewModel/Chat/chatListViewModel.ts

@@ -1,9 +1,9 @@
-import * as React from "../../react";
 import ChatViewModel from "./chatViewModel";
 import SettingsViewModel from "../Global/settingsViewModel";
 import NotificationViewModel from "../Global/notificationViewModel";
 import CoreViewModel from "../Global/coreViewModel";
 import ConnectionViewModel from "../Global/connectionViewModel";
+import * as React from "../../react";
 import { IndexManager } from "../../Model/Utility/utility";
 import ChatModel from "../../Model/Chat/chatModel";
 

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -1,6 +1,6 @@
-import * as React from "../../react";
 import MessagePageViewModel from "../Pages/messagePageViewModel";
 import CoreViewModel from "../Global/coreViewModel";
+import * as React from "../../react";
 import {
     ChatMessage,
     ChatMessageReaction,

src/ViewModel/Chat/chatViewModel.ts

@@ -1,4 +1,3 @@
-import * as React from "../../react";
 import ChatListViewModel from "./chatListViewModel";
 import TaskPageViewModel from "../Pages/taskPageViewModel";
 import SettingsPageViewModel from "../Pages/settingsPageViewModel";
@@ -10,6 +9,7 @@ import SettingsViewModel from "../Global/settingsViewModel";
 import NotificationViewModel from "../Global/notificationViewModel";
 import CoreViewModel, { Context, ContextHost } from "../Global/coreViewModel";
 import ConnectionViewModel from "../Global/connectionViewModel";
+import * as React from "../../react";
 import { Colors } from "../../colors";
 import { CommonKeys } from "../../View/keystrokes";
 import { Entry } from "../../View/Components/option";

src/ViewModel/Global/connectionViewModel.ts

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import CoreViewModel from "./coreViewModel";
+import * as React from "../../react";
 
 export default class ConnectionViewModel {
     // state
@@ -48,7 +48,7 @@ export default class ConnectionViewModel {
             );
         }
 
-	this.hideConnectionModal();
+        this.hideConnectionModal();
     };
 
     // methods
@@ -69,8 +69,8 @@ export default class ConnectionViewModel {
         this.coreViewModel.connectionModel.removeAddress(address);
         this.updatePreviousAddresses();
 
-	if (this.previousAddresses.value.size > 0) return;
-	this.hideConnectionModal();
+        if (this.previousAddresses.value.size > 0) return;
+        this.hideConnectionModal();
     };
 
     // view

src/ViewModel/Global/coreViewModel.ts

@@ -40,8 +40,8 @@ export default class CoreViewModel {
             return;
 
         while (this.contexts.length > 0) {
-            const currentContext: Context|undefined= this.context;
-	    if (!currentContext) return;
+            const currentContext: Context | undefined = this.context;
+            if (!currentContext) return;
             currentContext.handleContextClose(fromHistoryEvent);
             this.contextStack.delete(currentContext.contextId);
             if (currentContext.contextId == contextId) break;
@@ -49,9 +49,10 @@ export default class CoreViewModel {
     };
 
     handleKeyDown = (e: KeyboardEvent): void => {
-	if (!(e instanceof KeyboardEvent)) return console.trace("NOT A KEY EVENT");
+        if (!(e instanceof KeyboardEvent))
+            return console.trace("NOT A KEY EVENT");
         if (CoreViewModel.checkIsKeystroke(e) == false) return;
-	console.log(e.key);
+        console.log(e.key);
         e.preventDefault();
         const contexts: Context[] = this.contexts;
         while (contexts.length > 0) {
@@ -97,7 +98,7 @@ export default class CoreViewModel {
         document.body.addEventListener("keydown", this.handleKeyDown);
 
         window.onpopstate = () => {
-	    if (!this.context) return;
+            if (!this.context) return;
             this.closeContext(this.context.contextId, true);
         };
 
@@ -164,11 +165,10 @@ export class ContextHost<T> extends Context {
     updateContexts = (): void => {
         if (this.isOpen == false) return;
 
-	const selection = this.contextSelection;
-	if (!selection) return;
-        const selectedContext: Context | undefined = this.contexts.get(
-            selection
-        );
+        const selection = this.contextSelection;
+        if (!selection) return;
+        const selectedContext: Context | undefined =
+            this.contexts.get(selection);
         if (!selectedContext) return;
         if (selectedContext != this.currentContext.value) {
             this.closeCurrentContext();
@@ -178,7 +178,10 @@ export class ContextHost<T> extends Context {
         this.currentContext.value = selectedContext;
     };
 
-    constructor(contextDebugDescription: string, public coreViewModel: CoreViewModel) {
-	super(contextDebugDescription);
+    constructor(
+        contextDebugDescription: string,
+        public coreViewModel: CoreViewModel,
+    ) {
+        super(contextDebugDescription);
     }
 }

src/ViewModel/Global/fileTransferViewModel.ts

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import CoreViewModel, { Context } from "./coreViewModel";
+import * as React from "../../react";
 import { CommonKeys } from "../../View/keystrokes";
 import StorageModel, {
     StorageModelSubPaths,
@@ -54,7 +54,9 @@ export default class FileTransferViewModel extends Context {
     exportKey: React.State<string> = new React.State("");
     exportKeyConfirmation: React.State<string> = new React.State("");
 
-    importedFile: React.State<File | undefined> = new React.State<File | undefined>(undefined);
+    importedFile: React.State<File | undefined> = new React.State<
+        File | undefined
+    >(undefined);
     importedFileString: React.State<string> = new React.State("");
     importKey: React.State<string> = new React.State("");
     isImportKeyCorrect: React.State<boolean> = new React.State(true);
@@ -139,7 +141,7 @@ export default class FileTransferViewModel extends Context {
     };
 
     downloadFile = async (): Promise<void> => {
-	if (this.cannotExport.value == true) return;
+        if (this.cannotExport.value == true) return;
         const date = new Date().toISOString().split("T")[0];
 
         const backup: Blob =
@@ -158,7 +160,7 @@ export default class FileTransferViewModel extends Context {
         if (!input) return;
         if (!(input instanceof HTMLInputElement)) return;
 
-	if (!input.files) return;
+        if (!input.files) return;
         const file = input.files[0];
         this.importedFile.value = file;
     };
@@ -171,7 +173,7 @@ export default class FileTransferViewModel extends Context {
         reader.readAsText(file, "utf8");
         reader.onload = () => {
             const result = reader.result;
-	    if (!result) return;
+            if (!result) return;
             this.importedFileString.value = result.toString();
             this.showImportDecryptDataModal();
         };

src/ViewModel/Global/notificationViewModel.ts

@@ -1,6 +1,6 @@
-import * as React from "../../react";
 import { ChatPageTypes } from "../Chat/chatViewModel";
 import ChatListViewModel from "../Chat/chatListViewModel";
+import * as React from "../../react";
 import ChatModel, { ChatMessage } from "../../Model/Chat/chatModel";
 
 export default class NotificationViewModel {
@@ -35,7 +35,7 @@ export default class NotificationViewModel {
     };
 
     openNotification = () => {
-        const notification: Notification|undefined = this.marquee.value;
+        const notification: Notification | undefined = this.marquee.value;
         if (notification == undefined) return;
 
         const chat = [
@@ -44,7 +44,7 @@ export default class NotificationViewModel {
             (chat) =>
                 chat.chatModel.unwrappedPrimaryChannel == notification.chat,
         );
-	if (!chat) return;
+        if (!chat) return;
         chat.open();
         chat.openPage(ChatPageTypes.Messages);
     };
@@ -56,8 +56,9 @@ export default class NotificationViewModel {
             return this.stopLoop();
         }
 
-        const notification: Notification|undefined = this.messagesInMarquee.shift();
-	if (!notification) return;
+        const notification: Notification | undefined =
+            this.messagesInMarquee.shift();
+        if (!notification) return;
         this.seenMessageIds.delete(notification.messageId);
         this.marquee.value = notification;
     };

src/ViewModel/Global/settingsViewModel.ts

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import CoreViewModel, { Context } from "./coreViewModel";
+import * as React from "../../react";
 import { CommonKeys } from "../../View/keystrokes";
 import { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
 
@@ -13,12 +13,12 @@ export default class SettingsViewModel extends Context {
     requiresReload = new React.State<boolean>(false);
 
     firstDayOfWeek: React.State<string> = new React.State("0");
-    language: React.State<Languages | string> = new React.State<Languages | string>(
-        Languages.English,
-    );
-    theme: React.State<ThemeSettings | string> = new React.State<ThemeSettings | string>(
-        ThemeSettings.System,
-    );
+    language: React.State<Languages | string> = new React.State<
+        Languages | string
+    >(Languages.English);
+    theme: React.State<ThemeSettings | string> = new React.State<
+        ThemeSettings | string
+    >(ThemeSettings.System);
 
     // guards
     cannotSetName: React.State<boolean> = React.createProxyState(
@@ -48,121 +48,132 @@ export default class SettingsViewModel extends Context {
     };
 
     showModalPage = (page: SettingsModalPages): void => {
-	this.selectedModalPage.value = page;
+        this.selectedModalPage.value = page;
     };
 
     // view
     applyTheme = (): void => {
-	let theme: string = this.theme.value;
+        let theme: string = this.theme.value;
 
-	if (theme == ThemeSettings.Dynamic) {
-	    const scene = this.selectDynamicScene();
-	    this.setScene(scene);
-	    return;
-	}
+        if (theme == ThemeSettings.Dynamic) {
+            const scene = this.selectDynamicScene();
+            this.setScene(scene);
+            return;
+        }
 
-	if (theme == ThemeSettings.System) {
-	    theme = SettingsViewModel.getSystemTheme();
-	}
+        if (theme == ThemeSettings.System) {
+            theme = SettingsViewModel.getSystemTheme();
+        }
 
-	if (theme == ThemeSettings.Dark) {
-	    this.setScene(DynamicSceneNight);
-	} else {
-	    this.setScene(DynamicSceneDay);
-	}
+        if (theme == ThemeSettings.Dark) {
+            this.setScene(DynamicSceneNight);
+        } else {
+            this.setScene(DynamicSceneDay);
+        }
     };
 
     selectDynamicScene = (): DynamicScene => {
-	let hour = new Date().getHours();
+        let hour = new Date().getHours();
 
-	if (hour >= 21 || hour <= 6) {
-	    return DynamicSceneNight;
-	} else if (hour > 6 && hour < 10) {
-	    return DynamicSceneSunrise;
-	} else if (hour < 14) {
-	    return DynamicSceneDay;
-	} else if (hour < 17) {
-	    return DynamicSceneAfternoon
-	} else {
-	    return DynamicSceneSunset
-	}
-    }
+        if (hour >= 21 || hour <= 6) {
+            return DynamicSceneNight;
+        } else if (hour > 6 && hour < 10) {
+            return DynamicSceneSunrise;
+        } else if (hour < 14) {
+            return DynamicSceneDay;
+        } else if (hour < 17) {
+            return DynamicSceneAfternoon;
+        } else {
+            return DynamicSceneSunset;
+        }
+    };
 
     setScene = (scene: DynamicScene): void => {
-	document.body.style.setProperty("--backdrop-grass-filter", `brightness(${scene.brightness})`);
+        document.body.style.setProperty(
+            "--backdrop-grass-filter",
+            `brightness(${scene.brightness})`,
+        );
 
-	function setSkyColor(tone: 1|2, hue: number, saturation: number, luma: number) {
-	    document.body.style.setProperty(`--sky-${tone}`, `hsl(${hue}, ${saturation}%, ${luma}%)`);
-	}
-	setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
-	setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma-10);
+        function setSkyColor(
+            tone: 1 | 2,
+            hue: number,
+            saturation: number,
+            luma: number,
+        ) {
+            document.body.style.setProperty(
+                `--sky-${tone}`,
+                `hsl(${hue}, ${saturation}%, ${luma}%)`,
+            );
+        }
+        setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
+        setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma - 10);
 
-	document.body.setAttribute("theme", scene.baseTheme);
-    }
+        document.body.setAttribute("theme", scene.baseTheme);
+    };
 
     // exit
     close = (): void => {
-	this.coreViewModel.closeContext(this.contextId);
+        this.coreViewModel.closeContext(this.contextId);
     };
 
     handleContextClose = (): void => {
-	this.isShowingSettingsModal.value = false;
-	if (this.requiresReload.value == true) {
-	    window.location.reload();
-	}
+        this.isShowingSettingsModal.value = false;
+        if (this.requiresReload.value == true) {
+            window.location.reload();
+        }
     };
 
     // init
     constructor(public readonly coreViewModel: CoreViewModel) {
-	super("settings");
+        super("settings");
 
-	this.username.value = coreViewModel.settingsModel.username;
-	this.usernameInput.value = coreViewModel.settingsModel.username;
-	this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
-	this.language.value = coreViewModel.settingsModel.language;
-	this.theme.value = coreViewModel.settingsModel.theme;
+        this.username.value = coreViewModel.settingsModel.username;
+        this.usernameInput.value = coreViewModel.settingsModel.username;
+        this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
+        this.language.value = coreViewModel.settingsModel.language;
+        this.theme.value = coreViewModel.settingsModel.theme;
 
-	// subscriptions
-	this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
-	this.language.subscribeSilent((newValue) => {
-	    this.coreViewModel.settingsModel.setLanguage(newValue);
-	    this.requiresReload.value = true;
-	});
-	this.theme.subscribeSilent((newValue) => {
-	    this.coreViewModel.settingsModel.setTheme(newValue);
-	});
+        // subscriptions
+        this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
+        this.language.subscribeSilent((newValue) => {
+            this.coreViewModel.settingsModel.setLanguage(newValue);
+            this.requiresReload.value = true;
+        });
+        this.theme.subscribeSilent((newValue) => {
+            this.coreViewModel.settingsModel.setTheme(newValue);
+        });
 
-	// set theme
-	this.theme.subscribe(() => {
-	    this.applyTheme();
-	});
-	SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
-	    this.applyTheme(),
-	);
-	const seconds = new Date().getSeconds();
-	const secondsUntilNewMinute = 60-seconds;
-	setTimeout(() => {
-	    setInterval(this.applyTheme, 1000*60);
-	}, secondsUntilNewMinute);
+        // set theme
+        this.theme.subscribe(() => {
+            this.applyTheme();
+        });
+        SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
+            this.applyTheme(),
+        );
+        const seconds = new Date().getSeconds();
+        const secondsUntilNewMinute = 60 - seconds;
+        setTimeout(() => {
+            setInterval(this.applyTheme, 1000 * 60);
+        }, secondsUntilNewMinute);
 
-	// keystrokes
-	this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
     }
 
     static generateThemeMedia(): MediaQueryList {
-	return window.matchMedia("(prefers-color-scheme: dark)");
+        return window.matchMedia("(prefers-color-scheme: dark)");
     }
 
     static getSystemTheme(): string {
-	const media = SettingsViewModel.generateThemeMedia();
-	return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
+        const media = SettingsViewModel.generateThemeMedia();
+        return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
     }
 }
 
 export enum SettingsModalPages {
     Appearance,
-	Regional,
-	Info,
+    Regional,
+    Info,
 }
 
 export interface DynamicScene {
@@ -176,40 +187,40 @@ export interface DynamicScene {
 export const DynamicSceneNight: DynamicScene = {
     hue1: 215,
     hue2: 220,
-    saturation : 50,
+    saturation: 50,
     luma: 25,
     brightness: 0.4,
     baseTheme: ThemeSettings.Dark,
-}
+};
 export const DynamicSceneSunrise: DynamicScene = {
     hue1: 45,
     hue2: 190,
-    saturation : 100,
+    saturation: 100,
     luma: 50,
     brightness: 1.2,
     baseTheme: ThemeSettings.Light,
-}
+};
 export const DynamicSceneDay: DynamicScene = {
     hue1: 190,
     hue2: 180,
-    saturation : 100,
+    saturation: 100,
     luma: 70,
     brightness: 1.4,
     baseTheme: ThemeSettings.Light,
-}
+};
 export const DynamicSceneAfternoon: DynamicScene = {
     hue1: 195,
     hue2: 220,
-    saturation : 100,
+    saturation: 100,
     luma: 50,
     brightness: 0.8,
     baseTheme: ThemeSettings.Light,
-}
+};
 export const DynamicSceneSunset: DynamicScene = {
     hue1: 20,
     hue2: 260,
-    saturation : 100,
+    saturation: 100,
     luma: 50,
     brightness: 0.4,
     baseTheme: ThemeSettings.Dark,
-}
+};

src/ViewModel/Global/storageViewModel.ts

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import CoreViewModel, { Context } from "./coreViewModel";
+import * as React from "../../react";
 import { CommonKeys } from "../../View/keystrokes";
 import StorageModel, {
     PATH_COMPONENT_SEPARATOR,

src/ViewModel/Pages/boardViewModel.ts

@@ -1,10 +1,10 @@
-import * as React from "../../react";
 import TaskViewModel from "./taskViewModel";
 import TaskPageViewModel from "./taskPageViewModel";
 import TaskContainingPageViewModel from "./taskContainingPageViewModel";
 import SearchViewModel from "../Utility/searchViewModel";
 import CoreViewModel from "../Global/coreViewModel";
 import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
+import * as React from "../../react";
 import { Colors } from "../../colors";
 import { CommonKeys } from "../../View/keystrokes";
 import BoardsAndTasksModel, {
@@ -115,11 +115,7 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
             searchTerm,
         ];
         this.coreViewModel.storageModel.write(suggestionPath, "");
-        if (
-            !this.searchSuggestions.value.has(
-                searchTerm,
-            ) && searchTerm != ""
-        ) {
+        if (!this.searchSuggestions.value.has(searchTerm) && searchTerm != "") {
             this.searchSuggestions.add(searchTerm);
         }
 
@@ -133,7 +129,7 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
             searchTerm,
         ];
         this.coreViewModel.storageModel.remove(suggestionPath);
-    }
+    };
 
     // view
     showTask = (taskFileContent: TaskFileContent): void => {
@@ -154,7 +150,7 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
             this,
             taskFileContent,
         );
-	console.log("STILL HERE", taskFileContent.fileId);
+        console.log("STILL HERE", taskFileContent.fileId);
         this.taskViewModels.set(taskFileContent.fileId, taskViewModel);
     };
 
@@ -234,7 +230,7 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
         const dirPath: string[] = this.getPreviousSearchesPath();
         const searches: string[] =
             this.coreViewModel.storageModel.list(dirPath);
-        this.searchSuggestions.add(...searches.filter(x => x != ""));
+        this.searchSuggestions.add(...searches.filter((x) => x != ""));
     };
 
     restoreSearch = (): void => {
@@ -307,13 +303,13 @@ export default class BoardViewModel extends TaskContainingPageViewModel {
             this.taskViewModels,
             this.filteredTaskViewModels,
             TaskViewModel.getStringsForFilter,
-	    this.searchSuggestions,
+            this.searchSuggestions,
         );
         this.searchViewModel.appliedQuery.subscribeSilent((newQuery) => {
             this.handleNewSearch(newQuery);
         });
         this.restoreSearch();
-	this.searchSuggestions.handleRemovals(this.handleSearchRemoved);
+        this.searchSuggestions.handleRemovals(this.handleSearchRemoved);
 
         this.isFilterActive = React.createProxyState(
             [this.searchViewModel.appliedQuery],

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -1,8 +1,8 @@
-import * as React from "../../react";
 import TaskViewModel from "./taskViewModel";
 import TaskContainingPageViewModel from "./taskContainingPageViewModel";
 import CoreViewModel from "../Global/coreViewModel";
 import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
+import * as React from "../../react";
 import { CommonKeys } from "../../View/keystrokes";
 import CalendarModel, { MonthGrid } from "../../Model/Files/calendarModel";
 import BoardsAndTasksModel, {

src/ViewModel/Pages/messagePageViewModel.ts

@@ -1,8 +1,8 @@
-import * as React from "../../react";
 import SearchViewModel from "../Utility/searchViewModel";
 import CoreViewModel, { Context } from "../Global/coreViewModel";
 import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
 import ChatMessageViewModel from "../Chat/chatMessageViewModel";
+import * as React from "../../react";
 import { CommonKeys } from "../../View/keystrokes";
 import {
     ChatMessage,
@@ -68,7 +68,9 @@ export default class MessagePageViewModel extends Context {
         );
     };
 
-    setReply = (chatMessageViewModel: ChatMessageViewModel|undefined): void => {
+    setReply = (
+        chatMessageViewModel: ChatMessageViewModel | undefined,
+    ): void => {
         this.replyingMessage.value = chatMessageViewModel;
         this.setFocus();
     };

src/ViewModel/Pages/settingsPageViewModel.ts

@@ -1,6 +1,6 @@
-import * as React from "../../react";
 import CoreViewModel, { Context } from "../Global/coreViewModel";
 import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
+import * as React from "../../react";
 import { Colors } from "../../colors";
 
 export default class SettingsPageViewModel extends Context {

src/ViewModel/Pages/taskContainingPageViewModel.ts

@@ -1,7 +1,7 @@
-import * as React from "../../react";
 import TaskViewModel from "./taskViewModel";
 import CoreViewModel, { Context } from "../Global/coreViewModel";
 import ChatViewModel from "../Chat/chatViewModel";
+import * as React from "../../react";
 import { IndexManager } from "../../Model/Utility/utility";
 import BoardsAndTasksModel, {
     TaskFileContent,
@@ -21,7 +21,6 @@ export default class TaskContainingPageViewModel extends Context {
     taskCategorySuggestions: React.ListState<string> = new React.ListState();
     taskStatusSuggestions: React.ListState<string> = new React.ListState();
 
-
     // methods
     createTaskFromBoardId = (boardId: string): void => {
         const taskFileContent: TaskFileContent =

src/ViewModel/Pages/taskPageViewModel.ts

@@ -1,9 +1,9 @@
-import * as React from "../../react";
 import BoardViewModel from "./boardViewModel";
 import CoreViewModel, { ContextHost } from "../Global/coreViewModel";
 import ChatViewModel, { ChatPageTypes } from "../Chat/chatViewModel";
+import * as React from "../../react";
 import { CommonKeys } from "../../View/keystrokes";
-import { IndexManager } from "../../Model/Utility/utility";
+import implementFilter, { IndexManager } from "../../Model/Utility/utility";
 import BoardsAndTasksModel, {
     BoardInfoFileContent,
 } from "../../Model/Files/boardsAndTasksModel";
@@ -26,8 +26,9 @@ export default class TaskPageViewModel extends ContextHost<string> {
     };
 
     // state
-    newBoardNameInput: React.State<string> = new React.State("");
+    boardQuery: React.State<string> = new React.State("");
     boardViewModels: React.MapState<BoardViewModel> = new React.MapState();
+    boardMatches: React.ListState<BoardViewModel> = new React.ListState();
     isShowingBoadList: React.State<boolean> = new React.State(true);
     selectedBoardId: React.State<string | undefined> = new React.State<any>(
         undefined,
@@ -47,8 +48,8 @@ export default class TaskPageViewModel extends ContextHost<string> {
 
     // guards
     cannotCreateBoard: React.State<boolean> = React.createProxyState(
-        [this.newBoardNameInput],
-        () => this.newBoardNameInput.value == "",
+        [this.boardQuery],
+        () => this.boardQuery.value == "",
     );
 
     // methods
@@ -56,8 +57,8 @@ export default class TaskPageViewModel extends ContextHost<string> {
         if (this.cannotCreateBoard.value == true) return;
 
         const boardInfoFileContent: BoardInfoFileContent =
-            this.boardsAndTasksModel.createBoard(this.newBoardNameInput.value);
-        this.newBoardNameInput.value = "";
+            this.boardsAndTasksModel.createBoard(this.boardQuery.value);
+        this.boardQuery.value = "";
 
         this.showBoardInList(boardInfoFileContent);
         this.boardsAndTasksModel.updateBoardAndSend(boardInfoFileContent);
@@ -177,6 +178,9 @@ export default class TaskPageViewModel extends ContextHost<string> {
 
         this.chatViewModel = chatViewModel;
 
+	// filter 
+	implementFilter(this.boardViewModels, this.boardMatches, this.boardQuery, (board) => board.name.value);
+
         // context
         this.chatViewModel.registerContext(ChatPageTypes.Tasks, this);
         this.selectedBoardId.subscribeSilent(this.updateContexts);

src/ViewModel/Pages/taskViewModel.ts

@@ -1,7 +1,7 @@
-import * as React from "../../react";
 import TaskContainingPageViewModel from "./taskContainingPageViewModel";
 import CoreViewModel, { Context } from "../Global/coreViewModel";
 import ChatViewModel from "../Chat/chatViewModel";
+import * as React from "../../react";
 import { ViewController } from "../../View/viewController";
 import { CommonKeys } from "../../View/keystrokes";
 import { localeCompare, padZero } from "../../Model/Utility/utility";
@@ -58,7 +58,9 @@ export default class TaskViewModel extends Context {
     selectedVersionId: React.State<string> = new React.State("");
     versionIds: React.ListState<string> = new React.ListState();
 
-    isPresentingFullScreenDescription: React.State<boolean> = new React.State(false);
+    isPresentingFullScreenDescription: React.State<boolean> = new React.State(
+        false,
+    );
 
     // methods
     dragStart = (event: DragEvent): void => {
@@ -99,12 +101,12 @@ export default class TaskViewModel extends Context {
     };
 
     openFullscreenDecription = (): void => {
-	this.isPresentingFullScreenDescription.value = true;
-    }
+        this.isPresentingFullScreenDescription.value = true;
+    };
 
     closeFullscreenDecription = (): void => {
-	this.isPresentingFullScreenDescription.value = false;
-    }
+        this.isPresentingFullScreenDescription.value = false;
+    };
 
     updateIndex = (): void => {
         const index: number =
@@ -118,7 +120,9 @@ export default class TaskViewModel extends Context {
                 this.category.value,
             ) == false
         ) {
-            this.containingViewModel.taskCategorySuggestions.add(this.category.value);
+            this.containingViewModel.taskCategorySuggestions.add(
+                this.category.value,
+            );
         }
 
         if (
@@ -126,7 +130,9 @@ export default class TaskViewModel extends Context {
                 this.status.value,
             ) == false
         ) {
-            this.containingViewModel.taskStatusSuggestions.add(this.status.value);
+            this.containingViewModel.taskStatusSuggestions.add(
+                this.status.value,
+            );
         }
     };
 

src/ViewModel/Utility/searchViewModel.ts

@@ -15,7 +15,10 @@ export default class SearchViewModel<T> {
         [this.searchInput],
         () => this.searchInput.value == "",
     );
-    hasNoSuggestions: React.State<boolean> = React.createProxyState([this.suggestions], ()=>this.suggestions.value.size == 0);
+    hasNoSuggestions: React.State<boolean> = React.createProxyState(
+        [this.suggestions],
+        () => this.suggestions.value.size == 0,
+    );
 
     // methods
     search = (searchTerm: string): void => {
@@ -36,12 +39,12 @@ export default class SearchViewModel<T> {
     };
 
     clear = (): void => {
-	this.searchInput.value = "";
-    }
+        this.searchInput.value = "";
+    };
 
     deleteSuggestion = (suggestion: string): void => {
-	this.suggestions.remove(suggestion);
-    }
+        this.suggestions.remove(suggestion);
+    };
 
     // init
     constructor(

src/ViewModel/Utility/taskPropertyBulkChangeViewModel.ts

@@ -1,5 +1,5 @@
-import * as React from "../../react";
 import TaskViewModel from "../Pages/taskViewModel";
+import * as React from "../../react";
 
 export default class TaskPropertyBulkChangeViewModel {
     taskViewModels: React.ListState<TaskViewModel>;

src/base.css

@@ -44,7 +44,9 @@ main {
 }
 
 body {
-    transition: --sky-1 1s, --sky-2 5s;
+    transition:
+        --sky-1 1s,
+        --sky-2 5s;
 }
 
 #background-wrapper #grass-1 {
@@ -52,7 +54,7 @@ body {
     --color-2: hsl(150, 60%, 25%);
 
     filter: var(--backdrop-grass-filter);
-    opacity: .7;
+    opacity: 0.7;
 
     background-image: linear-gradient(
         350deg,
@@ -65,9 +67,9 @@ body {
 #background-wrapper #grass-2 {
     --color-1: hsl(110, 60%, 40%);
     --color-2: hsl(110, 60%, 35%);
-    
+
     filter: var(--backdrop-grass-filter);
-    opacity: .7;
+    opacity: 0.7;
 
     background-image: linear-gradient(
         9deg,

src/react.ts

@@ -85,7 +85,7 @@ export class ListState<T> extends State<Set<T>> {
         items.forEach((item) => {
             this.value.delete(item);
 
-	    this.genericRemovalHandlers.forEach(handler => handler(item));
+            this.genericRemovalHandlers.forEach((handler) => handler(item));
             if (!this.removalHandlers.has(item)) return;
             this.removalHandlers.get(item)!.forEach((handler) => handler(item));
             this.removalHandlers.delete(item);
@@ -146,73 +146,73 @@ export class MapState<T> extends State<Map<string, T>> {
         this.value.delete(key);
         this.callSubscriptions();
 
-	this.genericRemovalHandlers.forEach(handler => handler(item));
-	if (!this.removalHandlers.has(item)) return;
-	this.removalHandlers.get(item)!.forEach((handler) => handler(item));
-	this.removalHandlers.delete(item);
+        this.genericRemovalHandlers.forEach((handler) => handler(item));
+        if (!this.removalHandlers.has(item)) return;
+        this.removalHandlers.get(item)!.forEach((handler) => handler(item));
+        this.removalHandlers.delete(item);
     }
 
     clear() {
-	[...this.value.keys()].forEach((key) => this.remove(key));
+        [...this.value.keys()].forEach((key) => this.remove(key));
     }
 
     // handlers
     handleAddition(handler: AdditionSubscription<T>): void {
-	this.additionHandlers.add(handler);
-	[...this.value.values()].forEach(handler);
+        this.additionHandlers.add(handler);
+        [...this.value.values()].forEach(handler);
     }
 
     handleRemoval(item: T, handler: RemovalSubscription<T>): void {
-	if (!this.removalHandlers.has(item))
-	this.removalHandlers.set(item, new Set());
-	this.removalHandlers.get(item)!.add(handler);
+        if (!this.removalHandlers.has(item))
+            this.removalHandlers.set(item, new Set());
+        this.removalHandlers.get(item)!.add(handler);
     }
 
     handleRemovals(handler: RemovalSubscription<T>): void {
-	this.genericRemovalHandlers.add(handler);
+        this.genericRemovalHandlers.add(handler);
     }
 
     // stringification
     toString(): string {
-	const array = [...this.value.entries()];
-	const json = JSON.stringify(array);
-	return json;
+        const array = [...this.value.entries()];
+        const json = JSON.stringify(array);
+        return json;
     }
 }
 
 // UTILITY
 export function createProxyState<T>(
     statesToSubscibe: State<any>[],
-    fn: () => T
+    fn: () => T,
 ): State<T> {
     const proxyState = new State<T>(fn());
     statesToSubscibe.forEach((state) =>
-	state.subscribeSilent(() => (proxyState.value = fn()))
+        state.subscribeSilent(() => (proxyState.value = fn())),
     );
     return proxyState;
 }
 
 export function bulkSubscribe(
     statesToSubscibe: State<any>[],
-    fn: () => void
+    fn: () => void,
 ): void {
     statesToSubscibe.forEach((state) => state.subscribeSilent(fn));
 }
 
 function persistState(localStorageKey: string, state: State<any>) {
     state.subscribe(() => {
-	const stringifiedValue = state.toString();
-	localStorage.setItem(localStorageKey, stringifiedValue);
+        const stringifiedValue = state.toString();
+        localStorage.setItem(localStorageKey, stringifiedValue);
     });
 }
 
 export function restoreState<T>(
     localStorageKey: string,
-    initialStateValue: T
+    initialStateValue: T,
 ): State<T> {
     const storedString =
-    localStorage.getItem(localStorageKey) ??
-    JSON.stringify(initialStateValue);
+        localStorage.getItem(localStorageKey) ??
+        JSON.stringify(initialStateValue);
     const convertedValue = JSON.parse(storedString);
 
     const state = new State(convertedValue);
@@ -223,14 +223,14 @@ export function restoreState<T>(
 
 export function restoreListState<T>(
     localStorageKey: string,
-    initialItems: any[] = []
+    initialItems: any[] = [],
 ): ListState<T> {
     const storedString = localStorage.getItem(localStorageKey) ?? "";
 
     try {
-	const array = JSON.parse(storedString);
-	if (!Array.isArray(array)) throw "";
-	initialItems = array;
+        const array = JSON.parse(storedString);
+        if (!Array.isArray(array)) throw "";
+        initialItems = array;
     } catch {}
 
     const state = new ListState<T>(initialItems);
@@ -241,14 +241,14 @@ export function restoreListState<T>(
 
 export function restoreMapState<T>(
     localStorageKey: string,
-    initialItems: [string, any][] = []
+    initialItems: [string, any][] = [],
 ): MapState<T> {
     const storedString = localStorage.getItem(localStorageKey) ?? "";
 
     try {
-	const array = JSON.parse(storedString);
-	if (!Array.isArray(array)) throw "";
-	initialItems = array;
+        const array = JSON.parse(storedString);
+        if (!Array.isArray(array)) throw "";
+        initialItems = array;
     } catch {}
 
     const state = new MapState<T>(initialItems);
@@ -271,115 +271,115 @@ export function createElement(
     const element = document.createElement(tagName);
 
     if (attributes != null)
-	Object.entries(attributes).forEach((entry) => {
-	    const [attributename, value] = entry;
-	    const [directiveKey, directiveValue] = attributename.split(":");
+        Object.entries(attributes).forEach((entry) => {
+            const [attributename, value] = entry;
+            const [directiveKey, directiveValue] = attributename.split(":");
 
-	    switch (directiveKey) {
-		case "on": {
-		    switch (directiveValue) {
-			case "enter": {
-			element.addEventListener("keydown", (e: Event) => {
-			if (!(e instanceof KeyboardEvent)) return;
-			if (e.key != "Enter") return;
-			value(e);
-   });
-   break;
-			}
-			default: {
-   element.addEventListener(directiveValue, value);
-			}
-		    }
-		    break;
-		}
-		case "keystroke": {
-  element.addEventListener("keydown", (e: Event) => {
-    if (!(e instanceof KeyboardEvent)) return;
-		if (e.metaKey == false && e.ctrlKey == false) return;
-		if (e.key != directiveValue) return;
-		value(e);
-  })
-  break;
-		}
-		case "subscribe": {
-  const state = value as State<any>;
-  state.subscribe(
-		(newValue) => (element[directiveValue] = newValue)
-  );
+            switch (directiveKey) {
+                case "on": {
+                    switch (directiveValue) {
+                        case "enter": {
+                            element.addEventListener("keydown", (e: Event) => {
+                                if (!(e instanceof KeyboardEvent)) return;
+                                if (e.key != "Enter") return;
+                                value(e);
+                            });
+                            break;
+                        }
+                        default: {
+                            element.addEventListener(directiveValue, value);
+                        }
+                    }
+                    break;
+                }
+                case "keystroke": {
+                    element.addEventListener("keydown", (e: Event) => {
+                        if (!(e instanceof KeyboardEvent)) return;
+                        if (e.metaKey == false && e.ctrlKey == false) return;
+                        if (e.key != directiveValue) return;
+                        value(e);
+                    });
+                    break;
+                }
+                case "subscribe": {
+                    const state = value as State<any>;
+                    state.subscribe(
+                        (newValue) => (element[directiveValue] = newValue),
+                    );
 
-  break;
-		}
-		case "bind": {
-  const state = value as State<any>;
-  state.subscribe(
-		(newValue) => (element[directiveValue] = newValue)
-  );
-  element.addEventListener(
-		"input",
-		() => (state.value = (element as any)[directiveValue])
-  );
-  break;
-		}
-		case "toggle": {
-  if (value.subscribe) {
-		const state = value as State<any>;
-		state.subscribe((newValue) =>
-  element.toggleAttribute(directiveValue, newValue)
-		);
-  } else {
-		element.toggleAttribute(directiveValue, value);
-  }
-  break;
-		}
-		case "set": {
-  const state = value as State<any>;
-  state.subscribe((newValue) =>
-		element.setAttribute(directiveValue, newValue)
-  );
-  break;
-		}
-		case "children": {
-  switch (directiveValue) {
-		case "set": {
-  const state = value as State<Node | Node[]>;
-  state.subscribe((newValue) => {
-		element.innerHTML = "";
-		element.append(...[newValue].flat());
-  });
-  break;
-		}
-		case "append":
-		case "prepend": {
-  try {
-		const [listState, toElement] = value as [
-  listState: ListState<any>,
-  StateItemConverter<any>
-		];
+                    break;
+                }
+                case "bind": {
+                    const state = value as State<any>;
+                    state.subscribe(
+                        (newValue) => (element[directiveValue] = newValue),
+                    );
+                    element.addEventListener(
+                        "input",
+                        () => (state.value = (element as any)[directiveValue]),
+                    );
+                    break;
+                }
+                case "toggle": {
+                    if (value.subscribe) {
+                        const state = value as State<any>;
+                        state.subscribe((newValue) =>
+                            element.toggleAttribute(directiveValue, newValue),
+                        );
+                    } else {
+                        element.toggleAttribute(directiveValue, value);
+                    }
+                    break;
+                }
+                case "set": {
+                    const state = value as State<any>;
+                    state.subscribe((newValue) =>
+                        element.setAttribute(directiveValue, newValue),
+                    );
+                    break;
+                }
+                case "children": {
+                    switch (directiveValue) {
+                        case "set": {
+                            const state = value as State<Node | Node[]>;
+                            state.subscribe((newValue) => {
+                                element.innerHTML = "";
+                                element.append(...[newValue].flat());
+                            });
+                            break;
+                        }
+                        case "append":
+                        case "prepend": {
+                            try {
+                                const [listState, toElement] = value as [
+                                    listState: ListState<any>,
+                                    StateItemConverter<any>,
+                                ];
 
-		listState.handleAddition((newItem) => {
-  const child = toElement(newItem);
-  listState.handleRemoval(newItem, () =>
-		child.remove()
-  );
+                                listState.handleAddition((newItem) => {
+                                    const child = toElement(newItem);
+                                    listState.handleRemoval(newItem, () =>
+                                        child.remove(),
+                                    );
 
-  if (directiveValue == "append") {
-		element.append(child);
-  } else if (directiveValue == "prepend") {
-		element.prepend(child);
-  }
-		});
-  } catch (error) {
-		console.error(error);
-		throw `error: cannot process subscribe:children directive. \n Usage: "children:append={[list, converter]}"; you can find a more detailed example in the documentation.`;
-  }
-		}
-  }
-  break;
-		}
-		default:
-  element.setAttribute(attributename, value);
-	    }
-	});
+                                    if (directiveValue == "append") {
+                                        element.append(child);
+                                    } else if (directiveValue == "prepend") {
+                                        element.prepend(child);
+                                    }
+                                });
+                            } catch (error) {
+                                console.error(error);
+                                throw `error: cannot process subscribe:children directive. \n Usage: "children:append={[list, converter]}"; you can find a more detailed example in the documentation.`;
+                            }
+                        }
+                    }
+                    break;
+                }
+                default:
+                    element.setAttribute(attributename, value);
+            }
+        });
 
     children.filter((x) => x).forEach((child) => element.append(child));
 

src/types/styles.d.ts

@@ -1,2 +1 @@
-declare module "*.css" {
-}
+declare module "*.css" {}