Best practices: - [Knockout to React Migration](https://github.com/wireapp/wire-webapp/wiki/Knockout-to-React-Migration) - Ideas for migration a viewmodel (https://github.com/wireapp/wire-webapp/pull/14078) Refactoring goals: 1. `/script/components` 1. `/script/view_model` 1. `/page/template` - [x] `/page/template/content` - [x] #11351 - [x] [`collection.htm`](../blob/dev/src/page/template/content/collection.htm) - [x] [`connect-requests.htm`](../blob/dev/src/page/template/content/connect-requests.htm) - [x] [`conversation.htm`](../blob/dev/src/page/template/content/conversation.htm) - [x] `/page/template/content/conversation` - [x] [`input-bar.htm`](../blob/dev/src/page/template/content/conversation/input-bar.htm) - [x] [`message-list.htm`](../blob/dev/src/page/template/content/conversation/message-list.htm) - [x] [`title-bar.htm`](../blob/dev/src/page/template/content/conversation/title-bar.htm) - [x] `/page/template/content` - [x] [`history-export.htm`](../blob/dev/src/page/template/content/history-export.htm) - [x] [`history-import.htm`](../blob/dev/src/page/template/content/history-import.htm) - [x] [`preferences-about.htm`](../blob/dev/src/page/template/content/preferences-about.htm) - [x] [`preferences-account.htm`](../blob/dev/src/page/template/content/preferences-account.htm) - [x] [`preferences-av.htm`](../blob/dev/src/page/template/content/preferences-av.htm) - [x] [`preferences-device-details.htm`](../blob/dev/src/page/template/content/preferences-device-details.htm) - [x] [`preferences-devices.htm`](../blob/dev/src/page/template/content/preferences-devices.htm) - [x] [`preferences-options.htm`](../blob/dev/src/page/template/content/preferences-options.htm) - [x] `/page/template` - [x] [`detail-view.htm`](../blob/dev/src/page/template/detail-view.htm) - [x] `/page/template/list` - [x] [`archive.htm`](../blob/dev/src/page/template/list/archive.htm) - [x] [`background.htm`](../blob/dev/src/page/template/list/background.htm) - [x] [`conversations.htm`](../blob/dev/src/page/template/list/conversations.htm) - [x] [`preferences.htm`](../blob/dev/src/page/template/list/preferences.htm) - [x] [`start-ui.htm`](../blob/dev/src/page/template/list/start-ui.htm) - [x] [`takeover.htm`](../blob/dev/src/page/template/list/takeover.htm) (retired here https://github.com/wireapp/wire-webapp/pull/12710) - [x] [`temporary-guest.htm`](../blob/dev/src/page/template/list/temporary-guest.htm) - [x] `/page/template/modal` - [x] [`applock.htm`](../blob/dev/src/page/template/modal/applock.htm) - [x] [`giphy.htm`](../blob/dev/src/page/template/modal/giphy.htm) - [x] [`group-creation.htm`](../blob/dev/src/page/template/modal/group-creation.htm) - [x] [`invite-modal.htm`](../blob/dev/src/page/template/modal/invite-modal.htm) - [x] [`legal-hold.htm`](../blob/dev/src/page/template/modal/legal-hold.htm) - [x] [`service-modal.htm`](../blob/dev/src/page/template/modal/service-modal.htm) - [x] [`user-modal.htm`](../blob/dev/src/page/template/modal/user-modal.htm) - [x] `/page/template` - [x] [`modals.htm`](../blob/dev/src/page/template/modals.htm) - [x] `/page/template/panel` - [x] [`add-participants.htm`](../blob/dev/src/page/template/panel/add-participants.htm) - [x] [`conversation-details.htm`](../blob/dev/src/page/template/panel/conversation-details.htm) - [x] [`conversation-participants.htm`](../blob/dev/src/page/template/panel/conversation-participants.htm) - [x] [`group-participant-service.htm`](../blob/dev/src/page/template/panel/group-participant-service.htm) - [x] [`group-participant-user.htm`](../blob/dev/src/page/template/panel/group-participant-user.htm) - [x] [`guest-options.htm`](../blob/dev/src/page/template/panel/guest-options.htm) - [x] [`message-details.htm`](../blob/dev/src/page/template/panel/message-details.htm) - [x] [`notifications.htm`](../blob/dev/src/page/template/panel/notifications.htm) - [x] [`participant-devices.htm`](../blob/dev/src/page/template/panel/participant-devices.htm) - [x] [`timed-messages.htm`](../blob/dev/src/page/template/panel/timed-messages.htm) - [x] `/page/template` - [x] [`warning.htm`](../blob/dev/src/page/template/warning.htm) - [x] [`wire-main.htm`](../blob/dev/src/page/template/wire-main.htm) - [x] `/script/components/asset` - [x] #11580 - [x] [`AssetHeader.tsx`](../blob/dev/src/script/components/asset/AssetHeader.tsx) - [x] [`AssetLoader.tsx`](../blob/dev/src/script/components/asset/AssetLoader.tsx) - [x] #11560 - [x] [`FileAssetComponent.tsx`](../blob/dev/src/script/components/asset/FileAssetComponent.tsx) - [x] #11543 - [x] [`LinkPreviewAssetComponent.tsx`](../blob/dev/src/script/components/asset/LinkPreviewAssetComponent.tsx) - [x] [`LocationAsset.tsx`](../blob/dev/src/script/components/asset/LocationAsset.tsx) - [x] [`MessageButton.tsx`](../blob/dev/src/script/components/asset/MessageButton.tsx) - [x] #11559 - [x] `/script/components/asset/controls` - [x] [`AudioSeekBar.tsx`](../blob/dev/src/script/components/asset/controls/AudioSeekBar.tsx) - [x] [`MediaButton.tsx`](../blob/dev/src/script/components/asset/controls/MediaButton.tsx) - [x] [`SeekBar.tsx`](../blob/dev/src/script/components/asset/controls/SeekBar.tsx) - [x] `/script/components/calling` - [x] [`FullscreenVideoCall.tsx`](../blob/dev/src/script/components/calling/FullscreenVideoCall.tsx) - [x] [`GroupVideoGrid.tsx`](../blob/dev/src/script/components/calling/GroupVideoGrid.tsx) - [x] [`ParticipantMicOnIcon.tsx`](../blob/dev/src/script/components/calling/ParticipantMicOnIcon.tsx) - [x] [`ChooseScreen.tsx`](../blob/dev/src/script/components/calling/ChooseScreen.tsx) - [x] `/script/components` - [x] [`CopyToClipboard.tsx`](../blob/dev/src/script/components/CopyToClipboard.tsx) - [x] [`DeviceCard.tsx`](../blob/dev/src/script/components/DeviceCard.tsx) - [x] [`DeviceRemove.tsx`](../blob/dev/src/script/components/DeviceRemove.tsx) - [x] [`EphemeralTimer.tsx`](../blob/dev/src/script/components/EphemeralTimer.tsx) - [x] #11584 - [x] [`GroupList.tsx`](../blob/dev/src/script/components/GroupList.tsx) - [x] [`GuestModeToggle.tsx`](../blob/dev/src/script/components/GuestModeToggle.tsx) - [x] [`image.ts`](../blob/dev/src/script/components/image.ts) - [x] [`InfoToggle.tsx`](../blob/dev/src/script/components/InfoToggle.tsx) - [x] [`InputLevel.tsx`](../blob/dev/src/script/components/InputLevel.tsx) - [x] [`LegalHoldDot.tsx`](../blob/dev/src/script/components/LegalHoldDot.tsx) - [x] `/script/components/list` - [x] #11347 - [x] #11348 - [x] [`GroupedConversationHeader.tsx`](../blob/dev/src/script/components/list/GroupedConversationHeader.tsx) - [x] #11583 - [x] [`ParticipantItem.tsx`](../blob/dev/src/script/components/list/ParticipantItem.tsx) - [x] `/script/components` - [x] [`LoadingBar.tsx`](../blob/dev/src/script/components/LoadingBar.tsx) - [x] [`mentionSuggestions.ts`](../blob/dev/src/script/page/message-list/mentionSuggestions.ts) - [x] [`message.ts`](../blob/dev/src/script/components/message.ts) (@Yserz) - [x] verfied - [x] call - [x] missed - [x] filetyperestricted - [x] deleted - [x] decrypt error - [x] legalhold - [x] ping - [x] #11628 - [x] #11661 - [x] normal message - [x] [`messageQuote.ts`](../blob/dev/src/script/components/message/messageQuote.ts) - [x] [`MessageTimerButton.tsx`](../blob/dev/src/script/page/message-list/MessageTimerButton.tsx) - [x] [`modal.ts`](../blob/dev/src/script/components/modal.ts) - [x] `/script/components/panel` - [x] [`enrichedFields.ts`](../blob/dev/src/script/components/panel/enrichedFields.ts) - [x] [`PanelActions.tsx`](../blob/dev/src/script/components/panel/PanelActions.tsx) - [x] [`serviceDetails.ts`](../blob/dev/src/script/components/panel/serviceDetails.ts) - [x] [`userActions.ts`](../blob/dev/src/script/components/panel/userActions.ts) - [x] [`userDetails.ts`](../blob/dev/src/script/components/panel/userDetails.ts) - [x] `/script/page` - [x] [`TopPeople.tsx`](../blob/dev/src/script/page/start-ui/TopPeople.tsx) - [x] `/script/components` - [x] [`ReceiptModeToggle.tsx`](../blob/dev/src/script/components/ReceiptModeToggle.tsx) - [x] [`ServiceList.tsx`](../blob/dev/src/script/components/ServiceList.tsx) - [x] #11370 - [x] [`userInput.ts`](../blob/dev/src/script/components/userInput.ts) - [x] #11350 - [ ] `/script/view_model` - [ ] [`CallingViewModel.ts`](../blob/dev/src/script/view_model/CallingViewModel.ts) - [ ] [`ContentViewModel.ts`](../blob/dev/src/script/view_model/ContentViewModel.ts) - [x] [`FaviconViewModel.ts`](../blob/dev/src/script/view_model/FaviconViewModel.ts) - [x] [`ImageDetailViewViewModel.ts`](../blob/dev/src/script/view_model/ImageDetailViewViewModel.ts) - [ ] [`ListViewModel.ts`](../blob/dev/src/script/view_model/ListViewModel.ts) - [x] [`LoadingViewModel.ts`](../blob/dev/src/script/view_model/LoadingViewModel.ts) - [ ] [`MainViewModel.ts`](../blob/dev/src/script/view_model/MainViewModel.ts) - [x] [`ModalsViewModel.ts`](../blob/dev/src/script/view_model/ModalsViewModel.ts) - [x] [`PanelViewModel.ts`](../blob/dev/src/script/view_model/PanelViewModel.ts) - [x] [`WarningsViewModel.ts`](../blob/dev/src/script/view_model/WarningsViewModel.ts) - [x] [`WindowTitleViewModel.ts`](../blob/dev/src/script/view_model/WindowTitleViewModel.ts) - [ ] `/script/view_model/bindings` - [ ] [`CommonBindings.ts`](../blob/dev/src/script/view_model/bindings/CommonBindings.ts) - [x] [`ConversationListBindings.ts`](../blob/dev/src/script/view_model/bindings/ConversationListBindings.ts) - [x] [`ListBackgroundBindings.ts`](../blob/dev/src/script/view_model/bindings/ListBackgroundBindings.ts) - [x] [`MessageListBindings.ts`](../blob/dev/src/script/view_model/bindings/MessageListBindings.ts) - [x] [`VideoCallingBindings.ts`](../blob/dev/src/script/view_model/bindings/VideoCallingBindings.ts) - [x] `/script/view_model/content` - [x] [`AppLockViewModel.ts`](../blob/dev/src/script/view_model/content/AppLockViewModel.ts) - [x] [`CollectionDetailsViewModel.ts`](../blob/dev/src/script/view_model/content/CollectionDetailsViewModel.ts) - [x] [`CollectionViewModel.ts`](../blob/dev/src/script/view_model/content/CollectionViewModel.ts) - [x] [`ConnectRequestsViewModel.ts`](../blob/dev/src/script/view_model/content/ConnectRequestsViewModel.ts) - [x] [`EmojiInputViewModel.ts`](../blob/dev/src/script/view_model/content/EmojiInputViewModel.ts) - [x] [`GiphyViewModel.ts`](../blob/dev/src/script/view_model/content/GiphyViewModel.ts) - [x] [`GroupCreationViewModel.ts`](../blob/dev/src/script/view_model/content/GroupCreationViewModel.ts) - [x] [`HistoryExportViewModel.ts`](../blob/dev/src/script/view_model/content/HistoryExportViewModel.ts) - [x] [`HistoryImportViewModel.ts`](../blob/dev/src/script/view_model/content/HistoryImportViewModel.ts) - [x] [`InputBarViewModel.ts`](../blob/dev/src/script/view_model/content/InputBarViewModel.ts) - [x] [`InviteModalViewModel.ts`](../blob/dev/src/script/view_model/content/InviteModalViewModel.ts) - [x] [`LegalHoldModalViewModel.ts`](../blob/dev/src/script/view_model/content/LegalHoldModalViewModel.ts) - [x] [`MessageListViewModel.ts`](../blob/dev/src/script/view_model/content/MessageListViewModel.ts) - [x] [`PreferencesAVViewModel.ts`](../blob/dev/src/script/view_model/content/PreferencesAVViewModel.ts) - [x] [`PreferencesAboutViewModel.ts`](../blob/dev/src/script/view_model/content/PreferencesAboutViewModel.ts) - [x] [`PreferencesAccountViewModel.ts`](../blob/dev/src/script/view_model/content/PreferencesAccountViewModel.ts) - [x] [`PreferencesDeviceDetailsViewModel.ts`](../blob/dev/src/script/view_model/content/PreferencesDeviceDetailsViewModel.ts) - [x] [`PreferencesDevicesViewModel.ts`](../blob/dev/src/script/view_model/content/PreferencesDevicesViewModel.ts) - [x] [`PreferencesOptionsViewModel.ts`](../blob/dev/src/script/view_model/content/PreferencesOptionsViewModel.ts) - [x] [`ServiceModalViewModel.ts`](../blob/dev/src/script/view_model/content/ServiceModalViewModel.ts) - [x] [`TitleBarViewModel.ts`](../blob/dev/src/script/view_model/content/TitleBarViewModel.ts) - [x] [`UserModalViewModel.ts`](../blob/dev/src/script/view_model/content/UserModalViewModel.ts) - [x] `/script/view_model/list` - [x] [`ArchiveViewModel.ts`](../blob/dev/src/script/view_model/list/ArchiveViewModel.ts) - [x] #11669 - [x] [`PreferencesListViewModel.ts`](../blob/dev/src/script/view_model/list/PreferencesListViewModel.ts) - [x] [`StartUIViewModel.ts`](../blob/dev/src/script/view_model/list/StartUIViewModel.ts) - [x] [`TakeoverViewModel.ts`](../blob/dev/src/script/view_model/list/TakeoverViewModel.ts) (retired here https://github.com/wireapp/wire-webapp/pull/12710) - [x] [`TemporaryGuestViewModel.ts`](../blob/dev/src/script/view_model/list/TemporaryGuestViewModel.ts) - [x] `/script/view_model/panel` - [x] [`AddParticipantsViewModel.ts`](../blob/dev/src/script/view_model/panel/AddParticipantsViewModel.ts) - [x] [`BasePanelViewModel.ts`](../blob/dev/src/script/view_model/panel/BasePanelViewModel.ts) - [x] [`ConversationDetailsViewModel.ts`](../blob/dev/src/script/view_model/panel/ConversationDetailsViewModel.ts) - [x] [`ConversationParticipantsViewModel.ts`](../blob/dev/src/script/view_model/panel/ConversationParticipantsViewModel.ts) - [x] [`GroupParticipantServiceViewModel.ts`](../blob/dev/src/script/view_model/panel/GroupParticipantServiceViewModel.ts) - [x] [`GroupParticipantUserViewModel.ts`](../blob/dev/src/script/view_model/panel/GroupParticipantUserViewModel.ts) - [x] [`GuestsAndServicesViewModel.ts`](../blob/dev/src/script/view_model/panel/GuestsAndServicesViewModel.ts) - [x] [`MessageDetailsViewModel.ts`](../blob/dev/src/script/view_model/panel/MessageDetailsViewModel.ts) - [x] [`NotificationsViewModel.ts`](../blob/dev/src/script/view_model/panel/NotificationsViewModel.ts) - [x] #11349 - [x] [`TimedMessagesViewModel.ts`](../blob/dev/src/script/view_model/panel/TimedMessagesViewModel.ts)
Best practices:
Knockout to React Migration
Ideas for migration a viewmodel (refactor: Migrate ListViewModel to React #14078)
Refactoring goals:
/script/components/script/view_model/page/template/page/template/contentcollection-details.htm#11351collection.htmconnect-requests.htmconversation.htm/page/template/content/conversationinput-bar.htmmessage-list.htmtitle-bar.htm/page/template/contenthistory-export.htmhistory-import.htmpreferences-about.htmpreferences-account.htmpreferences-av.htmpreferences-device-details.htmpreferences-devices.htmpreferences-options.htm/page/templatedetail-view.htm/page/template/listarchive.htmbackground.htmconversations.htmpreferences.htmstart-ui.htmtakeover.htm(retired here refactor: Retire Takeover panel #12710)temporary-guest.htm/page/template/modalapplock.htmgiphy.htmgroup-creation.htminvite-modal.htmlegal-hold.htmservice-modal.htmuser-modal.htm/page/templatemodals.htm/page/template/paneladd-participants.htmconversation-details.htmconversation-participants.htmgroup-participant-service.htmgroup-participant-user.htmguest-options.htmmessage-details.htmnotifications.htmparticipant-devices.htmtimed-messages.htm/page/templatewarning.htmwire-main.htm/script/components/assetAbstractAssetTransferStateTracker.ts#11580AssetHeader.tsxAssetLoader.tsxFileAssetComponent.tsximageAsset.ts#11543LinkPreviewAssetComponent.tsxLocationAsset.tsxMessageButton.tsxvideoAsset.ts#11559/script/components/asset/controlsAudioSeekBar.tsxMediaButton.tsxSeekBar.tsx/script/components/callingFullscreenVideoCall.tsxGroupVideoGrid.tsxParticipantMicOnIcon.tsxChooseScreen.tsx/script/componentsCopyToClipboard.tsxDeviceCard.tsxDeviceRemove.tsxEphemeralTimer.tsxfullSearch.tsto React #11584GroupList.tsxGuestModeToggle.tsximage.tsInfoToggle.tsxInputLevel.tsxLegalHoldDot.tsx/script/components/listconversationListCell.tsto React #11348GroupedConversationHeader.tsxgroupedConversations.ts#11583ParticipantItem.tsx/script/componentsLoadingBar.tsxmentionSuggestions.tsmessage.ts(@Yserz)messageQuote.tsMessageTimerButton.tsxmodal.ts/script/components/panelenrichedFields.tsPanelActions.tsxserviceDetails.tsuserActions.tsuserDetails.ts/script/pageTopPeople.tsx/script/componentsReceiptModeToggle.tsxServiceList.tsxuserDevices.ts(@AndyLnd) #11370userInput.tsuserList.ts(@thisisamir98) #11350/script/view_modelCallingViewModel.tsContentViewModel.tsFaviconViewModel.tsImageDetailViewViewModel.tsListViewModel.tsLoadingViewModel.tsMainViewModel.tsModalsViewModel.tsPanelViewModel.tsWarningsViewModel.tsWindowTitleViewModel.ts/script/view_model/bindingsCommonBindings.tsConversationListBindings.tsListBackgroundBindings.tsMessageListBindings.tsVideoCallingBindings.ts/script/view_model/contentAppLockViewModel.tsCollectionDetailsViewModel.tsCollectionViewModel.tsConnectRequestsViewModel.tsEmojiInputViewModel.tsGiphyViewModel.tsGroupCreationViewModel.tsHistoryExportViewModel.tsHistoryImportViewModel.tsInputBarViewModel.tsInviteModalViewModel.tsLegalHoldModalViewModel.tsMessageListViewModel.tsPreferencesAVViewModel.tsPreferencesAboutViewModel.tsPreferencesAccountViewModel.tsPreferencesDeviceDetailsViewModel.tsPreferencesDevicesViewModel.tsPreferencesOptionsViewModel.tsServiceModalViewModel.tsTitleBarViewModel.tsUserModalViewModel.ts/script/view_model/listArchiveViewModel.tsPreferencesListViewModel.tsStartUIViewModel.tsTakeoverViewModel.ts(retired here refactor: Retire Takeover panel #12710)TemporaryGuestViewModel.ts/script/view_model/panelAddParticipantsViewModel.tsBasePanelViewModel.tsConversationDetailsViewModel.tsConversationParticipantsViewModel.tsGroupParticipantServiceViewModel.tsGroupParticipantUserViewModel.tsGuestsAndServicesViewModel.tsMessageDetailsViewModel.tsNotificationsViewModel.tsParticipantDevicesViewModel.ts#11349TimedMessagesViewModel.ts