feat(desktop): three-pane shell with sidebar rail, menus and title bar

CLAUDE.md

@@ -89,6 +89,8 @@ The feature plugin automatically includes `:libs:logging`, `:ui:core`, `:ui:comp
 
 A code change is done when the touched modules' unit tests pass and `./gradlew :apps:flipcash:app:compileDebugKotlin` succeeds.
 
+For a layout or motion change in `apps/desktop`, also render `./gradlew :apps:desktop:snapshot -Pmotion=…` and step the frames before calling it done; stills can't show a transition.
+
 ## Namespaces
 
 - App: `com.flipcash.app.android` (no `applicationIdSuffix` — debug and release share the ID, so installing one replaces the other)

apps/desktop/build.gradle.kts

@@ -5,6 +5,7 @@ plugins {
     alias(libs.plugins.compose.compiler)
     alias(libs.plugins.jetbrains.compose)
     alias(libs.plugins.metro)
+    alias(libs.plugins.kotlin.serialization)
 }
 
 kotlin {
@@ -22,9 +23,15 @@ metro {
 dependencies {
     implementation(compose.desktop.currentOs)
     implementation(libs.jetbrains.compose.material3)
+    implementation(libs.jetbrains.compose.material.icons.extended)
+    implementation(libs.kotlinx.serialization.json)
     implementation(project(":services:opencode"))
     implementation(project(":apps:flipcash:features:balance"))
     implementation(project(":apps:flipcash:core"))
+    implementation(project(":apps:flipcash:core-ui"))
+    implementation(project(":apps:flipcash:card-expand"))
+    implementation(project(":apps:flipcash:shared:common-ui"))
+    implementation(project(":ui:components"))
     implementation(project(":apps:flipcash:shared:transaction-history"))
     implementation(project(":apps:flipcash:shared:tokens"))
     implementation(project(":apps:flipcash:shared:funding"))
@@ -49,10 +56,13 @@ dependencies {
     implementation(libs.coil3)
     implementation(libs.coil3.network)
     implementation(libs.event.bus)
+    implementation(libs.jbr.api)
 
     testImplementation(project(":apps:flipcash:startup-contract"))
     testImplementation(libs.kotlin.test.junit)
     testImplementation(libs.kotlinx.coroutines.test)
+    testImplementation(compose.desktop.uiTestJUnit4)
+    testImplementation(compose.desktop.currentOs)
 }
 
 tasks.withType<Test>().configureEach {
@@ -68,6 +78,11 @@ val devMnemonic = tryReadProperty(rootProject.rootDir, "flipcash.test.mnemonic",
 compose.desktop {
     application {
         mainClass = "com.flipcash.desktop.MainKt"
+        // Names the macOS app menu and Dock item when run from Gradle; a packaged app takes packageName.
+        // -Xdock is a macOS-only JVM flag, so other hosts must not get it.
+        if (System.getProperty("os.name").lowercase().startsWith("mac")) {
+            jvmArgs += listOf("-Xdock:name=Flipcash", "-Dapple.awt.application.name=Flipcash")
+        }
         nativeDistributions {
             targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
             packageName = "Flipcash"
@@ -78,12 +93,15 @@ compose.desktop {
 
 tasks.register<JavaExec>("snapshot") {
     group = "application"
-    description = "Renders the wallet (or, with -Pscreen=link, the link screen) off-screen to a PNG (-Pout=<file>)."
+    description = "Renders a screen off-screen to a PNG: -Pout=<file> -Pscreen=chat|money|you|link -Pwidth=<dp> -Pheight=<dp>, or frames into a directory with -Pmotion=peek|info."
     classpath = sourceSets["main"].runtimeClasspath
     mainClass.set("com.flipcash.desktop.SnapshotMainKt")
     args(
-        providers.gradleProperty("out").getOrElse(layout.buildDirectory.file("wallet.png").get().asFile.path),
-        providers.gradleProperty("screen").getOrElse("wallet"),
+        providers.gradleProperty("out").getOrElse(layout.buildDirectory.file("snapshot.png").get().asFile.path),
+        providers.gradleProperty("screen").getOrElse("chat"),
+        providers.gradleProperty("width").getOrElse("1040"),
+        providers.gradleProperty("height").getOrElse("760"),
+        providers.gradleProperty("motion").getOrElse(""),
     )
 }
 

apps/desktop/src/main/kotlin/com/flipcash/desktop/DesktopApp.kt

@@ -14,16 +14,17 @@ import androidx.compose.ui.Modifier
 import com.flipcash.app.devicelink.DesktopLinkHost
 import com.flipcash.app.devicelink.ui.DesktopLinkScreen
 import com.flipcash.app.theme.FlipcashTheme
+import com.flipcash.desktop.shell.DesktopNavState
 import com.getcode.theme.CodeTheme
 import java.net.Inet4Address
 import java.net.NetworkInterface
 
-/** The wallet when signed in; otherwise the link screen, which stores the phone's seed and signs in. */
+/** The main window when signed in; otherwise the link screen, which stores the phone's seed and signs in. */
 @Composable
-fun DesktopApp(graph: DesktopGraph, signedIn: Boolean) {
+fun DesktopApp(graph: DesktopGraph, signedIn: Boolean, nav: DesktopNavState = remember { DesktopNavState() }) {
     var linked by remember { mutableStateOf(signedIn) }
     if (linked) {
-        DesktopWalletContent(graph)
+        DesktopMainContent(graph, nav = nav)
     } else {
         DesktopLinkContent(graph, onSignedIn = { linked = true })
     }

apps/desktop/src/main/kotlin/com/flipcash/desktop/DesktopMainContent.kt

@@ -0,0 +1,102 @@
+package com.flipcash.desktop
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import com.flipcash.app.analytics.LocalAnalytics
+import com.flipcash.app.core.tokens.TokenPurpose
+import com.flipcash.app.theme.FlipcashTheme
+import com.flipcash.app.tokens.ui.SelectTokenViewModel
+import com.flipcash.desktop.shell.ChatListPlaceholder
+import com.flipcash.desktop.shell.ContextContent
+import com.flipcash.desktop.shell.ContextPane
+import com.flipcash.desktop.shell.ConversationPlaceholder
+import com.flipcash.desktop.shell.DesktopNavState
+import com.flipcash.desktop.shell.DesktopShell
+import com.flipcash.desktop.shell.RailFooter
+import com.flipcash.desktop.shell.SidebarFooter
+import com.flipcash.desktop.shell.WalletPane
+import com.flipcash.shared.common.ui.ContactAvatar
+import com.getcode.opencode.compose.LocalExchange
+import com.getcode.theme.CodeTheme
+import com.getcode.util.resources.LocalResources
+import com.getcode.utils.network.LocalNetworkObserver
+
+/**
+ * The signed-in window, with the locals and window background that Android's app root provides
+ * (`App.kt` paints [CodeTheme.colors.background] behind every screen). The graph doesn't scope view
+ * models, so each read of [DesktopGraph.walletViewModel] builds a new one; they're held here.
+ * [initialContext] opens the context pane on first composition, for snapshots.
+ */
+@Composable
+fun DesktopMainContent(
+    graph: DesktopGraph,
+    initialContext: ContextContent? = null,
+    onSettings: () -> Unit = {},
+    nav: DesktopNavState = remember { DesktopNavState().apply { context = initialContext } },
+) {
+    val walletViewModel = remember { graph.walletViewModel }
+    val tokenViewModel = remember { graph.selectTokenViewModel }
+    LaunchedEffect(tokenViewModel) {
+        tokenViewModel.dispatchEvent(SelectTokenViewModel.Event.OnPurposeChanged(TokenPurpose.Balance))
+    }
+    val user by graph.userManager.state.collectAsState()
+    val displayName = user.userProfile?.displayName.orEmpty()
+    val tokenState by tokenViewModel.stateFlow.collectAsState()
+    // The same total the wallet header shows.
+    val balance = tokenState.totalBalance?.nativeAmount?.formatted().orEmpty()
+    FlipcashTheme {
+        CompositionLocalProvider(
+            LocalExchange provides graph.exchange,
+            LocalResources provides graph.resources,
+            LocalNetworkObserver provides graph.networkObserver,
+            LocalAnalytics provides graph.analytics,
+        ) {
+            Box(Modifier.fillMaxSize().background(CodeTheme.colors.background)) {
+                DesktopShell(
+                    nav = nav,
+                    sidebar = { m -> ChatListPlaceholder(onOpenChat = nav::openChat, modifier = m) },
+                    main = { m -> ConversationPlaceholder(m) },
+                    context = { content, m ->
+                        ContextPane(
+                            content = content,
+                            nav = nav,
+                            wallet = { wm -> WalletPane(nav, walletViewModel, tokenViewModel, wm) },
+                            modifier = m,
+                        )
+                    },
+                    railFooter = { m ->
+                        RailFooter(
+                            balance = balance,
+                            onYou = nav::openYou,
+                            onWallet = nav::openWallet,
+                            onSettings = onSettings,
+                            modifier = m,
+                            avatar = { am -> ContactAvatar(photoUri = null, displayName = displayName, modifier = am) },
+                        )
+                    },
+                    footer = { m ->
+                        SidebarFooter(
+                            displayName = displayName,
+                            balance = balance,
+                            onYou = nav::openYou,
+                            onWallet = nav::openWallet,
+                            onSettings = onSettings,
+                            modifier = m,
+                            // Initials on the avatar gradient. The photo needs the blob URL resolver the
+                            // Android app provides, which desktop doesn't have yet.
+                            avatar = { am -> ContactAvatar(photoUri = null, displayName = displayName, modifier = am) },
+                        )
+                    },
+                )
+            }
+        }
+    }
+}