rewrite image section of editor, clicking on summary view expands main view

src/lib/components/editor/imageTarget.svelte

@@ -18,15 +18,18 @@
 </script>
 
 <div class="mb-4 w-full">
-    
-    {#if image}
-        <button id="img-upload-button" class="" onclick={()=>{fileinput.click();}}>
-            <img class="avatar rounded-2xl hover:brightness-50 transition-opacity w-full h-full object-cover" src="{image}" alt="d" />
+    {#if edit && image}
+        <button id="img-upload-button" onclick={() => fileinput.click()}>
+            <img class="rounded-2xl hover:brightness-50 transition-opacity w-full h-full object-cover" src={image} alt="" />
         </button>
-    {:else}
-        <button id="img-upload-button" class="" onclick={()=>{fileinput.click();}}>
+    {:else if edit}
+        <button id="img-upload-button" onclick={() => fileinput.click()}>
             Select Image
         </button>
+    {:else if image}
+        <img class="rounded-2xl w-full h-full object-cover" src={image} alt="" />
+    {:else}
+        <div class="rounded-2xl h-50 bg-white/10 text-center">No Image</div>
     {/if}
 
     <input style="display:none" type="file" accept=".jpg, .jpeg, .png" onchange={(e)=>onFileSelected(e)} bind:this={fileinput} >

src/lib/components/entrySummaryView.svelte

@@ -2,7 +2,7 @@
     import { generateHTML } from "@tiptap/html";
     import { StarterKit } from "@tiptap/starter-kit";
 
-    const { entry } = $props();
+    const { entry, clickCB } = $props();
 
     const formatDate = (dateString) => {
         const date = new Date(dateString);
@@ -11,14 +11,14 @@
     };
 </script>
 
-<li class="bg-white/30 rounded-2xl mb-4 p-3">
+<li class="bg-white/30 rounded-2xl mb-4 p-3" onclick={clickCB}>
     <div class="flex flex-row">
         <div>
             <p class="text-sm text-white/60">{formatDate(entry.date)}</p>
             {@html generateHTML(entry.content, [StarterKit])}
         </div>
         <img
-            class="w-16 h-16 rounded-xl object-cover ml-auto"
+            class="max-h-30 min-h-15 rounded-xl object-cover ml-auto"
             src={entry.image}
         />
     </div>

src/routes/+page.svelte

@@ -7,7 +7,14 @@
     import Editor from '$lib/components/editor/index.svelte';
     import EntrySummaryView from '$lib/components/entrySummaryView.svelte'
     
-    let edit = $state(true)
+    let edit = $state(false)
+    
+    let selectedEntry = $state()
+    
+    let selectEntry = async (entryID) => {
+      const res = await fetch(`/api/entry?id=${entryID}`)
+      selectedEntry = await res.json()
+    }
 </script>
 
 <div class="flex flex-col md:flex-row  md:space-x-4 space-y-4 w-full">
@@ -15,12 +22,18 @@
             <Calendar />
             <ul class="mt-4">
                 {#each data.all as entry}
-                    <EntrySummaryView {entry} />
+                    <EntrySummaryView clickCB={async () => await selectEntry(entry.id)} {entry} />
                 {/each}
             </ul>
         </div>
         
         <div id="right" class="md:w-1/2">
-            <Editor bind:edit />
+            {#if selectedEntry}
+                <Editor bind:edit bind:image={selectedEntry.image} bind:content={selectedEntry.content} />
+            {:else}
+                <div class="flex flex-col items-center justify-center h-full">
+                    <p class="text-white/60">Select an entry to view/edit</p>
+                </div>
+            {/if}
         </div>
     </div>

src/routes/layout.css

@@ -11,6 +11,6 @@ html {
 }
 
   html body {
-    @apply font-[AmericanTypewriter];
+    /*@apply font-[AmericanTypewriter];*/
     /* @apply w-full md:w-[68%] mx-auto h-full; */
   }