feat: add mobile UI adaptation

Author: AprilNEA

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:mobile": "VITE_MOBILE=true vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "tauri": "tauri",

src-tauri/src/lib.rs

@@ -15,14 +15,10 @@
     all(not(debug_assertions), target_os = "windows"),
     windows_subsystem = "windows"
 )]
-
+#[cfg(desktop)]
 mod updates;
 use dev_utility_core;
 use std::sync::Mutex;
-use tauri::{
-    menu::{MenuItem, MenuItemKind, PredefinedMenuItem, SubmenuBuilder, HELP_SUBMENU_ID},
-    Manager,
-};
 
 const SETTINGS_ID: &str = "settings";
 const UPDATE_ID: &str = "update";
@@ -36,6 +32,12 @@ pub fn run() {
         .setup(|app| {
             #[cfg(desktop)]
             {
+                use tauri::{
+                    menu::{
+                        MenuItem, MenuItemKind, PredefinedMenuItem, SubmenuBuilder, HELP_SUBMENU_ID,
+                    },
+                    Manager,
+                };
                 app.handle()
                     .plugin(tauri_plugin_updater::Builder::new().build())
                     .unwrap();

src-tauri/tauri.android.conf.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "DevUtility",
+  "version": "0.1.4",
+  "identifier": "dev.utility.app",
+  "build": {
+    "beforeDevCommand": "pnpm dev:mobile",
+    "devUrl": "http://localhost:1420",
+    "beforeBuildCommand": "make prebuild-desktop",
+    "frontendDist": "../dist"
+  }
+}

src/components/sidebar/index.tsx

@@ -43,6 +43,7 @@ import {
   SidebarRail,
   SidebarTrigger,
 } from "@/components/ui/sidebar";
+import { IS_MOBILE } from "@/contants";
 import { cn } from "@/lib/utils";
 import utilities, { type UtilityMeta } from "@/utilities/meta";
 import { Button } from "../ui/button";
@@ -232,9 +233,19 @@ export default function AppSidebar({
         </SidebarContent>
         <SidebarRail />
       </Sidebar>
-      <SidebarInset className="bg-background rounded-lg m-2 overflow-hidden">
+      <SidebarInset
+        className={cn(
+          "bg-background overflow-hidden",
+          !IS_MOBILE && "rounded-lg m-2",
+        )}
+      >
         <InsetHeader title={title} />
-        <main className="@container/main flex-1 max-h-[calc(100vh-3rem)] px-4 pb-2 overflow-hidden">
+        <main
+          className={cn(
+            "@container/main flex-1 max-h-[calc(100vh-3rem)] overflow-hidden",
+            IS_MOBILE ? "overflow-y-auto" : "px-4 pb-2",
+          )}
+        >
           {children}
         </main>
       </SidebarInset>

src/contants.tsx

@@ -0,0 +1,3 @@
+export const IS_TAURI = "__TAURI__" in window;
+
+export const IS_MOBILE = import.meta.env.VITE_MOBILE === "true";

src/utilities/invoke.wasm.ts renamed to src/utilities/invoke-wasm.ts

@@ -14,14 +14,15 @@
  */
 
 // #v-ifdef WASM
-import wasmFunctions from "./invoke.wasm";
+import wasmFunctions from "./invoke-wasm";
 // #v-endif
 
 import { type InvokeOptions, invoke as invokeCore } from "@tauri-apps/api/core";
 import useSWRMutation, {
   type SWRMutationConfiguration,
   type SWRMutationResponse,
 } from "swr/mutation";
+import { IS_TAURI } from "@/contants";
 import {
   type HashResult,
   type IndentStyle,
@@ -34,8 +35,6 @@ import {
   type TotpValidationResult,
 } from "./types";
 
-export const IS_TAURI = "__TAURI__" in window;
-
 export interface UtilitiesArgs {
   [InvokeFunction.GenerateUlid]: { count: number };
   [InvokeFunction.GenerateNanoid]: { count: number };

src/utilities/invoke.ts

@@ -14,3 +14,11 @@
  */
 
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_MOBILE?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}