Update

src/app.html

@@ -5,7 +5,7 @@
 		<meta name="description" content="Svelte demo app" />
 		<link rel="icon" href="%svelte.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
+    <script src="https://kit.fontawesome.com/c1c6b3e09d.js" crossorigin="anonymous"></script>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

src/lib/SocialButtons.svelte

@@ -5,7 +5,7 @@
 	import { page } from '$app/stores';
 
   const socials = [
-    { link: 'twitter', ico: 'fab fa-twitter', name: 'Twitter' },
+    { link: 'twitter', ico: 'fa-brands fa-twitter', name: 'Twitter' },
     { link: 'instagram', ico: 'fab fa-instagram', name: 'Instagram' },
     { link: 'fbevent', ico: 'fab fa-facebook', name: 'Facebook' },
     { link: 'discord', ico: 'fab fa-discord', name: 'Discord' },

src/lib/header/Header.svelte

@@ -14,9 +14,9 @@
           <a href="/"><img src="/img/logo-white.svg" class="w-26" alt="UTXO.22" /></a>
         </div>
         <div class="sm:flex sm:space-x-10 uppercase text-sm font-bold text-white">
-          <a sveltekit:prefetch href="/" class="m-auto hover:text-red-500" class:text-blue-400={$page.url.pathname === '/'}>O konferenci</a>
+          <a sveltekit:prefetch href="/" class="m-auto hover:text-[#E16A61]" class:text-blue-400={$page.url.pathname === '/'}>O konferenci</a>
-          <a sveltekit:prefetch href="/program" class="m-auto hover:text-red-500"  class:text-blue-400={$page.url.pathname === '/program'}>Program</a>
+          <a sveltekit:prefetch href="/program" class="m-auto hover:text-[#E16A61]"  class:text-blue-400={$page.url.pathname === '/program'}>Program</a>
-          <a sveltekit:prefetch href="/vstupenky" class="border-solid border border-red-500 rounded-full py-2 px-8 {$page.url.pathname === '/vstupenky' ? 'border-0 bg-utxo-gradient' : 'hover:border-0 hover:my-px hover:bg-utxo-gradient' }">Vstupenky</a>
+          <a sveltekit:prefetch href="/vstupenky" class="border-solid border border-[#E16A61] rounded-full py-2 px-8 {$page.url.pathname === '/vstupenky' ? 'border-0 bg-utxo-gradient' : 'hover:border-0 hover:my-px hover:bg-utxo-gradient' }">Vstupenky</a>
         </div>
         <SocialButtons />
       </div>

src/lib/stores.js

@@ -8,3 +8,7 @@ export const orderTicketForm = writable({
   tickets: [],
   paymentMethod: 'card',
 });
+
+export const userData = writable({
+  favoriteEvents: []
+});

src/routes/program.svelte

@@ -3,10 +3,15 @@
 </script>
 
 <script>
-  import { bundle } from '$lib/stores.js';
+  import { bundle, userData } from '$lib/stores.js';
   import EventTypeLabel from '$lib/EventTypeLabel.svelte';
   import Avatar from '$lib/Avatar.svelte';
 
+  const userDataLS = localStorage.getItem('userData')
+  if (userDataLS) {
+    userData.set(JSON.parse(userDataLS))
+  }
+
   function speakersMap (arr) {
     if (!arr) return;
     return arr.map(sId => {
@@ -23,6 +28,22 @@
     return $bundle.spec.events.filter(i => i.parent === e.id)
   }
 
+  function handleFavorite (el) {
+    const t = el.target.getAttribute('utxo-event-id')
+    userData.update(data => {
+      const fe = data.favoriteEvents
+      let output = null
+      if (fe.includes(t)) {
+        output = Object.assign($userData, { favoriteEvents: fe.filter(f => f !== t) } )
+      } else {
+        fe.push(t)
+        output = Object.assign($userData, { favoriteEvents: fe })
+      }
+      localStorage.setItem('userData', JSON.stringify(output))
+      return output
+    })
+  }
+
 </script>
 
 <svelte:head>
@@ -36,7 +57,8 @@
 
   <div class="mt-6">
     {#each $bundle.spec.events.filter(e => !e.parent) as e}
-      <div class="mb-4 border px-3 py-2 rounded-md shadow">
+      <div class="transition-all mb-4 border px-3 py-2 rounded-md shadow {$userData.favoriteEvents.includes(e.id) ? 'bg-yellow-100' : '' }">
+        <div class="float-right"><i class="fa-star {$userData.favoriteEvents.includes(e.id) ? 'fa-solid' : 'fa-regular'} cursor-pointer" utxo-event-id="{e.id}" on:click={handleFavorite}></i></div>
         <div class="text-lg font-semibold">{e.name}</div>
         {#if e.speakers && e.speakers.length > 0}
           <div class="mt-1 mb-2 flex flex-wrap gap-2">