UI redesign Phase 1: NavigationSplitView with collapsible sidebar
- Replace root VStack with NavigationSplitView (2-column, collapsible sidebar) - Add SidebarView: new chat button, conversation search, list with swipe actions - Slim HeaderView to text-only (provider + model + star); remove all icon rows - Move status pills (Online, MCP, Synced) to footer right side - Remove version number and shortcut hints from footer - Add resizable InputBar with drag handle (persisted height) and globe/network.slash online toggle - Fix Norwegian menu appearing on English systems (CFBundleLocalizations in Info.plist) - Add View menu (Model Info, History, Stats, Credits, Online Mode toggle ⌘⇧O) - Add ⌘L as alias for Search Conversations (muscle memory for /load users) - Add Check for Updates to Help menu with download URL from Gitea API - Add one-time Intel/Rosetta deprecation warning on first launch - Swift 6: fix self.Self.isoString() call sites in DatabaseService Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -37,10 +37,6 @@ struct ChatView: View {
|
||||
HeaderView(
|
||||
provider: viewModel.currentProvider,
|
||||
model: viewModel.selectedModel,
|
||||
stats: viewModel.sessionStats,
|
||||
onlineMode: viewModel.onlineMode,
|
||||
mcpEnabled: viewModel.mcpEnabled,
|
||||
mcpStatus: viewModel.mcpStatus,
|
||||
onModelSelect: onModelSelect,
|
||||
onProviderChange: onProviderChange
|
||||
)
|
||||
@@ -85,10 +81,13 @@ struct ChatView: View {
|
||||
InputBar(
|
||||
text: $viewModel.inputText,
|
||||
isGenerating: viewModel.isGenerating,
|
||||
mcpStatus: viewModel.mcpStatus,
|
||||
onlineMode: viewModel.onlineMode,
|
||||
onSend: viewModel.sendMessage,
|
||||
onCancel: viewModel.cancelGeneration
|
||||
onCancel: viewModel.cancelGeneration,
|
||||
onToggleOnline: {
|
||||
viewModel.onlineMode.toggle()
|
||||
SettingsService.shared.onlineMode = viewModel.onlineMode
|
||||
}
|
||||
)
|
||||
|
||||
// Footer
|
||||
@@ -96,7 +95,9 @@ struct ChatView: View {
|
||||
stats: viewModel.sessionStats,
|
||||
conversationName: viewModel.currentConversationName,
|
||||
hasUnsavedChanges: viewModel.hasUnsavedChanges,
|
||||
onQuickSave: viewModel.quickSave
|
||||
onQuickSave: viewModel.quickSave,
|
||||
onlineMode: viewModel.onlineMode,
|
||||
mcpEnabled: viewModel.mcpEnabled
|
||||
)
|
||||
}
|
||||
.background(Color.oaiBackground)
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// ContentView.swift
|
||||
// oAI
|
||||
//
|
||||
// Root navigation container
|
||||
// Root navigation container — NavigationSplitView with collapsible sidebar
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
// Copyright (C) 2026 Rune Olsen
|
||||
@@ -24,30 +24,34 @@
|
||||
|
||||
|
||||
import SwiftUI
|
||||
#if os(macOS)
|
||||
import Darwin // uname, sysctlbyname
|
||||
#endif
|
||||
|
||||
struct ContentView: View {
|
||||
@Environment(ChatViewModel.self) var chatViewModel
|
||||
private var updateService = UpdateCheckService.shared
|
||||
@State private var columnVisibility: NavigationSplitViewVisibility = .all
|
||||
@State private var showIntelWarning = false
|
||||
|
||||
var body: some View {
|
||||
@Bindable var vm = chatViewModel
|
||||
NavigationStack {
|
||||
NavigationSplitView(columnVisibility: $columnVisibility) {
|
||||
SidebarView()
|
||||
.navigationSplitViewColumnWidth(min: 200, ideal: 240, max: 340)
|
||||
} detail: {
|
||||
ChatView(
|
||||
onModelSelect: { chatViewModel.showModelSelector = true },
|
||||
onProviderChange: { newProvider in
|
||||
chatViewModel.changeProvider(newProvider)
|
||||
}
|
||||
)
|
||||
.navigationTitle("")
|
||||
.toolbar {
|
||||
#if os(macOS)
|
||||
macOSToolbar
|
||||
#endif
|
||||
}
|
||||
}
|
||||
.frame(minWidth: 860, minHeight: 560)
|
||||
#if os(macOS)
|
||||
.onAppear {
|
||||
NSApplication.shared.windows.forEach { $0.tabbingMode = .disallowed }
|
||||
checkIntelWarning()
|
||||
}
|
||||
.onKeyPress(.return, phases: .down) { press in
|
||||
if press.modifiers.contains(.command) {
|
||||
@@ -65,7 +69,6 @@ struct ContentView: View {
|
||||
let oldModel = chatViewModel.selectedModel
|
||||
chatViewModel.selectModel(model)
|
||||
chatViewModel.showModelSelector = false
|
||||
// Trigger auto-save on model switch
|
||||
Task {
|
||||
await chatViewModel.onModelSwitch(from: oldModel, to: model)
|
||||
}
|
||||
@@ -113,125 +116,56 @@ struct ContentView: View {
|
||||
chatViewModel.inputText = input
|
||||
})
|
||||
}
|
||||
.alert("Intel Mac Support Ending", isPresented: $showIntelWarning) {
|
||||
Button("Got It") {
|
||||
UserDefaults.standard.set(true, forKey: "hasShownIntelWarning")
|
||||
}
|
||||
} message: {
|
||||
Text("oAI v2.4 is the last version to support Intel Macs and Rosetta. Starting with macOS 28, oAI will require Apple Silicon. Consider upgrading your Mac to continue receiving updates.")
|
||||
}
|
||||
.alert("Software Update", isPresented: Binding(
|
||||
get: { updateService.manualCheckMessage != nil },
|
||||
set: { if !$0 { updateService.manualCheckMessage = nil } }
|
||||
)) {
|
||||
if updateService.updateAvailable {
|
||||
if let url = updateService.downloadURL {
|
||||
Button("Download v\(updateService.latestVersion ?? "")") {
|
||||
NSWorkspace.shared.open(url)
|
||||
}
|
||||
}
|
||||
Button("Release Page") { updateService.openReleasesPage() }
|
||||
Button("Later", role: .cancel) { }
|
||||
} else {
|
||||
Button("OK", role: .cancel) { }
|
||||
}
|
||||
} message: {
|
||||
Text(updateService.manualCheckMessage ?? "")
|
||||
}
|
||||
}
|
||||
|
||||
#if os(macOS)
|
||||
@ToolbarContentBuilder
|
||||
private var macOSToolbar: some ToolbarContent {
|
||||
let settings = SettingsService.shared
|
||||
let showLabels = settings.showToolbarLabels
|
||||
let iconSize = settings.toolbarIconSize
|
||||
private func checkIntelWarning() {
|
||||
guard !UserDefaults.standard.bool(forKey: "hasShownIntelWarning") else { return }
|
||||
guard isIntelNative || isRosetta else { return }
|
||||
showIntelWarning = true
|
||||
}
|
||||
|
||||
ToolbarItemGroup(placement: .automatic) {
|
||||
// New conversation
|
||||
Button(action: { chatViewModel.newConversation() }) {
|
||||
ToolbarLabel(title: "New Chat", systemImage: "square.and.pencil", showLabels: showLabels, iconSize: iconSize)
|
||||
}
|
||||
.keyboardShortcut("n", modifiers: .command)
|
||||
.help("New conversation")
|
||||
|
||||
Button(action: { chatViewModel.showConversations = true }) {
|
||||
ToolbarLabel(title: "Conversations", systemImage: "clock.arrow.circlepath", showLabels: showLabels, iconSize: iconSize)
|
||||
}
|
||||
.keyboardShortcut("l", modifiers: .command)
|
||||
.help("Saved conversations (Cmd+L)")
|
||||
|
||||
Button(action: { chatViewModel.showHistory = true }) {
|
||||
ToolbarLabel(title: "History", systemImage: "list.bullet", showLabels: showLabels, iconSize: iconSize)
|
||||
}
|
||||
.keyboardShortcut("h", modifiers: .command)
|
||||
.help("Command history (Cmd+H)")
|
||||
|
||||
Spacer()
|
||||
|
||||
Button(action: { chatViewModel.showModelSelector = true }) {
|
||||
ToolbarLabel(title: "Model", systemImage: "cpu", showLabels: showLabels, iconSize: iconSize)
|
||||
}
|
||||
.keyboardShortcut("m", modifiers: .command)
|
||||
.help("Select AI model (Cmd+M)")
|
||||
|
||||
Button(action: {
|
||||
if let model = chatViewModel.selectedModel {
|
||||
chatViewModel.modelInfoTarget = model
|
||||
}
|
||||
}) {
|
||||
ToolbarLabel(title: "Info", systemImage: "info.circle", showLabels: showLabels, iconSize: iconSize)
|
||||
}
|
||||
.keyboardShortcut("i", modifiers: .command)
|
||||
.help("Model info (Cmd+I)")
|
||||
.disabled(chatViewModel.selectedModel == nil)
|
||||
|
||||
Button(action: { chatViewModel.showStats = true }) {
|
||||
ToolbarLabel(title: "Stats", systemImage: "chart.bar", showLabels: showLabels, iconSize: iconSize)
|
||||
}
|
||||
.help("Session statistics")
|
||||
|
||||
Button(action: { chatViewModel.showCredits = true }) {
|
||||
ToolbarLabel(title: "Credits", systemImage: "creditcard", showLabels: showLabels, iconSize: iconSize)
|
||||
}
|
||||
.help("Check API credits")
|
||||
|
||||
Spacer()
|
||||
|
||||
Button(action: { chatViewModel.showSettings = true }) {
|
||||
ToolbarLabel(title: "Settings", systemImage: "gearshape", showLabels: showLabels, iconSize: iconSize)
|
||||
}
|
||||
.keyboardShortcut(",", modifiers: .command)
|
||||
.help("Settings (Cmd+,)")
|
||||
|
||||
Button(action: { chatViewModel.showHelp = true }) {
|
||||
ToolbarLabel(title: "Help", systemImage: "questionmark.circle", showLabels: showLabels, iconSize: iconSize)
|
||||
}
|
||||
.keyboardShortcut("/", modifiers: .command)
|
||||
.help("Help & commands (Cmd+/)")
|
||||
private var isIntelNative: Bool {
|
||||
var systemInfo = utsname()
|
||||
uname(&systemInfo)
|
||||
let machine = withUnsafeBytes(of: &systemInfo.machine) {
|
||||
String(cString: $0.bindMemory(to: CChar.self).baseAddress!)
|
||||
}
|
||||
return machine.contains("x86_64")
|
||||
}
|
||||
|
||||
private var isRosetta: Bool {
|
||||
var ret: Int32 = 0
|
||||
var size = MemoryLayout<Int32>.size
|
||||
sysctlbyname("sysctl.proc_translated", &ret, &size, nil, 0)
|
||||
return ret == 1
|
||||
}
|
||||
#endif
|
||||
|
||||
}
|
||||
|
||||
// Helper view for toolbar labels
|
||||
struct ToolbarLabel: View {
|
||||
let title: LocalizedStringKey
|
||||
let systemImage: String
|
||||
let showLabels: Bool
|
||||
let iconSize: Double
|
||||
|
||||
// imageScale for the original range (≤32); explicit font size for the new extra-large range (>32)
|
||||
private var scale: Image.Scale {
|
||||
switch iconSize {
|
||||
case ...18: return .small
|
||||
case 19...24: return .medium
|
||||
default: return .large
|
||||
}
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
if iconSize > 32 {
|
||||
// Extra-large: explicit font size above the system .large ceiling
|
||||
// Offset by 16 so slider 34→18pt, 36→20pt, 38→22pt, 40→24pt
|
||||
if showLabels {
|
||||
Label(title, systemImage: systemImage)
|
||||
.labelStyle(.titleAndIcon)
|
||||
.font(.system(size: iconSize - 16))
|
||||
} else {
|
||||
Label(title, systemImage: systemImage)
|
||||
.labelStyle(.iconOnly)
|
||||
.font(.system(size: iconSize - 16))
|
||||
}
|
||||
} else {
|
||||
// Original behaviour — imageScale keeps existing look intact
|
||||
if showLabels {
|
||||
Label(title, systemImage: systemImage)
|
||||
.labelStyle(.titleAndIcon)
|
||||
.imageScale(scale)
|
||||
} else {
|
||||
Label(title, systemImage: systemImage)
|
||||
.labelStyle(.iconOnly)
|
||||
.imageScale(scale)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
|
||||
@@ -30,15 +30,22 @@ struct FooterView: View {
|
||||
let conversationName: String?
|
||||
let hasUnsavedChanges: Bool
|
||||
let onQuickSave: (() -> Void)?
|
||||
let onlineMode: Bool
|
||||
let mcpEnabled: Bool
|
||||
private let settings = SettingsService.shared
|
||||
|
||||
init(stats: SessionStats,
|
||||
conversationName: String? = nil,
|
||||
hasUnsavedChanges: Bool = false,
|
||||
onQuickSave: (() -> Void)? = nil) {
|
||||
onQuickSave: (() -> Void)? = nil,
|
||||
onlineMode: Bool = false,
|
||||
mcpEnabled: Bool = false) {
|
||||
self.stats = stats
|
||||
self.conversationName = conversationName
|
||||
self.hasUnsavedChanges = hasUnsavedChanges
|
||||
self.onQuickSave = onQuickSave
|
||||
self.onlineMode = onlineMode
|
||||
self.mcpEnabled = mcpEnabled
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
@@ -71,6 +78,21 @@ struct FooterView: View {
|
||||
|
||||
Spacer()
|
||||
|
||||
// Status pills — Online, MCP, Sync
|
||||
#if os(macOS)
|
||||
HStack(spacing: 6) {
|
||||
if onlineMode {
|
||||
StatusPill(icon: "globe", label: "Online", color: .green)
|
||||
}
|
||||
if mcpEnabled {
|
||||
StatusPill(icon: "folder", label: "MCP", color: .blue)
|
||||
}
|
||||
if settings.syncEnabled && settings.syncAutoSave {
|
||||
SyncStatusPill()
|
||||
}
|
||||
}
|
||||
#endif
|
||||
|
||||
// Save indicator (only when chat has messages)
|
||||
if stats.messageCount > 0 {
|
||||
SaveIndicator(
|
||||
@@ -80,17 +102,11 @@ struct FooterView: View {
|
||||
)
|
||||
}
|
||||
|
||||
// Update available badge
|
||||
// Update available badge (shows only when an update exists — no version number)
|
||||
#if os(macOS)
|
||||
UpdateBadge()
|
||||
#endif
|
||||
|
||||
// Shortcuts hint
|
||||
#if os(macOS)
|
||||
Text("⌘N New • ⌘M Model • ⌘S Save")
|
||||
.font(.caption2)
|
||||
.foregroundColor(.oaiSecondary)
|
||||
#endif
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 8)
|
||||
@@ -242,7 +258,6 @@ struct SyncStatusFooter: View {
|
||||
|
||||
struct UpdateBadge: View {
|
||||
private let updater = UpdateCheckService.shared
|
||||
private let currentVersion = Bundle.main.infoDictionary?["CFBundleShortVersionString"] as? String ?? "?"
|
||||
|
||||
var body: some View {
|
||||
if updater.updateAvailable {
|
||||
@@ -258,10 +273,6 @@ struct UpdateBadge: View {
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.help("A new version is available — click to open the releases page")
|
||||
} else {
|
||||
Text("v\(currentVersion)")
|
||||
.font(.caption2)
|
||||
.foregroundColor(.oaiSecondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
// HeaderView.swift
|
||||
// oAI
|
||||
//
|
||||
// Header bar with provider, model, and stats
|
||||
// Slim header — provider, model name, star only.
|
||||
// Status pills and stats live in SidebarView and FooterView respectively.
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
// Copyright (C) 2026 Rune Olsen
|
||||
@@ -28,18 +29,13 @@ import SwiftUI
|
||||
struct HeaderView: View {
|
||||
let provider: Settings.Provider
|
||||
let model: ModelInfo?
|
||||
let stats: SessionStats
|
||||
let onlineMode: Bool
|
||||
let mcpEnabled: Bool
|
||||
let mcpStatus: String?
|
||||
let onModelSelect: () -> Void
|
||||
let onProviderChange: (Settings.Provider) -> Void
|
||||
private let settings = SettingsService.shared
|
||||
private let registry = ProviderRegistry.shared
|
||||
private let gitSync = GitSyncService.shared
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 20) {
|
||||
HStack(spacing: 12) {
|
||||
// Provider picker dropdown — only shows configured providers
|
||||
Menu {
|
||||
ForEach(registry.configuredProviders, id: \.self) { p in
|
||||
@@ -75,7 +71,7 @@ struct HeaderView: View {
|
||||
.fixedSize()
|
||||
.help("Switch provider")
|
||||
|
||||
// Model info (clickable → model selector)
|
||||
// Model name (clickable → model selector)
|
||||
Button(action: onModelSelect) {
|
||||
if let model = model {
|
||||
HStack(spacing: 6) {
|
||||
@@ -116,7 +112,6 @@ struct HeaderView: View {
|
||||
Text("No model selected")
|
||||
.font(.system(size: settings.guiTextSize))
|
||||
.foregroundColor(.oaiSecondary)
|
||||
|
||||
Image(systemName: "chevron.down")
|
||||
.font(.caption2)
|
||||
.foregroundColor(.oaiSecondary)
|
||||
@@ -126,6 +121,7 @@ struct HeaderView: View {
|
||||
.buttonStyle(.plain)
|
||||
.help("Select model")
|
||||
|
||||
// Favourite star
|
||||
if let model = model {
|
||||
let isFav = settings.favoriteModelIds.contains(model.id)
|
||||
Button(action: { settings.toggleFavoriteModel(model.id) }) {
|
||||
@@ -138,40 +134,9 @@ struct HeaderView: View {
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
// Status indicators
|
||||
HStack(spacing: 8) {
|
||||
if model?.capabilities.imageGeneration == true {
|
||||
StatusPill(icon: "paintbrush", label: "Image", color: .purple)
|
||||
}
|
||||
if onlineMode {
|
||||
StatusPill(icon: "globe", label: "Online", color: .green)
|
||||
}
|
||||
if mcpEnabled {
|
||||
StatusPill(icon: "folder", label: "MCP", color: .blue)
|
||||
}
|
||||
if settings.syncEnabled && settings.syncAutoSave {
|
||||
SyncStatusPill()
|
||||
}
|
||||
}
|
||||
|
||||
// Divider between status and stats
|
||||
if onlineMode || mcpEnabled || model?.capabilities.imageGeneration == true || (settings.syncEnabled && settings.syncAutoSave) {
|
||||
Divider()
|
||||
.frame(height: 16)
|
||||
.opacity(0.5)
|
||||
}
|
||||
|
||||
// Quick stats
|
||||
HStack(spacing: 16) {
|
||||
StatItem(icon: "message", value: "\(stats.messageCount)")
|
||||
StatItem(icon: "arrow.up.arrow.down", value: stats.totalTokensDisplay)
|
||||
StatItem(icon: "dollarsign", value: stats.totalCostDisplay)
|
||||
}
|
||||
.font(.caption)
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 10)
|
||||
.padding(.vertical, 8)
|
||||
.background(.ultraThinMaterial)
|
||||
.overlay(
|
||||
Rectangle()
|
||||
@@ -182,22 +147,7 @@ struct HeaderView: View {
|
||||
}
|
||||
}
|
||||
|
||||
struct StatItem: View {
|
||||
let icon: String
|
||||
let value: String
|
||||
private let settings = SettingsService.shared
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 4) {
|
||||
Image(systemName: icon)
|
||||
.font(.system(size: settings.guiTextSize - 3))
|
||||
.foregroundColor(.oaiSecondary)
|
||||
Text(value)
|
||||
.font(.system(size: settings.guiTextSize - 1, weight: .medium))
|
||||
.foregroundColor(.oaiPrimary)
|
||||
}
|
||||
}
|
||||
}
|
||||
// MARK: - Status Pills (used by SidebarView)
|
||||
|
||||
struct StatusPill: View {
|
||||
let icon: String
|
||||
@@ -284,15 +234,6 @@ struct SyncStatusPill: View {
|
||||
HeaderView(
|
||||
provider: .openrouter,
|
||||
model: ModelInfo.mockModels.first,
|
||||
stats: SessionStats(
|
||||
totalInputTokens: 125,
|
||||
totalOutputTokens: 434,
|
||||
totalCost: 0.00111,
|
||||
messageCount: 4
|
||||
),
|
||||
onlineMode: true,
|
||||
mcpEnabled: true,
|
||||
mcpStatus: "MCP",
|
||||
onModelSelect: {},
|
||||
onProviderChange: { _ in }
|
||||
)
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// InputBar.swift
|
||||
// oAI
|
||||
//
|
||||
// Message input bar with status indicators
|
||||
// Message input bar with resizable height and online toggle
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
// Copyright (C) 2026 Rune Olsen
|
||||
@@ -24,20 +24,31 @@
|
||||
|
||||
|
||||
import SwiftUI
|
||||
#if os(macOS)
|
||||
import AppKit
|
||||
#endif
|
||||
|
||||
struct InputBar: View {
|
||||
@Binding var text: String
|
||||
let isGenerating: Bool
|
||||
let mcpStatus: String?
|
||||
let onlineMode: Bool
|
||||
let onSend: () -> Void
|
||||
let onCancel: () -> Void
|
||||
let onToggleOnline: () -> Void
|
||||
|
||||
private let settings = SettingsService.shared
|
||||
|
||||
// Resizable input height — persisted to settings
|
||||
@State private var inputHeight: CGFloat = CGFloat(SettingsService.shared.inputBarHeight)
|
||||
@State private var dragStartHeight: CGFloat = CGFloat(SettingsService.shared.inputBarHeight)
|
||||
|
||||
@State private var showCommandDropdown = false
|
||||
@State private var selectedSuggestionIndex: Int = 0
|
||||
@FocusState private var isInputFocused: Bool
|
||||
|
||||
private static let minInputHeight: CGFloat = 56
|
||||
private static let maxInputHeight: CGFloat = 320
|
||||
|
||||
/// Commands that execute immediately without additional arguments
|
||||
private static let immediateCommands: Set<String> = [
|
||||
"/help", "/history", "/model", "/clear", "/retry", "/stats", "/config",
|
||||
@@ -56,48 +67,42 @@ struct InputBar: View {
|
||||
CommandSuggestionsView(
|
||||
searchText: text,
|
||||
selectedIndex: selectedSuggestionIndex,
|
||||
onSelect: { command in
|
||||
selectCommand(command)
|
||||
}
|
||||
onSelect: selectCommand
|
||||
)
|
||||
.frame(width: 400)
|
||||
.frame(maxHeight: 200)
|
||||
.transition(.move(edge: .bottom).combined(with: .opacity))
|
||||
Spacer()
|
||||
}
|
||||
.padding(.leading, 96) // Align with input box (status badges + spacing)
|
||||
.padding(.leading, 16)
|
||||
}
|
||||
|
||||
// Input area
|
||||
HStack(alignment: .bottom, spacing: 12) {
|
||||
// Status indicators
|
||||
HStack(spacing: 6) {
|
||||
if let mcp = mcpStatus {
|
||||
StatusBadge(text: mcp, color: .blue)
|
||||
}
|
||||
if onlineMode {
|
||||
StatusBadge(text: "🌐", color: .green)
|
||||
}
|
||||
}
|
||||
.frame(width: 80, alignment: .leading)
|
||||
// Drag-to-resize handle
|
||||
dragHandle
|
||||
|
||||
// Text input
|
||||
// Input row
|
||||
HStack(alignment: .bottom, spacing: 12) {
|
||||
// Text input with globe toggle in bottom-left corner
|
||||
ZStack(alignment: .topLeading) {
|
||||
// Placeholder
|
||||
if text.isEmpty {
|
||||
Text("Type a message or / for commands...")
|
||||
.font(.system(size: settings.inputTextSize))
|
||||
.foregroundColor(.oaiSecondary)
|
||||
.padding(.horizontal, 12)
|
||||
.padding(.vertical, 10)
|
||||
.padding(.top, 10)
|
||||
.allowsHitTesting(false)
|
||||
}
|
||||
|
||||
// Editor — fills the fixed-height box, bottom area reserved for globe
|
||||
TextEditor(text: $text)
|
||||
.font(.system(size: settings.inputTextSize))
|
||||
.foregroundColor(.oaiPrimary)
|
||||
.scrollContentBackground(.hidden)
|
||||
.frame(minHeight: 44, maxHeight: 120)
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 6)
|
||||
.padding(.top, 6)
|
||||
.padding(.bottom, 30)
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
.focused($isInputFocused)
|
||||
.onChange(of: text) {
|
||||
showCommandDropdown = text.hasPrefix("/")
|
||||
@@ -105,7 +110,6 @@ struct InputBar: View {
|
||||
}
|
||||
#if os(macOS)
|
||||
.onKeyPress(.upArrow) {
|
||||
// Navigate command dropdown
|
||||
if showCommandDropdown && selectedSuggestionIndex > 0 {
|
||||
selectedSuggestionIndex -= 1
|
||||
return .handled
|
||||
@@ -113,7 +117,6 @@ struct InputBar: View {
|
||||
return .ignored
|
||||
}
|
||||
.onKeyPress(.downArrow) {
|
||||
// Navigate command dropdown
|
||||
if showCommandDropdown {
|
||||
let count = CommandSuggestionsView.filteredCommands(for: text).count
|
||||
if selectedSuggestionIndex < count - 1 {
|
||||
@@ -124,25 +127,12 @@ struct InputBar: View {
|
||||
return .ignored
|
||||
}
|
||||
.onKeyPress(.escape) {
|
||||
// If command dropdown is showing, close it
|
||||
if showCommandDropdown {
|
||||
showCommandDropdown = false
|
||||
return .handled
|
||||
}
|
||||
// If model is generating, cancel it
|
||||
if isGenerating {
|
||||
onCancel()
|
||||
return .handled
|
||||
}
|
||||
if showCommandDropdown { showCommandDropdown = false; return .handled }
|
||||
if isGenerating { onCancel(); return .handled }
|
||||
return .ignored
|
||||
}
|
||||
.onKeyPress(.return, phases: .down) { press in
|
||||
// Shift+Return: always insert newline (let system handle)
|
||||
if press.modifiers.contains(.shift) {
|
||||
return .ignored
|
||||
}
|
||||
|
||||
// If command dropdown is showing, select the highlighted command
|
||||
if press.modifiers.contains(.shift) { return .ignored }
|
||||
if showCommandDropdown {
|
||||
let suggestions = CommandSuggestionsView.filteredCommands(for: text)
|
||||
if !suggestions.isEmpty && selectedSuggestionIndex < suggestions.count {
|
||||
@@ -150,27 +140,40 @@ struct InputBar: View {
|
||||
return .handled
|
||||
}
|
||||
}
|
||||
// Return (plain or with Cmd): send message
|
||||
if !text.isEmpty {
|
||||
onSend()
|
||||
return .handled
|
||||
}
|
||||
// Empty text: do nothing
|
||||
if !text.isEmpty { onSend(); return .handled }
|
||||
return .handled
|
||||
}
|
||||
#endif
|
||||
|
||||
// Online / offline toggle — bottom-left of the text box
|
||||
VStack {
|
||||
Spacer()
|
||||
HStack {
|
||||
Button(action: onToggleOnline) {
|
||||
Image(systemName: onlineMode ? "globe" : "network.slash")
|
||||
.font(.system(size: 13, weight: .medium))
|
||||
.foregroundStyle(onlineMode ? Color.green : Color.secondary)
|
||||
.padding(8)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.help(onlineMode
|
||||
? "Online mode on — click to go offline"
|
||||
: "Offline — click to go online")
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
}
|
||||
.frame(height: inputHeight)
|
||||
.background(Color.oaiSurface)
|
||||
.cornerRadius(8)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 8)
|
||||
.stroke(isInputFocused ? Color.oaiAccent : Color.oaiBorder, lineWidth: 1)
|
||||
)
|
||||
|
||||
// Action buttons
|
||||
|
||||
// Send / stop + attach buttons
|
||||
VStack(spacing: 8) {
|
||||
#if os(macOS)
|
||||
// File attach button
|
||||
Button(action: pickFile) {
|
||||
Image(systemName: "paperclip")
|
||||
.font(.title2)
|
||||
@@ -209,21 +212,47 @@ struct InputBar: View {
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Drag handle
|
||||
|
||||
private var dragHandle: some View {
|
||||
Color.clear
|
||||
.frame(height: 8)
|
||||
.frame(maxWidth: .infinity)
|
||||
.contentShape(Rectangle())
|
||||
.overlay {
|
||||
Capsule()
|
||||
.fill(Color.secondary.opacity(0.25))
|
||||
.frame(width: 36, height: 3)
|
||||
}
|
||||
.gesture(
|
||||
DragGesture(minimumDistance: 1)
|
||||
.onChanged { value in
|
||||
let proposed = dragStartHeight - value.translation.height
|
||||
inputHeight = max(Self.minInputHeight, min(Self.maxInputHeight, proposed))
|
||||
}
|
||||
.onEnded { _ in
|
||||
dragStartHeight = inputHeight
|
||||
settings.inputBarHeight = Double(inputHeight)
|
||||
}
|
||||
)
|
||||
#if os(macOS)
|
||||
.onHover { hovering in
|
||||
if hovering { NSCursor.resizeUpDown.push() } else { NSCursor.pop() }
|
||||
}
|
||||
#endif
|
||||
}
|
||||
|
||||
// MARK: - Helpers
|
||||
|
||||
private func selectCommand(_ command: String) {
|
||||
showCommandDropdown = false
|
||||
if Self.immediateCommands.contains(command) {
|
||||
// Execute immediately
|
||||
text = command
|
||||
onSend()
|
||||
} else if let shortcut = SettingsService.shared.userShortcuts.first(where: { $0.command == command }) {
|
||||
if shortcut.needsInput {
|
||||
text = command + " "
|
||||
} else {
|
||||
text = command
|
||||
onSend()
|
||||
}
|
||||
text = shortcut.needsInput ? command + " " : command
|
||||
if !shortcut.needsInput { onSend() }
|
||||
} else {
|
||||
// Put in input for user to complete
|
||||
text = command + " "
|
||||
}
|
||||
}
|
||||
@@ -235,36 +264,14 @@ struct InputBar: View {
|
||||
panel.canChooseDirectories = false
|
||||
panel.canChooseFiles = true
|
||||
panel.message = "Select files to attach"
|
||||
|
||||
guard panel.runModal() == .OK else { return }
|
||||
|
||||
let paths = panel.urls.map { $0.path }
|
||||
// Use @<path> format (angle brackets) to safely handle paths with spaces
|
||||
let attachmentText = paths.map { "@<\($0)>" }.joined(separator: " ")
|
||||
|
||||
if text.isEmpty {
|
||||
text = attachmentText + " "
|
||||
} else {
|
||||
text += " " + attachmentText
|
||||
}
|
||||
let attachmentText = panel.urls.map { "@<\($0.path)>" }.joined(separator: " ")
|
||||
text = text.isEmpty ? attachmentText + " " : text + " " + attachmentText
|
||||
}
|
||||
#endif
|
||||
}
|
||||
|
||||
struct StatusBadge: View {
|
||||
let text: String
|
||||
let color: Color
|
||||
|
||||
var body: some View {
|
||||
Text(text)
|
||||
.font(.caption)
|
||||
.foregroundColor(color)
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 3)
|
||||
.background(color.opacity(0.15))
|
||||
.cornerRadius(4)
|
||||
}
|
||||
}
|
||||
// MARK: - Command suggestions
|
||||
|
||||
struct CommandSuggestionsView: View {
|
||||
let searchText: String
|
||||
@@ -304,10 +311,9 @@ struct CommandSuggestionsView: View {
|
||||
]
|
||||
|
||||
static func allCommands() -> [(command: String, description: LocalizedStringKey)] {
|
||||
let shortcuts = SettingsService.shared.userShortcuts.map { s in
|
||||
SettingsService.shared.userShortcuts.map { s in
|
||||
(s.command, LocalizedStringKey("⚡ \(s.description)"))
|
||||
}
|
||||
return builtInCommands + shortcuts
|
||||
} + builtInCommands
|
||||
}
|
||||
|
||||
static func filteredCommands(for searchText: String) -> [(command: String, description: LocalizedStringKey)] {
|
||||
@@ -344,26 +350,20 @@ struct CommandSuggestionsView: View {
|
||||
.id(suggestion.command)
|
||||
|
||||
if index < suggestions.count - 1 {
|
||||
Divider()
|
||||
.background(Color.oaiBorder)
|
||||
Divider().background(Color.oaiBorder)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.onChange(of: selectedIndex) {
|
||||
if selectedIndex < suggestions.count {
|
||||
withAnimation {
|
||||
proxy.scrollTo(suggestions[selectedIndex].command, anchor: .center)
|
||||
}
|
||||
withAnimation { proxy.scrollTo(suggestions[selectedIndex].command, anchor: .center) }
|
||||
}
|
||||
}
|
||||
}
|
||||
.background(Color.oaiSurface)
|
||||
.cornerRadius(8)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 8)
|
||||
.stroke(Color.oaiBorder, lineWidth: 1)
|
||||
)
|
||||
.overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.oaiBorder, lineWidth: 1))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -373,10 +373,10 @@ struct CommandSuggestionsView: View {
|
||||
InputBar(
|
||||
text: .constant(""),
|
||||
isGenerating: false,
|
||||
mcpStatus: "📁 Files",
|
||||
onlineMode: true,
|
||||
onSend: {},
|
||||
onCancel: {}
|
||||
onCancel: {},
|
||||
onToggleOnline: {}
|
||||
)
|
||||
}
|
||||
.background(Color.oaiBackground)
|
||||
|
||||
@@ -0,0 +1,216 @@
|
||||
//
|
||||
// SidebarView.swift
|
||||
// oAI
|
||||
//
|
||||
// Collapsible sidebar: new chat, conversation list, status pills
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
// Copyright (C) 2026 Rune Olsen
|
||||
//
|
||||
// This file is part of oAI.
|
||||
//
|
||||
// oAI is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU Affero General Public License as
|
||||
// published by the Free Software Foundation, either version 3 of the
|
||||
// License, or (at your option) any later version.
|
||||
//
|
||||
// oAI is distributed in the hope that it will be useful, but WITHOUT
|
||||
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
|
||||
// or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General
|
||||
// Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU Affero General Public
|
||||
// License along with oAI. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
|
||||
import SwiftUI
|
||||
#if os(macOS)
|
||||
import AppKit
|
||||
#endif
|
||||
|
||||
struct SidebarView: View {
|
||||
@Environment(ChatViewModel.self) private var chatViewModel
|
||||
@State private var conversations: [Conversation] = []
|
||||
@State private var searchText = ""
|
||||
|
||||
private var filteredConversations: [Conversation] {
|
||||
guard !searchText.isEmpty else { return conversations }
|
||||
return conversations.filter { $0.name.lowercased().contains(searchText.lowercased()) }
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 0) {
|
||||
// New Chat button
|
||||
Button(action: { chatViewModel.newConversation() }) {
|
||||
HStack(spacing: 8) {
|
||||
Image(systemName: "square.and.pencil")
|
||||
.font(.system(size: 14))
|
||||
Text("New Chat")
|
||||
.font(.system(size: 14, weight: .medium))
|
||||
Spacer()
|
||||
}
|
||||
.foregroundColor(.oaiPrimary)
|
||||
.padding(.horizontal, 12)
|
||||
.padding(.vertical, 10)
|
||||
.contentShape(Rectangle())
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
|
||||
// Search field
|
||||
HStack(spacing: 6) {
|
||||
Image(systemName: "magnifyingglass")
|
||||
.font(.system(size: 12))
|
||||
.foregroundStyle(.secondary)
|
||||
TextField("Search conversations…", text: $searchText)
|
||||
.textFieldStyle(.plain)
|
||||
.font(.system(size: 13))
|
||||
if !searchText.isEmpty {
|
||||
Button {
|
||||
searchText = ""
|
||||
} label: {
|
||||
Image(systemName: "xmark.circle.fill")
|
||||
.foregroundStyle(.tertiary)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
Divider().frame(height: 12)
|
||||
Button {
|
||||
chatViewModel.showConversations = true
|
||||
} label: {
|
||||
Image(systemName: "slider.horizontal.3")
|
||||
.font(.system(size: 11))
|
||||
.foregroundStyle(.secondary)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.help("Advanced search — semantic search, bulk delete, export")
|
||||
}
|
||||
.padding(7)
|
||||
.background(.quaternary.opacity(0.5), in: RoundedRectangle(cornerRadius: 6))
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.bottom, 6)
|
||||
|
||||
Divider()
|
||||
|
||||
// Conversation list
|
||||
if filteredConversations.isEmpty {
|
||||
Spacer()
|
||||
VStack(spacing: 8) {
|
||||
Image(systemName: searchText.isEmpty ? "tray" : "magnifyingglass")
|
||||
.font(.title2)
|
||||
.foregroundStyle(.tertiary)
|
||||
Text(searchText.isEmpty ? "No Saved Conversations" : "No Matches")
|
||||
.font(.callout)
|
||||
.foregroundStyle(.secondary)
|
||||
}
|
||||
Spacer()
|
||||
} else {
|
||||
List {
|
||||
ForEach(filteredConversations) { conversation in
|
||||
SidebarConversationRow(conversation: conversation)
|
||||
.contentShape(Rectangle())
|
||||
.onTapGesture {
|
||||
chatViewModel.loadConversation(conversation)
|
||||
}
|
||||
.listRowBackground(
|
||||
chatViewModel.currentConversationName == conversation.name
|
||||
? Color.oaiAccent.opacity(0.15)
|
||||
: Color.clear
|
||||
)
|
||||
.swipeActions(edge: .trailing, allowsFullSwipe: false) {
|
||||
Button(role: .destructive) {
|
||||
deleteConversation(conversation)
|
||||
} label: {
|
||||
Label("Delete", systemImage: "trash")
|
||||
}
|
||||
Button {
|
||||
renameConversation(conversation)
|
||||
} label: {
|
||||
Label("Rename", systemImage: "pencil")
|
||||
}
|
||||
.tint(.orange)
|
||||
}
|
||||
}
|
||||
}
|
||||
.listStyle(.sidebar)
|
||||
}
|
||||
|
||||
}
|
||||
.onAppear { loadConversations() }
|
||||
.onChange(of: chatViewModel.currentConversationName) { loadConversations() }
|
||||
.onChange(of: chatViewModel.messages.count) { loadConversations() }
|
||||
}
|
||||
|
||||
private func loadConversations() {
|
||||
conversations = (try? DatabaseService.shared.listConversations()) ?? []
|
||||
}
|
||||
|
||||
private func deleteConversation(_ conversation: Conversation) {
|
||||
_ = try? DatabaseService.shared.deleteConversation(id: conversation.id)
|
||||
withAnimation {
|
||||
conversations.removeAll { $0.id == conversation.id }
|
||||
}
|
||||
}
|
||||
|
||||
private func renameConversation(_ conversation: Conversation) {
|
||||
#if os(macOS)
|
||||
let alert = NSAlert()
|
||||
alert.messageText = "Rename Conversation"
|
||||
alert.addButton(withTitle: "Rename")
|
||||
alert.addButton(withTitle: "Cancel")
|
||||
let input = NSTextField(frame: NSRect(x: 0, y: 0, width: 260, height: 24))
|
||||
input.stringValue = conversation.name
|
||||
input.selectText(nil)
|
||||
alert.accessoryView = input
|
||||
alert.window.initialFirstResponder = input
|
||||
guard alert.runModal() == .alertFirstButtonReturn else { return }
|
||||
let newName = input.stringValue.trimmingCharacters(in: .whitespaces)
|
||||
guard !newName.isEmpty, newName != conversation.name else { return }
|
||||
do {
|
||||
_ = try DatabaseService.shared.updateConversation(id: conversation.id, name: newName, messages: nil)
|
||||
if let i = conversations.firstIndex(where: { $0.id == conversation.id }) {
|
||||
conversations[i].name = newName
|
||||
conversations[i].updatedAt = Date()
|
||||
}
|
||||
chatViewModel.didRenameConversation(id: conversation.id, newName: newName)
|
||||
} catch {
|
||||
Log.db.error("Failed to rename conversation: \(error.localizedDescription)")
|
||||
}
|
||||
#endif
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Sidebar conversation row
|
||||
|
||||
struct SidebarConversationRow: View {
|
||||
let conversation: Conversation
|
||||
|
||||
private var formattedDate: String {
|
||||
let formatter = DateFormatter()
|
||||
formatter.dateFormat = "dd.MM.yyyy"
|
||||
return formatter.string(from: conversation.updatedAt)
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text(conversation.name)
|
||||
.font(.system(size: 13, weight: .medium))
|
||||
.lineLimit(1)
|
||||
HStack(spacing: 4) {
|
||||
Text("^[\(conversation.messageCount) message](inflect: true)")
|
||||
.font(.system(size: 11))
|
||||
Text("·")
|
||||
.font(.system(size: 11))
|
||||
Text(formattedDate)
|
||||
.font(.system(size: 11))
|
||||
}
|
||||
.foregroundStyle(.secondary)
|
||||
}
|
||||
.padding(.vertical, 2)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
SidebarView()
|
||||
.environment(ChatViewModel())
|
||||
.frame(width: 240, height: 600)
|
||||
}
|
||||
Reference in New Issue
Block a user