Merge remote-tracking branch 'origin/main' into jamie-unsorted-changes

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

@@ -2,16 +2,6 @@ use tauri::{GlobalWindowEvent, Runtime, Window, Wry};
 
 pub(crate) fn handle_window_event(event: GlobalWindowEvent<Wry>) {
   match event.event() {
-    tauri::WindowEvent::Focused(_focus) => {
-      // let fullscreen = event.window().is_fullscreen().unwrap_or(false);
-
-      // println!("fullscreen, {}", fullscreen);
-
-      // #[cfg(target_os = "macos")]
-      // event
-      //   .window()
-      //   .set_transparent_titlebar(!fullscreen, !fullscreen);
-    }
     _ => {}
   }
 }

apps/desktop/src/index.tsx

@@ -45,12 +45,23 @@ function App() {
   }
 
   const [platform, setPlatform] = useState<Platform>('macOS');
+  const [focused, setFocused] = useState(true);
 
   useEffect(() => {
     os.platform().then((platform) => setPlatform(getPlatform(platform)));
     invoke('app_ready');
   }, []);
 
+  useEffect(() => {
+    const unlistenFocus = listen('tauri://focus', () => setFocused(true));
+    const unlistenBlur = listen('tauri://blur', () => setFocused(false));
+
+    return () => {
+      unlistenFocus.then((unlisten) => unlisten());
+      unlistenBlur.then((unlisten) => unlisten());
+    };
+  }, []);
+
   return (
     <SpacedriveInterface
       useMemoryRouter
@@ -64,6 +75,7 @@ function App() {
       }): Promise<string | string[]> {
         return dialog.open(options);
       }}
+      isFocused={focused}
       onClose={() => appWindow.close()}
       onFullscreen={() => appWindow.setFullscreen(true)}
       onMinimize={() => appWindow.minimize()}

packages/client/src/ClientProvider.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
-import { QueryClientProvider } from 'react-query';
+import { QueryClientProvider, QueryClientProviderProps } from 'react-query';
+
+export interface ClientProviderProps extends Omit<QueryClientProviderProps, 'client'> {
+  children?: React.ReactNode;
+}
 
 // The ClientProvider injects the React-query context into the "context store" of the current package. This is needed due to the fact the repository is a monorepo.
 // This is a pretty hacky solution and a better solution should probably be found to replace it.
-export function ClientProvider({ children }: any) {
+export const ClientProvider: React.FC<ClientProviderProps> = ({ children, ...props }) => {
   return (
-    // @ts-ignore: This exists to add the QueryClientProvider to the current subpackage '@sd/client'. The ReactQueryClient is fetched from the window object (which is set in the parent application).
-    <QueryClientProvider client={window.ReactQueryClient}>{children}</QueryClientProvider>
+    // This exists to add the QueryClientProvider to the current subpackage '@sd/client'.
+    // The ReactQueryClient is fetched from the window object (which is set in the parent application).
+    // @ts-expect-error: react-query depends on the react@^17 FC type which includes children -- once v4.0 is released this will not be necessary
+    <QueryClientProvider {...props} client={window.ReactQueryClient}>
+      {children}
+    </QueryClientProvider>
   );
-}
+};

packages/client/src/window.d.ts

@@ -0,0 +1,7 @@
+import type { QueryClient } from 'react-query/types';
+
+declare global {
+  interface Window {
+    ReactQueryClient: QueryClient;
+  }
+}

packages/interface/src/App.tsx

@@ -1,7 +1,16 @@
+import '@fontsource/inter/variable.css';
+import { BaseTransport, ClientProvider, setTransport } from '@sd/client';
+// global window type extensions
+// only load at TS compile time
+import type {} from '@sd/client/src/window';
+import { Button } from '@sd/ui';
+import clsx from 'clsx';
 import React, { useContext, useEffect, useState } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import {
-  MemoryRouter,
   Location,
+  MemoryRouter,
   Outlet,
   Route,
   Routes,
@@ -9,32 +18,22 @@ import {
   useNavigate
 } from 'react-router-dom';
 import { Sidebar } from './components/file/Sidebar';
-import { SettingsScreen } from './screens/Settings';
-import { ExplorerScreen } from './screens/Explorer';
-import { useCoreEvents } from './hooks/useCoreEvents';
-import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
-import { OverviewScreen } from './screens/Overview';
-import { DebugScreen } from './screens/Debug';
 import { Modal } from './components/layout/Modal';
-import GeneralSettings from './screens/settings/GeneralSettings';
 import SlideUp from './components/transitions/SlideUp';
-import SecuritySettings from './screens/settings/SecuritySettings';
-import LocationSettings from './screens/settings/LocationSettings';
-import { RedirectPage } from './screens/Redirect';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { BaseTransport, ClientProvider, setTransport } from '@sd/client';
-import { Button } from '@sd/ui';
-import { CoreEvent } from '@sd/core';
-import clsx from 'clsx';
-import './style.scss';
+import { useCoreEvents } from './hooks/useCoreEvents';
 import { ContentScreen } from './screens/Content';
-import LibrarySettings from './screens/settings/LibrarySettings';
-
-import '@fontsource/inter/variable.css';
-
+import { DebugScreen } from './screens/Debug';
+import { ExplorerScreen } from './screens/Explorer';
+import { OverviewScreen } from './screens/Overview';
+import { RedirectPage } from './screens/Redirect';
+import { SettingsScreen } from './screens/Settings';
 import ExperimentalSettings from './screens/settings/ExperimentalSettings';
-
+import GeneralSettings from './screens/settings/GeneralSettings';
+import LibrarySettings from './screens/settings/LibrarySettings';
+import LocationSettings from './screens/settings/LocationSettings';
+import SecuritySettings from './screens/settings/SecuritySettings';
 import { TagScreen } from './screens/Tag';
+import './style.scss';
 
 const queryClient = new QueryClient();
 
@@ -51,6 +50,7 @@ export interface AppProps {
   onMinimize?: () => void;
   onFullscreen?: () => void;
   onOpen?: (path: string) => void;
+  isFocused?: boolean;
   useMemoryRouter: boolean;
   demoMode?: boolean;
 }
@@ -204,11 +204,10 @@ function BrowserRouterContainer() {
 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) {
-    // @ts-ignore
-    window.ReactQueryClient = queryClient;
-  }
+  // 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.
+  window.ReactQueryClient ??= queryClient;
 
   setTransport(props.transport);
 
@@ -220,7 +219,7 @@ export default function App(props: AppProps) {
       <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
         {/* @ts-ignore */}
         <QueryClientProvider client={queryClient} contextSharing={false}>
-          <AppPropsContext.Provider value={props}>
+          <AppPropsContext.Provider value={Object.assign({ isFocused: true }, props)}>
             <ClientProvider>
               {props.useMemoryRouter ? <MemoryRouterContainer /> : <BrowserRouterContainer />}
             </ClientProvider>