From cf26f2853c5c4aa7b0eb72c3a24f5157fe464392 Mon Sep 17 00:00:00 2001
From: Shakitskiy Vladislav <Vshakitskiy@gmail.com>
Date: Wed, 27 Dec 2023 15:15:22 +0300
Subject: [PATCH 1/5] fix: Elements Overlay and Deleting

---
 apps/dashboard/src/components/OgPlayground.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/components/OgPlayground.tsx b/apps/dashboard/src/components/OgPlayground.tsx
index cd69cc9..2cb38de 100644
--- a/apps/dashboard/src/components/OgPlayground.tsx
+++ b/apps/dashboard/src/components/OgPlayground.tsx
@@ -176,7 +176,7 @@ export function OgPlayground({ initialElements, width, height }: OgProviderProps
         return
       }
 
-      if (event.key === 'Backspace' && selectedElement) {
+      if ((event.key === 'Backspace' || event.key === 'Delete') && selectedElement) {
         event.preventDefault()
         removeElement(selectedElement)
       }
@@ -245,7 +245,7 @@ export function OgPlayground({ initialElements, width, height }: OgProviderProps
   return (
     <OgContext.Provider value={value}>
       <div className="w-screen h-screen flex flex-row justify-between items-center bg-gray-50">
-        <div className="w-[300px] h-screen flex flex-col border-r border-gray-100 shadow-lg shadow-gray-100 bg-white">
+        <div className="w-[300px] h-screen flex flex-col border-r border-gray-100 shadow-lg shadow-gray-100 bg-white z-10">
           <LeftPanel />
         </div>
         <div className="flex flex-col items-center gap-4">
@@ -260,7 +260,7 @@ export function OgPlayground({ initialElements, width, height }: OgProviderProps
           <div className="border border-gray-100 absolute pointer-events-none transform translate-y-[32px]" style={{ width, height }} />
           <PlaygroundToolbar />
         </div>
-        <div className="w-[300px] h-screen flex flex-col border-l border-gray-100 shadow-lg shadow-gray-100 bg-white">
+        <div className="w-[300px] h-screen flex flex-col border-l border-gray-100 shadow-lg shadow-gray-100 bg-white z-10">
           <RightPanel />
         </div>
       </div>

From 1f3e4cf8812e4e03d616dd2e5a39e226fc3e85b8 Mon Sep 17 00:00:00 2001
From: Shakitskiy Vladislav <Vshakitskiy@gmail.com>
Date: Wed, 27 Dec 2023 16:52:05 +0300
Subject: [PATCH 2/5] fix: editor overflow & change elements type

---
 apps/dashboard/src/app/page.tsx               |  1 +
 .../src/components/EditorToolbar.tsx          |  5 ++
 .../src/components/LeftPanel/ElementRow.tsx   | 51 ++++++++-----------
 apps/dashboard/src/components/OgEditor.tsx    |  2 +-
 apps/dashboard/src/lib/types.ts               |  1 +
 5 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/apps/dashboard/src/app/page.tsx b/apps/dashboard/src/app/page.tsx
index d4726fa..6971fc1 100644
--- a/apps/dashboard/src/app/page.tsx
+++ b/apps/dashboard/src/app/page.tsx
@@ -13,6 +13,7 @@ const initialElements: OGElement[] = [
   {
     id: createElementId(),
     tag: 'div',
+    name: 'Box',
     x: 0,
     y: 0,
     width: 1200,
diff --git a/apps/dashboard/src/components/EditorToolbar.tsx b/apps/dashboard/src/components/EditorToolbar.tsx
index 831646a..88feeec 100644
--- a/apps/dashboard/src/components/EditorToolbar.tsx
+++ b/apps/dashboard/src/components/EditorToolbar.tsx
@@ -28,6 +28,7 @@ export function EditorToolbar() {
     <div className="rounded-md border border-gray-100 bg-white z-10 flex flex-row items-center">
       <ToolbarButton element={{
         tag: 'p',
+        name: 'Text',
         width: 100,
         height: 50,
         visible: true,
@@ -46,6 +47,7 @@ export function EditorToolbar() {
       <div className="w-[1px] h-4 bg-gray-100" />
       <ToolbarButton element={{
         tag: 'div',
+        name: 'Box',
         width: 200,
         height: 200,
         visible: true,
@@ -58,6 +60,7 @@ export function EditorToolbar() {
       <div className="w-[1px] h-4 bg-gray-100" />
       <ToolbarButton element={{
         tag: 'div',
+        name: 'Rounded box',
         width: 150,
         height: 150,
         visible: true,
@@ -71,6 +74,7 @@ export function EditorToolbar() {
       <div className="w-[1px] h-4 bg-gray-100" />
       <ToolbarButton element={{
         tag: 'div',
+        name: 'Image',
         width: 200,
         height: 150,
         visible: true,
@@ -85,6 +89,7 @@ export function EditorToolbar() {
       <div className="w-[1px] h-4 bg-gray-100" />
       <ToolbarButton element={{
         tag: 'span',
+        name: 'Dynamic text',
         width: 312,
         height: 50,
         visible: true,
diff --git a/apps/dashboard/src/components/LeftPanel/ElementRow.tsx b/apps/dashboard/src/components/LeftPanel/ElementRow.tsx
index d9c1d26..390bfb1 100644
--- a/apps/dashboard/src/components/LeftPanel/ElementRow.tsx
+++ b/apps/dashboard/src/components/LeftPanel/ElementRow.tsx
@@ -36,36 +36,27 @@ export function ElementRow({ element }: ElementRowProps) {
         onClick={() => { setSelectedElement(element.id); }}
         type="button"
       >
-        {element.tag === 'p' ? (
-          <>
-            <TextIcon height="1.4em" width="1.4em" />
-            {element.content.slice(0, 25)}
-          </>
-        ) : null}
-        {element.tag === 'div' && element.backgroundImage ? (
-          <>
-            <ImageIcon height="1.4em" width="1.4em" />
-            Image
-          </>
-        ) : null}
-        {element.tag === 'div' && !element.backgroundImage && !element.radius ? (
-          <>
-            <BoxIcon height="1.4em" width="1.4em" />
-            Box
-          </>
-        ) : null}
-        {element.tag === 'div' && !element.backgroundImage && element.radius ? (
-          <>
-            <CircleIcon height="1.4em" width="1.4em" />
-            Rounded box
-          </>
-        ) : null}
-        {element.tag === 'span' ? (
-          <>
-            <MagicWandIcon height="1.4em" width="1.4em" />
-            Dynamic text
-          </>
-        ) : null}
+        {element.tag === 'p'
+          ? <TextIcon height="1.4em" width="1.4em" />
+          : null
+        }
+        {element.tag === 'div' && element.backgroundImage
+          ? <ImageIcon height="1.4em" width="1.4em" />
+          : null
+        }
+        {element.tag === 'div' && !element.backgroundImage && !element.radius
+          ? <BoxIcon height="1.4em" width="1.4em" />
+          : null
+        }
+        {element.tag === 'div' && !element.backgroundImage && element.radius
+          ? <CircleIcon height="1.4em" width="1.4em" />
+          : null
+        }
+        {element.tag === 'span'
+          ? <MagicWandIcon height="1.4em" width="1.4em" />
+          : null
+        }
+        {element.name}
       </button>
       <button
         className="text-gray-600 hover:text-gray-900"
diff --git a/apps/dashboard/src/components/OgEditor.tsx b/apps/dashboard/src/components/OgEditor.tsx
index 9aa3d26..40117f0 100644
--- a/apps/dashboard/src/components/OgEditor.tsx
+++ b/apps/dashboard/src/components/OgEditor.tsx
@@ -246,7 +246,7 @@ export function OgEditor({ initialElements, width, height }: OgProviderProps) {
 
   return (
     <OgContext.Provider value={value}>
-      <div className="w-screen h-screen flex flex-row justify-between items-center bg-gray-50">
+      <div className="w-screen h-screen flex flex-row justify-between items-center bg-gray-50 overflow-hidden">
         <div className="w-[300px] h-screen flex flex-col border-r border-gray-100 shadow-lg shadow-gray-100 bg-white z-10">
           <LeftPanel />
         </div>
diff --git a/apps/dashboard/src/lib/types.ts b/apps/dashboard/src/lib/types.ts
index ebcea8f..9cda28c 100644
--- a/apps/dashboard/src/lib/types.ts
+++ b/apps/dashboard/src/lib/types.ts
@@ -3,6 +3,7 @@ import type { Font } from "./fonts"
 export type OGElement = (OGPElement | OGDynamicElement | OGDivElement)
   & {
     id: string
+    name: string
     x: number
     y: number
     width: number

From 4edc4645a99d664ec62ebfba660a76c3c3e6fc35 Mon Sep 17 00:00:00 2001
From: Shakitskiy Vladislav <Vshakitskiy@gmail.com>
Date: Wed, 27 Dec 2023 20:22:36 +0300
Subject: [PATCH 3/5] fix: letter spacing

---
 apps/dashboard/src/components/EditorToolbar.tsx          | 2 ++
 apps/dashboard/src/components/RightPanel/FontSection.tsx | 7 ++++++-
 apps/dashboard/src/lib/elements.ts                       | 1 +
 apps/dashboard/src/lib/types.ts                          | 1 +
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/components/EditorToolbar.tsx b/apps/dashboard/src/components/EditorToolbar.tsx
index 88feeec..e11fe6f 100644
--- a/apps/dashboard/src/components/EditorToolbar.tsx
+++ b/apps/dashboard/src/components/EditorToolbar.tsx
@@ -39,6 +39,7 @@ export function EditorToolbar() {
         fontFamily: 'Inter',
         fontWeight: 400,
         lineHeight: 1,
+        letterSpacing: 0,
         fontSize: 50,
         align: 'left',
       }}>
@@ -99,6 +100,7 @@ export function EditorToolbar() {
         fontFamily: 'Inter',
         fontWeight: 400,
         lineHeight: 1,
+        letterSpacing: 0,
         fontSize: 50,
         align: 'left',
       }}>
diff --git a/apps/dashboard/src/components/RightPanel/FontSection.tsx b/apps/dashboard/src/components/RightPanel/FontSection.tsx
index 8169533..2f4f900 100644
--- a/apps/dashboard/src/components/RightPanel/FontSection.tsx
+++ b/apps/dashboard/src/components/RightPanel/FontSection.tsx
@@ -70,7 +70,12 @@ export function FontSection({ selectedElement }: FontSectionProps) {
         }} type="number" value={selectedElement.lineHeight}>
           <LineHeightIcon />
         </Input>
-        <Input max={5} min={0} onChange={() => { updateElement(selectedElement); }} type="number" value={0}>
+        <Input max={5} min={0} onChange={value => {
+          updateElement({
+            ...selectedElement,
+            letterSpacing: value,
+          });
+        }} type="number" value={selectedElement.letterSpacing}>
           <LetterSpacingIcon />
         </Input>
         <Select onChange={value => {
diff --git a/apps/dashboard/src/lib/elements.ts b/apps/dashboard/src/lib/elements.ts
index ac54b25..4db8e2b 100644
--- a/apps/dashboard/src/lib/elements.ts
+++ b/apps/dashboard/src/lib/elements.ts
@@ -61,6 +61,7 @@ export function createElementStyle(element: OGElement): CSSProperties {
       fontWeight: element.fontWeight,
       fontSize: `${element.fontSize}px`,
       lineHeight: element.lineHeight,
+      letterSpacing: `${element.letterSpacing}px`,
       textAlign: element.align,
       // By default, Satori sets a margin top and bottom on some elements:
       // https://github.com/vercel/satori/blob/29fe2e4a9676a1ba41c361ec1a547d6de329b039/src/handler/presets.ts#L15
diff --git a/apps/dashboard/src/lib/types.ts b/apps/dashboard/src/lib/types.ts
index 9cda28c..435d145 100644
--- a/apps/dashboard/src/lib/types.ts
+++ b/apps/dashboard/src/lib/types.ts
@@ -33,6 +33,7 @@ export interface OGPElement {
   fontWeight: number
   fontSize: number
   lineHeight: number
+  letterSpacing: number
   align: 'left' | 'center' | 'right'
 }
 

From a764e8d41e5ede96ef5731dbb0d8bb55eb36b2c5 Mon Sep 17 00:00:00 2001
From: Shakitskiy Vladislav <Vshakitskiy@gmail.com>
Date: Thu, 28 Dec 2023 13:24:49 +0300
Subject: [PATCH 4/5] update: more letter spacing customization

---
 apps/dashboard/src/components/RightPanel/FontSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/src/components/RightPanel/FontSection.tsx b/apps/dashboard/src/components/RightPanel/FontSection.tsx
index 2f4f900..ec29a12 100644
--- a/apps/dashboard/src/components/RightPanel/FontSection.tsx
+++ b/apps/dashboard/src/components/RightPanel/FontSection.tsx
@@ -70,7 +70,7 @@ export function FontSection({ selectedElement }: FontSectionProps) {
         }} type="number" value={selectedElement.lineHeight}>
           <LineHeightIcon />
         </Input>
-        <Input max={5} min={0} onChange={value => {
+        <Input max={10} min={-10} onChange={value => {
           updateElement({
             ...selectedElement,
             letterSpacing: value,

From 21c8c4372bf524fad79fcbb963af8f800c015f87 Mon Sep 17 00:00:00 2001
From: Tom Lienard <tom.lienrd@gmail.com>
Date: Thu, 28 Dec 2023 13:12:06 +0100
Subject: [PATCH 5/5] fix: typecheck

---
 apps/dashboard/src/lib/templates.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/dashboard/src/lib/templates.ts b/apps/dashboard/src/lib/templates.ts
index 1dd1a3e..156a857 100644
--- a/apps/dashboard/src/lib/templates.ts
+++ b/apps/dashboard/src/lib/templates.ts
@@ -49,6 +49,7 @@ export const TEMPLATES = [
         "fontFamily": "Montserrat",
         "fontWeight": 600,
         "lineHeight": 1,
+        "letterSpacing": 0,
         "fontSize": 120,
         "align": "left"
       },
@@ -68,6 +69,7 @@ export const TEMPLATES = [
         "fontFamily": "Montserrat",
         "fontWeight": 600,
         "lineHeight": 1,
+        "letterSpacing": 0,
         "fontSize": 80,
         "align": "left"
       },