feat(mobile): use drawer for gif picker

fix(mobile): some ui bugs
fix(mobile): disable pinch zooming

apps/web/src/components/sidebar.tsx

@@ -27,7 +27,6 @@ import {
   SelectContent,
   SelectItem,
 } from "@methanium/ui";
-import { isTauri } from "@tauri-apps/api/core";
 import { useIsMobile } from "@methanium/ui";
 import { MobileNavbar } from "./navbar";
 
@@ -194,11 +193,7 @@ export default function Sidebar() {
 
   const content = (
     <>
-      <SidebarContent
-        className={
-          isTauri() && isMobile ? "pt-[env(safe-area-inset-top)]" : "pt-2"
-        }
-      >
+      <SidebarContent className="pt-2">
         <div className="h-full w-full flex flex-col gap-3 p-2 pt-0!">
           <div>
             <Wrapper
@@ -309,7 +304,7 @@ export default function Sidebar() {
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="fixed inset-y-0 left-0 z-50 w-screen bg-sidebar p-0 text-sidebar-foreground"
+          className="fixed inset-y-0 left-0 z-50 w-screen bg-sidebar pt-[var(--ui-safe-area-top)] pr-[var(--ui-safe-area-right)] pl-[var(--ui-safe-area-left)] text-sidebar-foreground"
           style={{
             transform: openMobile ? "translateX(0)" : "translateX(-100%)",
             opacity: openMobile ? 1 : 0,

apps/web/src/index.tsx

@@ -48,7 +48,6 @@ import CacheSync from "@tensamin/cache/sync";
 import { useStorage } from "@tensamin/storage/context";
 import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useIsMobile, Toaster, TooltipProvider } from "@methanium/ui";
-import { isTauri } from "@tauri-apps/api/core";
 import { HotkeysProvider } from "@tensamin/hotkeys";
 
 const wrapper = document.getElementById("root");
@@ -255,16 +254,7 @@ function RootShell() {
         designStorageKey={null}
       >
         <div className="w-screen h-dvh overflow-hidden">
-          <Toaster
-            position={isMobile ? "top-center" : "bottom-right"}
-            {...(isTauri() && isMobile
-              ? {
-                  mobileOffset: {
-                    top: "env(safe-area-inset-top)",
-                  },
-                }
-              : {})}
-          />
+          <Toaster position={isMobile ? "top-center" : "bottom-right"} />
           <TooltipProvider>
             <Storage>
               <HotkeysProvider>