OUT-3145 | Implement banner image section in editor

next.config.ts

@@ -1,8 +1,18 @@
 import { withSentryConfig } from '@sentry/nextjs'
 import type { NextConfig } from 'next'
 
+const supabaseUrl = new URL(process.env.SUPABASE_URL || '')
+
 const nextConfig: NextConfig = {
   allowedDevOrigins: [process.env.NGROK_URL || ''],
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: supabaseUrl.hostname,
+      },
+    ],
+  },
   turbopack: {
     rules: {
       '*.svg': {

src/features/banner/components/Banner.tsx

@@ -0,0 +1,22 @@
+import Image from 'next/image'
+import { cn } from '@/utils/tailwind'
+
+interface BannerProps {
+  src: string
+  alt: string
+}
+
+export const Banner = ({ src, alt }: BannerProps) => {
+  return (
+    <div className={cn('relative my-6 aspect-[5/1] w-full overflow-hidden rounded-lg')}>
+      <Image
+        src={src}
+        alt={alt}
+        fill
+        className="object-cover"
+        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 100vw"
+        priority
+      />
+    </div>
+  )
+}

src/features/banner/index.ts

@@ -0,0 +1 @@
+export * from './components/Banner'

src/features/editor/components/EditorWrapper.tsx

@@ -9,6 +9,7 @@ import { useAppControls } from '@editor/hooks/useAppControls'
 import { useSettingsStore } from '@settings/providers/settings.provider'
 import { Activity } from 'react'
 import { ActionsCard } from '@/features/action-items/components/actions-card'
+import { Banner } from '@/features/banner'
 import { useViewStore, ViewMode } from '@/features/editor/stores/viewStore'
 import { getActivityMode } from '@/utils/activity'
 
@@ -17,6 +18,7 @@ export function EditorWrapper() {
   const token = useAuthStore((store) => store.token)
   const content = useSettingsStore((store) => store.content)
   const backgroundColor = useSettingsStore((store) => store.backgroundColor)
+  const bannerUrl = useSettingsStore((store) => store.bannerUrl)
 
   useAppControls()
 
@@ -26,13 +28,14 @@ export function EditorWrapper() {
         <div className="tiptap-wrapper @container max-w-full @max-md:rounded-t-none" style={{ backgroundColor }}>
           <Heading />
           <Subheading />
+          {bannerUrl ? <Banner src={bannerUrl} alt="Workspace Banner" /> : null}
           <ActionsCard />
           <Editor token={token} content={content} backgroundColor={backgroundColor} />
         </div>
       </Activity>
 
       <Activity mode={getActivityMode(viewMode === ViewMode.PREVIEW)}>
-        <Preview content={content} token={token} backgroundColor={backgroundColor} />
+        <Preview content={content} token={token} backgroundColor={backgroundColor} bannerUrl={bannerUrl} />
       </Activity>
     </div>
   )

src/features/editor/components/Preview/Preview.tsx

@@ -3,6 +3,7 @@ import { ReadonlyEditor } from '@editor/components/Editor/ReadonlyEditor'
 import { PreviewTopBar } from '@editor/components/Preview/PreviewTopBar'
 import { DisplayMode, useViewStore } from '@editor/stores/viewStore'
 import { ActionsCard } from '@/features/action-items/components/actions-card'
+import { Banner } from '@/features/banner'
 import { cn } from '@/utils/tailwind'
 import { Heading } from '../Heading'
 import { Subheading } from '../Subheading'
@@ -11,9 +12,10 @@ interface PreviewProps {
   token: string
   content: string
   backgroundColor: string
+  bannerUrl?: string | null
 }
 
-export function Preview({ token, content, backgroundColor }: PreviewProps) {
+export function Preview({ token, content, backgroundColor, bannerUrl }: PreviewProps) {
   const displayMode = useViewStore((store) => store.displayMode)
   const workspace = useViewStore((store) => store.workspace)
 
@@ -35,6 +37,8 @@ export function Preview({ token, content, backgroundColor }: PreviewProps) {
           <div className="tiptap-wrapper @container w-full overflow-auto" style={{ backgroundColor }}>
             <Heading />
             <Subheading readonly />
+            {bannerUrl ? <Banner src={bannerUrl} alt="Workspace Banner" /> : null}
+
             <ActionsCard />
 
             <ReadonlyEditor content={content} token={token} />

src/features/settings/lib/settings-actions.dto.ts

@@ -1,9 +1,10 @@
 import { ActionsCreateSchema, ActionsUpdateSchema } from '@settings/lib/actions/types'
 import { SettingsSchema, SettingsUpdateSchema } from '@settings/lib/types'
-import type z from 'zod'
+import z from 'zod'
 
 export const SettingsResponseDtoSchema = SettingsSchema.extend({
   actions: ActionsCreateSchema.omit({ settingsId: true }),
+  bannerUrl: z.string().nullable().optional(),
 })
 
 export type SettingsResponseDto = z.infer<typeof SettingsResponseDtoSchema>

src/features/settings/stores/settingsStore.ts

@@ -11,6 +11,7 @@ interface SettingsAction {
   setActions: (actions: SettingsResponseDto['actions']) => void
   setSettings: (settings: Partial<SettingsResponseDto>) => void
   setInitialSettings: (settings: SettingsResponseDto) => void
+  setBannerUrl: (url: string | null) => void
 }
 
 export type SettingsStore = SettingsState & SettingsAction
@@ -19,6 +20,10 @@ export const createSettingsStore = (settings: SettingsResponseDto) =>
   createStore<SettingsStore>()((set) => ({
     ...settings,
     initialSettings: settings,
+    //hardcoded the url for now.
+    bannerUrl:
+      settings.bannerUrl ??
+      'https://sakzqessgcaxgporuunf.supabase.co/storage/v1/object/sign/media/common/Container.jpg?token=eyJraWQiOiJzdG9yYWdlLXVybC1zaWduaW5nLWtleV9hNGIwOGZlMi1jYmQyLTQyZTYtYjliZC0zNjljYmQ4ZDEyNDgiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJtZWRpYS9jb21tb24vQ29udGFpbmVyLmpwZyIsImlhdCI6MTc3MTMxOTAyOCwiZXhwIjoxODAyODU1MDI4fQ.hkz8z2g44IDklP_pHFDjoWrMf6UUQtQBU9m66uTGZhM',
 
     setContent: (content: string) => set((s) => ({ ...s, content })),
     setSubheading: (subheading: string) => set((s) => ({ ...s, subheading })),
@@ -27,6 +32,7 @@ export const createSettingsStore = (settings: SettingsResponseDto) =>
     setSettings: (newSettings: Partial<SettingsResponseDto>) => set((s) => ({ ...s, ...newSettings })),
     setInitialSettings: (newSettings: Partial<SettingsResponseDto>) =>
       set((s) => ({ ...s, initialSettings: { ...s.initialSettings, ...newSettings } })),
+    setBannerUrl: (url: string | null) => set((s) => ({ ...s, bannerUrl: url })),
   }))
 
 export type SettingsStoreApi = StoreApi<SettingsStore>