feat: implement the ui flow for swipe to send files

src/assets/index.scss

@@ -5,6 +5,7 @@
 body {
     font-family: "Lexend";
     caret-color: #7a5af8;
+    @apply text-primary;
 }
 
 * {

src/components/AppDialog.vue

@@ -12,11 +12,11 @@
                             <component
                                 :is="icon"
                                 v-if="icon"
-                                class="h-6 w-auto text-surface-brand"
+                                class="mr-2 h-6 w-auto text-surface-brand"
                             ></component>
 
                             <DialogTitle
-                                class="ml-2 font-space-grotesk text-heading-small font-bold capitalize"
+                                class="font-space-grotesk text-heading-small font-bold capitalize"
                             >
                                 {{ title }}
                             </DialogTitle>
@@ -34,7 +34,7 @@
                     </DialogDescription>
                 </header>
 
-                <section>
+                <section :class="$attrs.class">
                     <slot></slot>
                 </section>
             </DialogContent>

src/components/FileItem.vue

@@ -1,31 +1,31 @@
 <template>
     <article class="flex items-center justify-between gap-x4 px-x4 py-x2">
-        <div class="flex-grow">
+        <div class="max-w-10/12">
             <div class="flex items-center gap-x2">
                 <component
                     :is="icon"
                     class="h-x4 w-auto text-surface-brand"
                 ></component>
 
-                <div class="text-paragraph-small text-primary">
+                <div class="truncate text-paragraph-small text-primary">
                     {{ file.name }}
                 </div>
             </div>
 
             <ProgressRoot
                 v-if="state === 'transferring'"
                 :model-value="clampedProgress"
-                class="progress translate- mt-x2 h-x1 w-8/12 overflow-hidden rounded-full bg-surface-tertiary"
+                class="progress translate- mt-x2 h-x1 overflow-hidden rounded-full bg-surface-tertiary"
             >
                 <ProgressIndicator
                     class="indicator h-full w-full rounded-full bg-surface-brand"
                     :style="`transform: translateX(-${100 - clampedProgress}%)`"
                 />
             </ProgressRoot>
 
-            <div class="mt-x2 text-paragraph-x-small uppercase text-secondary">
+            <span class="mt-x2 text-paragraph-x-small uppercase text-secondary">
                 {{ filesizeString(file.size, "b") }}
-            </div>
+            </span>
         </div>
 
         <button

src/components/SwipeButton.vue

@@ -42,6 +42,7 @@ export interface SwipeButtonProps {
         | "lowercase"
         | "full-width"
         | "full-size-kana";
+    reversible?: boolean;
 }
 
 export type SwipeButtonEmits = {
@@ -72,6 +73,7 @@ export type SwipeButtonEmits = {
 const props = withDefaults(defineProps<SwipeButtonProps>(), {
     id: () => useId(),
     textTransform: "none",
+    reversible: true,
 });
 const emit = defineEmits<SwipeButtonEmits>();
 
@@ -108,7 +110,7 @@ function handleSliding(payload: number[] | undefined) {
         return;
     }
 
-    if (sliderValue.value[0] === MAX_SLIDE_VALUE) {
+    if (sliderValue.value[0] === MAX_SLIDE_VALUE && !props.reversible) {
         return;
     }
 
@@ -133,7 +135,7 @@ function watchThumbClick() {
             emit("end", normaliseValue(sliderValue.value[0]));
         }
 
-        if (sliderValue.value[0] === MAX_SLIDE_VALUE) {
+        if (sliderValue.value[0] === MAX_SLIDE_VALUE && !isThumbActive.value) {
             emit("swipe", normaliseValue(sliderValue.value[0]));
         }
     });

src/components/TransferCompleteDialog.vue

@@ -0,0 +1,72 @@
+<template>
+    <AppDialog
+        :open="open"
+        title="Transfer Complete! 🎉"
+        description="Yaay! You have successfully received files."
+        @close="emit('close')"
+        @update:open="emit('update:open', $event)"
+    >
+        <div class="px-x4">
+            <AppDivider class="mb-x3" />
+
+            <div class="flex justify-evenly gap-x2 pb-x6 pt-x3">
+                <div
+                    v-for="item in items"
+                    :key="item.label"
+                    class="flex flex-col justify-center uppercase"
+                >
+                    <h3
+                        class="text-center text-overline uppercase text-secondary"
+                    >
+                        {{ item.label }}
+                    </h3>
+                    <div
+                        class="mt-x1 text-center text-paragraph-small font-medium"
+                    >
+                        {{ item.value }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AppDialog>
+</template>
+
+<script setup lang="ts">
+import AppDialog, { type AppDialogEvents } from "#src/components/AppDialog.vue";
+import AppDivider from "#src/components/AppDivider.vue";
+
+export interface TransferCompleteDialogProps {
+    open: boolean;
+    files: number;
+    size: {
+        value: number;
+        unit: string;
+    };
+    speed: {
+        value: number;
+        unit: string;
+    };
+}
+
+export type TransferCompleteDialogEmits = AppDialogEvents;
+
+const props = defineProps<TransferCompleteDialogProps>();
+const emit = defineEmits<TransferCompleteDialogEmits>();
+
+const items = [
+    {
+        label: "files",
+        value: props.files,
+    },
+    {
+        label: "size",
+        value: `${props.size.value} ${props.size.unit}`,
+    },
+    {
+        label: "speed",
+        value: `${props.speed.value} ${props.speed.unit}`,
+    },
+];
+</script>
+
+<style scoped lang="scss"></style>

src/pages/FileTransferPage.vue

@@ -6,7 +6,7 @@
             >
                 <div class="uppercase">added files</div>
                 <div
-                    class="flex h-6 w-6 items-center justify-center rounded-full border border-primary"
+                    class="flex h-6 w-6 items-center justify-center rounded-full border border-primary font-space-grotesk text-paragraph-x-small font-bold"
                 >
                     {{ selectedFiles?.length }}
                 </div>
@@ -20,13 +20,24 @@
             />
         </section>
 
-        <FilePicker v-model="selectedFiles">
+        <FilePicker v-if="!selectedFiles?.length" v-model="selectedFiles">
             <AppButton> Pick file </AppButton>
         </FilePicker>
 
         <div class="fixed bottom-0 left-0 w-full px-x4 py-x3">
-            <SwipeButton label="Slide to Send File" class="w-full" />
+            <SwipeButton
+                label="Slide to Send File"
+                class="w-full"
+                @swipe="onSwipe"
+            />
         </div>
+
+        <TransferCompleteDialog
+            v-model:open="isTransferComplete"
+            :files="4"
+            :size="{ value: 32.4, unit: 'mb' }"
+            :speed="{ value: 68, unit: 'mb/s' }"
+        />
     </SpaceLayout>
 </template>
 
@@ -35,12 +46,19 @@ import AppButton from "#src/components/AppButton.vue";
 import FileItem from "#src/components/FileItem.vue";
 import FilePicker from "#src/components/FilePicker.vue";
 import SwipeButton from "#src/components/SwipeButton.vue";
+import TransferCompleteDialog from "#src/components/TransferCompleteDialog.vue";
 import SpaceLayout from "#src/layouts/SpaceLayout.vue";
 import { ref } from "vue";
 
 const selectedFiles = ref<FileList>();
 
-const slided = ref(false);
+const isTransferComplete = ref(false);
+
+function onSwipe() {
+    setTimeout(() => {
+        isTransferComplete.value = true;
+    }, 500);
+}
 </script>
 
 <style scoped lang="scss"></style>