refactor: move static options out of config (for appearance)

Author: sidvishnoi

frontend/app/components/redesign/components/AppearanceBuilder.tsx

@@ -30,8 +30,12 @@ import {
   SLIDE_ANIMATION
 } from '@shared/types'
 
+export interface AppearanceOptions {
+  showThumbnail: boolean
+  fontSizeRange: { min: number; max: number; default: number }
+}
+
 interface BaseToolAppearance {
-  fontSizeRange: { min: number; max: number }
   fontName?: FontFamilyKey
   fontSize?: number
   backgroundColor?: string
@@ -66,8 +70,8 @@ export interface WidgetToolAppearance extends BaseToolAppearance {
 export type ToolAppearance = BannerToolAppearance | WidgetToolAppearance
 
 interface AppearanceBuilderProps {
-  toolName: 'widget' | 'banner'
   config: ToolAppearance
+  options: AppearanceOptions
   onRefresh: () => void
   positionSelector?: React.ReactNode
   colorsSelector?: React.ReactNode
@@ -80,13 +84,13 @@ function getValidSlideAnimation(value: unknown): SlideAnimationType {
 }
 
 export const AppearanceBuilder: React.FC<AppearanceBuilderProps> = ({
-  toolName,
   config,
+  options,
   onRefresh,
   positionSelector,
   colorsSelector
 }) => {
-  const { min: minFontSize, max: maxFontSize } = config.fontSizeRange
+  const { min: minFontSize, max: maxFontSize } = options.fontSizeRange
 
   const [selectedThumbnail, setSelectedThumbnail] = useState(0)
   const { actions: uiActions, state: uiState } = useUI()
@@ -258,7 +262,7 @@ export const AppearanceBuilder: React.FC<AppearanceBuilderProps> = ({
 
       <div
         className={cx(
-          toolName === 'widget' ? 'hidden' : 'flex flex-col gap-xs'
+          options.showThumbnail ? 'flex flex-col gap-xs' : 'hidden'
         )}
       >
         <Divider />

frontend/app/components/redesign/components/BuilderForm.tsx

@@ -8,12 +8,11 @@ import { toolState, toolActions, type StableKey } from '~/stores/toolStore'
 import { useUI } from '~/stores/uiStore'
 import { useSnapshot } from 'valtio'
 import type { ContentOptions, ToolContent } from './ContentBuilder'
-import type { ToolAppearance } from './AppearanceBuilder'
+import type { AppearanceOptions, ToolAppearance } from './AppearanceBuilder'
 
 interface BuilderFormProps {
   config: ToolContent | ToolAppearance
-  options: ContentOptions
-  toolName: 'widget' | 'banner'
+  options: ContentOptions | AppearanceOptions
   onRefresh: (section: 'appearance' | 'content') => void
   onBuildStepComplete?: (isComplete: boolean) => void
   positionSelector?: React.ReactNode
@@ -25,7 +24,6 @@ export const BuilderForm: React.FC<BuilderFormProps> = ({
   onRefresh,
   config,
   options,
-  toolName,
   positionSelector,
   colorsSelector
 }) => {
@@ -76,14 +74,14 @@ export const BuilderForm: React.FC<BuilderFormProps> = ({
         <ContentBuilder
           onRefresh={() => onRefresh('content')}
           config={config as ToolContent}
-          options={options}
+          options={options as ContentOptions}
         />
         <AppearanceBuilder
           onRefresh={() => onRefresh('appearance')}
           config={config as ToolAppearance}
+          options={options as AppearanceOptions}
           positionSelector={positionSelector}
           colorsSelector={colorsSelector}
-          toolName={toolName}
         />
       </BuilderPresetTabs>
     </div>

frontend/app/routes/banner.tsx

@@ -46,7 +46,10 @@ import type {
   ContentOptions,
   ToolContent
 } from '~/components/redesign/components/ContentBuilder'
-import type { BannerToolAppearance } from '~/components/redesign/components/AppearanceBuilder'
+import type {
+  AppearanceOptions,
+  BannerToolAppearance
+} from '~/components/redesign/components/AppearanceBuilder'
 import { BANNER_FONT_SIZES } from '@shared/types'
 import type {
   BannerPositionKey,
@@ -180,7 +183,7 @@ const BannerPreview = React.forwardRef<BannerHandle>((props, ref) => {
 
 BannerPreview.displayName = 'BannerPreview'
 
-const contentOptions: ContentOptions = {
+const options: ContentOptions | AppearanceOptions = {
   suggestedTitles: [
     'How to support?',
     'Fund me',
@@ -193,7 +196,10 @@ const contentOptions: ContentOptions = {
   messageLabel: 'Banner message',
   messagePlaceholder: 'Enter your banner message...',
   messageHelpText: 'Strong message to help people engage with Web Monetization',
-  messageMaxLength: 300
+  messageMaxLength: 300,
+
+  showThumbnail: true,
+  fontSizeRange: BANNER_FONT_SIZES
 }
 
 export default function Banner() {
@@ -225,7 +231,6 @@ export default function Banner() {
 
     fontName: snap.currentConfig?.bannerFontName,
     fontSize: snap.currentConfig?.bannerFontSize ?? BANNER_FONT_SIZES.default,
-    fontSizeRange: BANNER_FONT_SIZES,
     backgroundColor: snap.currentConfig?.bannerBackgroundColor,
     textColor: snap.currentConfig?.bannerTextColor,
     borderRadius: snap.currentConfig?.bannerBorder,
@@ -392,9 +397,8 @@ export default function Banner() {
                     />
 
                     <BuilderForm
-                      toolName="banner"
                       config={config}
-                      options={contentOptions}
+                      options={options}
                       onBuildStepComplete={(isComplete) =>
                         toolActions.setBuildCompleteStep(
                           isComplete ? 'filled' : 'unfilled'

frontend/app/routes/widget.tsx

@@ -43,7 +43,10 @@ import type {
   ContentOptions,
   ToolContent
 } from '~/components/redesign/components/ContentBuilder'
-import type { WidgetToolAppearance } from '~/components/redesign/components/AppearanceBuilder'
+import type {
+  AppearanceOptions,
+  WidgetToolAppearance
+} from '~/components/redesign/components/AppearanceBuilder'
 import { WIDGET_FONT_SIZES } from '@shared/types'
 import type {
   CornerType,
@@ -168,7 +171,7 @@ const WidgetPreview: React.FC = () => {
   )
 }
 
-const options: ContentOptions = {
+const options: ContentOptions | AppearanceOptions = {
   suggestedTitles: [
     'Support this content',
     'Make a payment',
@@ -181,7 +184,10 @@ const options: ContentOptions = {
   messageLabel: 'Widget message',
   messagePlaceholder: 'Enter your widget message...',
   messageHelpText: 'Describe how payments support your work',
-  messageMaxLength: 300
+  messageMaxLength: 300,
+
+  showThumbnail: false,
+  fontSizeRange: WIDGET_FONT_SIZES
 }
 
 export default function Widget() {
@@ -212,7 +218,6 @@ export default function Widget() {
 
     fontName: snap.currentConfig?.widgetFontName,
     fontSize: snap.currentConfig?.widgetFontSize ?? WIDGET_FONT_SIZES.default,
-    fontSizeRange: WIDGET_FONT_SIZES,
     backgroundColor: snap.currentConfig?.widgetBackgroundColor,
     textColor: snap.currentConfig?.widgetTextColor,
     buttonColor: snap.currentConfig?.widgetButtonBackgroundColor,
@@ -376,7 +381,6 @@ export default function Widget() {
                     />
 
                     <BuilderForm
-                      toolName="widget"
                       config={config}
                       options={options}
                       onBuildStepComplete={(isComplete) =>