Skip to content

Commit 8c0a82d

Browse files
pascalandrpascalandr
committed
refactor(ui): keep locale bootstrap branch focused
1 parent 57efe5d commit 8c0a82d

4 files changed

Lines changed: 100 additions & 177 deletions

File tree

‎packages/ui/src/App.tsx‎

Lines changed: 26 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
import { Component, For, Show, Suspense, createMemo, createEffect, createSignal, lazy, onMount, onCleanup } from "solid-js"
1+
import { Component, For, Show, createMemo, createEffect, createSignal, onMount, onCleanup } from "solid-js"
22
import { Dialog } from "@kobalte/core/dialog"
33
import { Toaster } from "solid-toast"
44
import useMediaQuery from "@suid/material/useMediaQuery"
55
import { Minimize2 } from "lucide-solid"
66
import AlertDialog from "./components/alert-dialog"
7+
import FolderSelectionView from "./components/folder-selection-view"
78
import { showConfirmDialog } from "./stores/alerts"
89
import InstanceTabs from "./components/instance-tabs"
10+
import InstanceDisconnectedModal from "./components/instance-disconnected-modal"
911
import InstanceShell from "./components/instance/instance-shell2"
12+
import { SettingsScreen } from "./components/settings-screen"
1013
import { InstanceMetadataProvider } from "./lib/contexts/instance-metadata-context"
1114
import { initMarkdown } from "./lib/markdown"
1215
import { initGithubStars } from "./stores/github-stars"
@@ -51,16 +54,10 @@ import {
5154
} from "./stores/sessions"
5255

5356
import { getInstanceSessionIndicatorStatus } from "./stores/session-status"
54-
import { openSettings, settingsOpen } from "./stores/settings-screen"
57+
import { openSettings } from "./stores/settings-screen"
5558

5659
const log = getLogger("actions")
5760

58-
const LazyFolderSelectionView = lazy(() => import("./components/folder-selection-view"))
59-
const LazyInstanceDisconnectedModal = lazy(() => import("./components/instance-disconnected-modal"))
60-
const LazySettingsScreen = lazy(() =>
61-
import("./components/settings-screen").then((module) => ({ default: module.SettingsScreen })),
62-
)
63-
6461
const App: Component = () => {
6562
const { isDark } = useTheme()
6663
const { t } = useI18n()
@@ -412,16 +409,12 @@ const App: Component = () => {
412409

413410
return (
414411
<>
415-
<Show when={Boolean(disconnectedInstance())}>
416-
<Suspense fallback={null}>
417-
<LazyInstanceDisconnectedModal
418-
open={Boolean(disconnectedInstance())}
419-
folder={disconnectedInstance()?.folder}
420-
reason={disconnectedInstance()?.reason}
421-
onClose={handleDisconnectedInstanceClose}
422-
/>
423-
</Suspense>
424-
</Show>
412+
<InstanceDisconnectedModal
413+
open={Boolean(disconnectedInstance())}
414+
folder={disconnectedInstance()?.folder}
415+
reason={disconnectedInstance()?.reason}
416+
onClose={handleDisconnectedInstanceClose}
417+
/>
425418

426419
<Dialog open={Boolean(launchError())} modal>
427420
<Dialog.Portal>
@@ -534,37 +527,29 @@ const App: Component = () => {
534527
</>
535528
}
536529
>
537-
<Suspense fallback={<div class="flex-1 min-h-0" />}>
538-
<LazyFolderSelectionView
539-
onSelectFolder={handleSelectFolder}
540-
isLoading={isSelectingFolder()}
541-
/>
542-
</Suspense>
530+
<FolderSelectionView
531+
onSelectFolder={handleSelectFolder}
532+
isLoading={isSelectingFolder()}
533+
/>
543534
</Show>
544535

545536
<Show when={showFolderSelection()}>
546537
<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
547538
<div class="w-full h-full relative">
548-
<Suspense fallback={<div class="w-full h-full" />}>
549-
<LazyFolderSelectionView
550-
onSelectFolder={handleSelectFolder}
551-
isLoading={isSelectingFolder()}
552-
onClose={() => {
553-
setShowFolderSelection(false)
554-
clearLaunchError()
555-
}}
556-
/>
557-
</Suspense>
539+
<FolderSelectionView
540+
onSelectFolder={handleSelectFolder}
541+
isLoading={isSelectingFolder()}
542+
onClose={() => {
543+
setShowFolderSelection(false)
544+
clearLaunchError()
545+
}}
546+
/>
558547
</div>
559548
</div>
560549
</Show>
561-
562-
<Show when={settingsOpen()}>
563-
<Suspense fallback={null}>
564-
<LazySettingsScreen />
565-
</Suspense>
566-
</Show>
567-
550+
551+
<SettingsScreen />
552+
568553
<AlertDialog />
569554

570555
<Toaster

‎packages/ui/src/components/instance/instance-shell2.tsx‎

Lines changed: 71 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import {
22
For,
33
Show,
4-
Suspense,
54
createEffect,
65
createMemo,
76
createSignal,
8-
lazy,
97
onCleanup,
108
onMount,
119
type Accessor,
@@ -24,18 +22,24 @@ import { keyboardRegistry, type KeyboardShortcut } from "../../lib/keyboard-regi
2422

2523
import { isOpen as isCommandPaletteOpen, hideCommandPalette, showCommandPalette } from "../../stores/command-palette"
2624
import Kbd from "../kbd"
25+
import InstanceWelcomeView from "../instance-welcome-view"
26+
import InfoView from "../info-view"
27+
import CommandPalette from "../command-palette"
2728
import PermissionNotificationBanner from "../permission-notification-banner"
29+
import PermissionApprovalModal from "../permission-approval-modal"
2830
import SessionView from "../session/session-view"
2931
import { formatTokenTotal } from "../../lib/formatters"
3032
import ContextMeter from "../context-meter"
3133
import { sseManager } from "../../lib/sse-manager"
3234
import { getLogger } from "../../lib/logger"
3335
import { serverApi } from "../../lib/api-client"
3436
import { loadBackgroundProcesses } from "../../stores/background-processes"
37+
import { BackgroundProcessOutputDialog } from "../background-process-output-dialog"
3538
import { useI18n } from "../../lib/i18n"
3639
import { getPermissionQueueLength, getQuestionQueueLength } from "../../stores/instances"
3740
import SessionSidebar from "./shell/SessionSidebar"
3841
import { useSessionSidebarRequests } from "./shell/useSessionSidebarRequests"
42+
import RightPanel from "./shell/right-panel/RightPanel"
3943
import { useDrawerChrome } from "./shell/useDrawerChrome"
4044
import { getSessionStatus } from "../../stores/session-status"
4145
import { Maximize2, ShieldAlert } from "lucide-solid"
@@ -56,19 +60,6 @@ import { useInstanceSessionContext } from "./shell/useInstanceSessionContext"
5660

5761
const log = getLogger("session")
5862

59-
const LazyInstanceWelcomeView = lazy(() => import("../instance-welcome-view"))
60-
const LazyInfoView = lazy(() => import("../info-view"))
61-
const LazyCommandPalette = lazy(() => import("../command-palette"))
62-
const LazyBackgroundProcessOutputDialog = lazy(() =>
63-
import("../background-process-output-dialog").then((module) => ({ default: module.BackgroundProcessOutputDialog })),
64-
)
65-
const LazyPermissionApprovalModal = lazy(() => import("../permission-approval-modal"))
66-
const LazyRightPanel = lazy(() => import("./shell/right-panel/RightPanel"))
67-
68-
function RightPanelFallback() {
69-
return <div class="flex-1 min-h-0" />
70-
}
71-
7263
interface InstanceShellProps {
7364
instance: Instance
7465
// Provided by App-level instance tabs; lets us pause heavy rendering
@@ -503,30 +494,28 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
503494
role="presentation"
504495
aria-hidden="true"
505496
/>
506-
<Suspense fallback={<RightPanelFallback />}>
507-
<LazyRightPanel
508-
t={t}
509-
instanceId={props.instance.id}
510-
instance={props.instance}
511-
activeSessionId={activeSessionIdForInstance}
512-
activeSession={activeSessionForInstance}
513-
activeSessionDiffs={activeSessionDiffs}
514-
latestTodoState={latestTodoState}
515-
backgroundProcessList={backgroundProcessList}
516-
onOpenBackgroundOutput={openBackgroundOutput}
517-
onStopBackgroundProcess={stopBackgroundProcess}
518-
onTerminateBackgroundProcess={terminateBackgroundProcess}
519-
isPhoneLayout={isPhoneLayout}
520-
rightDrawerWidth={rightDrawerWidth}
521-
rightDrawerWidthInitialized={rightDrawerWidthInitialized}
522-
rightDrawerState={rightDrawerState}
523-
rightPinned={rightPinned}
524-
onCloseRightDrawer={closeRightDrawer}
525-
onPinRightDrawer={pinRightDrawer}
526-
onUnpinRightDrawer={unpinRightDrawer}
527-
setContentEl={setRightDrawerContentEl}
528-
/>
529-
</Suspense>
497+
<RightPanel
498+
t={t}
499+
instanceId={props.instance.id}
500+
instance={props.instance}
501+
activeSessionId={activeSessionIdForInstance}
502+
activeSession={activeSessionForInstance}
503+
activeSessionDiffs={activeSessionDiffs}
504+
latestTodoState={latestTodoState}
505+
backgroundProcessList={backgroundProcessList}
506+
onOpenBackgroundOutput={openBackgroundOutput}
507+
onStopBackgroundProcess={stopBackgroundProcess}
508+
onTerminateBackgroundProcess={terminateBackgroundProcess}
509+
isPhoneLayout={isPhoneLayout}
510+
rightDrawerWidth={rightDrawerWidth}
511+
rightDrawerWidthInitialized={rightDrawerWidthInitialized}
512+
rightDrawerState={rightDrawerState}
513+
rightPinned={rightPinned}
514+
onCloseRightDrawer={closeRightDrawer}
515+
onPinRightDrawer={pinRightDrawer}
516+
onUnpinRightDrawer={unpinRightDrawer}
517+
setContentEl={setRightDrawerContentEl}
518+
/>
530519
</Box>
531520
)
532521
}
@@ -566,32 +555,28 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
566555
aria-hidden="true"
567556
/>
568557
</Show>
569-
<Show when={rightOpen() || rightPinned()} fallback={<RightPanelFallback />}>
570-
<Suspense fallback={<RightPanelFallback />}>
571-
<LazyRightPanel
572-
t={t}
573-
instanceId={props.instance.id}
574-
instance={props.instance}
575-
activeSessionId={activeSessionIdForInstance}
576-
activeSession={activeSessionForInstance}
577-
activeSessionDiffs={activeSessionDiffs}
578-
latestTodoState={latestTodoState}
579-
backgroundProcessList={backgroundProcessList}
580-
onOpenBackgroundOutput={openBackgroundOutput}
581-
onStopBackgroundProcess={stopBackgroundProcess}
582-
onTerminateBackgroundProcess={terminateBackgroundProcess}
583-
isPhoneLayout={isPhoneLayout}
584-
rightDrawerWidth={rightDrawerWidth}
585-
rightDrawerWidthInitialized={rightDrawerWidthInitialized}
586-
rightDrawerState={rightDrawerState}
587-
rightPinned={rightPinned}
588-
onCloseRightDrawer={closeRightDrawer}
589-
onPinRightDrawer={pinRightDrawer}
590-
onUnpinRightDrawer={unpinRightDrawer}
591-
setContentEl={setRightDrawerContentEl}
592-
/>
593-
</Suspense>
594-
</Show>
558+
<RightPanel
559+
t={t}
560+
instanceId={props.instance.id}
561+
instance={props.instance}
562+
activeSessionId={activeSessionIdForInstance}
563+
activeSession={activeSessionForInstance}
564+
activeSessionDiffs={activeSessionDiffs}
565+
latestTodoState={latestTodoState}
566+
backgroundProcessList={backgroundProcessList}
567+
onOpenBackgroundOutput={openBackgroundOutput}
568+
onStopBackgroundProcess={stopBackgroundProcess}
569+
onTerminateBackgroundProcess={terminateBackgroundProcess}
570+
isPhoneLayout={isPhoneLayout}
571+
rightDrawerWidth={rightDrawerWidth}
572+
rightDrawerWidthInitialized={rightDrawerWidthInitialized}
573+
rightDrawerState={rightDrawerState}
574+
rightPinned={rightPinned}
575+
onCloseRightDrawer={closeRightDrawer}
576+
onPinRightDrawer={pinRightDrawer}
577+
onUnpinRightDrawer={unpinRightDrawer}
578+
setContentEl={setRightDrawerContentEl}
579+
/>
595580
</Drawer>
596581

597582
)
@@ -849,9 +834,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
849834
}
850835
>
851836
<div class="info-view-pane flex flex-col flex-1 min-h-0 overflow-y-auto">
852-
<Suspense fallback={<div class="flex-1 min-h-0" />}>
853-
<LazyInfoView instanceId={props.instance.id} />
854-
</Suspense>
837+
<InfoView instanceId={props.instance.id} />
855838
</div>
856839
</Show>
857840
</Box>
@@ -867,49 +850,30 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
867850
class="instance-shell2 flex flex-col flex-1 min-h-0"
868851
data-instance-id={props.instance.id}
869852
>
870-
<Show
871-
when={hasSessions()}
872-
fallback={
873-
<Suspense fallback={<div class="flex-1 min-h-0" />}>
874-
<LazyInstanceWelcomeView instance={props.instance} />
875-
</Suspense>
876-
}
877-
>
853+
<Show when={hasSessions()} fallback={<InstanceWelcomeView instance={props.instance} />}>
878854
{sessionLayout}
879855
</Show>
880856
</div>
881857

882-
<Show when={paletteOpen()}>
883-
<Suspense fallback={null}>
884-
<LazyCommandPalette
885-
open={paletteOpen()}
886-
onClose={() => hideCommandPalette(props.instance.id)}
887-
commands={instancePaletteCommands()}
888-
onExecute={props.onExecuteCommand}
889-
/>
890-
</Suspense>
891-
</Show>
892-
893-
<Show when={showBackgroundOutput()}>
894-
<Suspense fallback={null}>
895-
<LazyBackgroundProcessOutputDialog
896-
open={showBackgroundOutput()}
897-
instanceId={props.instance.id}
898-
process={selectedBackgroundProcess()}
899-
onClose={closeBackgroundOutput}
900-
/>
901-
</Suspense>
902-
</Show>
903-
904-
<Show when={permissionModalOpen()}>
905-
<Suspense fallback={null}>
906-
<LazyPermissionApprovalModal
907-
instanceId={props.instance.id}
908-
isOpen={permissionModalOpen()}
909-
onClose={() => setPermissionModalOpen(false)}
910-
/>
911-
</Suspense>
912-
</Show>
858+
<CommandPalette
859+
open={paletteOpen()}
860+
onClose={() => hideCommandPalette(props.instance.id)}
861+
commands={instancePaletteCommands()}
862+
onExecute={props.onExecuteCommand}
863+
/>
864+
865+
<BackgroundProcessOutputDialog
866+
open={showBackgroundOutput()}
867+
instanceId={props.instance.id}
868+
process={selectedBackgroundProcess()}
869+
onClose={closeBackgroundOutput}
870+
/>
871+
872+
<PermissionApprovalModal
873+
instanceId={props.instance.id}
874+
isOpen={permissionModalOpen()}
875+
onClose={() => setPermissionModalOpen(false)}
876+
/>
913877
</>
914878
)
915879
}

‎packages/ui/src/components/instance/shell/useSessionCache.ts‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,10 @@ import { createEffect, createSignal, type Accessor } from "solid-js"
22
import { messageStoreBus } from "../../../stores/message-v2/bus"
33
import { clearSessionRenderCache } from "../../message-block"
44
import { getLogger } from "../../../lib/logger"
5-
import { runtimeEnv } from "../../../lib/runtime-env"
65

76
const log = getLogger("session")
87

9-
function getSessionCacheLimit() {
10-
if (runtimeEnv.platform === "mobile") {
11-
return 2
12-
}
13-
14-
if (runtimeEnv.host === "tauri") {
15-
return 3
16-
}
17-
18-
if (typeof navigator !== "undefined") {
19-
const deviceMemory = (navigator as Navigator & { deviceMemory?: number }).deviceMemory
20-
if (typeof deviceMemory === "number" && deviceMemory <= 4) {
21-
return 3
22-
}
23-
}
24-
25-
return 5
26-
}
27-
28-
const SESSION_CACHE_LIMIT = getSessionCacheLimit()
8+
const SESSION_CACHE_LIMIT = 5
299

3010
type SessionCacheOptions = {
3111
instanceId: Accessor<string>

0 commit comments

Comments
 (0)