mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 23:01:09 +02:00
Introduces a tiered access control system so apps can be released gradually (founder → alpha → beta → public) without extra infrastructure. Users are gated at the AuthGate level based on their tier vs the app's requiredTier. All apps remain deployed and reachable, but only users with sufficient tier can enter. - Add accessTier enum + column to users schema (default: 'public') - Add tier claim to JWT payload in better-auth config - Add requiredTier field to ManaApp interface + all 25 apps - Add hasAppAccess(), getAccessibleManaApps(), ACCESS_TIER_LABELS - Update AuthGate with tier check + access denied screen - Update getPillAppItems + Home page to filter by user tier - Update all 22 app layouts to pass user tier to PillNav - Add admin API: GET/PUT /api/v1/admin/users/:id/tier - Document access tier system in CLAUDE.md Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| src | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
@manacore/shared-branding
Shared branding components and configuration for the Mana ecosystem.
Features
- AppLogo: SVG logo component for any Mana app
- AppLogoWithName: Logo with app name combination
- ManaIcon: Universal Mana drop icon for credits display
- Branding Config: Centralized colors, names, and taglines
Installation
pnpm add @manacore/shared-branding
Usage
AppLogo
Display an app's logo:
<script lang="ts">
import { AppLogo } from '@manacore/shared-branding';
</script>
<AppLogo app="memoro" size={32} />
<AppLogo app="manacore" size={32} />
<AppLogo app="manadeck" size={32} />
<AppLogo app="maerchenzauber" size={32} />
AppLogoWithName
Display logo with app name (perfect for headers):
<script lang="ts">
import { AppLogoWithName } from '@manacore/shared-branding';
</script>
<AppLogoWithName app="memoro" size={28} />
<AppLogoWithName app="manacore" showName={false} />
ManaIcon
Universal Mana drop icon:
<script lang="ts">
import { ManaIcon } from '@manacore/shared-branding';
</script>
<ManaIcon size={24} color="#4287f5" />
Branding Configuration
Access branding config programmatically:
import { getAppBranding, APP_BRANDING } from '@manacore/shared-branding';
const memoro = getAppBranding('memoro');
console.log(memoro.name); // "Memoro"
console.log(memoro.tagline); // "AI Voice Memos"
console.log(memoro.primaryColor); // "#f8d62b"
App Branding
| App | Name | Primary Color | Tagline |
|---|---|---|---|
memoro |
Memoro | #f8d62b (Gold) | AI Voice Memos |
manacore |
ManaCore | #6366f1 (Indigo) | Central Hub |
manadeck |
ManaDeck | #8b5cf6 (Purple) | AI Flashcards |
maerchenzauber |
Märchenzauber | #ec4899 (Pink) | AI Story Creator |
Props
AppLogo
| Prop | Type | Default | Description |
|---|---|---|---|
app |
AppId |
required | App identifier |
size |
number |
32 |
Size in pixels |
color |
string |
App primary color | Override color |
class |
string |
'' |
Additional CSS classes |
AppLogoWithName
| Prop | Type | Default | Description |
|---|---|---|---|
app |
AppId |
required | App identifier |
size |
number |
28 |
Logo size in pixels |
color |
string |
App primary color | Override color |
showName |
boolean |
true |
Show app name |
nameFontSize |
string |
'1.25rem' |
Name font size |
gap |
string |
'0.5rem' |
Gap between logo and name |
class |
string |
'' |
Additional CSS classes |
ManaIcon
| Prop | Type | Default | Description |
|---|---|---|---|
size |
number |
24 |
Size in pixels |
color |
string |
'#4287f5' |
Icon color |
class |
string |
'' |
Additional CSS classes |
Types
type AppId = 'memoro' | 'manacore' | 'manadeck' | 'maerchenzauber';
interface AppBranding {
id: AppId;
name: string;
tagline: string;
primaryColor: string;
secondaryColor?: string;
logoPath: string;
logoViewBox?: string;
logoStroke?: boolean;
logoStrokeWidth?: number;
}