From 1b03ee7a905b7e317dd47ad0ebef9137033fe268 Mon Sep 17 00:00:00 2001
From: Chris Griffing <cmgriffing@gmail.com>
Date: Sun, 3 Nov 2024 14:20:34 -0800
Subject: [PATCH] fix: use a store instead of individual signals

---
 playgrounds/app/src/components/Editor.tsx     | 298 +++++++++---------
 playgrounds/app/src/routes/index.tsx          | 124 ++------
 .../app/src/routes/snippets/[snippetId].tsx   |  59 +---
 playgrounds/app/src/types.ts                  |  15 +-
 4 files changed, 207 insertions(+), 289 deletions(-)

diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx
index 5cb3d80..3ca89b5 100644
--- a/playgrounds/app/src/components/Editor.tsx
+++ b/playgrounds/app/src/components/Editor.tsx
@@ -40,10 +40,18 @@ import {
   DialogHeader,
   DialogTitle,
 } from '~/components/ui/dialog'
-import { createMemo, createResource, createSignal, onCleanup, Setter, Show } from 'solid-js'
+import {
+  createEffect,
+  createMemo,
+  createResource,
+  createSignal,
+  onCleanup,
+  Setter,
+  Show,
+} from 'solid-js'
 import { createHighlighter, bundledThemes, bundledLanguages } from 'shiki'
 import { ShikiMagicMove } from 'shiki-magic-move/solid'
-import { AnimationFrameConfig } from '~/types'
+import { AnimationFrameConfig, SnippetSettings } from '~/types'
 import { authFetch } from '~/lib/utils'
 import { useNavigate } from '@solidjs/router'
 import { authToken } from '~/lib/store'
@@ -51,6 +59,7 @@ import { toast } from 'solid-sonner'
 import { Separator } from './ui/separator'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion'
+import { SetStoreFunction } from 'solid-js/store'
 
 const animationSeconds = 1
 const animationFPS = 10
@@ -78,46 +87,8 @@ const bgTypeOptions: SelectOption[] = [
 
 interface EditorProps {
   snippetId?: string
-  startCode: string
-  setStartCode: Setter<string>
-  endCode: string
-  setEndCode: Setter<string>
-  snippetWidth: number
-  setSnippetWidth: Setter<number>
-  yPadding: number
-  setYPadding: Setter<number>
-  xPadding: number
-  setXPadding: Setter<number>
-  shadowEnabled: boolean
-  setShadowEnabled: Setter<boolean>
-  shadowOffsetY: number
-  setShadowOffsetY: Setter<number>
-  shadowBlur: number
-  setShadowBlur: Setter<number>
-  shadowColor: string
-  setShadowColor: Setter<string>
-  shadowOpacity: number
-  setShadowOpacity: Setter<number>
-  bgType: 'solid' | 'linearGradient'
-  setBgType: Setter<'solid' | 'linearGradient'>
-  bgColor: string
-  setBgColor: Setter<string>
-  bgGradientColorStart: string
-  setBgGradientColorStart: Setter<string>
-  bgGradientColorEnd: string
-  setBgGradientColorEnd: Setter<string>
-  bgGradientDirection: number
-  setBgGradientDirection: Setter<number>
-  fontSize: number
-  setFontSize: Setter<number>
-  fontFamily: string
-  setFontFamily: Setter<string>
-  language: string
-  setLanguage: Setter<string>
-  theme: string
-  setTheme: Setter<string>
-  // TODO: If the app grows, this logic should be surfaced to the top level route
-  title?: string
+  snippetSettings: SnippetSettings
+  setSnippetSettings: SetStoreFunction<SnippetSettings>
 }
 
 export default function Editor(props: EditorProps) {
@@ -130,14 +101,14 @@ export default function Editor(props: EditorProps) {
     width: number
     height: number
   }>()
-  const [code, setCode] = createSignal(props.startCode)
-  const [hiddenCode, setHiddenCode] = createSignal(props.startCode)
+  const [code, setCode] = createSignal(props.snippetSettings.codeLeft)
+  const [hiddenCode, setHiddenCode] = createSignal(props.snippetSettings.codeLeft)
   const [isResizing, setIsResizing] = createSignal(false)
   const [isLooping, setIsLooping] = createSignal(true)
   const [isGenerating, setIsGenerating] = createSignal(false)
   const [gifDataUrl, setGifDataUrl] = createSignal('')
   const [isShowingGifDialog, setIsShowingGifDialog] = createSignal(false)
-  const [title, setTitle] = createSignal(props.title)
+  const [title, setTitle] = createSignal(props.snippetSettings.title)
   const [isSaving, setIsSaving] = createSignal(false)
 
   const [highlighter] = createResource(async () => {
@@ -149,18 +120,23 @@ export default function Editor(props: EditorProps) {
     return newHighlighter
   })
 
+  createEffect(() => {
+    setCode(props.snippetSettings.codeLeft)
+    setHiddenCode(props.snippetSettings.codeLeft)
+  })
+
   const intervalId = setInterval(() => {
     if (
       selectedTab() === 'output' &&
-      props.startCode !== '' &&
-      props.endCode !== '' &&
+      props.snippetSettings.codeLeft !== '' &&
+      props.snippetSettings.codeRight !== '' &&
       !isResizing() &&
       isLooping()
     ) {
       if (toggled()) {
-        setCode(props.startCode)
+        setCode(props.snippetSettings.codeLeft)
       } else {
-        setCode(props.endCode)
+        setCode(props.snippetSettings.codeRight)
       }
       setToggled(!toggled())
     }
@@ -173,7 +149,7 @@ export default function Editor(props: EditorProps) {
   document.body.addEventListener('mousemove', e => {
     if (isResizing()) {
       const deltaX = e.movementX
-      props.setSnippetWidth(props.snippetWidth + deltaX)
+      props.setSnippetSettings('snippetWidth', props.snippetSettings.snippetWidth + deltaX)
     }
   })
 
@@ -229,25 +205,25 @@ export default function Editor(props: EditorProps) {
           maxContainerDimensions()?.height || 100,
           {
             layout: {
-              yPadding: props.yPadding,
-              xPadding: props.xPadding,
+              yPadding: props.snippetSettings.yPadding,
+              xPadding: props.snippetSettings.xPadding,
             },
             shadow: {
-              shadowEnabled: props.shadowEnabled,
-              shadowOffsetY: props.shadowOffsetY,
-              shadowBlur: props.shadowBlur,
-              shadowColor: props.shadowColor,
-              shadowOpacity: props.shadowOpacity,
+              shadowEnabled: props.snippetSettings.shadowEnabled,
+              shadowOffsetY: props.snippetSettings.shadowOffsetY,
+              shadowBlur: props.snippetSettings.shadowBlur,
+              shadowColor: props.snippetSettings.shadowColor,
+              shadowOpacity: props.snippetSettings.shadowOpacity,
             },
             styling: {
               fontSize,
               fontFamily,
               snippetBackgroundColor: backgroundColor,
-              backgroundColor: props.bgColor,
-              backgroundType: props.bgType,
-              backgroundGradientColorStart: props.bgGradientColorStart,
-              backgroundGradientColorEnd: props.bgGradientColorEnd,
-              backgroundGradientDirection: props.bgGradientDirection,
+              backgroundColor: props.snippetSettings.bgColor,
+              backgroundType: props.snippetSettings.bgType,
+              backgroundGradientColorStart: props.snippetSettings.bgGradientColorStart,
+              backgroundGradientColorEnd: props.snippetSettings.bgGradientColorEnd,
+              backgroundGradientDirection: props.snippetSettings.bgGradientDirection,
             },
           },
         )
@@ -277,9 +253,9 @@ export default function Editor(props: EditorProps) {
             <Label for="theme-selector">Theme</Label>
             <Combobox
               id="theme-selector"
-              value={props.theme}
+              value={props.snippetSettings.theme}
               options={Object.keys(bundledThemes)}
-              onChange={props.setTheme}
+              onChange={newTheme => props.setSnippetSettings('theme', newTheme || '')}
               placeholder="Search a theme..."
               itemComponent={props => (
                 <ComboboxItem item={props.item}>
@@ -300,9 +276,9 @@ export default function Editor(props: EditorProps) {
             <Label for="language-selector">Language</Label>
             <Combobox
               id="language-selector"
-              value={props.language}
+              value={props.snippetSettings.language}
               options={Object.keys(bundledLanguages)}
-              onChange={props.setLanguage}
+              onChange={newLanguage => props.setSnippetSettings('language', newLanguage || '')}
               placeholder="Search a Language..."
               itemComponent={props => (
                 <ComboboxItem item={props.item}>
@@ -337,18 +313,28 @@ export default function Editor(props: EditorProps) {
 
                     <Select<SelectOption>
                       id="bg-type"
-                      value={bgTypeOptions.find(option => option.value === props.bgType)}
+                      value={bgTypeOptions.find(
+                        option => option.value === props.snippetSettings.bgType,
+                      )}
                       optionValue="value"
                       optionTextValue="label"
                       onChange={newType =>
-                        newType && props.setBgType(newType.value as 'solid' | 'linearGradient')
+                        newType &&
+                        props.setSnippetSettings(
+                          'bgType',
+                          newType.value as 'solid' | 'linearGradient',
+                        )
                       }
                       options={bgTypeOptions}
                       itemComponent={props => (
                         <SelectItem item={props.item}>{props.item.rawValue.label}</SelectItem>
                       )}
                     >
-                      <SelectTrigger aria-label="BG Type" class="w-full" value={props.bgType}>
+                      <SelectTrigger
+                        aria-label="BG Type"
+                        class="w-full"
+                        value={props.snippetSettings.bgType}
+                      >
                         <SelectValue<{ label: string; value: string }>>
                           {state => state.selectedOption()?.label}
                         </SelectValue>
@@ -357,7 +343,7 @@ export default function Editor(props: EditorProps) {
                     </Select>
                   </div>
 
-                  {props.bgType === 'linearGradient' && (
+                  {props.snippetSettings.bgType === 'linearGradient' && (
                     <>
                       <div class="flex flex-row items-center justify-between">
                         <Label for="bg-color-input-grad-start" class="font-normal">
@@ -367,9 +353,9 @@ export default function Editor(props: EditorProps) {
                           id="bg-color-input-grad-start"
                           class="h-6 w-6 rounded"
                           type="color"
-                          value={props.bgGradientColorStart}
+                          value={props.snippetSettings.bgGradientColorStart}
                           onInput={e => {
-                            props.setBgGradientColorStart(e.target.value)
+                            props.setSnippetSettings('bgGradientColorStart', e.target.value)
                           }}
                         />
                       </div>
@@ -381,18 +367,18 @@ export default function Editor(props: EditorProps) {
                           id="bg-color-input-grad-end"
                           class="h-6 w-6 rounded"
                           type="color"
-                          value={props.bgGradientColorEnd}
+                          value={props.snippetSettings.bgGradientColorEnd}
                           onInput={e => {
-                            props.setBgGradientColorEnd(e.target.value)
+                            props.setSnippetSettings('bgGradientColorEnd', e.target.value)
                           }}
                         />
                       </div>
                       <Slider
-                        value={[props.bgGradientDirection]}
+                        value={[props.snippetSettings.bgGradientDirection]}
                         minValue={0}
                         maxValue={359}
                         onChange={e => {
-                          props.setBgGradientDirection(e[0])
+                          props.setSnippetSettings('bgGradientDirection', e[0])
                         }}
                       >
                         <div class="flex justify-between items-center w-full">
@@ -410,7 +396,7 @@ export default function Editor(props: EditorProps) {
                       </Slider>
                     </>
                   )}
-                  {props.bgType === 'solid' && (
+                  {props.snippetSettings.bgType === 'solid' && (
                     <div class="flex flex-row items-center justify-between">
                       <Label for="bg-color-input" class="font-normal">
                         Background Color
@@ -419,9 +405,9 @@ export default function Editor(props: EditorProps) {
                         id="bg-color-input"
                         class="h-6 w-6 rounded"
                         type="color"
-                        value={props.bgColor}
+                        value={props.snippetSettings.bgColor}
                         onInput={e => {
-                          props.setBgColor(e.target.value)
+                          props.setSnippetSettings('bgColor', e.target.value)
                         }}
                       />
                     </div>
@@ -435,11 +421,11 @@ export default function Editor(props: EditorProps) {
               <AccordionContent>
                 <div class="flex flex-col gap-4">
                   <Slider
-                    value={[props.snippetWidth]}
+                    value={[props.snippetSettings.snippetWidth]}
                     minValue={0}
                     maxValue={1500}
                     onChange={e => {
-                      props.setSnippetWidth(e[0])
+                      props.setSnippetSettings('snippetWidth', e[0])
                     }}
                   >
                     <div class="flex w-full justify-between mb-2">
@@ -456,11 +442,11 @@ export default function Editor(props: EditorProps) {
                   </Slider>
 
                   <Slider
-                    value={[props.yPadding]}
+                    value={[props.snippetSettings.yPadding]}
                     minValue={0}
                     maxValue={200}
                     onChange={e => {
-                      props.setYPadding(e[0])
+                      props.setSnippetSettings('yPadding', e[0])
                     }}
                   >
                     <div class="flex w-full justify-between mb-2">
@@ -477,11 +463,11 @@ export default function Editor(props: EditorProps) {
                   </Slider>
 
                   <Slider
-                    value={[props.xPadding]}
+                    value={[props.snippetSettings.xPadding]}
                     minValue={0}
                     maxValue={200}
                     onChange={e => {
-                      props.setXPadding(e[0])
+                      props.setSnippetSettings('xPadding', e[0])
                     }}
                   >
                     <div class="flex w-full justify-between mb-2">
@@ -507,15 +493,23 @@ export default function Editor(props: EditorProps) {
                   <div class="flex flex-row items-center justify-between">
                     <Label
                       for="shadow-checkbox"
-                      onClick={() => props.setShadowEnabled(!props.shadowEnabled)}
+                      onClick={() =>
+                        props.setSnippetSettings(
+                          'shadowEnabled',
+                          !props.snippetSettings.shadowEnabled,
+                        )
+                      }
                     >
                       Show Shadow
                     </Label>
                     <Checkbox
                       id="shadow-checkbox"
-                      checked={props.shadowEnabled}
+                      checked={props.snippetSettings.shadowEnabled}
                       onChange={() => {
-                        props.setShadowEnabled(!props.shadowEnabled)
+                        props.setSnippetSettings(
+                          'shadowEnabled',
+                          !props.snippetSettings.shadowEnabled,
+                        )
                       }}
                     />
                   </div>
@@ -529,18 +523,18 @@ export default function Editor(props: EditorProps) {
                       id="shadow-color-input"
                       class="h-6 w-6 rounded"
                       type="color"
-                      value={props.shadowColor}
-                      onInput={e => props.setShadowColor(e.target.value)}
+                      value={props.snippetSettings.shadowColor}
+                      onInput={e => props.setSnippetSettings('shadowColor', e.target.value)}
                     />
                   </div>
                   <div class="flex flex-row items-center justify-between">
                     <Slider
-                      value={[props.shadowOpacity]}
+                      value={[props.snippetSettings.shadowOpacity]}
                       step={0.01}
                       minValue={0}
                       maxValue={1}
                       onChange={e => {
-                        props.setShadowOpacity(e[0])
+                        props.setSnippetSettings('shadowOpacity', e[0])
                       }}
                     >
                       <div class="flex w-full justify-between mb-2">
@@ -555,11 +549,11 @@ export default function Editor(props: EditorProps) {
                   </div>
                   <div>
                     <Slider
-                      value={[props.shadowOffsetY]}
+                      value={[props.snippetSettings.shadowOffsetY]}
                       minValue={0}
-                      maxValue={props.yPadding}
+                      maxValue={props.snippetSettings.yPadding}
                       onChange={e => {
-                        props.setShadowOffsetY(e[0])
+                        props.setSnippetSettings('shadowOffsetY', e[0])
                       }}
                     >
                       <div class="flex w-full justify-between mb-2">
@@ -577,11 +571,11 @@ export default function Editor(props: EditorProps) {
                   </div>
                   <div>
                     <Slider
-                      value={[props.shadowBlur]}
+                      value={[props.snippetSettings.shadowBlur]}
                       minValue={0}
                       maxValue={200}
                       onChange={e => {
-                        props.setShadowBlur(e[0])
+                        props.setSnippetSettings('shadowBlur', e[0])
                       }}
                     >
                       <div class="flex w-full justify-between mb-2">
@@ -610,10 +604,14 @@ export default function Editor(props: EditorProps) {
 
                     <Select<{ name: string }>
                       id="font-family"
-                      value={supportedFontFamilies.find(option => option.name === props.fontFamily)}
+                      value={supportedFontFamilies.find(
+                        option => option.name === props.snippetSettings.fontFamily,
+                      )}
                       optionValue="name"
                       optionTextValue="name"
-                      onChange={newFamily => newFamily && props.setFontFamily(newFamily.name)}
+                      onChange={newFamily =>
+                        newFamily && props.setSnippetSettings('fontFamily', newFamily.name)
+                      }
                       options={supportedFontFamilies}
                       itemComponent={props => (
                         <SelectItem item={props.item}>{props.item.rawValue.name}</SelectItem>
@@ -622,7 +620,7 @@ export default function Editor(props: EditorProps) {
                       <SelectTrigger
                         aria-label="Font Family"
                         class="w-full"
-                        value={props.fontFamily}
+                        value={props.snippetSettings.fontFamily}
                       >
                         <SelectValue<{ name: string }>>
                           {state => state.selectedOption()?.name}
@@ -633,11 +631,11 @@ export default function Editor(props: EditorProps) {
                   </div>
 
                   <Slider
-                    value={[props.fontSize]}
+                    value={[props.snippetSettings.fontSize]}
                     minValue={1}
                     maxValue={64}
                     onChange={e => {
-                      props.setFontSize(e[0])
+                      props.setSnippetSettings('fontSize', e[0])
                     }}
                   >
                     <div class="flex w-full justify-between mb-2">
@@ -678,7 +676,10 @@ export default function Editor(props: EditorProps) {
                     onClick={() => {
                       setSelectedTab('output')
                     }}
-                    disabled={props.startCode === '' || props.endCode === ''}
+                    disabled={
+                      props.snippetSettings.codeLeft === '' ||
+                      props.snippetSettings.codeRight === ''
+                    }
                   >
                     Next
                   </Button>
@@ -688,8 +689,8 @@ export default function Editor(props: EditorProps) {
               <div class="dark:bg-[#27272a] bg-gray-100 p-2 rounded-b flex flex-row flex-wrap md:flex-nowrap gap-2">
                 <TextField
                   class="w-full md:w-1/2"
-                  value={props.startCode}
-                  onChange={props.setStartCode}
+                  value={props.snippetSettings.codeLeft}
+                  onChange={newCodeLeft => props.setSnippetSettings('codeLeft', newCodeLeft)}
                 >
                   <TextFieldLabel>Start Code</TextFieldLabel>
                   <TextFieldTextArea class="h-[400px]" placeholder="Type your message here." />
@@ -697,8 +698,8 @@ export default function Editor(props: EditorProps) {
 
                 <TextField
                   class="w-full md:w-1/2"
-                  value={props.endCode}
-                  onChange={props.setEndCode}
+                  value={props.snippetSettings.codeRight}
+                  onChange={newEndCode => props.setSnippetSettings('codeRight', newEndCode)}
                 >
                   <TextFieldLabel>End Code</TextFieldLabel>
                   <TextFieldTextArea class="h-[400px]" placeholder="Type your message here." />
@@ -716,13 +717,13 @@ export default function Editor(props: EditorProps) {
                     disabled={isGenerating()}
                     onClick={async () => {
                       setIsGenerating(true)
-                      setHiddenCode(props.endCode)
+                      setHiddenCode(props.snippetSettings.codeRight)
                       setTimeout(async () => {
                         const dataUrl = await generateGifDataUrl()()
                         setGifDataUrl(dataUrl)
                         setIsGenerating(false)
                         setIsShowingGifDialog(true)
-                        setHiddenCode(props.startCode)
+                        setHiddenCode(props.snippetSettings.codeLeft)
                       }, 1000)
                     }}
                   >
@@ -744,14 +745,14 @@ export default function Editor(props: EditorProps) {
                     id="styled-snippet"
                     class="flex flex-row items-center justify-center overflow-hidden"
                     style={{
-                      ...(props.bgType === 'linearGradient'
+                      ...(props.snippetSettings.bgType === 'linearGradient'
                         ? {
-                            background: `linear-gradient(${props.bgGradientDirection}deg, ${props.bgGradientColorStart}, ${props.bgGradientColorEnd})`,
+                            background: `linear-gradient(${props.snippetSettings.bgGradientDirection}deg, ${props.snippetSettings.bgGradientColorStart}, ${props.snippetSettings.bgGradientColorEnd})`,
                           }
                         : {
-                            background: props.bgColor,
+                            background: props.snippetSettings.bgColor,
                           }),
-                      padding: `${props.yPadding}px ${props.xPadding}px`,
+                      padding: `${props.snippetSettings.yPadding}px ${props.snippetSettings.xPadding}px`,
                     }}
                   >
                     <div class="flex flex-row items-center justify-center relative margin-auto w-fit">
@@ -761,20 +762,22 @@ export default function Editor(props: EditorProps) {
                             <div
                               class="rounded"
                               style={{
-                                width: `${props.snippetWidth}px`,
+                                width: `${props.snippetSettings.snippetWidth}px`,
                                 'overflow-x': 'hidden',
-                                'box-shadow': props.shadowEnabled
-                                  ? `0 ${props.shadowOffsetY}px ${props.shadowBlur}px ${
-                                      props.shadowColor
-                                    }${(props.shadowOpacity * 255).toString(16)}`
+                                'box-shadow': props.snippetSettings.shadowEnabled
+                                  ? `0 ${props.snippetSettings.shadowOffsetY}px ${
+                                      props.snippetSettings.shadowBlur
+                                    }px ${props.snippetSettings.shadowColor}${(
+                                      props.snippetSettings.shadowOpacity * 255
+                                    ).toString(16)}`
                                   : 'none',
-                                'font-family': props.fontFamily,
-                                'font-size': `${props.fontSize}px`,
+                                'font-family': props.snippetSettings.fontFamily,
+                                'font-size': `${props.snippetSettings.fontSize}px`,
                               }}
                             >
                               <ShikiMagicMove
-                                lang={props.language}
-                                theme={props.theme}
+                                lang={props.snippetSettings.language}
+                                theme={props.snippetSettings.theme}
                                 class="p-4 shadow-xl rounded select-none overflow-hidden"
                                 highlighter={highlighter()}
                                 code={code()}
@@ -789,12 +792,12 @@ export default function Editor(props: EditorProps) {
                                 aria-hidden="true"
                                 class=" absolute top-[-20000px] left-[-20000px]"
                                 style={{
-                                  width: `${props.snippetWidth}px`,
+                                  width: `${props.snippetSettings.snippetWidth}px`,
                                 }}
                               >
                                 <ShikiMagicMove
-                                  lang={props.language}
-                                  theme={props.theme}
+                                  lang={props.snippetSettings.language}
+                                  theme={props.snippetSettings.theme}
                                   class="p-4 shadow-xl rounded select-none overflow-hidden"
                                   highlighter={highlighter()}
                                   code={hiddenCode()}
@@ -852,30 +855,35 @@ export default function Editor(props: EditorProps) {
                 />
               </TextField>
               <Button
-                disabled={isSaving() || props.startCode === '' || props.endCode === '' || !title()}
+                disabled={
+                  isSaving() ||
+                  props.snippetSettings.codeLeft === '' ||
+                  props.snippetSettings.codeRight === '' ||
+                  !title()
+                }
                 onClick={async () => {
                   setIsSaving(true)
                   const body = JSON.stringify({
                     title: title(),
-                    codeLeft: props.startCode,
-                    codeRight: props.endCode,
-                    snippetWidth: props.snippetWidth,
-                    yPadding: props.yPadding,
-                    xPadding: props.xPadding,
-                    shadowEnabled: props.shadowEnabled,
-                    shadowOffsetY: props.shadowOffsetY,
-                    shadowBlur: props.shadowBlur,
-                    shadowColor: props.shadowColor,
-                    shadowOpacity: props.shadowOpacity,
-                    bgColor: props.bgColor,
-                    bgType: props.bgType,
-                    bgGradientColorStart: props.bgGradientColorStart,
-                    bgGradientColorEnd: props.bgGradientColorEnd,
-                    bgGradientDirection: props.bgGradientDirection,
-                    fontFamily: props.fontFamily,
-                    fontSize: props.fontSize,
-                    language: props.language,
-                    theme: props.theme,
+                    codeLeft: props.snippetSettings.codeLeft,
+                    codeRight: props.snippetSettings.codeRight,
+                    snippetWidth: props.snippetSettings.snippetWidth,
+                    yPadding: props.snippetSettings.yPadding,
+                    xPadding: props.snippetSettings.xPadding,
+                    shadowEnabled: props.snippetSettings.shadowEnabled,
+                    shadowOffsetY: props.snippetSettings.shadowOffsetY,
+                    shadowBlur: props.snippetSettings.shadowBlur,
+                    shadowColor: props.snippetSettings.shadowColor,
+                    shadowOpacity: props.snippetSettings.shadowOpacity,
+                    bgColor: props.snippetSettings.bgColor,
+                    bgType: props.snippetSettings.bgType,
+                    bgGradientColorStart: props.snippetSettings.bgGradientColorStart,
+                    bgGradientColorEnd: props.snippetSettings.bgGradientColorEnd,
+                    bgGradientDirection: props.snippetSettings.bgGradientDirection,
+                    fontFamily: props.snippetSettings.fontFamily,
+                    fontSize: props.snippetSettings.fontSize,
+                    language: props.snippetSettings.language,
+                    theme: props.snippetSettings.theme,
                   })
 
                   let url = '/api/snippets'
diff --git a/playgrounds/app/src/routes/index.tsx b/playgrounds/app/src/routes/index.tsx
index c6a9bcf..28bd43f 100644
--- a/playgrounds/app/src/routes/index.tsx
+++ b/playgrounds/app/src/routes/index.tsx
@@ -1,6 +1,8 @@
 import { createSignal } from 'solid-js'
 import { makePersisted } from '@solid-primitives/storage'
 import Editor from '~/components/Editor'
+import { SnippetSettings } from '~/types'
+import { createStore } from 'solid-js/store'
 
 const left = `
 import { render } from "solid-js/web";
@@ -26,108 +28,38 @@ render(() => <Counter />, document.getElementById('app'));
 `
 
 export default function Home() {
-  const [theme, setTheme] = makePersisted(createSignal('nord'), { name: 'theme' })
-  const [language, setLanguage] = makePersisted(createSignal('tsx'), {
-    name: 'language',
-  })
-  const [startCode, setStartCode] = makePersisted(createSignal(left), {
-    name: 'startCode',
-  })
-  const [endCode, setEndCode] = makePersisted(createSignal(right), {
-    name: 'endCode',
-  })
-  const [bgColor, setBgColor] = makePersisted(createSignal('#a3d0ff'), {
-    name: 'bgColor',
-  })
-  const [xPadding, setXPadding] = makePersisted(createSignal(42), {
-    name: 'xPadding',
-  })
-  const [yPadding, setYPadding] = makePersisted(createSignal(42), {
-    name: 'yPadding',
-  })
-  const [shadowEnabled, setShadowEnabled] = makePersisted(createSignal(true), {
-    name: 'shadowEnabled',
-  })
-  const [shadowOffsetY, setShadowOffsetY] = makePersisted(createSignal(10), {
-    name: 'shadowOffsetY',
-  })
-  const [shadowBlur, setShadowBlur] = makePersisted(createSignal(10), {
-    name: 'shadowBlur',
-  })
-  const [shadowColor, setShadowColor] = makePersisted(createSignal('#000000'), {
-    name: 'shadowColor',
-  })
-  const [shadowOpacity, setShadowOpacity] = makePersisted(createSignal(0.6), {
-    name: 'shadowOpacity',
-  })
-  const [snippetWidth, setSnippetWidth] = makePersisted(createSignal(450), {
-    name: 'snippetWidth',
-  })
-  const [fontSize, setFontSize] = makePersisted(createSignal(16), {
-    name: 'fontSize',
-  })
-  const [fontFamily, setFontFamily] = makePersisted(createSignal('Fira Code'), {
-    name: 'fontFamily',
-  })
-
-  const [bgType, setBgType] = makePersisted(createSignal<'solid' | 'linearGradient'>('solid'), {
-    name: 'bgType',
-  })
-  const [bgGradientColorStart, setBgGradientColorStart] = makePersisted(createSignal('#a3d0ff'), {
-    name: 'bgGradientColorStart',
-  })
-  const [bgGradientColorEnd, setBgGradientColorEnd] = makePersisted(createSignal('#fbc737'), {
-    name: 'bgGradientColorEnd',
-  })
-  const [bgGradientDirection, setBgGradientDirection] = makePersisted(createSignal(45), {
-    name: 'bgGradientDirection',
-  })
+  const [snippetSettings, setSnippetSettings] = makePersisted(
+    createStore<SnippetSettings>({
+      title: '',
+      codeLeft: left,
+      codeRight: right,
+      snippetWidth: 450,
+      yPadding: 42,
+      xPadding: 42,
+      shadowEnabled: true,
+      shadowOffsetY: 10,
+      shadowBlur: 10,
+      shadowColor: '#000000',
+      shadowOpacity: 0.6,
+      bgType: 'solid',
+      bgGradientColorStart: '#a3d0ff',
+      bgGradientColorEnd: '#fbc737',
+      bgGradientDirection: 45,
+      bgColor: '#a3d0ff',
+      language: 'tsx',
+      theme: 'nord',
+      fontSize: 16,
+      fontFamily: 'Fira Code',
+    }),
+    { name: 'snippetSettings' },
+  )
 
   return (
     <main class="mx-auto text-gray-700 dark:text-gray-100 px-4 min-h-full">
       {/* <p class="mb-16 text-center font-bold text-lg">
         Create and share beautiful gifs of your source code diffs.
       </p> */}
-      <Editor
-        startCode={startCode()}
-        setStartCode={setStartCode}
-        endCode={endCode()}
-        setEndCode={setEndCode}
-        snippetWidth={snippetWidth()}
-        setSnippetWidth={setSnippetWidth}
-        yPadding={yPadding()}
-        setYPadding={setYPadding}
-        xPadding={xPadding()}
-        setXPadding={setXPadding}
-        shadowEnabled={shadowEnabled()}
-        setShadowEnabled={setShadowEnabled}
-        shadowOffsetY={shadowOffsetY()}
-        setShadowOffsetY={setShadowOffsetY}
-        shadowBlur={shadowBlur()}
-        setShadowBlur={setShadowBlur}
-        shadowColor={shadowColor()}
-        setShadowColor={setShadowColor}
-        shadowOpacity={shadowOpacity()}
-        setShadowOpacity={setShadowOpacity}
-        bgColor={bgColor()}
-        setBgColor={setBgColor}
-        bgType={bgType()}
-        setBgType={setBgType}
-        bgGradientColorStart={bgGradientColorStart()}
-        setBgGradientColorStart={setBgGradientColorStart}
-        bgGradientColorEnd={bgGradientColorEnd()}
-        setBgGradientColorEnd={setBgGradientColorEnd}
-        bgGradientDirection={bgGradientDirection()}
-        setBgGradientDirection={setBgGradientDirection}
-        fontSize={fontSize()}
-        setFontSize={setFontSize}
-        fontFamily={fontFamily()}
-        setFontFamily={setFontFamily}
-        language={language()}
-        setLanguage={setLanguage}
-        theme={theme()}
-        setTheme={setTheme}
-      />
+      <Editor snippetSettings={snippetSettings} setSnippetSettings={setSnippetSettings} />
     </main>
   )
 }
diff --git a/playgrounds/app/src/routes/snippets/[snippetId].tsx b/playgrounds/app/src/routes/snippets/[snippetId].tsx
index 8a1833c..7aff244 100644
--- a/playgrounds/app/src/routes/snippets/[snippetId].tsx
+++ b/playgrounds/app/src/routes/snippets/[snippetId].tsx
@@ -1,7 +1,8 @@
-import { createResource, Show } from 'solid-js'
+import { createEffect, createResource, Show } from 'solid-js'
+import { createStore } from 'solid-js/store'
 import Editor from '~/components/Editor'
 import { authFetch } from '~/lib/utils'
-import { Snippet } from '~/types'
+import { Snippet, SnippetSettings } from '~/types'
 
 export default function ViewSnippet({ params }: { params: { snippetId: string } }) {
   const [snippet] = createResource<Snippet>(async () => {
@@ -13,49 +14,23 @@ export default function ViewSnippet({ params }: { params: { snippetId: string }
     return data
   })
 
+  const [snippetSettings, setSnippetSettings] = createStore<SnippetSettings>({ ...snippet()! })
+
+  createEffect(() => {
+    console.log('snippet in effect', snippet())
+    const updatedSnippetSettings = snippet()
+    if (updatedSnippetSettings) {
+      setSnippetSettings(updatedSnippetSettings)
+    }
+  })
+
   return (
-    <main class="text-center mx-auto text-gray-700  dark:text-gray-100 p-4 flex flex-col justify-center">
+    <main class="mx-auto text-gray-700  dark:text-gray-100 px-4 flex flex-col justify-center">
       <Show when={snippet()}>
         <Editor
-          startCode={snippet()!.codeLeft}
-          setStartCode={() => {}}
-          endCode={snippet()!.codeRight}
-          setEndCode={() => {}}
-          snippetWidth={snippet()!.snippetWidth}
-          setSnippetWidth={() => {}}
-          yPadding={snippet()!.yPadding}
-          setYPadding={() => {}}
-          xPadding={snippet()!.xPadding}
-          setXPadding={() => {}}
-          shadowEnabled={snippet()!.shadowEnabled}
-          setShadowEnabled={() => {}}
-          shadowOffsetY={snippet()!.shadowOffsetY}
-          setShadowOffsetY={() => {}}
-          shadowBlur={snippet()!.shadowBlur}
-          setShadowBlur={() => {}}
-          shadowColor={snippet()!.shadowColor}
-          setShadowColor={() => {}}
-          shadowOpacity={snippet()!.shadowOpacity}
-          setShadowOpacity={() => {}}
-          bgColor={snippet()!.bgColor}
-          setBgColor={() => {}}
-          bgType={snippet()!.bgType}
-          setBgType={() => {}}
-          bgGradientColorStart={snippet()!.bgGradientColorStart}
-          setBgGradientColorStart={() => {}}
-          bgGradientColorEnd={snippet()!.bgGradientColorEnd}
-          setBgGradientColorEnd={() => {}}
-          bgGradientDirection={snippet()!.bgGradientDirection}
-          setBgGradientDirection={() => {}}
-          fontSize={snippet()!.fontSize}
-          setFontSize={() => {}}
-          fontFamily={snippet()!.fontFamily}
-          setFontFamily={() => {}}
-          language={snippet()!.language}
-          setLanguage={() => {}}
-          theme={snippet()!.theme}
-          setTheme={() => {}}
-          title={snippet()!.title}
+          snippetId={params.snippetId}
+          snippetSettings={snippetSettings}
+          setSnippetSettings={setSnippetSettings}
         />
       </Show>
     </main>
diff --git a/playgrounds/app/src/types.ts b/playgrounds/app/src/types.ts
index e674e8c..3afe77a 100644
--- a/playgrounds/app/src/types.ts
+++ b/playgrounds/app/src/types.ts
@@ -6,14 +6,10 @@ export interface User {
   githubAvatarUrl: string
 }
 
-export interface Snippet {
-  id: string
-  userId: string
-  title: string
+export interface SnippetSettings {
+  title?: string
   codeLeft: string
   codeRight: string
-  createdAt: number
-  updatedAt: number
   snippetWidth: number
   yPadding: number
   xPadding: number
@@ -33,6 +29,13 @@ export interface Snippet {
   fontFamily: string
 }
 
+export interface Snippet extends SnippetSettings {
+  id: string
+  userId: string
+  createdAt: number
+  updatedAt: number
+}
+
 export interface AnimationFrameLayout {
   yPadding: number
   xPadding: number