chore(cat-voices): Ui changes in workspace page/ disable stream when user is not login (#2173)

* feat: if user is not proposer close user proposal stream

* refactor(campaign-timeline): simplify gradient and cleanup event handlers in timeline components

* fix: unused comment

* fix(campaign-timeline-test): adjust card height for consistent rendering in tests (#2181)

* fix(campaign-timeline): unify workspace colors for ongoing campaigns in campaign timeline card

Author: LynxLynxx

catalyst_voices/apps/voices/lib/pages/discovery/sections/stay_involved.dart

@@ -24,11 +24,12 @@ class StayInvolved extends StatelessWidget {
       padding: EdgeInsets.symmetric(horizontal: 120, vertical: 72),
       child: Column(
         mainAxisSize: MainAxisSize.min,
-        crossAxisAlignment: CrossAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
           _Header(),
           SizedBox(height: 24),
           Wrap(
+            alignment: WrapAlignment.center,
             spacing: 16,
             runSpacing: 16,
             children: [
@@ -157,13 +158,18 @@ class _StayInvolvedCard extends StatelessWidget {
       padding: const EdgeInsets.symmetric(horizontal: 32),
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(12),
-        gradient: const LinearGradient(
+        gradient: LinearGradient(
           begin: Alignment.topCenter,
           end: Alignment.bottomCenter,
-          colors: [
-            Color(0xFFD1EAFF),
-            Color(0xFFCAD6FE),
-          ],
+          colors: Theme.of(context).brightness == Brightness.light
+              ? [
+                  const Color(0xFFD1EAFF),
+                  const Color(0xFFCAD6FE),
+                ]
+              : [
+                  const Color(0xFF2D3953),
+                  const Color(0xFF242C42),
+                ],
         ),
       ),
       child: Column(

catalyst_voices/apps/voices/lib/pages/workspace/header/workspace_header.dart

@@ -105,7 +105,6 @@ class _ViewComments extends StatelessWidget {
 }
 
 class _WorkspaceHeaderState extends State<WorkspaceHeader> {
-  bool _isTimelineExpanded = false;
   bool _isTimelineVisible = true;
 
   @override
@@ -153,7 +152,6 @@ class _WorkspaceHeaderState extends State<WorkspaceHeader> {
                 const _ViewComments(),
                 Expanded(
                   child: Container(
-                    height: _isTimelineExpanded ? 340 : 190,
                     padding: const EdgeInsets.all(16),
                     decoration: BoxDecoration(
                       color: theme.colorScheme.surface,
@@ -171,11 +169,6 @@ class _WorkspaceHeaderState extends State<WorkspaceHeader> {
                         return CampaignTimeline(
                           timelineItems: timelineItems,
                           placement: CampaignTimelinePlacement.workspace,
-                          onExpandedChanged: (isExpanded) {
-                            setState(() {
-                              _isTimelineExpanded = isExpanded;
-                            });
-                          },
                         );
                       },
                     ),
@@ -193,9 +186,6 @@ class _WorkspaceHeaderState extends State<WorkspaceHeader> {
   void _toggleTimelineVisibility() {
     setState(() {
       _isTimelineVisible = !_isTimelineVisible;
-      if (!_isTimelineVisible) {
-        _isTimelineExpanded = false;
-      }
     });
   }
 }

catalyst_voices/apps/voices/lib/widgets/campaign_timeline/campaign_timeline.dart

@@ -5,14 +5,12 @@ import 'package:flutter/material.dart';
 class CampaignTimeline extends StatefulWidget {
   final List<CampaignTimelineViewModel> timelineItems;
   final CampaignTimelinePlacement placement;
-  final ValueChanged<bool>? onExpandedChanged;
   final SizedBox horizontalPadding;
 
   const CampaignTimeline({
     super.key,
     required this.timelineItems,
     required this.placement,
-    this.onExpandedChanged,
     this.horizontalPadding = const SizedBox.shrink(),
   });
 
@@ -22,40 +20,31 @@ class CampaignTimeline extends StatefulWidget {
 
 class CampaignTimelineState extends State<CampaignTimeline> {
   final _scrollController = ScrollController();
-  final Set<int> _expandedIndices = {};
 
   @override
   Widget build(BuildContext context) {
-    return MouseRegion(
-      cursor: SystemMouseCursors.click,
-      child: SizedBox(
-        height: _expandedIndices.isNotEmpty ? 300 : 150,
-        child: GestureDetector(
-          onHorizontalDragUpdate: _handleHorizontalScroll,
-          // Why not ListView? It forces children to full height
-          // (parent constraint).The SingleChildScrollView+Row
-          // reserves natural card heights from content.
-          child: SingleChildScrollView(
-            controller: _scrollController,
-            physics: const BouncingScrollPhysics(),
-            scrollDirection: Axis.horizontal,
-            child: Row(
-              mainAxisSize: MainAxisSize.min,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                widget.horizontalPadding,
-                ...widget.timelineItems.asMap().entries.map(
-                      (entry) => CampaignTimelineCard(
-                        timelineItem: entry.value,
-                        placement: widget.placement,
-                        onExpandedChanged: (isExpanded) {
-                          _onCardExpanded(isExpanded, entry);
-                        },
-                      ),
+    return GestureDetector(
+      onHorizontalDragUpdate: _handleHorizontalScroll,
+      behavior: HitTestBehavior.translucent,
+      child: MouseRegion(
+        cursor: SystemMouseCursors.click,
+        child: SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          controller: _scrollController,
+          physics: const BouncingScrollPhysics(),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              widget.horizontalPadding,
+              ...widget.timelineItems.asMap().entries.map(
+                    (entry) => CampaignTimelineCard(
+                      timelineItem: entry.value,
+                      placement: widget.placement,
                     ),
-                widget.horizontalPadding,
-              ],
-            ),
+                  ),
+              widget.horizontalPadding,
+            ],
           ),
         ),
       ),
@@ -83,18 +72,4 @@ class CampaignTimelineState extends State<CampaignTimeline> {
       _scrollController.offset - details.delta.dx,
     );
   }
-
-  void _onCardExpanded(
-    bool isExpanded,
-    MapEntry<int, CampaignTimelineViewModel> entry,
-  ) {
-    setState(() {
-      if (isExpanded) {
-        _expandedIndices.add(entry.key);
-      } else {
-        _expandedIndices.remove(entry.key);
-      }
-    });
-    widget.onExpandedChanged?.call(_expandedIndices.isNotEmpty);
-  }
 }

catalyst_voices/apps/voices/lib/widgets/campaign_timeline/campaign_timeline_card.dart

@@ -10,13 +10,11 @@ import 'package:flutter/material.dart';
 class CampaignTimelineCard extends StatefulWidget {
   final CampaignTimelineViewModel timelineItem;
   final CampaignTimelinePlacement placement;
-  final ValueChanged<bool>? onExpandedChanged;
 
   const CampaignTimelineCard({
     super.key,
     required this.timelineItem,
     required this.placement,
-    this.onExpandedChanged,
   });
 
   @override
@@ -37,17 +35,18 @@ class CampaignTimelineCardState extends State<CampaignTimelineCard> {
 
     return GestureDetector(
       onTap: _toggleExpanded,
-      child: SizedBox(
+      behavior: HitTestBehavior.opaque,
+      child: Container(
+        constraints: const BoxConstraints(minHeight: 150),
         width: 288,
-        height: _isExpanded ? 300 : 150,
         child: Card(
           key: const Key('TimelineCard'),
           color:
               widget.placement.backgroundColor(context, isOngoing: _isOngoing),
           shape: OutlineInputBorder(
-            borderSide: BorderSide(
-              color: _isOngoing ? colors.primary : Colors.white,
-              width: _isOngoing ? 2 : 1,
+            borderSide: widget.placement.borderSide(
+              context,
+              isOngoing: _isOngoing,
             ),
             borderRadius: BorderRadius.circular(8),
           ),
@@ -78,42 +77,40 @@ class CampaignTimelineCardState extends State<CampaignTimelineCard> {
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
                 ),
-                Expanded(
-                  child: Row(
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: [
-                      Expanded(
-                        child: Text(
-                          key: const Key('TimelineCardDate'),
-                          DateFormatter.formatDateRange(
-                            MaterialLocalizations.of(context),
-                            context.l10n,
-                            widget.timelineItem.timeline,
-                          ),
-                          style: context.textTheme.bodyMedium?.copyWith(
-                            color: context.colors.sysColorsNeutralN60,
-                          ),
-                          maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Expanded(
+                      child: Text(
+                        key: const Key('TimelineCardDate'),
+                        DateFormatter.formatDateRange(
+                          MaterialLocalizations.of(context),
+                          context.l10n,
+                          widget.timelineItem.timeline,
+                        ),
+                        style: context.textTheme.bodyMedium?.copyWith(
+                          color: context.colors.sysColorsNeutralN60,
                         ),
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
                       ),
-                      if (_isOngoing) ...[
-                        const SizedBox(width: 8),
-                        Offstage(
-                          offstage: !_isOngoing,
-                          child: VoicesChip.round(
-                            backgroundColor: colors.primary,
-                            content: Text(
-                              context.l10n.ongoing,
-                              style: context.textTheme.labelSmall?.copyWith(
-                                color: Colors.white,
-                              ),
+                    ),
+                    if (_isOngoing) ...[
+                      const SizedBox(width: 8),
+                      Offstage(
+                        offstage: !_isOngoing,
+                        child: VoicesChip.round(
+                          backgroundColor: colors.primary,
+                          content: Text(
+                            context.l10n.ongoing,
+                            style: context.textTheme.labelSmall?.copyWith(
+                              color: Colors.white,
                             ),
                           ),
                         ),
-                      ],
+                      ),
                     ],
-                  ),
+                  ],
                 ),
                 const SizedBox(height: 16),
                 AnimatedSwitcher(
@@ -138,7 +135,6 @@ class CampaignTimelineCardState extends State<CampaignTimelineCard> {
   void _toggleExpanded() {
     setState(() {
       _isExpanded = !_isExpanded;
-      widget.onExpandedChanged?.call(_isExpanded);
     });
   }
 }
@@ -151,16 +147,27 @@ enum CampaignTimelinePlacement {
     BuildContext context, {
     required bool isOngoing,
   }) {
-    final colorScheme = context.colorScheme;
     final colors = Theme.of(context).colors;
 
     return switch ((this, isOngoing)) {
-      (discovery, _) => colorScheme.onPrimary,
-      // TODO(minikin): Discuss color inconsistency with the design team.
-      // The color on Figma files is #E3E8FA (measured),
-      //but the color on the design system is #123CD3 with alpha 0.12.
-      (workspace, true) => VoicesColors.lightIconsPrimary.withAlpha(31),
-      (workspace, false) => colors.iconsBackgroundVariant,
+      (discovery, _) => colors.onSurfaceNeutralOpaqueLv0,
+      (workspace, true) => colors.onSurfaceNeutralOpaqueLv0,
+      (workspace, false) => colors.onSurfaceNeutralOpaqueLv1,
+    };
+  }
+
+  BorderSide borderSide(
+    BuildContext context, {
+    required bool isOngoing,
+  }) {
+    final colorScheme = context.colorScheme;
+
+    return switch ((this, isOngoing)) {
+      (discovery, true) => BorderSide(
+          color: colorScheme.primary,
+          width: 2,
+        ),
+      (_, _) => BorderSide.none,
     };
   }
 }

catalyst_voices/apps/voices/test/widgets/campaign_timeline/campaign_timeline_card_test.dart

@@ -89,36 +89,6 @@ void main() {
       },
     );
 
-    testWidgets(
-      'calls onExpandedChanged when tapped',
-      (tester) async {
-        var expanded = false;
-        final widget = CampaignTimelineCard(
-          timelineItem: timelineItem,
-          placement: CampaignTimelinePlacement.discovery,
-          onExpandedChanged: (isExpanded) => expanded = isExpanded,
-        );
-
-        await tester.pumpApp(
-          widget,
-          voicesColors: lightVoicesColorScheme,
-        );
-        await tester.pumpAndSettle();
-
-        final gestureDetector = find
-            .descendant(
-              of: find.byType(CampaignTimelineCard),
-              matching: find.byType(GestureDetector),
-            )
-            .first;
-
-        await tester.tap(gestureDetector);
-        await tester.pumpAndSettle();
-
-        expect(expanded, isTrue);
-      },
-    );
-
     testWidgets(
       'shows ongoing chip for current timeline',
       (tester) async {