}
/>
diff --git a/packages/app/src/context/settings.tsx b/packages/app/src/context/settings.tsx
index a4e01d53a..84288d31a 100644
--- a/packages/app/src/context/settings.tsx
+++ b/packages/app/src/context/settings.tsx
@@ -33,6 +33,7 @@ export interface Settings {
editToolPartsExpanded: boolean
showSessionProgressBar: boolean
showCustomAgents: boolean
+ newLayoutDesigns?: boolean
}
updates: {
startup: boolean
@@ -54,6 +55,7 @@ export interface Settings {
export const monoDefault = "System Mono"
export const sansDefault = "System Sans"
export const terminalDefault = "JetBrainsMono Nerd Font Mono"
+export const newLayoutDesignsDefault = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
const monoFallback =
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
@@ -242,6 +244,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
setShowCustomAgents(value: boolean) {
setStore("general", "showCustomAgents", value)
},
+ newLayoutDesigns: withFallback(() => store.general?.newLayoutDesigns, newLayoutDesignsDefault),
+ setNewLayoutDesigns(value: boolean) {
+ setStore("general", "newLayoutDesigns", value)
+ },
},
updates: {
startup: withFallback(() => store.updates?.startup, defaultSettings.updates.startup),
diff --git a/packages/app/src/i18n/en.ts b/packages/app/src/i18n/en.ts
index f58257b07..29f662f73 100644
--- a/packages/app/src/i18n/en.ts
+++ b/packages/app/src/i18n/en.ts
@@ -791,6 +791,8 @@ export const dict = {
"settings.general.row.showSessionProgressBar.title": "Show session progress bar",
"settings.general.row.showSessionProgressBar.description":
"Display the animated progress bar at the top of the session when the agent is working",
+ "settings.general.row.newLayoutDesigns.title": "New layout and designs",
+ "settings.general.row.newLayoutDesigns.description": "Enable the redesigned layout, home, composer, and session UI",
"settings.general.row.pinchZoom.title": "Pinch to zoom",
"settings.general.row.pinchZoom.description": "Allow trackpad pinch and Ctrl-scroll gestures to zoom",
diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx
index 2997efa56..8e31ac391 100644
--- a/packages/app/src/pages/home.tsx
+++ b/packages/app/src/pages/home.tsx
@@ -31,8 +31,8 @@ import { messageAgentColor } from "@/utils/agent"
import { sessionPermissionRequest } from "@/pages/session/composer/session-request-tree"
import { ServerHealthIndicator } from "@/components/server/server-row"
import { useServers } from "@/context/servers"
+import { useSettings } from "@/context/settings"
-const USE_HOME_DESIGN = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
const HOME_SESSION_LIMIT = 15
const HOME_ROW =
"flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] border-0 bg-transparent text-left text-v2-text-text-muted transition-colors duration-[120ms] ease-in-out hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
@@ -52,8 +52,12 @@ type HomeSessionGroup = {
}
export default function Home() {
- if (USE_HOME_DESIGN) return
- return
+ const settings = useSettings()
+ return (
+
}>
+
+
+ )
}
function HomeDesign() {
@@ -68,13 +72,11 @@ function HomeDesign() {
const [state, setState] = createStore({ search: "", project: undefined as string | undefined })
const projects = createMemo(() => layout.projects.list())
- const selectedProject = createMemo(
- () => projects().find((project) => project.worktree === state.project) ?? projects()[0],
- )
+ const selectedProject = createMemo(() => projects().find((project) => project.worktree === state.project))
const directories = (project: LocalProject) => [project.worktree, ...(project.sandboxes ?? [])]
const projectDirectories = createMemo(() => {
const project = selectedProject()
- if (!project) return []
+ if (!project) return [...projects().flatMap((project) => directories(project))]
return directories(project)
})
const search = createMemo(() => state.search.trim())
@@ -89,8 +91,8 @@ function HomeDesign() {
const projectByID = createMemo(
() => new Map(projects().flatMap((project) => (project.id ? [[project.id, project] as const] : []))),
)
- const records = createMemo(() =>
- [
+ const records = createMemo(() => {
+ return [
...new Map(
projectDirectories()
.flatMap((directory) => sortedRootSessions(sync.child(directory, { bootstrap: false })[0], Date.now()))
@@ -112,8 +114,8 @@ function HomeDesign() {
if (!value) return true
return `${record.session.title} ${record.projectName}`.toLowerCase().includes(value)
})
- .slice(0, HOME_SESSION_LIMIT),
- )
+ .slice(0, HOME_SESSION_LIMIT)
+ })
const groups = createMemo(() => groupSessions(records(), language))
function selectProject(directory: string) {
@@ -220,7 +222,7 @@ function HomeDesign() {
aria-label={language.t("sidebar.project.recentSessions")}
>
0}
fallback={
layout.projects.list())
return (
-