PostGeneratorView.swift 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668
  1. import AppKit
  2. import SwiftUI
  3. import UniformTypeIdentifiers
  4. struct PostGeneratorView: View {
  5. @Environment(\.requirePremiumAccess) private var requirePremiumAccess
  6. @Bindable var viewModel: PostGeneratorViewModel
  7. let onOpenInReddit: (URL) -> Void
  8. var body: some View {
  9. VStack(spacing: 0) {
  10. header
  11. messageBanners
  12. tabBar
  13. ScrollView {
  14. PostPageBoundary {
  15. switch viewModel.selectedTab {
  16. case .compose:
  17. composeContent
  18. case .preview:
  19. previewContent
  20. }
  21. }
  22. .padding(.horizontal, 24)
  23. .padding(.top, 8)
  24. .padding(.bottom, 24)
  25. }
  26. }
  27. .background(AppTheme.background)
  28. .fileImporter(
  29. isPresented: $viewModel.showImageImporter,
  30. allowedContentTypes: [.image],
  31. allowsMultipleSelection: false
  32. ) { result in
  33. switch result {
  34. case .success(let urls):
  35. if let url = urls.first {
  36. viewModel.setImage(from: url)
  37. }
  38. case .failure(let error):
  39. viewModel.handleImageImportFailure(error)
  40. }
  41. }
  42. .alert("Replace existing content?", isPresented: $viewModel.showOverwriteConfirmation) {
  43. Button("Cancel", role: .cancel) {
  44. viewModel.cancelOverwriteConfirmation()
  45. }
  46. Button("Replace", role: .destructive) {
  47. guard requirePremiumAccess() else { return }
  48. Task { await viewModel.confirmOverwriteAndGenerate() }
  49. }
  50. } message: {
  51. Text("Generating will replace your current title, body, and poll options.")
  52. }
  53. .onChange(of: viewModel.draft.topic) { _, _ in viewModel.notifyDraftEdited() }
  54. .onChange(of: viewModel.draft.subreddit) { _, _ in viewModel.notifyDraftEdited() }
  55. .onChange(of: viewModel.draft.title) { _, _ in viewModel.notifyDraftEdited() }
  56. .onChange(of: viewModel.draft.body) { _, _ in viewModel.notifyDraftEdited() }
  57. .onChange(of: viewModel.draft.linkURL) { _, _ in viewModel.notifyDraftEdited() }
  58. .onChange(of: viewModel.draft.videoURL) { _, _ in viewModel.notifyDraftEdited() }
  59. .onChange(of: viewModel.draft.flair) { _, _ in viewModel.notifyDraftEdited() }
  60. }
  61. // MARK: - Header
  62. private var header: some View {
  63. HStack(spacing: 14) {
  64. ModernSidebarIconView(kind: .postGenerator, size: 40)
  65. VStack(alignment: .leading, spacing: 2) {
  66. HStack(spacing: 6) {
  67. Text("Post Generator")
  68. .font(.system(size: 18, weight: .semibold))
  69. .foregroundStyle(AppTheme.textPrimary)
  70. if viewModel.hasDraftChanges {
  71. Circle()
  72. .fill(AppTheme.accentOrange)
  73. .frame(width: 6, height: 6)
  74. .help("Draft has unsaved edits")
  75. }
  76. }
  77. Text(viewModel.usesLiveAI ? "Create Reddit-ready posts with OpenAI" : "Create Reddit-ready posts with AI templates")
  78. .font(.system(size: 11))
  79. .foregroundStyle(AppTheme.textSecondary)
  80. }
  81. Spacer()
  82. headerActions
  83. }
  84. .padding(.horizontal, 24)
  85. .padding(.vertical, 16)
  86. .overlay(alignment: .bottom) {
  87. Rectangle()
  88. .fill(AppTheme.border)
  89. .frame(height: 1)
  90. }
  91. }
  92. @ViewBuilder
  93. private var messageBanners: some View {
  94. if let error = viewModel.errorMessage {
  95. PostGeneratorMessageBanner(message: error, isError: true)
  96. .padding(.horizontal, 24)
  97. .padding(.top, 8)
  98. } else if let success = viewModel.successMessage {
  99. PostGeneratorMessageBanner(message: success, isError: false)
  100. .padding(.horizontal, 24)
  101. .padding(.top, 8)
  102. }
  103. }
  104. private var headerActions: some View {
  105. HStack(spacing: 8) {
  106. Button {
  107. viewModel.resetDraft()
  108. } label: {
  109. Label("Reset", systemImage: "arrow.counterclockwise")
  110. .font(.system(size: 11, weight: .medium))
  111. }
  112. .buttonStyle(PostSecondaryButtonStyle())
  113. Button {
  114. viewModel.openInReddit(openInApp: onOpenInReddit)
  115. } label: {
  116. Label("Open in Reddit", systemImage: "arrow.up.right.square")
  117. .font(.system(size: 11, weight: .medium))
  118. }
  119. .buttonStyle(PostSecondaryButtonStyle())
  120. .disabled(!viewModel.canExport)
  121. Button {
  122. viewModel.copyToClipboard()
  123. } label: {
  124. Label("Copy", systemImage: "doc.on.doc")
  125. .font(.system(size: 11, weight: .medium))
  126. }
  127. .buttonStyle(PostSecondaryButtonStyle())
  128. .disabled(!viewModel.canExport)
  129. Button {
  130. guard requirePremiumAccess() else { return }
  131. Task { await viewModel.generatePost() }
  132. } label: {
  133. HStack(spacing: 6) {
  134. if viewModel.isGenerating {
  135. ProgressView()
  136. .controlSize(.small)
  137. .tint(.white)
  138. } else {
  139. Image(systemName: "sparkles")
  140. .font(.system(size: 11, weight: .semibold))
  141. }
  142. Text(viewModel.isGenerating ? "Generating…" : "Generate")
  143. .font(.system(size: 11, weight: .semibold))
  144. }
  145. .foregroundStyle(.white)
  146. .padding(.horizontal, 14)
  147. .padding(.vertical, 8)
  148. .background(viewModel.canGenerate ? AppTheme.accentPurple : AppTheme.accentPurple.opacity(0.4))
  149. .clipShape(RoundedRectangle(cornerRadius: 8))
  150. }
  151. .buttonStyle(.plain)
  152. .disabled(!viewModel.canGenerate)
  153. }
  154. }
  155. // MARK: - Tab Bar
  156. private var tabBar: some View {
  157. HStack(spacing: 4) {
  158. ForEach(PostGeneratorTab.allCases) { tab in
  159. Button {
  160. viewModel.selectedTab = tab
  161. } label: {
  162. Text(tab.title)
  163. .font(.system(size: 11, weight: .semibold))
  164. .foregroundStyle(viewModel.selectedTab == tab ? AppTheme.textPrimary : AppTheme.textSecondary)
  165. .padding(.horizontal, 14)
  166. .padding(.vertical, 8)
  167. .background(
  168. viewModel.selectedTab == tab
  169. ? AppTheme.cardBackground
  170. : Color.clear
  171. )
  172. .clipShape(RoundedRectangle(cornerRadius: 8))
  173. }
  174. .buttonStyle(.plain)
  175. }
  176. Spacer()
  177. }
  178. .padding(.horizontal, 24)
  179. .padding(.top, 12)
  180. .padding(.bottom, 4)
  181. }
  182. // MARK: - Compose
  183. private var composeContent: some View {
  184. ViewThatFits(in: .horizontal) {
  185. HStack(alignment: .top, spacing: 16) {
  186. configurationPanel
  187. editorPanel
  188. }
  189. VStack(alignment: .leading, spacing: 16) {
  190. configurationPanel
  191. editorPanel
  192. }
  193. }
  194. }
  195. private var configurationPanel: some View {
  196. VStack(spacing: 12) {
  197. PostFormCard(title: "Post Type", subtitle: "Choose how you want to post") {
  198. PostTypePicker(selectedType: Binding(
  199. get: { viewModel.draft.postType },
  200. set: { viewModel.selectPostType($0) }
  201. ))
  202. }
  203. PostFormCard(title: "Target Subreddit", subtitle: "Where will this be posted?") {
  204. VStack(alignment: .leading, spacing: 6) {
  205. PostFormField(
  206. label: "Subreddit",
  207. placeholder: "technology",
  208. text: $viewModel.draft.subreddit,
  209. prefix: "r/"
  210. )
  211. if !viewModel.draft.subreddit.isEmpty,
  212. !PostDraftValidator.isValidSubreddit(viewModel.draft.subreddit) {
  213. Text("Use 3–21 characters: letters, numbers, underscores only.")
  214. .font(.system(size: 9))
  215. .foregroundStyle(Color(hex: 0xF87171))
  216. }
  217. }
  218. }
  219. PostFormCard(title: "AI Settings", subtitle: "Guide the tone and topic") {
  220. VStack(alignment: .leading, spacing: 12) {
  221. PostFormField(
  222. label: "Topic / Keywords",
  223. placeholder: "e.g. macOS productivity tips",
  224. text: $viewModel.draft.topic
  225. )
  226. VStack(alignment: .leading, spacing: 6) {
  227. Text("Tone")
  228. .font(.system(size: 10, weight: .medium))
  229. .foregroundStyle(AppTheme.textTertiary)
  230. TonePicker(selectedTone: $viewModel.draft.tone)
  231. }
  232. }
  233. }
  234. PostFormCard(title: "Post Tags", subtitle: "Reddit content labels") {
  235. HStack(spacing: 6) {
  236. PostTagToggle(
  237. title: "NSFW",
  238. systemImage: "exclamationmark.triangle.fill",
  239. activeColor: Color(hex: 0xEF4444),
  240. isOn: $viewModel.draft.isNSFW
  241. )
  242. PostTagToggle(
  243. title: "Spoiler",
  244. systemImage: "eye.slash.fill",
  245. activeColor: AppTheme.textSecondary,
  246. isOn: $viewModel.draft.isSpoiler
  247. )
  248. PostTagToggle(
  249. title: "OC",
  250. systemImage: "star.fill",
  251. activeColor: AppTheme.accentGreen,
  252. isOn: $viewModel.draft.isOC
  253. )
  254. }
  255. }
  256. PostFormCard(title: "Flair", subtitle: "Optional subreddit flair") {
  257. PostFormField(
  258. label: "Flair",
  259. placeholder: "Discussion, Question, Meme…",
  260. text: $viewModel.draft.flair
  261. )
  262. }
  263. }
  264. .frame(minWidth: 280, idealWidth: 300, maxWidth: 320)
  265. }
  266. private var editorPanel: some View {
  267. VStack(spacing: 12) {
  268. PostFormCard(title: "Title", subtitle: "Required for all post types") {
  269. PostFormField(
  270. label: "Post Title",
  271. placeholder: "An engaging title for your post",
  272. text: $viewModel.draft.title
  273. )
  274. }
  275. postTypeEditor
  276. characterCountFooter
  277. }
  278. .frame(maxWidth: .infinity)
  279. }
  280. @ViewBuilder
  281. private var postTypeEditor: some View {
  282. switch viewModel.draft.postType {
  283. case .text:
  284. textPostEditor
  285. case .image:
  286. imagePostEditor
  287. case .link:
  288. linkPostEditor
  289. case .video:
  290. videoPostEditor
  291. case .poll:
  292. pollPostEditor
  293. }
  294. }
  295. private var textPostEditor: some View {
  296. PostFormCard(title: "Body", subtitle: "Markdown supported — **bold**, *italic*, links") {
  297. PostFormTextEditor(
  298. label: "Post Body",
  299. placeholder: "Write your post content here…",
  300. text: $viewModel.draft.body,
  301. minHeight: 220
  302. )
  303. }
  304. }
  305. private var imagePostEditor: some View {
  306. PostFormCard(title: "Image", subtitle: "Upload an image for your post") {
  307. VStack(alignment: .leading, spacing: 12) {
  308. imageUploadArea
  309. PostFormTextEditor(
  310. label: "Caption (optional)",
  311. placeholder: "Add context for your image…",
  312. text: $viewModel.draft.body,
  313. minHeight: 80
  314. )
  315. }
  316. }
  317. }
  318. private var linkPostEditor: some View {
  319. PostFormCard(title: "Link", subtitle: "Share a URL with the community") {
  320. VStack(alignment: .leading, spacing: 12) {
  321. PostFormField(
  322. label: "URL",
  323. placeholder: "https://example.com/article",
  324. text: $viewModel.draft.linkURL
  325. )
  326. if !viewModel.draft.linkURL.isEmpty,
  327. !PostDraftValidator.isValidHTTPURL(viewModel.draft.linkURL) {
  328. Text("Enter a valid http or https URL.")
  329. .font(.system(size: 9))
  330. .foregroundStyle(Color(hex: 0xF87171))
  331. }
  332. PostFormTextEditor(
  333. label: "Description (optional)",
  334. placeholder: "Why are you sharing this link?",
  335. text: $viewModel.draft.body,
  336. minHeight: 100
  337. )
  338. }
  339. }
  340. }
  341. private var videoPostEditor: some View {
  342. PostFormCard(title: "Video", subtitle: "Link to YouTube, Vimeo, or direct video URL") {
  343. VStack(alignment: .leading, spacing: 12) {
  344. PostFormField(
  345. label: "Video URL",
  346. placeholder: "https://youtube.com/watch?v=…",
  347. text: $viewModel.draft.videoURL
  348. )
  349. if !viewModel.draft.videoURL.isEmpty,
  350. !PostDraftValidator.isValidHTTPURL(viewModel.draft.videoURL) {
  351. Text("Enter a valid http or https URL.")
  352. .font(.system(size: 9))
  353. .foregroundStyle(Color(hex: 0xF87171))
  354. }
  355. PostFormTextEditor(
  356. label: "Description (optional)",
  357. placeholder: "Add context for your video…",
  358. text: $viewModel.draft.body,
  359. minHeight: 100
  360. )
  361. }
  362. }
  363. }
  364. private var pollPostEditor: some View {
  365. PostFormCard(title: "Poll", subtitle: "2–6 options, community votes") {
  366. VStack(alignment: .leading, spacing: 12) {
  367. ForEach(Array(viewModel.draft.pollOptions.enumerated()), id: \.element.id) { index, option in
  368. HStack(spacing: 8) {
  369. PostFormField(
  370. label: "Option \(index + 1)",
  371. placeholder: "Enter poll option",
  372. text: Binding(
  373. get: { option.text },
  374. set: { viewModel.updatePollOption(id: option.id, text: $0) }
  375. )
  376. )
  377. if viewModel.canRemovePollOption {
  378. Button {
  379. viewModel.removePollOption(option)
  380. } label: {
  381. Image(systemName: "minus.circle.fill")
  382. .font(.system(size: 14))
  383. .foregroundStyle(Color(hex: 0xEF4444).opacity(0.8))
  384. }
  385. .buttonStyle(.plain)
  386. .padding(.top, 18)
  387. }
  388. }
  389. }
  390. if viewModel.canAddPollOption {
  391. Button {
  392. viewModel.addPollOption()
  393. } label: {
  394. Label("Add Option", systemImage: "plus.circle.fill")
  395. .font(.system(size: 11, weight: .medium))
  396. .foregroundStyle(AppTheme.accentPurpleLight)
  397. }
  398. .buttonStyle(.plain)
  399. }
  400. VStack(alignment: .leading, spacing: 6) {
  401. Text("Poll Duration")
  402. .font(.system(size: 10, weight: .medium))
  403. .foregroundStyle(AppTheme.textTertiary)
  404. HStack(spacing: 6) {
  405. ForEach(PollDuration.allCases) { duration in
  406. Button {
  407. viewModel.draft.pollDuration = duration
  408. viewModel.notifyDraftEdited()
  409. } label: {
  410. Text(duration.label)
  411. .font(.system(size: 10, weight: .semibold))
  412. .foregroundStyle(
  413. viewModel.draft.pollDuration == duration ? .white : AppTheme.textSecondary
  414. )
  415. .padding(.horizontal, 12)
  416. .padding(.vertical, 6)
  417. .background(
  418. Capsule()
  419. .fill(
  420. viewModel.draft.pollDuration == duration
  421. ? AppTheme.accentPurple
  422. : AppTheme.panelBackground
  423. )
  424. )
  425. .overlay(
  426. Capsule()
  427. .stroke(AppTheme.cardBorder, lineWidth: 1)
  428. )
  429. }
  430. .buttonStyle(.plain)
  431. }
  432. }
  433. }
  434. PostFormTextEditor(
  435. label: "Context (optional)",
  436. placeholder: "Explain why you're running this poll…",
  437. text: $viewModel.draft.body,
  438. minHeight: 80
  439. )
  440. }
  441. }
  442. }
  443. @ViewBuilder
  444. private var imageUploadArea: some View {
  445. if let url = viewModel.draft.imageFileURL, let nsImage = NSImage(contentsOf: url) {
  446. ZStack(alignment: .topTrailing) {
  447. Image(nsImage: nsImage)
  448. .resizable()
  449. .aspectRatio(contentMode: .fit)
  450. .frame(maxHeight: 180)
  451. .frame(maxWidth: .infinity)
  452. .clipShape(RoundedRectangle(cornerRadius: 8))
  453. Button {
  454. viewModel.removeImage()
  455. } label: {
  456. Image(systemName: "xmark.circle.fill")
  457. .font(.system(size: 18))
  458. .foregroundStyle(.white)
  459. .shadow(radius: 2)
  460. }
  461. .buttonStyle(.plain)
  462. .padding(8)
  463. }
  464. } else {
  465. Button {
  466. viewModel.showImageImporter = true
  467. } label: {
  468. VStack(spacing: 8) {
  469. Image(systemName: "photo.badge.plus")
  470. .font(.system(size: 24))
  471. .foregroundStyle(AppTheme.accentPurpleLight)
  472. Text("Click to upload image")
  473. .font(.system(size: 11, weight: .medium))
  474. .foregroundStyle(AppTheme.textSecondary)
  475. Text("PNG, JPG, GIF, WebP")
  476. .font(.system(size: 9))
  477. .foregroundStyle(AppTheme.textTertiary)
  478. }
  479. .frame(maxWidth: .infinity)
  480. .frame(height: 140)
  481. .background(AppTheme.panelBackground)
  482. .clipShape(RoundedRectangle(cornerRadius: 8))
  483. .overlay(
  484. RoundedRectangle(cornerRadius: 8)
  485. .strokeBorder(
  486. AppTheme.accentPurple.opacity(0.3),
  487. style: StrokeStyle(lineWidth: 1, dash: [6, 4])
  488. )
  489. )
  490. }
  491. .buttonStyle(.plain)
  492. }
  493. }
  494. private var characterCountFooter: some View {
  495. HStack {
  496. Text(titleCharacterCount)
  497. .font(.system(size: 10))
  498. .foregroundStyle(
  499. viewModel.draft.title.count > PostDraftValidator.maxTitleLength
  500. ? Color(hex: 0xF87171)
  501. : AppTheme.textTertiary
  502. )
  503. if !viewModel.draft.body.isEmpty {
  504. Text(bodyCharacterCount)
  505. .font(.system(size: 10))
  506. .foregroundStyle(
  507. viewModel.draft.body.count > PostDraftValidator.maxBodyLength
  508. ? Color(hex: 0xF87171)
  509. : AppTheme.textTertiary
  510. )
  511. }
  512. Spacer()
  513. Text("Reddit limits: 300 title · 40,000 body")
  514. .font(.system(size: 10))
  515. .foregroundStyle(AppTheme.textTertiary)
  516. }
  517. }
  518. private var titleCharacterCount: String {
  519. "\(viewModel.draft.title.count) / \(PostDraftValidator.maxTitleLength) title"
  520. }
  521. private var bodyCharacterCount: String {
  522. "\(viewModel.draft.body.count) / \(PostDraftValidator.maxBodyLength) body"
  523. }
  524. // MARK: - Preview
  525. private var previewContent: some View {
  526. HStack {
  527. Spacer(minLength: 0)
  528. VStack(spacing: 16) {
  529. Text("Live Preview")
  530. .font(.system(size: 12, weight: .semibold))
  531. .foregroundStyle(AppTheme.textSecondary)
  532. .frame(maxWidth: .infinity, alignment: .leading)
  533. RedditPostPreviewCard(
  534. draft: viewModel.draft,
  535. formattedSubreddit: viewModel.formattedSubreddit
  536. )
  537. previewMetadata
  538. }
  539. .frame(maxWidth: 560)
  540. Spacer(minLength: 0)
  541. }
  542. }
  543. private var previewMetadata: some View {
  544. VStack(alignment: .leading, spacing: 8) {
  545. metadataRow(label: "Type", value: viewModel.draft.postType.title)
  546. metadataRow(label: "Subreddit", value: viewModel.formattedSubreddit)
  547. metadataRow(label: "Tone", value: viewModel.draft.tone.title)
  548. metadataRow(label: "Engine", value: viewModel.usesLiveAI ? "OpenAI" : "Local templates")
  549. if viewModel.draft.isNSFW || viewModel.draft.isSpoiler || viewModel.draft.isOC {
  550. metadataRow(
  551. label: "Tags",
  552. value: [
  553. viewModel.draft.isNSFW ? "NSFW" : nil,
  554. viewModel.draft.isSpoiler ? "Spoiler" : nil,
  555. viewModel.draft.isOC ? "OC" : nil,
  556. ]
  557. .compactMap { $0 }
  558. .joined(separator: ", ")
  559. )
  560. }
  561. }
  562. .padding(14)
  563. .frame(maxWidth: .infinity, alignment: .leading)
  564. .background(
  565. RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
  566. .fill(AppTheme.cardBackground)
  567. .overlay(
  568. RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
  569. .stroke(AppTheme.cardBorder, lineWidth: 1)
  570. )
  571. )
  572. }
  573. private func metadataRow(label: String, value: String) -> some View {
  574. HStack {
  575. Text(label)
  576. .font(.system(size: 10, weight: .medium))
  577. .foregroundStyle(AppTheme.textTertiary)
  578. .frame(width: 70, alignment: .leading)
  579. Text(value)
  580. .font(.system(size: 10))
  581. .foregroundStyle(AppTheme.textSecondary)
  582. }
  583. }
  584. }
  585. private struct PostSecondaryButtonStyle: ButtonStyle {
  586. func makeBody(configuration: Configuration) -> some View {
  587. configuration.label
  588. .foregroundStyle(AppTheme.textSecondary)
  589. .padding(.horizontal, 12)
  590. .padding(.vertical, 8)
  591. .background(AppTheme.cardBackground.opacity(configuration.isPressed ? 0.6 : 1))
  592. .clipShape(RoundedRectangle(cornerRadius: 8))
  593. .overlay(
  594. RoundedRectangle(cornerRadius: 8)
  595. .stroke(AppTheme.cardBorder, lineWidth: 1)
  596. )
  597. }
  598. }
  599. #Preview {
  600. PostGeneratorView(viewModel: PostGeneratorViewModel()) { _ in }
  601. .frame(width: 880, height: 720)
  602. }