hooked up core events, fixed sidebar with + dropdown

apps/desktop/src/index.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 
 // import Spacedrive interface
 import SpacedriveInterface, { Platform } from '@sd/interface';
-
+import { emit, listen, Event } from '@tauri-apps/api/event';
 // import types from Spacedrive core (TODO: re-export from client would be cleaner)
 import { ClientCommand, ClientQuery, CoreEvent } from '@sd/core';
 // import Spacedrive JS client
@@ -16,6 +16,13 @@ import '@sd/ui/style';
 
 // bind state to core via Tauri
 class Transport extends BaseTransport {
+  constructor() {
+    super();
+
+    listen('core_event', (e: Event<CoreEvent>) => {
+      this.emit('core_event', e.payload);
+    });
+  }
   async query(query: ClientQuery) {
     return await invoke('client_query_transport', { data: query });
   }
@@ -47,9 +54,6 @@ function App() {
   return (
     <SpacedriveInterface
       transport={new Transport()}
-      onCoreEvent={function (event: CoreEvent): void {
-        return;
-      }}
       platform={platform}
       convertFileSrc={function (url: string): string {
         return convertFileSrc(url);

packages/interface/src/App.tsx

@@ -35,7 +35,6 @@ export type Platform = 'browser' | 'macOS' | 'windows' | 'linux';
 
 export interface AppProps {
   transport: BaseTransport;
-  onCoreEvent: (event: CoreEvent) => void;
   platform: Platform;
   convertFileSrc: (url: string) => string;
   openDialog: (options: { directory?: boolean }) => Promise<string | string[]>;
@@ -175,6 +174,8 @@ function AppContainer() {
   );
 }
 
+export function bindCoreEvent() {}
+
 export default function App(props: AppProps) {
   // @ts-ignore: TODO: This is a hack and a better solution should probably be found. This exists so that the queryClient can be accessed within the subpackage '@sd/client'. Refer to <ClientProvider /> for where this is used.
   if (window.ReactQueryClient === undefined) {

packages/interface/src/components/file/Sidebar.tsx

@@ -70,7 +70,7 @@ 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">
+    <div className="flex flex-col flex-grow-0 flex-shrink-0 w-48 min-h-full px-3 pb-1 overflow-x-hidden overflow-y-scroll border-r border-gray-100 bg-gray-50 dark:bg-gray-850 dark:border-gray-600">
       {appPropsContext?.platform === 'macOS' ? (
         <>
           <MacOSTrafficLights /> <div className="mt-6" />
@@ -79,7 +79,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
       <Dropdown
         buttonProps={{
           justifyLeft: true,
-          className: `flex mb-1 mt-1 shadow-xs rounded flex-shrink-0 w-[175px] 
+          className: `flex w-full mb-1 mt-1 shadow-xs rounded flex-shrink-0  
             !bg-gray-50 
             border-gray-150 
             hover:!bg-gray-1000 

packages/interface/src/components/primitive/Dropdown.tsx

@@ -20,23 +20,21 @@ export interface DropdownProps extends DefaultOptions {
 
 export const Dropdown: React.FC<DropdownProps> = (props) => {
   return (
-    <div className="flex mt-2">
-      <Menu as="div" className="relative inline-block text-left">
-        <div>
-          <Menu.Button className="outline-none">
-            <Button size="sm" {...props.buttonProps}>
-              {props.buttonIcon}
-              {props.buttonText}
-              <div className="flex-grow" />
-              <ChevronDownIcon
-                className="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100 "
-                aria-hidden="true"
-              />
-            </Button>
-          </Menu.Button>
-        </div>
+    <div className="w-full mt-2">
+      <Menu as="div" className="relative flex w-full text-left">
+        <Menu.Button as="div" className="flex-1 outline-none">
+          <Button size="sm" {...props.buttonProps}>
+            {props.buttonIcon}
+            {props.buttonText}
+            <div className="flex-grow" />
+            <ChevronDownIcon
+              className="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100 "
+              aria-hidden="true"
+            />
+          </Button>
+        </Menu.Button>
 
-        <Menu.Items className="absolute left-0 z-50 mt-1 origin-top-left bg-white border divide-y divide-gray-100 rounded shadow-xl w-44 dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute z-50 w-full bg-white border divide-y divide-gray-100 rounded shadow-xl top-full dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none">
           {props.items.map((item, index) => (
             <div key={index} className="px-1 py-1">
               {item.map((button, index) => (

packages/interface/src/hooks/useCoreEvents.tsx

@@ -1,5 +1,6 @@
 import { useContext, useEffect } from 'react';
 import { CoreEvent } from '@sd/core';
+import { transport } from '@sd/client';
 import { useQueryClient } from 'react-query';
 import { useExplorerState } from '../components/file/FileList';
 import { AppPropsContext } from '../App';
@@ -11,8 +12,7 @@ export function useCoreEvents() {
   const { addNewThumbnail } = useExplorerState();
   useEffect(() => {
     // check Tauri Event type
-    // @ts-expect-error
-    appPropsContext?.onCoreEvent((e: CoreEvent) => {
+    transport?.on('core_event', (e: CoreEvent) => {
       switch (e?.key) {
         case 'NewThumbnail':
           addNewThumbnail(e.data.cas_id);