PostGeneratorView.swift 29 KB

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