refactor(app): split home view controllers

packages/app/src/app.tsx

@@ -67,7 +67,8 @@ import { legacySessionHref, legacySessionServer, requireServerKey, sessionHref }
 import { createSessionLineage } from "@/pages/session/session-lineage"
 
 import { SessionPage, SessionRouteErrorBoundary, TargetSessionRouteContent } from "@/pages/session"
-import { NewHome, LegacyHome } from "@/pages/home"
+import { NewHome } from "@/pages/home"
+import { LegacyHome } from "@/pages/home/legacy-home"
 
 const NewSession = lazy(() => import("@/pages/new-session"))
 

packages/app/src/components/server/server-row-menu.tsx

@@ -15,41 +15,78 @@ export const ServerRowMenu: Component<{
 }> = (props) => {
  const language = useLanguage()
  const key = ServerConnection.key(props.server)
- const builtin = ServerConnection.builtin(props.server)
- const isDefault = () => props.controller.defaultKey() === key
+ return (
+ <ServerRowMenuView
+ server={props.server}
+ labels={serverMenuLabels(language)}
+ canDefault={props.controller.canDefault()}
+ isDefault={props.controller.defaultKey() === key}
+ onEdit={props.onEdit}
+ onSetDefault={() => props.controller.setDefault(key)}
+ onRemoveDefault={() => props.controller.setDefault(null)}
+ onRemove={() => props.controller.handleRemove(key)}
+ open={props.open}
+ onOpenChange={props.onOpenChange}
+ />
+ )
+}
+
+export function serverMenuLabels(language: ReturnType<typeof useLanguage>) {
+ return {
+ more: language.t("common.moreOptions"),
+ server: language.t("settings.section.server"),
+ edit: language.t("dialog.server.menu.edit"),
+ default: language.t("dialog.server.menu.default"),
+ defaultRemove: language.t("dialog.server.menu.defaultRemove"),
+ delete: language.t("dialog.server.menu.delete"),
+ }
+}
 
+export const ServerRowMenuView: Component<{
+ server: ServerConnection.Any
+ labels: ReturnType<typeof serverMenuLabels>
+ canDefault: boolean
+ isDefault: boolean
+ onEdit: (server: ServerConnection.Http) => void
+ onSetDefault: () => void
+ onRemoveDefault: () => void
+ onRemove: () => void
+ open?: boolean
+ onOpenChange?: (open: boolean) => void
+}> = (props) => {
+ const builtin = () => ServerConnection.builtin(props.server)
+ const httpServer = () => (props.server.type === "http" ? props.server : undefined)
  return (
  <MenuV2 gutter={6} modal={false} placement="bottom-end" open={props.open} onOpenChange={props.onOpenChange}>
  <MenuV2.Trigger
  as={IconButtonV2}
  variant="ghost-muted"
  size="small"
  icon={<IconV2 name="outline-dots" />}
- aria-label={language.t("common.moreOptions")}
+ aria-label={props.labels.more}
  />
  <MenuV2.Portal>
  <MenuV2.Content>
  <MenuV2.Group>
- <MenuV2.GroupLabel>{language.t("settings.section.server")}</MenuV2.GroupLabel>
+ <MenuV2.GroupLabel>{props.labels.server}</MenuV2.GroupLabel>
  <MenuV2.Item
- disabled={builtin || props.server.type !== "http"}
- onSelect={() => props.onEdit(props.server as ServerConnection.Http)}
+ disabled={builtin() || !httpServer()}
+ onSelect={() => {
+ const server = httpServer()
+ if (server) props.onEdit(server)
+ }}
  >
- {language.t("dialog.server.menu.edit")}
+ {props.labels.edit}
  </MenuV2.Item>
- <Show when={props.controller.canDefault() && !isDefault()}>
- <MenuV2.Item onSelect={() => props.controller.setDefault(key)}>
- {language.t("dialog.server.menu.default")}
- </MenuV2.Item>
+ <Show when={props.canDefault && !props.isDefault}>
+ <MenuV2.Item onSelect={props.onSetDefault}>{props.labels.default}</MenuV2.Item>
  </Show>
- <Show when={props.controller.canDefault() && isDefault()}>
- <MenuV2.Item onSelect={() => props.controller.setDefault(null)}>
- {language.t("dialog.server.menu.defaultRemove")}
- </MenuV2.Item>
+ <Show when={props.canDefault && props.isDefault}>
+ <MenuV2.Item onSelect={props.onRemoveDefault}>{props.labels.defaultRemove}</MenuV2.Item>
  </Show>
  <MenuV2.Separator />
- <MenuV2.Item disabled={builtin} onSelect={() => props.controller.handleRemove(key)}>
- {language.t("dialog.server.menu.delete")}
+ <MenuV2.Item disabled={builtin()} onSelect={props.onRemove}>
+ {props.labels.delete}
  </MenuV2.Item>
  </MenuV2.Group>
  </MenuV2.Content>