added ansipickerview

added selectAnsi to select an ansi col

ShhShell.xcodeproj/project.pbxproj

@@ -71,6 +71,7 @@
 		A9FD375F2E14648E005319A8 /* KeyImporterView.swift in Sources */ = {isa = PBXBuildFile; fileRef = A9FD375E2E14648E005319A8 /* KeyImporterView.swift */; };
 		A9FD37652E169937005319A8 /* AuthType.swift in Sources */ = {isa = PBXBuildFile; fileRef = A9FD37642E169937005319A8 /* AuthType.swift */; };
 		A9FD37692E16A6BF005319A8 /* ShellTabView.swift in Sources */ = {isa = PBXBuildFile; fileRef = A9FD37682E16A6BF005319A8 /* ShellTabView.swift */; };
+		A9FD376B2E16DABF005319A8 /* AnsiPickerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = A9FD376A2E16DABF005319A8 /* AnsiPickerView.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -174,6 +175,7 @@
 		A9FD375E2E14648E005319A8 /* KeyImporterView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = KeyImporterView.swift; sourceTree = "<group>"; };
 		A9FD37642E169937005319A8 /* AuthType.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AuthType.swift; sourceTree = "<group>"; };
 		A9FD37682E16A6BF005319A8 /* ShellTabView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShellTabView.swift; sourceTree = "<group>"; };
+		A9FD376A2E16DABF005319A8 /* AnsiPickerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AnsiPickerView.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -424,6 +426,7 @@
 			children = (
 				A9D8192C2E0E9EB500442D38 /* ThemeManagerView.swift */,
 				A9D8192E2E0F1BEE00442D38 /* ThemePreview.swift */,
+				A9FD376A2E16DABF005319A8 /* AnsiPickerView.swift */,
 			);
 			path = Themes;
 			sourceTree = "<group>";
@@ -606,6 +609,7 @@
 				A96C6A8A2E0C0B1100F377FE /* SSHState.swift in Sources */,
 				A9FD37692E16A6BF005319A8 /* ShellTabView.swift in Sources */,
 				A9DA97732E0D40C100142DDC /* HostSymbolPreview.swift in Sources */,
+				A9FD376B2E16DABF005319A8 /* AnsiPickerView.swift in Sources */,
 				A96BE6A62E113DB000C0FEE9 /* ColorCodable.swift in Sources */,
 				A92538C82DEE0742007E0A18 /* ContentView.swift in Sources */,
 				A96BE6A42E113D9400C0FEE9 /* ThemeCodable.swift in Sources */,

ShhShell/Host/HostsManager.swift

@@ -67,6 +67,11 @@ class HostsManager: ObservableObject, @unchecked Sendable {
 		task.resume()
 	}
 	
+	func selectAnsi(_ ansi: Int) {
+		withAnimation { selectedAnsi = ansi }
+		saveThemes()
+	}
+	
 	func selectTheme(_ selectedTheme: Theme) {
 		withAnimation { self.selectedTheme = selectedTheme }
 		saveThemes()

ShhShell/Views/Themes/AnsiPickerView.swift

@@ -0,0 +1,48 @@
+//
+//  AnsiPickerView.swift
+//  ShhShell
+//
+//  Created by neon443 on 03/07/2025.
+//
+
+import SwiftUI
+
+struct AnsiPickerView: View {
+	@ObservedObject var hostsManager: HostsManager
+	
+	var body: some View {
+		GeometryReader { geo in
+			VStack(spacing: 0) {
+				ForEach(1...2, id: \.self) { row in
+					HStack(spacing: 0) {
+						ForEach(1...8, id: \.self) { col in
+							let index = (row * col)-1
+							var isSelected: Bool { hostsManager.selectedAnsi == index }
+							ZStack {
+								Rectangle()
+									.fill(Color.blue)
+								Rectangle()
+									.fill(hostsManager.selectedTheme.ansi[index].suiColor)
+									.padding(isSelected ? 5 : 0)
+									.clipShape(
+										RoundedRectangle(
+											cornerRadius: isSelected ? 10 : 0
+										)
+									)
+									.onTapGesture {
+										hostsManager.selectAnsi(index)
+									}
+							}
+						}
+					}
+				}
+			}
+			.clipShape(RoundedRectangle(cornerRadius: 15))
+			.frame(width: 400, height: 100)
+		}
+	}
+}
+
+#Preview {
+	AnsiPickerView(hostsManager: HostsManager())
+}

ShhShell/Views/Themes/ThemeManagerView.swift

@@ -34,30 +34,7 @@ struct ThemeManagerView: View {
 				.ignoresSafeArea(.all)
 			GeometryReader { geo in
 				VStack {
-					VStack(spacing: 0) {
+					AnsiPickerView(hostsManager: hostsManager)
-						HStack(spacing: 0) {
-							ForEach(0..<8, id: \.self) { index in
-								Rectangle()
-									.fill(hostsManager.selectedTheme.ansi[index].suiColor)
-									.onTapGesture {
-										hostsManager.selectedAnsi = index
-										hostsManager.saveThemes()
-									}
-							}
-						}
-						HStack(spacing: 0) {
-							ForEach(8..<16, id: \.self) { index in
-								Rectangle()
-									.fill(hostsManager.selectedTheme.ansi[index].suiColor)
-									.onTapGesture {
-										hostsManager.selectedAnsi = index
-										hostsManager.saveThemes()
-									}
-							}
-						}
-					}
-					.clipShape(RoundedRectangle(cornerRadius: 15))
-					.frame(maxWidth: geo.size.width, maxHeight: geo.size.height/2)
 					
 					let columns: Int = max(1, Int((geo.size.width - 2*spacing) / (minColWidth + spacing)))
 					let layout = Array(repeating: grid, count: columns)