update name setting when own contact changes

2.vim

@@ -12,10 +12,8 @@ inoremap <silent> <expr> <Down> coc#pum#visible() ? coc#pum#next(0) : coc#inline
 inoremap <silent> <expr> <C-P> coc#pum#visible() ? coc#pum#prev(1) : coc#inline#visible() ? coc#inline#prev() : "\"
 inoremap <silent> <expr> <C-N> coc#pum#visible() ? coc#pum#next(1) : coc#inline#visible() ? coc#inline#next() : "\"
 nnoremap  :NERDTreeFind
-snoremap <silent>  c
 nnoremap  :NERDTree
 nmap  <Plug>(ctrlp)
-snoremap  "_c
 nnoremap  :NERDTreeToggle
 xmap \T <Plug>(table-mode-tableize-delimiter)
 xmap \tt <Plug>(table-mode-tableize)
@@ -28,10 +26,6 @@ nnoremap \1 :call SN("1")
 nmap \rn <Plug>(coc-rename)
 xmap gx <Plug>NetrwBrowseXVis
 nmap gx <Plug>NetrwBrowseX
-snoremap <C-R> "_c
-snoremap <silent> <C-H> c
-snoremap <silent> <Del> c
-snoremap <silent> <BS> c
 nnoremap <silent> <Plug>GitGutterPreviewHunk :call gitgutter#utility#warn('Please change your map <Plug>GitGutterPreviewHunk to <Plug>(GitGutterPreviewHunk)')
 nnoremap <silent> <Plug>(GitGutterPreviewHunk) :GitGutterPreviewHunk
 nnoremap <silent> <Plug>GitGutterUndoHunk :call gitgutter#utility#warn('Please change your map <Plug>GitGutterUndoHunk to <Plug>(GitGutterUndoHunk)')
@@ -153,10 +147,11 @@ else
 endif
 badd +1 build/sw.js
 badd +1 build/version.txt
-badd +87 src/Model/Global/fileTransferModel.ts
+badd +41 src/ViewModel/Global/contactViewModel.ts
-badd +1 node_modules/uuid/dist/parse.js
+badd +50 src/index.tsx
-badd +246 src/Model/Utility/utility.ts
+badd +24 src/ViewModel/Global/settingsViewModel.ts
-badd +0 src/Model/Global/storageModel.ts
+badd +38 src/Model/Global/settingsModel.ts
+badd +0 src/Model/Global/contactListModel.ts
 argglobal
 %argdel
 set stal=2
@@ -182,9 +177,9 @@ set winminheight=0
 set winheight=1
 set winminwidth=0
 set winwidth=1
-exe 'vert 1resize ' . ((&columns * 31 + 137) / 274)
+exe 'vert 1resize ' . ((&columns * 31 + 135) / 270)
-exe 'vert 2resize ' . ((&columns * 120 + 137) / 274)
+exe 'vert 2resize ' . ((&columns * 118 + 135) / 270)
-exe 'vert 3resize ' . ((&columns * 121 + 137) / 274)
+exe 'vert 3resize ' . ((&columns * 123 + 135) / 270)
 argglobal
 enew
 file NERD_tree_tab_2
@@ -515,12 +510,12 @@ setlocal wrap
 setlocal wrapmargin=0
 silent! normal! zE
 let &fdl = &fdl
-let s:l = 23 - ((22 * winheight(0) + 15) / 31)
+let s:l = 10 - ((9 * winheight(0) + 13) / 27)
 if s:l < 1 | let s:l = 1 | endif
 keepjumps exe s:l
 normal! zt
-keepjumps 23
+keepjumps 10
-normal! 028|
+normal! $
 wincmd w
 argglobal
 if bufexists(fnamemodify("build/version.txt", ":p")) | buffer build/version.txt | else | edit build/version.txt | endif
@@ -672,24 +667,27 @@ setlocal wrap
 setlocal wrapmargin=0
 silent! normal! zE
 let &fdl = &fdl
-let s:l = 1 - ((0 * winheight(0) + 15) / 31)
+let s:l = 1 - ((0 * winheight(0) + 13) / 27)
 if s:l < 1 | let s:l = 1 | endif
 keepjumps exe s:l
 normal! zt
 keepjumps 1
-normal! 015|
+normal! 014|
 wincmd w
-exe 'vert 1resize ' . ((&columns * 31 + 137) / 274)
+exe 'vert 1resize ' . ((&columns * 31 + 135) / 270)
-exe 'vert 2resize ' . ((&columns * 120 + 137) / 274)
+exe 'vert 2resize ' . ((&columns * 118 + 135) / 270)
-exe 'vert 3resize ' . ((&columns * 121 + 137) / 274)
+exe 'vert 3resize ' . ((&columns * 123 + 135) / 270)
 tabnext
-edit src/Model/Global/fileTransferModel.ts
+edit src/index.tsx
 let s:save_splitbelow = &splitbelow
 let s:save_splitright = &splitright
 set splitbelow splitright
 wincmd _ | wincmd |
 vsplit
-1wincmd h
+wincmd _ | wincmd |
+vsplit
+2wincmd h
+wincmd w
 wincmd w
 let &splitbelow = s:save_splitbelow
 let &splitright = s:save_splitright
@@ -700,10 +698,168 @@ set winminheight=0
 set winheight=1
 set winminwidth=0
 set winwidth=1
-exe 'vert 1resize ' . ((&columns * 136 + 137) / 274)
+exe 'vert 1resize ' . ((&columns * 89 + 135) / 270)
-exe 'vert 2resize ' . ((&columns * 137 + 137) / 274)
+exe 'vert 2resize ' . ((&columns * 89 + 135) / 270)
+exe 'vert 3resize ' . ((&columns * 90 + 135) / 270)
 argglobal
-balt build/sw.js
+balt src/ViewModel/Global/settingsViewModel.ts
+let s:cpo_save=&cpo
+set cpo&vim
+nmap <buffer> [c <Plug>(GitGutterPrevHunk)
+nmap <buffer> \hp <Plug>(GitGutterPreviewHunk)
+nmap <buffer> \hu <Plug>(GitGutterUndoHunk)
+nmap <buffer> \hs <Plug>(GitGutterStageHunk)
+xmap <buffer> \hs <Plug>(GitGutterStageHunk)
+nmap <buffer> ]c <Plug>(GitGutterNextHunk)
+xmap <buffer> ac <Plug>(GitGutterTextObjectOuterVisual)
+omap <buffer> ac <Plug>(GitGutterTextObjectOuterPending)
+xmap <buffer> ic <Plug>(GitGutterTextObjectInnerVisual)
+omap <buffer> ic <Plug>(GitGutterTextObjectInnerPending)
+let &cpo=s:cpo_save
+unlet s:cpo_save
+setlocal keymap=
+setlocal noarabic
+setlocal autoindent
+setlocal backupcopy=
+setlocal balloonexpr=
+setlocal nobinary
+setlocal nobreakindent
+setlocal breakindentopt=
+setlocal bufhidden=
+setlocal buflisted
+setlocal buftype=
+setlocal nocindent
+setlocal cinkeys=0{,0},0),0],:,0#,!^F,o,O,e
+setlocal cinoptions=
+setlocal cinscopedecls=public,protected,private
+setlocal cinwords=if,else,while,do,for,switch
+setlocal colorcolumn=
+setlocal comments=s1:/*,mb:*,ex:*/,://,b:#,:%,:XCOMM,n:>,fb:-
+setlocal commentstring=//\ %s
+setlocal complete=.,w,b,u,t,i
+setlocal concealcursor=
+setlocal conceallevel=0
+setlocal completefunc=
+setlocal nocopyindent
+setlocal cryptmethod=
+setlocal nocursorbind
+setlocal nocursorcolumn
+setlocal nocursorline
+setlocal cursorlineopt=both
+setlocal define=
+setlocal dictionary=
+setlocal nodiff
+setlocal equalprg=
+setlocal errorformat=%+A\ %#%f\ %#(%l\\,%c):\ %m,%C%m
+setlocal noexpandtab
+if &filetype != 'typescriptreact'
+setlocal filetype=typescriptreact
+endif
+setlocal fillchars=
+setlocal fixendofline
+setlocal foldcolumn=0
+setlocal foldenable
+setlocal foldexpr=0
+setlocal foldignore=#
+setlocal foldlevel=0
+setlocal foldmarker={{{,}}}
+setlocal foldmethod=manual
+setlocal foldminlines=1
+setlocal foldnestmax=20
+setlocal foldtext=foldtext()
+setlocal formatexpr=
+setlocal formatoptions=croql
+setlocal formatlistpat=^\\s*\\d\\+[\\]:.)}\\t\ ]\\s*
+setlocal formatprg=
+setlocal grepprg=
+setlocal iminsert=0
+setlocal imsearch=-1
+setlocal include=
+setlocal includeexpr=
+setlocal indentexpr=GetTsxIndent()
+setlocal indentkeys=0{,0},0),0],0,,!^F,o,O,e,*<Return>,<>>,<<>,/
+setlocal noinfercase
+setlocal iskeyword=@,48-57,_,192-255,$
+setlocal keywordprg=
+setlocal nolinebreak
+setlocal nolisp
+setlocal lispoptions=
+setlocal lispwords=
+setlocal nolist
+setlocal listchars=
+setlocal makeencoding=
+setlocal makeprg=tsc\ \ $*\ %
+setlocal matchpairs=(:),{:},[:]
+setlocal nomodeline
+setlocal modifiable
+setlocal nrformats=bin,octal,hex
+set number
+setlocal number
+setlocal numberwidth=4
+setlocal omnifunc=
+setlocal path=
+setlocal nopreserveindent
+setlocal nopreviewwindow
+setlocal quoteescape=\\
+setlocal noreadonly
+setlocal norelativenumber
+setlocal norightleft
+setlocal rightleftcmd=search
+setlocal noscrollbind
+setlocal scrolloff=-1
+setlocal shiftwidth=4
+setlocal noshortname
+setlocal showbreak=
+setlocal sidescrolloff=-1
+set signcolumn=yes
+setlocal signcolumn=yes
+setlocal nosmartindent
+setlocal nosmoothscroll
+setlocal softtabstop=0
+setlocal nospell
+setlocal spellcapcheck=[.?!]\\_[\\])'\"\	\ ]\\+
+setlocal spellfile=
+setlocal spelllang=en
+setlocal spelloptions=
+setlocal statusline=
+setlocal suffixesadd=.ts,.tsx
+setlocal swapfile
+setlocal synmaxcol=3000
+if &syntax != 'typescriptreact'
+setlocal syntax=typescriptreact
+endif
+setlocal tabstop=8
+setlocal tagcase=
+setlocal tagfunc=
+setlocal tags=
+setlocal termwinkey=
+setlocal termwinscroll=10000
+setlocal termwinsize=
+setlocal textwidth=0
+setlocal thesaurus=
+setlocal thesaurusfunc=
+setlocal noundofile
+setlocal undolevels=-123456
+setlocal varsofttabstop=
+setlocal vartabstop=
+setlocal virtualedit=
+setlocal wincolor=
+setlocal nowinfixheight
+setlocal nowinfixwidth
+setlocal wrap
+setlocal wrapmargin=0
+silent! normal! zE
+let &fdl = &fdl
+let s:l = 44 - ((17 * winheight(0) + 13) / 27)
+if s:l < 1 | let s:l = 1 | endif
+keepjumps exe s:l
+normal! zt
+keepjumps 44
+normal! $
+wincmd w
+argglobal
+if bufexists(fnamemodify("src/Model/Global/contactListModel.ts", ":p")) | buffer src/Model/Global/contactListModel.ts | else | edit src/Model/Global/contactListModel.ts | endif
+balt src/Model/Global/settingsModel.ts
 let s:cpo_save=&cpo
 set cpo&vim
 nmap <buffer> [c <Plug>(GitGutterPrevHunk)
@@ -851,16 +1007,16 @@ setlocal wrap
 setlocal wrapmargin=0
 silent! normal! zE
 let &fdl = &fdl
-let s:l = 115 - ((15 * winheight(0) + 15) / 31)
+let s:l = 22 - ((12 * winheight(0) + 13) / 27)
 if s:l < 1 | let s:l = 1 | endif
 keepjumps exe s:l
 normal! zt
-keepjumps 115
+keepjumps 22
-normal! 0
+normal! 011|
 wincmd w
 argglobal
-if bufexists(fnamemodify("src/Model/Global/storageModel.ts", ":p")) | buffer src/Model/Global/storageModel.ts | else | edit src/Model/Global/storageModel.ts | endif
+if bufexists(fnamemodify("src/Model/Global/settingsModel.ts", ":p")) | buffer src/Model/Global/settingsModel.ts | else | edit src/Model/Global/settingsModel.ts | endif
-balt src/Model/Utility/utility.ts
+balt src/ViewModel/Global/contactViewModel.ts
 let s:cpo_save=&cpo
 set cpo&vim
 nmap <buffer> [c <Plug>(GitGutterPrevHunk)
@@ -1008,16 +1164,17 @@ setlocal wrap
 setlocal wrapmargin=0
 silent! normal! zE
 let &fdl = &fdl
-let s:l = 220 - ((16 * winheight(0) + 15) / 31)
+let s:l = 90 - ((14 * winheight(0) + 13) / 27)
 if s:l < 1 | let s:l = 1 | endif
 keepjumps exe s:l
 normal! zt
-keepjumps 220
+keepjumps 90
-normal! 027|
+normal! 026|
 wincmd w
-2wincmd w
+3wincmd w
-exe 'vert 1resize ' . ((&columns * 136 + 137) / 274)
+exe 'vert 1resize ' . ((&columns * 89 + 135) / 270)
-exe 'vert 2resize ' . ((&columns * 137 + 137) / 274)
+exe 'vert 2resize ' . ((&columns * 89 + 135) / 270)
+exe 'vert 3resize ' . ((&columns * 90 + 135) / 270)
 tabnext 2
 set stal=1
 if exists('s:wipebuf') && len(win_findbuf(s:wipebuf)) == 0

src/Model/Global/contactListModel.ts

@@ -1,4 +1,5 @@
 import {HandlerManager} from "../Utility/utility";
+import SettingsModel from "./settingsModel";
 import StorageModel, {StorageModelSubPaths} from "./storageModel";
 
 export default class ContactListModel {
@@ -11,14 +12,17 @@ export default class ContactListModel {
     loadContacts = (): [string, string][] => {
 	const contactIds: string[] = this.storageModel.list([StorageModelSubPaths.ContactsModel]);
 	const contacts: [string, string][] = contactIds.map(id => [id, this.storageModel.read(this.getContactPath(id)) ?? "?"]);
+	contacts.push([this.settingsModel.userid, this.settingsModel.username]);
 	return contacts;
     }
 
     storeContact = (id: string, name: string) => {
+	this.contactHandlerManager.trigger([id, name]);
+
+	if (id == this.settingsModel.userid) return;
 	const path = this.getContactPath(id);
 	this.storageModel.write(path, name)
-	this.contactHandlerManager.trigger([id, name]);
     }
 
-    constructor(public storageModel: StorageModel) {}
+    constructor(public storageModel: StorageModel, public settingsModel: SettingsModel) {}
 }

src/Model/Global/settingsModel.ts

@@ -1,6 +1,5 @@
 import StorageModel, { StorageModelSubPaths, filePaths } from "./storageModel";
 import { UUID } from "../../react";
-import ContactListModel from "./contactListModel";
 
 export default class SettingsModel {
     // data
@@ -30,7 +29,6 @@ export default class SettingsModel {
     readonly setName = (newValue: string): void => {
         this.username = newValue;
 	this.storeSetting("username", newValue);
-	this.contactListModel.storeContact(this.userid,newValue);
     };
 
     readonly setFirstDayOfWeek = (newValue: string): void => {
@@ -87,7 +85,7 @@ export default class SettingsModel {
     };
 
     // init
-    constructor(public storageModel: StorageModel, public contactListModel: ContactListModel) {
+    constructor(public storageModel: StorageModel) {
 	this.loadId();
 	this.loadUsername();
 	this.loadFirstDayofWeek();

src/ViewModel/Global/contactViewModel.ts

@@ -1,5 +1,6 @@
 import ContactListModel from "../../Model/Global/contactListModel";
 import * as React from "../../react";
+import SettingsViewModel from "./settingsViewModel";
 
 export default class ContactListViewModel {
     // state
@@ -7,6 +8,10 @@ export default class ContactListViewModel {
 
     // main
     updateContact = (id: string, name: string): ContactViewModel => {
+	if (id == this.settingsViewModel.settingsModel.userid) {
+	    this.settingsViewModel.setName(name);
+	}
+
 	const match = this.contacts.get(id);
 	if (match) {
 	    match.name.value = name;
@@ -37,7 +42,7 @@ export default class ContactListViewModel {
     }
     
     // init
-    constructor(public contactListModel: ContactListModel) {
+    constructor(public contactListModel: ContactListModel, public settingsViewModel: SettingsViewModel) {
 	this.loadData();
 	this.contactListModel.contactHandlerManager.setHandler("contact-list-view-model", this.handleContact);
     }

src/ViewModel/Global/settingsViewModel.ts

@@ -30,152 +30,155 @@ export default class SettingsViewModel extends Context {
     );
 
     // methods
-    setName = (): void => {
+    setName = (name?: string): void => {
-        this.coreViewModel.settingsModel.setName(this.usernameInput.value);
+	if (typeof name == "string") {
-        this.username.value = this.coreViewModel.settingsModel.username;
+	    this.usernameInput.value = name;
-        this.usernameInput.callSubscriptions();
+	}
+	this.coreViewModel.settingsModel.setName(this.usernameInput.value);
+	this.username.value = this.coreViewModel.settingsModel.username;
+	this.usernameInput.callSubscriptions();
     };
 
     setFirstDayofWeek = (): void => {
-        this.coreViewModel.settingsModel.setFirstDayOfWeek(
+	this.coreViewModel.settingsModel.setFirstDayOfWeek(
-            this.firstDayOfWeek.value,
+	    this.firstDayOfWeek.value,
-        );
+	);
     };
 
     showSettingsModal = (): void => {
-        this.coreViewModel.context = this;
+	this.coreViewModel.context = this;
-        this.isShowingSettingsModal.value = true;
+	this.isShowingSettingsModal.value = true;
     };
 
     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.System)
+	if (theme == ThemeSettings.System)
-            theme = SettingsViewModel.getSystemTheme();
+	    theme = SettingsViewModel.getSystemTheme();
 
-        switch (theme) {
+	switch (theme) {
-            case ThemeSettings.Dynamic:
+	    case ThemeSettings.Dynamic:
-                const scene = this.selectDynamicScene();
+		const scene = this.selectDynamicScene();
-                this.setScene(scene);
+		this.setScene(scene);
-                break;
+		break;
-            case ThemeSettings.Dark:
+	    case ThemeSettings.Dark:
-                this.setScene(DynamicSceneNight);
+		this.setScene(DynamicSceneNight);
-                break;
+		break;
-            case ThemeSettings.Black:
+	    case ThemeSettings.Black:
-                this.setScene(DynamicSceneBlack);
+		this.setScene(DynamicSceneBlack);
-                break;
+		break;
-            default:
+	    default:
-                this.setScene(DynamicSceneDay);
+		this.setScene(DynamicSceneDay);
-        }
+	}
     };
 
     selectDynamicScene = (): DynamicScene => {
-        let hour = new Date().getHours();
+	let hour = new Date().getHours();
 
-        if (hour >= 21 || hour <= 6) {
+	if (hour >= 21 || hour <= 6) {
-            return DynamicSceneNight;
+	    return DynamicSceneNight;
-        } else if (hour > 6 && hour < 10) {
+	} else if (hour > 6 && hour < 10) {
-            return DynamicSceneSunrise;
+	    return DynamicSceneSunrise;
-        } else if (hour < 14) {
+	} else if (hour < 14) {
-            return DynamicSceneDay;
+	    return DynamicSceneDay;
-        } else if (hour < 17) {
+	} else if (hour < 17) {
-            return DynamicSceneAfternoon;
+	    return DynamicSceneAfternoon;
-        } else {
+	} else {
-            return DynamicSceneSunset;
+	    return DynamicSceneSunset;
-        }
+	}
     };
 
     setScene = (scene: DynamicScene): void => {
-        document.body.style.setProperty(
+	document.body.style.setProperty(
-            "--backdrop-grass-filter",
+	    "--backdrop-grass-filter",
-            `brightness(${scene.brightness})`,
+	    `brightness(${scene.brightness})`,
-        );
+	);
 
-        function setSkyColor(
+	function setSkyColor(
-            tone: 1 | 2,
+	    tone: 1 | 2,
-            hue: number,
+	    hue: number,
-            saturation: number,
+	    saturation: number,
-            luma: number,
+	    luma: number,
-        ) {
+	) {
-            document.body.style.setProperty(
+	    document.body.style.setProperty(
-                `--sky-${tone}`,
+		`--sky-${tone}`,
-                `hsl(${hue}, ${saturation}%, ${luma}%)`,
+		`hsl(${hue}, ${saturation}%, ${luma}%)`,
-            );
+	    );
-        }
+	}
-        setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
+	setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
-        setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma - 10);
+	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;
+	this.isShowingSettingsModal.value = false;
-        if (this.requiresReload.value == true) {
+	if (this.requiresReload.value == true) {
-            window.location.reload();
+	    window.location.reload();
-        }
+	}
     };
 
     // init
     constructor(public readonly coreViewModel: CoreViewModel, public readonly settingsModel: SettingsModel) {
-        super("settings");
+	super("settings");
 
-        this.username.value = coreViewModel.settingsModel.username;
+	this.username.value = coreViewModel.settingsModel.username;
-        this.usernameInput.value = coreViewModel.settingsModel.username;
+	this.usernameInput.value = coreViewModel.settingsModel.username;
-        this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
+	this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
-        this.language.value = coreViewModel.settingsModel.language;
+	this.language.value = coreViewModel.settingsModel.language;
-        this.theme.value = coreViewModel.settingsModel.theme;
+	this.theme.value = coreViewModel.settingsModel.theme;
 
-        // subscriptions
+	// subscriptions
-        this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
+	this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
-        this.language.subscribeSilent((newValue) => {
+	this.language.subscribeSilent((newValue) => {
-            this.coreViewModel.settingsModel.setLanguage(newValue);
+	    this.coreViewModel.settingsModel.setLanguage(newValue);
-            this.requiresReload.value = true;
+	    this.requiresReload.value = true;
-        });
+	});
-        this.theme.subscribeSilent((newValue) => {
+	this.theme.subscribeSilent((newValue) => {
-            this.coreViewModel.settingsModel.setTheme(newValue);
+	    this.coreViewModel.settingsModel.setTheme(newValue);
-        });
+	});
 
-        // set theme
+	// set theme
-        this.theme.subscribe(() => {
+	this.theme.subscribe(() => {
-            this.applyTheme();
+	    this.applyTheme();
-        });
+	});
-        SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
+	SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
-            this.applyTheme(),
+	    this.applyTheme(),
-        );
+	);
-        const seconds = new Date().getSeconds();
+	const seconds = new Date().getSeconds();
-        const secondsUntilNewMinute = 60 - seconds;
+	const secondsUntilNewMinute = 60 - seconds;
-        setTimeout(() => {
+	setTimeout(() => {
-            setInterval(this.applyTheme, 1000 * 60);
+	    setInterval(this.applyTheme, 1000 * 60);
-        }, secondsUntilNewMinute);
+	}, secondsUntilNewMinute);
 
-        // keystrokes
+	// keystrokes
-        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
+	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();
+	const media = SettingsViewModel.generateThemeMedia();
-        return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
+	return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
     }
 }
 
 export enum SettingsModalPages {
     Appearance,
-    Regional,
+	Regional,
-    Info,
+	Info,
 }
 
 export interface DynamicScene {

src/index.tsx

@@ -25,8 +25,8 @@ import ContactListViewModel from "./ViewModel/Global/contactViewModel";
 
 // models
 const storageModel = new StorageModel();
-const contactListModel = new ContactListModel(storageModel);
+const settingsModel = new SettingsModel(storageModel);
-const settingsModel = new SettingsModel(storageModel, contactListModel);
+const contactListModel = new ContactListModel(storageModel, settingsModel);
 const connectionModel = new ConnectionModel(storageModel);
 const chatListModel = new ChatListModel(
     storageModel,
@@ -46,8 +46,8 @@ const coreViewModel = new CoreViewModel(
 );
 
 const storageViewModel = new StorageViewModel(coreViewModel);
-const contactListViewModel = new ContactListViewModel(contactListModel);
 const settingsViewModel = new SettingsViewModel(coreViewModel, settingsModel);
+const contactListViewModel = new ContactListViewModel(contactListModel, settingsViewModel);
 const connectionViewModel = new ConnectionViewModel(coreViewModel);
 const chatListViewModel = new ChatListViewModel(
     coreViewModel,