UX: handle case lots of files at once. Before you were unable to press

the download on mobile

Author: 0xLaurens

frontend/src/components/FileReceiver.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import {formatFileSize} from "../util/filesize.ts";
     import {
-        CircleXIcon, DownloadIcon,
+        ChevronDownIcon, ChevronUpIcon, CircleXIcon, DownloadIcon,
         FileAudioIcon,
         FileIcon,
         FileVideoIcon, FrownIcon, HeartIcon,
@@ -20,6 +20,8 @@
     import {truncateFileName} from "../util/truncate.ts";
 
     let manager: WebsocketManager;
+    let showAllFiles = $state(false);
+    const previewFileLimit = 8;
 
     interface Props {
         RoomId: undefined | string;
@@ -47,8 +49,8 @@
 
 </script>
 
-<div class="card h-full min-h-svh sm:min-h-0 bg-base-100 w-screen sm:w-full sm:h-auto max-w-lg gap-3 space-y-6">
-    <div class="card-body flex-col justify-between h-full md:h-auto gap-16">
+<div class="card relative h-[100dvh] bg-base-100 w-screen sm:w-full sm:max-h-[calc(100dvh-2rem)] max-w-lg {$currentFileOffer?.files.length > previewFileLimit ? 'sm:h-[min(100dvh-2rem,40rem)]' : 'sm:h-auto'}">
+    <div class="card-body flex h-full min-h-0 flex-col gap-6">
         <div class="flex items-center space-x-4">
             <div class="bg-gray-100 p-2 rounded-full">
                 <ShareIcon class="h-6 w-6"/>
@@ -57,31 +59,32 @@
                 <p class="text-2xl sm:text-3xl font-bold modal-title">File transfer</p>
             </div>
         </div>
-        {#if $downloadFinished}
-            <div>
+        <div class="min-h-0 flex-1 overflow-y-auto pb-28 pr-1">
+            {#if $downloadFinished}
+                <div>
                 <p class="text-xl">Download finished!</p>
                 <p class="text-gray-500">Please consider donating! It helps the platform running ❤️</p>
 
             </div>
-        {:else if $downloadCancelled}
-            <div>
+            {:else if $downloadCancelled}
+                <div>
                 <CircleXIcon class="w-32 h-32 mx-auto"/>
                 <p class="text-xl">Download cancelled</p>
                 <p class="text-gray-500">The download has been cancelled by the sender. <a class="link link-primary"
                                                                                            href="/">Return to
                     homepage</a></p>
             </div>
-        {:else if $isConnected === false || $checkedRoomCode === false}
-            <div>
+            {:else if $isConnected === false || $checkedRoomCode === false}
+                <div>
                 <div class="flex flex-row gap-3">
                     <Loader2Icon class="animate-spin"/>
                     <p class="text-base-content/70 text-lg">Setting up the connection</p>
                 </div>
             </div>
-        {:else if $currentFileOffer}
-            <div>
-                <ul class="space-y-2">
-                    {#each $currentFileOffer.files as file}
+            {:else if $currentFileOffer}
+                <div>
+                <ul id="offered-files" class="space-y-2">
+                    {#each $currentFileOffer.files.slice(0, showAllFiles ? undefined : previewFileLimit) as file}
                         <li class="flex flex-col py-2">
                             <div class="flex items-center justify-between">
                                 <div class="flex items-center space-x-3">
@@ -104,26 +107,41 @@
                         </li>
                     {/each}
                 </ul>
-                <div class="mt-4">
-                    <span class="text-gray-500">Total size: {formatFileSize($currentFileOffer.files.reduce((acc, file) => acc + file.size, 0))}</span>
-                </div>
             </div>
-        {:else if ($roomExists === false && $checkedRoomCode && $isConnected) || $room?.user_count === 1}
-            <div>
+            {:else if ($roomExists === false && $checkedRoomCode && $isConnected) || $room?.user_count === 1}
+                <div>
                 <FrownIcon class="w-32 h-32 mx-auto"/>
                 <p class="text-xl">Invalid link</p>
                 <p class="text-gray-500">The link you received is incorrect. Please try again. <a
                         class="link link-primary" href="/">Return to homepage</a></p>
             </div>
-        {:else}
-            <div>
+            {:else}
+                <div>
                 <div class="flex flex-row gap-3">
                     <Loader2Icon class="animate-spin"/>
                     <p class="text-base-content/70 text-lg">Waiting for file(s)...</p>
                 </div>
             </div>
+            {/if}
+        </div>
+        {#if $currentFileOffer && $currentFileOffer.files.length > previewFileLimit}
+            <button class="btn btn-neutral btn-sm absolute bottom-40 left-1/2 z-10 -translate-x-1/2 shadow-lg" aria-controls="offered-files" aria-expanded={showAllFiles} onclick={() => showAllFiles = !showAllFiles}>
+                {#if showAllFiles}
+                    <ChevronUpIcon class="h-4 w-4"/>
+                    Show less
+                {:else}
+                    <ChevronDownIcon class="h-4 w-4"/>
+                    Show {$currentFileOffer.files.length - previewFileLimit} more file{$currentFileOffer.files.length - previewFileLimit === 1 ? "" : "s"}
+                {/if}
+            </button>
+        {/if}
+        {#if $currentFileOffer}
+            <div class="flex shrink-0 items-center justify-between rounded-box bg-base-200 px-4 py-3 text-sm text-base-content/70">
+                <span>Total files: {$currentFileOffer.files.length}</span>
+                <span>Total size: {formatFileSize($currentFileOffer.files.reduce((total, file) => total + file.size, 0))}</span>
+            </div>
         {/if}
-        <div class="flex flex-col gap-3">
+        <div class="flex shrink-0 flex-col gap-3">
             {#if $downloadFinished}
                 <a href="/donate" class="btn btn-primary w-full">
                     <HeartIcon class="h-5 w-5"/>

frontend/src/pages/index.astro

@@ -1,5 +1,4 @@
 ---
-import "../styles/globals.css"
 import Layout from '../layouts/Layout.astro';
 import {
     Users,
@@ -23,7 +22,7 @@ const tweet = "I just used sendfa.st to send files between my devices. It's fast
 ---
 <Layout title="SendFast • quick and easy file transfers">
     <Navbar/>
-    <section class="md:min-h-[100vh] bg-base-100 relative overflow-hidden">
+    <section class="md:min-h-screen bg-base-100 relative overflow-hidden">
         <GradientBackdrop/>
         <div class="relative z-10 max-w-6xl mx-auto flex flex-col items-center justify-center gap-16 lg:gap-20 px-8 py-12 lg:py-32">
             <div class="relative z-10 mx-auto flex flex-col items-center justify-center gap-16 lg:gap-20 px-8 py-12 lg:py-32">