[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/scripts/generateSvgImports.mjs

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+import { format as prettierFormat } from 'prettier';
+import prettierConfig from '../../../.prettierrc.json' assert { type: 'json' };
+
+/**
+ * Make a friendly name from an svg filename
+ *
+ * @example `folder-light` => `FolderLight`
+ * @example `folder-open` => `FolderOpen`
+ * @param {string} iconName Icon name to convert
+ */
+function iconFriendlyName(iconName, delimeter = '-') {
+	return iconName
+		.split(delimeter)
+		.map((seg) => seg.toLowerCase())
+		.join('');
+}
+
+function iconBaseName(filePath) {
+	return path.basename(filePath, path.extname(filePath));
+}
+
+async function exists(path) {
+	try {
+		await fs.access(path);
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+// TODO: Do the same for mobile app too, potentially with the 1 script.
+(async function main() {
+	const files = await fs.readdir('./packages/assets/icons');
+	const icons = files.filter((path) => path.endsWith('.svg'));
+
+	const generatedCode = `\
+${icons
+	.map((path) => iconBaseName(path))
+	.map(
+		(baseName) =>
+			`import { ReactComponent as ${iconFriendlyName(
+				baseName
+			)} } from '@sd/assets/icons/${baseName}.svg';`
+	)
+	.join('\n')}
+
+export default {
+${icons
+	.map((path) => iconFriendlyName(iconBaseName(path)))
+	.map((baseName) => `\t${iconFriendlyName(baseName)},`)
+	.join('\n')}
+};
+`;
+
+	const outPath = path.resolve('./packages/interface/src/assets/icons/index.ts');
+
+	if (await exists(outPath)) {
+		await fs.rm(outPath);
+	}
+
+	await fs.writeFile(outPath, prettierFormat(generatedCode, prettierConfig));
+})();