🚀 Launch 3.3.0+144

assets/i18n/en-US.json

@@ -1317,5 +1317,7 @@
     "fromDate": "From Date",
     "toDate": "To Date",
     "popularity": "Popularity",
-    "descendingOrder": "Descending Order"
+    "descendingOrder": "Descending Order",
+    "selectDate": "Select Date",
+    "pinnedPosts": "Pinned Posts"
 }

lib/screens/chat/room.dart

@@ -1,4 +1,5 @@
 import "dart:async";
+import "dart:math" as math;
 import "package:easy_localization/easy_localization.dart";
 import "package:file_picker/file_picker.dart";
 import "package:flutter/material.dart";
@@ -140,6 +141,9 @@ class ChatRoomScreen extends HookConsumerWidget {
     final messageController = useTextEditingController();
     final scrollController = useScrollController();
 
+    // Scroll animation notifiers
+    final bottomGradientNotifier = useState(ValueNotifier<double>(0.0));
+
     final messageReplyingTo = useState<SnChatMessage?>(null);
     final messageForwardingTo = useState<SnChatMessage?>(null);
     final messageEditingTo = useState<SnChatMessage?>(null);
@@ -164,6 +168,12 @@ class ChatRoomScreen extends HookConsumerWidget {
           isLoading = true;
           messagesNotifier.loadMore().then((_) => isLoading = false);
         }
+
+        // Update gradient animations
+        final pixels = scrollController.position.pixels;
+
+        // Bottom gradient: appears when not at bottom (pixels > 0)
+        bottomGradientNotifier.value.value = (pixels / 500.0).clamp(0.0, 1.0);
       }
 
       scrollController.addListener(onScroll);
@@ -589,7 +599,9 @@ class ChatRoomScreen extends HookConsumerWidget {
       listController: listController,
       padding: EdgeInsets.only(
         top: 16,
-        bottom: MediaQuery.of(context).padding.bottom + 16,
+        bottom:
+            MediaQuery.of(context).padding.bottom +
+            80, // Leave space for chat input
       ),
       controller: scrollController,
       reverse: true, // Show newest messages at the bottom
@@ -828,7 +840,7 @@ class ChatRoomScreen extends HookConsumerWidget {
       ),
       body: Stack(
         children: [
-          // Messages and Input in Column
+          // Messages only in Column
           Positioned.fill(
             child: Column(
               children: [
@@ -872,73 +884,6 @@ class ChatRoomScreen extends HookConsumerWidget {
                     ),
                   ),
                 ),
-                if (!isSelectionMode.value)
-                  chatRoom.when(
-                    data:
-                        (room) => Column(
-                          mainAxisSize: MainAxisSize.min,
-                          children: [
-                            ChatInput(
-                              messageController: messageController,
-                              chatRoom: room!,
-                              onSend: sendMessage,
-                              onClear: () {
-                                if (messageEditingTo.value != null) {
-                                  attachments.value.clear();
-                                  messageController.clear();
-                                }
-                                messageEditingTo.value = null;
-                                messageReplyingTo.value = null;
-                                messageForwardingTo.value = null;
-                              },
-                              messageEditingTo: messageEditingTo.value,
-                              messageReplyingTo: messageReplyingTo.value,
-                              messageForwardingTo: messageForwardingTo.value,
-                              onPickFile: (bool isPhoto) {
-                                if (isPhoto) {
-                                  pickPhotoMedia();
-                                } else {
-                                  pickVideoMedia();
-                                }
-                              },
-                              onPickAudio: pickAudioMedia,
-                              onPickGeneralFile: pickGeneralFile,
-                              onLinkAttachment: linkAttachment,
-                              attachments: attachments.value,
-                              onUploadAttachment: uploadAttachment,
-                              onDeleteAttachment: (index) async {
-                                final attachment = attachments.value[index];
-                                if (attachment.isOnCloud &&
-                                    !attachment.isLink) {
-                                  final client = ref.watch(apiClientProvider);
-                                  await client.delete(
-                                    '/drive/files/${attachment.data.id}',
-                                  );
-                                }
-                                final clone = List.of(attachments.value);
-                                clone.removeAt(index);
-                                attachments.value = clone;
-                              },
-                              onMoveAttachment: (idx, delta) {
-                                if (idx + delta < 0 ||
-                                    idx + delta >= attachments.value.length) {
-                                  return;
-                                }
-                                final clone = List.of(attachments.value);
-                                clone.insert(idx + delta, clone.removeAt(idx));
-                                attachments.value = clone;
-                              },
-                              onAttachmentsChanged: (newAttachments) {
-                                attachments.value = newAttachments;
-                              },
-                              attachmentProgress: attachmentProgress.value,
-                            ),
-                            Gap(MediaQuery.of(context).padding.bottom),
-                          ],
-                        ),
-                    error: (_, _) => const SizedBox.shrink(),
-                    loading: () => const SizedBox.shrink(),
-                  ),
               ],
             ),
           ),
@@ -977,6 +922,112 @@ class ChatRoomScreen extends HookConsumerWidget {
                 ),
               ),
             ),
+          // Bottom gradient - appears when scrolling towards newer messages (behind chat input)
+          if (!isSelectionMode.value)
+            AnimatedBuilder(
+              animation: bottomGradientNotifier.value,
+              builder:
+                  (context, child) => Positioned(
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    child: Opacity(
+                      opacity: bottomGradientNotifier.value.value,
+                      child: Container(
+                        height: math.min(
+                          MediaQuery.of(context).size.height * 0.1,
+                          128,
+                        ),
+                        decoration: BoxDecoration(
+                          gradient: LinearGradient(
+                            begin: Alignment.bottomCenter,
+                            end: Alignment.topCenter,
+                            colors: [
+                              Theme.of(
+                                context,
+                              ).colorScheme.surfaceContainer.withOpacity(0.8),
+                              Theme.of(
+                                context,
+                              ).colorScheme.surfaceContainer.withOpacity(0.0),
+                            ],
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+            ),
+          // Chat Input positioned above gradient (higher z-index)
+          if (!isSelectionMode.value)
+            Positioned(
+              left: 0,
+              right: 0,
+              bottom: 0, // At the very bottom, above gradient
+              child: chatRoom.when(
+                data:
+                    (room) => Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        ChatInput(
+                          messageController: messageController,
+                          chatRoom: room!,
+                          onSend: sendMessage,
+                          onClear: () {
+                            if (messageEditingTo.value != null) {
+                              attachments.value.clear();
+                              messageController.clear();
+                            }
+                            messageEditingTo.value = null;
+                            messageReplyingTo.value = null;
+                            messageForwardingTo.value = null;
+                          },
+                          messageEditingTo: messageEditingTo.value,
+                          messageReplyingTo: messageReplyingTo.value,
+                          messageForwardingTo: messageForwardingTo.value,
+                          onPickFile: (bool isPhoto) {
+                            if (isPhoto) {
+                              pickPhotoMedia();
+                            } else {
+                              pickVideoMedia();
+                            }
+                          },
+                          onPickAudio: pickAudioMedia,
+                          onPickGeneralFile: pickGeneralFile,
+                          onLinkAttachment: linkAttachment,
+                          attachments: attachments.value,
+                          onUploadAttachment: uploadAttachment,
+                          onDeleteAttachment: (index) async {
+                            final attachment = attachments.value[index];
+                            if (attachment.isOnCloud && !attachment.isLink) {
+                              final client = ref.watch(apiClientProvider);
+                              await client.delete(
+                                '/drive/files/${attachment.data.id}',
+                              );
+                            }
+                            final clone = List.of(attachments.value);
+                            clone.removeAt(index);
+                            attachments.value = clone;
+                          },
+                          onMoveAttachment: (idx, delta) {
+                            if (idx + delta < 0 ||
+                                idx + delta >= attachments.value.length) {
+                              return;
+                            }
+                            final clone = List.of(attachments.value);
+                            clone.insert(idx + delta, clone.removeAt(idx));
+                            attachments.value = clone;
+                          },
+                          onAttachmentsChanged: (newAttachments) {
+                            attachments.value = newAttachments;
+                          },
+                          attachmentProgress: attachmentProgress.value,
+                        ),
+                        Gap(MediaQuery.of(context).padding.bottom),
+                      ],
+                    ),
+                error: (_, _) => const SizedBox.shrink(),
+                loading: () => const SizedBox.shrink(),
+              ),
+            ),
           // Selection mode toolbar
           if (isSelectionMode.value)
             Positioned(

lib/screens/posts/post_category_detail.dart

@@ -201,7 +201,7 @@ class PostCategoryDetailScreen extends HookConsumerWidget {
                                                   );
                                                 },
                                                 icon: const Icon(
-                                                  Symbols.add_circle,
+                                                  Symbols.remove_circle,
                                                 ),
                                                 label: Text('unsubscribe'.tr()),
                                               )
@@ -214,7 +214,7 @@ class PostCategoryDetailScreen extends HookConsumerWidget {
                                                   );
                                                 },
                                                 icon: const Icon(
-                                                  Symbols.remove_circle,
+                                                  Symbols.add_circle,
                                                 ),
                                                 label: Text('subscribe'.tr()),
                                               ),

lib/screens/posts/publisher_profile.dart

@@ -487,64 +487,94 @@ class _PublisherCategoryTabWidget extends StatelessWidget {
                   Row(
                     children: [
                       Expanded(
-                        child: TextField(
-                          decoration: InputDecoration(
-                            labelText: 'fromDate'.tr(),
-                            hintText: 'YYYY-MM-DD',
-                            border: const OutlineInputBorder(
-                              borderRadius: BorderRadius.all(
-                                Radius.circular(12),
+                        child: InkWell(
+                          onTap: () async {
+                            final pickedDate = await showDatePicker(
+                              context: context,
+                              initialDate:
+                                  periodStart.value != null
+                                      ? DateTime.fromMillisecondsSinceEpoch(
+                                        periodStart.value! * 1000,
+                                      )
+                                      : DateTime.now(),
+                              firstDate: DateTime(2000),
+                              lastDate: DateTime.now().add(
+                                const Duration(days: 365),
                               ),
-                            ),
-                            contentPadding: const EdgeInsets.symmetric(
-                              horizontal: 12,
-                              vertical: 8,
-                            ),
-                          ),
-                          onChanged: (value) {
-                            if (value.isEmpty) {
-                              periodStart.value = null;
-                            } else {
-                              try {
-                                final date = DateTime.parse(value);
-                                periodStart.value =
-                                    date.millisecondsSinceEpoch ~/ 1000;
-                              } catch (_) {
-                                periodStart.value = null;
-                              }
+                            );
+                            if (pickedDate != null) {
+                              periodStart.value =
+                                  pickedDate.millisecondsSinceEpoch ~/ 1000;
                             }
                           },
+                          child: InputDecorator(
+                            decoration: InputDecoration(
+                              labelText: 'fromDate'.tr(),
+                              border: const OutlineInputBorder(
+                                borderRadius: BorderRadius.all(
+                                  Radius.circular(12),
+                                ),
+                              ),
+                              contentPadding: const EdgeInsets.symmetric(
+                                horizontal: 12,
+                                vertical: 8,
+                              ),
+                              suffixIcon: const Icon(Symbols.calendar_today),
+                            ),
+                            child: Text(
+                              periodStart.value != null
+                                  ? DateTime.fromMillisecondsSinceEpoch(
+                                    periodStart.value! * 1000,
+                                  ).toString().split(' ')[0]
+                                  : 'selectDate'.tr(),
+                            ),
+                          ),
                         ),
                       ),
                       const Gap(8),
                       Expanded(
-                        child: TextField(
-                          decoration: InputDecoration(
-                            labelText: 'toDate'.tr(),
-                            hintText: 'YYYY-MM-DD',
-                            border: const OutlineInputBorder(
-                              borderRadius: BorderRadius.all(
-                                Radius.circular(12),
+                        child: InkWell(
+                          onTap: () async {
+                            final pickedDate = await showDatePicker(
+                              context: context,
+                              initialDate:
+                                  periodEnd.value != null
+                                      ? DateTime.fromMillisecondsSinceEpoch(
+                                        periodEnd.value! * 1000,
+                                      )
+                                      : DateTime.now(),
+                              firstDate: DateTime(2000),
+                              lastDate: DateTime.now().add(
+                                const Duration(days: 365),
                               ),
-                            ),
-                            contentPadding: const EdgeInsets.symmetric(
-                              horizontal: 12,
-                              vertical: 8,
-                            ),
-                          ),
-                          onChanged: (value) {
-                            if (value.isEmpty) {
-                              periodEnd.value = null;
-                            } else {
-                              try {
-                                final date = DateTime.parse(value);
-                                periodEnd.value =
-                                    date.millisecondsSinceEpoch ~/ 1000;
-                              } catch (_) {
-                                periodEnd.value = null;
-                              }
+                            );
+                            if (pickedDate != null) {
+                              periodEnd.value =
+                                  pickedDate.millisecondsSinceEpoch ~/ 1000;
                             }
                           },
+                          child: InputDecorator(
+                            decoration: InputDecoration(
+                              labelText: 'toDate'.tr(),
+                              border: const OutlineInputBorder(
+                                borderRadius: BorderRadius.all(
+                                  Radius.circular(12),
+                                ),
+                              ),
+                              contentPadding: const EdgeInsets.symmetric(
+                                horizontal: 12,
+                                vertical: 8,
+                              ),
+                              suffixIcon: const Icon(Symbols.calendar_today),
+                            ),
+                            child: Text(
+                              periodEnd.value != null
+                                  ? DateTime.fromMillisecondsSinceEpoch(
+                                    periodEnd.value! * 1000,
+                                  ).toString().split(' ')[0]
+                                  : 'selectDate'.tr(),
+                            ),
+                          ),
                         ),
                       ),
                     ],
@@ -646,6 +676,7 @@ class PublisherProfileScreen extends HookConsumerWidget {
     final periodEnd = useState<int?>(null);
     final showAdvancedFilters = useState(false);
     final subscribing = useState(false);
+    final isPinnedExpanded = useState(true);
 
     Future<void> subscribe() async {
       final apiClient = ref.watch(apiClientProvider);
@@ -716,7 +747,36 @@ class PublisherProfileScreen extends HookConsumerWidget {
                           child: CustomScrollView(
                             slivers: [
                               SliverGap(16),
-                              SliverPostList(pubName: name, pinned: true),
+                              SliverToBoxAdapter(
+                                child: Card(
+                                  margin: EdgeInsets.symmetric(
+                                    horizontal: 8,
+                                    vertical: 4,
+                                  ),
+                                  child: ListTile(
+                                    title: Text('pinnedPosts'.tr()),
+                                    leading: const Icon(Symbols.push_pin),
+                                    shape: RoundedRectangleBorder(
+                                      borderRadius: BorderRadius.all(
+                                        Radius.circular(8),
+                                      ),
+                                    ),
+                                    trailing: Icon(
+                                      isPinnedExpanded.value
+                                          ? Symbols.expand_less
+                                          : Symbols.expand_more,
+                                    ),
+                                    onTap:
+                                        () =>
+                                            isPinnedExpanded.value =
+                                                !isPinnedExpanded.value,
+                                  ),
+                                ),
+                              ),
+                              ...[
+                                if (isPinnedExpanded.value)
+                                  SliverPostList(pubName: name, pinned: true),
+                              ],
                               SliverToBoxAdapter(
                                 child: _PublisherCategoryTabWidget(
                                   categoryTabController: categoryTabController,
@@ -855,7 +915,30 @@ class PublisherProfileScreen extends HookConsumerWidget {
                             heatmap: heatmap,
                           ).padding(vertical: 4),
                         ),
-                        SliverPostList(pubName: name, pinned: true),
+                        SliverToBoxAdapter(
+                          child: Card(
+                            margin: EdgeInsets.symmetric(
+                              horizontal: 8,
+                              vertical: 4,
+                            ),
+                            child: ListTile(
+                              title: Text('pinnedPosts'.tr()),
+                              trailing: Icon(
+                                isPinnedExpanded.value
+                                    ? Symbols.expand_less
+                                    : Symbols.expand_more,
+                              ),
+                              onTap:
+                                  () =>
+                                      isPinnedExpanded.value =
+                                          !isPinnedExpanded.value,
+                            ),
+                          ),
+                        ),
+                        ...[
+                          if (isPinnedExpanded.value)
+                            SliverPostList(pubName: name, pinned: true),
+                        ],
                         SliverToBoxAdapter(
                           child: _PublisherCategoryTabWidget(
                             categoryTabController: categoryTabController,

lib/screens/thought/think.dart

@@ -1,4 +1,5 @@
 import "dart:convert";
+import "dart:math" as math;
 import "package:dio/dio.dart";
 import "package:easy_localization/easy_localization.dart";
 import "package:flutter/material.dart";
@@ -57,6 +58,9 @@ class ThoughtScreen extends HookConsumerWidget {
 
     final listController = useMemoized(() => ListController(), []);
 
+    // Scroll animation notifiers
+    final bottomGradientNotifier = useState(ValueNotifier<double>(0.0));
+
     // Update local thoughts when provider data changes
     useEffect(() {
       thoughts.whenData((data) {
@@ -86,6 +90,20 @@ class ThoughtScreen extends HookConsumerWidget {
       return null;
     }, [localThoughts.value.length, isStreaming.value]);
 
+    // Add scroll listener for gradient animations
+    useEffect(() {
+      void onScroll() {
+        // Update gradient animations
+        final pixels = scrollController.position.pixels;
+
+        // Bottom gradient: appears when not at bottom (pixels > 0)
+        bottomGradientNotifier.value.value = (pixels / 500.0).clamp(0.0, 1.0);
+      }
+
+      scrollController.addListener(onScroll);
+      return () => scrollController.removeListener(onScroll);
+    }, [scrollController]);
+
     void sendMessage() async {
       if (messageController.text.trim().isEmpty) return;
 
@@ -258,65 +276,120 @@ class ThoughtScreen extends HookConsumerWidget {
           const Gap(8),
         ],
       ),
-      body: Center(
-        child: Container(
-          constraints: BoxConstraints(maxWidth: 640),
-          child: Column(
-            children: [
-              Expanded(
-                child: thoughts.when(
-                  data:
-                      (thoughtList) => SuperListView.builder(
-                        listController: listController,
-                        controller: scrollController,
-                        padding: const EdgeInsets.only(top: 16, bottom: 16),
-                        reverse: true,
-                        itemCount:
-                            localThoughts.value.length +
-                            (isStreaming.value ? 1 : 0),
-                        itemBuilder: (context, index) {
-                          if (isStreaming.value && index == 0) {
-                            return ThoughtItem(
-                              isStreaming: true,
-                              streamingText: streamingText.value,
-                              reasoningChunks: reasoningChunks.value,
-                              streamingFunctionCalls: functionCalls.value,
-                            );
-                          }
-                          final thoughtIndex =
-                              isStreaming.value ? index - 1 : index;
-                          final thought = localThoughts.value[thoughtIndex];
-                          return ThoughtItem(
-                            thought: thought,
-                            thoughtIndex: thoughtIndex,
-                          );
-                        },
+      body: Stack(
+        children: [
+          // Thoughts list
+          Center(
+            child: Container(
+              constraints: BoxConstraints(maxWidth: 640),
+              child: Column(
+                children: [
+                  Expanded(
+                    child: thoughts.when(
+                      data:
+                          (thoughtList) => SuperListView.builder(
+                            listController: listController,
+                            controller: scrollController,
+                            padding: EdgeInsets.only(
+                              top: 16,
+                              bottom:
+                                  MediaQuery.of(context).padding.bottom +
+                                  80, // Leave space for thought input
+                            ),
+                            reverse: true,
+                            itemCount:
+                                localThoughts.value.length +
+                                (isStreaming.value ? 1 : 0),
+                            itemBuilder: (context, index) {
+                              if (isStreaming.value && index == 0) {
+                                return ThoughtItem(
+                                  isStreaming: true,
+                                  streamingText: streamingText.value,
+                                  reasoningChunks: reasoningChunks.value,
+                                  streamingFunctionCalls: functionCalls.value,
+                                );
+                              }
+                              final thoughtIndex =
+                                  isStreaming.value ? index - 1 : index;
+                              final thought = localThoughts.value[thoughtIndex];
+                              return ThoughtItem(
+                                thought: thought,
+                                thoughtIndex: thoughtIndex,
+                              );
+                            },
+                          ),
+                      loading:
+                          () =>
+                              const Center(child: CircularProgressIndicator()),
+                      error:
+                          (error, _) => ResponseErrorWidget(
+                            error: error,
+                            onRetry:
+                                () =>
+                                    selectedSequenceId.value != null
+                                        ? ref.invalidate(
+                                          thoughtSequenceProvider(
+                                            selectedSequenceId.value!,
+                                          ),
+                                        )
+                                        : null,
+                          ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          // Bottom gradient - appears when scrolling towards newer thoughts (behind thought input)
+          AnimatedBuilder(
+            animation: bottomGradientNotifier.value,
+            builder:
+                (context, child) => Positioned(
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  child: Opacity(
+                    opacity: bottomGradientNotifier.value.value,
+                    child: Container(
+                      height: math.min(
+                        MediaQuery.of(context).size.height * 0.1,
+                        128,
                       ),
-                  loading:
-                      () => const Center(child: CircularProgressIndicator()),
-                  error:
-                      (error, _) => ResponseErrorWidget(
-                        error: error,
-                        onRetry:
-                            () =>
-                                selectedSequenceId.value != null
-                                    ? ref.invalidate(
-                                      thoughtSequenceProvider(
-                                        selectedSequenceId.value!,
-                                      ),
-                                    )
-                                    : null,
+                      decoration: BoxDecoration(
+                        gradient: LinearGradient(
+                          begin: Alignment.bottomCenter,
+                          end: Alignment.topCenter,
+                          colors: [
+                            Theme.of(
+                              context,
+                            ).colorScheme.surfaceContainer.withOpacity(0.8),
+                            Theme.of(
+                              context,
+                            ).colorScheme.surfaceContainer.withOpacity(0.0),
+                          ],
+                        ),
                       ),
+                    ),
+                  ),
+                ),
+          ),
+          // Thought Input positioned above gradient (higher z-index)
+          Positioned(
+            left: 0,
+            right: 0,
+            bottom: 0, // At the very bottom, above gradient
+            child: Center(
+              child: Container(
+                constraints: BoxConstraints(maxWidth: 640),
+                child: ThoughtInput(
+                  messageController: messageController,
+                  isStreaming: isStreaming.value,
+                  onSend: sendMessage,
                 ),
               ),
-              ThoughtInput(
-                messageController: messageController,
-                isStreaming: isStreaming.value,
-                onSend: sendMessage,
-              ),
-            ],
+            ),
           ),
-        ),
+        ],
       ),
     );
   }

lib/screens/thought/think_sheet.dart

@@ -1,4 +1,5 @@
 import "dart:convert";
+import "dart:math" as math;
 import "package:dio/dio.dart";
 import "package:easy_localization/easy_localization.dart";
 import "package:flutter/material.dart";
@@ -54,6 +55,9 @@ class ThoughtSheet extends HookConsumerWidget {
 
     final listController = useMemoized(() => ListController(), []);
 
+    // Scroll animation notifiers
+    final bottomGradientNotifier = useState(ValueNotifier<double>(0.0));
+
     // Scroll to bottom when thoughts change or streaming state changes
     useEffect(() {
       if (localThoughts.value.isNotEmpty || isStreaming.value) {
@@ -68,6 +72,20 @@ class ThoughtSheet extends HookConsumerWidget {
       return null;
     }, [localThoughts.value.length, isStreaming.value]);
 
+    // Add scroll listener for gradient animations
+    useEffect(() {
+      void onScroll() {
+        // Update gradient animations
+        final pixels = scrollController.position.pixels;
+
+        // Bottom gradient: appears when not at bottom (pixels > 0)
+        bottomGradientNotifier.value.value = (pixels / 500.0).clamp(0.0, 1.0);
+      }
+
+      scrollController.addListener(onScroll);
+      return () => scrollController.removeListener(onScroll);
+    }, [scrollController]);
+
     void sendMessage() async {
       if (messageController.text.trim().isEmpty) return;
 
@@ -196,47 +214,103 @@ class ThoughtSheet extends HookConsumerWidget {
 
     return SheetScaffold(
       titleText: currentTopic.value ?? 'aiThought'.tr(),
-      child: Center(
-        child: Container(
-          constraints: BoxConstraints(maxWidth: 640),
-          child: Column(
-            children: [
-              Expanded(
-                child: SuperListView.builder(
-                  listController: listController,
-                  controller: scrollController,
-                  padding: const EdgeInsets.only(top: 16, bottom: 16),
-                  reverse: true,
-                  itemCount:
-                      localThoughts.value.length + (isStreaming.value ? 1 : 0),
-                  itemBuilder: (context, index) {
-                    if (isStreaming.value && index == 0) {
-                      return ThoughtItem(
-                        isStreaming: true,
-                        streamingText: streamingText.value,
-                        reasoningChunks: reasoningChunks.value,
-                        streamingFunctionCalls: functionCalls.value,
-                      );
-                    }
-                    final thoughtIndex = isStreaming.value ? index - 1 : index;
-                    final thought = localThoughts.value[thoughtIndex];
-                    return ThoughtItem(
-                      thought: thought,
-                      thoughtIndex: thoughtIndex,
-                    );
-                  },
+      child: Stack(
+        children: [
+          // Thoughts list
+          Center(
+            child: Container(
+              constraints: BoxConstraints(maxWidth: 640),
+              child: Column(
+                children: [
+                  Expanded(
+                    child: SuperListView.builder(
+                      listController: listController,
+                      controller: scrollController,
+                      padding: EdgeInsets.only(
+                        top: 16,
+                        bottom:
+                            MediaQuery.of(context).padding.bottom +
+                            80, // Leave space for thought input
+                      ),
+                      reverse: true,
+                      itemCount:
+                          localThoughts.value.length +
+                          (isStreaming.value ? 1 : 0),
+                      itemBuilder: (context, index) {
+                        if (isStreaming.value && index == 0) {
+                          return ThoughtItem(
+                            isStreaming: true,
+                            streamingText: streamingText.value,
+                            reasoningChunks: reasoningChunks.value,
+                            streamingFunctionCalls: functionCalls.value,
+                          );
+                        }
+                        final thoughtIndex =
+                            isStreaming.value ? index - 1 : index;
+                        final thought = localThoughts.value[thoughtIndex];
+                        return ThoughtItem(
+                          thought: thought,
+                          thoughtIndex: thoughtIndex,
+                        );
+                      },
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          // Bottom gradient - appears when scrolling towards newer thoughts (behind thought input)
+          AnimatedBuilder(
+            animation: bottomGradientNotifier.value,
+            builder:
+                (context, child) => Positioned(
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  child: Opacity(
+                    opacity: bottomGradientNotifier.value.value,
+                    child: Container(
+                      height: math.min(
+                        MediaQuery.of(context).size.height * 0.1,
+                        128,
+                      ),
+                      decoration: BoxDecoration(
+                        gradient: LinearGradient(
+                          begin: Alignment.bottomCenter,
+                          end: Alignment.topCenter,
+                          colors: [
+                            Theme.of(
+                              context,
+                            ).colorScheme.surfaceContainer.withOpacity(0.8),
+                            Theme.of(
+                              context,
+                            ).colorScheme.surfaceContainer.withOpacity(0.0),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+          ),
+          // Thought Input positioned above gradient (higher z-index)
+          Positioned(
+            left: 0,
+            right: 0,
+            bottom: 0, // At the very bottom, above gradient
+            child: Center(
+              child: Container(
+                constraints: BoxConstraints(maxWidth: 640),
+                child: ThoughtInput(
+                  messageController: messageController,
+                  isStreaming: isStreaming.value,
+                  onSend: sendMessage,
+                  attachedMessages: attachedMessages,
+                  attachedPosts: attachedPosts,
                 ),
               ),
-              ThoughtInput(
-                messageController: messageController,
-                isStreaming: isStreaming.value,
-                onSend: sendMessage,
-                attachedMessages: attachedMessages,
-                attachedPosts: attachedPosts,
-              ),
-            ],
+            ),
           ),
-        ),
+        ],
       ),
     );
   }

lib/widgets/post/compose_card.dart

@@ -423,6 +423,7 @@ class PostComposeCard extends HookConsumerWidget {
                   state: composeState,
                   originalPost: originalPost,
                   isCompact: true,
+                  useSafeArea: isContained,
                 ),
               ),
             ),

lib/widgets/post/compose_toolbar.dart

@@ -14,12 +14,14 @@ class ComposeToolbar extends HookConsumerWidget {
   final ComposeState state;
   final SnPost? originalPost;
   final bool isCompact;
+  final bool useSafeArea;
 
   const ComposeToolbar({
     super.key,
     required this.state,
     this.originalPost,
     this.isCompact = false,
+    this.useSafeArea = false,
   });
 
   @override
@@ -200,7 +202,12 @@ class ComposeToolbar extends HookConsumerWidget {
                     ),
                   ),
               ],
-            ).padding(horizontal: 8, vertical: 4),
+            ).padding(
+              horizontal: 8,
+              top: 4,
+              bottom:
+                  useSafeArea ? MediaQuery.of(context).padding.bottom + 4 : 4,
+            ),
           ),
         ),
       );

pubspec.yaml

@@ -16,7 +16,7 @@ publish_to: "none" # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 3.3.0+143
+version: 3.3.0+144
 
 environment:
   sdk: ^3.7.2