Clicking on stickers on the profile page takes you to stickerview.

Home goes to profile page for now.

Create a menu item for an unclaimed sticker.

Only fetch an item if we don't have it yet.

src/components/Navigation.vue

@@ -5,7 +5,7 @@
   <nav>
     <RouterLink
       class="nav-item"
-      to="/">
+      to="/profile">
       <i class="pi pi-home nav-icon" />
       <span>Home</span>
     </RouterLink>

src/components/TopBar.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRouter } from "vue-router";
+import { useRoute } from 'vue-router';
+
 import { useUserStore } from "@/stores/userStore";
 import { userActions } from "@/stores/userActionsStore";
-import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
 
 import Button from 'primevue/button';
 import Menu from "primevue/menu";
 
+
 const route = useRoute();
+const router = useRouter();
 const page_title = ref();
 const userStore = useUserStore();
 
@@ -25,13 +29,14 @@ const logout = () => {
 
 const menu = ref();
 const localActions = [{
+  command: () => { router.push('/88ae126f-b19a-4287-abe0-a8f5ac763cb7'); },
+  icon: 'pi pi-tag',
+  label: 'Claim 88ae',
+  needsAuth: true,
+}, {
   icon: 'pi pi-question',
   label: 'About',
   needsAuth: false,
-}, {
-  icon: 'pi pi-question',
-  label: 'AboutFoo',
-  needsAuth: true,
 }];
 const allActions = [...userActions, ...localActions];
 allActions.map((item) => {

src/stores/stickerStore.ts

@@ -5,6 +5,9 @@ import { useUserStore } from "@/stores/userStore";
 export const useStickerStore = defineStore('sticker', {
   actions: {
     async fetch(uuid: string) {
+      if (this.sticker) {
+        return;
+      }
       // TODO: Check if we have it already and if it's stale.
       const response = await fetch(
         `/api/sticker/${uuid}`,

src/views/LoginView.vue

@@ -19,7 +19,8 @@ function handleLogin({ valid }) {
     return;
   }
   userStore.login(username.value, username.value).then((data) => {
-    router.push('/88ae126f-b19a-4287-abe0-a8f5ac763cb7');
+    // TODO: Go back to original page.
+    router.push('/');
   });
 }
 

src/views/ProfileView.vue

@@ -13,19 +13,6 @@ import { useUserStore } from "@/stores/userStore";
 
 const userStore = useUserStore();
 
-const route = useRoute();
-
-const uuid = ref<string>(route.params.uuid as string);
-
-const first = computed(() => {
-  const parts = uuid.value.split('-')
-  return [parts[0], parts[1], parts[2]].join('-');
-})
-const second = computed(() => {
-  const parts = uuid.value.split('-')
-  return [parts[3], parts[4]].join('-');
-})
-
 const meterValue = ref([
   { label: 'Apps', color: '#34d399', value: 20 },
   { label: 'Messages', color: '#fbbf24', value: 10 },
@@ -60,19 +47,18 @@ const events = [{
       <div class="flex flex-row content-end">
         <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
         <div>
-          <div class="font-mono text-sn tracking-wider col">
-            {{ first }}
-          </div>
-          <div class="font-mono text-sn tracking-wider col">
-            {{ second }}
-          </div>
+          {{ userStore.user.name }}
         </div>
       </div>
     </Panel>
-    <Panel class="bg-white" header="Stickers">
-      <Button as="router-link" to="/sticker" v-if="!userStore.isAnonymous">New sticker</Button>
-      <div id="StickerWrapper">
-        <Sticker color="#000088" layout="layout1" message1="I support M4A" />
+    <Panel header="My Stickers">
+      <div class="stickers">
+        <div class="stickerWrapper" v-for="sticker in userStore.user.stickers">
+          <RouterLink :to="{ name: 'sticker', params: { uuid: sticker.uuid }}">
+            <Sticker v-bind="sticker" />
+          </RouterLink>
+        </div>
+        <Button as="router-link" to="/sticker" v-if="!userStore.isAnonymous">New sticker</Button>
       </div>
     </Panel>
     <Panel header="Metrics">
@@ -127,14 +113,19 @@ const events = [{
 </template>
 
 <style scoped>
-#StickerWrapper {
-  background-color: #F2F2F2;
-  padding: 5px;
-  width: 300px;
-}
 .profilePage {
   @apply p-2 gap-2;
   display: flex;
   flex-direction: column;
 }
+.stickers {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.stickerWrapper {
+  background-color: #F2F2F2;
+  padding: 10px;
+  width: 300px;
+}
 </style>