fai/chain-studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(studio): award-tier visual polish

Browse source 
Brightness-aware elevation tokens (FaiElevation low/medium) applied
to cards, sheets and the sidebar active item; gentle hover-lift on
Store + Doc cards; a longer, eased sidebar expand using the
under-used FaiMotion.slow; and a branded empty state carrying the
F∆I delta mark with warmer spacing. Subtle, Linear/Raycast-style —
both light and dark themes tuned.

Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
This commit is contained in:
flemming-it 2026-06-11 23:52:31 +02:00
parent 5313266cc4
commit f0a944dce7
4 changed files with 261 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

59
lib/widgets/fai_empty_state.dart
View file

@ -1,9 +1,17 @@
// FaiEmptyState — gracious empty / loading / error placeholder.
// Replaces "(no data)" strings with one tone, one icon, one tip.
//
// The blank surface is where an app most easily feels unfinished,
// so this state is deliberately *designed*: the F∆I delta (∆)
// sits as a soft watermark behind the icon badge, the badge
// carries a whisper of elevation, and the copy breathes. The
// result reads "nothing here yet, on purpose" rather than
// "something is broken".
import 'package:flutter/material.dart';
import '../theme/tokens.dart';
import 'fai_delta_mark.dart';
class FaiEmptyState extends StatelessWidget {
final IconData icon;
@ -30,40 +38,67 @@ class FaiEmptyState extends StatelessWidget {
final color = iconColor ?? theme.colorScheme.onSurfaceVariant;
return Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 420),
constraints: const BoxConstraints(maxWidth: 440),
child: Padding(
padding: const EdgeInsets.all(FaiSpace.xxl),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 56,
height: 56,
decoration: BoxDecoration(
color: color.withValues(alpha: 0.1),
shape: BoxShape.circle,
// Brand hero: an oversized, low-opacity ∆ watermark
// anchors the composition while the contextual icon
// badge sits crisply on top — so every empty surface
// still carries the F∆I signature, never a bare icon.
SizedBox(
width: 112,
height: 112,
child: Stack(
alignment: Alignment.center,
children: [
Opacity(
opacity: 0.10,
child: FaiDeltaMark(
color: theme.colorScheme.primary,
size: 112,
),
),
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: theme.colorScheme.surfaceContainerHigh,
shape: BoxShape.circle,
border: Border.all(
color: color.withValues(alpha: 0.18),
),
boxShadow: FaiElevation.low(theme.brightness),
),
child: Icon(icon, size: 26, color: color),
),
],
),
child: Icon(icon, size: 24, color: color),
),
const SizedBox(height: FaiSpace.lg),
const SizedBox(height: FaiSpace.xl),
Text(
title,
textAlign: TextAlign.center,
style: theme.textTheme.titleMedium,
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w600,
),
),
if (hint != null) ...[
const SizedBox(height: FaiSpace.sm),
Text(
hint!,
textAlign: TextAlign.center,
style: theme.textTheme.bodySmall?.copyWith(
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
height: 1.5,
),
),
],
if (action != null) ...[
const SizedBox(height: FaiSpace.lg),
const SizedBox(height: FaiSpace.xl),
action!,
],
],