PhotosDesktopWidgetView.swift 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. import AppKit
  2. import SwiftUI
  3. import WebKit
  4. /// Google Photos: medium embedded recent gallery with Albums / Memories / Search shortcuts.
  5. struct PhotosDesktopWidgetView: View {
  6. let app: LauncherApp
  7. var isPreview: Bool = false
  8. private var baseURL: URL {
  9. app.webURL ?? URL(string: "https://photos.google.com/")!
  10. }
  11. /// Google Photos–style dark shell (deep blue-grey).
  12. private var shellGradient: LinearGradient {
  13. LinearGradient(
  14. colors: [
  15. Color(red: 0.07, green: 0.10, blue: 0.14),
  16. Color(red: 0.05, green: 0.07, blue: 0.11),
  17. ],
  18. startPoint: .topLeading,
  19. endPoint: .bottomTrailing
  20. )
  21. }
  22. var body: some View {
  23. Group {
  24. if isPreview {
  25. photosPreviewChrome
  26. } else {
  27. ZStack {
  28. RoundedRectangle(cornerRadius: 22, style: .continuous)
  29. .fill(shellGradient)
  30. VStack(spacing: 0) {
  31. galleryChromeHeader
  32. headerDivider
  33. GooglePhotosEmbeddedWebView(startURL: baseURL)
  34. .frame(maxWidth: .infinity, maxHeight: .infinity)
  35. bottomChromeBar
  36. }
  37. }
  38. }
  39. }
  40. .clipShape(RoundedRectangle(cornerRadius: 22, style: .continuous))
  41. .overlay(
  42. RoundedRectangle(cornerRadius: 22, style: .continuous)
  43. .strokeBorder(Color.white.opacity(0.10), lineWidth: 1)
  44. )
  45. }
  46. private var headerDivider: some View {
  47. Rectangle()
  48. .fill(
  49. LinearGradient(
  50. colors: [Color.white.opacity(0.14), Color.white.opacity(0.05)],
  51. startPoint: .leading,
  52. endPoint: .trailing
  53. )
  54. )
  55. .frame(height: 1)
  56. }
  57. private var galleryChromeHeader: some View {
  58. HStack(alignment: .center, spacing: 12) {
  59. ZStack {
  60. RoundedRectangle(cornerRadius: 10, style: .continuous)
  61. .fill(
  62. LinearGradient(
  63. colors: [Color.white.opacity(0.14), Color.white.opacity(0.06)],
  64. startPoint: .topLeading,
  65. endPoint: .bottomTrailing
  66. )
  67. )
  68. .frame(width: 40, height: 40)
  69. .overlay(
  70. RoundedRectangle(cornerRadius: 10, style: .continuous)
  71. .stroke(Color.white.opacity(0.12), lineWidth: 1)
  72. )
  73. AppIconView(app: app, size: 30, showAppBackground: false, iconPaddingFactor: 0.08)
  74. }
  75. VStack(alignment: .leading, spacing: 3) {
  76. Text(app.name)
  77. .font(.system(size: 15, weight: .bold, design: .rounded))
  78. .foregroundStyle(.white.opacity(0.96))
  79. HStack(spacing: 6) {
  80. Text("Recent")
  81. .font(.system(size: 11, weight: .semibold, design: .rounded))
  82. .foregroundStyle(Color(red: 0.55, green: 0.82, blue: 0.95).opacity(0.95))
  83. Text("·")
  84. .foregroundStyle(.white.opacity(0.35))
  85. Text("Library")
  86. .font(.system(size: 11, weight: .medium, design: .rounded))
  87. .foregroundStyle(.white.opacity(0.55))
  88. }
  89. }
  90. Spacer(minLength: 8)
  91. Button(action: openPhotosHome) {
  92. HStack(spacing: 5) {
  93. Text("Open")
  94. .font(.system(size: 12, weight: .bold, design: .rounded))
  95. Image(systemName: "arrow.up.right.circle.fill")
  96. .font(.system(size: 14, weight: .semibold))
  97. }
  98. .foregroundStyle(.white.opacity(0.95))
  99. .padding(.horizontal, 11)
  100. .padding(.vertical, 7)
  101. .background(
  102. Capsule(style: .continuous)
  103. .fill(
  104. LinearGradient(
  105. colors: [Color.white.opacity(0.22), Color.white.opacity(0.10)],
  106. startPoint: .top,
  107. endPoint: .bottom
  108. )
  109. )
  110. )
  111. .overlay(
  112. Capsule(style: .continuous)
  113. .stroke(Color.white.opacity(0.18), lineWidth: 1)
  114. )
  115. }
  116. .buttonStyle(.plain)
  117. }
  118. .padding(.horizontal, 14)
  119. .padding(.vertical, 12)
  120. .background(
  121. LinearGradient(
  122. colors: [Color.black.opacity(0.42), Color.black.opacity(0.22)],
  123. startPoint: .top,
  124. endPoint: .bottom
  125. )
  126. )
  127. }
  128. /// Subtle multi-hue strip echoing Google Photos branding.
  129. private var photosAccentStrip: some View {
  130. LinearGradient(
  131. colors: [
  132. Color(red: 0.26, green: 0.52, blue: 0.96),
  133. Color(red: 0.18, green: 0.72, blue: 0.45),
  134. Color(red: 0.98, green: 0.75, blue: 0.18),
  135. Color(red: 0.92, green: 0.35, blue: 0.25),
  136. ],
  137. startPoint: .leading,
  138. endPoint: .trailing
  139. )
  140. .frame(height: 2)
  141. .opacity(0.85)
  142. }
  143. private var bottomChromeBar: some View {
  144. VStack(spacing: 0) {
  145. photosAccentStrip
  146. HStack(spacing: 10) {
  147. PhotosShortcutChip(title: "Albums", systemImage: "rectangle.stack.fill") {
  148. openPhotosPath("/albums")
  149. }
  150. PhotosShortcutChip(title: "Memories", systemImage: "sparkles") {
  151. openPhotosPath("/memories")
  152. }
  153. PhotosShortcutChip(title: "Search", systemImage: "magnifyingglass") {
  154. openPhotosPath("/search")
  155. }
  156. }
  157. .padding(.horizontal, 12)
  158. .padding(.vertical, 12)
  159. .background(
  160. LinearGradient(
  161. colors: [Color.black.opacity(0.55), Color.black.opacity(0.38)],
  162. startPoint: .top,
  163. endPoint: .bottom
  164. )
  165. )
  166. }
  167. }
  168. private struct PhotosShortcutChip: View {
  169. let title: String
  170. let systemImage: String
  171. let action: () -> Void
  172. var body: some View {
  173. Button(action: action) {
  174. VStack(spacing: 6) {
  175. Image(systemName: systemImage)
  176. .font(.system(size: 15, weight: .semibold))
  177. .foregroundStyle(
  178. LinearGradient(
  179. colors: [
  180. Color.white.opacity(0.95),
  181. Color.white.opacity(0.72),
  182. ],
  183. startPoint: .top,
  184. endPoint: .bottom
  185. )
  186. )
  187. Text(title)
  188. .font(.system(size: 10, weight: .bold, design: .rounded))
  189. .foregroundStyle(.white.opacity(0.88))
  190. .lineLimit(1)
  191. .minimumScaleFactor(0.85)
  192. }
  193. .frame(maxWidth: .infinity)
  194. .padding(.vertical, 11)
  195. .padding(.horizontal, 6)
  196. .background(
  197. RoundedRectangle(cornerRadius: 14, style: .continuous)
  198. .fill(
  199. LinearGradient(
  200. colors: [Color.white.opacity(0.14), Color.white.opacity(0.05)],
  201. startPoint: .top,
  202. endPoint: .bottom
  203. )
  204. )
  205. )
  206. .overlay(
  207. RoundedRectangle(cornerRadius: 14, style: .continuous)
  208. .stroke(Color.white.opacity(0.14), lineWidth: 1)
  209. )
  210. }
  211. .buttonStyle(.plain)
  212. }
  213. }
  214. private var photosPreviewChrome: some View {
  215. ZStack {
  216. RoundedRectangle(cornerRadius: 22, style: .continuous)
  217. .fill(
  218. LinearGradient(
  219. colors: [
  220. Color(red: 0.10, green: 0.14, blue: 0.20),
  221. Color(red: 0.04, green: 0.06, blue: 0.10),
  222. ],
  223. startPoint: .topLeading,
  224. endPoint: .bottomTrailing
  225. )
  226. )
  227. VStack(spacing: 14) {
  228. ZStack {
  229. Circle()
  230. .fill(
  231. LinearGradient(
  232. colors: [Color.white.opacity(0.12), Color.white.opacity(0.04)],
  233. startPoint: .topLeading,
  234. endPoint: .bottomTrailing
  235. )
  236. )
  237. .frame(width: 72, height: 72)
  238. .overlay(Circle().stroke(Color.white.opacity(0.14), lineWidth: 1))
  239. AppIconView(app: app, size: 44, showAppBackground: false, iconPaddingFactor: 0.08)
  240. }
  241. Text("Recent gallery")
  242. .font(.system(size: 16, weight: .bold, design: .rounded))
  243. .foregroundStyle(.white.opacity(0.94))
  244. Text("Your library appears here after you sign in to Google Photos in the panel.")
  245. .font(.system(size: 11, weight: .medium, design: .rounded))
  246. .foregroundStyle(.white.opacity(0.62))
  247. .multilineTextAlignment(.center)
  248. .lineSpacing(2)
  249. .padding(.horizontal, 18)
  250. }
  251. .padding(20)
  252. }
  253. .overlay(
  254. RoundedRectangle(cornerRadius: 22, style: .continuous)
  255. .strokeBorder(Color.white.opacity(0.10), lineWidth: 1)
  256. )
  257. }
  258. private func openPhotosHome() {
  259. NSApp.activate(ignoringOtherApps: true)
  260. InAppBrowserWindowManager.shared.open(url: baseURL, title: app.name)
  261. }
  262. private func openPhotosPath(_ path: String) {
  263. let url = WidgetDeepLinkURL.resolved(base: baseURL, actionPath: path, accountSlot: 0)
  264. NSApp.activate(ignoringOtherApps: true)
  265. InAppBrowserWindowManager.shared.open(url: url, title: app.name)
  266. }
  267. }
  268. // MARK: - WKWebView
  269. private final class PhotosWebViewClippingContainer: NSView {
  270. override var isFlipped: Bool { true }
  271. }
  272. private struct GooglePhotosEmbeddedWebView: NSViewRepresentable {
  273. let startURL: URL
  274. func makeCoordinator() -> Coordinator {
  275. Coordinator()
  276. }
  277. func makeNSView(context: Context) -> NSView {
  278. let container = PhotosWebViewClippingContainer()
  279. container.wantsLayer = true
  280. container.layer?.masksToBounds = true
  281. let config = WKWebViewConfiguration()
  282. config.defaultWebpagePreferences.allowsContentJavaScript = true
  283. let embedded = WKWebView(frame: .zero, configuration: config)
  284. embedded.translatesAutoresizingMaskIntoConstraints = false
  285. embedded.focusRingType = .none
  286. embedded.navigationDelegate = context.coordinator
  287. context.coordinator.embeddedWebView = embedded
  288. context.coordinator.pageURL = startURL
  289. context.coordinator.reload()
  290. container.addSubview(embedded)
  291. NSLayoutConstraint.activate([
  292. embedded.leadingAnchor.constraint(equalTo: container.leadingAnchor),
  293. embedded.trailingAnchor.constraint(equalTo: container.trailingAnchor),
  294. embedded.topAnchor.constraint(equalTo: container.topAnchor),
  295. embedded.bottomAnchor.constraint(equalTo: container.bottomAnchor),
  296. ])
  297. DispatchQueue.main.async {
  298. Self.stripWebKitOuterChrome(embedded)
  299. }
  300. return container
  301. }
  302. func updateNSView(_ container: NSView, context: Context) {
  303. guard context.coordinator.pageURL != startURL else { return }
  304. context.coordinator.pageURL = startURL
  305. context.coordinator.reload()
  306. }
  307. private static func stripWebKitOuterChrome(_ root: WKWebView) {
  308. func walk(_ view: NSView) {
  309. view.focusRingType = .none
  310. view.layer?.borderWidth = 0
  311. view.layer?.borderColor = NSColor.clear.cgColor
  312. if let scroll = view as? NSScrollView {
  313. scroll.borderType = .noBorder
  314. scroll.drawsBackground = false
  315. scroll.scrollerStyle = .overlay
  316. }
  317. if let clip = view as? NSClipView {
  318. clip.drawsBackground = false
  319. }
  320. for sub in view.subviews {
  321. walk(sub)
  322. }
  323. }
  324. walk(root)
  325. }
  326. final class Coordinator: NSObject, WKNavigationDelegate {
  327. weak var embeddedWebView: WKWebView?
  328. var pageURL = URL(string: "https://photos.google.com/")!
  329. func reload() {
  330. guard let embeddedWebView else { return }
  331. embeddedWebView.load(URLRequest(url: pageURL))
  332. }
  333. func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
  334. DispatchQueue.main.async {
  335. GooglePhotosEmbeddedWebView.stripWebKitOuterChrome(webView)
  336. DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
  337. GooglePhotosEmbeddedWebView.stripWebKitOuterChrome(webView)
  338. }
  339. }
  340. }
  341. }
  342. }