Function VaultStep

packages/app-core/src/components/OnboardingWizard.tsx:701–771

({
  isServerVaultSetup,
  canConnectRemote,
  openVaultPicker,
  connectRemoteWorkspace,
  workspaceSetupError,
  hasVault,
  onBack,
  onNext
}: {
  isServerVaultSetup: boolean
  canConnectRemote: boolean
  openVaultPicker: () => Promise<void>
  connectRemoteWorkspace: () => Promise<void>
  workspaceSetupError: string | null
  hasVault: boolean
  onBack: () => void
  onNext: () => void
})

}

function VaultStep({
  isServerVaultSetup,
  canConnectRemote,
  openVaultPicker,
  connectRemoteWorkspace,
  workspaceSetupError,
  hasVault,
  onBack,
  onNext
}: {
  isServerVaultSetup: boolean
  canConnectRemote: boolean
  openVaultPicker: () => Promise<void>
  connectRemoteWorkspace: () => Promise<void>
  workspaceSetupError: string | null
  hasVault: boolean
  onBack: () => void
  onNext: () => void
}): JSX.Element {
  return (
    <div>
      <StepHeading
        eyebrow="Step 3"
        title="Choose a vault"
        subtitle={
          isServerVaultSetup
            ? 'Pick the folder on the server that ZenNotes should treat as your vault.'
            : 'Pick a folder on this machine. ZenNotes stores notes as plain .md files — yours to keep, back up, and sync however you like.'
        }
      />

      <div className="flex flex-col items-start gap-3 sm:flex-row sm:items-center">
        <Button
          variant="primary"
          size="md"
          onClick={() => void openVaultPicker()}
          className="shadow-panel"
        >
          {isServerVaultSetup ? 'Connect to server vault' : 'Choose vault folder'}
        </Button>
        {canConnectRemote && (
          <Button
            variant="secondary"
            size="md"
            onClick={() => void connectRemoteWorkspace()}
            className="shadow-panel"
          >
            Connect to ZenNotes Server
          </Button>
        )}
      </div>

      {hasVault && (
        <div className="mt-4 rounded-xl border border-accent/30 bg-accent/10 px-4 py-3 text-sm text-ink-800">
          Vault connected. Continue to finish setup.
        </div>
      )}