-
- {props.language.t("home.sessions.empty")}
-
-
- {props.language.t("home.sessions.empty.description")}
-
-
- {(onNewSession) => (
-
- {props.language.t("command.session.new")}
-
- )}
-
-
+}) {
+ return (
+
+ [data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+ onClick={props.openSettings}
+ >
+ {props.language.t("sidebar.settings")}
+
+ [data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+ onClick={props.openHelp}
+ >
+ {props.language.t("sidebar.help")}
+
+
+ )
+}
+
+function HomeServerRow(props: {
+ controller: HomeProjectsController
+ server: ServerConnection.Any
+ selected: boolean
+ collapsed: boolean
+ health: ServerHealth | undefined
+}) {
+ const healthy = () => !!props.health?.healthy
+ const canToggle = () => healthy() && props.controller.projectsForServer(props.server).length > 0
+ const menuID = () => props.controller.serverMenuID(props.server)
+ return (
+
+
props.controller.focusServer(props.server)}
+ >
+ {
+ event.preventDefault()
+ event.stopPropagation()
+ if (!canToggle()) return
+ props.controller.toggleCollapsed(props.server)
+ }}
+ onPointerDown={(event) => event.preventDefault()}
+ >
+
+
+
+
+ {props.server.displayName ?? new URL(props.server.http.url).host}
+
+ {(label) => (
+
+ {label()}
+
+ )}
+
+
+
+
+
[
+ ...defaults.filter((sensor) => sensor !== PointerSensor),
+ PointerSensor.configure({
+ activationConstraints: (event) =>
+ event.pointerType === "touch"
+ ? [new PointerActivationConstraints.Delay({ value: 250, tolerance: 5 })]
+ : [new PointerActivationConstraints.Distance({ value: 4 })],
+ preventActivation: (event) => event.target instanceof Element && !!event.target.closest("[data-action]"),
+ }),
+ ]}
+ modifiers={[RestrictToVerticalAxis, RestrictToElement.configure({ element: () => listRef })]}
+ plugins={(defaults) => [
+ ...defaults.filter((plugin) => plugin !== AutoScroller && plugin !== Feedback),
+ AutoScroller.configure({ acceleration: 8, threshold: { x: 0, y: 0.05 } }),
+ Feedback.configure({ dropAnimation: null }),
+ ]}
+ onDragEnd={(event) => {
+ const source = event.operation.source
+ if (event.canceled || !isSortable(source)) return
+ if (source.initialIndex !== source.index)
+ props.controller.moveProject(props.server, source.id.toString(), source.index)
+ if (props.controller.selection().server !== ServerConnection.key(props.server))
+ props.controller.selectProject(props.server, source.id.toString())
+ }}
+ >
+
+ {/* Keyed on worktree strings: the enriched project objects are
+ recreated on every store or sync update, so iterating them directly
+ remounts all rows — killing any in-flight drag activation (the
+ row's sortable unregisters on unmount) and discarding animations.
+ String keys keep row elements alive and move them on reorder. */}
+ project.worktree)}>
+ {(worktree, index) =>
+
+
+ )
+}
+
+function HomeProjectSlot(
+ props: HomeProjectListProps & {
+ worktree: string
+ index: () => number
+ },
+) {
+ const project = createMemo(() => props.projects.find((item) => item.worktree === props.worktree))
+
+ return (
+
+ {(item) => (
+
+ )
+}
+
+function HomeProjectEmpty(props: {
+ controller: HomeProjectsController
+ server: ServerConnection.Any
+ recentlyClosed: LocalProject[]
+}) {
+ const unreachable = () => props.controller.serverHealth(props.server)?.healthy === false
+ return (
+
+
[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+ disabled={unreachable()}
+ onClick={() => props.controller.chooseProject(props.server)}
+ >
+ {props.controller.language.t("home.project.add")}
+
+
0}>
+
+
+ {props.controller.language.t("home.recentlyClosed")}
+
+
+ {(project) =>
+
+
+ props.controller.addProjects(props.server, [props.project.worktree])}
+ >
+ {displayName(props.project)}
+
+
+ )
+}
+
+function HomeProjectRow(props: {
+ controller: HomeProjectsController
+ project: LocalProject
+ server: ServerConnection.Any
+ index: () => number
+ serverSelected: boolean
+ selected: boolean
+ unseenCount: number
+}) {
+ const serverUnreachable = () => props.controller.serverHealth(props.server)?.healthy === false
+ const sortable = useSortable({
+ get id() {
+ return props.project.worktree
+ },
+ get index() {
+ return props.index()
+ },
+ })
+ let pointerDownSelected: boolean | undefined
+ const menuID = () => props.controller.projectMenuID(props.server, props.project.worktree)
+ return (
+
+ {
+ // Same-server mouse selection happens on pointerdown (like tabs),
+ // but only ever selects; selectProject toggles, and deselecting here
+ // would fire on every drag before the threshold is met. Cross-server
+ // selection waits for click so reordering a remote server's projects
+ // does not focus that server and load its session index. Touch is
+ // excluded so flick-scrolling the list cannot select rows.
+ pointerDownSelected = undefined
+ if (event.button !== 0 || event.pointerType === "touch") return
+ if (!props.serverSelected) return
+ pointerDownSelected = props.selected
+ if (!props.selected) props.controller.selectProject(props.server, props.project.worktree)
+ }}
+ onClick={(event) => {
+ // The drag sensor calls preventDefault on post-drag clicks; never
+ // toggle selection as part of a reorder.
+ if (event.defaultPrevented) return
+ // Keyboard activation and touch taps keep the original toggle.
+ if (event.detail === 0 || pointerDownSelected === undefined) {
+ props.controller.selectProject(props.server, props.project.worktree)
+ return
+ }
+ // Mouse: pointerdown already selected unselected rows; a plain click
+ // on an already-selected row toggles it off.
+ if (pointerDownSelected) props.controller.selectProject(props.server, props.project.worktree)
+ pointerDownSelected = undefined
+ }}
+ >
+ {displayName(props.project)}
+
+
+
+ )
+}
+
+function HomeProjectAvatar(props: { project: LocalProject; outline?: boolean }) {
+ const name = createMemo(() => displayName(props.project))
+ return (
+
+
+
+
0 && props.controller.canCreateSession()}>
+
+
+ {props.controller.language.t("command.session.new")}
+
+
+
+
0}
+ fallback={
+
+
+ {(group, index) => (
+ <>
+ props.controller.header.setHeader(group.id, element)}
+ elevated={index() === 0}
+ />
+
+
+ {(record) =>
+
+
+ )}
+
+
+
+
+
+ )
+}
+
+function HomeSessionLeadingController(props: {
+ controller: HomeSessionsController
+ record: HomeSessionRecord
+ revealProjectOnHover: boolean
+}) {
+ return (
+ (
+
+
+
+
+ )
+}
+
+function HomeSessionSearch(props: { controller: HomeSessionsController }) {
+ return (
+
+
+
+
+
+
+ }
+ >
+
0}
+ fallback={
+
+ {props.controller.search.noResultsLabel()}
+
+ }
+ >
+
+
+ {props.controller.language.t("home.sessions.search.sessions")}
+
+
+
+
+ {(record) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
props.controller.search.highlight(props.record)}
+ onMouseDown={(event) => {
+ if (event.button === 1) event.preventDefault()
+ }}
+ onClick={(event) => props.controller.search.select(props.record, { background: isBackgroundOpen(event) })}
+ onAuxClick={(event) => {
+ if (!isBackgroundOpen(event)) return
+ event.preventDefault()
+ props.controller.search.select(props.record, { background: true })
+ }}
+ >
+
+
+ {title()}
+
+
+ {props.record.projectName}
+
+
+
+ )
+}
+
+function HomeSessionGroupHeader(props: {
+ title: string
+ titleOpacity: number
+ ref: ComponentProps<"div">["ref"]
+ elevated?: boolean
+}) {
+ return (
+
+ )
+}
+
+function HomeSessionRow(props: { controller: HomeSessionsController; record: HomeSessionRecord }) {
+ const title = createMemo(() => sessionTitle(props.record.session.title) || props.record.session.id)
+ const showProjectName = () => props.controller.showProjectName() && props.record.projectName
+
+ return (
+
+
{
+ if (event.button === 1) event.preventDefault()
+ }}
+ onClick={(event) => props.controller.openSession(props.record.session, { background: isBackgroundOpen(event) })}
+ onAuxClick={(event) => {
+ if (!isBackgroundOpen(event)) return
+ event.preventDefault()
+ props.controller.openSession(props.record.session, { background: true })
+ }}
+ >
+
+ {title()}
+
+
+
+ {props.record.projectName}
+
+
+
+
+
+
+
+
+
+
}) {
+ return (
+
+
+ {props.language.t("home.sessions.empty")}
+
+
+ {props.language.t("home.sessions.empty.description")}
+
+
+ {(onNewSession) => (
+
+ {props.language.t("command.session.new")}
+
+ )}
+
+