🦆

components/layout/header/Header.vue

@@ -1,16 +1,19 @@
 <template>
-  <header class="max-w-screen-lg m-auto my-4 py-3">
-    <div class="container mx-auto flex justify-between items-center">
-      <!-- Logo -->
-      <h1
-        class="text-2xl font-bold underline decoration-wavy decoration-from-font underline-offset-8"
-      >
-        <NuxtLink to="/">Buonapp</NuxtLink>
-      </h1>
+  <header
+    class="max-w-screen sticky top-0 z-10 bg-blend-darken">
+    <div class="max-w-screen-lg m-auto my-4 py-3">
+      <div class="mx-auto flex justify-between items-center">
+        <!-- Logo -->
+        <h1
+          class="text-2xl font-bold underline decoration-wavy decoration-from-font underline-offset-8"
+        >
+          <NuxtLink to="/">Buonapp</NuxtLink>
+        </h1>
 
-      <!-- Call to Action Buttons -->
-      <div>
-        <NuxtLink class="font-serif" to="/buon/giorno">Hi there! 👋</NuxtLink>
+        <!-- Call to Action Buttons -->
+        <div>
+          <NuxtLink class="font-serif" to="/buon/giorno">Hi there! 👋</NuxtLink>
+        </div>
       </div>
     </div>
   </header>

components/news/News.vue

@@ -1,7 +1,7 @@
 <template>
   <NuxtLink :disabled="!to" :to="to">
     <div
-      class="rounded-xl shadow-lg bg-white dark:bg-neutral-900 p-4 hover:shadow-xl transition duration-500 ease-in-out transform hover:-translate-y-1 cursor-pointer"
+      class="rounded-xl shadow-lg bg-white dark:bg-neutral-900 p-4 hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1 cursor-pointer"
     >
       <h2
         class="text-xl font-semibold text-gray-800 dark:text-gray-100 font-serif pb-2 hover:underline"

components/quicklook/QuickLookWrapper.vue

@@ -2,7 +2,7 @@
   <div
     :class="`${highlight ? 'bg-primary-400 dark:bg-primary-700 shadow-primary-800 font-serif font-bold' : 'bg-white-50 dark:bg-white-700'} p-3
     rounded-xl shadow-md dark:shadow-lg cursor-pointer text-nowrap h-full flex flex-col
-    items-center justify-center hover:shadow-inner hover:-translate-y-0.5 transition-all duration-500 ease-in-out`"
+    items-center justify-center hover:shadow-inner hover:-translate-y-0.5 transition-all duration-300 ease-in-out`"
     @click="to && goTo(to)"
   >
     <div

components/task/TaskContainer.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="container">
     <!-- Textarea and Buttons Container -->
-    <div v-show="nonDeletedTasks.length > 1" class="flex items-center gap-x-3">
+    <div class="flex items-center gap-x-3">
       <div class="bg-white-50 dark:bg-white-700 p-3 rounded-xl shadow-md dark:shadow-lg">
         <!-- Textarea -->
         <span class="font-serif italic">Sort by </span>
         <input
           v-model.trim="query"
-          :disabled="tasks.length === 0 || (downloadProgress > 0 && downloadProgress < 100)"
           placeholder="..."
           type="text"
-          class="font-serif italic text-gray-900 dark:text-gray-100 resize-none border-none focus:outline-none bg-transparent p-0 m-0"
+          class="font-serif italic text-gray-900 dark:text-gray-100
+          resize-none border-none focus:outline-none bg-transparent p-0 m-0"
           aria-label="Task Description"
           @keydown.enter.prevent="rankTodos"
         >
@@ -21,39 +21,24 @@
         />
       </div>
 
-      <!-- <div class="w-full flex flex-col gap-y-2">
-        <div class="w-full flex flex-col sm:flex-row items-start sm:items-center gap-2">
-          <div class="flex flex-col sm:flex-row gap-2">
-            <button
-              class="btn btn-primary bg-primary-500 text-white px-3 py-0.5 rounded-xl hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 text-nowrap">
-              Sort by date
-            </button>
-            <VSep />
-            <button
-              class="btn btn-primary bg-primary-500 text-white px-3 py-0.5 rounded-xl hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 text-nowrap"
-              @click="rankTodos">
-              Sort by title
-            </button>
-            <VSep />
-            <button
-              class="btn btn-primary bg-primary-500 text-white px-3 py-0.5 rounded-xl hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 text-nowrap"
-              @click="rankTodos">
-              Completed to bottom
-            </button>
-            <VSep />
-            <button
-              class="btn btn-primary bg-primary-500 text-white px-3 py-0.5 rounded-xl hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 text-nowrap"
-              @click="rankTodos">
-              Remove completed
-            </button>
-          </div>
-        </div>
-      </div> -->
-    </div>
+      <VSep v-if="isVerified" height="10" />
 
-    <HSep v-show="nonDeletedTasks.length > 1" height="10" />
+      <!-- Load from Server Button -->
+      <button
+        v-if="isVerified"
+        class="rounded-xl shadow-md dark:shadow-lg cursor-pointer text-nowrap p-3
+        h-full hover:shadow-inner hover:-translate-y-0.5 hover:underline transition-all duration-300 ease-in-out
+          flex items-center justify-center"
+        @click="loadTasks"
+      >
+        <span class="flex items-center justify-center size-8 -ml-2.5">
+          <UIcon name="codicon:cloud-download" />
+        </span>
+        Load from Server
+      </button>
+    </div>
 
-    <div class="mb-8">
+    <div class="my-8">
       <Task key="new-todo" v-model:title="title" :is-created="false" highlight @save="addTodo" />
       <Task
         v-for="(task, todoIndex) in tasks"
@@ -72,6 +57,9 @@
 import { useTaskStore } from '~/stores/task'
 import { storeToRefs } from 'pinia'
 
+const session = useSessionStore()
+const isVerified = computed(() => session.isVerified)
+
 const query = useState('query', () => '')
 const todoStore = useTaskStore()
 const { tasks } = storeToRefs(todoStore)
@@ -87,9 +75,7 @@ const addTodo = () => {
   title.value = ''
 }
 
-const deleteTodo = (todoId: string) => {
-  todoStore.remove(todoId)
-}
+const loadTasks = () => todoStore.getFromApi()
 
 const downloadProgress = useState('downloadProgress', () => 0)
 const rankTodos = () => {

components/thumbnail/ThumbnailHero.vue

@@ -1,14 +1,14 @@
 <template>
   <NuxtLink :disabled="!to" :to="to">
     <div
-      class="max-w-full flex flex-col-reverse md:flex-row justify-start gap-x-20 gap-y-5 transition duration-500 ease-in-out transform hover:-translate-y-1 cursor-pointer"
+      class="max-w-full flex flex-col-reverse md:flex-row justify-start gap-x-20 gap-y-5 transition duration-300 ease-in-out transform hover:-translate-y-1 cursor-pointer"
     >
       <div>
         <img
           :src="src"
           alt="Thumbnail"
           class="object-cover rounded-xl shadow-md overflow-hidden hover:shadow-xl"
-        />
+        >
       </div>
       <div>
         <h2 class="text-4xl font-medium font-serif hover:underline">{{ title }}</h2>

components/thumbnail/ThumbnailLink.vue

@@ -1,11 +1,11 @@
 <template>
   <NuxtLink :disabled="!to" :to="to">
     <div
-      class="max-w-md md:max-w-1xl rounded-xl shadow-md overflow-hidden hover:shadow-xl bg-white dark:bg-white-900 transition duration-500 ease-in-out transform hover:-translate-y-1 cursor-pointer"
+      class="max-w-md md:max-w-1xl rounded-xl shadow-md overflow-hidden hover:shadow-xl bg-white dark:bg-white-900 transition duration-300 ease-in-out transform hover:-translate-y-1 cursor-pointer"
     >
       <div class="md:flex">
         <div class="md:shrink-0">
-          <img :alt="alt" :src="src" class="h-48 w-full object-cover md:h-full md:w-48" />
+          <img :alt="alt" :src="src" class="h-48 w-full object-cover md:h-full md:w-48" >
         </div>
         <div class="p-8">
           <div

pages/buon/giorno.vue

@@ -9,7 +9,7 @@
             .
           </p>
 
-          <QuickLook v-if="buonappId && deviceId" title="Session Details" icon="🔍">
+          <QuickLook v-if="isVerified" title="Session Details" icon="🔍">
             <QuickLookWrapper title="Your Buonapp-ID">
               {{ buonappId }}
             </QuickLookWrapper>
@@ -32,31 +32,30 @@
       </template>
 
       <Subsection title="Create an Account or Login">
-        <p>
-          Start by creating an account or logging in with your
-          <BuonappId />
-          .
-        </p>
         <div class="flex flex-col gap-4 md:flex-row md:gap-8 items-center justify-center">
           <div
             class="bg-primary-500 dark:bg-primary-700 shadow-primary-800 p-3
           rounded-xl shadow-lg dark:shadow-lg inline-block"
           >
-            <label for="newUserId" class="text-gray-100 dark:text-gray-100 text-xs mb-1">
-              {{ buonappId ? 'Your' : 'Optional' }} Buonapp-ID
-            </label>
-            <input
-              v-model.trim="newUserId"
-              :disabled="success"
-              class="w-full dark:text-gray-100 resize-none border-none focus:outline-none bg-transparent p-0 m-0 text-gray-900 placeholder-gray-900"
-              :class="{ 'font-serif italic': newUserId?.length !== 0}"
-              placeholder="Enter your Buonapp-ID"
-              type="text"
-            >
+            <span v-if="isVerified" class="inline-block bg-green-600 dark:bg-green-800 text-white px-2 py-0.5 my-0.5 rounded-md text-xs">
+              {{ newUserId ? 'Logged in' : 'Account created' }} successfully!
+            </span>
+            <div>
+
+              <label for="newUserId" class="text-gray-100 dark:text-gray-100 text-xs mb-1">
+                {{ buonappId ? 'Your' : 'Optional' }} Buonapp-ID
+              </label>
+              <input
+                v-model.trim="newUserId"
+                class="w-full dark:text-gray-100 resize-none border-none focus:outline-none bg-transparent p-0 m-0 text-gray-900 placeholder-gray-900"
+                :class="{ 'font-serif italic': newUserId?.length !== 0}"
+                placeholder="Enter your Buonapp-ID"
+                type="text"
+              >
+            </div>
           </div>
 
           <button
-            v-if="(!requestSent && !success) || !success"
             class="btn border border-primary-500 dark:border-primary-700 px-4 py-2 rounded-xl
           focus:outline-none focus:ring-2 focus:ring-primary-500 text-nowrap inline-block hover:border-secondary-600
           hover:shadow-xl dark:hover:border-secondary-700 dark:hover:shadow-inner transition-all duration-300
@@ -72,12 +71,6 @@
               {{ success ? 'Success!' : 'Could not create account. Try again' }}
             </template>
           </button>
-          <div v-else class="flex justify-start">
-            <p
-              class="text-green-600 dark:text-green-400 font-medium border border-green-600 rounded-xl dark:border-green-400 p-2">
-              {{ newUserId ? 'Logged in' : 'Account created' }} successfully!
-            </p>
-          </div>
         </div>
       </Subsection>
     </Section>

stores/task.ts

@@ -73,6 +73,10 @@ export const useTaskStore = defineStore('task', () => {
       })
   }
 
+  const getFromApi = async () => {
+    apiCall('fetch')
+  }
+
   const add = (title: string, dueDate: Date, priority: 'low' | 'medium' | 'high' = 'medium') => {
     const createdDate = new Date()
     const randomId = Math.random().toString(36).substring(7)
@@ -191,9 +195,8 @@ export const useTaskStore = defineStore('task', () => {
     tasks, nonDeletedTasks,
     rankBy,
     add,
+    getFromApi,
     addFromTitle,
-    complete,
-    remove,
     sort
   }
 })

tailwind.config.ts

@@ -0,0 +1,38 @@
+import type { Config } from 'tailwindcss'
+import colors from 'tailwindcss/colors'
+
+export default <Partial<Config>>{
+  content: [
+    "./components/**/*.{js,vue,ts}",
+    "./layouts/**/*.vue",
+    "./pages/**/*.vue",
+    "./plugins/**/*.{js,ts}",
+    "./app.vue",
+    "./error.vue",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'selago': {
+          '50': '#f9f7fb',
+          '100': '#f3f0f7',
+          '200': '#e5e1ee',
+          '300': '#d6cfe3',
+          '400': '#bfb2d3',
+          '500': '#a693bf',
+          '600': '#947aad',
+          '700': '#82679a',
+          '800': '#6d5681',
+          '900': '#5a486a',
+          '950': '#3a2e47',
+        },
+        black: colors.black,
+        white: colors.white,
+        gray: colors.gray,
+        emerald: colors.emerald,
+        indigo: colors.indigo,
+        yellow: colors.yellow,
+      }
+    }
+  }
+}