PostGeneratorComponents.swift 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557
  1. import AppKit
  2. import SwiftUI
  3. import UniformTypeIdentifiers
  4. // MARK: - Page Boundary
  5. struct PostPageBoundary<Content: View>: View {
  6. @ViewBuilder let content: Content
  7. var body: some View {
  8. content
  9. .padding(20)
  10. .background(
  11. RoundedRectangle(cornerRadius: AppTheme.cornerRadius)
  12. .fill(AppTheme.panelBackground)
  13. )
  14. .overlay(
  15. RoundedRectangle(cornerRadius: AppTheme.cornerRadius)
  16. .stroke(AppTheme.cardBorder, lineWidth: 1)
  17. )
  18. }
  19. }
  20. // MARK: - Shared Form Components
  21. struct PostFormCard<Content: View>: View {
  22. let title: String
  23. var subtitle: String?
  24. @ViewBuilder let content: Content
  25. var body: some View {
  26. VStack(alignment: .leading, spacing: 12) {
  27. VStack(alignment: .leading, spacing: 2) {
  28. Text(title)
  29. .font(.system(size: 12, weight: .semibold))
  30. .foregroundStyle(AppTheme.textPrimary)
  31. if let subtitle {
  32. Text(subtitle)
  33. .font(.system(size: 10))
  34. .foregroundStyle(AppTheme.textSecondary)
  35. }
  36. }
  37. content
  38. }
  39. .padding(14)
  40. .frame(maxWidth: .infinity, alignment: .leading)
  41. .background(
  42. RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
  43. .fill(AppTheme.cardBackground)
  44. .overlay(
  45. RoundedRectangle(cornerRadius: AppTheme.cornerRadiusSmall)
  46. .stroke(AppTheme.cardBorder, lineWidth: 1)
  47. )
  48. )
  49. }
  50. }
  51. struct PostFormField: View {
  52. let label: String
  53. var placeholder: String = ""
  54. @Binding var text: String
  55. var prefix: String?
  56. var body: some View {
  57. VStack(alignment: .leading, spacing: 6) {
  58. Text(label)
  59. .font(.system(size: 10, weight: .medium))
  60. .foregroundStyle(AppTheme.textTertiary)
  61. HStack(spacing: 0) {
  62. if let prefix {
  63. Text(prefix)
  64. .font(.system(size: 12, weight: .medium))
  65. .foregroundStyle(AppTheme.textSecondary)
  66. .padding(.leading, 10)
  67. }
  68. TextField(placeholder, text: $text)
  69. .textFieldStyle(.plain)
  70. .font(.system(size: 12))
  71. .foregroundStyle(AppTheme.textPrimary)
  72. .padding(.horizontal, prefix == nil ? 10 : 4)
  73. .padding(.vertical, 8)
  74. }
  75. .background(AppTheme.panelBackground)
  76. .clipShape(RoundedRectangle(cornerRadius: 8))
  77. .overlay(
  78. RoundedRectangle(cornerRadius: 8)
  79. .stroke(AppTheme.cardBorder, lineWidth: 1)
  80. )
  81. }
  82. }
  83. }
  84. struct PostFormTextEditor: View {
  85. let label: String
  86. var placeholder: String = ""
  87. @Binding var text: String
  88. var minHeight: CGFloat = 120
  89. var body: some View {
  90. VStack(alignment: .leading, spacing: 6) {
  91. Text(label)
  92. .font(.system(size: 10, weight: .medium))
  93. .foregroundStyle(AppTheme.textTertiary)
  94. ThinCaretTextEditor(
  95. text: $text,
  96. placeholder: placeholder
  97. )
  98. .frame(height: minHeight)
  99. .background(AppTheme.panelBackground)
  100. .clipShape(RoundedRectangle(cornerRadius: 8))
  101. .overlay(
  102. RoundedRectangle(cornerRadius: 8)
  103. .stroke(AppTheme.cardBorder, lineWidth: 1)
  104. )
  105. }
  106. }
  107. }
  108. struct PostTypePicker: View {
  109. @Binding var selectedType: RedditPostType
  110. var body: some View {
  111. LazyVGrid(
  112. columns: [GridItem(.flexible()), GridItem(.flexible())],
  113. spacing: 8
  114. ) {
  115. ForEach(RedditPostType.allCases) { type in
  116. PostTypeButton(type: type, isSelected: selectedType == type) {
  117. selectedType = type
  118. }
  119. }
  120. }
  121. }
  122. }
  123. private struct PostTypeButton: View {
  124. let type: RedditPostType
  125. let isSelected: Bool
  126. let action: () -> Void
  127. var body: some View {
  128. Button(action: action) {
  129. HStack(spacing: 8) {
  130. Image(systemName: type.systemImage)
  131. .font(.system(size: 12, weight: .semibold))
  132. .foregroundStyle(isSelected ? AppTheme.accentPurpleLight : AppTheme.textSecondary)
  133. .frame(width: 16)
  134. VStack(alignment: .leading, spacing: 1) {
  135. Text(type.title)
  136. .font(.system(size: 11, weight: .semibold))
  137. .foregroundStyle(AppTheme.textPrimary)
  138. Text(type.subtitle)
  139. .font(.system(size: 9))
  140. .foregroundStyle(AppTheme.textTertiary)
  141. .lineLimit(1)
  142. }
  143. Spacer(minLength: 0)
  144. }
  145. .padding(.horizontal, 10)
  146. .padding(.vertical, 8)
  147. .background(
  148. RoundedRectangle(cornerRadius: 8)
  149. .fill(isSelected ? AppTheme.accentPurple.opacity(0.15) : AppTheme.panelBackground)
  150. )
  151. .overlay(
  152. RoundedRectangle(cornerRadius: 8)
  153. .stroke(
  154. isSelected ? AppTheme.accentPurple.opacity(0.5) : AppTheme.cardBorder,
  155. lineWidth: 1
  156. )
  157. )
  158. }
  159. .buttonStyle(.plain)
  160. }
  161. }
  162. struct PostTagToggle: View {
  163. let title: String
  164. let systemImage: String
  165. let activeColor: Color
  166. @Binding var isOn: Bool
  167. var body: some View {
  168. Button {
  169. isOn.toggle()
  170. } label: {
  171. HStack(spacing: 5) {
  172. Image(systemName: systemImage)
  173. .font(.system(size: 10, weight: .semibold))
  174. Text(title)
  175. .font(.system(size: 10, weight: .semibold))
  176. }
  177. .frame(maxWidth: .infinity)
  178. .foregroundStyle(isOn ? activeColor : AppTheme.textSecondary)
  179. .padding(.horizontal, 10)
  180. .padding(.vertical, 7)
  181. .background(
  182. RoundedRectangle(cornerRadius: 6)
  183. .fill(isOn ? activeColor.opacity(0.15) : AppTheme.panelBackground)
  184. )
  185. .overlay(
  186. RoundedRectangle(cornerRadius: 6)
  187. .stroke(isOn ? activeColor.opacity(0.4) : AppTheme.cardBorder, lineWidth: 1)
  188. )
  189. }
  190. .buttonStyle(.plain)
  191. }
  192. }
  193. struct TonePicker: View {
  194. @Binding var selectedTone: PostTone
  195. var body: some View {
  196. ScrollView(.horizontal, showsIndicators: false) {
  197. HStack(spacing: 6) {
  198. ForEach(PostTone.allCases) { tone in
  199. Button {
  200. selectedTone = tone
  201. } label: {
  202. Text(tone.title)
  203. .font(.system(size: 10, weight: .semibold))
  204. .foregroundStyle(selectedTone == tone ? .white : AppTheme.textSecondary)
  205. .padding(.horizontal, 10)
  206. .padding(.vertical, 6)
  207. .background(
  208. Capsule()
  209. .fill(selectedTone == tone ? AppTheme.accentPurple : AppTheme.panelBackground)
  210. )
  211. .overlay(
  212. Capsule()
  213. .stroke(
  214. selectedTone == tone ? AppTheme.accentPurple.opacity(0.5) : AppTheme.cardBorder,
  215. lineWidth: 1
  216. )
  217. )
  218. }
  219. .buttonStyle(.plain)
  220. }
  221. }
  222. }
  223. }
  224. }
  225. struct PostGeneratorMessageBanner: View {
  226. let message: String
  227. let isError: Bool
  228. var body: some View {
  229. HStack(spacing: 8) {
  230. Image(systemName: isError ? "exclamationmark.circle.fill" : "checkmark.circle.fill")
  231. .font(.system(size: 12))
  232. Text(message)
  233. .font(.system(size: 11))
  234. }
  235. .foregroundStyle(isError ? Color(hex: 0xF87171) : AppTheme.accentGreen)
  236. .padding(.horizontal, 12)
  237. .padding(.vertical, 8)
  238. .frame(maxWidth: .infinity, alignment: .leading)
  239. .background(
  240. RoundedRectangle(cornerRadius: 8)
  241. .fill((isError ? Color(hex: 0xF87171) : AppTheme.accentGreen).opacity(0.1))
  242. )
  243. }
  244. }
  245. // MARK: - Markdown
  246. struct PostMarkdownText: View {
  247. let text: String
  248. var fontSize: CGFloat = 12
  249. var color: Color = AppTheme.textSecondary
  250. var lineSpacing: CGFloat = 3
  251. var body: some View {
  252. if let attributed = try? AttributedString(
  253. markdown: text,
  254. options: AttributedString.MarkdownParsingOptions(interpretedSyntax: .inlineOnlyPreservingWhitespace)
  255. ) {
  256. Text(attributed)
  257. .font(.system(size: fontSize))
  258. .foregroundStyle(color)
  259. .lineSpacing(lineSpacing)
  260. .fixedSize(horizontal: false, vertical: true)
  261. .textSelection(.enabled)
  262. } else {
  263. Text(text)
  264. .font(.system(size: fontSize))
  265. .foregroundStyle(color)
  266. .lineSpacing(lineSpacing)
  267. .fixedSize(horizontal: false, vertical: true)
  268. .textSelection(.enabled)
  269. }
  270. }
  271. }
  272. // MARK: - Reddit Preview Card
  273. struct RedditPostPreviewCard: View {
  274. let draft: PostDraft
  275. let formattedSubreddit: String
  276. var body: some View {
  277. VStack(alignment: .leading, spacing: 0) {
  278. previewHeader
  279. previewContent
  280. }
  281. .background(AppTheme.panelBackground)
  282. .clipShape(RoundedRectangle(cornerRadius: AppTheme.cornerRadius))
  283. .overlay(
  284. RoundedRectangle(cornerRadius: AppTheme.cornerRadius)
  285. .stroke(AppTheme.cardBorder, lineWidth: 1)
  286. )
  287. }
  288. private var previewHeader: some View {
  289. HStack(spacing: 8) {
  290. Circle()
  291. .fill(
  292. LinearGradient(
  293. colors: [AppTheme.accentOrange, AppTheme.accentOrange.opacity(0.7)],
  294. startPoint: .topLeading,
  295. endPoint: .bottomTrailing
  296. )
  297. )
  298. .frame(width: 28, height: 28)
  299. .overlay {
  300. Image(systemName: "person.fill")
  301. .font(.system(size: 12))
  302. .foregroundStyle(.white)
  303. }
  304. VStack(alignment: .leading, spacing: 1) {
  305. HStack(spacing: 4) {
  306. Text(formattedSubreddit)
  307. .font(.system(size: 11, weight: .semibold))
  308. .foregroundStyle(AppTheme.textPrimary)
  309. if !draft.flair.isEmpty {
  310. Text(draft.flair)
  311. .font(.system(size: 9, weight: .semibold))
  312. .foregroundStyle(AppTheme.accentBlue)
  313. .padding(.horizontal, 6)
  314. .padding(.vertical, 2)
  315. .background(AppTheme.accentBlue.opacity(0.15))
  316. .clipShape(Capsule())
  317. }
  318. }
  319. Text("u/ReddoraUser · just now")
  320. .font(.system(size: 9))
  321. .foregroundStyle(AppTheme.textTertiary)
  322. }
  323. Spacer()
  324. previewTags
  325. }
  326. .padding(.horizontal, 14)
  327. .padding(.top, 14)
  328. .padding(.bottom, 10)
  329. }
  330. @ViewBuilder
  331. private var previewTags: some View {
  332. HStack(spacing: 4) {
  333. if draft.isNSFW {
  334. previewTag("NSFW", color: Color(hex: 0xEF4444))
  335. }
  336. if draft.isSpoiler {
  337. previewTag("Spoiler", color: AppTheme.textSecondary)
  338. }
  339. if draft.isOC {
  340. previewTag("OC", color: AppTheme.accentGreen)
  341. }
  342. }
  343. }
  344. private func previewTag(_ text: String, color: Color) -> some View {
  345. Text(text)
  346. .font(.system(size: 8, weight: .bold))
  347. .foregroundStyle(color)
  348. .padding(.horizontal, 5)
  349. .padding(.vertical, 2)
  350. .background(color.opacity(0.15))
  351. .clipShape(RoundedRectangle(cornerRadius: 3))
  352. }
  353. @ViewBuilder
  354. private var previewContent: some View {
  355. VStack(alignment: .leading, spacing: 10) {
  356. Text(draft.title.isEmpty ? "Your post title will appear here" : draft.title)
  357. .font(.system(size: 14, weight: .semibold))
  358. .foregroundStyle(draft.title.isEmpty ? AppTheme.textTertiary : AppTheme.textPrimary)
  359. .fixedSize(horizontal: false, vertical: true)
  360. switch draft.postType {
  361. case .text:
  362. textPreview
  363. case .image:
  364. imagePreview
  365. case .link:
  366. linkPreview
  367. case .video:
  368. videoPreview
  369. case .poll:
  370. pollPreview
  371. }
  372. }
  373. .padding(.horizontal, 14)
  374. .padding(.bottom, 14)
  375. }
  376. @ViewBuilder
  377. private var textPreview: some View {
  378. if !draft.body.isEmpty {
  379. PostMarkdownText(text: draft.body)
  380. }
  381. }
  382. @ViewBuilder
  383. private var imagePreview: some View {
  384. if let url = draft.imageFileURL, let nsImage = NSImage(contentsOf: url) {
  385. Image(nsImage: nsImage)
  386. .resizable()
  387. .aspectRatio(contentMode: .fit)
  388. .frame(maxHeight: 200)
  389. .clipShape(RoundedRectangle(cornerRadius: 8))
  390. } else {
  391. imagePlaceholder(icon: "photo", label: "Image preview")
  392. }
  393. if !draft.body.isEmpty {
  394. PostMarkdownText(text: draft.body, fontSize: 11)
  395. }
  396. }
  397. @ViewBuilder
  398. private var linkPreview: some View {
  399. linkCard(
  400. domain: linkDomain,
  401. title: draft.linkURL.isEmpty ? "Link preview" : draft.title,
  402. url: draft.linkURL
  403. )
  404. if !draft.body.isEmpty {
  405. PostMarkdownText(text: draft.body, fontSize: 11)
  406. }
  407. }
  408. @ViewBuilder
  409. private var videoPreview: some View {
  410. if draft.videoURL.isEmpty {
  411. imagePlaceholder(icon: "play.rectangle", label: "Video preview")
  412. } else {
  413. linkCard(
  414. domain: videoDomain,
  415. title: draft.title.isEmpty ? "Video link" : draft.title,
  416. url: draft.videoURL
  417. )
  418. }
  419. if !draft.body.isEmpty {
  420. PostMarkdownText(text: draft.body, fontSize: 11)
  421. }
  422. }
  423. @ViewBuilder
  424. private var pollPreview: some View {
  425. if !draft.body.isEmpty {
  426. PostMarkdownText(text: draft.body, fontSize: 11)
  427. }
  428. VStack(spacing: 6) {
  429. ForEach(draft.pollOptions) { option in
  430. HStack {
  431. Text(option.text.isEmpty ? "Poll option" : option.text)
  432. .font(.system(size: 11))
  433. .foregroundStyle(option.text.isEmpty ? AppTheme.textTertiary : AppTheme.textPrimary)
  434. Spacer()
  435. Circle()
  436. .stroke(AppTheme.cardBorder, lineWidth: 1.5)
  437. .frame(width: 14, height: 14)
  438. }
  439. .padding(.horizontal, 10)
  440. .padding(.vertical, 8)
  441. .background(AppTheme.cardBackground)
  442. .clipShape(RoundedRectangle(cornerRadius: 6))
  443. }
  444. }
  445. Text("Poll ends in \(draft.pollDuration.label)")
  446. .font(.system(size: 9))
  447. .foregroundStyle(AppTheme.textTertiary)
  448. }
  449. private func imagePlaceholder(icon: String, label: String) -> some View {
  450. RoundedRectangle(cornerRadius: 8)
  451. .fill(AppTheme.cardBackground)
  452. .frame(height: 140)
  453. .overlay {
  454. VStack(spacing: 6) {
  455. Image(systemName: icon)
  456. .font(.system(size: 24))
  457. .foregroundStyle(AppTheme.textTertiary)
  458. Text(label)
  459. .font(.system(size: 10))
  460. .foregroundStyle(AppTheme.textTertiary)
  461. }
  462. }
  463. }
  464. private func linkCard(domain: String, title: String, url: String) -> some View {
  465. HStack(spacing: 10) {
  466. RoundedRectangle(cornerRadius: 6)
  467. .fill(AppTheme.cardBackground)
  468. .frame(width: 60, height: 60)
  469. .overlay {
  470. Image(systemName: "link")
  471. .font(.system(size: 18))
  472. .foregroundStyle(AppTheme.textTertiary)
  473. }
  474. VStack(alignment: .leading, spacing: 3) {
  475. Text(domain.isEmpty ? "example.com" : domain)
  476. .font(.system(size: 9))
  477. .foregroundStyle(AppTheme.textTertiary)
  478. Text(title)
  479. .font(.system(size: 11, weight: .medium))
  480. .foregroundStyle(AppTheme.textPrimary)
  481. .lineLimit(2)
  482. }
  483. Spacer(minLength: 0)
  484. }
  485. .padding(10)
  486. .background(AppTheme.cardBackground)
  487. .clipShape(RoundedRectangle(cornerRadius: 8))
  488. .overlay(
  489. RoundedRectangle(cornerRadius: 8)
  490. .stroke(AppTheme.cardBorder, lineWidth: 1)
  491. )
  492. }
  493. private var linkDomain: String {
  494. guard let url = URL(string: draft.linkURL), let host = url.host else { return "" }
  495. return host
  496. }
  497. private var videoDomain: String {
  498. guard let url = URL(string: draft.videoURL), let host = url.host else { return "" }
  499. return host
  500. }
  501. }