Add indicator for selected conversation in conversation list (#86)

* pass `selectedConversation` to `ConversationHistoryListView` --------- Co-authored-by: Augustinas Malinauskas <[email protected]>
AugustDev · Apr 29, 2024 · ebed97c · ebed97c
1 parent c5f580d
commit ebed97c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/Enchanted/UI/Shared/Chat/Chat.swift b/Enchanted/UI/Shared/Chat/Chat.swift
@@ -110,6 +110,7 @@ struct Chat: View, Sendable {
 #else
             SideBarStack(sidebarWidth: 300,showSidebar: $showMenu, sidebar: {
                 SidebarView(
+                    selectedConversation: conversationStore.selectedConversation,
                     conversations: conversationStore.conversations,
                     onConversationTap: onConversationTap,
                     onConversationDelete: onConversationDelete,

diff --git a/Enchanted/UI/Shared/Sidebar/Components/ConversationHistoryListView.swift b/Enchanted/UI/Shared/Sidebar/Components/ConversationHistoryListView.swift
@@ -22,6 +22,7 @@ struct ConversationGroup: Hashable {
 }
 
 struct ConversationHistoryList: View {
+    var selectedConversation: ConversationSD?
     var conversations: [ConversationSD]
     var onTap: (_ conversation: ConversationSD) -> ()
     var onDelete: (_ conversation: ConversationSD) -> ()
@@ -60,17 +61,25 @@ struct ConversationHistoryList: View {
                 })
 
                 ForEach(conversationGroup.conversations, id:\.self) { dailyConversation in
-                    HStack {
-                        Button(action: {onTap(dailyConversation)}) {
+                    Button(action: {onTap(dailyConversation)}) {
+                        HStack {
+                            Circle()
+                                .frame(width: 6, height: 6)
+                                .animation(.easeOut(duration: 0.15))
+                                .transition(.opacity)
+                                .showIf(selectedConversation == dailyConversation)
+
                             Text(dailyConversation.name)
                                 .lineLimit(1)
                                 .font(.system(size: 16))
-                                .fontWeight(.regular)
                                 .foregroundColor(Color(.label))
+                                .animation(.easeOut(duration: 0.15))
+                                .transition(.opacity)
                             Spacer()
                         }
-                        .buttonStyle(.plain)
+                        .animation(.easeOut(duration: 0.15))
                     }
+                    .buttonStyle(.plain)
                     .contextMenu(menuItems: {
                         Button(role: .destructive, action: { onDelete(dailyConversation) }) {
                             Label("Delete", systemImage: "trash")
@@ -86,5 +95,5 @@ struct ConversationHistoryList: View {
 
 
 #Preview {
-        ConversationHistoryList(conversations: ConversationSD.sample, onTap: {_ in}, onDelete: {_ in}, onDeleteDailyConversations: {_ in})
+    ConversationHistoryList(selectedConversation: ConversationSD.sample[0], conversations: ConversationSD.sample, onTap: {_ in}, onDelete: {_ in}, onDeleteDailyConversations: {_ in})
 }
diff --git a/Enchanted/UI/Shared/Sidebar/SidebarView.swift b/Enchanted/UI/Shared/Sidebar/SidebarView.swift
@@ -9,6 +9,7 @@ import SwiftUI
 
 struct SidebarView: View {
     @Environment(\.openWindow) var openWindow
+    var selectedConversation: ConversationSD?
     var conversations: [ConversationSD]
     var onConversationTap: (_ conversation: ConversationSD) -> ()
     var onConversationDelete: (_ conversation: ConversationSD) -> ()
@@ -28,6 +29,7 @@ struct SidebarView: View {
         VStack {
             ScrollView() {
                 ConversationHistoryList(
+                    selectedConversation: selectedConversation,
                     conversations: conversations,
                     onTap: onConversationTap,
                     onDelete: onConversationDelete,
@@ -67,5 +69,5 @@ struct SidebarView: View {
 }
 
 #Preview {
-    SidebarView(conversations: ConversationSD.sample, onConversationTap: {_ in}, onConversationDelete: {_ in}, onDeleteDailyConversations: {_ in})
+    SidebarView(selectedConversation: ConversationSD.sample[0], conversations: ConversationSD.sample, onConversationTap: {_ in}, onConversationDelete: {_ in}, onDeleteDailyConversations: {_ in})
 }
diff --git a/Enchanted/UI/macOS/Chat/ChatView_macOS.swift b/Enchanted/UI/macOS/Chat/ChatView_macOS.swift
@@ -34,6 +34,7 @@ struct ChatView: View {
     var body: some View {
         NavigationSplitView(columnVisibility: $columnVisibility) {
             SidebarView(
+                selectedConversation: selectedConversation,
                 conversations: conversations,
                 onConversationTap: onConversationTap,
                 onConversationDelete: onConversationDelete,