From 5603ce4c1e6b0ec5fca46950cfd9c71841dae440 Mon Sep 17 00:00:00 2001 From: Hariharan Mudaliar Date: Sun, 19 Oct 2025 14:02:43 +0530 Subject: [PATCH] Somewhat Fixed UI --- .../Stats/CPUStatsSharedViews.swift | 79 ++++++++++------ .../Stats/MemoryStatsDetailView.swift | 93 ++++++++++++------- 2 files changed, 109 insertions(+), 63 deletions(-) diff --git a/DynamicIsland/components/Stats/CPUStatsSharedViews.swift b/DynamicIsland/components/Stats/CPUStatsSharedViews.swift index f155dbd..7e010a6 100644 --- a/DynamicIsland/components/Stats/CPUStatsSharedViews.swift +++ b/DynamicIsland/components/Stats/CPUStatsSharedViews.swift @@ -62,38 +62,57 @@ struct CPUUsageDashboard: View { let idleColor: Color var body: some View { - HStack(alignment: .center, spacing: 28) { - CPUSegmentDonut( - breakdown: breakdown, - systemColor: systemColor, - userColor: userColor, - idleColor: idleColor - ) - .frame(width: 132, height: 132) - - VStack(alignment: .leading, spacing: 12) { - Text("Usage") - .font(.caption) - .foregroundColor(.secondary) - DetailRow(color: systemColor.opacity(0.95), label: "System", value: StatsFormatting.percentage(breakdown.system)) - DetailRow(color: userColor.opacity(0.95), label: "User", value: StatsFormatting.percentage(breakdown.user)) - DetailRow(color: idleColor.opacity(0.7), label: "Idle", value: StatsFormatting.percentage(breakdown.idle)) - DetailRow(color: nil, label: "Active", value: StatsFormatting.percentage(breakdown.activeUsage)) - } - .frame(maxWidth: .infinity, alignment: .leading) - - VStack(alignment: .leading, spacing: 10) { - Text("System") - .font(.caption) - .foregroundColor(.secondary) - DetailRow(color: nil, label: "Logical cores", value: "\(max(coreCount, 1))") - DetailRow(color: nil, label: "Uptime", value: StatsFormatting.abbreviatedDuration(uptime)) + let usageSection = VStack(alignment: .leading, spacing: 12) { + Text("Usage") + .font(.caption) + .foregroundColor(.secondary) + DetailRow(color: systemColor.opacity(0.95), label: "System", value: StatsFormatting.percentage(breakdown.system)) + DetailRow(color: userColor.opacity(0.95), label: "User", value: StatsFormatting.percentage(breakdown.user)) + DetailRow(color: idleColor.opacity(0.7), label: "Idle", value: StatsFormatting.percentage(breakdown.idle)) + DetailRow(color: nil, label: "Active", value: StatsFormatting.percentage(breakdown.activeUsage)) + } + .frame(maxWidth: .infinity, alignment: .leading) + + let systemSection = VStack(alignment: .leading, spacing: 10) { + Text("System") + .font(.caption) + .foregroundColor(.secondary) + DetailRow(color: nil, label: "Logical cores", value: "\(max(coreCount, 1))") + DetailRow(color: nil, label: "Uptime", value: StatsFormatting.abbreviatedDuration(uptime)) + Divider().padding(.vertical, 4) + DetailRow(color: nil, label: "Load 1m", value: String(format: "%.2f", loadAverage.oneMinute)) + DetailRow(color: nil, label: "Load 5m", value: String(format: "%.2f", loadAverage.fiveMinutes)) + DetailRow(color: nil, label: "Load 15m", value: String(format: "%.2f", loadAverage.fifteenMinutes)) + } + .frame(maxWidth: .infinity, alignment: .leading) + + return ViewThatFits(in: .horizontal) { + VStack(alignment: .leading, spacing: 20) { + CPUSegmentDonut( + breakdown: breakdown, + systemColor: systemColor, + userColor: userColor, + idleColor: idleColor + ) + .frame(width: 132, height: 132) + .frame(maxWidth: .infinity, alignment: .leading) + + usageSection Divider().padding(.vertical, 4) - DetailRow(color: nil, label: "Load 1m", value: String(format: "%.2f", loadAverage.oneMinute)) - DetailRow(color: nil, label: "Load 5m", value: String(format: "%.2f", loadAverage.fiveMinutes)) - DetailRow(color: nil, label: "Load 15m", value: String(format: "%.2f", loadAverage.fifteenMinutes)) + systemSection + } + HStack(alignment: .top, spacing: 28) { + CPUSegmentDonut( + breakdown: breakdown, + systemColor: systemColor, + userColor: userColor, + idleColor: idleColor + ) + .frame(width: 132, height: 132) + + usageSection + systemSection } - .frame(maxWidth: .infinity, alignment: .leading) } } } diff --git a/DynamicIsland/components/Stats/MemoryStatsDetailView.swift b/DynamicIsland/components/Stats/MemoryStatsDetailView.swift index 3279b96..4c85c01 100644 --- a/DynamicIsland/components/Stats/MemoryStatsDetailView.swift +++ b/DynamicIsland/components/Stats/MemoryStatsDetailView.swift @@ -58,42 +58,69 @@ private struct MemoryUsageDashboard: View { private let freeColor = Color.gray.opacity(0.28) var body: some View { - HStack(alignment: .center, spacing: 28) { - ZStack { - Circle() - .stroke(freeColor.opacity(0.35), lineWidth: 14) - .frame(width: 128, height: 128) - - MemoryUsageRing(breakdown: breakdown, usedColor: accentColor, freeColor: freeColor) - .frame(width: 128, height: 128) - - VStack(spacing: 4) { - Text(StatsFormatting.percentage(breakdown.usedPercentage)) - .font(.system(size: 30, weight: .bold, design: .rounded)) - Text("Used") - .font(.footnote) - .foregroundColor(.secondary) + let totalsSection = VStack(alignment: .leading, spacing: 12) { + DetailRow(color: accentColor.opacity(0.8), label: "Used", value: formattedBytes(breakdown.usedBytes)) + DetailRow(color: freeColor.opacity(0.9), label: "Free", value: formattedBytes(breakdown.freeBytes)) + DetailRow(color: nil, label: "Total", value: formattedBytes(breakdown.totalBytes)) + } + .frame(maxWidth: .infinity, alignment: .leading) + + let breakdownSection = VStack(alignment: .leading, spacing: 8) { + Text("Breakdown") + .font(.caption) + .foregroundColor(.secondary) + MemoryBreakdownRow(label: "App", value: breakdown.appBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.85)) + MemoryBreakdownRow(label: "Cached", value: breakdown.cacheBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.65)) + MemoryBreakdownRow(label: "Wired", value: breakdown.wiredBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.45)) + MemoryBreakdownRow(label: "Compressed", value: breakdown.compressedBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.35)) + } + .frame(maxWidth: .infinity, alignment: .leading) + + return ViewThatFits(in: .horizontal) { + VStack(alignment: .leading, spacing: 20) { + ZStack { + Circle() + .stroke(freeColor.opacity(0.35), lineWidth: 14) + .frame(width: 128, height: 128) + + MemoryUsageRing(breakdown: breakdown, usedColor: accentColor, freeColor: freeColor) + .frame(width: 128, height: 128) + + VStack(spacing: 4) { + Text(StatsFormatting.percentage(breakdown.usedPercentage)) + .font(.system(size: 30, weight: .bold, design: .rounded)) + Text("Used") + .font(.footnote) + .foregroundColor(.secondary) + } } - } - - VStack(alignment: .leading, spacing: 12) { - DetailRow(color: accentColor.opacity(0.8), label: "Used", value: formattedBytes(breakdown.usedBytes)) - DetailRow(color: freeColor.opacity(0.9), label: "Free", value: formattedBytes(breakdown.freeBytes)) - DetailRow(color: nil, label: "Total", value: formattedBytes(breakdown.totalBytes)) - } - .frame(maxWidth: .infinity, alignment: .leading) - - VStack(alignment: .leading, spacing: 8) { - Text("Breakdown") - .font(.caption) - .foregroundColor(.secondary) + .frame(maxWidth: .infinity, alignment: .leading) - MemoryBreakdownRow(label: "App", value: breakdown.appBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.85)) - MemoryBreakdownRow(label: "Cached", value: breakdown.cacheBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.65)) - MemoryBreakdownRow(label: "Wired", value: breakdown.wiredBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.45)) - MemoryBreakdownRow(label: "Compressed", value: breakdown.compressedBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.35)) + totalsSection + Divider().padding(.vertical, 4) + breakdownSection + } + HStack(alignment: .top, spacing: 28) { + ZStack { + Circle() + .stroke(freeColor.opacity(0.35), lineWidth: 14) + .frame(width: 128, height: 128) + + MemoryUsageRing(breakdown: breakdown, usedColor: accentColor, freeColor: freeColor) + .frame(width: 128, height: 128) + + VStack(spacing: 4) { + Text(StatsFormatting.percentage(breakdown.usedPercentage)) + .font(.system(size: 30, weight: .bold, design: .rounded)) + Text("Used") + .font(.footnote) + .foregroundColor(.secondary) + } + } + + totalsSection + breakdownSection } - .frame(maxWidth: .infinity, alignment: .leading) } }