PostGeneratorView.swift 29 KB

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