diff --git a/interface/app/$libraryId/Layout/Sidebar/WindowControls.tsx b/interface/app/$libraryId/Layout/Sidebar/WindowControls.tsx
index 4538588be..ab4f3f2a1 100644
--- a/interface/app/$libraryId/Layout/Sidebar/WindowControls.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/WindowControls.tsx
@@ -11,7 +11,7 @@ export default () => {
const showControls = window.location.search.includes('showControls');
- if (platform === 'tauri' || showControls) {
+ if ((platform === 'tauri' && os == 'macOS') || showControls) {
return (
{/* We do not provide the onClick handlers for 'MacTrafficLights' because this is only used in demo mode */}
diff --git a/interface/app/$libraryId/TopBar/NavigationButtons.tsx b/interface/app/$libraryId/TopBar/NavigationButtons.tsx
index 087465b07..18eadae3d 100644
--- a/interface/app/$libraryId/TopBar/NavigationButtons.tsx
+++ b/interface/app/$libraryId/TopBar/NavigationButtons.tsx
@@ -2,13 +2,14 @@ import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
import { useEffect } from 'react';
import { useNavigate } from 'react-router';
import { Tooltip } from '@sd/ui';
-import { useKeyMatcher, useSearchStore } from '~/hooks';
+import { useKeyMatcher, useOperatingSystem, useSearchStore } from '~/hooks';
import TopBarButton from './TopBarButton';
export const NavigationButtons = () => {
const navigate = useNavigate();
const { isFocused } = useSearchStore();
+ const os = useOperatingSystem();
const idx = history.state.idx as number;
const controlIcon = useKeyMatcher('Meta').icon;
@@ -28,7 +29,7 @@ export const NavigationButtons = () => {
}, [navigate, idx, isFocused]);
return (
-
+
{
const [windowSize, setWindowSize] = useState(0);
const explorer = useExplorerContext();
+ const os = useOperatingSystem();
const toolsNotSmFlex = options
?.flatMap((group) => group)
.filter((t) => t.showAtResolution !== 'sm:flex');
@@ -57,8 +58,8 @@ export default ({ options }: TopBarChildrenProps) => {
}, []);
return (
-
-
+
+
{options?.map((group, groupIndex) => {
return group.map(
(
@@ -85,7 +86,7 @@ export default ({ options }: TopBarChildrenProps) => {
: 'none';
return (
{
{index + 1 === group.length &&
groupIndex + 1 !== groupCount && (
)}
diff --git a/interface/app/$libraryId/TopBar/index.tsx b/interface/app/$libraryId/TopBar/index.tsx
index d01b1890e..b78bf93e2 100644
--- a/interface/app/$libraryId/TopBar/index.tsx
+++ b/interface/app/$libraryId/TopBar/index.tsx
@@ -1,5 +1,7 @@
+import { platform } from 'os';
import clsx from 'clsx';
import type { Ref } from 'react';
+import { useOperatingSystem } from '~/hooks';
import { useExplorerStore } from '../Explorer/store';
import { NavigationButtons } from './NavigationButtons';
@@ -15,10 +17,11 @@ interface Props {
const TopBar = (props: Props) => {
const { isDragging } = useExplorerStore();
+ const os = useOperatingSystem();
return (
{
)}
>
diff --git a/interface/app/$libraryId/settings/Sidebar.tsx b/interface/app/$libraryId/settings/Sidebar.tsx
index 9e2f26024..920abd6eb 100644
--- a/interface/app/$libraryId/settings/Sidebar.tsx
+++ b/interface/app/$libraryId/settings/Sidebar.tsx
@@ -32,7 +32,10 @@ export default () => {
return (
{os !== 'browser' ? (
-
+
) : (
diff --git a/interface/components/DragRegion.tsx b/interface/components/DragRegion.tsx
index 6cfde608b..708653c18 100644
--- a/interface/components/DragRegion.tsx
+++ b/interface/components/DragRegion.tsx
@@ -1,14 +1,19 @@
import { forwardRef, PropsWithChildren } from 'react';
import { cx } from '@sd/ui';
+import { useOperatingSystem } from '~/hooks';
export default forwardRef
(
- (props, ref) => (
-
- {props.children}
-
- )
+ (props, ref) => {
+ const os = useOperatingSystem();
+
+ return (
+
+ {props.children}
+
+ );
+ }
);