PostGeneratorComponents.swift 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568
  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: - Markdown
  256. struct PostMarkdownText: View {
  257. let text: String
  258. var fontSize: CGFloat = 12
  259. var color: Color = AppTheme.textSecondary
  260. var lineSpacing: CGFloat = 3
  261. var body: some View {
  262. if let attributed = try? AttributedString(
  263. markdown: text,
  264. options: AttributedString.MarkdownParsingOptions(interpretedSyntax: .inlineOnlyPreservingWhitespace)
  265. ) {
  266. Text(attributed)
  267. .font(.system(size: fontSize))
  268. .foregroundStyle(color)
  269. .lineSpacing(lineSpacing)
  270. .fixedSize(horizontal: false, vertical: true)
  271. .textSelection(.enabled)
  272. } else {
  273. Text(text)
  274. .font(.system(size: fontSize))
  275. .foregroundStyle(color)
  276. .lineSpacing(lineSpacing)
  277. .fixedSize(horizontal: false, vertical: true)
  278. .textSelection(.enabled)
  279. }
  280. }
  281. }
  282. // MARK: - Reddit Preview Card
  283. struct RedditPostPreviewCard: View {
  284. let draft: PostDraft
  285. let formattedSubreddit: String
  286. var body: some View {
  287. VStack(alignment: .leading, spacing: 0) {
  288. previewHeader
  289. previewContent
  290. }
  291. .background(AppTheme.panelBackground)
  292. .clipShape(RoundedRectangle(cornerRadius: AppTheme.cornerRadius))
  293. .overlay(
  294. RoundedRectangle(cornerRadius: AppTheme.cornerRadius)
  295. .stroke(AppTheme.cardBorder, lineWidth: 1)
  296. )
  297. }
  298. private var previewHeader: some View {
  299. HStack(spacing: 8) {
  300. Circle()
  301. .fill(
  302. LinearGradient(
  303. colors: [AppTheme.accentOrange, AppTheme.accentOrange.opacity(0.7)],
  304. startPoint: .topLeading,
  305. endPoint: .bottomTrailing
  306. )
  307. )
  308. .frame(width: 28, height: 28)
  309. .overlay {
  310. Image(systemName: "person.fill")
  311. .font(.system(size: 12))
  312. .foregroundStyle(.white)
  313. }
  314. VStack(alignment: .leading, spacing: 1) {
  315. HStack(spacing: 4) {
  316. Text(formattedSubreddit)
  317. .font(.system(size: 11, weight: .semibold))
  318. .foregroundStyle(AppTheme.textPrimary)
  319. if !draft.flair.isEmpty {
  320. Text(draft.flair)
  321. .font(.system(size: 9, weight: .semibold))
  322. .foregroundStyle(AppTheme.accentBlue)
  323. .padding(.horizontal, 6)
  324. .padding(.vertical, 2)
  325. .background(AppTheme.accentBlue.opacity(0.15))
  326. .clipShape(Capsule())
  327. }
  328. }
  329. Text("u/ReddoraUser · just now")
  330. .font(.system(size: 9))
  331. .foregroundStyle(AppTheme.textTertiary)
  332. }
  333. Spacer()
  334. previewTags
  335. }
  336. .padding(.horizontal, 14)
  337. .padding(.top, 14)
  338. .padding(.bottom, 10)
  339. }
  340. @ViewBuilder
  341. private var previewTags: some View {
  342. HStack(spacing: 4) {
  343. if draft.isNSFW {
  344. previewTag("NSFW", color: Color(hex: 0xEF4444))
  345. }
  346. if draft.isSpoiler {
  347. previewTag("Spoiler", color: AppTheme.textSecondary)
  348. }
  349. if draft.isOC {
  350. previewTag("OC", color: AppTheme.accentGreen)
  351. }
  352. }
  353. }
  354. private func previewTag(_ text: String, color: Color) -> some View {
  355. Text(text)
  356. .font(.system(size: 8, weight: .bold))
  357. .foregroundStyle(color)
  358. .padding(.horizontal, 5)
  359. .padding(.vertical, 2)
  360. .background(color.opacity(0.15))
  361. .clipShape(RoundedRectangle(cornerRadius: 3))
  362. }
  363. @ViewBuilder
  364. private var previewContent: some View {
  365. VStack(alignment: .leading, spacing: 10) {
  366. Text(draft.title.isEmpty ? "Your post title will appear here" : draft.title)
  367. .font(.system(size: 14, weight: .semibold))
  368. .foregroundStyle(draft.title.isEmpty ? AppTheme.textTertiary : AppTheme.textPrimary)
  369. .fixedSize(horizontal: false, vertical: true)
  370. switch draft.postType {
  371. case .text:
  372. textPreview
  373. case .image:
  374. imagePreview
  375. case .link:
  376. linkPreview
  377. case .video:
  378. videoPreview
  379. case .poll:
  380. pollPreview
  381. }
  382. }
  383. .padding(.horizontal, 14)
  384. .padding(.bottom, 14)
  385. }
  386. @ViewBuilder
  387. private var textPreview: some View {
  388. if !draft.body.isEmpty {
  389. PostMarkdownText(text: draft.body)
  390. }
  391. }
  392. @ViewBuilder
  393. private var imagePreview: some View {
  394. if let url = draft.imageFileURL, let nsImage = NSImage(contentsOf: url) {
  395. Image(nsImage: nsImage)
  396. .resizable()
  397. .aspectRatio(contentMode: .fit)
  398. .frame(maxHeight: 200)
  399. .clipShape(RoundedRectangle(cornerRadius: 8))
  400. } else {
  401. imagePlaceholder(icon: "photo", label: "Image preview")
  402. }
  403. if !draft.body.isEmpty {
  404. PostMarkdownText(text: draft.body, fontSize: 11)
  405. }
  406. }
  407. @ViewBuilder
  408. private var linkPreview: some View {
  409. linkCard(
  410. domain: linkDomain,
  411. title: draft.linkURL.isEmpty ? "Link preview" : draft.title,
  412. url: draft.linkURL
  413. )
  414. if !draft.body.isEmpty {
  415. PostMarkdownText(text: draft.body, fontSize: 11)
  416. }
  417. }
  418. @ViewBuilder
  419. private var videoPreview: some View {
  420. if draft.videoURL.isEmpty {
  421. imagePlaceholder(icon: "play.rectangle", label: "Video preview")
  422. } else {
  423. linkCard(
  424. domain: videoDomain,
  425. title: draft.title.isEmpty ? "Video link" : draft.title,
  426. url: draft.videoURL
  427. )
  428. }
  429. if !draft.body.isEmpty {
  430. PostMarkdownText(text: draft.body, fontSize: 11)
  431. }
  432. }
  433. @ViewBuilder
  434. private var pollPreview: some View {
  435. if !draft.body.isEmpty {
  436. PostMarkdownText(text: draft.body, fontSize: 11)
  437. }
  438. VStack(spacing: 6) {
  439. ForEach(draft.pollOptions) { option in
  440. HStack {
  441. Text(option.text.isEmpty ? "Poll option" : option.text)
  442. .font(.system(size: 11))
  443. .foregroundStyle(option.text.isEmpty ? AppTheme.textTertiary : AppTheme.textPrimary)
  444. Spacer()
  445. Circle()
  446. .stroke(AppTheme.cardBorder, lineWidth: 1.5)
  447. .frame(width: 14, height: 14)
  448. }
  449. .padding(.horizontal, 10)
  450. .padding(.vertical, 8)
  451. .background(AppTheme.cardBackground)
  452. .clipShape(RoundedRectangle(cornerRadius: 6))
  453. }
  454. }
  455. Text("Poll ends in \(draft.pollDuration.label)")
  456. .font(.system(size: 9))
  457. .foregroundStyle(AppTheme.textTertiary)
  458. }
  459. private func imagePlaceholder(icon: String, label: String) -> some View {
  460. RoundedRectangle(cornerRadius: 8)
  461. .fill(AppTheme.cardBackground)
  462. .frame(height: 140)
  463. .overlay {
  464. VStack(spacing: 6) {
  465. Image(systemName: icon)
  466. .font(.system(size: 24))
  467. .foregroundStyle(AppTheme.textTertiary)
  468. Text(label)
  469. .font(.system(size: 10))
  470. .foregroundStyle(AppTheme.textTertiary)
  471. }
  472. }
  473. }
  474. private func linkCard(domain: String, title: String, url: String) -> some View {
  475. HStack(spacing: 10) {
  476. RoundedRectangle(cornerRadius: 6)
  477. .fill(AppTheme.cardBackground)
  478. .frame(width: 60, height: 60)
  479. .overlay {
  480. Image(systemName: "link")
  481. .font(.system(size: 18))
  482. .foregroundStyle(AppTheme.textTertiary)
  483. }
  484. VStack(alignment: .leading, spacing: 3) {
  485. Text(domain.isEmpty ? "example.com" : domain)
  486. .font(.system(size: 9))
  487. .foregroundStyle(AppTheme.textTertiary)
  488. Text(title)
  489. .font(.system(size: 11, weight: .medium))
  490. .foregroundStyle(AppTheme.textPrimary)
  491. .lineLimit(2)
  492. }
  493. Spacer(minLength: 0)
  494. }
  495. .padding(10)
  496. .background(AppTheme.cardBackground)
  497. .clipShape(RoundedRectangle(cornerRadius: 8))
  498. .overlay(
  499. RoundedRectangle(cornerRadius: 8)
  500. .stroke(AppTheme.cardBorder, lineWidth: 1)
  501. )
  502. }
  503. private var linkDomain: String {
  504. guard let url = URL(string: draft.linkURL), let host = url.host else { return "" }
  505. return host
  506. }
  507. private var videoDomain: String {
  508. guard let url = URL(string: draft.videoURL), let host = url.host else { return "" }
  509. return host
  510. }
  511. }