[ENG-380] Interface code structure improvement (#581)

* beginnings of app directory

* settings mostly good

* colocate way more components

* flatten components folder

* reexport QueryClientProvider from client

* move CodeBlock back to interface

* colocate Explorer, KeyManager + more

* goddamn captialisation

* get toasts out of components

* please eslint

* no more src directory

* $ instead of :

* added back RowHeader component

* fix settings modal padding

* more spacing, less margin

* fix sidebar locations button

* fix tags sidebar link

* clean up back button

* added margin to explorer context menu to prevent contact with edge of viewport

* don't export QueryClientProvider from @sd/client

* basic guidelines

* import interface correctly

* remove old demo data

* fix onboarding layout

* fix onboarding navigation

* fix key manager settings button

---------

Co-authored-by: Jamie Pine <ijamespine@me.com>

interface/hooks/useOperatingSystem.ts

@@ -0,0 +1,32 @@
+import { useQuery } from '@tanstack/react-query';
+import { OperatingSystem, usePlatform } from '../util/Platform';
+
+export function guessOperatingSystem(): OperatingSystem {
+	let os: OperatingSystem = 'unknown';
+	if (navigator.userAgent.indexOf('Win') != -1) os = 'windows';
+	if (navigator.userAgent.indexOf('Mac') != -1) os = 'macOS';
+	if (navigator.userAgent.indexOf('X11') != -1 || navigator.userAgent.indexOf('Linux') != -1)
+		os = 'linux';
+	return os;
+}
+
+// This hook will return the current os we are using.
+// It will guess the OS on first render until Tauri responds with a more accurate answer.
+// This means the app can open insanely quickly without any weird layout shift.
+// Setting `realOs` to true will return a best guess of the underlying operating system instead of 'browser'.
+export function useOperatingSystem(realOs?: boolean): OperatingSystem {
+	const platform = usePlatform();
+	const { data } = useQuery(
+		['_tauri', 'platform'],
+		async () => {
+			return platform.getOs ? await platform.getOs() : guessOperatingSystem();
+		},
+		{
+			// Here we guess the users operating system from the user agent for the first render.
+			initialData: guessOperatingSystem,
+			enabled: platform.getOs !== undefined
+		}
+	);
+
+	return platform.platform === 'web' && !realOs ? 'browser' : data;
+}