fix: improve ui around signing out of sessions [CLERK_SDK #20]

Author: shinyford

packages/clerk_flutter/lib/src/widgets/ui/closeable.dart

@@ -1,18 +1,23 @@
 import 'package:flutter/material.dart';
 
-class Closeable extends StatelessWidget {
-  static const _defaultDuration = Duration(milliseconds: 250);
+const _defaultDuration = Duration(milliseconds: 250);
 
+/// [Closeable] provides a widget that will animate to closed or open positions depending
+/// on the `open` or `closed` parameter values. One and only one of `open` or `closed` must
+/// be provided.
+class Closeable extends StatelessWidget {
   final Duration duration;
   final double _value;
   final Widget child;
+  final Axis orientation;
 
   const Closeable({
     super.key,
     bool? closed,
     bool? open,
     required this.child,
     this.duration = _defaultDuration,
+    this.orientation = Axis.vertical,
   })  : assert((closed is bool) || (open is bool), 'One of closed or open required'),
         assert((closed is bool) != (open is bool), 'Only one of closed or open allowed'),
         _value = (open == true || closed == false) ? 1 : 0;
@@ -25,10 +30,61 @@ class Closeable extends StatelessWidget {
         child: AnimatedAlign(
           duration: duration,
           alignment: Alignment.topLeft,
-          heightFactor: _value,
+          heightFactor: orientation == Axis.vertical ? _value : null,
+          widthFactor: orientation == Axis.horizontal ? _value : null,
           child: child,
         ),
       ),
     );
   }
 }
+
+/// [AnimatingCloseable] provides a closeable widget just like [Closeable]
+/// with the minor difference that it animates to its first position from closed
+class AnimatingCloseable extends StatefulWidget {
+  final Duration duration;
+  final bool? open;
+  final bool? closed;
+  final Widget child;
+  final Axis orientation;
+
+  const AnimatingCloseable({
+    super.key,
+    this.open,
+    this.closed,
+    required this.child,
+    this.duration = _defaultDuration,
+    this.orientation = Axis.vertical,
+  })  : assert((closed is bool) || (open is bool), 'One of closed or open required'),
+        assert((closed is bool) != (open is bool), 'Only one of closed or open allowed');
+
+  @override
+  State<AnimatingCloseable> createState() => _AnimatingCloseableState();
+}
+
+class _AnimatingCloseableState extends State<AnimatingCloseable> {
+  bool? open = false;
+  bool? closed;
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      setState(() {
+        open = widget.open;
+        closed = widget.closed;
+      });
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Closeable(
+      duration: widget.duration,
+      open: open,
+      closed: closed,
+      orientation: widget.orientation,
+      child: widget.child,
+    );
+  }
+}

packages/clerk_flutter/lib/src/widgets/user/clerk_user_button.dart

@@ -26,15 +26,12 @@ class _ClerkUserButtonState extends State<ClerkUserButton> {
       child: ClerkAuthBuilder(builder: (context, auth) {
         final translator = auth.translator;
 
-        for (final session in auth.client.sessions) {
-          final idx = _sessions.indexWhere((s) => s.id == session.id);
-          if (idx > -1) {
-            _sessions[idx] = session;
-          } else {
-            _sessions.add(session);
-          }
-        }
+        // adding to a list of existing sessions means we have ones that are now deleted
+        // available for prettier UI
+        _sessions.addOrReplaceAll(auth.client.sessions, by: (s) => s.id);
 
+        // after a delay period, all deleted sessions will have been closed, so we can
+        // clear the `_sessions` cache of any such for next time round
         Future.delayed(_closeDelay, () => _sessions = [...auth.client.sessions]);
 
         return ClerkVerticalCard(

packages/common/lib/src/extensions.dart

@@ -30,3 +30,22 @@ extension StringExtension on String {
       .map((t) => t[0])
       .join();
 }
+
+extension ListExtension on List {
+  void addOrReplaceAll<T>(Iterable<T> list, {dynamic Function(T)? by}) {
+    if (isEmpty) {
+      addAll(list);
+    } else {
+      by ??= (t) => t;
+      for (final item in list) {
+        final identifier = by.call(item);
+        final idx = indexWhere((i) => by!.call(i) == identifier);
+        if (idx > -1) {
+          this[idx] = item;
+        } else {
+          add(item);
+        }
+      }
+    }
+  }
+}