checkpoint 6

identity-web/package.json

@@ -35,6 +35,9 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@fortawesome/fontawesome-svg-core": "^6.5.2",
+		"@fortawesome/free-solid-svg-icons": "^6.5.2",
+		"@fortawesome/svelte-fontawesome": "^0.2.2",
 		"felte": "^1.2.14"
 	}
 }

identity-web/src/lib/entry.ts

@@ -0,0 +1,5 @@
+export type Entry = SongEntry | AlbumEntry | EventEntry | MemoryEntry | FeelingEntry | EnvironmentEntry | DateEntry;
+
+export type SongEntry = {
+    kind: "song"
+}

identity-web/src/routes/+page.svelte

@@ -1,11 +1 @@
-<script>
+<h1>Landing</h1>
-    import {login} from '$lib/api.ts'
-    const handler = async () => {
-        console.log(await login({
-            email: 'mock@example.com',
-            password: 'mock_password'
-        }))
-    }
-</script>
-
-<button on:click={handler}>Test</button>

identity-web/src/routes/dashboard/+page.svelte

@@ -1,5 +1,9 @@
 <script>
     import { account } from "$lib/stores";
+	import ExternalLink from "./ExternalLink.svelte";
+	import FeelingPill from "./FeelingPill.svelte";
+	import Memory from "./Memory.svelte";
+	import MemoryDescription from "./MemoryDescription.svelte";
 </script>
 
 <div class="mt-3.5 justify-center flex ">
@@ -9,8 +13,8 @@
             <div class="p-6 border border-gray-200 rounded-lg shadow w-full">
                 <h2 class="text-xl">Latest activity</h2>
                 <div class="pt-2">
-                    <p>New song: <span class="font-bold">Takin' what's not yours</span></p>
+                    <p>New song: <span class="font-bold">TV Girl &dash; Taking what's not yours</span></p>
-                    <p>New song: <span class="font-bold">Lovers Rock</span></p>
+                    <p>New album: <span class="font-bold">femtanyl &dash; CHASER</span></p>
                     <p>New memory: <a href="#memory" class="font-bold text-violet-600 hover:underline">§ At the sunflower field with Ms. Violet</a></p>
                 </div>
             </div>
@@ -18,10 +22,58 @@
                 <h2 class="text-xl">Memories from the past</h2>
                 <div class="pt-2">
                     <p><time class="pr-2.5 font-mono" datetime="2024-04-13">13/04/2024</time> <a href="#memory" class="font-bold text-violet-600 hover:underline">§ 2024 Birthday</a></p>
-                    <p><time class="pr-2.5 font-mono" datetime="2024-04-01">01/04/2024</time> New song: <span class="font-bold">KMAG YOYO</span></p>
+                    <p><time class="pr-2.5 font-mono" datetime="2024-04-01">01/04/2024</time> New song: <span class="font-bold">Hayes Carll &dash; KMAG YOYO</span></p>
                     <p><time class="pr-2.5 font-mono" datetime="2024-03-20">20/03/2024</time> <a href="#memory" class="font-bold text-violet-600 hover:underline">§ A new era</a></p>
                 </div>
             </div>
         </div>
+
+        <div class="w-full flex items-baseline justify-between">
+            <h2 class="text-2xl mt-6">Memories</h2>
+            <a class="rounded-lg bg-violet-700 text-white px-3 py-2 text-center hover:bg-violet-800 focus:ring-4 focus:ring-violet-300" href="/memory/new">+ Add a memory</a>
+        </div>
+        <div class="mt-3.5 flex flex-col gap-1">
+            <Memory kind="song" date={new Date("2024-04-13")}>
+                <ExternalLink href="https://open.spotify.com/track/53mChDyESfwn9Dz8poHRf6">TV Girl &dash; Taking what's not yours</ExternalLink>
+                <div slot="extended">
+                    <FeelingPill feeling="active"/>
+                    <FeelingPill feeling="happy"/>
+
+                    <MemoryDescription>
+                        Taking what's not yours is a song that I really like because it talks of things that I find interesting.
+                    </MemoryDescription>
+                </div>
+            </Memory>
+            <Memory kind="album" date={new Date("2024-04-13")}>
+                <ExternalLink href="https://open.spotify.com/album/1d2PspdXmwrBEcOtquCvzT">femtanyl &dash; CHASER</ExternalLink>
+            </Memory>
+            <Memory kind="event" title="SalmorejoTech 2024" date={new Date("2024-04-26")}>
+                <div slot="extended">
+                    <FeelingPill feeling="excited"/>
+
+                    <MemoryDescription>SalmorejoTech is a great tech-event. I met some people and everything went great! :)</MemoryDescription>
+                </div>
+            </Memory>
+            <Memory kind="memory" title="At the sunflower field with Ms. Violet" date={new Date("2024-06-26")}>
+                <MemoryDescription slot="extended">Ms. Violet is my friend, she is a great friend. We spent a good time at the sunflower field. I am lucky to have a friend like her.</MemoryDescription>
+            </Memory>
+            <Memory kind="feeling" date={new Date("2024-01-01")}>
+                <FeelingPill feeling="excited"/>
+                <MemoryDescription slot="extended">New Year, New me! I'm really excited about what's going to happen this year, lots of changes. Changes may be scary, but they usually are for good!</MemoryDescription>
+            </Memory>
+            <Memory kind="environment" title="The park" date={new Date("2024-04-28")}>
+                <div slot="extended">
+                    <FeelingPill feeling="happy"/>
+                    <FeelingPill feeling="relaxed"/>
+                    <MemoryDescription>The park is a really chill place where I can go and relax for a bit before going to work.</MemoryDescription>
+                </div>
+            </Memory>
+            <Memory kind="date" date={new Date("2024-04-28")}>
+                <div slot="extended">
+                    <FeelingPill feeling="happy"/>
+                    <MemoryDescription>This day has been a great day! I've talked with my friends.</MemoryDescription>
+                </div>
+            </Memory>
+        </div>
     </div>
 </div>

identity-web/src/routes/dashboard/ExternalLink.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+	import { FontAwesomeIcon } from "@fortawesome/svelte-fontawesome";
+
+    export let href: string
+</script>
+
+<a class="font-bold text-violet-600 text-left flex gap-2 items-center hover:underline" target="_blank" href={href}>
+    <FontAwesomeIcon icon={faArrowUpRightFromSquare}/>
+    <slot/>
+</a>

identity-web/src/routes/dashboard/FeelingPill.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    // TODO: Design a more _formal_ color system for emotions (>strong = >weight, etc).
+    const DEFAULT_COLORS: {[index: string]: string[]} = {
+        "__DEFAULT__": ["#0a0a0a", "#fafafa"],
+        "afraid": ["#fda4af", "#0a0a0a"],
+        "angry": ["#dc2626", "#fafafa"],
+        "bad": ["#450a0a", "#fafafa"],
+        "bored": ["#d4d4d8", "#0a0a0a"],
+        "confused": ["#fef3c7", "#0a0a0a"],
+        "excited": ["#f97316", "#fafafa"],
+        "fine": ["#bef264", "#0a0a0a"],
+        "happy": ["#facc15", "#0a0a0a"],
+        "hurt": ["#ff69b4", "#0a0a0a"],
+        "in love": ["#ff1493", "#fafafa"],
+        "mad": ["#450a0a", "#fafafa"],
+        "nervous": ["#7e22ce", "#fafafa"],
+        "okay": ["#86efac", "#0a0a0a"],
+        "sad": ["#0284c7", "#fafafa"],
+        "scared": ["#334155", "#fafafa"],
+        "shy": ["#cbd5e1", "#0a0a0a"],
+        "sleepy": ["#7dd3fc", "#0a0a0a"],
+        "active": ["#059669", "#fafafa"],
+        "surprised": ["#fbbf24", "#0a0a0a"],
+        "tired": ["#92400e", "#fafafa"],
+        "upset": ["#b91c1c", "#fafafa"],
+        "worried": ["#d4d4d8", "#0a0a0a"],
+        "relaxed": ["#86efac", "#0a0a0a"],
+    };
+
+    export let feeling: "relaxed" | "afraid" | "angry" | "bad" | "bored" | "confused" | "excited" | "fine" | "happy" | "hurt" | "in love" | "mad" | "nervous" | "okay" | "sad" | "scared" | "shy" | "sleepy" | "active" | "surprised" | "tired" | "upset" | "worried" | string
+    export let bgColor: string = (DEFAULT_COLORS[feeling] || DEFAULT_COLORS["__DEFAULT__"])[0]
+    export let textColor: string = (DEFAULT_COLORS[feeling] || DEFAULT_COLORS["__DEFAULT__"])[1]
+</script>
+
+<div class="inline-block py-0.5 px-1.5 rounded-full text-sm font-semibold my-0.5 w-20 text-center" style={`background-color: ${bgColor}`}>
+    <span style={`color: ${textColor}`}>{feeling.charAt(0).toUpperCase() + feeling.slice(1)}</span>
+</div>

identity-web/src/routes/dashboard/Memory.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import MemoryKind from "./MemoryKind.svelte";
+
+    export let date: Date;
+    export let kind: "song" | "album" | "event" | "feeling" | "environment" | "date" | "memory";
+    export let title: string | null = kind === "date" ? date.toLocaleDateString() : null;
+
+    export let isExtended = false;
+
+    $: cardClass = () => {
+        let cardClass = "border border-gray-200 rounded-lg shadow w-full flex p-3.5"
+
+        if (isExtended) {
+            cardClass += " flex-col gap-1.5"
+        } else {
+            if (["event", "environment", "memory"].includes(kind)) {
+                cardClass += " flex-col"
+            } else {
+                cardClass += " gap-4 items-center"
+            }
+        }
+
+        console.log(cardClass)
+        return cardClass
+    };
+</script>
+
+<div class={cardClass()}>
+    <button on:click={() => isExtended = !isExtended}>
+        <div class="flex items-center gap-2.5">
+            <MemoryKind kind={kind}/>
+            {#if title != null && isExtended}
+                <time datetime={date.toISOString()}>{date.toLocaleDateString()}</time>
+            {:else if title != null}
+                <h2 class="text-xl text-left font-semibold">{title}</h2>
+            {:else if isExtended}
+                <time datetime={date.toISOString()}>{date.toLocaleDateString()}</time>
+            {/if}
+        </div>
+    
+        {#if title != null && isExtended}
+            <h2 class="text-xl text-left font-semibold">{title}</h2>
+        {/if}
+    </button>
+
+    <slot/>
+
+    {#if isExtended}
+        <slot name="extended"/>
+    {/if}
+</div>

identity-web/src/routes/dashboard/MemoryDescription.svelte

@@ -0,0 +1,3 @@
+<p class="w-full text-left">
+    <slot/>
+</p>

identity-web/src/routes/dashboard/MemoryKind.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { faCalendarDays, faChampagneGlasses, faHeartPulse, faLandmarkDome, faMusic, faNewspaper, faRecordVinyl, faSeedling } from "@fortawesome/free-solid-svg-icons";
+	import { FontAwesomeIcon } from "@fortawesome/svelte-fontawesome";
+
+    export let kind: "song" | "album" | "event" | "feeling" | "environment" | "date" | "memory"
+</script>
+
+{#if kind === "song"}
+    <span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faMusic}/> Song</span>
+{:else if kind === "album"}
+    <span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faRecordVinyl}/> Album</span>
+{:else if kind === "event"}
+    <span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faChampagneGlasses}/> Event</span>
+{:else if kind === "memory"}
+    <span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faNewspaper}/> Memory</span>
+{:else if kind === "feeling"}
+    <span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faHeartPulse}/> Feeling</span>
+{:else if kind === "environment"}
+    <span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faSeedling}/> Environment</span>
+{:else if kind === "date"}
+<span class="text-xl flex gap-2.5 items-center"><FontAwesomeIcon icon={faCalendarDays}/> Date</span>
+{:else}
+    <span>Unknown value. Try loading the page again.</span>
+{/if}

identity-web/yarn.lock

@@ -259,6 +259,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fortawesome/fontawesome-common-types@npm:6.5.2":
+  version: 6.5.2
+  resolution: "@fortawesome/fontawesome-common-types@npm:6.5.2"
+  checksum: 10c0/12104e93a0056ad1077f7350826f52aa26465bb1d6b4ce75dab0307072a3871301ec750c3a34d89d05e7338c9b446fa2793150cf58a5167217021943ef877d77
+  languageName: node
+  linkType: hard
+
+"@fortawesome/fontawesome-svg-core@npm:^6.5.2":
+  version: 6.5.2
+  resolution: "@fortawesome/fontawesome-svg-core@npm:6.5.2"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": "npm:6.5.2"
+  checksum: 10c0/91695dd375623988d16e6f0dc69d20350ef3fa3296fe40aa08877aae7beaf64378134656a2227419fe648dcd27a81c03fe1fd9a6c87956d863164b0380ba77d0
+  languageName: node
+  linkType: hard
+
+"@fortawesome/free-solid-svg-icons@npm:^6.5.2":
+  version: 6.5.2
+  resolution: "@fortawesome/free-solid-svg-icons@npm:6.5.2"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": "npm:6.5.2"
+  checksum: 10c0/af2778b91ba4bf7b61ae0cdf0d39d75b6906a82bfdf8e977881d987b86a32ce157297853b7892aa3b609076b5542ea1e1e78b520d57b6f50677a2a748cf3434c
+  languageName: node
+  linkType: hard
+
+"@fortawesome/svelte-fontawesome@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "@fortawesome/svelte-fontawesome@npm:0.2.2"
+  peerDependencies:
+    "@fortawesome/fontawesome-svg-core": ~1 || ~6
+    svelte: ">=3.x"
+  checksum: 10c0/b33c061a0e2063ee31035bd759fb8818fc67d2daea3d2a51c2d5b1cad081baf828025f80d0da95a30e56b1156a098b25ffc45cc4edab1310c4a050a22e3c4f72
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/module-importer@npm:^1.0.1":
   version: 1.0.1
   resolution: "@humanwhocodes/module-importer@npm:1.0.1"
@@ -1863,6 +1898,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "identity-web@workspace:."
   dependencies:
+    "@fortawesome/fontawesome-svg-core": "npm:^6.5.2"
+    "@fortawesome/free-solid-svg-icons": "npm:^6.5.2"
+    "@fortawesome/svelte-fontawesome": "npm:^0.2.2"
     "@sveltejs/adapter-auto": "npm:^3.0.0"
     "@sveltejs/kit": "npm:^2.0.0"
     "@sveltejs/vite-plugin-svelte": "npm:^3.0.0"