Add encryption store

cgen-1be2cc6b363c4a0f8af49da883260faf

Author: builderio-bot

frontend/src/App.css

@@ -0,0 +1,24 @@
+/* Base app styles */
+:root {
+  --cosmic-blue: #0B1426;
+  --starlight: #E6F3FF;
+  --gold: #FFD700;
+}
+
+.app { min-height: 100vh; background: var(--cosmic-blue); color: var(--starlight); }
+
+/* Layout */
+.layout-shell { display: flex; min-height: 100vh; flex-direction: column; }
+.layout-header { padding: 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
+.layout-title { margin: 0; font-size: 20px; color: var(--gold); }
+.layout-content { flex: 1; padding: 24px; }
+
+/* Pages */
+.page { max-width: 960px; margin: 0 auto; padding: 24px; }
+.page-title { margin: 0 0 8px; font-size: 28px; color: var(--gold); }
+.page-subtitle { margin: 0; opacity: .9; }
+
+/* Spinner */
+.spinner { display: inline-block; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--starlight); border-radius: 50%; animation: spin 1s linear infinite; }
+.spinner-mystical { border-top-color: var(--gold); }
+@keyframes spin { to { transform: rotate(360deg); } }

frontend/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+interface Props {
+  fallback: React.ComponentType<{ error: Error }>
+  children: React.ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error: Error | null
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error('ErrorBoundary caught error', error, info)
+  }
+
+  render() {
+    const { fallback: Fallback, children } = this.props
+    if (this.state.hasError && this.state.error) {
+      return <Fallback error={this.state.error} />
+    }
+    return children
+  }
+}
+
+export default ErrorBoundary

frontend/src/components/Layout/Layout.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+interface Props {
+  children: React.ReactNode
+}
+
+const Layout: React.FC<Props> = ({ children }) => {
+  return (
+    <div className="layout-shell">
+      <header className="layout-header">
+        <h1 className="layout-title">The Turning Wheel</h1>
+      </header>
+      <main className="layout-content">
+        {children}
+      </main>
+    </div>
+  )
+}
+
+export default Layout

frontend/src/components/UI/LoadingSpinner.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+interface Props {
+  size?: 'small' | 'medium' | 'large'
+  variant?: 'default' | 'mystical'
+}
+
+const sizeMap: Record<NonNullable<Props['size']>, number> = {
+  small: 20,
+  medium: 32,
+  large: 48
+}
+
+const LoadingSpinner: React.FC<Props> = ({ size = 'medium', variant = 'default' }) => {
+  const px = sizeMap[size]
+  const classes = `spinner ${variant === 'mystical' ? 'spinner-mystical' : ''}`
+  return <span className={classes} style={{ width: px, height: px }} aria-label="loading" />
+}
+
+export default LoadingSpinner

frontend/src/hooks/useInitializeApp.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+export function useInitializeApp() {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    let mounted = true
+    const init = async () => {
+      try {
+        // initialization placeholder completed synchronously for now
+        if (!mounted) return
+        setIsLoading(false)
+      } catch (e) {
+        if (!mounted) return
+        setError(e as Error)
+        setIsLoading(false)
+      }
+    }
+    init()
+    return () => {
+      mounted = false
+    }
+  }, [])
+
+  return { isLoading, error }
+}

frontend/src/pages/AnalyticsPage.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const AnalyticsPage: React.FC = () => {
+  return (
+    <section className="page analytics-page">
+      <h2 className="page-title">Analytics</h2>
+      <p className="page-subtitle">Insights and data visualizations.</p>
+    </section>
+  )
+}
+
+export default AnalyticsPage

frontend/src/pages/AuthPage.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const AuthPage: React.FC = () => {
+  return (
+    <section className="page auth-page">
+      <h2 className="page-title">Sign In</h2>
+      <p className="page-subtitle">Authentication UI coming soon.</p>
+    </section>
+  )
+}
+
+export default AuthPage

frontend/src/pages/DashboardPage.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const DashboardPage: React.FC = () => {
+  return (
+    <section className="page dashboard-page">
+      <h2 className="page-title">Dashboard</h2>
+      <p className="page-subtitle">Your progress and insights appear here.</p>
+    </section>
+  )
+}
+
+export default DashboardPage

frontend/src/pages/JourneyPage.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const JourneyPage: React.FC = () => {
+  return (
+    <section className="page journey-page">
+      <h2 className="page-title">Your Journey</h2>
+      <p className="page-subtitle">Track your steps through the wheel.</p>
+    </section>
+  )
+}
+
+export default JourneyPage

frontend/src/pages/LandingPage.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const LandingPage: React.FC = () => {
+  return (
+    <section className="page landing-page">
+      <h2 className="page-title">Welcome to The Turning Wheel</h2>
+      <p className="page-subtitle">Begin your journey by signing in.</p>
+    </section>
+  )
+}
+
+export default LandingPage