feat(contact): notifications system + action

app/components/Contact/BottomScreen/Bars.vue

@@ -1,20 +1,31 @@
 <script setup lang="ts">
+const props = defineProps<{
+  okLabel: "Copy" | "Open";
+}>();
+
 const store = useContactStore();
 
 const topBarImage = useTemplateRef("topBarImage");
 const bottomBarImage = useTemplateRef("bottomBarImage");
+const bottomBarOkImage = useTemplateRef("bottomBarOkImage");
 
 useRender((ctx) => {
-  if (!topBarImage.value || !bottomBarImage.value) return;
+  if (!topBarImage.value || !bottomBarImage.value || !bottomBarOkImage.value)
+    return;
 
   ctx.globalAlpha = store.isIntro ? store.intro.stage3Opacity : 1;
 
+  // top bar
   ctx.drawImage(topBarImage.value, 0, store.isIntro ? store.intro.topBarY : 0);
-  ctx.drawImage(
-    bottomBarImage.value,
-    0,
-    store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24,
-  );
+
+  // bottom bar
+  ctx.translate(0, store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24);
+  ctx.drawImage(bottomBarImage.value, 0, 0);
+
+  ctx.drawImage(bottomBarOkImage.value, 144, 4);
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#000000";
+  ctx.fillText(props.okLabel, 144 + 35, 4 + 13);
 });
 </script>
 
@@ -29,4 +40,9 @@ useRender((ctx) => {
     src="/assets/images/contact/bottom-screen/bottom-bar.png"
     hidden
   />
+  <img
+    ref="bottomBarOkImage"
+    src="/assets/images/contact/bottom-screen/ok-button.png"
+    hidden
+  />
 </template>