improvements to the pwa

pages/_app.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "@/styles/globals.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import { SessionProvider } from "next-auth/react";
@@ -7,6 +7,7 @@ import Head from "next/head";
 import AuthRedirect from "@/layouts/AuthRedirect";
 import { Toaster } from "react-hot-toast";
 import { Session } from "next-auth";
+import { isPWA } from "@/lib/client/utils";
 
 export default function App({
   Component,
@@ -14,6 +15,15 @@ export default function App({
 }: AppProps<{
   session: Session;
 }>) {
+  useEffect(() => {
+    if (isPWA()) {
+      const meta = document.createElement("meta");
+      meta.name = "viewport";
+      meta.content = "width=device-width, initial-scale=1, maximum-scale=1";
+      document.getElementsByTagName("head")[0].appendChild(meta);
+    }
+  }, []);
+
   return (
     <SessionProvider
       session={pageProps.session}

pages/collections/[id].tsx

@@ -23,6 +23,7 @@ import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
+import { dropdownTriggerer } from "@/lib/client/utils";
 
 export default function Index() {
   const { settings } = useLocalSettingsStore();
@@ -125,6 +126,7 @@ export default function Index() {
               <div
                 tabIndex={0}
                 role="button"
+                onMouseDown={dropdownTriggerer}
                 className="btn btn-ghost btn-sm btn-square text-neutral"
               >
                 <i className="bi-three-dots text-xl" title="More"></i>

pages/collections/index.tsx

@@ -11,7 +11,6 @@ import PageHeader from "@/components/PageHeader";
 
 export default function Collections() {
   const { collections } = useCollectionStore();
-  const [expandDropdown, setExpandDropdown] = useState(false);
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
   const [sortedCollections, setSortedCollections] = useState(collections);
 

pages/dashboard.tsx

@@ -16,6 +16,7 @@ import PageHeader from "@/components/PageHeader";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import ViewDropdown from "@/components/ViewDropdown";
+import { dropdownTriggerer } from "@/lib/client/utils";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 
 export default function Dashboard() {
@@ -200,6 +201,7 @@ export default function Dashboard() {
                   <div
                     tabIndex={0}
                     role="button"
+                    onMouseDown={dropdownTriggerer}
                     className="inline-flex items-center gap-2 text-sm btn btn-outline btn-neutral"
                     id="import-dropdown"
                   >

pages/search.tsx

@@ -25,8 +25,6 @@ export default function Search() {
     tags: true,
   });
 
-  const [filterDropdown, setFilterDropdown] = useState(false);
-
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
   );

pages/settings/account.tsx

@@ -11,6 +11,7 @@ import React from "react";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import Link from "next/link";
 import Checkbox from "@/components/Checkbox";
+import { dropdownTriggerer } from "@/lib/client/utils";
 
 export default function Account() {
   const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
@@ -245,6 +246,7 @@ export default function Account() {
                 <div
                   tabIndex={0}
                   role="button"
+                  onMouseDown={dropdownTriggerer}
                   className="flex gap-2 text-sm btn btn-outline btn-neutral group"
                   id="import-dropdown"
                 >

pages/tags/[id].tsx

@@ -11,6 +11,7 @@ import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
+import { dropdownTriggerer } from "@/lib/client/utils";
 
 export default function Index() {
   const router = useRouter();
@@ -153,6 +154,7 @@ export default function Index() {
                       <div
                         tabIndex={0}
                         role="button"
+                        onMouseDown={dropdownTriggerer}
                         className="btn btn-ghost btn-sm btn-square text-neutral"
                       >
                         <i