feat: Add MobileBanner component to enhance user experience on mobile devices (huggingface#352)

damianpumar · web-flow · commit f3d279acae38 · 2025-06-12T13:52:39.000+02:00
* feat: Add MobileBanner component to enhance user experience on mobile devices

* feat: Update MobileBanner component text and styling for improved clarity
diff --git a/src/components/ui/mobile/banner.tsx b/src/components/ui/mobile/banner.tsx
@@ -0,0 +1,42 @@
+import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
+import { LuX } from '@qwikest/icons/lucide';
+import { Button } from '~/components/ui/button/button';
+
+export const MobileBanner = component$(() => {
+  const isVisible = useSignal(false);
+
+  useVisibleTask$(() => {
+    isVisible.value = localStorage.getItem('mobile_banner') !== 'false';
+  });
+
+  if (!isVisible.value) {
+    return null;
+  }
+
+  return (
+    <div class="fixed top-0 left-0 right-0 z-[53] visible md:invisible">
+      <div
+        class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-1"
+        role="alert"
+      >
+        <div class="flex items-center justify-between gap-2">
+          <p class="font-bold">Sheets is optimized for desktop use</p>
+          <Button
+            look="ghost"
+            class="text-blue-500 hover:text-blue-700"
+            onClick$={() => {
+              isVisible.value = false;
+              localStorage.setItem('mobile_banner', 'false');
+            }}
+          >
+            <LuX class="text-lg" />
+          </Button>
+        </div>
+        <p class="text-sm">
+          Please use a larger-screen device for the best experience, including
+          full table interaction and access to all features.
+        </p>
+      </div>
+    </div>
+  );
+});
diff --git a/src/routes/home/dataset/[id]/index.tsx b/src/routes/home/dataset/[id]/index.tsx
@@ -1,6 +1,7 @@
 import { component$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
 import { Login } from '~/components/ui/login/Login';
+import { MobileBanner } from '~/components/ui/mobile/banner';
 import { Tips } from '~/components/ui/tips/tips';
 import { DatasetName } from '~/features/datasets';
 import { SaveDataset } from '~/features/export';
@@ -16,6 +17,7 @@ export default component$(() => {
 
   return (
     <ActiveDatasetProvider>
+      <MobileBanner />
       <div class="flex flex-col h-full w-full">
         <div class="sticky">
           <div class="flex flex-col gap-2">
