feat: implement three-mode UI system (Easy / Pro / Chat)
Add switchable UI modes with conditional rendering: - Easy mode: goal-based interface with 7 guided workflows - Pro mode: current technical interface preserved with Quick Start Goals - Chat mode: AIUI placeholder for future integration New components: ModeSwitcher, EasyHome, GoalDetail wizard, Chat placeholder New stores: uiMode (mode persistence), goals (progress tracking) New data: goal definitions catalog, helpTree goals section Modified: Dashboard (reactive nav), Home (mode dispatcher), Settings (mode picker), Router (goal/chat routes), Spotlight (goal search integration) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
262
neode-ui/src/data/goals.ts
Normal file
262
neode-ui/src/data/goals.ts
Normal file
@@ -0,0 +1,262 @@
|
||||
import type { GoalDefinition } from '@/types/goals'
|
||||
|
||||
export const GOALS: GoalDefinition[] = [
|
||||
{
|
||||
id: 'open-a-shop',
|
||||
title: 'Open a Shop',
|
||||
subtitle: 'Accept Bitcoin payments with your own online store',
|
||||
icon: 'shop',
|
||||
category: 'commerce',
|
||||
requiredApps: ['bitcoin-knots', 'lnd', 'btcpay-server'],
|
||||
steps: [
|
||||
{
|
||||
id: 'install-bitcoin',
|
||||
title: 'Install Bitcoin Node',
|
||||
description: 'Bitcoin Knots validates transactions and maintains the blockchain on your hardware. This is the foundation of your sovereign payment stack.',
|
||||
appId: 'bitcoin-knots',
|
||||
action: 'install',
|
||||
isAutomatic: true,
|
||||
},
|
||||
{
|
||||
id: 'install-lnd',
|
||||
title: 'Install Lightning Network',
|
||||
description: 'LND enables instant, low-fee Bitcoin payments through payment channels. Your customers can pay in seconds.',
|
||||
appId: 'lnd',
|
||||
action: 'install',
|
||||
isAutomatic: true,
|
||||
},
|
||||
{
|
||||
id: 'install-btcpay',
|
||||
title: 'Install BTCPay Server',
|
||||
description: 'BTCPay Server is your self-hosted payment processor. Create invoices, manage your store, and accept payments — all without middlemen.',
|
||||
appId: 'btcpay-server',
|
||||
action: 'install',
|
||||
isAutomatic: true,
|
||||
},
|
||||
{
|
||||
id: 'configure-store',
|
||||
title: 'Set Up Your Store',
|
||||
description: 'Create your store, set your currency, and customize your payment page. BTCPay will open so you can configure everything.',
|
||||
action: 'configure',
|
||||
isAutomatic: false,
|
||||
},
|
||||
],
|
||||
estimatedTime: '~45 min + sync time',
|
||||
difficulty: 'beginner',
|
||||
},
|
||||
{
|
||||
id: 'accept-payments',
|
||||
title: 'Accept Payments',
|
||||
subtitle: 'Receive Bitcoin and Lightning payments directly',
|
||||
icon: 'payments',
|
||||
category: 'payments',
|
||||
requiredApps: ['bitcoin-knots', 'lnd'],
|
||||
steps: [
|
||||
{
|
||||
id: 'install-bitcoin',
|
||||
title: 'Install Bitcoin Node',
|
||||
description: 'Your own Bitcoin node verifies every transaction independently. No trust required.',
|
||||
appId: 'bitcoin-knots',
|
||||
action: 'install',
|
||||
isAutomatic: true,
|
||||
},
|
||||
{
|
||||
id: 'install-lnd',
|
||||
title: 'Install Lightning Network',
|
||||
description: 'Lightning enables instant payments with tiny fees. Perfect for everyday transactions.',
|
||||
appId: 'lnd',
|
||||
action: 'install',
|
||||
isAutomatic: true,
|
||||
},
|
||||
{
|
||||
id: 'open-channel',
|
||||
title: 'Open a Lightning Channel',
|
||||
description: 'Open your first payment channel to start sending and receiving Lightning payments. LND will guide you through it.',
|
||||
action: 'configure',
|
||||
isAutomatic: false,
|
||||
},
|
||||
],
|
||||
estimatedTime: '~30 min + sync time',
|
||||
difficulty: 'beginner',
|
||||
},
|
||||
{
|
||||
id: 'store-photos',
|
||||
title: 'Store My Photos',
|
||||
subtitle: 'Private photo backup and gallery on your own hardware',
|
||||
icon: 'photos',
|
||||
category: 'storage',
|
||||
requiredApps: ['immich'],
|
||||
steps: [
|
||||
{
|
||||
id: 'install-immich',
|
||||
title: 'Install Immich',
|
||||
description: 'Immich is a self-hosted photo and video management solution. It looks and feels like Google Photos, but your data stays on your server.',
|
||||
appId: 'immich',
|
||||
action: 'install',
|
||||
isAutomatic: true,
|
||||
},
|
||||
{
|
||||
id: 'configure-immich',
|
||||
title: 'Create Your Account',
|
||||
description: 'Set up your Immich account and configure your photo library. Quick and simple.',
|
||||
action: 'configure',
|
||||
isAutomatic: false,
|
||||
},
|
||||
{
|
||||
id: 'mobile-sync',
|
||||
title: 'Connect Your Phone',
|
||||
description: 'Download the Immich app on your phone and scan the QR code to start automatic photo backup.',
|
||||
action: 'info',
|
||||
isAutomatic: false,
|
||||
},
|
||||
],
|
||||
estimatedTime: '~15 min',
|
||||
difficulty: 'beginner',
|
||||
},
|
||||
{
|
||||
id: 'store-files',
|
||||
title: 'Store My Files',
|
||||
subtitle: 'Personal cloud storage and file sync',
|
||||
icon: 'files',
|
||||
category: 'storage',
|
||||
requiredApps: ['nextcloud'],
|
||||
steps: [
|
||||
{
|
||||
id: 'install-nextcloud',
|
||||
title: 'Install Cloud Storage',
|
||||
description: 'Nextcloud gives you a full cloud storage platform — files, calendars, contacts, and more. Like Dropbox, but sovereign.',
|
||||
appId: 'nextcloud',
|
||||
action: 'install',
|
||||
isAutomatic: true,
|
||||
},
|
||||
{
|
||||
id: 'configure-nextcloud',
|
||||
title: 'Set Up Your Cloud',
|
||||
description: 'Create your admin account and configure storage. Nextcloud will open for you to complete setup.',
|
||||
action: 'configure',
|
||||
isAutomatic: false,
|
||||
},
|
||||
{
|
||||
id: 'sync-setup',
|
||||
title: 'Sync Your Devices',
|
||||
description: 'Install the Nextcloud app on your phone and computer to keep your files in sync across all devices.',
|
||||
action: 'info',
|
||||
isAutomatic: false,
|
||||
},
|
||||
],
|
||||
estimatedTime: '~20 min',
|
||||
difficulty: 'beginner',
|
||||
},
|
||||
{
|
||||
id: 'run-lightning-node',
|
||||
title: 'Run a Lightning Node',
|
||||
subtitle: 'Route payments and earn sats on the Lightning Network',
|
||||
icon: 'lightning',
|
||||
category: 'network',
|
||||
requiredApps: ['bitcoin-knots', 'lnd'],
|
||||
steps: [
|
||||
{
|
||||
id: 'install-bitcoin',
|
||||
title: 'Install Bitcoin Node',
|
||||
description: 'The Bitcoin blockchain is the settlement layer. Your node needs to sync the full chain before Lightning can start.',
|
||||
appId: 'bitcoin-knots',
|
||||
action: 'install',
|
||||
isAutomatic: true,
|
||||
},
|
||||
{
|
||||
id: 'install-lnd',
|
||||
title: 'Install LND',
|
||||
description: 'LND is a full Lightning Network node. You can route payments for others and earn routing fees.',
|
||||
appId: 'lnd',
|
||||
action: 'install',
|
||||
isAutomatic: true,
|
||||
},
|
||||
{
|
||||
id: 'open-channels',
|
||||
title: 'Open Payment Channels',
|
||||
description: 'Open channels with well-connected nodes to start routing payments. More channels means more routing opportunities.',
|
||||
action: 'configure',
|
||||
isAutomatic: false,
|
||||
},
|
||||
{
|
||||
id: 'verify-routing',
|
||||
title: 'Verify Node is Routing',
|
||||
description: 'Check that your node is visible on the network and ready to route payments.',
|
||||
action: 'verify',
|
||||
isAutomatic: true,
|
||||
},
|
||||
],
|
||||
estimatedTime: '~40 min + sync time',
|
||||
difficulty: 'intermediate',
|
||||
},
|
||||
{
|
||||
id: 'create-identity',
|
||||
title: 'Create My Identity',
|
||||
subtitle: 'Sovereign digital identity with DID and Nostr',
|
||||
icon: 'identity',
|
||||
category: 'identity',
|
||||
requiredApps: [],
|
||||
steps: [
|
||||
{
|
||||
id: 'generate-did',
|
||||
title: 'Generate Your Identity',
|
||||
description: 'Your server creates a cryptographic identity (DID) that you own and control. No company can revoke it.',
|
||||
action: 'verify',
|
||||
isAutomatic: true,
|
||||
},
|
||||
{
|
||||
id: 'setup-nostr',
|
||||
title: 'Set Up Nostr Profile',
|
||||
description: 'Publish your identity to the Nostr network. This lets you sign into Nostr-compatible apps directly from your server.',
|
||||
action: 'configure',
|
||||
isAutomatic: false,
|
||||
},
|
||||
{
|
||||
id: 'export-identity',
|
||||
title: 'Export Your Identity',
|
||||
description: 'Save your identity credentials for backup. This is your portable sovereign identity — take it anywhere.',
|
||||
action: 'info',
|
||||
isAutomatic: false,
|
||||
},
|
||||
],
|
||||
estimatedTime: '~5 min',
|
||||
difficulty: 'beginner',
|
||||
},
|
||||
{
|
||||
id: 'back-up-everything',
|
||||
title: 'Back Up Everything',
|
||||
subtitle: 'Encrypted backup of your entire node',
|
||||
icon: 'backup',
|
||||
category: 'backup',
|
||||
requiredApps: [],
|
||||
steps: [
|
||||
{
|
||||
id: 'create-passphrase',
|
||||
title: 'Create a Passphrase',
|
||||
description: 'Choose a strong passphrase to encrypt your backup. Without this passphrase, nobody can access your data — not even us.',
|
||||
action: 'configure',
|
||||
isAutomatic: false,
|
||||
},
|
||||
{
|
||||
id: 'create-backup',
|
||||
title: 'Create Encrypted Backup',
|
||||
description: 'Your server will create a complete encrypted backup of all your data, keys, and configuration.',
|
||||
action: 'verify',
|
||||
isAutomatic: true,
|
||||
},
|
||||
{
|
||||
id: 'save-backup',
|
||||
title: 'Save Your Backup',
|
||||
description: 'Download your encrypted backup file and store it somewhere safe. Consider keeping a copy on a USB drive and in the cloud.',
|
||||
action: 'info',
|
||||
isAutomatic: false,
|
||||
},
|
||||
],
|
||||
estimatedTime: '~10 min',
|
||||
difficulty: 'beginner',
|
||||
},
|
||||
]
|
||||
|
||||
export function getGoalById(id: string): GoalDefinition | undefined {
|
||||
return GOALS.find((g) => g.id === id)
|
||||
}
|
||||
@@ -16,7 +16,7 @@ export interface SearchableItem {
|
||||
id: string
|
||||
label: string
|
||||
path?: string
|
||||
type: 'navigate' | 'learn' | 'action'
|
||||
type: 'navigate' | 'learn' | 'action' | 'goal'
|
||||
section: string
|
||||
content?: string
|
||||
relatedPath?: string
|
||||
@@ -71,6 +71,19 @@ export const helpTree: HelpSection[] = [
|
||||
{ id: 'backup', label: 'Backup & Recovery', path: '/dashboard/settings' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'goals',
|
||||
label: 'Quick Start Goals',
|
||||
items: [
|
||||
{ id: 'goal-shop', label: 'Open a Shop', path: '/dashboard/goals/open-a-shop' },
|
||||
{ id: 'goal-payments', label: 'Accept Payments', path: '/dashboard/goals/accept-payments' },
|
||||
{ id: 'goal-photos', label: 'Store My Photos', path: '/dashboard/goals/store-photos' },
|
||||
{ id: 'goal-files', label: 'Store My Files', path: '/dashboard/goals/store-files' },
|
||||
{ id: 'goal-lightning', label: 'Run a Lightning Node', path: '/dashboard/goals/run-lightning-node' },
|
||||
{ id: 'goal-identity', label: 'Create My Identity', path: '/dashboard/goals/create-identity' },
|
||||
{ id: 'goal-backup', label: 'Back Up Everything', path: '/dashboard/goals/back-up-everything' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export function flattenForSearch(): SearchableItem[] {
|
||||
@@ -81,7 +94,9 @@ export function flattenForSearch(): SearchableItem[] {
|
||||
? 'navigate'
|
||||
: section.id === 'learn'
|
||||
? 'learn'
|
||||
: 'action'
|
||||
: section.id === 'goals'
|
||||
? 'goal'
|
||||
: 'action'
|
||||
for (const item of section.items) {
|
||||
result.push({
|
||||
id: item.id,
|
||||
|
||||
Reference in New Issue
Block a user