fix: standardize string quotes and improve layout in designer and index pages

app/pages/designer.vue

@@ -43,9 +43,9 @@ const {
 } = useSlipmatDesigner();
 
 // Active view selector for multi-canvas design
-const activeView = ref<'front' | 'top' | 'left' | 'right'>('front');
+const activeView = ref<"front" | "top" | "left" | "right">("front");
 
-const setActiveView = (view: 'front' | 'top' | 'left' | 'right') => {
+const setActiveView = (view: "front" | "top" | "left" | "right") => {
   activeView.value = view;
   setActiveCanvas(view);
 };
@@ -147,7 +147,7 @@ const persistDesign = async (designId: string, design: ExportedDesign) => {
       designId,
       templateId: design.templateId,
       ownerEmail: user.value?.email ?? null,
-  ownerId: backendUser.value?.id ?? null,
+      ownerId: backendUser.value?.id ?? null,
       previewUrl: previewUpload.publicUrl,
       productionUrl: productionUpload.publicUrl,
       canvasJson: canvasUpload.publicUrl,
@@ -382,10 +382,10 @@ const handleCheckout = async () => {
         </h1>
       </header>
 
-      <section class="mt-10 flex flex-col gap-8 lg:grid lg:grid-cols-[320px_minmax(0,1fr)] lg:gap-6">
+      <section class="mt-10 flex flex-col gap-8 lg:grid lg:gap-6">
         <!-- Left Sidebar - Template Picker and Preview (together on desktop, separate on mobile) -->
-        <div class="contents lg:block lg:space-y-6">
-          <!-- <div class="order-1">
+        <!-- <div class="contents lg:block lg:space-y-6"> -->
+        <!-- <div class="order-1">
             <TemplatePicker
               :templates="templates"
               :selected-template-id="selectedTemplate.id"
@@ -393,20 +393,22 @@ const handleCheckout = async () => {
             />
           </div> -->
 
-          <div class="order-3">
+        <!-- <div class="order-3">
             <DesignerPreview
               :is-checkout-pending="isCheckoutPending"
               :checkout-price="DESIGN_PRICE_USD"
               :checkout-error="checkoutError"
               @checkout="handleCheckout"
             />
-          </div>
-        </div>
+          </div> -->
+        <!-- </div> -->
 
         <!-- Designer Canvas - Second on mobile, right column on desktop -->
         <div class="order-2 flex flex-col gap-6 lg:order-0">
           <!-- View Selector Tabs -->
-          <div class="flex gap-2 rounded-lg border border-slate-200 bg-slate-50 p-2">
+          <div
+            class="flex gap-2 rounded-lg border border-slate-200 bg-slate-50 p-2"
+          >
             <button
               v-for="view in ['front', 'top', 'left', 'right']"
               :key="view"
@@ -415,16 +417,14 @@ const handleCheckout = async () => {
                 'flex-1 rounded-md px-4 py-2 text-sm font-semibold capitalize transition-all',
                 activeView === view
                   ? 'bg-white text-slate-900 shadow-sm'
-                  : 'text-slate-600 hover:text-slate-900'
+                  : 'text-slate-600 hover:text-slate-900',
               ]"
             >
               {{ view }} View
             </button>
           </div>
 
-          <div
-            class="rounded-3xl border border-slate-200 bg-white shadow-xl"
-          >
+          <div class="rounded-3xl border border-slate-200 bg-white shadow-xl">
             <DesignerToolbar
               :on-add-text="addTextbox"
               :on-add-circle="() => addShape('circle')"
@@ -449,7 +449,9 @@ const handleCheckout = async () => {
             <div class="p-6 space-y-4">
               <!-- Canvas for each view -->
               <div v-show="activeView === 'front'" class="canvas-container">
-                <h3 class="mb-2 text-sm font-semibold text-slate-700">Front View</h3>
+                <h3 class="mb-2 text-sm font-semibold text-slate-700">
+                  Front View
+                </h3>
                 <DesignerCanvas
                   canvas-id="front"
                   :size="displaySize"
@@ -458,9 +460,11 @@ const handleCheckout = async () => {
                   :unregister-canvas="unregisterCanvas"
                 />
               </div>
-              
+
               <div v-show="activeView === 'top'" class="canvas-container">
-                <h3 class="mb-2 text-sm font-semibold text-slate-700">Top View</h3>
+                <h3 class="mb-2 text-sm font-semibold text-slate-700">
+                  Top View
+                </h3>
                 <DesignerCanvas
                   canvas-id="top"
                   :size="displaySize"
@@ -469,9 +473,11 @@ const handleCheckout = async () => {
                   :unregister-canvas="unregisterCanvas"
                 />
               </div>
-              
+
               <div v-show="activeView === 'left'" class="canvas-container">
-                <h3 class="mb-2 text-sm font-semibold text-slate-700">Left View</h3>
+                <h3 class="mb-2 text-sm font-semibold text-slate-700">
+                  Left View
+                </h3>
                 <DesignerCanvas
                   canvas-id="left"
                   :size="displaySize"
@@ -480,9 +486,11 @@ const handleCheckout = async () => {
                   :unregister-canvas="unregisterCanvas"
                 />
               </div>
-              
+
               <div v-show="activeView === 'right'" class="canvas-container">
-                <h3 class="mb-2 text-sm font-semibold text-slate-700">Right View</h3>
+                <h3 class="mb-2 text-sm font-semibold text-slate-700">
+                  Right View
+                </h3>
                 <DesignerCanvas
                   canvas-id="right"
                   :size="displaySize"
@@ -493,12 +501,20 @@ const handleCheckout = async () => {
               </div>
 
               <p class="mt-4 text-sm text-slate-600">
-                Design each view of your table jersey separately. Switch between views using the tabs above. 
-                Safe zone and bleed guides update automatically when you switch templates.
+                Design each view of your table jersey separately. Switch between
+                views using the tabs above. Safe zone and bleed guides update
+                automatically when you switch templates.
               </p>
             </div>
           </div>
         </div>
+        
+        <DesignerPreview
+          :is-checkout-pending="isCheckoutPending"
+          :checkout-price="DESIGN_PRICE_USD"
+          :checkout-error="checkoutError"
+          @checkout="handleCheckout"
+        />
       </section>
     </div>
   </main>