Нема описа

DashboardView.swift 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452
  1. //
  2. // DashboardView.swift
  3. // App for Indeed
  4. //
  5. import Cocoa
  6. final class DashboardView: NSView {
  7. private enum Theme {
  8. static let pageBackground = NSColor(calibratedRed: 0.02, green: 0.02, blue: 0.03, alpha: 1)
  9. static let chromeBackground = NSColor(calibratedRed: 0.05, green: 0.05, blue: 0.06, alpha: 1)
  10. static let sidebarBackground = NSColor(calibratedRed: 0.07, green: 0.07, blue: 0.09, alpha: 1)
  11. static let heroBackground = NSColor(calibratedRed: 0.09, green: 0.09, blue: 0.12, alpha: 1)
  12. static let sectionBackground = NSColor(calibratedRed: 0.08, green: 0.08, blue: 0.1, alpha: 1)
  13. static let statCardBackground = NSColor(calibratedRed: 0.1, green: 0.1, blue: 0.12, alpha: 1)
  14. static let insightCardBackground = NSColor(calibratedRed: 0.09, green: 0.09, blue: 0.11, alpha: 1)
  15. static let accent = NSColor(calibratedRed: 0.3, green: 0.48, blue: 1.0, alpha: 1)
  16. static let accentMuted = NSColor(calibratedRed: 0.3, green: 0.48, blue: 1.0, alpha: 0.3)
  17. static let iconBackground = NSColor(calibratedRed: 0.3, green: 0.48, blue: 1.0, alpha: 0.24)
  18. static let primaryText = NSColor(calibratedRed: 0.95, green: 0.95, blue: 0.97, alpha: 1)
  19. static let secondaryText = NSColor(calibratedRed: 0.73, green: 0.74, blue: 0.79, alpha: 1)
  20. static let tertiaryText = NSColor(calibratedRed: 0.56, green: 0.57, blue: 0.62, alpha: 1)
  21. static let bubbleText = NSColor(calibratedRed: 0.86, green: 0.89, blue: 0.98, alpha: 1)
  22. static let bubbleBackground = NSColor(calibratedRed: 0.16, green: 0.2, blue: 0.33, alpha: 0.45)
  23. }
  24. private let contentStack = NSStackView()
  25. private let documentContainer = NSView()
  26. private let chromeContainer = NSView()
  27. private let sidebar = NSStackView()
  28. private let mainColumn = NSStackView()
  29. private let greetingLabel = NSTextField(labelWithString: "")
  30. private let subtitleLabel = NSTextField(labelWithString: "Find your perfect job with the power of AI.")
  31. private let heroCard = NSView()
  32. private let statGrid = NSGridView(views: [[]])
  33. private let recommendationsStack = NSStackView()
  34. private let insightsStack = NSStackView()
  35. private let scrollView = NSScrollView()
  36. private var recommendationsWidthConstraint: NSLayoutConstraint?
  37. private var insightsWidthConstraint: NSLayoutConstraint?
  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. configureSidebar(data.sidebarItems)
  53. configureStats(data.stats)
  54. configureRecommendations(data.recommendations)
  55. configureInsights(data.insights)
  56. updateDocumentLayout()
  57. }
  58. private func setupLayout() {
  59. wantsLayer = true
  60. layer?.backgroundColor = Theme.pageBackground.cgColor
  61. scrollView.translatesAutoresizingMaskIntoConstraints = false
  62. scrollView.hasVerticalScroller = true
  63. scrollView.drawsBackground = false
  64. addSubview(scrollView)
  65. contentStack.orientation = .horizontal
  66. contentStack.spacing = 20
  67. contentStack.translatesAutoresizingMaskIntoConstraints = false
  68. contentStack.alignment = .top
  69. contentStack.edgeInsets = NSEdgeInsets(top: 24, left: 24, bottom: 24, right: 24)
  70. documentContainer.translatesAutoresizingMaskIntoConstraints = true
  71. documentContainer.autoresizingMask = [.width]
  72. documentContainer.frame = NSRect(x: 0, y: 0, width: 1040, height: 900)
  73. chromeContainer.translatesAutoresizingMaskIntoConstraints = false
  74. chromeContainer.wantsLayer = true
  75. chromeContainer.layer?.backgroundColor = Theme.chromeBackground.cgColor
  76. chromeContainer.layer?.cornerRadius = 18
  77. documentContainer.addSubview(chromeContainer)
  78. chromeContainer.addSubview(contentStack)
  79. scrollView.documentView = documentContainer
  80. sidebar.orientation = .vertical
  81. sidebar.spacing = 10
  82. sidebar.alignment = .leading
  83. sidebar.wantsLayer = true
  84. sidebar.layer?.backgroundColor = Theme.sidebarBackground.cgColor
  85. sidebar.layer?.cornerRadius = 16
  86. sidebar.edgeInsets = NSEdgeInsets(top: 18, left: 14, bottom: 18, right: 14)
  87. sidebar.translatesAutoresizingMaskIntoConstraints = false
  88. mainColumn.orientation = .vertical
  89. mainColumn.spacing = 14
  90. mainColumn.alignment = .leading
  91. mainColumn.translatesAutoresizingMaskIntoConstraints = false
  92. greetingLabel.font = .systemFont(ofSize: 30, weight: .bold)
  93. greetingLabel.textColor = Theme.primaryText
  94. subtitleLabel.font = .systemFont(ofSize: 14, weight: .regular)
  95. subtitleLabel.textColor = Theme.secondaryText
  96. heroCard.wantsLayer = true
  97. heroCard.layer?.backgroundColor = Theme.heroBackground.cgColor
  98. heroCard.layer?.cornerRadius = 18
  99. heroCard.translatesAutoresizingMaskIntoConstraints = false
  100. let hero = buildHeroContent()
  101. heroCard.addSubview(hero)
  102. statGrid.translatesAutoresizingMaskIntoConstraints = false
  103. statGrid.rowSpacing = 10
  104. statGrid.columnSpacing = 10
  105. let lowerSection = NSStackView()
  106. lowerSection.orientation = .horizontal
  107. lowerSection.spacing = 12
  108. lowerSection.alignment = .top
  109. lowerSection.distribution = .fill
  110. lowerSection.translatesAutoresizingMaskIntoConstraints = false
  111. let recommendationsBox = sectionBox(title: "Recommended for You", content: recommendationsStack)
  112. let insightsBox = sectionBox(title: "AI Insights", content: insightsStack)
  113. recommendationsBox.translatesAutoresizingMaskIntoConstraints = false
  114. insightsBox.translatesAutoresizingMaskIntoConstraints = false
  115. lowerSection.addArrangedSubview(recommendationsBox)
  116. lowerSection.addArrangedSubview(insightsBox)
  117. mainColumn.addArrangedSubview(greetingLabel)
  118. mainColumn.addArrangedSubview(subtitleLabel)
  119. mainColumn.addArrangedSubview(heroCard)
  120. mainColumn.addArrangedSubview(statGrid)
  121. mainColumn.addArrangedSubview(lowerSection)
  122. contentStack.addArrangedSubview(sidebar)
  123. contentStack.addArrangedSubview(mainColumn)
  124. NSLayoutConstraint.activate([
  125. scrollView.leadingAnchor.constraint(equalTo: leadingAnchor),
  126. scrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
  127. scrollView.topAnchor.constraint(equalTo: topAnchor),
  128. scrollView.bottomAnchor.constraint(equalTo: bottomAnchor),
  129. chromeContainer.topAnchor.constraint(equalTo: documentContainer.topAnchor, constant: 18),
  130. chromeContainer.bottomAnchor.constraint(equalTo: documentContainer.bottomAnchor, constant: -18),
  131. chromeContainer.centerXAnchor.constraint(equalTo: documentContainer.centerXAnchor),
  132. chromeContainer.widthAnchor.constraint(lessThanOrEqualToConstant: 1240),
  133. chromeContainer.widthAnchor.constraint(equalTo: documentContainer.widthAnchor, constant: -36),
  134. contentStack.leadingAnchor.constraint(equalTo: chromeContainer.leadingAnchor),
  135. contentStack.trailingAnchor.constraint(equalTo: chromeContainer.trailingAnchor),
  136. contentStack.topAnchor.constraint(equalTo: chromeContainer.topAnchor),
  137. contentStack.bottomAnchor.constraint(equalTo: chromeContainer.bottomAnchor),
  138. sidebar.widthAnchor.constraint(equalToConstant: 225),
  139. mainColumn.widthAnchor.constraint(greaterThanOrEqualToConstant: 720),
  140. heroCard.widthAnchor.constraint(equalTo: mainColumn.widthAnchor),
  141. heroCard.heightAnchor.constraint(equalToConstant: 140),
  142. hero.leadingAnchor.constraint(equalTo: heroCard.leadingAnchor, constant: 22),
  143. hero.trailingAnchor.constraint(equalTo: heroCard.trailingAnchor, constant: -22),
  144. hero.topAnchor.constraint(equalTo: heroCard.topAnchor, constant: 18),
  145. hero.bottomAnchor.constraint(equalTo: heroCard.bottomAnchor, constant: -18),
  146. lowerSection.widthAnchor.constraint(equalTo: mainColumn.widthAnchor)
  147. ])
  148. recommendationsWidthConstraint = recommendationsBox.widthAnchor.constraint(equalTo: mainColumn.widthAnchor, multiplier: 0.68)
  149. insightsWidthConstraint = insightsBox.widthAnchor.constraint(equalTo: mainColumn.widthAnchor, multiplier: 0.32, constant: -8)
  150. recommendationsWidthConstraint?.isActive = true
  151. insightsWidthConstraint?.isActive = true
  152. }
  153. private func buildHeroContent() -> NSView {
  154. let container = NSStackView()
  155. container.orientation = .horizontal
  156. container.translatesAutoresizingMaskIntoConstraints = false
  157. container.distribution = .fillEqually
  158. let left = NSStackView()
  159. left.orientation = .vertical
  160. left.spacing = 8
  161. left.alignment = .leading
  162. let title = NSTextField(labelWithString: "AI Job Search Assistant")
  163. title.font = .systemFont(ofSize: 24, weight: .semibold)
  164. title.textColor = Theme.primaryText
  165. let body = NSTextField(labelWithString: "Let AI find the best jobs for you on Indeed based on your preferences.")
  166. body.font = .systemFont(ofSize: 12, weight: .regular)
  167. body.textColor = Theme.secondaryText
  168. let action = NSButton(title: "Find Jobs with AI", target: nil, action: nil)
  169. action.bezelStyle = .rounded
  170. action.wantsLayer = true
  171. action.layer?.backgroundColor = Theme.accent.cgColor
  172. action.layer?.cornerRadius = 8
  173. action.contentTintColor = .white
  174. action.font = .systemFont(ofSize: 13, weight: .semibold)
  175. left.addArrangedSubview(title)
  176. left.addArrangedSubview(body)
  177. left.addArrangedSubview(action)
  178. let right = NSStackView()
  179. right.orientation = .vertical
  180. right.alignment = .trailing
  181. right.addArrangedSubview(tagBubble("Quick"))
  182. right.addArrangedSubview(tagBubble("Smart"))
  183. right.addArrangedSubview(tagBubble("Personalized"))
  184. container.addArrangedSubview(left)
  185. container.addArrangedSubview(right)
  186. return container
  187. }
  188. private func configureSidebar(_ items: [SidebarItem]) {
  189. sidebar.arrangedSubviews.forEach {
  190. sidebar.removeArrangedSubview($0)
  191. $0.removeFromSuperview()
  192. }
  193. let brand = NSTextField(labelWithString: "Indeed AI\nJob Finder")
  194. brand.font = .systemFont(ofSize: 18, weight: .bold)
  195. brand.textColor = Theme.primaryText
  196. sidebar.addArrangedSubview(brand)
  197. let spacer = NSView()
  198. spacer.translatesAutoresizingMaskIntoConstraints = false
  199. spacer.heightAnchor.constraint(equalToConstant: 8).isActive = true
  200. sidebar.addArrangedSubview(spacer)
  201. items.enumerated().forEach { index, item in
  202. let row = NSStackView()
  203. row.orientation = .horizontal
  204. row.spacing = 8
  205. row.alignment = .centerY
  206. row.wantsLayer = true
  207. row.layer?.cornerRadius = 8
  208. row.edgeInsets = NSEdgeInsets(top: 8, left: 10, bottom: 8, right: 10)
  209. if index == 0 {
  210. row.layer?.backgroundColor = Theme.accentMuted.cgColor
  211. }
  212. let icon = NSImageView()
  213. icon.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 13, weight: .medium)
  214. icon.image = NSImage(systemSymbolName: item.systemImage, accessibilityDescription: item.title)
  215. icon.contentTintColor = Theme.primaryText
  216. let text = NSTextField(labelWithString: item.title)
  217. text.font = .systemFont(ofSize: 14, weight: .medium)
  218. text.textColor = Theme.primaryText
  219. row.addArrangedSubview(icon)
  220. row.addArrangedSubview(text)
  221. if let badge = item.badge {
  222. let badgeField = NSTextField(labelWithString: badge)
  223. badgeField.font = .systemFont(ofSize: 11, weight: .semibold)
  224. badgeField.textColor = .white
  225. badgeField.wantsLayer = true
  226. badgeField.layer?.backgroundColor = Theme.accent.cgColor
  227. badgeField.layer?.cornerRadius = 8
  228. badgeField.alignment = .center
  229. badgeField.maximumNumberOfLines = 1
  230. badgeField.lineBreakMode = .byClipping
  231. badgeField.translatesAutoresizingMaskIntoConstraints = false
  232. badgeField.widthAnchor.constraint(equalToConstant: 42).isActive = true
  233. row.addArrangedSubview(NSView())
  234. row.addArrangedSubview(badgeField)
  235. }
  236. sidebar.addArrangedSubview(row)
  237. }
  238. }
  239. private func configureStats(_ stats: [StatCard]) {
  240. statGrid.removeRow(at: 0)
  241. let cards = stats.map { stat -> NSView in
  242. let card = NSStackView()
  243. card.orientation = .vertical
  244. card.spacing = 6
  245. card.edgeInsets = NSEdgeInsets(top: 14, left: 14, bottom: 14, right: 14)
  246. card.wantsLayer = true
  247. card.layer?.backgroundColor = Theme.statCardBackground.cgColor
  248. card.layer?.cornerRadius = 14
  249. let value = NSTextField(labelWithString: stat.value)
  250. value.font = .systemFont(ofSize: 30, weight: .bold)
  251. value.textColor = Theme.primaryText
  252. let title = NSTextField(labelWithString: stat.title)
  253. title.font = .systemFont(ofSize: 13, weight: .medium)
  254. title.textColor = Theme.secondaryText
  255. let trend = NSTextField(labelWithString: stat.trend)
  256. trend.font = .systemFont(ofSize: 12, weight: .semibold)
  257. trend.textColor = NSColor.systemGreen
  258. card.addArrangedSubview(value)
  259. card.addArrangedSubview(title)
  260. card.addArrangedSubview(trend)
  261. card.translatesAutoresizingMaskIntoConstraints = false
  262. card.widthAnchor.constraint(equalToConstant: 185).isActive = true
  263. card.heightAnchor.constraint(equalToConstant: 120).isActive = true
  264. return card
  265. }
  266. statGrid.addRow(with: cards)
  267. }
  268. private func configureRecommendations(_ recommendations: [JobRecommendation]) {
  269. recommendationsStack.orientation = .vertical
  270. recommendationsStack.spacing = 10
  271. recommendationsStack.alignment = .leading
  272. recommendationsStack.arrangedSubviews.forEach {
  273. recommendationsStack.removeArrangedSubview($0)
  274. $0.removeFromSuperview()
  275. }
  276. recommendations.forEach { recommendation in
  277. let row = NSStackView()
  278. row.orientation = .horizontal
  279. row.spacing = 12
  280. row.alignment = .centerY
  281. let icon = NSView()
  282. icon.wantsLayer = true
  283. icon.layer?.cornerRadius = 10
  284. icon.layer?.backgroundColor = Theme.iconBackground.cgColor
  285. icon.translatesAutoresizingMaskIntoConstraints = false
  286. icon.widthAnchor.constraint(equalToConstant: 38).isActive = true
  287. icon.heightAnchor.constraint(equalToConstant: 38).isActive = true
  288. let textColumn = NSStackView()
  289. textColumn.orientation = .vertical
  290. textColumn.spacing = 2
  291. textColumn.alignment = .leading
  292. let title = NSTextField(labelWithString: recommendation.title)
  293. title.font = .systemFont(ofSize: 15, weight: .semibold)
  294. title.textColor = Theme.primaryText
  295. let subtitle = NSTextField(labelWithString: "\(recommendation.company) • \(recommendation.location)")
  296. subtitle.font = .systemFont(ofSize: 12, weight: .regular)
  297. subtitle.textColor = Theme.secondaryText
  298. textColumn.addArrangedSubview(title)
  299. textColumn.addArrangedSubview(subtitle)
  300. let meta = NSStackView()
  301. meta.orientation = .vertical
  302. meta.alignment = .trailing
  303. let match = NSTextField(labelWithString: recommendation.matchRate)
  304. match.font = .systemFont(ofSize: 12, weight: .semibold)
  305. match.textColor = NSColor.systemGreen
  306. let posted = NSTextField(labelWithString: recommendation.postedAgo)
  307. posted.font = .systemFont(ofSize: 11, weight: .regular)
  308. posted.textColor = Theme.tertiaryText
  309. meta.addArrangedSubview(match)
  310. meta.addArrangedSubview(posted)
  311. row.addArrangedSubview(icon)
  312. row.addArrangedSubview(textColumn)
  313. row.addArrangedSubview(NSView())
  314. row.addArrangedSubview(meta)
  315. recommendationsStack.addArrangedSubview(row)
  316. }
  317. }
  318. private func configureInsights(_ insights: [InsightItem]) {
  319. insightsStack.orientation = .vertical
  320. insightsStack.spacing = 12
  321. insightsStack.alignment = .leading
  322. insightsStack.arrangedSubviews.forEach {
  323. insightsStack.removeArrangedSubview($0)
  324. $0.removeFromSuperview()
  325. }
  326. insights.forEach { insight in
  327. let card = NSStackView()
  328. card.orientation = .vertical
  329. card.spacing = 4
  330. card.edgeInsets = NSEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
  331. card.wantsLayer = true
  332. card.layer?.backgroundColor = Theme.insightCardBackground.cgColor
  333. card.layer?.cornerRadius = 10
  334. let title = NSTextField(labelWithString: insight.title)
  335. title.font = .systemFont(ofSize: 14, weight: .semibold)
  336. title.textColor = Theme.primaryText
  337. let body = NSTextField(labelWithString: insight.description)
  338. body.font = .systemFont(ofSize: 12, weight: .regular)
  339. body.textColor = Theme.secondaryText
  340. body.maximumNumberOfLines = 2
  341. body.lineBreakMode = .byWordWrapping
  342. card.addArrangedSubview(title)
  343. card.addArrangedSubview(body)
  344. insightsStack.addArrangedSubview(card)
  345. }
  346. }
  347. private func sectionBox(title: String, content: NSStackView) -> NSView {
  348. let box = NSStackView()
  349. box.orientation = .vertical
  350. box.spacing = 12
  351. box.alignment = .leading
  352. box.edgeInsets = NSEdgeInsets(top: 14, left: 14, bottom: 14, right: 14)
  353. box.wantsLayer = true
  354. box.layer?.backgroundColor = Theme.sectionBackground.cgColor
  355. box.layer?.cornerRadius = 16
  356. let titleLabel = NSTextField(labelWithString: title)
  357. titleLabel.font = .systemFont(ofSize: 18, weight: .semibold)
  358. titleLabel.textColor = Theme.primaryText
  359. box.addArrangedSubview(titleLabel)
  360. box.addArrangedSubview(content)
  361. return box
  362. }
  363. private func tagBubble(_ text: String) -> NSView {
  364. let label = NSTextField(labelWithString: text)
  365. label.font = .systemFont(ofSize: 11, weight: .medium)
  366. label.textColor = Theme.bubbleText
  367. label.wantsLayer = true
  368. label.layer?.backgroundColor = Theme.bubbleBackground.cgColor
  369. label.layer?.cornerRadius = 7
  370. label.alignment = .center
  371. label.translatesAutoresizingMaskIntoConstraints = false
  372. label.widthAnchor.constraint(equalToConstant: 90).isActive = true
  373. return label
  374. }
  375. private func updateDocumentLayout() {
  376. documentContainer.layoutSubtreeIfNeeded()
  377. let fittingHeight = max(chromeContainer.fittingSize.height + 36, bounds.height)
  378. documentContainer.frame = NSRect(x: 0, y: 0, width: bounds.width, height: fittingHeight)
  379. }
  380. }