feat(cat-voices): workspace segments behaviour (#1204)

* feat: section initial expand/selection

* feat: SpaceScaffold body expands

* chore: renaming from selected to active

* feat: select step from section when opening while others are closed

* refactor: extract common section tile widget

* feat: section header on tap

* refactor: sections list view with each step as its own item

* feat: scrolling to steps

* feat: SectionsListViewBuilder

* fix: SectionsListView separators

* refactor: remove SectionStepOffstage

* feat: animated ChevronExpandButton

* fix: unused imports

Author: damian-molinski

catalyst_voices/apps/voices/lib/pages/treasury/treasury_body.dart

@@ -1,32 +1,32 @@
-import 'package:catalyst_voices/pages/treasury/treasury_campaign_setup.dart';
+import 'package:catalyst_voices/pages/treasury/treasury_dummy_topic_step.dart';
+import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_view_models/catalyst_voices_view_models.dart';
 import 'package:flutter/material.dart';
+import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 
 class TreasuryBody extends StatelessWidget {
-  final List<TreasurySection> sections;
+  final ItemScrollController itemScrollController;
 
   const TreasuryBody({
     super.key,
-    required this.sections,
+    required this.itemScrollController,
   });
 
   @override
   Widget build(BuildContext context) {
-    return ListView.separated(
-      padding: const EdgeInsets.only(top: 10),
-      itemCount: sections.length,
-      itemBuilder: (context, index) {
-        final section = sections[index];
-
-        switch (section) {
-          case CampaignSetup():
-            return TreasuryCampaignSetup(
-              key: ValueKey('CampaignSetupSection[${section.id}]Key'),
-              data: section,
-            );
-        }
+    return SectionsListViewBuilder(
+      builder: (context, value, child) {
+        return SectionsListView<TreasurySection, TreasurySectionStep>(
+          itemScrollController: itemScrollController,
+          items: value,
+          stepBuilder: (context, step) {
+            switch (step) {
+              case DummyTopicStep():
+                return TreasuryDummyTopicStep(step: step);
+            }
+          },
+        );
       },
-      separatorBuilder: (context, index) => const SizedBox(height: 24),
     );
   }
 }

catalyst_voices/apps/voices/lib/pages/treasury/treasury_campaign_setup.dart

@@ -0,0 +1,34 @@
+import 'package:catalyst_voices/widgets/navigation/section_step_state_builder.dart';
+import 'package:catalyst_voices/widgets/widgets.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:catalyst_voices_view_models/catalyst_voices_view_models.dart';
+import 'package:flutter/material.dart';
+
+class TreasuryDummyTopicStep extends StatelessWidget {
+  final DummyTopicStep step;
+
+  const TreasuryDummyTopicStep({
+    super.key,
+    required this.step,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SectionStepStateBuilder(
+      id: step.sectionStepId,
+      builder: (context, value, child) {
+        return WorkspaceTextTileContainer(
+          name: step.localizedName(context),
+          isSelected: value.isSelected,
+          headerActions: [
+            VoicesTextButton(
+              onTap: step.isEditable ? () {} : null,
+              child: Text(context.l10n.stepEdit),
+            ),
+          ],
+          content: step.localizedDesc(context),
+        );
+      },
+    );
+  }
+}

catalyst_voices/apps/voices/lib/pages/treasury/treasury_dummy_topic_step.dart

@@ -1,5 +1,3 @@
-import 'package:catalyst_voices/widgets/navigation/sections_controller.dart';
-import 'package:catalyst_voices/widgets/navigation/sections_menu.dart';
 import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
 import 'package:flutter/material.dart';

catalyst_voices/apps/voices/lib/pages/treasury/treasury_navigation_panel.dart

@@ -1,19 +1,23 @@
 import 'package:catalyst_voices/pages/treasury/treasury_body.dart';
 import 'package:catalyst_voices/pages/treasury/treasury_details_panel.dart';
 import 'package:catalyst_voices/pages/treasury/treasury_navigation_panel.dart';
-import 'package:catalyst_voices/widgets/navigation/sections_controller.dart';
 import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_view_models/catalyst_voices_view_models.dart';
 import 'package:flutter/material.dart';
+import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 
 const sections = [
   CampaignSetup(
     id: 0,
     steps: [
-      DummyTopicStep(id: 0, isEditable: false),
-      DummyTopicStep(id: 1),
-      DummyTopicStep(id: 2),
-      DummyTopicStep(id: 3),
+      DummyTopicStep(
+        id: 0,
+        sectionId: 0,
+        isEditable: false,
+      ),
+      DummyTopicStep(id: 1, sectionId: 0),
+      DummyTopicStep(id: 2, sectionId: 0),
+      DummyTopicStep(id: 3, sectionId: 0),
     ],
   ),
 ];
@@ -29,12 +33,16 @@ class TreasuryPage extends StatefulWidget {
 
 class _TreasuryPageState extends State<TreasuryPage> {
   late final SectionsController _sectionsController;
+  late final ItemScrollController _bodyItemScrollController;
 
   @override
   void initState() {
     super.initState();
 
     _sectionsController = SectionsController();
+    _bodyItemScrollController = ItemScrollController();
+
+    _sectionsController.attachItemsScrollController(_bodyItemScrollController);
 
     _populateSections();
   }
@@ -49,24 +57,19 @@ class _TreasuryPageState extends State<TreasuryPage> {
   Widget build(BuildContext context) {
     return SectionsControllerScope(
       controller: _sectionsController,
-      child: const SpaceScaffold(
-        left: TreasuryNavigationPanel(),
-        body: TreasuryBody(sections: sections),
-        right: TreasuryDetailsPanel(),
+      child: SpaceScaffold(
+        left: const TreasuryNavigationPanel(),
+        body: TreasuryBody(
+          itemScrollController: _bodyItemScrollController,
+        ),
+        right: const TreasuryDetailsPanel(),
       ),
     );
   }
 
   void _populateSections() {
-    final section = sections.firstOrNull;
-    final step = section?.steps.firstOrNull;
-
-    _sectionsController.value = SectionsControllerState(
+    _sectionsController.value = SectionsControllerState.initial(
       sections: sections,
-      openedSections: sections.map((e) => e.id).toSet(),
-      selectedStep: section != null && step != null
-          ? (sectionId: section.id, stepId: step.id)
-          : null,
     );
   }
 }

catalyst_voices/apps/voices/lib/pages/treasury/treasury_page.dart

@@ -1,29 +1,33 @@
-import 'package:catalyst_voices/pages/workspace/workspace_form_section.dart';
+import 'package:catalyst_voices/pages/workspace/workspace_rich_text_step.dart';
+import 'package:catalyst_voices/widgets/navigation/sections_list_view.dart';
+import 'package:catalyst_voices/widgets/navigation/sections_list_view_builder.dart';
 import 'package:catalyst_voices_view_models/catalyst_voices_view_models.dart';
 import 'package:flutter/material.dart';
+import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 
 class WorkspaceBody extends StatelessWidget {
-  final List<WorkspaceSection> sections;
+  final ItemScrollController itemScrollController;
 
   const WorkspaceBody({
     super.key,
-    required this.sections,
+    required this.itemScrollController,
   });
 
   @override
   Widget build(BuildContext context) {
-    return ListView.separated(
-      padding: const EdgeInsets.only(top: 10),
-      itemCount: sections.length,
-      itemBuilder: (context, index) {
-        final section = sections[index];
-
-        return WorkspaceFormSection(
-          key: ValueKey('WorkspaceSection[${section.id}]Key'),
-          data: section,
+    return SectionsListViewBuilder(
+      builder: (context, value, child) {
+        return SectionsListView<WorkspaceSection, WorkspaceSectionStep>(
+          itemScrollController: itemScrollController,
+          items: value,
+          stepBuilder: (context, step) {
+            switch (step) {
+              case RichTextStep():
+                return WorkspaceRichTextStep(step: step);
+            }
+          },
         );
       },
-      separatorBuilder: (context, index) => const SizedBox(height: 24),
     );
   }
 }

catalyst_voices/apps/voices/lib/pages/workspace/workspace_body.dart

@@ -1,5 +1,3 @@
-import 'package:catalyst_voices/widgets/navigation/sections_controller.dart';
-import 'package:catalyst_voices/widgets/navigation/sections_menu.dart';
 import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
 import 'package:flutter/material.dart';