Rebrand

app/components/app-bar.vue

@@ -3,11 +3,17 @@ const { user, clear } = useUserSession();
 </script>
 
 <template>
-  <div class="w-full h-16 bg-black text-white flex">
+  <div class="w-full h-16 border-b-4 border-b-orange-500 flex">
     <UContainer class="max-w-2xl flex justify-between items-center">
-      <div class="font-bold text-xl">Joyful</div>
+      <div class="flex gap-3 items-center">
+        <NuxtImg src="/strivify.png" width="36" height="36" />
+        <div class="font-bold text-xl">Strivify</div>
+      </div>
       <UDropdownMenu :items="[{ label: 'Log out', onSelect: () => clear() }]">
-        <UAvatar :src="user!.avatar" />
+        <UAvatar
+          :src="user!.avatar"
+          class="border border-gray-200 cursor-pointer"
+        />
       </UDropdownMenu>
     </UContainer>
   </div>

app/components/app-footer.vue

@@ -4,8 +4,9 @@
   >
     <div class="text-center">
       Built with 💪 in Athens, Greece 🇬🇷 by Marios Antonoudiou.
-      <ULink class="underline">Send feedback</ULink> or
-      <ULink class="underline">buy me a coffee</ULink>.
+      <ULink class="underline" href="mailto:mariosant@sent.com"
+        >Send feedback</ULink
+      >.
     </div>
     <NuxtImg src="/images/powered-by-strava.svg" width="80px" />
   </UContainer>

app/components/register.vue

@@ -5,23 +5,23 @@ const { openInPopup } = useUserSession();
 </script>
 
 <template>
-  <UContainer class="flex justify-center w-full p-16">
-    <UCard class="w-md">
+  <UContainer
+    class="flex flex-col items-center gap-4 justify-center w-full p-16"
+  >
+    <NuxtImg src="/strivify.png" width="64" height="64" />
+    <UCard class="max-w-sm">
       <div class="flex flex-col gap-4 items-center justify-center text-center">
         <UIcon name="heroicons:user" class="size-16" />
-        <div class="font-bold text-xl">Joyful</div>
         <div>
-          Welcome to Joyful. Use the button below to sign in with your Strava
+          Welcome to Strivify. Use the button below to sign in with your Strava
           account.
         </div>
-        <div>
-          <div
-            aria-role="button"
-            @click="openInPopup('/auth/strava')"
-            class="cursor-pointer"
-          >
-            <NuxtImg src="/images/connect-with-strava.svg" />
-          </div>
+        <div
+          aria-role="button"
+          @click="openInPopup('/auth/strava')"
+          class="cursor-pointer"
+        >
+          <NuxtImg src="/images/connect-with-strava.svg" />
         </div>
       </div>
     </UCard>

app/pages/index.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import { isEqual } from "radash";
-
 const { user } = useUserSession();
 
-const toast = useToast();
-
 const stravaLink = computed(() => {
   return `https://www.strava.com/athletes/${toValue(user).id}`;
 });
@@ -19,7 +15,7 @@ const preferences = useState<FormData>("preferences", () => ({
   language: "English",
 }));
 
-const { data: preferencesData, status } = useLazyFetch("/api/preferences", {
+const { status, refresh } = useFetch("/api/preferences", {
   onResponse({ error, response }) {
     if (error) {
       return;
@@ -29,29 +25,28 @@ const { data: preferencesData, status } = useLazyFetch("/api/preferences", {
   },
 });
 
-const onSavePreferences = async () => {
-  await $fetch("/api/preferences", {
-    method: "PUT",
-    body: toValue(preferences),
-  });
+onMounted(() => {
+  saveOp.resume();
+});
 
-  toast.add({
-    title: "Saved",
-    description: "Preferences saved succesfully!",
-  });
-};
-
-const onResetPreferences = () => {
-  preferences.value = { ...preferencesData.value };
-};
+const saveOp = watchPausable(
+  preferences,
+  async () => {
+    await $fetch("/api/preferences", {
+      method: "PUT",
+      body: toValue(preferences),
+    });
+  },
+  { initialState: "paused", deep: true },
+);
 </script>
 
 <template>
   <UContainer class="max-w-2xl py-8 flex flex-col gap-4">
-    <div class="font-bold text-lg">Welcome to Joyful!</div>
+    <div class="font-bold text-lg">Welcome to Strivify!</div>
 
     <div>
-      Joyful automatically generates fun and engaging titles and descriptions
+      Strivify automatically generates fun and engaging titles and descriptions
       for your Strava activities, right when they are created. Customize your
       preferences below.
     </div>
@@ -92,17 +87,6 @@ const onResetPreferences = () => {
           </template>
         </CardField>
       </div>
-
-      <template #footer>
-        <div class="flex gap-4">
-          <UButton class="px-4" @click="onSavePreferences"
-            >Save preferences</UButton
-          >
-          <UButton variant="ghost" color="neutral" @click="onResetPreferences"
-            >Cancel</UButton
-          >
-        </div>
-      </template>
     </UCard>
   </UContainer>
 

nuxt.config.ts

@@ -4,9 +4,9 @@ export default defineNuxtConfig({
     "@nuxthub/core",
     "@nuxt/ui",
     "@nuxt/icon",
-    "@vee-validate/nuxt",
     "nuxt-auth-utils",
     "@nuxt/image",
+    "@vueuse/nuxt",
   ],
   devtools: { enabled: true },
   runtimeConfig: {
@@ -19,4 +19,37 @@ export default defineNuxtConfig({
     ai: true,
     database: true,
   },
+  app: {
+    head: {
+      link: [
+        {
+          rel: "icon",
+          href: "/favicon.ico",
+          type: "image/x-icon",
+          sizes: "any",
+        },
+        {
+          rel: "icon",
+          href: "/favicon-32x32.png",
+          type: "image/png",
+          sizes: "32x32",
+        },
+        {
+          rel: "icon",
+          href: "/favicon-16x16.png",
+          type: "image/png",
+          sizes: "16x16",
+        },
+        {
+          rel: "apple-touch-icon",
+          href: "/apple-touch-icon.png",
+          sizes: "180x180",
+        },
+        {
+          rel: "manifest",
+          href: "/site.webmanifest",
+        },
+      ],
+    },
+  },
 });

package-lock.json

@@ -13,6 +13,7 @@
         "@nuxt/ui": "3.0.2",
         "@nuxthub/core": "^0.8.23",
         "@vee-validate/nuxt": "^4.15.0",
+        "@vueuse/nuxt": "^13.0.0",
         "drizzle-orm": "^0.41.0",
         "nuxt": "^3.16.2",
         "nuxt-auth-utils": "0.5.18",
@@ -2937,6 +2938,25 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vueuse/nuxt": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-13.0.0.tgz",
+      "integrity": "sha512-tVb57PW0aUGMHwvzp4uH2mo8ut3D/3c7DA936E4ValhQq2VMZMCMxaKGz1nE8etFC7p18fVypyzpe8o6CBAYFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.16.0",
+        "@vueuse/core": "13.0.0",
+        "@vueuse/metadata": "13.0.0",
+        "local-pkg": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "nuxt": "^3.0.0 || ^4.0.0-0",
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/@vueuse/shared": {
       "version": "13.0.0",
       "license": "MIT",

package.json

@@ -17,6 +17,7 @@
     "@nuxt/ui": "3.0.2",
     "@nuxthub/core": "^0.8.23",
     "@vee-validate/nuxt": "^4.15.0",
+    "@vueuse/nuxt": "^13.0.0",
     "drizzle-orm": "^0.41.0",
     "nuxt": "^3.16.2",
     "nuxt-auth-utils": "0.5.18",

public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}