chore(client/ts): port components/mobile_screen_switcher

src/public/app/components/app_context.ts

@@ -9,7 +9,7 @@ import TabManager from "./tab_manager.js";
 import Component from "./component.js";
 import keyboardActionsService from "../services/keyboard_actions.js";
 import linkService, { ViewScope } from "../services/link.js";
-import MobileScreenSwitcherExecutor from "./mobile_screen_switcher.js";
+import MobileScreenSwitcherExecutor, { Screen } from "./mobile_screen_switcher.js";
 import MainTreeExecutors from "./main_tree_executors.js";
 import toast from "../services/toast.js";
 import ShortcutComponent from "./shortcut_component.js";
@@ -157,6 +157,9 @@ export type CommandMappings = {
     moveBranchIdsTo: CommandData & {
         branchIds: string[];
     };
+    setActiveScreen: CommandData & {
+        screen: Screen;
+    }
 }
 
 type EventMappings = {
@@ -188,6 +191,11 @@ export type EventListener<T extends EventNames> = {
     [key in T as `${key}Event`]: (data: EventData<T>) => void
 }
 
+export type CommandListener<T extends CommandNames> = {
+    [key in T as `${key}Command`]: (data: CommandListenerData<T>) => void
+}
+
+export type CommandListenerData<T extends CommandNames> = CommandMappings[T];
 export type EventData<T extends EventNames> = EventMappings[T];
 
 type CommandAndEventMappings = (CommandMappings & EventMappings);

src/public/app/components/mobile_screen_switcher.ts

@@ -1,8 +1,14 @@
 import Component from "./component.js";
-import appContext from "./app_context.js";
+import appContext, { CommandListener, CommandListenerData } from "./app_context.js";
 
-export default class MobileScreenSwitcherExecutor extends Component {
-    setActiveScreenCommand({screen}) {
+export type Screen = "detail" | "tree";
+
+export default class MobileScreenSwitcherExecutor extends Component
+    implements CommandListener<"setActiveScreen">
+{
+    private activeScreen?: Screen;
+
+    setActiveScreenCommand({screen}: CommandListenerData<"setActiveScreen">) {
         if (screen !== this.activeScreen) {
             this.activeScreen = screen;