Created basic entry summary view with all entries, updated schema, etc

package.json

@@ -37,6 +37,7 @@
 		"@tiptap/core": "^3.18.0",
 		"@tiptap/extension-bubble-menu": "^3.18.0",
 		"@tiptap/extensions": "^3.18.0",
+		"@tiptap/html": "^3.18.0",
 		"@tiptap/pm": "^3.18.0",
 		"@tiptap/starter-kit": "^3.18.0",
 		"postgres": "^3.4.8",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       '@tiptap/extensions':
         specifier: ^3.18.0
         version: 3.18.0(@tiptap/core@3.18.0(@tiptap/pm@3.18.0))(@tiptap/pm@3.18.0)
+      '@tiptap/html':
+        specifier: ^3.18.0
+        version: 3.18.0(@tiptap/core@3.18.0(@tiptap/pm@3.18.0))(@tiptap/pm@3.18.0)(happy-dom@20.4.0)
       '@tiptap/pm':
         specifier: ^3.18.0
         version: 3.18.0
@@ -1020,6 +1023,13 @@ packages:
       '@tiptap/core': ^3.18.0
       '@tiptap/pm': ^3.18.0
 
+  '@tiptap/html@3.18.0':
+    resolution: {integrity: sha512-27A+N3im8pKxlirm7lDZRwgku6xMoDuGwt2cP/G59LrCh208G1oR/RTRBAKwrOQLfA1T/fTv08ZRt2enMYnmkw==}
+    peerDependencies:
+      '@tiptap/core': ^3.18.0
+      '@tiptap/pm': ^3.18.0
+      happy-dom: ^20.0.2
+
   '@tiptap/pm@3.18.0':
     resolution: {integrity: sha512-8RoI5gW0xBVCsuxahpK8vx7onAw6k2/uR3hbGBBnH+HocDMaAZKot3nTyY546ij8ospIC1mnQ7k4BhVUZesZDQ==}
 
@@ -1047,6 +1057,12 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/whatwg-mimetype@3.0.2':
+    resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
+
+  '@types/ws@8.18.1':
+    resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
+
   '@vue/compiler-sfc@2.7.16':
     resolution: {integrity: sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==}
 
@@ -1273,6 +1289,10 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  happy-dom@20.4.0:
+    resolution: {integrity: sha512-RDeQm3dT9n0A5f/TszjUmNCLEuPnMGv3Tv4BmNINebz/h17PA6LMBcxJ5FrcqltNBMh9jA/8ufgDdBYUdBt+eg==}
+    engines: {node: '>=20.0.0'}
+
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
@@ -1659,6 +1679,22 @@ packages:
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
+  whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+
+  ws@8.19.0:
+    resolution: {integrity: sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   zimmerframe@1.1.4:
     resolution: {integrity: sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==}
 
@@ -2298,6 +2334,12 @@ snapshots:
       '@tiptap/core': 3.18.0(@tiptap/pm@3.18.0)
       '@tiptap/pm': 3.18.0
 
+  '@tiptap/html@3.18.0(@tiptap/core@3.18.0(@tiptap/pm@3.18.0))(@tiptap/pm@3.18.0)(happy-dom@20.4.0)':
+    dependencies:
+      '@tiptap/core': 3.18.0(@tiptap/pm@3.18.0)
+      '@tiptap/pm': 3.18.0
+      happy-dom: 20.4.0
+
   '@tiptap/pm@3.18.0':
     dependencies:
       prosemirror-changeset: 2.3.1
@@ -2365,6 +2407,12 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
+  '@types/whatwg-mimetype@3.0.2': {}
+
+  '@types/ws@8.18.1':
+    dependencies:
+      '@types/node': 22.19.7
+
   '@vue/compiler-sfc@2.7.16':
     dependencies:
       '@babel/parser': 7.28.6
@@ -2544,6 +2592,18 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  happy-dom@20.4.0:
+    dependencies:
+      '@types/node': 22.19.7
+      '@types/whatwg-mimetype': 3.0.2
+      '@types/ws': 8.18.1
+      entities: 4.5.0
+      whatwg-mimetype: 3.0.0
+      ws: 8.19.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
@@ -2952,4 +3012,8 @@ snapshots:
 
   w3c-keyname@2.2.8: {}
 
+  whatwg-mimetype@3.0.0: {}
+
+  ws@8.19.0: {}
+
   zimmerframe@1.1.4: {}

src/lib/components/editor/index.svelte

@@ -15,4 +15,4 @@
 </script>
 
 <ImageTarget bind:image bind:edit />
-<TextEditor bind:content bind:editorState bind:edit />
+<TextEditor bind:content bind:editorState bind:edit />

src/lib/components/editor/textEditor.svelte

@@ -8,7 +8,6 @@
     import { onMount, onDestroy } from 'svelte'
     import { Editor } from '@tiptap/core'
     import { StarterKit } from '@tiptap/starter-kit'
-    import { Placeholder } from '@tiptap/extensions'
 
     let element = $state()
     
@@ -18,9 +17,6 @@
             editable: edit,
             extensions: [
                 StarterKit,
-                Placeholder.configure({
-                  placeholder: "Write about your day..."
-                })
             ],
             content: content,
             onTransaction: ({ editor }) => {

src/lib/components/entrySummaryView.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { generateHTML } from "@tiptap/html";
+    import { StarterKit } from "@tiptap/starter-kit";
+
+    const { entry } = $props();
+
+    const formatDate = (dateString) => {
+        const date = new Date(dateString);
+        const options = { year: "numeric", month: "long", day: "numeric" };
+        return date.toLocaleDateString(undefined, options);
+    };
+</script>
+
+<li class="bg-white/30 rounded-2xl mb-4 p-3">
+    <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"
+            src={entry.image}
+        />
+    </div>
+</li>

src/lib/server/db/schema.ts

@@ -1,8 +1,9 @@
-import { integer, pgTable, json, timestamp } from "drizzle-orm/pg-core";
+import { text, integer, pgTable, json, timestamp } from "drizzle-orm/pg-core";
 
 export const entryTable = pgTable("entries", {
   id: integer().primaryKey().generatedAlwaysAsIdentity(),
   date: timestamp({ mode: 'date', withTimezone: true }).notNull().defaultNow(),
   location: json(),
   content: json(),
+  image: text()
 });

src/routes/+page.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
+    const {
+      data
+    } = $props()
+    
     import Calendar from '$lib/components/calendar.svelte'
     import Editor from '$lib/components/editor/index.svelte';
+    import EntrySummaryView from '$lib/components/entrySummaryView.svelte'
     
     let edit = $state(true)
 </script>
@@ -8,7 +13,11 @@
 <div class="flex flex-col md:flex-row  md:space-x-4 space-y-4 w-full">
         <div class="md:w-1/2">
             <Calendar />
-            <div id="entry-list" />
+            <ul class="mt-4">
+                {#each data.all as entry}
+                    <EntrySummaryView {entry} />
+                {/each}
+            </ul>
         </div>
         
         <div id="right" class="md:w-1/2">

src/routes/+page.ts

@@ -0,0 +1,8 @@
+export const load = async ({ fetch, params }) => {
+  const res = await fetch("/api/entry/all");
+  const allEntries = await res.json();
+
+  return {
+    all: allEntries,
+  };
+};