Redesign the quick-action bar with icon badges and selectable mode chips.

Co-authored-by: Cursor <cursoragent@cursor.com>

clone _of_clarus_ai_chat_bot/Models/QuickAction.swift

@@ -1,7 +1,8 @@
 import Foundation
 
 struct QuickAction: Identifiable {
-    let id = UUID()
     let title: String
     let symbol: String
+
+    var id: String { title }
 }

clone _of_clarus_ai_chat_bot/Utilities/AppTheme.swift

@@ -25,6 +25,9 @@ enum AppTheme {
     static let cornerRadiusMedium: CGFloat = 12
     static let cornerRadiusPill: CGFloat = 22
 
+    static let contentHorizontalPadding: CGFloat = 48
+    static let chatInputQuickActionSpacing: CGFloat = 14
+
     static let chatInputCornerRadius: CGFloat = 22
     static let chatInputBorder = Color(red: 0.90, green: 0.90, blue: 0.90)
     static let chatInputBackground = Color(red: 0.97, green: 0.97, blue: 0.98)
@@ -34,4 +37,10 @@ enum AppTheme {
     static let chatActionButtonBorder = Color(red: 0.84, green: 0.84, blue: 0.87)
     static let chatSendButtonBackground = Color(red: 0.14, green: 0.14, blue: 0.16)
     static let chatHeaderDivider = Color(red: 0.92, green: 0.92, blue: 0.94)
+
+    static let quickActionBackground = Color.white
+    static let quickActionForeground = textPrimary
+    static let quickActionBorder = Color(red: 0.88, green: 0.88, blue: 0.91)
+    static let quickActionIconBackground = Color(red: 0.96, green: 0.96, blue: 0.97)
+    static let quickActionSelectedForeground = Color.white
 }

clone _of_clarus_ai_chat_bot/ViewModels/HomeViewModel.swift

@@ -5,6 +5,7 @@ import Foundation
 final class HomeViewModel: ObservableObject {
     @Published var promptText = ""
     @Published var selectedModel = AIModel(name: "Claude-Haiku")
+    @Published var selectedQuickActionTitle = "Auto"
 
     let navigationItems: [SidebarItem] = [
         SidebarItem(title: "History", symbol: "clock"),
@@ -13,9 +14,11 @@ final class HomeViewModel: ObservableObject {
 
     let quickActions: [QuickAction] = [
         QuickAction(title: "Code", symbol: "chevron.left.forwardslash.chevron.right"),
-        QuickAction(title: "Write", symbol: "pencil.line"),
-        QuickAction(title: "Learn", symbol: "graduationcap"),
-        QuickAction(title: "More Stuff", symbol: "cup.and.saucer")
+        QuickAction(title: "Write", symbol: "square.and.pencil"),
+        QuickAction(title: "Design", symbol: "paintbrush.pointed"),
+        QuickAction(title: "Analyze", symbol: "doc.text.magnifyingglass"),
+        QuickAction(title: "Plan", symbol: "checklist"),
+        QuickAction(title: "Auto", symbol: "wand.and.stars")
     ]
 
     let availableModels: [AIModel] = [

clone _of_clarus_ai_chat_bot/Views/MainContentView.swift

@@ -10,13 +10,12 @@ struct MainContentView: View {
             welcomeSection
                 .padding(.bottom, 28)
 
-            ChatInputCard(viewModel: viewModel)
-                .padding(.horizontal, 48)
-                .frame(maxWidth: .infinity)
-
-            quickActionRow
-                .padding(.top, 22)
-                .padding(.horizontal, 48)
+            VStack(spacing: AppTheme.chatInputQuickActionSpacing) {
+                ChatInputCard(viewModel: viewModel)
+                quickActionRow
+            }
+            .padding(.horizontal, AppTheme.contentHorizontalPadding)
+            .frame(maxWidth: .infinity)
 
             Spacer(minLength: 40)
         }
@@ -43,38 +42,16 @@ struct MainContentView: View {
     }
 
     private var quickActionRow: some View {
-        HStack(spacing: 12) {
+        HStack(spacing: 10) {
             ForEach(viewModel.quickActions) { action in
-                QuickActionChip(action: action)
-            }
-        }
-        .frame(maxWidth: 760)
-    }
-}
-
-private struct QuickActionChip: View {
-    let action: QuickAction
-
-    var body: some View {
-        Button(action: {}) {
-            HStack(spacing: 7) {
-                Image(systemName: action.symbol)
-                    .font(.system(size: 12, weight: .semibold))
-                    .foregroundStyle(AppTheme.accent)
-
-                Text(action.title)
-                    .font(.system(size: 13, weight: .semibold))
-                    .foregroundStyle(AppTheme.textPrimary)
+                QuickActionChip(
+                    action: action,
+                    isSelected: viewModel.selectedQuickActionTitle == action.title
+                ) {
+                    viewModel.selectedQuickActionTitle = action.title
+                }
             }
-            .padding(.horizontal, 18)
-            .padding(.vertical, 11)
-            .background(
-                RoundedRectangle(cornerRadius: AppTheme.cornerRadiusPill, style: .continuous)
-                    .fill(Color.white)
-                    .shadow(color: AppTheme.cardShadow, radius: 8, y: 2)
-            )
         }
-        .buttonStyle(.plain)
-        .accessibilityLabel(action.title)
+        .frame(maxWidth: .infinity, alignment: .center)
     }
 }

clone _of_clarus_ai_chat_bot/Views/QuickActionChip.swift

@@ -0,0 +1,71 @@
+import SwiftUI
+
+struct QuickActionChip: View {
+    let action: QuickAction
+    let isSelected: Bool
+    let onSelect: () -> Void
+
+    private let iconBadgeSize: CGFloat = 26
+    private let iconSize: CGFloat = 13
+
+    var body: some View {
+        Button(action: onSelect) {
+            HStack(spacing: 7) {
+                iconBadge
+
+                Text(action.title)
+                    .font(.system(size: 12.5, weight: .medium))
+                    .foregroundStyle(foregroundColor)
+            }
+            .padding(.leading, 6)
+            .padding(.trailing, 12)
+            .padding(.vertical, 5)
+            .background(
+                RoundedRectangle(cornerRadius: AppTheme.cornerRadiusPill, style: .continuous)
+                    .fill(backgroundColor)
+            )
+            .overlay(
+                RoundedRectangle(cornerRadius: AppTheme.cornerRadiusPill, style: .continuous)
+                    .stroke(borderColor, lineWidth: isSelected ? 0 : 1)
+            )
+            .shadow(
+                color: isSelected ? AppTheme.accent.opacity(0.22) : AppTheme.cardShadow,
+                radius: isSelected ? 8 : 3,
+                y: isSelected ? 3 : 1
+            )
+        }
+        .buttonStyle(.plain)
+        .accessibilityLabel(action.title)
+        .accessibilityAddTraits(isSelected ? .isSelected : [])
+    }
+
+    private var iconBadge: some View {
+        RoundedRectangle(cornerRadius: 8, style: .continuous)
+            .fill(iconBadgeBackground)
+            .frame(width: iconBadgeSize, height: iconBadgeSize)
+            .overlay {
+                Image(systemName: action.symbol)
+                    .font(.system(size: iconSize, weight: .semibold))
+                    .foregroundStyle(foregroundColor)
+                    .symbolRenderingMode(.hierarchical)
+            }
+    }
+
+    private var backgroundColor: Color {
+        isSelected ? AppTheme.accent : AppTheme.quickActionBackground
+    }
+
+    private var borderColor: Color {
+        AppTheme.quickActionBorder
+    }
+
+    private var foregroundColor: Color {
+        isSelected ? AppTheme.quickActionSelectedForeground : AppTheme.quickActionForeground
+    }
+
+    private var iconBadgeBackground: Color {
+        isSelected
+            ? Color.white.opacity(0.22)
+            : AppTheme.quickActionIconBackground
+    }
+}