Update Scribe mobile custom prompt bar UI

scribe/lib/scribe/ai/presentation/styles/ai_scribe_styles.dart

@@ -16,6 +16,18 @@ abstract final class AIScribeColors {
 
   // Overlays
   static final Color dialogBarrier = Colors.black.withValues(alpha: 0.12);
+
+  // Gradients
+  static const LinearGradient barGradient = LinearGradient(
+    begin: Alignment.centerLeft,
+    end: Alignment.centerRight,
+    colors: [
+      Color.fromRGBO(0, 183, 255, 0.90),
+      Color.fromRGBO(224, 109, 209, 0.90),
+      Color.fromRGBO(232, 167, 138, 0.90),
+    ],
+    stops: [0.0, 0.75, 1.0],
+  );
 }
 
 abstract final class AIScribeShadows {
@@ -131,6 +143,7 @@ abstract final class AIScribeSizes {
   static const double aiAssistantIconRadius = 8;
   static const double contentCardRadius = 16;
   static const double improveButtonBorderRadius = 4;
+  static const double bottomBarRadius = 28;
 
   // Width / height
   static const double menuItemHeight = 40;

scribe/lib/scribe/ai/presentation/widgets/mobile/ai_scribe_mobile_actions_bottom_sheet.dart

@@ -1,4 +1,3 @@
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
@@ -154,33 +153,16 @@ class _AiScribeMobileActionsBottomSheetState
     );
   }
 
-  Widget _buildBottomBar(BuildContext context) {
+  Widget _buildBottomBarContent(BuildContext context) {
     if (!widget.showCustomPromptBar) {
       return const SizedBox.shrink();
     }
     
-    return Column(
+    return AIScribeBar(
-      mainAxisSize: MainAxisSize.min,
+      onCustomPrompt: _onCustomPromptSubmit,
-      children: [
+      imagePaths: widget.imagePaths,
-        const Divider(
+      borderRadius: AIScribeSizes.bottomBarRadius,
-          height: 1,
+      hintStyle: AIScribeTextStyles.searchBar,
-          thickness: 1,
-          color: AppColor.colorDividerComposer,
-        ),
-        Padding(
-          padding: EdgeInsets.only(
-            bottom: MediaQuery.of(context).viewInsets.bottom + 8.0,
-            left: 16.0,
-            right: 16.0,
-            top: 8.0,
-          ),
-          child: AIScribeBar(
-            onCustomPrompt: _onCustomPromptSubmit,
-            imagePaths: widget.imagePaths,
-            boxShadow: const [],
-          ),
-        ),
-      ],
     );
   }
 
@@ -203,6 +185,9 @@ class _AiScribeMobileActionsBottomSheetState
     
     final hasContent = widget.content?.isNotEmpty ?? false;
 
+    final bottomBarPadding = MediaQuery.of(context).viewInsets.bottom + 16.0;
+    final bottomBarInset = bottomBarPadding + (widget.showCustomPromptBar ? AIScribeSizes.searchBarMaxHeight : 0.0);
+
     return PointerInterceptor(
       child: Container(
         height: double.infinity,
@@ -210,32 +195,44 @@ class _AiScribeMobileActionsBottomSheetState
           color: AIScribeColors.background,
         ),
         child: SafeArea(
-          child: Column(
+          child: Stack(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            crossAxisAlignment: CrossAxisAlignment.stretch,
             children: [
-              Expanded(
+              Padding(
+                padding: EdgeInsets.only(bottom: bottomBarInset),
                 child: Column(
-                  mainAxisSize: MainAxisSize.min,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   crossAxisAlignment: CrossAxisAlignment.stretch,
                   children: [
-                    _buildHeader(context, localizations),
+                    Expanded(
-                    _buildTextCard(context),
+                      child: Column(
-                    if(hasContent)
+                        mainAxisSize: MainAxisSize.min,
-                      Flexible(
+                        crossAxisAlignment: CrossAxisAlignment.stretch,
-                        child: ValueListenableBuilder<AiScribeCategoryContextMenuAction?>(
+                        children: [
-                          valueListenable: _selectedCategory,
+                          _buildHeader(context, localizations),
-                          builder: (context, selectedCategory, _) {
+                          _buildTextCard(context),
-                            return selectedCategory == null
+                          if(hasContent)
-                                ? _buildMenuListView(menuActions)
+                            Flexible(
-                                : _buildSubmenuListView();
+                              child: ValueListenableBuilder<AiScribeCategoryContextMenuAction?>(
-                          },
+                                valueListenable: _selectedCategory,
-                        ),
+                                builder: (context, selectedCategory, _) {
+                                  return selectedCategory == null
+                                      ? _buildMenuListView(menuActions)
+                                      : _buildSubmenuListView();
+                                },
+                              ),
+                            ),
+                        ],
                       ),
+                    ),
                   ],
                 ),
               ),
-              _buildBottomBar(context),
+              Positioned(
+                bottom: bottomBarPadding,
+                left: 16.0,
+                right: 16.0,
+                child: _buildBottomBarContent(context),
+              ),
             ],
           ),
         ),

scribe/lib/scribe/ai/presentation/widgets/search/ai_scribe_bar.dart

@@ -9,13 +9,15 @@ typedef OnCustomPromptCallback = void Function(String customPrompt);
 class AIScribeBar extends StatefulWidget {
   final OnCustomPromptCallback onCustomPrompt;
   final ImagePaths imagePaths;
-  final List<BoxShadow>? boxShadow;
+  final double? borderRadius;
+  final TextStyle? hintStyle;
 
   const AIScribeBar({
     super.key,
     required this.onCustomPrompt,
     required this.imagePaths,
-    this.boxShadow,
+    this.borderRadius,
+    this.hintStyle,
   });
 
   @override
@@ -65,60 +67,68 @@ class _AIScribeBarState extends State<AIScribeBar> {
 
   @override
   Widget build(BuildContext context) {
+    final borderRadius = BorderRadius.circular(widget.borderRadius ?? AIScribeSizes.searchBarRadius);
+
     return Container(
-      width: AIScribeSizes.searchBarWidth,
+      padding: const EdgeInsets.all(2),
-      padding: AIScribeSizes.searchBarPadding,
       decoration: BoxDecoration(
-        borderRadius: const BorderRadius.all(
+        borderRadius: borderRadius,
-          Radius.circular(AIScribeSizes.searchBarRadius),
+        gradient: AIScribeColors.barGradient,
-        ),
-        color: AIScribeColors.background,
-        boxShadow: widget.boxShadow ?? AIScribeShadows.modal,
       ),
-      constraints: const BoxConstraints(
+      child: ClipRRect(
-        maxHeight: AIScribeSizes.searchBarMaxHeight,
+        borderRadius: borderRadius,
-        minHeight: AIScribeSizes.searchBarMinHeight,
+        child: Container(
-      ),
+          width: AIScribeSizes.searchBarWidth,
-      child: Row(
+          padding: AIScribeSizes.searchBarPadding,
-        children: [
+          decoration: const BoxDecoration(
-          Expanded(
+            color: AIScribeColors.background,
-            child: KeyboardListener(
+          ),
-              focusNode: _keyboardListenerFocusNode,
+          constraints: const BoxConstraints(
-              onKeyEvent: _handleKeyboardEvent,
+            maxHeight: AIScribeSizes.searchBarMaxHeight,
-              child: TextField(
+            minHeight: AIScribeSizes.searchBarMinHeight,
-                controller: _controller,
+          ),
-                focusNode: _textFieldFocusNode,
+          child: Row(
-                decoration: InputDecoration(
+            children: [
-                  hintText: ScribeLocalizations.of(context).customPromptAction,
+              Expanded(
-                  hintStyle: AIScribeTextStyles.searchBarHint,
+                child: KeyboardListener(
-                  border: InputBorder.none,
+                  focusNode: _keyboardListenerFocusNode,
-                  contentPadding: const EdgeInsets.symmetric(vertical: 8),
+                  onKeyEvent: _handleKeyboardEvent,
-                  isDense: true,
+                  child: TextField(
+                    controller: _controller,
+                    focusNode: _textFieldFocusNode,
+                    decoration: InputDecoration(
+                      hintText: ScribeLocalizations.of(context).customPromptAction,
+                      hintStyle: widget.hintStyle ?? AIScribeTextStyles.searchBarHint,
+                      border: InputBorder.none,
+                      contentPadding: const EdgeInsets.symmetric(vertical: 8),
+                      isDense: true,
+                    ),
+                    style: AIScribeTextStyles.searchBar,
+                    maxLines: null,
+                    keyboardType: TextInputType.multiline,
+                    cursorHeight: 16,
+                  ),
                 ),
-                style: AIScribeTextStyles.searchBar,
-                maxLines: null,
-                keyboardType: TextInputType.multiline,
-                cursorHeight: 16,
               ),
-            ),
+              const SizedBox(width: AIScribeSizes.fieldSpacing),
+              ValueListenableBuilder<bool>(
+                valueListenable: _isButtonEnabled,
+                builder: (_, isEnabled, __) {
+                  return TMailButtonWidget.fromIcon(
+                    icon: widget.imagePaths.icSend,
+                    iconSize: AIScribeSizes.sendIcon,
+                    padding: AIScribeSizes.sendIconPadding,
+                    iconColor: AIScribeColors.background,
+                    backgroundColor: isEnabled
+                        ? AIScribeColors.sendPromptBackground
+                        : AIScribeColors.sendPromptBackgroundDisabled,
+                    onTapActionCallback: isEnabled ? _onSendPressed : null,
+                  );
+                },
+              ),
+            ],
           ),
-          const SizedBox(width: AIScribeSizes.fieldSpacing),
+        ),
-          ValueListenableBuilder<bool>(
-            valueListenable: _isButtonEnabled,
-            builder: (_, isEnabled, __) {
-              return TMailButtonWidget.fromIcon(
-                icon: widget.imagePaths.icSend,
-                iconSize: AIScribeSizes.sendIcon,
-                padding: AIScribeSizes.sendIconPadding,
-                iconColor: AIScribeColors.background,
-                backgroundColor: isEnabled
-                    ? AIScribeColors.sendPromptBackground
-                    : AIScribeColors.sendPromptBackgroundDisabled,
-                onTapActionCallback: isEnabled ? _onSendPressed : null,
-              );
-            },
-          ),
-        ],
       ),
     );
   }