feat(cat-voices): Overall spaces UI (#1958)

* refactor BrandsNavigation to improve layout; add new SpacesTile and OpportunitiesTile components; update localization strings

* feat: add MyProposalsRoute and update tiles in Discovery and Workspace overview pages

* feat: enhance Discovery and Workspace overviews with published proposals and small proposal cards functionality

* feat: add localization strings for unpublished proposals and iterations in the workspace overview section

* fix: update proposal metadata to use DraftRef for document in overall and workspace overview spaces

* feat: define dark and light brand assets for the catalyst theme in the theme data configuration

* fix: update proposal references to use new selfRef and versionCount attributes across various files

* fix: remove redundant newline in _NotPublishedProposals

* fix: remove unused GoRouter import and update navigation method in WorkspaceOverview; tidy up widget constructors with newlines

Author: LynxLynxx

catalyst_voices/apps/voices/lib/pages/overall_spaces/brands_navigation.dart

@@ -1,4 +1,6 @@
 import 'package:catalyst_voices/common/ext/brand_ext.dart';
+import 'package:catalyst_voices/common/ext/build_context_ext.dart';
+import 'package:catalyst_voices/widgets/common/affix_decorator.dart';
 import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
 import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
@@ -20,6 +22,7 @@ class BrandsNavigation extends StatelessWidget {
       padding: const EdgeInsets.symmetric(vertical: 8),
       child: Column(
         mainAxisSize: MainAxisSize.max,
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           ...Brand.values.map(
             (brand) {
@@ -35,59 +38,26 @@ class BrandsNavigation extends StatelessWidget {
             indent: 0,
             endIndent: 0,
           ),
-          const _SearchTile(),
-          const _TasksTile(),
+          const _SpacesTile(),
+          const _OpportunitiesTile(),
         ],
       ),
     );
   }
 }
 
-class _BrandTile extends StatelessWidget {
-  final Brand brand;
-  final VoidCallback? onTap;
-
-  const _BrandTile(
-    this.brand, {
-    super.key,
-    this.onTap,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final isCurrent = theme.brandAssets.brand == brand;
-
-    return _BrandsNavigationTile(
-      onTap: onTap,
-      isSelected: isCurrent,
-      leading: brand.logoIcon(context).buildIcon(allowColorFilter: false),
-      content: Text(brand.localizedName(context.l10n)),
-    );
-  }
-}
+final class _BackgroundColor implements WidgetStateProperty<Color?> {
+  final VoicesColorScheme colors;
 
-class _SearchTile extends StatelessWidget {
-  const _SearchTile();
+  _BackgroundColor(this.colors);
 
   @override
-  Widget build(BuildContext context) {
-    return _BrandsNavigationTile(
-      leading: VoicesAssets.icons.search.buildIcon(),
-      content: Text(context.l10n.overallSpacesSearchBrands),
-    );
-  }
-}
-
-class _TasksTile extends StatelessWidget {
-  const _TasksTile();
+  Color? resolve(Set<WidgetState> states) {
+    if (states.contains(WidgetState.selected)) {
+      return colors.onSurfacePrimaryContainer.withValues(alpha: 0.12);
+    }
 
-  @override
-  Widget build(BuildContext context) {
-    return _BrandsNavigationTile(
-      leading: VoicesAssets.icons.collection.buildIcon(),
-      content: Text(context.l10n.overallSpacesTasks),
-    );
+    return Colors.transparent;
   }
 }
 
@@ -158,18 +128,32 @@ class _BrandsNavigationTile extends StatelessWidget {
   }
 }
 
-final class _BackgroundColor implements WidgetStateProperty<Color?> {
-  final VoicesColorScheme colors;
+class _BrandTile extends StatelessWidget {
+  final Brand brand;
+  final VoidCallback? onTap;
 
-  _BackgroundColor(this.colors);
+  const _BrandTile(
+    this.brand, {
+    super.key,
+    this.onTap,
+  });
 
   @override
-  Color? resolve(Set<WidgetState> states) {
-    if (states.contains(WidgetState.selected)) {
-      return colors.onSurfacePrimaryContainer.withValues(alpha: 0.12);
-    }
-
-    return Colors.transparent;
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: 12,
+        vertical: 8,
+      ),
+      child: AffixDecorator(
+        prefix: brand.logoIcon(context).buildIcon(allowColorFilter: false),
+        child: Text(
+          brand.localizedName(context.l10n),
+          style: context.textTheme.titleMedium
+              ?.copyWith(color: context.colorScheme.primary),
+        ),
+      ),
+    );
   }
 }
 
@@ -187,3 +171,29 @@ final class _ForegroundColor implements WidgetStateProperty<Color?> {
     return colors.textOnPrimaryLevel0;
   }
 }
+
+class _OpportunitiesTile extends StatelessWidget {
+  const _OpportunitiesTile();
+
+  @override
+  Widget build(BuildContext context) {
+    return _BrandsNavigationTile(
+      leading: VoicesAssets.icons.collection.buildIcon(),
+      content: Text(context.l10n.opportunities),
+    );
+  }
+}
+
+class _SpacesTile extends StatelessWidget {
+  const _SpacesTile();
+
+  @override
+  Widget build(BuildContext context) {
+    return _BrandsNavigationTile(
+      isSelected: true,
+      leading: VoicesAssets.icons.viewGrid.buildIcon(),
+      content: Text(context.l10n.spaces),
+      onTap: () {},
+    );
+  }
+}

catalyst_voices/apps/voices/lib/pages/overall_spaces/overall_spaces_page.dart

@@ -1,7 +1,6 @@
 import 'package:catalyst_voices/pages/overall_spaces/back_fab.dart';
 import 'package:catalyst_voices/pages/overall_spaces/brands_navigation.dart';
 import 'package:catalyst_voices/pages/overall_spaces/spaces_overview_list_view.dart';
-import 'package:catalyst_voices/pages/overall_spaces/update_ready.dart';
 import 'package:flutter/material.dart';
 
 class OverallSpacesPage extends StatelessWidget {
@@ -38,8 +37,6 @@ class _Navigation extends StatelessWidget {
         children: [
           BrandsNavigation(),
           Spacer(),
-          UpdateReady(),
-          SizedBox(height: 20),
           Align(
             alignment: Alignment.centerLeft,
             child: BackFab(),

catalyst_voices/apps/voices/lib/pages/overall_spaces/space/discovery_overview.dart

@@ -1,11 +1,18 @@
-import 'package:catalyst_voices/common/ext/space_ext.dart';
+import 'package:catalyst_cardano_serialization/catalyst_cardano_serialization.dart';
+import 'package:catalyst_voices/common/ext/build_context_ext.dart';
 import 'package:catalyst_voices/pages/overall_spaces/space/space_overview_header.dart';
 import 'package:catalyst_voices/pages/overall_spaces/space/space_overview_nav_tile.dart';
 import 'package:catalyst_voices/pages/overall_spaces/space_overview_container.dart';
+import 'package:catalyst_voices/routes/routes.dart';
+import 'package:catalyst_voices/widgets/cards/small_proposal_card.dart';
 import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
+import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
 import 'package:catalyst_voices_models/catalyst_voices_models.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:go_router/go_router.dart';
 
 class DiscoveryOverview extends StatelessWidget {
   const DiscoveryOverview({super.key});
@@ -17,11 +24,13 @@ class DiscoveryOverview extends StatelessWidget {
         children: [
           SpaceOverviewHeader(Space.discovery),
           _DiscoveryDashboardTile(),
-          VoicesDivider(indent: 0, endIndent: 0, height: 16),
-          _RolesTile(),
           _FeedbackTile(),
           VoicesDivider(indent: 0, endIndent: 0, height: 16),
-          _DocumentationTile(),
+          Expanded(
+            child: SingleChildScrollView(
+              child: _PublishedProposalSelector(1, 5),
+            ),
+          ),
         ],
       ),
     );
@@ -36,46 +45,144 @@ class _DiscoveryDashboardTile extends StatelessWidget {
     return SpaceOverviewNavTile(
       leading: VoicesAssets.icons.home.buildIcon(),
       title: Text(
-        'Discovery Dashboard',
+        context.l10n.discoveryHomepage,
         style: Theme.of(context).textTheme.bodyLarge,
       ),
-      backgroundColor: Space.discovery.backgroundColor(context),
+      onTap: () => GoRouter.of(context).go(const DiscoveryRoute().location),
     );
   }
 }
 
-class _RolesTile extends StatelessWidget {
-  const _RolesTile();
+class _FeedbackTile extends StatelessWidget {
+  const _FeedbackTile();
 
   @override
   Widget build(BuildContext context) {
-    return SpaceOverviewNavTile(
-      leading: VoicesAssets.icons.user.buildIcon(),
-      title: const Text('Catalyst Roles'),
+    return BlocSelector<SessionCubit, SessionState, bool>(
+      selector: (state) {
+        return state.account?.isProposer ?? false;
+      },
+      builder: (context, state) {
+        return Visibility.maintain(
+          visible: state,
+          child: SpaceOverviewNavTile(
+            leading: VoicesAssets.icons.documentText.buildIcon(),
+            title: Text(
+              context.l10n.feedbackOnProposals,
+              style: Theme.of(context).textTheme.bodyLarge,
+            ),
+            onTap: state
+                ? () => GoRouter.of(context).go(const ProposalsRoute().location)
+                : null,
+          ),
+        );
+      },
     );
   }
 }
 
-class _FeedbackTile extends StatelessWidget {
-  const _FeedbackTile();
+class _Header extends StatelessWidget {
+  final int currentProposals;
+  final int maxProposals;
+  const _Header({
+    required this.maxProposals,
+    required this.currentProposals,
+  });
 
   @override
   Widget build(BuildContext context) {
-    return SpaceOverviewNavTile(
-      leading: VoicesAssets.icons.annotation.buildIcon(),
-      title: const Text('Feedback'),
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 18)
+        ..add(
+          const EdgeInsets.only(left: 16),
+        ),
+      child: Text(
+        context.l10n.noPublishedProposalsOnMaxCount(
+          currentProposals,
+          maxProposals,
+        ),
+        style: context.textTheme.titleMedium?.copyWith(
+          color: context.colors.textOnPrimaryLevel1,
+        ),
+      ),
     );
   }
 }
 
-class _DocumentationTile extends StatelessWidget {
-  const _DocumentationTile();
+class _PublishedProposals extends StatelessWidget {
+  final int currentProposals;
+  final int maxProposals;
+  const _PublishedProposals(
+    this.currentProposals,
+    this.maxProposals,
+  );
 
   @override
   Widget build(BuildContext context) {
-    return SpaceOverviewNavTile(
-      leading: VoicesAssets.icons.arrowRight.buildIcon(),
-      title: const Text('Catalyst Gitbook documentation'),
+    // TODO(LynxLynxx): replace with real data
+    final proposal = Proposal(
+      selfRef: SignedDocumentRef.generateFirstRef(),
+      title: 'Latest proposal that is making its rounds.',
+      category: 'F14: Cardano Use Cases: Concept',
+      description: 'Lorem ipsum dolor sit ',
+      fundsRequested: const Coin(100000),
+      status: ProposalStatus.draft,
+      publish: ProposalPublish.localDraft,
+      commentsCount: 0,
+      duration: 6,
+      author: 'Alex Wells',
+      updateDate: DateTime.now(),
+      versionCount: 1,
+    );
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        _Header(
+          maxProposals: maxProposals,
+          currentProposals: currentProposals,
+        ),
+        SmallProposalCard(
+          proposal: proposal.copyWith(
+            publish: ProposalPublish.submittedProposal,
+            commentsCount: 1,
+          ),
+        ),
+        const SizedBox(height: 12),
+        SmallProposalCard(
+          proposal: proposal.copyWith(
+            publish: ProposalPublish.publishedDraft,
+            commentsCount: 12,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _PublishedProposalSelector extends StatelessWidget {
+  final int currentProposals;
+  final int maxProposals;
+  const _PublishedProposalSelector(
+    this.currentProposals,
+    this.maxProposals,
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocSelector<SessionCubit, SessionState, bool>(
+      selector: (state) {
+        return !(state.account?.isProposer ?? false);
+      },
+      builder: (context, state) {
+        return Offstage(
+          offstage: state,
+          child: _PublishedProposals(
+            currentProposals,
+            maxProposals,
+          ),
+        );
+      },
     );
   }
 }