feat(studio): channel pill in sidebar + Featured strip in Store (v0.20.0)
Sidebar: - New active-channel pill below the connection pill, color-coded so production deployments look visibly different from local-dev. Click opens Settings; tooltip explains the channel taxonomy. Polled in lockstep with the health probe so it tracks CLI-driven `fai channel switch`. Store: - Featured strip above the main grid renders editorial picks as bigger hero tiles with a subtle gradient backdrop, version + status pills, and a one-click Install. Hidden the moment the operator types in the search box or picks any filter — the result list is the answer they want, not editorial chrome. StoreItem now carries the `featured` flag so the page can filter without an extra round-trip. Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
This commit is contained in:
flemming-it
parent
04cc12bc54
commit
26691b7471
5 changed files with 341 additions and 9 deletions
|
|
@ -198,12 +198,39 @@ class _StorePageState extends State<StorePage> {
|
|||
),
|
||||
);
|
||||
}
|
||||
return _StoreGrid(
|
||||
items: items,
|
||||
locale: _locale,
|
||||
installedVersions: _installedVersions,
|
||||
onTap: _openDetail,
|
||||
onInstall: _install,
|
||||
// Featured strip is only useful in the
|
||||
// browse-the-whole-thing case. Once the
|
||||
// operator has typed a query or picked a
|
||||
// filter, the result list itself is the
|
||||
// answer they want — featured chrome would
|
||||
// just push it down.
|
||||
final showFeatured = _queryCtrl.text.trim().isEmpty &&
|
||||
_category.isEmpty &&
|
||||
_status.isEmpty &&
|
||||
!_installedOnly &&
|
||||
items.any((e) => e.featured);
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (showFeatured) ...[
|
||||
_FeaturedStrip(
|
||||
items: items.where((e) => e.featured).toList(),
|
||||
locale: _locale,
|
||||
onTap: _openDetail,
|
||||
onInstall: _install,
|
||||
),
|
||||
const SizedBox(height: FaiSpace.lg),
|
||||
],
|
||||
Expanded(
|
||||
child: _StoreGrid(
|
||||
items: items,
|
||||
locale: _locale,
|
||||
installedVersions: _installedVersions,
|
||||
onTap: _openDetail,
|
||||
onInstall: _install,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
|
|
@ -458,6 +485,196 @@ class _StoreGrid extends StatelessWidget {
|
|||
}
|
||||
}
|
||||
|
||||
/// Horizontally-scrolling band of editorial picks, rendered
|
||||
/// only when the operator hasn't filtered the result set.
|
||||
/// Each tile is a hero version of the regular store card —
|
||||
/// bigger icon, gradient backdrop, prominent install button.
|
||||
/// Curated quarterly via the bundled `seed.yaml` `featured:`
|
||||
/// list so the choice can be reviewed in code review.
|
||||
class _FeaturedStrip extends StatelessWidget {
|
||||
final List<StoreItem> items;
|
||||
final String locale;
|
||||
final ValueChanged<StoreItem> onTap;
|
||||
final ValueChanged<StoreItem> onInstall;
|
||||
|
||||
const _FeaturedStrip({
|
||||
required this.items,
|
||||
required this.locale,
|
||||
required this.onTap,
|
||||
required this.onInstall,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(Icons.star, size: 14, color: FaiColors.success),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
'FEATURED',
|
||||
style: theme.textTheme.labelSmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
letterSpacing: 0.6,
|
||||
fontSize: 10,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: FaiSpace.sm),
|
||||
Text(
|
||||
'curated picks · click for details',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: FaiSpace.sm),
|
||||
SizedBox(
|
||||
height: 152,
|
||||
child: ListView.separated(
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemCount: items.length,
|
||||
separatorBuilder: (_, _) => const SizedBox(width: FaiSpace.md),
|
||||
itemBuilder: (context, i) {
|
||||
final item = items[i];
|
||||
return SizedBox(
|
||||
width: 320,
|
||||
child: _FeaturedTile(
|
||||
item: item,
|
||||
locale: locale,
|
||||
onTap: () => onTap(item),
|
||||
onInstall: () => onInstall(item),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _FeaturedTile extends StatelessWidget {
|
||||
final StoreItem item;
|
||||
final String locale;
|
||||
final VoidCallback onTap;
|
||||
final VoidCallback onInstall;
|
||||
|
||||
const _FeaturedTile({
|
||||
required this.item,
|
||||
required this.locale,
|
||||
required this.onTap,
|
||||
required this.onInstall,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final tagline = locale == 'de' && item.taglineDe.isNotEmpty
|
||||
? item.taglineDe
|
||||
: item.taglineEn;
|
||||
final installable = item.status == 'published' || item.status == 'alpha';
|
||||
return Material(
|
||||
color: theme.colorScheme.surfaceContainer,
|
||||
borderRadius: BorderRadius.circular(FaiRadius.md),
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(FaiRadius.md),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(FaiSpace.md),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(FaiRadius.md),
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
theme.colorScheme.primary.withValues(alpha: 0.10),
|
||||
theme.colorScheme.surfaceContainer.withValues(alpha: 0.0),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 20,
|
||||
backgroundColor:
|
||||
theme.colorScheme.primary.withValues(alpha: 0.16),
|
||||
child: Icon(
|
||||
_iconForCategory(item.category),
|
||||
size: 22,
|
||||
color: theme.colorScheme.primary,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: FaiSpace.sm),
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.name,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
Icon(Icons.star, size: 14, color: FaiColors.success),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: FaiSpace.sm),
|
||||
Expanded(
|
||||
child: Text(
|
||||
tagline.isEmpty ? '(no tagline)' : tagline,
|
||||
style: theme.textTheme.bodyMedium,
|
||||
maxLines: 3,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: FaiSpace.sm),
|
||||
Row(
|
||||
children: [
|
||||
if (item.bestVersion.isNotEmpty)
|
||||
FaiPill(
|
||||
label: 'v${item.bestVersion}',
|
||||
tone: FaiPillTone.neutral,
|
||||
monospace: true,
|
||||
),
|
||||
const SizedBox(width: FaiSpace.xs),
|
||||
if (item.status.isNotEmpty)
|
||||
FaiPill(
|
||||
label: item.status,
|
||||
tone: _toneForStatus(item.status),
|
||||
),
|
||||
const Spacer(),
|
||||
if (item.installed)
|
||||
const FaiPill(
|
||||
label: 'installed',
|
||||
tone: FaiPillTone.success,
|
||||
icon: Icons.check,
|
||||
)
|
||||
else if (installable)
|
||||
FilledButton.icon(
|
||||
onPressed: onInstall,
|
||||
icon: const Icon(Icons.download, size: 14),
|
||||
label: const Text('Install'),
|
||||
style: FilledButton.styleFrom(
|
||||
visualDensity: VisualDensity.compact,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _StoreCard extends StatelessWidget {
|
||||
final StoreItem item;
|
||||
final String locale;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue