Merge pull request #6 from oscartbeaumont/main

make UI follow Linux styling conventions on Linux

apps/desktop/src-tauri/src/menu.rs

@@ -1,6 +1,16 @@
+use std::env::consts;
+
 use tauri::{AboutMetadata, CustomMenuItem, Menu, MenuItem, Submenu, WindowMenuEvent, Wry};
 
 pub(crate) fn get_menu() -> Menu {
+  match consts::OS {
+    "linux" => Menu::new(),
+    "macos" => custom_menu_bar(),
+    _ => Menu::new(),
+  }
+}
+
+fn custom_menu_bar() -> Menu {
   // let quit = CustomMenuItem::new("quit".to_string(), "Quit");
   // let close = CustomMenuItem::new("close".to_string(), "Close");
   // let jeff = CustomMenuItem::new("jeff".to_string(), "Jeff");

apps/desktop/src-tauri/tauri.linux.conf.json

@@ -0,0 +1,74 @@
+{
+  "package": {
+    "productName": "Spacedrive",
+    "version": "0.1.0"
+  },
+  "build": {
+    "distDir": "../dist",
+    "devPath": "http://localhost:8085",
+    "beforeDevCommand": "",
+    "beforeBuildCommand": ""
+  },
+  "tauri": {
+    "bundle": {
+      "active": true,
+      "targets": "all",
+      "identifier": "co.spacedrive.desktop",
+      "icon": ["icons/icon.icns"],
+      "resources": [],
+      "externalBin": [],
+      "copyright": "Jamie Pine",
+      "shortDescription": "Your personal virtual cloud.",
+      "longDescription": "Spacedrive is an open source virtual filesystem, a personal cloud powered by your everyday devices. Feature-rich benefits of the cloud, only its owned and hosted by you with security, privacy and ownership as a foundation. Spacedrive makes it possible to create a limitless directory of your digital life that will stand the test of time.",
+      "deb": {
+        "depends": [],
+        "useBootstrapper": false
+      },
+      "macOS": {
+        "frameworks": [],
+        "minimumSystemVersion": "",
+        "useBootstrapper": false,
+        "exceptionDomain": "",
+        "signingIdentity": null,
+        "entitlements": null
+      },
+      "windows": {
+        "certificateThumbprint": null,
+        "digestAlgorithm": "sha256",
+        "timestampUrl": ""
+      }
+    },
+    "updater": {
+      "active": false
+    },
+    "allowlist": {
+      "all": true,
+      "os": {
+        "all": true
+      },
+      "dialog": {
+        "all": true,
+        "open": true,
+        "save": true
+      }
+    },
+    "windows": [
+      {
+        "title": "Spacedrive",
+        "width": 1250,
+        "height": 625,
+        "resizable": true,
+        "fullscreen": false,
+        "alwaysOnTop": false,
+        "focus": true,
+        "fileDropEnabled": false,
+        "decorations": true,
+        "transparent": false,
+        "center": true
+      }
+    ],
+    "security": {
+      "csp": "default-src asset: blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'"
+    }
+  }
+}

apps/desktop/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   BrowserRouter,
   Location,
@@ -23,12 +23,28 @@ import SecuritySettings from './screens/settings/SecuritySettings';
 import LocationSettings from './screens/settings/LocationSettings';
 import { RedirectPage } from './screens/Redirect';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { platform } from '@tauri-apps/api/os';
 
 const queryClient = new QueryClient();
 
 function AppLayout() {
+  const [isWindowRounded, setIsWindowRounded] = useState(false);
+
+  useEffect(() => {
+    platform().then((platform) => {
+      if (platform === 'darwin') {
+        setIsWindowRounded(true);
+      }
+    });
+  }, []);
+
   return (
-    <div className="flex flex-row h-screen overflow-hidden text-gray-900 bg-white border border-gray-200 select-none rounded-xl dark:border-gray-500 dark:text-white dark:bg-gray-650">
+    <div
+      className={
+        'flex flex-row h-screen overflow-hidden text-gray-900 bg-white border border-gray-200 select-none dark:border-gray-500 dark:text-white dark:bg-gray-650' +
+        (isWindowRounded ? ' rounded-xl' : '')
+      }
+    >
       <Sidebar />
       <div className="flex flex-col w-full min-h-full">
         {/* <TopBar /> */}

apps/desktop/src/components/file/Sidebar.tsx

@@ -3,13 +3,14 @@ import { CogIcon, EyeOffIcon, PlusIcon, ServerIcon } from '@heroicons/react/soli
 import { appWindow } from '@tauri-apps/api/window';
 import clsx from 'clsx';
 import { CirclesFour, EjectSimple, MonitorPlay, Planet } from 'phosphor-react';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { NavLink, NavLinkProps } from 'react-router-dom';
 import { TrafficLights } from '../os/TrafficLights';
 import { Button } from '../primitive';
 import { Dropdown } from '../primitive/Dropdown';
 import { DefaultProps } from '../primitive/types';
 import { useBridgeQuery } from '@sd/state';
+import { platform } from '@tauri-apps/api/os';
 
 interface SidebarProps extends DefaultProps {}
 
@@ -51,8 +52,17 @@ export function MacOSTrafficLights() {
 }
 
 export const Sidebar: React.FC<SidebarProps> = (props) => {
+  const [isMacos, setIsMacos] = useState(false);
   const { data: volumes } = useBridgeQuery('SysGetVolumes');
 
+  useEffect(() => {
+    platform().then((platform) => {
+      if (platform === 'darwin') {
+        setIsMacos(true);
+      }
+    });
+  }, []);
+
   const tags = [
     { id: 1, name: 'Keepsafe', color: '#FF6788' },
     { id: 2, name: 'OBS', color: '#BF88FF' },
@@ -63,8 +73,11 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
 
   return (
     <div className="flex flex-col flex-shrink-0 min-h-full px-3 pb-1 overflow-x-hidden overflow-y-scroll border-r border-gray-100 w-46 bg-gray-50 dark:bg-gray-850 dark:border-gray-600">
-      <MacOSTrafficLights />
-      <div className="mt-6" />
+      {isMacos ? (
+        <>
+          <MacOSTrafficLights /> <div className="mt-6" />
+        </>
+      ) : null}
       <Dropdown
         buttonProps={{
           justifyLeft: true,