fix: buggy drives and window operations

Author: kimlimjustin

src-tauri/capabilities/main.json

@@ -6,19 +6,21 @@
     "permissions": [
         "path:default",
         "event:default",
+        "window:default",
         "app:default",
+        "image:default",
         "resources:default",
         "menu:default",
         "tray:default",
-        "window:allow-set-title",
-        "os:allow-arch",
-        "os:allow-hostname",
-        "os:allow-os-type",
-        "os:allow-platform",
-        "fs:allow-watch",
-        "window:allow-start-dragging",
-        "window:allow-minimize",
         "window:allow-maximize",
-        "window:allow-close"
+        "window:allow-minimize",
+        "window:allow-is-minimizable",
+        "window:allow-is-maximizable",
+        "window:allow-is-minimized",
+        "window:allow-is-maximized",
+        "window:allow-set-decorations",
+        "window:allow-toggle-maximize",
+        "window:allow-start-dragging",
+        "window:allow-set-content-protected"
     ]
 }

src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"main-capability":{"identifier":"main-capability","description":"Capability for the main window","local":true,"windows":["main"],"permissions":["path:default","event:default","app:default","resources:default","menu:default","tray:default","window:allow-set-title","os:allow-arch","os:allow-hostname","os:allow-os-type","os:allow-platform","fs:allow-watch","window:allow-start-dragging","window:allow-minimize","window:allow-maximize","window:allow-close"]}}
+{"main-capability":{"identifier":"main-capability","description":"Capability for the main window","local":true,"windows":["main"],"permissions":["path:default","event:default","window:default","app:default","image:default","resources:default","menu:default","tray:default","window:allow-maximize","window:allow-minimize","window:allow-is-minimizable","window:allow-is-maximizable","window:allow-is-minimized","window:allow-is-maximized","window:allow-set-decorations","window:allow-toggle-maximize","window:allow-start-dragging","window:allow-set-content-protected"]}}

src-tauri/src/main.rs

@@ -115,6 +115,12 @@ lazy_static! {
     };
 }
 
+#[tauri::command]
+#[inline]
+fn get_platform() -> String {
+    std::env::consts::OS.to_string()
+}
+
 #[cfg(target_os = "windows")]
 #[tauri::command]
 #[inline]
@@ -249,7 +255,8 @@ async fn main() {
             check_vscode_installed,
             get_available_fonts,
             enable_shadow_effect,
-            change_transparent_effect
+            change_transparent_effect,
+            get_platform
         ])
         // .plugin(tauri_plugin_window_state::Builder::default().build())
         .setup(|app| {

src/Components/Sidebar/index.tsx

@@ -2,8 +2,10 @@ import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import { setActiveTab, updateTab } from "../../Store/ActionCreators/TabActionCreators";
+import { fetchDrivesRequest } from "../../Store/ActionCreators/DriveActionCreators";
 import { IAppState } from "../../Store/Reducers";
 import { IFavoritesReducerState } from "../../Typings/Store/favorites";
+import { IDrive } from "../../Typings/Store/drive";
 
 import XplorerLogo from "../../Icon/extension/xplorer.svg";
 import FavoriteLogo from "../../Icon/folder/sidebar-favorite.svg";
@@ -14,16 +16,34 @@ const Sidebar = () => {
     const dispatch = useDispatch();
     const favorites = useSelector<IAppState, IFavoritesReducerState>((state) => state.favorites);
     const { drives } = useSelector<IAppState, IAppState["drive"]>((state) => state.drive);
+    const platform = useSelector<IAppState, IAppState["platform"]["os"]>((state) => state.platform.os);
 
     const activeTab = useSelector<IAppState, IAppState["tabs"]["activeTab"]>((state) => state.tabs.activeTab);
 
+    // Fetch drives when component mounts
+    useEffect(() => {
+        dispatch(fetchDrivesRequest());
+    }, [dispatch]);
+
     const favoritesSort = (a: [string, string], b: [string, string]): number => (a[0] > b[0] ? 1 : -1);
 
     const navigateToPath = (path: string) => {
         dispatch(updateTab(activeTab.name, { ...activeTab, path, name: path }));
         dispatch(setActiveTab({ ...activeTab, path, name: path }));
     };
 
+    // Compute drive display name based on platform and drive properties
+    const getDriveDisplayName = (drive: IDrive) => {
+        if (platform === "windows") {
+            const hasName = drive.name && /[^?]/.test(drive.name);
+            const baseName = hasName ? drive.name : drive.disk_type;
+            const mountPoint = drive.mount_point.replace(/\\$/g, "");
+            return `${baseName} (${mountPoint})`;
+        } else {
+            return drive.mount_point.split("/").at(-1) || drive.mount_point;
+        }
+    };
+
     return (
         <ThemedDiv componentName="sidebar" className="sidebar">
             <ThemedSpan componentName="xplorerBrand" className="xplorer-brand">
@@ -59,20 +79,20 @@ const Sidebar = () => {
                 <div id="sidebar-drives" data-section="drives">
                     <ThemedDiv componentName="sidebarNavToogle" className="sidebar-nav-toggle sidebar-hover-effect">
                         <img src={HardDiskLogo} alt="Drives" />
-                        <span className="sidebar-text" />
+                        <span className="sidebar-text">{platform === "linux" ? "Pendrives" : "Drives"}</span>
                         <span className="sidebar-nav-toggle-arrow" />
                     </ThemedDiv>
                     <div className="sidebar-nav-list">
-                        {drives.map(({ name, mount_point }) => (
+                        {drives.map((drive) => (
                             <span
-                                data-path={mount_point}
+                                data-path={drive.mount_point}
                                 className="sidebar-hover-effect sidebar-nav-item drive-item"
-                                onClick={() => navigateToPath(mount_point.replace(/\\/g, "/"))}
-                                key={mount_point + name}
+                                onClick={() => navigateToPath(drive.mount_point.replace(/\\/g, "/"))}
+                                key={drive.mount_point}
                             >
                                 <div className="sidebar-icon"></div>
                                 <ThemedSpan componentName="sidebarText" className="sidebar-text">
-                                    {name}
+                                    {getDriveDisplayName(drive)}
                                 </ThemedSpan>
                             </span>
                         ))}

src/Services/PlatformService.ts

@@ -1,6 +1,6 @@
-import { platform } from "@tauri-apps/plugin-os";
+import { invoke } from "@tauri-apps/api/core";
 
 export const getOS = async (): Promise<string> => {
-    const currentPlatform = await platform();
+    const currentPlatform = await invoke<string>("get_platform");
     return currentPlatform;
 };

src/Store/Sagas/DrivesSaga.ts

@@ -1,25 +1,28 @@
-import { all, call, takeLatest } from "redux-saga/effects";
+import { all, call, takeLatest, select, take } from "redux-saga/effects";
 
 import { fetchDrivesFailure, fetchDrivesSuccess } from "../ActionCreators/DriveActionCreators";
 import { getOSRequest } from "../ActionCreators/PlatformActionCreators";
 
-import { selectStatus, typedPut as put, typedSelect as select } from "./helpers";
+import { selectStatus, typedPut as put } from "./helpers";
 import * as DrivesService from "../../Services/DrivesService";
 import { IDrive } from "../../Typings/Store/drive";
 
 function* fetchDrivesWorker(/* action: FetchDrivesRequest */) {
     try {
         let os: string = yield select((state) => state.platform.os);
+
         if (!os) {
+            // Request OS information
             yield put(getOSRequest());
-        }
 
-        // WAIT FOR OS RESOLVE
-        while (!os) {
-            yield new Promise((resolve) => setTimeout(resolve, 100));
+            // Wait for OS to be successfully loaded
+            yield take(selectStatus("GET_OS", "SUCCESS"));
+
+            // Get the OS again after it's been loaded
             os = yield select((state) => state.platform.os);
         }
 
+        console.log("OS detected:", os);
         const drives: IDrive[] = yield call(DrivesService.fetchDrives, os);
         yield put(fetchDrivesSuccess(drives));
     } catch (error) {