Moved things around

frontend/vue-app/src/components/notification/NotificationView.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="notification-view">
+    <ItemList
+      :fetchUrl="`/api/pending-rewards`"
+      itemKey="rewards"
+      :itemFields="PENDING_REWARD_FIELDS"
+      :imageFields="['child_image_id', 'reward_image_id']"
+      @clicked="handleNotificationClick"
+      @loading-complete="(count) => (notificationListCountRef = count)"
+    >
+      <template #item="{ item }">
+        <div class="notification-centered">
+          <div class="child-info">
+            <img v-if="item.child_image_url" :src="item.child_image_url" alt="Child" />
+            <span>{{ item.child_name }}</span>
+          </div>
+          <span class="requested-text">requested</span>
+          <div class="reward-info">
+            <span>{{ item.reward_name }}</span>
+            <img v-if="item.reward_image_url" :src="item.reward_image_url" alt="Reward" />
+          </div>
+        </div>
+      </template>
+    </ItemList>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ItemList from '../shared/ItemList.vue'
+import type { PendingReward } from '@/common/models'
+import { PENDING_REWARD_FIELDS } from '@/common/models'
+
+const router = useRouter()
+
+const notificationListCountRef = ref(-1)
+
+function handleNotificationClick(item: PendingReward) {
+  router.push({ name: 'ParentView', params: { id: item.child_id } })
+}
+</script>
+
+<style scoped>
+.notification-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+.notification-centered {
+  display: flex;
+  justify-content: center;
+  margin-inline: auto;
+  align-items: center;
+}
+.child-info {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-weight: 600;
+  color: var(--dialog-child-name);
+}
+
+.reward-info {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-bottom: 0rem;
+  font-weight: 600;
+  color: var(--notification-reward-name);
+}
+
+.requested-text {
+  margin: 0 0.7rem;
+  font-weight: 500;
+  color: var(--dialog-message);
+  font-size: 1.05rem;
+  white-space: nowrap;
+}
+</style>