Merge pull request #10 from fosslife/dev

.gitattributes

@@ -0,0 +1,27 @@
+* text=auto eol=lf
+
+# Denote all files that are truly binary and should not be modified
+*.bin binary
+*.exe binary
+*.dll binary
+*.so binary
+*.dylib binary
+*.png binary
+*.jpg binary
+*.gif binary
+*.ico binary
+*.mov binary
+*.mp4 binary
+*.mp3 binary
+*.ttf binary
+*.woff binary
+*.woff2 binary
+*.eot binary
+*.pdf binary
+*.zip binary
+*.tar.gz binary
+*.rar binary
+*.7z binary
+*.iso binary
+*.dmg binary
+

.husky/pre-commit

@@ -1,27 +1,40 @@
-
+#!/bin/sh
+# Add debugging
+set -e
+echo "🚀 Starting pre-commit hook..."
 
 # Get only staged files
-STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACMR | grep -E '\.(ts|tsx|js|jsx)$')
+echo "📁 Getting staged files..."
+STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACMR | grep -E '\.(ts|tsx|js|jsx)$' || true)
+echo "Found files: $STAGED_FILES"
 
 if [ -n "$STAGED_FILES" ]; then
     echo "🔍 Checking staged files..."
 
     # Run prettier on staged files
-    yarn prettier --write $STAGED_FILES
+    echo "Running Prettier..."
+    yarn prettier --write $STAGED_FILES || {
+        echo "❌ Prettier formatting failed"
+        exit 1
+    }
 
     # Run eslint on staged files
-    yarn eslint $STAGED_FILES --fix
+    echo "Running ESLint..."
+    yarn eslint $STAGED_FILES --fix || {
+        echo "❌ ESLint check failed"
+        exit 1
+    }
 
     # Add back the formatted/linted files to staging
+    echo "Adding formatted files back to staging..."
     git add $STAGED_FILES
 fi
 
 # Run type checking
-echo "🔍 Type checking..."
-yarn tsc --noEmit
-
-# Run tests (optional, as they might take long)
-# echo "🧪 Running tests..."
-# yarn test
+echo "🔍 Running TypeScript check..."
+yarn tsc --noEmit || {
+    echo "❌ TypeScript check failed"
+    exit 1
+}
 
 echo "✅ Pre-commit checks passed!"

package.json

@@ -25,6 +25,7 @@
     "@tauri-apps/plugin-shell": "^2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-resizable-panels": "^2.1.7",
     "react-router-dom": "^6.28.0"
   },
   "devDependencies": {

prettier.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  printWidth: 120,
+  tabWidth: 2,
+  singleQuote: false,
+  trailingComma: "es5",
+};

src-tauri/Cargo.toml

@@ -18,7 +18,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = [] }
+tauri = { version = "2", features = ["protocol-asset"] }
 tauri-plugin-shell = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"

src-tauri/capabilities/default.json

@@ -25,6 +25,8 @@
     "clipboard-manager:allow-read-image",
     "clipboard-manager:allow-write-image",
     "clipboard-manager:allow-read-text",
-    "clipboard-manager:allow-write-text"
+    "clipboard-manager:allow-write-text",
+    "core:window:default",
+    "core:window:allow-start-dragging"
   ]
 }

src-tauri/src/lib.rs

@@ -1,3 +1,5 @@
+use std::{os::windows::process::CommandExt, process::Command};
+
 use trash;
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
@@ -6,7 +8,7 @@ pub fn run() {
         .plugin(tauri_plugin_clipboard_manager::init())
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_shell::init())
-        .invoke_handler(tauri::generate_handler![move_to_trash])
+        .invoke_handler(tauri::generate_handler![move_to_trash, open_file])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }
@@ -18,3 +20,32 @@ async fn move_to_trash(paths: Vec<String>) -> Result<(), String> {
     }
     Ok(())
 }
+
+#[tauri::command]
+async fn open_file(path: String) -> Result<(), String> {
+    #[cfg(target_os = "windows")]
+    {
+        Command::new("cmd")
+            .raw_arg(format!("/C start \"\" \"{}\"", path))
+            .spawn()
+            .map_err(|e| e.to_string())?;
+    }
+
+    #[cfg(target_os = "macos")]
+    {
+        Command::new("open")
+            .arg(path)
+            .spawn()
+            .map_err(|e| e.to_string())?;
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+        Command::new("xdg-open")
+            .arg(path)
+            .spawn()
+            .map_err(|e| e.to_string())?;
+    }
+
+    Ok(())
+}

src-tauri/tauri.conf.json

@@ -13,23 +13,24 @@
     "windows": [
       {
         "title": "trafalgar",
-        "width": 800,
-        "height": 600
+        "width": 1000,
+        "height": 800
       }
     ],
     "security": {
-      "csp": null
+      "assetProtocol": {
+        "enable": true,
+        "scope": ["**/*"]
+      },
+      "csp": {
+        "default-src": ["'self'", "asset: http://asset.localhost"]
+      }
     }
   },
+
   "bundle": {
     "active": true,
     "targets": "all",
-    "icon": [
-      "icons/32x32.png",
-      "icons/128x128.png",
-      "icons/[email protected]",
-      "icons/icon.icns",
-      "icons/icon.ico"
-    ]
+    "icon": ["icons/32x32.png", "icons/128x128.png", "icons/[email protected]", "icons/icon.icns", "icons/icon.ico"]
   }
 }

src/App.tsx

@@ -1,17 +1,22 @@
 import { Outlet } from "react-router-dom";
-import { AppShell } from "@mantine/core";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { Sidebar } from "./components/Sidebar";
+import { Box, Group } from "@mantine/core";
 
 export function App() {
   return (
-    <AppShell padding="md" navbar={{ width: 180, breakpoint: "sm" }}>
-      <AppShell.Navbar>
-        <Sidebar />
-      </AppShell.Navbar>
-
-      <AppShell.Main>
-        <Outlet />
-      </AppShell.Main>
-    </AppShell>
+    <Group align="stretch" h="100%" wrap="nowrap">
+      <PanelGroup direction="horizontal" autoSaveId="app-layout">
+        <Panel defaultSize={15} maxSize={25}>
+          <Sidebar />
+        </Panel>
+        <PanelResizeHandle style={{ backgroundColor: "gainsboro", width: 1 }} />
+        <Panel>
+          <Box h="100%" p="xs">
+            <Outlet />
+          </Box>
+        </Panel>
+      </PanelGroup>
+    </Group>
   );
 }

src/components/FileExplorer/FileExplorer.module.css

@@ -1,13 +1,20 @@
 .selected {
-  background-color: light-dark(
-    var(--mantine-color-blue-2),
-    var(--mantine-color-blue-9)
-  ) !important;
+  background-color: light-dark(var(--mantine-color-blue-2), var(--mantine-color-blue-9)) !important;
 }
 
 .selected:hover {
-  background-color: light-dark(
-    var(--mantine-color-blue-1),
-    var(--mantine-color-blue-8)
-  );
+  background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-8));
+}
+
+.tableContainer {
+  position: relative;
+  overflow: auto;
+  padding-right: 2px;
+  height: 100%;
+}
+
+.table {
+  position: relative;
+  border-collapse: separate;
+  border-spacing: 0;
 }

src/components/FileExplorer/NavigationBar/index.tsx

@@ -1,10 +1,17 @@
 import { Group, ActionIcon, Breadcrumbs, Anchor } from "@mantine/core";
-import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconLayoutGrid,
+  IconLayoutList,
+} from "@tabler/icons-react";
 
 interface NavigationBarProps {
   path: string;
   canGoBack: boolean;
   canGoForward: boolean;
+  viewMode: "grid" | "list";
+  onViewModeChange: (mode: "grid" | "list") => void;
   onBack: () => void;
   onForward: () => void;
   onPathChange: (newPath: string) => void;
@@ -14,6 +21,8 @@ export function NavigationBar({
   path,
   canGoBack,
   canGoForward,
+  viewMode,
+  onViewModeChange,
   onBack,
   onForward,
   onPathChange,
@@ -43,7 +52,6 @@ export function NavigationBar({
         key={fullPath}
         onClick={(event) => {
           event.preventDefault();
-          console.log("Navigating to:", fullPath); // Debug log
           onPathChange(fullPath);
         }}
         style={{ cursor: "pointer" }}
@@ -54,7 +62,7 @@ export function NavigationBar({
   });
 
   return (
-    <Group p="2" justify="flex-start" bg="gray.2">
+    <Group p="2" justify="space-between" bg="gray.2">
       <Group gap="xs">
         <ActionIcon
           variant="subtle"
@@ -72,9 +80,18 @@ export function NavigationBar({
         >
           <IconChevronRight size={16} />
         </ActionIcon>
+        <Breadcrumbs>{breadcrumbItems}</Breadcrumbs>
       </Group>
-
-      <Breadcrumbs>{breadcrumbItems}</Breadcrumbs>
+      <ActionIcon
+        variant="light"
+        onClick={() => onViewModeChange(viewMode === "list" ? "grid" : "list")}
+      >
+        {viewMode === "list" ? (
+          <IconLayoutGrid size={16} />
+        ) : (
+          <IconLayoutList size={16} />
+        )}
+      </ActionIcon>
     </Group>
   );
 }

src/components/FileExplorer/components/FileCard/FileCard.module.css

@@ -0,0 +1,26 @@
+.cardButton {
+  width: 100%;
+}
+
+.card {
+  transition: all 0.2s ease;
+  cursor: pointer;
+  user-select: none;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card:hover {
+  background-color: var(--mantine-color-gray-0);
+}
+
+.selected {
+  background-color: var(--mantine-color-blue-0);
+  border: 1px solid var(--mantine-color-blue-5);
+}
+
+.selected:hover {
+  background-color: var(--mantine-color-blue-0);
+}