Refine macOS app visual hierarchy

2026-09-16 00:18:32 +02:00
parent c8242a844a
commit f9af5c21d8
5 changed files with 167 additions and 60 deletions
@@ -33,7 +33,7 @@ struct ChatWorkspaceView: View {
                        .padding(24)
                        .frame(maxWidth: .infinity, alignment: .leading)
                    }
-                    .background(.background)
+                    .background(Color(nsColor: .textBackgroundColor))
                    .onChange(of: messages.count) { _, _ in
                        guard let lastMessageID = messages.last?.id else { return }
                        withAnimation(.snappy) {
@@ -49,7 +49,8 @@ struct ChatWorkspaceView: View {
                    isFocused: $isComposerFocused,
                    sendAction: sendMessage
                )
-                .padding(16)
+                .padding(.horizontal, 20)
+                .padding(.vertical, 14)
            }
            .frame(minWidth: 520, maxWidth: .infinity, maxHeight: .infinity)

@@ -89,36 +90,60 @@ private struct ChatWorkspaceHeader: View {
    let project: SongProject

    var body: some View {
-        VStack(alignment: .leading, spacing: 14) {
-            HStack(alignment: .firstTextBaseline) {
+        VStack(alignment: .leading, spacing: 16) {
+            HStack(alignment: .top, spacing: 12) {
+                Image(systemName: "music.note")
+                    .font(.title3.weight(.semibold))
+                    .foregroundStyle(.tint)
+                    .frame(width: 42, height: 42)
+                    .background(.tint.opacity(0.12), in: RoundedRectangle(cornerRadius: 8))
+
                VStack(alignment: .leading, spacing: 4) {
                    Text(project.title)
-                        .font(.title.weight(.semibold))
+                        .font(.title2.weight(.semibold))
                        .lineLimit(1)

-                    Text("Song Project")
+                    Text(project.idea.isEmpty ? "Song Project" : project.idea)
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
+                        .lineLimit(2)
                }

-                Spacer()
+                Spacer(minLength: 12)

                Text(project.updatedAt.formatted(date: .abbreviated, time: .shortened))
                    .font(.caption)
                    .foregroundStyle(.secondary)
+                    .lineLimit(1)
            }

-            HStack(spacing: 10) {
-                ProjectMetricLabel(title: "Versions", value: project.versions.count, systemImage: "clock.arrow.circlepath")
-                ProjectMetricLabel(title: "Genres", value: project.genres.count, systemImage: "music.quarternote.3")
-                ProjectMetricLabel(title: "Instruments", value: project.selectedInstrumentTracks.count, systemImage: "pianokeys")
-                ProjectMetricLabel(title: "Sections", value: project.sections.count, systemImage: "text.line.first.and.arrowtriangle.forward")
-                ProjectMetricLabel(title: "Vocalists", value: project.vocalists.count, systemImage: "person.wave.2")
+            ViewThatFits(in: .horizontal) {
+                HStack(spacing: 12) {
+                    projectMetrics
+                }
+
+                LazyVGrid(
+                    columns: [GridItem(.adaptive(minimum: 104), spacing: 10)],
+                    alignment: .leading,
+                    spacing: 8
+                ) {
+                    projectMetrics
+                }
            }
        }
-        .padding(.horizontal, 24)
-        .padding(.vertical, 18)
+        .padding(.horizontal, 22)
+        .padding(.vertical, 20)
        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(.bar)
+    }
+
+    @ViewBuilder
+    private var projectMetrics: some View {
+        ProjectMetricLabel(title: "Versions", value: project.versions.count, systemImage: "clock.arrow.circlepath")
+        ProjectMetricLabel(title: "Genres", value: project.genres.count, systemImage: "music.quarternote.3")
+        ProjectMetricLabel(title: "Instruments", value: project.selectedInstrumentTracks.count, systemImage: "pianokeys")
+        ProjectMetricLabel(title: "Sections", value: project.sections.count, systemImage: "text.line.first.and.arrowtriangle.forward")
+        ProjectMetricLabel(title: "Vocalists", value: project.vocalists.count, systemImage: "person.wave.2")
    }
 }

@@ -137,6 +162,7 @@ private struct ProjectMetricLabel: View {
        .foregroundStyle(.secondary)
        .lineLimit(1)
        .labelStyle(.titleAndIcon)
+        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
    }
 }

@@ -144,11 +170,15 @@ private struct ChatMessageBubble: View {
    let message: ChatWorkspaceMessage

    var body: some View {
-        HStack {
+        HStack(alignment: .bottom, spacing: 8) {
            if message.role == .user {
                Spacer(minLength: 64)
            }

+            if message.role == .assistant {
+                ChatRoleMark(role: message.role)
+            }
+
            Text(message.text)
                .font(.body)
                .foregroundStyle(message.role == .user ? .white : .primary)
@@ -157,6 +187,10 @@ private struct ChatMessageBubble: View {
                .background(message.role == .user ? Color.accentColor : Color(nsColor: .controlBackgroundColor), in: RoundedRectangle(cornerRadius: 8))
                .frame(maxWidth: 620, alignment: message.role == .user ? .trailing : .leading)

+            if message.role == .user {
+                ChatRoleMark(role: message.role)
+            }
+
            if message.role == .assistant {
                Spacer(minLength: 64)
            }
@@ -165,6 +199,19 @@ private struct ChatMessageBubble: View {
    }
 }

+private struct ChatRoleMark: View {
+    let role: ChatWorkspaceMessage.Role
+
+    var body: some View {
+        Image(systemName: role == .assistant ? "sparkles" : "person.fill")
+            .font(.caption.weight(.semibold))
+            .foregroundStyle(role == .assistant ? Color.teal : Color.accentColor)
+            .frame(width: 28, height: 28)
+            .background(.quaternary, in: RoundedRectangle(cornerRadius: 7))
+            .accessibilityHidden(true)
+    }
+}
+
 private struct ChatComposer: View {
    @Binding var text: String
    var isFocused: FocusState<Bool>.Binding
@@ -173,7 +220,7 @@ private struct ChatComposer: View {
    var body: some View {
        HStack(alignment: .bottom, spacing: 10) {
            TextField("Describe the song idea, lyrics, mood, or arrangement", text: $text, axis: .vertical)
-                .textFieldStyle(.roundedBorder)
+                .textFieldStyle(.plain)
                .lineLimit(1...5)
                .focused(isFocused)
                .onSubmit(sendAction)
@@ -187,6 +234,8 @@ private struct ChatComposer: View {
            .disabled(text.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty)
            .help("Send")
        }
+        .padding(10)
+        .background(.quaternary, in: RoundedRectangle(cornerRadius: 8))
    }
 }