feat: standardize input styling with tier system, add depth and admin features

- Define 4 input tier CSS classes (input-standard, input-search, input-embedded, input-danger)
  in globals.css, migrating ~50 inputs across ~28 component files to use them
- Add subtle border and inset shadow to solid input tiers for resting-state visibility
- Fix focus ring clipping in settings panel scroll container
- Fix phantom Tailwind tokens (border-border-primary, placeholder-txt-muted)
- Add admin user management panel, storage management, and account deletion utilities
This commit is contained in:
Jannis Braun
2026-03-14 13:49:32 +01:00
parent afbc4b5e31
commit 836f0acef6
45 changed files with 1478 additions and 235 deletions
+27 -2
View File
@@ -36,6 +36,19 @@ Every surface in Backspace falls into one of these tiers:
**Modal backdrops** use `bg-black/50` — light enough for the glass card's blur to show through.
### Input Tiers
Every text input, textarea, and select uses one of these CSS classes (defined in `globals.css`):
| Tier | Class | When to Use | Focus |
|------|-------|-------------|-------|
| Standard | `.input-standard` | Form fields in modals, settings, auth pages | `ring-2` primary |
| Search | `.input-search` | Search bars, filter inputs, compact lookups | `ring-1` primary |
| Embedded | `.input-embedded` | Inside glass containers (chat input, search popover, DM search) | none |
| Danger | `.input-danger` | Destructive confirmations (delete account) | `ring-2` rose |
**Rule:** No resting border — the sunken `surface-input` background provides differentiation. Override padding/size with utility classes when needed (e.g. `input-standard w-full py-2.5` for taller auth inputs).
## MISSION
Maintain and extend Backspace as a complete, production-quality application. The core application is fully built and deployed across multiple instances with federation support. Every change must uphold the same standard: no stubs, no TODOs, no shortcuts. A user must always be able to `docker compose up` and have a fully working chat platform.
@@ -112,6 +125,7 @@ Backspace/
│ │ │ ├── seed.ts
│ │ │ └── migrate.ts
│ │ ├── routes/
│ │ │ ├── admin.ts
│ │ │ ├── auth.ts
│ │ │ ├── users.ts
│ │ │ ├── spaces.ts
@@ -134,7 +148,8 @@ Backspace/
│ │ ├── snowflake.ts
│ │ ├── permissions.ts
│ │ ├── sanitize.ts
│ │ ── fileCleanup.ts
│ │ ── fileCleanup.ts
│ │ └── storageJanitor.ts
│ ├── web/
│ │ ├── package.json
│ │ ├── tsconfig.json
@@ -252,7 +267,8 @@ Backspace/
│ │ │ │ │ └── BansPanel.tsx
│ │ │ │ └── instanceSettingsPanels/
│ │ │ │ ├── GeneralPanel.tsx
│ │ │ │ ── StreamingPanel.tsx
│ │ │ │ ── StreamingPanel.tsx
│ │ │ │ └── StoragePanel.tsx
│ │ │ └── ui/
│ │ │ ├── Avatar.tsx
│ │ │ ├── Modal.tsx
@@ -650,6 +666,15 @@ PATCH /api/settings/streaming (auth, admin) { maxBitrateKbps?, ... } → {
GET /api/settings/instance (auth, admin) → { instanceName, registrationOpen, discoveryEnabled }
PATCH /api/settings/instance (auth, admin) { instanceName?, registrationOpen?, discoveryEnabled? } → { settings }
# Admin
GET /api/admin/storage/stats (auth, admin) → StorageStats
GET /api/admin/storage/orphans (auth, admin) → { orphans: OrphanedFile[] }
POST /api/admin/storage/cleanup (auth, admin) { dryRun?: boolean } → CleanupResult
GET /api/admin/users (auth, admin) ?q=&page=&pageSize=&showDeleted= → AdminUserListResponse
PATCH /api/admin/users/:id/role (auth, admin) { isAdmin: boolean } → AdminUser
POST /api/admin/users/:id/reset-password (auth, admin) → { temporaryPassword }
DELETE /api/admin/users/:id (auth, admin) → { success }
# Utilities
GET /api/utils/metadata (auth) ?url= → { title?, description?, image?, siteName? }
GET /api/health (public) → { status: 'ok', timestamp }