暂无描述

DashboardView.swift 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. //
  2. // DashboardView.swift
  3. // App for Indeed
  4. //
  5. import Cocoa
  6. import QuartzCore
  7. final class DashboardView: NSView {
  8. private enum Theme {
  9. static let pageBackground = NSColor(calibratedWhite: 0.02, alpha: 1)
  10. static let chromeBackground = NSColor(calibratedWhite: 0.04, alpha: 1)
  11. static let sidebarBackground = NSColor(calibratedWhite: 0.07, alpha: 1)
  12. static let selectionFill = NSColor(calibratedWhite: 1, alpha: 0.1)
  13. static let cardBackground = NSColor(calibratedWhite: 0.11, alpha: 1)
  14. static let toggleBackground = NSColor(calibratedWhite: 0.16, alpha: 1)
  15. static let primaryText = NSColor(calibratedWhite: 0.96, alpha: 1)
  16. static let secondaryText = NSColor(calibratedWhite: 0.62, alpha: 1)
  17. static let tertiaryText = NSColor(calibratedWhite: 0.48, alpha: 1)
  18. static let linkText = NSColor(calibratedWhite: 0.82, alpha: 1)
  19. }
  20. private let contentStack = NSStackView()
  21. private let documentContainer = NSView()
  22. private let chromeContainer = NSView()
  23. private let sidebar = NSStackView()
  24. private let mainHost = NSView()
  25. private let mainGradient = NeutralGradientBackgroundView()
  26. private let mainOverlay = NSStackView()
  27. private let greetingLabel = NSTextField(labelWithString: "")
  28. private let subtitleLabel = NSTextField(labelWithString: "")
  29. private let insightsCard = NSView()
  30. private let insightsTitleLabel = NSTextField(labelWithString: "")
  31. private let insightsBodyLabel = NSTextField(labelWithString: "")
  32. private let insightsLinkButton = NSButton(title: "", target: nil, action: nil)
  33. private let togglesLabel = NSTextField(labelWithString: "Dashboard Toggles:")
  34. private let savedToggleButton = NSButton(title: "Saved", target: nil, action: nil)
  35. private let interviewsToggleButton = NSButton(title: "Interviews", target: nil, action: nil)
  36. private let sparkleView = NSImageView()
  37. private let scrollView = NSScrollView()
  38. override init(frame frameRect: NSRect) {
  39. super.init(frame: frameRect)
  40. setupLayout()
  41. }
  42. required init?(coder: NSCoder) {
  43. super.init(coder: coder)
  44. setupLayout()
  45. }
  46. override func layout() {
  47. super.layout()
  48. updateDocumentLayout()
  49. }
  50. func render(_ data: DashboardData) {
  51. greetingLabel.stringValue = "Welcome back, \(data.greetingName)! 👋"
  52. subtitleLabel.stringValue = data.subtitle
  53. insightsTitleLabel.stringValue = data.profileInsightsTitle
  54. insightsBodyLabel.stringValue = data.profileInsightsBody
  55. insightsLinkButton.title = data.profileInsightsLinkTitle
  56. configureSidebar(data.sidebarItems)
  57. updateDocumentLayout()
  58. }
  59. private func setupLayout() {
  60. wantsLayer = true
  61. layer?.backgroundColor = Theme.pageBackground.cgColor
  62. scrollView.translatesAutoresizingMaskIntoConstraints = false
  63. scrollView.hasVerticalScroller = true
  64. scrollView.drawsBackground = false
  65. addSubview(scrollView)
  66. contentStack.orientation = .horizontal
  67. contentStack.spacing = 20
  68. contentStack.translatesAutoresizingMaskIntoConstraints = false
  69. contentStack.alignment = .top
  70. contentStack.edgeInsets = NSEdgeInsets(top: 24, left: 24, bottom: 24, right: 24)
  71. documentContainer.translatesAutoresizingMaskIntoConstraints = true
  72. documentContainer.autoresizingMask = [.width]
  73. documentContainer.frame = NSRect(x: 0, y: 0, width: 1040, height: 900)
  74. chromeContainer.translatesAutoresizingMaskIntoConstraints = false
  75. chromeContainer.wantsLayer = true
  76. chromeContainer.layer?.backgroundColor = Theme.chromeBackground.cgColor
  77. chromeContainer.layer?.cornerRadius = 18
  78. documentContainer.addSubview(chromeContainer)
  79. chromeContainer.addSubview(contentStack)
  80. scrollView.documentView = documentContainer
  81. sidebar.orientation = .vertical
  82. sidebar.spacing = 10
  83. sidebar.distribution = .fill
  84. sidebar.alignment = .leading
  85. sidebar.wantsLayer = true
  86. sidebar.layer?.backgroundColor = Theme.sidebarBackground.cgColor
  87. sidebar.layer?.cornerRadius = 16
  88. sidebar.edgeInsets = NSEdgeInsets(top: 18, left: 14, bottom: 18, right: 14)
  89. sidebar.translatesAutoresizingMaskIntoConstraints = false
  90. mainHost.translatesAutoresizingMaskIntoConstraints = false
  91. mainGradient.translatesAutoresizingMaskIntoConstraints = false
  92. mainGradient.wantsLayer = true
  93. mainGradient.layer?.cornerRadius = 16
  94. mainGradient.layer?.masksToBounds = true
  95. mainHost.addSubview(mainGradient)
  96. mainHost.addSubview(mainOverlay)
  97. mainOverlay.orientation = .vertical
  98. mainOverlay.spacing = 0
  99. mainOverlay.alignment = .centerX
  100. mainOverlay.translatesAutoresizingMaskIntoConstraints = false
  101. greetingLabel.font = .systemFont(ofSize: 32, weight: .bold)
  102. greetingLabel.textColor = Theme.primaryText
  103. greetingLabel.alignment = .center
  104. greetingLabel.maximumNumberOfLines = 1
  105. subtitleLabel.font = .systemFont(ofSize: 15, weight: .regular)
  106. subtitleLabel.textColor = Theme.secondaryText
  107. subtitleLabel.alignment = .center
  108. subtitleLabel.maximumNumberOfLines = 2
  109. let topSpacer = NSView()
  110. topSpacer.translatesAutoresizingMaskIntoConstraints = false
  111. topSpacer.setContentHuggingPriority(.defaultLow, for: .vertical)
  112. topSpacer.setContentCompressionResistancePriority(.defaultLow, for: .vertical)
  113. let headerStack = NSStackView(views: [greetingLabel, subtitleLabel])
  114. headerStack.orientation = .vertical
  115. headerStack.spacing = 10
  116. headerStack.alignment = .centerX
  117. configureInsightsCard()
  118. let midSpacer = NSView()
  119. midSpacer.translatesAutoresizingMaskIntoConstraints = false
  120. midSpacer.heightAnchor.constraint(greaterThanOrEqualToConstant: 28).isActive = true
  121. let bottomSpacer = NSView()
  122. bottomSpacer.translatesAutoresizingMaskIntoConstraints = false
  123. bottomSpacer.setContentHuggingPriority(.defaultLow, for: .vertical)
  124. bottomSpacer.setContentCompressionResistancePriority(.defaultLow, for: .vertical)
  125. mainOverlay.addArrangedSubview(topSpacer)
  126. mainOverlay.addArrangedSubview(headerStack)
  127. mainOverlay.addArrangedSubview(midSpacer)
  128. mainOverlay.addArrangedSubview(insightsCard)
  129. mainOverlay.addArrangedSubview(bottomSpacer)
  130. sparkleView.translatesAutoresizingMaskIntoConstraints = false
  131. sparkleView.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 22, weight: .regular)
  132. sparkleView.image = NSImage(systemSymbolName: "sparkle", accessibilityDescription: "Accent")
  133. sparkleView.contentTintColor = NSColor(calibratedWhite: 0.9, alpha: 0.55)
  134. mainHost.addSubview(sparkleView)
  135. contentStack.addArrangedSubview(sidebar)
  136. contentStack.addArrangedSubview(mainHost)
  137. NSLayoutConstraint.activate([
  138. scrollView.leadingAnchor.constraint(equalTo: leadingAnchor),
  139. scrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
  140. scrollView.topAnchor.constraint(equalTo: topAnchor),
  141. scrollView.bottomAnchor.constraint(equalTo: bottomAnchor),
  142. chromeContainer.topAnchor.constraint(equalTo: documentContainer.topAnchor, constant: 18),
  143. chromeContainer.bottomAnchor.constraint(equalTo: documentContainer.bottomAnchor, constant: -18),
  144. chromeContainer.centerXAnchor.constraint(equalTo: documentContainer.centerXAnchor),
  145. chromeContainer.widthAnchor.constraint(lessThanOrEqualToConstant: 1240),
  146. chromeContainer.widthAnchor.constraint(equalTo: documentContainer.widthAnchor, constant: -36),
  147. contentStack.leadingAnchor.constraint(equalTo: chromeContainer.leadingAnchor),
  148. contentStack.trailingAnchor.constraint(equalTo: chromeContainer.trailingAnchor),
  149. contentStack.topAnchor.constraint(equalTo: chromeContainer.topAnchor),
  150. contentStack.bottomAnchor.constraint(equalTo: chromeContainer.bottomAnchor),
  151. sidebar.widthAnchor.constraint(equalToConstant: 225),
  152. mainHost.widthAnchor.constraint(greaterThanOrEqualToConstant: 720),
  153. mainHost.heightAnchor.constraint(greaterThanOrEqualToConstant: 620),
  154. mainGradient.leadingAnchor.constraint(equalTo: mainHost.leadingAnchor),
  155. mainGradient.trailingAnchor.constraint(equalTo: mainHost.trailingAnchor),
  156. mainGradient.topAnchor.constraint(equalTo: mainHost.topAnchor),
  157. mainGradient.bottomAnchor.constraint(equalTo: mainHost.bottomAnchor),
  158. mainOverlay.leadingAnchor.constraint(equalTo: mainHost.leadingAnchor),
  159. mainOverlay.trailingAnchor.constraint(equalTo: mainHost.trailingAnchor),
  160. mainOverlay.topAnchor.constraint(equalTo: mainHost.topAnchor),
  161. mainOverlay.bottomAnchor.constraint(equalTo: mainHost.bottomAnchor),
  162. greetingLabel.leadingAnchor.constraint(equalTo: mainOverlay.leadingAnchor, constant: 24),
  163. greetingLabel.trailingAnchor.constraint(equalTo: mainOverlay.trailingAnchor, constant: -24),
  164. subtitleLabel.leadingAnchor.constraint(equalTo: greetingLabel.leadingAnchor),
  165. subtitleLabel.trailingAnchor.constraint(equalTo: greetingLabel.trailingAnchor),
  166. sparkleView.trailingAnchor.constraint(equalTo: mainHost.trailingAnchor, constant: -28),
  167. sparkleView.bottomAnchor.constraint(equalTo: mainHost.bottomAnchor, constant: -28)
  168. ])
  169. }
  170. private func configureInsightsCard() {
  171. insightsCard.wantsLayer = true
  172. insightsCard.layer?.backgroundColor = Theme.cardBackground.cgColor
  173. insightsCard.layer?.cornerRadius = 18
  174. insightsCard.translatesAutoresizingMaskIntoConstraints = false
  175. insightsTitleLabel.font = .systemFont(ofSize: 20, weight: .semibold)
  176. insightsTitleLabel.textColor = Theme.primaryText
  177. insightsTitleLabel.alignment = .center
  178. insightsTitleLabel.maximumNumberOfLines = 1
  179. insightsBodyLabel.font = .systemFont(ofSize: 13, weight: .regular)
  180. insightsBodyLabel.textColor = Theme.secondaryText
  181. insightsBodyLabel.alignment = .center
  182. insightsBodyLabel.maximumNumberOfLines = 4
  183. insightsBodyLabel.lineBreakMode = .byWordWrapping
  184. insightsBodyLabel.preferredMaxLayoutWidth = 400
  185. insightsLinkButton.bezelStyle = .inline
  186. insightsLinkButton.isBordered = false
  187. insightsLinkButton.font = .systemFont(ofSize: 13, weight: .medium)
  188. insightsLinkButton.contentTintColor = Theme.linkText
  189. insightsLinkButton.setButtonType(.momentaryPushIn)
  190. togglesLabel.font = .systemFont(ofSize: 12, weight: .medium)
  191. togglesLabel.textColor = Theme.tertiaryText
  192. togglesLabel.alignment = .center
  193. togglesLabel.maximumNumberOfLines = 1
  194. styleToggle(savedToggleButton)
  195. styleToggle(interviewsToggleButton)
  196. let toggleRow = NSStackView(views: [savedToggleButton, interviewsToggleButton])
  197. toggleRow.orientation = .horizontal
  198. toggleRow.spacing = 10
  199. toggleRow.alignment = .centerY
  200. let inner = NSStackView(views: [
  201. insightsTitleLabel,
  202. insightsBodyLabel,
  203. insightsLinkButton,
  204. togglesLabel,
  205. toggleRow
  206. ])
  207. inner.orientation = .vertical
  208. inner.spacing = 14
  209. inner.alignment = .centerX
  210. inner.translatesAutoresizingMaskIntoConstraints = false
  211. insightsCard.addSubview(inner)
  212. NSLayoutConstraint.activate([
  213. inner.leadingAnchor.constraint(equalTo: insightsCard.leadingAnchor, constant: 32),
  214. inner.trailingAnchor.constraint(equalTo: insightsCard.trailingAnchor, constant: -32),
  215. inner.topAnchor.constraint(equalTo: insightsCard.topAnchor, constant: 28),
  216. inner.bottomAnchor.constraint(equalTo: insightsCard.bottomAnchor, constant: -28),
  217. insightsCard.widthAnchor.constraint(equalToConstant: 440)
  218. ])
  219. }
  220. private func styleToggle(_ button: NSButton) {
  221. button.bezelStyle = .rounded
  222. button.font = .systemFont(ofSize: 12, weight: .medium)
  223. button.contentTintColor = Theme.secondaryText
  224. button.wantsLayer = true
  225. button.layer?.backgroundColor = Theme.toggleBackground.cgColor
  226. button.layer?.cornerRadius = 8
  227. button.translatesAutoresizingMaskIntoConstraints = false
  228. button.widthAnchor.constraint(equalToConstant: 108).isActive = true
  229. button.heightAnchor.constraint(equalToConstant: 30).isActive = true
  230. }
  231. private func configureSidebar(_ items: [SidebarItem]) {
  232. sidebar.arrangedSubviews.forEach {
  233. sidebar.removeArrangedSubview($0)
  234. $0.removeFromSuperview()
  235. }
  236. let brand = NSTextField(labelWithString: "Indeed AI\nJob Finder")
  237. brand.font = .systemFont(ofSize: 18, weight: .bold)
  238. brand.textColor = Theme.primaryText
  239. brand.alignment = .left
  240. sidebar.addArrangedSubview(brand)
  241. let titleToMenuSpacer = NSView()
  242. titleToMenuSpacer.translatesAutoresizingMaskIntoConstraints = false
  243. titleToMenuSpacer.heightAnchor.constraint(equalToConstant: 24).isActive = true
  244. sidebar.addArrangedSubview(titleToMenuSpacer)
  245. items.enumerated().forEach { index, item in
  246. let row = NSStackView()
  247. row.orientation = .horizontal
  248. row.spacing = 8
  249. row.alignment = .centerY
  250. row.wantsLayer = true
  251. row.layer?.cornerRadius = 8
  252. row.edgeInsets = NSEdgeInsets(top: 8, left: 10, bottom: 8, right: 10)
  253. let isSelected = index == 0
  254. if isSelected {
  255. row.layer?.backgroundColor = Theme.selectionFill.cgColor
  256. }
  257. let icon = NSImageView()
  258. icon.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 13, weight: .medium)
  259. icon.image = NSImage(systemSymbolName: item.systemImage, accessibilityDescription: item.title)
  260. icon.contentTintColor = isSelected ? Theme.primaryText : Theme.secondaryText
  261. let text = NSTextField(labelWithString: item.title)
  262. text.font = .systemFont(ofSize: 14, weight: .medium)
  263. text.textColor = isSelected ? Theme.primaryText : Theme.secondaryText
  264. row.addArrangedSubview(icon)
  265. row.addArrangedSubview(text)
  266. if let badge = item.badge {
  267. let badgeField = NSTextField(labelWithString: badge)
  268. badgeField.font = .systemFont(ofSize: 11, weight: .semibold)
  269. badgeField.textColor = Theme.primaryText
  270. badgeField.wantsLayer = true
  271. badgeField.layer?.backgroundColor = Theme.toggleBackground.cgColor
  272. badgeField.layer?.cornerRadius = 8
  273. badgeField.alignment = .center
  274. badgeField.maximumNumberOfLines = 1
  275. badgeField.lineBreakMode = .byClipping
  276. badgeField.translatesAutoresizingMaskIntoConstraints = false
  277. badgeField.widthAnchor.constraint(equalToConstant: 42).isActive = true
  278. row.addArrangedSubview(NSView())
  279. row.addArrangedSubview(badgeField)
  280. }
  281. sidebar.addArrangedSubview(row)
  282. }
  283. let sidebarBottomSpacer = NSView()
  284. sidebarBottomSpacer.translatesAutoresizingMaskIntoConstraints = false
  285. sidebarBottomSpacer.setContentHuggingPriority(.defaultLow, for: .vertical)
  286. sidebarBottomSpacer.setContentCompressionResistancePriority(.defaultLow, for: .vertical)
  287. sidebar.addArrangedSubview(sidebarBottomSpacer)
  288. }
  289. private func updateDocumentLayout() {
  290. documentContainer.layoutSubtreeIfNeeded()
  291. let fittingHeight = max(chromeContainer.fittingSize.height + 36, bounds.height)
  292. documentContainer.frame = NSRect(x: 0, y: 0, width: bounds.width, height: fittingHeight)
  293. }
  294. }
  295. // MARK: - Neutral main-area gradient (black / grey only)
  296. private final class NeutralGradientBackgroundView: NSView {
  297. private let gradientLayer = CAGradientLayer()
  298. override init(frame frameRect: NSRect) {
  299. super.init(frame: frameRect)
  300. commonInit()
  301. }
  302. required init?(coder: NSCoder) {
  303. super.init(coder: coder)
  304. commonInit()
  305. }
  306. private func commonInit() {
  307. wantsLayer = true
  308. gradientLayer.colors = [
  309. NSColor(calibratedWhite: 0.12, alpha: 1).cgColor,
  310. NSColor(calibratedWhite: 0.05, alpha: 1).cgColor,
  311. NSColor.black.cgColor
  312. ]
  313. gradientLayer.locations = [0, 0.42, 1] as [NSNumber]
  314. gradientLayer.startPoint = CGPoint(x: 0.5, y: 1)
  315. gradientLayer.endPoint = CGPoint(x: 0.5, y: 0)
  316. layer?.addSublayer(gradientLayer)
  317. }
  318. override func layout() {
  319. super.layout()
  320. gradientLayer.frame = bounds
  321. }
  322. }