first commit
This commit is contained in:
Bastian Wagner
38
myteamwallet_frontend_modern/.superdesign/design-system.md
Normal file
38
myteamwallet_frontend_modern/.superdesign/design-system.md
Normal file
@@ -0,0 +1,38 @@
|
||||
# TeamWallet Design System
|
||||
|
||||
TeamWallet is a German mobile-first club cashbox app for amateur sports teams. Members quickly inspect balances and activity; authorized captains and treasurers create and reverse bookings, manage players, penalties and invitations.
|
||||
|
||||
## Visual direction
|
||||
|
||||
- Fresh, friendly and sporty rather than banking-like or corporate.
|
||||
- Angular Material 3 is the component foundation.
|
||||
- Green is the primary/action color; orange is reserved for warm accents and warnings.
|
||||
- Light surfaces, strong contrast, large readable euro balances and generous touch targets.
|
||||
- Roboto only. Do not introduce decorative or serif fonts.
|
||||
- Cards use restrained elevation, rounded Material corners and clear spacing.
|
||||
- Positive, negative and neutral balances must be distinguishable by text/icon as well as color.
|
||||
|
||||
## Layout and interaction
|
||||
|
||||
- Mobile first, usable at 360px width, progressively centered/constrained on larger screens.
|
||||
- Authenticated team pages always retain the existing toolbar and four-tab bottom navigation.
|
||||
- Primary actions are prominent but never obscure content.
|
||||
- Loading uses skeletons or small progress indicators; empty and error states include a clear next action.
|
||||
- Motion is short and functional, following Material defaults; respect reduced-motion preferences.
|
||||
|
||||
## Key pages
|
||||
|
||||
- Login and account recovery
|
||||
- Team selection
|
||||
- Team overview with wallet balance, outstanding player total and recent activity
|
||||
- Members list and member history
|
||||
- Cashbox transaction creation and reversal
|
||||
- More: penalties, invite, profile and logout
|
||||
- Public alias-based team overview and member history
|
||||
|
||||
## Hard constraints
|
||||
|
||||
- Use only Material system colors derived from the existing green/orange M3 theme.
|
||||
- German copy is embedded directly in templates.
|
||||
- Preserve the existing AppShell navigation structure.
|
||||
- No dark mode, i18n layer, NgRx, Bootstrap or custom icon pack.
|
||||
@@ -0,0 +1,3 @@
|
||||
# Shared UI Components
|
||||
|
||||
The application currently has no custom shared UI primitives. It uses Angular Material 21 directly (`MatButton`, `MatCard`, `MatFormField`, `MatInput`, `MatList`, `MatMenu`, `MatToolbar`, `MatIcon`, `MatProgressSpinner`). Feature-specific UI lives beside each standalone component. Reusable primitives such as balance display, empty state, skeleton and confirmation dialog are planned but not implemented yet.
|
||||
@@ -0,0 +1,11 @@
|
||||
# Extractable Components
|
||||
|
||||
## AppShell
|
||||
|
||||
- Source: `src/app/core/layout/shell/`
|
||||
- Category: layout
|
||||
- Description: Authenticated toolbar, team switcher, scrolling content and four-tab bottom navigation.
|
||||
- Extractable props: `teamName`, `activeTab`, `showTeamSwitcher`
|
||||
- Hardcoded: navigation labels, Material icon names, green primary styling
|
||||
|
||||
No custom basic primitives exist yet. Angular Material primitives should remain inline in drafts.
|
||||
80
myteamwallet_frontend_modern/.superdesign/init/layouts.md
Normal file
80
myteamwallet_frontend_modern/.superdesign/init/layouts.md
Normal file
@@ -0,0 +1,80 @@
|
||||
# Shared Layouts
|
||||
|
||||
## App Shell
|
||||
|
||||
Source: `src/app/core/layout/shell/`
|
||||
|
||||
The authenticated team workspace has a green Material toolbar with an optional team-switcher menu, a scrolling content area, and a persistent four-item mobile bottom navigation.
|
||||
|
||||
```html
|
||||
<mat-toolbar class="shell-header">
|
||||
@if (myTeams().length > 1) {
|
||||
<button mat-button [matMenuTriggerFor]="teamMenu" class="shell-team-switcher">
|
||||
<span>{{ currentTeam()?.name ?? 'TeamWallet' }}</span>
|
||||
<mat-icon>arrow_drop_down</mat-icon>
|
||||
</button>
|
||||
<mat-menu #teamMenu="matMenu">
|
||||
@for (team of myTeams(); track team.id) {
|
||||
<button mat-menu-item (click)="switchTeam(team.id)">{{ team.name }}</button>
|
||||
}
|
||||
</mat-menu>
|
||||
} @else {
|
||||
<span>{{ currentTeam()?.name ?? 'TeamWallet' }}</span>
|
||||
}
|
||||
</mat-toolbar>
|
||||
|
||||
<main class="shell-content"><router-outlet /></main>
|
||||
|
||||
<nav class="shell-bottom-nav">
|
||||
<a routerLink="overview" routerLinkActive="active" class="shell-bottom-nav__item"
|
||||
><mat-icon>account_balance_wallet</mat-icon><span>Übersicht</span></a
|
||||
>
|
||||
<a routerLink="members" routerLinkActive="active" class="shell-bottom-nav__item"
|
||||
><mat-icon>groups</mat-icon><span>Mitglieder</span></a
|
||||
>
|
||||
<a routerLink="cashbox" routerLinkActive="active" class="shell-bottom-nav__item"
|
||||
><mat-icon>payments</mat-icon><span>Kasse</span></a
|
||||
>
|
||||
<a routerLink="more" routerLinkActive="active" class="shell-bottom-nav__item"
|
||||
><mat-icon>more_horiz</mat-icon><span>Mehr</span></a
|
||||
>
|
||||
</nav>
|
||||
```
|
||||
|
||||
```scss
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100dvh;
|
||||
}
|
||||
.shell-header {
|
||||
background-color: var(--mat-sys-primary);
|
||||
color: var(--mat-sys-on-primary);
|
||||
}
|
||||
.shell-team-switcher {
|
||||
color: var(--mat-sys-on-primary);
|
||||
}
|
||||
.shell-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.shell-bottom-nav {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--mat-sys-outline-variant);
|
||||
background: var(--mat-sys-surface);
|
||||
}
|
||||
.shell-bottom-nav__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
padding: 0.5rem 0;
|
||||
color: var(--mat-sys-on-surface-variant);
|
||||
text-decoration: none;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.shell-bottom-nav__item.active {
|
||||
color: var(--mat-sys-primary);
|
||||
}
|
||||
```
|
||||
29
myteamwallet_frontend_modern/.superdesign/init/pages.md
Normal file
29
myteamwallet_frontend_modern/.superdesign/init/pages.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# Page Dependency Trees
|
||||
|
||||
## /auth/login
|
||||
|
||||
- `src/app/features/auth/login/login.ts`
|
||||
- `login.html`
|
||||
- `login.scss`
|
||||
- `src/app/core/auth/auth-api.ts`
|
||||
- `src/app/core/auth/auth-store.ts`
|
||||
|
||||
## /team-select
|
||||
|
||||
- `src/app/features/team-select/team-select.ts`
|
||||
- `team-select.html`
|
||||
- `team-select.scss`
|
||||
- `src/app/core/team/my-teams-store.ts`
|
||||
- `src/app/models/player.model.ts`
|
||||
- `src/app/models/team.model.ts`
|
||||
|
||||
## /team/:id/*
|
||||
|
||||
- `src/app/core/layout/shell/shell.ts`
|
||||
- `shell.html`
|
||||
- `shell.scss`
|
||||
- `src/app/core/team/team-store.ts`
|
||||
- `src/app/core/team/my-teams-store.ts`
|
||||
- child page: overview, members, cashbox or more
|
||||
|
||||
The four team feature pages are currently stubs and will reuse the shell plus Angular Material components.
|
||||
14
myteamwallet_frontend_modern/.superdesign/init/routes.md
Normal file
14
myteamwallet_frontend_modern/.superdesign/init/routes.md
Normal file
@@ -0,0 +1,14 @@
|
||||
# Routes
|
||||
|
||||
- `/` → session-dependent redirect
|
||||
- `/auth/login` → `features/auth/login/login.ts`
|
||||
- `/team-select` → `features/team-select/team-select.ts`
|
||||
- `/team/:id/overview` → `features/team/overview/overview.ts`, inside authenticated App Shell
|
||||
- `/team/:id/members` → `features/team/members/members.ts`, inside authenticated App Shell
|
||||
- `/team/:id/cashbox` → `features/team/cashbox/cashbox.ts`, inside authenticated App Shell
|
||||
- `/team/:id/more` → `features/team/more/more.ts`, inside authenticated App Shell
|
||||
- `**` → Not Found
|
||||
|
||||
Planned routes include registration, forgot/reset password, member detail, penalties, invite, and public alias views.
|
||||
|
||||
The full router source of truth is `src/app/app.routes.ts`.
|
||||
41
myteamwallet_frontend_modern/.superdesign/init/theme.md
Normal file
41
myteamwallet_frontend_modern/.superdesign/init/theme.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# Theme
|
||||
|
||||
## Compact token summary
|
||||
|
||||
- Framework: Angular 21 standalone, Angular Material 21 M3
|
||||
- Color: `mat.$green-palette` primary, `mat.$orange-palette` tertiary, light color scheme
|
||||
- Typography: Roboto via Material system typography
|
||||
- Surfaces: `--mat-sys-surface`, `--mat-sys-on-surface`, `--mat-sys-outline-variant`
|
||||
- Actions: `--mat-sys-primary`, `--mat-sys-on-primary`
|
||||
- Errors: `--mat-sys-error`
|
||||
- Density: Material default `0`
|
||||
- Layout: mobile-first, full-height app shell, fixed bottom navigation, 1rem page padding
|
||||
|
||||
## Raw global theme source
|
||||
|
||||
```scss
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
@include mat.theme(
|
||||
(
|
||||
color: (
|
||||
primary: mat.$green-palette,
|
||||
tertiary: mat.$orange-palette,
|
||||
),
|
||||
typography: Roboto,
|
||||
density: 0,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
body {
|
||||
color-scheme: light;
|
||||
background-color: var(--mat-sys-surface);
|
||||
color: var(--mat-sys-on-surface);
|
||||
font: var(--mat-sys-body-medium);
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user