Compose autocomplete tweaks

Packages/ComposeUI/Sources/ComposeUI/Views/Autocomplete/AutocompleteEmojiView.swift

@@ -17,13 +17,15 @@ struct AutocompleteEmojiView: View {
     @State private var emojis: [Emoji] = []
     
     var body: some View {
-        HStack(alignment: expanded ? .top : .center, spacing: 0) {
+        HStack(alignment: expanded ? .top : .center, spacing: 8) {
             scrollView
+                .transition(.opacity)
+                .animation(.snappy, value: expanded)
             
             ToggleExpandedButton(expanded: $expanded)
-                .padding(.trailing, 8)
                 .padding(.top, expanded ? 8 : 0)
         }
+        .padding(.horizontal, 8)
         .task(id: query) {
             await queryChanged()
         }
@@ -81,7 +83,6 @@ private struct InlineEmojiView: View {
                 AutocompleteEmojiButton(emoji: emoji)
             }
         }
-        .padding(.horizontal, 8)
         .frame(height: ComposeToolbarView.autocompleteHeight)
     }
 }
@@ -97,7 +98,7 @@ private struct ExpandedEmojiView: View {
                 ExpandedEmojiSection(section: section, emojis: emojisBySection[section]!)
             }
         }
-        .padding(.all, 8)
+        .padding(.vertical, 8)
         .task(id: emojis) {
             groupEmojisBySection()
         }
@@ -170,7 +171,7 @@ private struct ToggleExpandedButton: View {
     
     var body: some View {
         Button {
-            withAnimation(nil) {
+            withAnimation(.snappy) {
                 expanded.toggle()
             }
         } label: {

Packages/ComposeUI/Sources/ComposeUI/Views/Autocomplete/AutocompleteHashtagView.swift

@@ -19,9 +19,14 @@ struct AutocompleteHashtagView: View {
     var body: some View {
         ScrollView(.horizontal) {
             HStack(spacing: 8) {
-                if hashtags.isEmpty && loading {
+                if hashtags.isEmpty {
+                    if loading {
                         ProgressView()
                             .progressViewStyle(.circular)
+                    } else if query.isEmpty {
+                        Text("Type to search")
+                            .font(.callout.italic())
+                    }
                 }
                 
                 ForEach(hashtags, id: \.name) { hashtag in

Packages/ComposeUI/Sources/ComposeUI/Views/Autocomplete/AutocompleteMentionView.swift

@@ -24,9 +24,12 @@ struct AutocompleteMentionView: View {
                     if loading {
                         ProgressView()
                             .progressViewStyle(.circular)
+                    } else if query.isEmpty {
+                        Text("Type to search")
+                            .font(.callout.italic())
                     } else {
                         Text("No accounts found")
-                            .font(.caption.italic())
+                            .font(.callout.italic())
                     }
                 }
                 

Packages/ComposeUI/Sources/ComposeUI/Views/Autocomplete/AutocompleteView.swift

@@ -12,18 +12,40 @@ struct AutocompleteView: View {
     @FocusedInputAutocompleteState private var state
     
     var body: some View {
+        contentView
+            .composeToolbarBackground()
+            .transition(.move(edge: .bottom))
+            .animation(.snappy, value: AutocompleteMode(state: state))
+    }
+    
+    @ViewBuilder
+    var contentView: some View {
         switch state {
         case nil:
-            Color.clear
+            EmptyView()
         case .hashtag(let s):
             AutocompleteHashtagView(query: s, mastodonController: mastodonController)
-                .composeToolbarBackground()
         case .mention(let s):
             AutocompleteMentionView(query: s, mastodonController: mastodonController)
-                .composeToolbarBackground()
         case .emoji(let s):
             AutocompleteEmojiView(query: s, mastodonController: mastodonController)
-                .composeToolbarBackground()
+        }
+    }
+}
+
+private enum AutocompleteMode {
+    case none, hashtag, mention, emoji
+    
+    init(state: AutocompleteState?) {
+        switch state {
+        case .mention(_):
+            self = .mention
+        case .emoji(_):
+            self = .emoji
+        case .hashtag(_):
+            self = .hashtag
+        case nil:
+            self = .none
         }
     }
 }

Packages/ComposeUI/Sources/ComposeUI/Views/ComposeToolbarView.swift

@@ -39,7 +39,7 @@ private struct ToolbarContentView: View {
         #else
         ToolbarScrollView {
             buttons
-                .padding(.horizontal, 16)
+                .padding(.horizontal, 8)
         }
         .frame(height: ComposeToolbarView.toolbarHeight)
         .composeToolbarBackground()