PostGeneratorView.swift 24 KB

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