PostGeneratorView.swift 20 KB

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