PostGeneratorComponents.swift 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
  1. import AppKit
  2. import SwiftUI
  3. import UniformTypeIdentifiers
  4. // MARK: - Page Boundary
  5. struct PostPageBoundary<Content: View>: View {
  6. @ViewBuilder let content: Content
  7. var body: some View {
  8. content
  9. .padding(20)
  10. .background(
  11. RoundedRectangle(cornerRadius: AppTheme.cornerRadius)
  12. .fill(AppTheme.panelBackground)
  13. )
  14. .overlay(
  15. RoundedRectangle(cornerRadius: AppTheme.cornerRadius)
  16. .stroke(AppTheme.cardBorder, lineWidth: 1)
  17. )
  18. }
  19. }
  20. // MARK: - Shared Form Components
  21. struct PostFormCard<Content: View>: View {
  22. let title: String
  23. var subtitle: String?
  24. @ViewBuilder let content: Content
  25. var body: some View {
  26. VStack(alignment: .leading, spacing: 12) {
  27. VStack(alignment: .leading, spacing: 2) {
  28. Text(title)
  29. .font(.system(size: 12, weight: .semibold))
  30. .foregroundStyle(AppTheme.textPrimary)
  31. if let subtitle {
  32. Text(subtitle)
  33. .font(.system(size: 10))
  34. .foregroundStyle(AppTheme.textSecondary)
  35. }
  36. }
  37. content
  38. }
  39. .padding(14)
  40. .frame(maxWidth: .infinity, alignment: .leading)
  41. .background(
  42. RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
  43. .fill(AppTheme.cardBackground)
  44. .overlay(
  45. RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
  46. .stroke(AppTheme.cardBorder, lineWidth: 1)
  47. )
  48. )
  49. }
  50. }
  51. struct PostFormField: View {
  52. let label: String
  53. var placeholder: String = ""
  54. @Binding var text: String
  55. var prefix: String?
  56. var body: some View {
  57. VStack(alignment: .leading, spacing: 6) {
  58. Text(label)
  59. .font(.system(size: 10, weight: .medium))
  60. .foregroundStyle(AppTheme.textTertiary)
  61. HStack(spacing: 0) {
  62. if let prefix {
  63. Text(prefix)
  64. .font(.system(size: 12, weight: .medium))
  65. .foregroundStyle(AppTheme.textSecondary)
  66. .padding(.leading, 10)
  67. }
  68. TextField(placeholder, text: $text)
  69. .textFieldStyle(.plain)
  70. .font(.system(size: 12))
  71. .foregroundStyle(AppTheme.textPrimary)
  72. .padding(.horizontal, prefix == nil ? 10 : 4)
  73. .padding(.vertical, 8)
  74. }
  75. .background(AppTheme.panelBackground)
  76. .clipShape(RoundedRectangle(cornerRadius: 8))
  77. .overlay(
  78. RoundedRectangle(cornerRadius: 8)
  79. .stroke(AppTheme.cardBorder, lineWidth: 1)
  80. )
  81. }
  82. }
  83. }
  84. struct PostFormTextEditor: View {
  85. let label: String
  86. var placeholder: String = ""
  87. @Binding var text: String
  88. var minHeight: CGFloat = 120
  89. var body: some View {
  90. VStack(alignment: .leading, spacing: 6) {
  91. Text(label)
  92. .font(.system(size: 10, weight: .medium))
  93. .foregroundStyle(AppTheme.textTertiary)
  94. ZStack(alignment: .topLeading) {
  95. if text.isEmpty {
  96. Text(placeholder)
  97. .font(.system(size: 12))
  98. .foregroundStyle(AppTheme.textTertiary.opacity(0.7))
  99. .padding(.horizontal, 8)
  100. .padding(.vertical, 10)
  101. }
  102. TextEditor(text: $text)
  103. .font(.system(size: 12))
  104. .foregroundStyle(AppTheme.textPrimary)
  105. .scrollContentBackground(.hidden)
  106. .padding(.horizontal, 4)
  107. .padding(.vertical, 4)
  108. }
  109. .frame(minHeight: minHeight)
  110. .background(AppTheme.panelBackground)
  111. .clipShape(RoundedRectangle(cornerRadius: 8))
  112. .overlay(
  113. RoundedRectangle(cornerRadius: 8)
  114. .stroke(AppTheme.cardBorder, lineWidth: 1)
  115. )
  116. }
  117. }
  118. }
  119. struct PostTypePicker: View {
  120. @Binding var selectedType: RedditPostType
  121. var body: some View {
  122. LazyVGrid(
  123. columns: [GridItem(.flexible()), GridItem(.flexible())],
  124. spacing: 8
  125. ) {
  126. ForEach(RedditPostType.allCases) { type in
  127. PostTypeButton(type: type, isSelected: selectedType == type) {
  128. selectedType = type
  129. }
  130. }
  131. }
  132. }
  133. }
  134. private struct PostTypeButton: View {
  135. let type: RedditPostType
  136. let isSelected: Bool
  137. let action: () -> Void
  138. var body: some View {
  139. Button(action: action) {
  140. HStack(spacing: 8) {
  141. Image(systemName: type.systemImage)
  142. .font(.system(size: 12, weight: .semibold))
  143. .foregroundStyle(isSelected ? AppTheme.accentPurpleLight : AppTheme.textSecondary)
  144. .frame(width: 16)
  145. VStack(alignment: .leading, spacing: 1) {
  146. Text(type.title)
  147. .font(.system(size: 11, weight: .semibold))
  148. .foregroundStyle(AppTheme.textPrimary)
  149. Text(type.subtitle)
  150. .font(.system(size: 9))
  151. .foregroundStyle(AppTheme.textTertiary)
  152. .lineLimit(1)
  153. }
  154. Spacer(minLength: 0)
  155. }
  156. .padding(.horizontal, 10)
  157. .padding(.vertical, 8)
  158. .background(
  159. RoundedRectangle(cornerRadius: 8)
  160. .fill(isSelected ? AppTheme.accentPurple.opacity(0.15) : AppTheme.panelBackground)
  161. )
  162. .overlay(
  163. RoundedRectangle(cornerRadius: 8)
  164. .stroke(
  165. isSelected ? AppTheme.accentPurple.opacity(0.5) : AppTheme.cardBorder,
  166. lineWidth: 1
  167. )
  168. )
  169. }
  170. .buttonStyle(.plain)
  171. }
  172. }
  173. struct PostTagToggle: View {
  174. let title: String
  175. let systemImage: String
  176. let activeColor: Color
  177. @Binding var isOn: Bool
  178. var body: some View {
  179. Button {
  180. isOn.toggle()
  181. } label: {
  182. HStack(spacing: 5) {
  183. Image(systemName: systemImage)
  184. .font(.system(size: 10, weight: .semibold))
  185. Text(title)
  186. .font(.system(size: 10, weight: .semibold))
  187. }
  188. .foregroundStyle(isOn ? activeColor : AppTheme.textSecondary)
  189. .padding(.horizontal, 10)
  190. .padding(.vertical, 6)
  191. .background(
  192. RoundedRectangle(cornerRadius: 6)
  193. .fill(isOn ? activeColor.opacity(0.15) : AppTheme.panelBackground)
  194. )
  195. .overlay(
  196. RoundedRectangle(cornerRadius: 6)
  197. .stroke(isOn ? activeColor.opacity(0.4) : AppTheme.cardBorder, lineWidth: 1)
  198. )
  199. }
  200. .buttonStyle(.plain)
  201. }
  202. }
  203. struct TonePicker: View {
  204. @Binding var selectedTone: PostTone
  205. var body: some View {
  206. ScrollView(.horizontal, showsIndicators: false) {
  207. HStack(spacing: 6) {
  208. ForEach(PostTone.allCases) { tone in
  209. Button {
  210. selectedTone = tone
  211. } label: {
  212. Text(tone.title)
  213. .font(.system(size: 10, weight: .semibold))
  214. .foregroundStyle(selectedTone == tone ? .white : AppTheme.textSecondary)
  215. .padding(.horizontal, 10)
  216. .padding(.vertical, 6)
  217. .background(
  218. Capsule()
  219. .fill(selectedTone == tone ? AppTheme.accentPurple : AppTheme.panelBackground)
  220. )
  221. .overlay(
  222. Capsule()
  223. .stroke(
  224. selectedTone == tone ? AppTheme.accentPurple.opacity(0.5) : AppTheme.cardBorder,
  225. lineWidth: 1
  226. )
  227. )
  228. }
  229. .buttonStyle(.plain)
  230. }
  231. }
  232. }
  233. }
  234. }
  235. struct PostGeneratorMessageBanner: View {
  236. let message: String
  237. let isError: Bool
  238. var body: some View {
  239. HStack(spacing: 8) {
  240. Image(systemName: isError ? "exclamationmark.circle.fill" : "checkmark.circle.fill")
  241. .font(.system(size: 12))
  242. Text(message)
  243. .font(.system(size: 11))
  244. }
  245. .foregroundStyle(isError ? Color(hex: 0xF87171) : AppTheme.accentGreen)
  246. .padding(.horizontal, 12)
  247. .padding(.vertical, 8)
  248. .frame(maxWidth: .infinity, alignment: .leading)
  249. .background(
  250. RoundedRectangle(cornerRadius: 8)
  251. .fill((isError ? Color(hex: 0xF87171) : AppTheme.accentGreen).opacity(0.1))
  252. )
  253. }
  254. }
  255. // MARK: - Reddit Preview Card
  256. struct RedditPostPreviewCard: View {
  257. let draft: PostDraft
  258. let formattedSubreddit: String
  259. var body: some View {
  260. VStack(alignment: .leading, spacing: 0) {
  261. previewHeader
  262. previewContent
  263. }
  264. .background(AppTheme.panelBackground)
  265. .clipShape(RoundedRectangle(cornerRadius: AppTheme.cornerRadius))
  266. .overlay(
  267. RoundedRectangle(cornerRadius: AppTheme.cornerRadius)
  268. .stroke(AppTheme.cardBorder, lineWidth: 1)
  269. )
  270. }
  271. private var previewHeader: some View {
  272. HStack(spacing: 8) {
  273. Circle()
  274. .fill(
  275. LinearGradient(
  276. colors: [AppTheme.accentOrange, AppTheme.accentOrange.opacity(0.7)],
  277. startPoint: .topLeading,
  278. endPoint: .bottomTrailing
  279. )
  280. )
  281. .frame(width: 28, height: 28)
  282. .overlay {
  283. Image(systemName: "person.fill")
  284. .font(.system(size: 12))
  285. .foregroundStyle(.white)
  286. }
  287. VStack(alignment: .leading, spacing: 1) {
  288. HStack(spacing: 4) {
  289. Text(formattedSubreddit)
  290. .font(.system(size: 11, weight: .semibold))
  291. .foregroundStyle(AppTheme.textPrimary)
  292. if !draft.flair.isEmpty {
  293. Text(draft.flair)
  294. .font(.system(size: 9, weight: .semibold))
  295. .foregroundStyle(AppTheme.accentBlue)
  296. .padding(.horizontal, 6)
  297. .padding(.vertical, 2)
  298. .background(AppTheme.accentBlue.opacity(0.15))
  299. .clipShape(Capsule())
  300. }
  301. }
  302. Text("u/ReddoraUser · just now")
  303. .font(.system(size: 9))
  304. .foregroundStyle(AppTheme.textTertiary)
  305. }
  306. Spacer()
  307. previewTags
  308. }
  309. .padding(.horizontal, 14)
  310. .padding(.top, 14)
  311. .padding(.bottom, 10)
  312. }
  313. @ViewBuilder
  314. private var previewTags: some View {
  315. HStack(spacing: 4) {
  316. if draft.isNSFW {
  317. previewTag("NSFW", color: Color(hex: 0xEF4444))
  318. }
  319. if draft.isSpoiler {
  320. previewTag("Spoiler", color: AppTheme.textSecondary)
  321. }
  322. if draft.isOC {
  323. previewTag("OC", color: AppTheme.accentGreen)
  324. }
  325. }
  326. }
  327. private func previewTag(_ text: String, color: Color) -> some View {
  328. Text(text)
  329. .font(.system(size: 8, weight: .bold))
  330. .foregroundStyle(color)
  331. .padding(.horizontal, 5)
  332. .padding(.vertical, 2)
  333. .background(color.opacity(0.15))
  334. .clipShape(RoundedRectangle(cornerRadius: 3))
  335. }
  336. @ViewBuilder
  337. private var previewContent: some View {
  338. VStack(alignment: .leading, spacing: 10) {
  339. Text(draft.title.isEmpty ? "Your post title will appear here" : draft.title)
  340. .font(.system(size: 14, weight: .semibold))
  341. .foregroundStyle(draft.title.isEmpty ? AppTheme.textTertiary : AppTheme.textPrimary)
  342. .fixedSize(horizontal: false, vertical: true)
  343. switch draft.postType {
  344. case .text:
  345. textPreview
  346. case .image:
  347. imagePreview
  348. case .link:
  349. linkPreview
  350. case .video:
  351. videoPreview
  352. case .poll:
  353. pollPreview
  354. }
  355. }
  356. .padding(.horizontal, 14)
  357. .padding(.bottom, 14)
  358. }
  359. @ViewBuilder
  360. private var textPreview: some View {
  361. if !draft.body.isEmpty {
  362. Text(draft.body)
  363. .font(.system(size: 12))
  364. .foregroundStyle(AppTheme.textSecondary)
  365. .lineSpacing(3)
  366. .fixedSize(horizontal: false, vertical: true)
  367. }
  368. }
  369. @ViewBuilder
  370. private var imagePreview: some View {
  371. if let url = draft.imageFileURL, let nsImage = NSImage(contentsOf: url) {
  372. Image(nsImage: nsImage)
  373. .resizable()
  374. .aspectRatio(contentMode: .fit)
  375. .frame(maxHeight: 200)
  376. .clipShape(RoundedRectangle(cornerRadius: 8))
  377. } else {
  378. imagePlaceholder(icon: "photo", label: "Image preview")
  379. }
  380. if !draft.body.isEmpty {
  381. Text(draft.body)
  382. .font(.system(size: 11))
  383. .foregroundStyle(AppTheme.textSecondary)
  384. }
  385. }
  386. @ViewBuilder
  387. private var linkPreview: some View {
  388. linkCard(
  389. domain: linkDomain,
  390. title: draft.linkURL.isEmpty ? "Link preview" : draft.title,
  391. url: draft.linkURL
  392. )
  393. if !draft.body.isEmpty {
  394. Text(draft.body)
  395. .font(.system(size: 11))
  396. .foregroundStyle(AppTheme.textSecondary)
  397. }
  398. }
  399. @ViewBuilder
  400. private var videoPreview: some View {
  401. if draft.videoURL.isEmpty {
  402. imagePlaceholder(icon: "play.rectangle", label: "Video preview")
  403. } else {
  404. linkCard(
  405. domain: videoDomain,
  406. title: "Video link",
  407. url: draft.videoURL
  408. )
  409. }
  410. if !draft.body.isEmpty {
  411. Text(draft.body)
  412. .font(.system(size: 11))
  413. .foregroundStyle(AppTheme.textSecondary)
  414. }
  415. }
  416. @ViewBuilder
  417. private var pollPreview: some View {
  418. VStack(spacing: 6) {
  419. ForEach(draft.pollOptions) { option in
  420. HStack {
  421. Text(option.text.isEmpty ? "Poll option" : option.text)
  422. .font(.system(size: 11))
  423. .foregroundStyle(option.text.isEmpty ? AppTheme.textTertiary : AppTheme.textPrimary)
  424. Spacer()
  425. Circle()
  426. .stroke(AppTheme.cardBorder, lineWidth: 1.5)
  427. .frame(width: 14, height: 14)
  428. }
  429. .padding(.horizontal, 10)
  430. .padding(.vertical, 8)
  431. .background(AppTheme.cardBackground)
  432. .clipShape(RoundedRectangle(cornerRadius: 6))
  433. }
  434. }
  435. Text("Poll ends in \(draft.pollDuration.label)")
  436. .font(.system(size: 9))
  437. .foregroundStyle(AppTheme.textTertiary)
  438. }
  439. private func imagePlaceholder(icon: String, label: String) -> some View {
  440. RoundedRectangle(cornerRadius: 8)
  441. .fill(AppTheme.cardBackground)
  442. .frame(height: 140)
  443. .overlay {
  444. VStack(spacing: 6) {
  445. Image(systemName: icon)
  446. .font(.system(size: 24))
  447. .foregroundStyle(AppTheme.textTertiary)
  448. Text(label)
  449. .font(.system(size: 10))
  450. .foregroundStyle(AppTheme.textTertiary)
  451. }
  452. }
  453. }
  454. private func linkCard(domain: String, title: String, url: String) -> some View {
  455. HStack(spacing: 10) {
  456. RoundedRectangle(cornerRadius: 6)
  457. .fill(AppTheme.cardBackground)
  458. .frame(width: 60, height: 60)
  459. .overlay {
  460. Image(systemName: "link")
  461. .font(.system(size: 18))
  462. .foregroundStyle(AppTheme.textTertiary)
  463. }
  464. VStack(alignment: .leading, spacing: 3) {
  465. Text(domain.isEmpty ? "example.com" : domain)
  466. .font(.system(size: 9))
  467. .foregroundStyle(AppTheme.textTertiary)
  468. Text(title)
  469. .font(.system(size: 11, weight: .medium))
  470. .foregroundStyle(AppTheme.textPrimary)
  471. .lineLimit(2)
  472. }
  473. Spacer(minLength: 0)
  474. }
  475. .padding(10)
  476. .background(AppTheme.cardBackground)
  477. .clipShape(RoundedRectangle(cornerRadius: 8))
  478. .overlay(
  479. RoundedRectangle(cornerRadius: 8)
  480. .stroke(AppTheme.cardBorder, lineWidth: 1)
  481. )
  482. }
  483. private var linkDomain: String {
  484. guard let url = URL(string: draft.linkURL), let host = url.host else { return "" }
  485. return host
  486. }
  487. private var videoDomain: String {
  488. guard let url = URL(string: draft.videoURL), let host = url.host else { return "" }
  489. return host
  490. }
  491. }