kasy-cli 1.21.8 → 1.22.0

package/templates/firebase/lib/features/home/home_feed.dart

@@ -0,0 +1,289 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/components/kasy_card.dart';
+import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/features/home/home_image_grid.dart';
+
+/// A browseable image category. Selecting one filters the feed below.
+enum HomeCategory { productDesign, background, animated, icons3d, gradients }
+
+class _CategoryData {
+  final String title;
+  final String subtitle;
+
+  /// Thumbnail shown inside the filter card.
+  final String thumbnailId;
+
+  /// Unsplash photo ids returned in the feed for this category.
+  final List<String> photoIds;
+
+  const _CategoryData({
+    required this.title,
+    required this.subtitle,
+    required this.thumbnailId,
+    required this.photoIds,
+  });
+}
+
+const Map<HomeCategory, _CategoryData> _categories = <HomeCategory, _CategoryData>{
+  HomeCategory.productDesign: _CategoryData(
+    title: 'Product Design',
+    subtitle: 'Sleek, abstract objects',
+    thumbnailId: '1556228720-195a672e8a03',
+    photoIds: <String>[
+      '1556228720-195a672e8a03',
+      '1542291026-7eec264c27ff',
+      '1505740420928-5e560c06d30e',
+      '1522338242992-e1a54906a8da',
+      '1523275335684-37898b6baf30',
+      '1572635196237-14b3f281503f',
+      '1526170375885-4d8ecf77b99f',
+      '1560769629-975ec94e6a86',
+      '1491553895911-0055eca6402d',
+      '1525966222134-fcfa99b8ae77',
+      '1484704849700-f032a568e944',
+      '1542219550-37153d387c27',
+    ],
+  ),
+  HomeCategory.background: _CategoryData(
+    title: 'Background',
+    subtitle: 'Dreamy, scenic vibes',
+    thumbnailId: '1501854140801-50d01698950b',
+    photoIds: <String>[
+      '1506905925346-21bda4d32df4',
+      '1469474968028-56623f02e42e',
+      '1441974231531-c6227db76b6e',
+      '1472214103451-9374bd1c798e',
+      '1447752875215-b2761acb3c5d',
+      '1426604966848-d7adac402bff',
+      '1433086966358-54859d0ed716',
+      '1418985991508-e47386d96a71',
+      '1505765050516-f72dcac9c60e',
+      '1454496522488-7a8e488e8606',
+      '1439066615861-d1af74d74000',
+      '1470071459604-3b5ec3a7fe05',
+    ],
+  ),
+  HomeCategory.animated: _CategoryData(
+    title: 'Animated',
+    subtitle: 'Minimalist, soft',
+    thumbnailId: '1502691876148-a84978e59af8',
+    photoIds: <String>[
+      '1541701494587-cb58502866ab',
+      '1559827260-dc66d52bef19',
+      '1462331940025-496dfbfc7564',
+      '1534796636912-3b95b3ab5986',
+      '1518837695005-2083093ee35b',
+      '1502691876148-a84978e59af8',
+      '1574169208507-84376144848b',
+      '1620641788421-7a1c342ea42e',
+      '1550859492-d5da9d8e45f3',
+      '1579546929518-9e396f3cc809',
+      '1614851099175-e5b30eb6f696',
+      '1557672172-298e090bd0f1',
+    ],
+  ),
+  HomeCategory.icons3d: _CategoryData(
+    title: '3D Icons',
+    subtitle: 'Clean, rounded icons',
+    thumbnailId: '1639762681485-074b7f938ba0',
+    photoIds: <String>[
+      '1634986666676-ec8fd927c23d',
+      '1639762681485-074b7f938ba0',
+      '1633899306328-c5e70574aaa2',
+      '1634017839464-5c339ebe3cb4',
+      '1644143379190-08a5f055de1d',
+      '1617791160505-6f00504e3519',
+      '1618005182384-a83a8bd57fbe',
+      '1635776062127-d379bfcba9f8',
+      '1618556450994-a6a128ef0d9d',
+      '1620207418302-439b387441b0',
+      '1604079628040-94301bb21b91',
+      '1557682250-33bd709cbe85',
+    ],
+  ),
+  HomeCategory.gradients: _CategoryData(
+    title: 'Gradients',
+    subtitle: 'Smooth, vivid color',
+    thumbnailId: '1557672172-298e090bd0f1',
+    photoIds: <String>[
+      '1557672172-298e090bd0f1',
+      '1557683316-973673baf926',
+      '1579546929518-9e396f3cc809',
+      '1620207418302-439b387441b0',
+      '1614851099175-e5b30eb6f696',
+      '1550859492-d5da9d8e45f3',
+      '1557682250-33bd709cbe85',
+      '1557682224-5b8590cd9ec5',
+      '1604079628040-94301bb21b91',
+      '1508614999368-9260051292e5',
+      '1554189097-ffe88e998a2b',
+      '1620641788421-7a1c342ea42e',
+    ],
+  ),
+};
+
+// Author / timestamp pools — varied per photo by index so captions feel real
+// without hand-authoring metadata for every image.
+const List<String> _authors = <String>[
+  'Elena Park', 'Marcus Vale', 'Liang Wu', 'Sofia Reis', 'Noah Fields',
+  'Aya Tanaka', 'Hugo Brandt', 'Petra Nilsson', 'Diego Sol', 'Mara Lopez',
+  'Theo Klein', 'Ines Costa', 'Omar Aziz', 'Lena Fox',
+];
+const List<String> _agos = <String>[
+  '1 day ago', '2 days ago', '3 days ago', '5 days ago',
+  '6 days ago', '1 week ago', '2 weeks ago', '4 days ago',
+];
+
+List<HomePhoto> _photosFor(HomeCategory category) {
+  final List<String> ids = _categories[category]!.photoIds;
+  return <HomePhoto>[
+    for (int i = 0; i < ids.length; i++)
+      HomePhoto(
+        id: ids[i],
+        author: _authors[i % _authors.length],
+        ago: _agos[i % _agos.length],
+      ),
+  ];
+}
+
+String _thumbUrl(String id) =>
+    'https://images.unsplash.com/photo-$id?w=160&h=160&fit=crop&q=80&auto=format';
+
+/// Home content: a selectable category filter row over a masonry image feed.
+class HomeFeed extends StatefulWidget {
+  const HomeFeed({super.key});
+
+  @override
+  State<HomeFeed> createState() => _HomeFeedState();
+}
+
+class _HomeFeedState extends State<HomeFeed> {
+  HomeCategory _selected = HomeCategory.productDesign;
+
+  void _select(HomeCategory category) {
+    if (category == _selected) return;
+    KasyHaptics.light(context);
+    setState(() => _selected = category);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: <Widget>[
+          const SizedBox(height: KasySpacing.belowChromeContentGap),
+          _FilterRow(selected: _selected, onSelect: _select),
+          const SizedBox(height: KasySpacing.lg),
+          Padding(
+            // Reserve the floating bar's height (injected as the bottom inset by
+            // the host Scaffold's extendBody) so the last row settles above it.
+            padding: EdgeInsets.fromLTRB(
+              KasySpacing.md,
+              0,
+              KasySpacing.md,
+              KasySpacing.lg + MediaQuery.paddingOf(context).bottom,
+            ),
+            child: HomeImageGrid(photos: _photosFor(_selected)),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _FilterRow extends StatelessWidget {
+  final HomeCategory selected;
+  final ValueChanged<HomeCategory> onSelect;
+
+  const _FilterRow({required this.selected, required this.onSelect});
+
+  @override
+  Widget build(BuildContext context) {
+    const List<HomeCategory> all = HomeCategory.values;
+
+    return SizedBox(
+      height: 111,
+      child: ListView.separated(
+        scrollDirection: Axis.horizontal,
+        padding: const EdgeInsets.symmetric(horizontal: KasySpacing.md),
+        itemCount: all.length,
+        separatorBuilder: (_, _) => const SizedBox(width: KasySpacing.md),
+        itemBuilder: (BuildContext context, int i) => SizedBox(
+          width: 302,
+          child: _FilterCard(
+            category: all[i],
+            selected: all[i] == selected,
+            onTap: () => onSelect(all[i]),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _FilterCard extends StatelessWidget {
+  final HomeCategory category;
+  final bool selected;
+  final VoidCallback onTap;
+
+  const _FilterCard({
+    required this.category,
+    required this.selected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+    final _CategoryData data = _categories[category]!;
+
+    return KasyCard(
+      onTap: onTap,
+      semanticLabel: data.title,
+      variant: selected ? KasyCardVariant.elevated : KasyCardVariant.filled,
+      borderColor: selected ? c.primary : null,
+      padding: const EdgeInsets.all(KasySpacing.md),
+      child: Row(
+        children: <Widget>[
+          ClipRRect(
+            borderRadius: BorderRadius.circular(KasyRadius.lg),
+            child: SizedBox(
+              width: 79,
+              height: 79,
+              child: KasyNetworkImage(url: _thumbUrl(data.thumbnailId)),
+            ),
+          ),
+          const SizedBox(width: KasySpacing.md),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisAlignment: MainAxisAlignment.center,
+              mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                Text(
+                  data.title,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: context.textTheme.titleSmall?.copyWith(
+                    color: selected ? c.primary : c.onSurface,
+                  ),
+                ),
+                const SizedBox(height: KasySpacing.xs),
+                Text(
+                  data.subtitle,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: context.textTheme.bodySmall?.copyWith(
+                    color: c.muted,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/home/home_image_grid.dart

@@ -0,0 +1,355 @@
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/components/kasy_card.dart';
+import 'package:kasy_kit/components/kasy_image_viewer.dart';
+import 'package:kasy_kit/components/kasy_skeleton.dart';
+import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+/// A single image shown in the masonry feed.
+class HomePhoto {
+  final String id;
+  final String author;
+  final String ago;
+
+  const HomePhoto({required this.id, required this.author, required this.ago});
+
+  String get url =>
+      'https://images.unsplash.com/photo-$id?w=600&q=75&fit=crop&auto=format';
+}
+
+/// Network image with a synced shimmer skeleton while loading and a graceful
+/// fallback on error. Adapts to light/dark via [KasySkeleton]'s own palette.
+class KasyNetworkImage extends StatelessWidget {
+  const KasyNetworkImage({super.key, required this.url, this.fit = BoxFit.cover});
+
+  final String url;
+  final BoxFit fit;
+
+  @override
+  Widget build(BuildContext context) {
+    return Image.network(
+      url,
+      fit: fit,
+      gaplessPlayback: true,
+      loadingBuilder: (
+        BuildContext context,
+        Widget child,
+        ImageChunkEvent? progress,
+      ) {
+        if (progress == null) return child;
+        return const _ImageSkeleton();
+      },
+      errorBuilder: (
+        BuildContext context,
+        Object error,
+        StackTrace? stackTrace,
+      ) {
+        return ColoredBox(
+          color: context.colors.surfaceNeutralSoft,
+          child: Icon(KasyIcons.gallery, color: context.colors.muted),
+        );
+      },
+    );
+  }
+}
+
+class _ImageSkeleton extends StatelessWidget {
+  const _ImageSkeleton();
+
+  @override
+  Widget build(BuildContext context) {
+    return const KasySkeletonGroup(
+      child: KasySkeleton(
+        width: double.infinity,
+        height: double.infinity,
+        borderRadius: BorderRadius.zero,
+      ),
+    );
+  }
+}
+
+/// Pinterest-style masonry feed. Tile heights vary by a repeating ratio set and
+/// tiles are balanced across columns by running height. Column count is
+/// responsive: 2 on phones, 3 on tablets, 4 on desktop.
+class HomeImageGrid extends StatelessWidget {
+  const HomeImageGrid({super.key, required this.photos});
+
+  final List<HomePhoto> photos;
+
+  static const double _gap = KasySpacing.smd;
+  static const List<double> _ratios = <double>[
+    0.72, 1.0, 0.8, 1.32, 0.75, 1.0, 0.7, 1.25, 0.85, 1.4,
+  ];
+
+  int _columnsFor(double width) {
+    if (width >= 1024) return 4;
+    if (width >= 600) return 3;
+    return 2;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        final double width = constraints.maxWidth;
+        final int columns = _columnsFor(width);
+        final double columnWidth = (width - _gap * (columns - 1)) / columns;
+
+        final List<List<Widget>> buckets =
+            List<List<Widget>>.generate(columns, (_) => <Widget>[]);
+        final List<double> heights = List<double>.filled(columns, 0);
+
+        for (int i = 0; i < photos.length; i++) {
+          final double ratio = _ratios[i % _ratios.length];
+          int shortest = 0;
+          for (int c = 1; c < columns; c++) {
+            if (heights[c] < heights[shortest]) shortest = c;
+          }
+          if (buckets[shortest].isNotEmpty) {
+            buckets[shortest].add(const SizedBox(height: _gap));
+          }
+          buckets[shortest]
+              .add(_PhotoTile(photo: photos[i], aspectRatio: ratio));
+          heights[shortest] += columnWidth / ratio + _gap;
+        }
+
+        return Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: <Widget>[
+            for (int col = 0; col < columns; col++) ...<Widget>[
+              if (col > 0) const SizedBox(width: _gap),
+              Expanded(child: Column(children: buckets[col])),
+            ],
+          ],
+        );
+      },
+    );
+  }
+}
+
+class _PhotoTile extends StatefulWidget {
+  final HomePhoto photo;
+  final double aspectRatio;
+
+  const _PhotoTile({required this.photo, required this.aspectRatio});
+
+  @override
+  State<_PhotoTile> createState() => _PhotoTileState();
+}
+
+class _PhotoTileState extends State<_PhotoTile> {
+  bool _liked = false;
+
+  void _toggleLike() {
+    KasyHaptics.light(context);
+    setState(() => _liked = !_liked);
+  }
+
+  void _openViewer() {
+    KasyHaptics.light(context);
+    showKasyImageViewer(
+      context,
+      imageUrl: widget.photo.url,
+      heroTag: widget.photo.id,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final HomePhoto photo = widget.photo;
+
+    return KasyCard(
+      padding: EdgeInsets.zero,
+      child: AspectRatio(
+        aspectRatio: widget.aspectRatio,
+        child: Stack(
+          fit: StackFit.expand,
+          children: <Widget>[
+            // Tapping the photo opens the full-screen viewer; the Hero gives a
+            // smooth zoom into and out of it.
+            Positioned.fill(
+              child: GestureDetector(
+                onTap: _openViewer,
+                behavior: HitTestBehavior.opaque,
+                child: Hero(
+                  tag: photo.id,
+                  child: KasyNetworkImage(url: photo.url),
+                ),
+              ),
+            ),
+
+            // Smooth caption scrim — keeps text legible over any photo, in
+            // both light and dark themes.
+            const Positioned(
+              left: 0,
+              right: 0,
+              bottom: 0,
+              child: _CaptionScrim(),
+            ),
+
+            Positioned(
+              left: 0,
+              right: 0,
+              bottom: 0,
+              child: Padding(
+                padding: const EdgeInsets.all(KasySpacing.md),
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.end,
+                  children: <Widget>[
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        mainAxisSize: MainAxisSize.min,
+                        children: <Widget>[
+                          Text(
+                            photo.author,
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis,
+                            style: context.textTheme.titleSmall?.copyWith(
+                              color: context.colors.onSurface,
+                            ),
+                          ),
+                          Text(
+                            photo.ago,
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis,
+                            style: context.textTheme.bodySmall?.copyWith(
+                              color: context.colors.muted,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    const SizedBox(width: KasySpacing.sm),
+                    _LikeButton(liked: _liked, onTap: _toggleLike),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// A smooth caption scrim: one continuous [surface]-tinted gradient that fades
+/// from solid at the bottom to fully transparent at the top — no banding, no
+/// hard edges. Adapts to light/dark via the theme's [surface] colour.
+class _CaptionScrim extends StatelessWidget {
+  const _CaptionScrim();
+
+  static const double _height = 88;
+
+  @override
+  Widget build(BuildContext context) {
+    final Color base = context.colors.surface;
+
+    return Container(
+      height: _height,
+      decoration: BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.bottomCenter,
+          end: Alignment.topCenter,
+          colors: <Color>[
+            base.withValues(alpha: 0.94),
+            base.withValues(alpha: 0.62),
+            base.withValues(alpha: 0.0),
+          ],
+          stops: const <double>[0.0, 0.45, 1.0],
+        ),
+      ),
+    );
+  }
+}
+
+/// Circular glass "like" button. The heart pops (scales with an overshoot) and
+/// turns the theme's danger red when liked; idle state stays neutral.
+class _LikeButton extends StatefulWidget {
+  final bool liked;
+  final VoidCallback onTap;
+
+  const _LikeButton({required this.liked, required this.onTap});
+
+  @override
+  State<_LikeButton> createState() => _LikeButtonState();
+}
+
+class _LikeButtonState extends State<_LikeButton>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+  late final Animation<double> _scale;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 320),
+    );
+    _scale = TweenSequence<double>(<TweenSequenceItem<double>>[
+      TweenSequenceItem<double>(
+        tween: Tween<double>(begin: 1.0, end: 1.35)
+            .chain(CurveTween(curve: Curves.easeOut)),
+        weight: 40,
+      ),
+      TweenSequenceItem<double>(
+        tween: Tween<double>(begin: 1.35, end: 1.0)
+            .chain(CurveTween(curve: Curves.elasticOut)),
+        weight: 60,
+      ),
+    ]).animate(_controller);
+  }
+
+  @override
+  void didUpdateWidget(_LikeButton old) {
+    super.didUpdateWidget(old);
+    // Pop only when transitioning into the liked state.
+    if (widget.liked && !old.liked) {
+      _controller.forward(from: 0);
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final bool dark = context.isDark;
+    final Color heart =
+        widget.liked ? context.colors.danger : context.colors.primary;
+
+    return GestureDetector(
+      onTap: widget.onTap,
+      behavior: HitTestBehavior.opaque,
+      child: ClipOval(
+        child: BackdropFilter(
+          filter: ui.ImageFilter.blur(sigmaX: 8, sigmaY: 8),
+          child: Container(
+            width: 36,
+            height: 36,
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+              color: context.colors.surface
+                  .withValues(alpha: dark ? 0.5 : 0.7),
+              shape: BoxShape.circle,
+            ),
+            child: ScaleTransition(
+              scale: _scale,
+              child: Icon(
+                widget.liked ? KasyIcons.favoriteFilled : KasyIcons.favorite,
+                size: 18,
+                color: heart,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}