PostGeneratorView.swift 28 KB

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