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
@@ -370,7 +370,7 @@ export function DmSearchBar() {
onChange={(e) => { setQuery(e.target.value); setSelectedIndex(0); }}
onKeyDown={handleKeyDown}
placeholder="Search..."
className="flex-1 min-w-0 bg-transparent text-txt-primary placeholder-txt-tertiary/60 text-[13px] font-medium outline-none py-[5px]"
className="input-embedded flex-1 min-w-0 text-[13px] font-medium py-[5px]"
/>
</div>
) : (
@@ -126,7 +126,7 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe
)
) : icon ? (
<img
src={icon.startsWith('http') ? icon : `/api/uploads/${icon}`}
src={icon.startsWith('http') || icon.startsWith('/') ? icon : `/api/uploads/${icon}`}
alt={name}
className="w-full h-full object-cover"
/>
@@ -200,7 +200,7 @@ function MiniSpaceIcon({ space }: { space: TaggedSpace }) {
if (icon) {
return (
<img
src={icon.startsWith('http') ? icon : `/api/uploads/${icon}`}
src={icon.startsWith('http') || icon.startsWith('/') ? icon : `/api/uploads/${icon}`}
alt=""
className="w-full h-full object-cover rounded-[3px]"
/>
@@ -482,7 +482,7 @@ function FolderFlyout({
{isRenaming ? (
<input
autoFocus
className="w-full bg-surface-input text-[11px] font-semibold uppercase tracking-wider text-txt-tertiary rounded px-1.5 py-0.5 outline-none focus:ring-1 focus:ring-accent-mint/40"
className="input-search w-full px-1.5 py-0.5 text-[11px] font-semibold uppercase tracking-wider text-txt-tertiary"
defaultValue={folder.name || ''}
onBlur={(e) => onRename(e.currentTarget.value)}
onKeyDown={(e) => {
@@ -537,7 +537,7 @@ function FolderFlyout({
<div className="w-8 h-8 rounded-[10px] flex-shrink-0 overflow-hidden flex items-center justify-center" style={grad ? { background: grad.gradient } : undefined}>
{icon ? (
<img
src={icon.startsWith('http') ? icon : `/api/uploads/${icon}`}
src={icon.startsWith('http') || icon.startsWith('/') ? icon : `/api/uploads/${icon}`}
alt=""
className="w-full h-full object-cover"
/>