From 81e31f6447d3f0085c984ef923b72a2a18988fdd Mon Sep 17 00:00:00 2001 From: arpandhakal Date: Tue, 17 Feb 2026 15:55:55 +0545 Subject: [PATCH 1/2] fix(OUT-3145): implemented banner component in editor --- next.config.ts | 10 +++++++++ src/features/banner/components/Banner.tsx | 22 +++++++++++++++++++ src/features/banner/index.ts | 1 + .../editor/components/EditorWrapper.tsx | 3 +++ .../settings/lib/settings-actions.dto.ts | 3 ++- src/features/settings/stores/settingsStore.ts | 6 +++++ 6 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 src/features/banner/components/Banner.tsx create mode 100644 src/features/banner/index.ts diff --git a/next.config.ts b/next.config.ts index 0ec9ee30..0bce2cc1 100644 --- a/next.config.ts +++ b/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': { diff --git a/src/features/banner/components/Banner.tsx b/src/features/banner/components/Banner.tsx new file mode 100644 index 00000000..337c8395 --- /dev/null +++ b/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 ( +
+ {alt} +
+ ) +} diff --git a/src/features/banner/index.ts b/src/features/banner/index.ts new file mode 100644 index 00000000..fe9c2071 --- /dev/null +++ b/src/features/banner/index.ts @@ -0,0 +1 @@ +export * from './components/Banner' diff --git a/src/features/editor/components/EditorWrapper.tsx b/src/features/editor/components/EditorWrapper.tsx index f98d7b44..d06bd595 100644 --- a/src/features/editor/components/EditorWrapper.tsx +++ b/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,6 +28,7 @@ export function EditorWrapper() {
+ {bannerUrl ? : null}
diff --git a/src/features/settings/lib/settings-actions.dto.ts b/src/features/settings/lib/settings-actions.dto.ts index 218a4d85..14093980 100644 --- a/src/features/settings/lib/settings-actions.dto.ts +++ b/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 diff --git a/src/features/settings/stores/settingsStore.ts b/src/features/settings/stores/settingsStore.ts index 42f8795c..47229c3b 100644 --- a/src/features/settings/stores/settingsStore.ts +++ b/src/features/settings/stores/settingsStore.ts @@ -11,6 +11,7 @@ interface SettingsAction { setActions: (actions: SettingsResponseDto['actions']) => void setSettings: (settings: Partial) => 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()((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) => set((s) => ({ ...s, ...newSettings })), setInitialSettings: (newSettings: Partial) => set((s) => ({ ...s, initialSettings: { ...s.initialSettings, ...newSettings } })), + setBannerUrl: (url: string | null) => set((s) => ({ ...s, bannerUrl: url })), })) export type SettingsStoreApi = StoreApi From f14e24958f53a7972ed1e447bca8b7bf6f4b98df Mon Sep 17 00:00:00 2001 From: arpandhakal Date: Wed, 18 Feb 2026 16:00:28 +0545 Subject: [PATCH 2/2] feat(OUT-3145): added banner in Preview mode too --- src/features/editor/components/EditorWrapper.tsx | 2 +- src/features/editor/components/Preview/Preview.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/features/editor/components/EditorWrapper.tsx b/src/features/editor/components/EditorWrapper.tsx index d06bd595..933f852f 100644 --- a/src/features/editor/components/EditorWrapper.tsx +++ b/src/features/editor/components/EditorWrapper.tsx @@ -35,7 +35,7 @@ export function EditorWrapper() { - + ) diff --git a/src/features/editor/components/Preview/Preview.tsx b/src/features/editor/components/Preview/Preview.tsx index 6216a830..39096854 100644 --- a/src/features/editor/components/Preview/Preview.tsx +++ b/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) {
+ {bannerUrl ? : null} +