compose_box: Implement content input redesign

`ClipRect`'s size is determined by the `ConstrainedBox`.  This is
mainly for showing the content through the `contentPadding` of the
`TextField`, so that our `InsetShadowBox` can fade it smoothly there.
The shadow is always there, but it is only visible when the
`TextField` is long enough to be scrollable.

See also:

  - zulip#928 (comment),
    which elaborates on the issue we intend to solve with the
    `ClipRect` setup.
  - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3954-13395
  - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3862-14350

Fixes: zulip#915

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/compose_box.dart

@@ -17,6 +17,7 @@ import 'autocomplete.dart';
 import 'color.dart';
 import 'dialog.dart';
 import 'icons.dart';
+import 'inset_shadow.dart';
 import 'store.dart';
 import 'text.dart';
 import 'theme.dart';
@@ -366,32 +367,76 @@ class _ContentInputState extends State<_ContentInput> with WidgetsBindingObserve
     }
   }
 
+  static double maxHeight(BuildContext context) {
+    final clampingTextScaler = MediaQuery.textScalerOf(context)
+      .clamp(maxScaleFactor: 1.5);
+    final scaledLineHeight = clampingTextScaler.scale(fontSize) * lineHeightRatio;
+
+    // Reserve space to fully show the first 7th lines and just partially
+    // clip the 8th line, where the height matches the spec at
+    //   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3960-5147&node-type=text&m=dev
+    // > Maximum size of the compose box is suggested to be 178px. Which
+    // > has 7 fully visible lines of text
+    //
+    // The partial line hints that the content input is scrollable.
+    //
+    // Using the ambient TextScale means this works for different values of the
+    // system text-size setting. We clamp to a max scale factor to limit
+    // how tall the content input can get; that's to save room for the message
+    // list. The user can still scroll the input to see everything.
+    return verticalPadding + 7.727 * scaledLineHeight;
+  }
+
+  static const verticalPadding = 8.0;
+  static const fontSize = 17.0;
+  static const lineHeight = 22.0;
+  static const lineHeightRatio = lineHeight / fontSize;
+
   @override
   Widget build(BuildContext context) {
-    ColorScheme colorScheme = Theme.of(context).colorScheme;
-
-    return InputDecorator(
-      decoration: const InputDecoration(),
-      child: ConstrainedBox(
-        constraints: const BoxConstraints(
-          // TODO constrain this adaptively (i.e. not hard-coded 200)
-          maxHeight: 200,
-        ),
-        child: ComposeAutocomplete(
-          narrow: widget.narrow,
-          controller: widget.controller,
-          focusNode: widget.focusNode,
-          fieldViewBuilder: (context) {
-            return TextField(
+    final designVariables = DesignVariables.of(context);
+
+    return ComposeAutocomplete(
+      narrow: widget.narrow,
+      controller: widget.controller,
+      focusNode: widget.focusNode,
+      fieldViewBuilder: (context) => ConstrainedBox(
+        constraints: BoxConstraints(maxHeight: maxHeight(context)),
+        child: ClipRect(
+          child: InsetShadowBox(
+            top: verticalPadding, bottom: verticalPadding,
+            color: designVariables.composeBoxBg,
+            child: TextField(
               controller: widget.controller,
               focusNode: widget.focusNode,
-              style: TextStyle(color: colorScheme.onSurface),
-              decoration: InputDecoration.collapsed(hintText: widget.hintText),
+              // Let the content show through the `contentPadding` so that
+              // our [InsetShadowBox] can fade it smoothly there.
+              clipBehavior: Clip.none,
+              style: TextStyle(
+                fontSize: fontSize,
+                height: lineHeightRatio,
+                color: designVariables.textInput),
+              // From the spec at
+              //   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3960-5147&node-type=text&m=dev
+              // > Compose box has the height to fit 2 lines. This is [done] to
+              // > have a bigger hit area for the user to start the input. […]
+              minLines: 2,
               maxLines: null,
               textCapitalization: TextCapitalization.sentences,
-            );
-          }),
-        ));
+              decoration: InputDecoration(
+                // This padding ensures that the user can always scroll long
+                // content entirely out of the top or bottom shadow if desired.
+                // With this and the `minLines: 2` above, an empty content input
+                // gets 60px vertical distance between the top of the top shadow
+                // and the bottom of the bottom shadow (with no text-size
+                // scaling). That's a bit more than the 54px given in the Figma,
+                // and we can revisit if needed, but it's tricky to get that
+                // 54px distance while also making the scrolling work like this
+                // and offering two lines of touchable area.
+                contentPadding: const EdgeInsets.symmetric(vertical: verticalPadding),
+                hintText: widget.hintText,
+                hintStyle: TextStyle(
+                  color: designVariables.textInput.withFadedAlpha(0.5))))))));
   }
 }