diff --git a/.vscode/settings.json b/.vscode/settings.json index 2ecb2cbdb..b7f6eeb6b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,5 @@ { - "cSpell.words": ["ipfs", "repr", "tailwindcss"] + "cSpell.words": ["ipfs", "repr", "tailwindcss"], + "rust-analyzer.procMacro.enable": true, + "rust-analyzer.diagnostics.enableExperimental": false, } diff --git a/package.json b/package.json index cbed7d7b6..83cdb3034 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-dropzone": "^11.3.4", + "react-hotkeys-hook": "^3.4.4", "react-router-dom": "^5.2.0", "react-spline": "^1.2.1", "react-virtualized": "^9.22.3", diff --git a/src-tauri/icons/icon.icns b/src-tauri/icons/icon.icns index 2baaf3dd7..2b129b2fb 100644 Binary files a/src-tauri/icons/icon.icns and b/src-tauri/icons/icon.icns differ diff --git a/src-tauri/src/app/menu.rs b/src-tauri/src/app/menu.rs index 6131c5512..fdd83e033 100644 --- a/src-tauri/src/app/menu.rs +++ b/src-tauri/src/app/menu.rs @@ -1,13 +1,54 @@ -use tauri::{CustomMenuItem, Menu, Submenu}; +use tauri::{CustomMenuItem, Menu, MenuItem, Submenu, WindowMenuEvent, Wry}; pub(crate) fn get_menu() -> Menu { - let quit = CustomMenuItem::new("quit".to_string(), "Quit"); - let close = CustomMenuItem::new("close".to_string(), "Close"); - let submenu = Submenu::new("File", Menu::new().add_item(quit).add_item(close)); + // let quit = CustomMenuItem::new("quit".to_string(), "Quit"); + // let close = CustomMenuItem::new("close".to_string(), "Close"); + // let jeff = CustomMenuItem::new("jeff".to_string(), "Jeff"); + // let submenu = Submenu::new( + // "File", + // Menu::new().add_item(quit).add_item(close).add_item(jeff), + // ); + + let file = Submenu::new( + "File", + Menu::new() + .add_item(CustomMenuItem::new("quit".to_string(), "Quit")) + .add_item(CustomMenuItem::new("close".to_string(), "Close")), + ); + let edit = Submenu::new( + "Edit", + Menu::new() + .add_item(CustomMenuItem::new("jeff".to_string(), "Copy")) + .add_item(CustomMenuItem::new("jeffd".to_string(), "Paste")), + ); + let view = Submenu::new( + "View", + Menu::new() + .add_item(CustomMenuItem::new( + "command_pallete".to_string(), + "Command Pallete", + )) + .add_item(CustomMenuItem::new("jeffd".to_string(), "Layout")), + ); let menu = Menu::new() - // .add_native_item(MenuItem::Copy) - // .add_item(CustomMenuItem::new("hide", "Hide")) - .add_submenu(submenu); + .add_native_item(MenuItem::Copy) + .add_item(CustomMenuItem::new("about".to_string(), "About SpaceDrive")) + .add_submenu(file) + .add_submenu(edit) + .add_submenu(view); + menu } + +pub(crate) fn handle_menu_event(event: WindowMenuEvent) { + match event.menu_item_id() { + "quit" => { + std::process::exit(0); + } + "close" => { + event.window().close().unwrap(); + } + _ => {} + } +} diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index afd9d12af..209ae9405 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -33,12 +33,13 @@ fn main() { // block_on(filesystem::device::discover_storage_devices()).unwrap(); tauri::Builder::default() - .setup(|app| { + .setup(|_app| { // let main_window = app.get_window("main").unwrap(); // // would need to emit this elsewhere in my Rust code // main_window.emit("my-event", "payload"); Ok(()) }) + .on_menu_event(|event| menu::handle_menu_event(event)) .invoke_handler(tauri::generate_handler![ commands::get_config, commands::scan_dir, diff --git a/src/App.tsx b/src/App.tsx index febdf5941..9a99a228d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,9 @@ import { invoke } from '@tauri-apps/api'; import { DebugGlobalStore } from './store/Debug'; import { useGlobalEvents } from './hooks/useGlobalEvents'; import { AppState, useAppState } from './store/app'; +import { Modal } from './components/layout/Modal'; +import { useKey, useKeyBindings } from 'rooks'; +// import { useHotkeys } from 'react-hotkeys-hook'; export default function App() { useGlobalEvents(); @@ -16,6 +19,10 @@ export default function App() { invoke('get_config').then((state) => useAppState.getState().update(state)); }, []); + // useHotkeys('command+q', () => { + // process.exit(); + // }); + return (
@@ -26,17 +33,18 @@ export default function App() {
- - - - + + + +
+ {/* */} ); diff --git a/src/components/file/FileList.tsx b/src/components/file/FileList.tsx index 5b41fe11f..0d95833d6 100644 --- a/src/components/file/FileList.tsx +++ b/src/components/file/FileList.tsx @@ -3,7 +3,7 @@ import clsx from 'clsx'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { IFile } from '../../types'; import byteSize from 'pretty-bytes'; -import { useKey } from 'rooks'; +import { useKey, useOnWindowResize, useWindowSize } from 'rooks'; import { invoke } from '@tauri-apps/api'; import { useCurrentDir, @@ -43,6 +43,12 @@ export const FileList: React.FC<{}> = (props) => { const VList = useRef(null); const currentDir = useCurrentDir(); + // useOnWindowResize((e) => { + + // }) + + const size = useWindowSize(); + const explorer = useExplorerStore.getState(); const seletedRowIndex = useSelectedFileIndex(currentDir?.id as number); @@ -89,7 +95,7 @@ export const FileList: React.FC<{}> = (props) => { }; const width = (tableContainer.current?.getBoundingClientRect().width || 0) - 30; - const height = (tableContainer.current?.getBoundingClientRect().height || 0) - 30; + const height = (tableContainer.current?.getBoundingClientRect().height || 0) - 140; return useMemo( () => ( @@ -123,7 +129,7 @@ export const FileList: React.FC<{}> = (props) => { /> ), - [currentDir?.id, tableContainer.current] + [size.innerWidth, currentDir?.id, tableContainer.current] ); }; diff --git a/src/components/file/Inspector.tsx b/src/components/file/Inspector.tsx index 00736da03..42a915554 100644 --- a/src/components/file/Inspector.tsx +++ b/src/components/file/Inspector.tsx @@ -19,7 +19,7 @@ const MetaItem = (props: MetaItemProps) => { ); }; -const Divider = () =>
; +const Divider = () =>
; export const Inspector = () => { const selectedFile = useSelectedFile(); @@ -30,7 +30,7 @@ export const Inspector = () => { return ( { leaveFrom="translate-x-0" leaveTo="translate-x-64" > -
-
-
- +
+ {!!file && ( +
+
+ +
+

{file?.name}

+ + +
-

{file?.name}

- - - -
+ )}
); diff --git a/src/components/file/Sidebar.tsx b/src/components/file/Sidebar.tsx index 31faec56f..e255cf3a5 100644 --- a/src/components/file/Sidebar.tsx +++ b/src/components/file/Sidebar.tsx @@ -6,19 +6,36 @@ import { PhotographIcon, ServerIcon } from '@heroicons/react/solid'; -import { Folder, Planet } from 'phosphor-react'; +import { + Book, + Camera, + Circle, + CirclesFour, + Folder, + HandGrabbing, + HardDrive, + HardDrives, + MonitorPlay, + Package, + Planet +} from 'phosphor-react'; import React from 'react'; import { NavLink } from 'react-router-dom'; import { Dropdown } from '../primative/Dropdown'; import { DefaultProps } from '../primative/types'; -const tabs = [ - // { name: 'Spaces', icon: Planet, uri: '/spaces' }, - { name: 'Explorer', icon: Folder, uri: '/explorer' }, - { name: 'Photos', icon: PhotographIcon, uri: '/photos' }, - { name: 'Storage', icon: ServerIcon, uri: '/settings' } - // { name: 'Settings', icon: CogIcon, uri: '/settings' } -]; +const tabs = { + '': [ + { name: 'Spaces', icon: CirclesFour, uri: '/spaces' }, + { name: 'Explorer', icon: Folder, uri: '/explorer' }, + { name: 'Media', icon: MonitorPlay, uri: '/photos' } + ], + 'Locations': [ + { name: 'Macintosh HD', icon: HardDrive, uri: '/x' }, + { name: 'LaCie 2TB', icon: HardDrive, uri: '/xs' }, + { name: 'Seagate 16TB', icon: HardDrive, uri: '/xss' } + ] +}; interface SidebarProps extends DefaultProps {} @@ -29,24 +46,34 @@ export const Sidebar: React.FC = (props) => { buttonProps={{ justifyLeft: true, className: - 'mb-1 shadow flex-shrink-0 w-[175px] dark:bg-gray-550 dark:hover:!bg-gray-500 dark:hover:!border-gray-450', + 'mb-1 !bg-gray-50 border-gray-150 hover:!bg-gray-100 flex-shrink-0 w-[175px] dark:bg-gray-550 dark:hover:!bg-gray-500 dark:hover:!border-gray-450', variant: 'gray' }} + // buttonIcon={} buttonText="Jamie's Library" items={[[{ name: `Jamie's Library` }, { name: 'Subto' }], [{ name: 'Add Library' }]]} /> - {tabs.map((button, index) => ( - - {button.icon && } - {button.name} - - ))} + {Object.keys(tabs).map((name) => { + return ( +
+ {name && ( +
{name}
+ )} + {tabs[name as keyof typeof tabs].map((button, index) => ( + + {button.icon && } + {button.name} + + ))} +
+ ); + })}
); }; diff --git a/src/components/layout/Modal.tsx b/src/components/layout/Modal.tsx new file mode 100644 index 000000000..c0aa676b1 --- /dev/null +++ b/src/components/layout/Modal.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +export interface ModalProps {} + +export const Modal = (props: ModalProps) => { + return ( +
+
+
+ ); +}; diff --git a/src/components/layout/TopBar.tsx b/src/components/layout/TopBar.tsx index cade0342b..36d093a3e 100644 --- a/src/components/layout/TopBar.tsx +++ b/src/components/layout/TopBar.tsx @@ -19,7 +19,8 @@ import { HouseSimple, List, SquaresFour, - Tag + Tag, + TerminalWindow } from 'phosphor-react'; import React from 'react'; import { useExplorerStore } from '../../store/explorer'; @@ -43,7 +44,7 @@ const TopBarButton: React.FC = ({ icon: Icon, ...props }) => ); }; @@ -64,7 +65,7 @@ export const TopBar: React.FC = (props) => { <>
= (props) => {
+
- - + + {/* */}
diff --git a/src/components/primative/Dropdown.tsx b/src/components/primative/Dropdown.tsx index 78dd28f1a..170a69e2f 100644 --- a/src/components/primative/Dropdown.tsx +++ b/src/components/primative/Dropdown.tsx @@ -16,6 +16,7 @@ export interface DropdownProps extends DefaultOptions { items: Section[]; buttonText: string; buttonProps: ButtonProps; + buttonIcon?: any; } export const Dropdown: React.FC = (props) => { @@ -25,6 +26,7 @@ export const Dropdown: React.FC = (props) => {