More virtual files

src/lib/components/monaco-viewer/MonacoFilename.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-import { FILE_ICONS, type MonacoFile } from "./monaco-types";
+import type { MonacoFile } from "./monaco-types";
 
 export let file: MonacoFile;
 </script>
 
-<div style:--icon={`url("${FILE_ICONS[file.type] || FILE_ICONS["_default"]}")`}>
+<div style:--icon={`url("${file.icon}")`}>
   <h4>{file.name}</h4>
 </div>
 

src/lib/components/monaco-viewer/MonacoViewer.svelte

@@ -34,6 +34,7 @@ $: for (const file of files) {
 				open: false,
 			};
 		}
+		if (file.open) folder.open = true;
 	}
 	folder.files.push(file);
 }
@@ -80,16 +81,16 @@ function closeFile(file: MonacoFile) {
   <div id="explorer">
     <MonacoFolderComponent name="WORKSPACE" folder={rootFolder} {openFile}/>
   </div>
-  <div id="editor" class:markdown={activeFile && activeFile.type === "previewMarkdown"}>
+  <div id="editor" class:markdown={activeFile && activeFile.highlight_type === "markdown_preview"}>
     {#if activeFile}
-      {#if activeFile.type === "previewMarkdown"}
+      {#if activeFile.highlight_type === "raw"}
+        {activeFile.contents}
+      {:else if activeFile.highlight_type === "markdown_preview"}
         <SvelteMarkdown source={activeFile.contents}/>
-      {:else if activeFile.type === "svelte"}
+      {:else if activeFile.highlight_type === "svelte"}
         <HighlightSvelte code={activeFile.contents}/>
-      {:else if activeFile.type in SVELTE_HIGHLIGHT_LANGUAGES}
-        <Highlight language={SVELTE_HIGHLIGHT_LANGUAGES[activeFile.type]} code={activeFile.contents}/>
       {:else}
-        {activeFile.contents}
+        <Highlight language={SVELTE_HIGHLIGHT_LANGUAGES[activeFile.highlight_type]} code={activeFile.contents}/>
       {/if}
       <!--
         I also want to add line numbers, but it's hard to integrate this with highlight-svelte.
@@ -168,6 +169,7 @@ h3, span {
   min-width: 500px;
   list-style: none;
   padding: 0;
+  overflow: auto hidden; /* The horizontal scrollbar is too thick, but it's better than the entire viewer scrolling */
 
   & > li {
     position: relative;
@@ -224,6 +226,7 @@ h3, span {
 #explorer {
   border-right: var(--border);
   line-height: 22px;
+  overflow-y: auto;
 }
 
 #editor {

src/lib/components/monaco-viewer/monaco-types.ts

@@ -1,24 +1,110 @@
+import ConfigIcon from "$lib/media/monaco-viewer/icons/config.svg";
+import CPPIcon from "$lib/media/monaco-viewer/icons/cpp.svg";
+import CSSIcon from "$lib/media/monaco-viewer/icons/css.svg";
 import DefaultIcon from "$lib/media/monaco-viewer/icons/default.svg";
+import ESLintIcon from "$lib/media/monaco-viewer/icons/eslint.svg";
+import GitIcon from "$lib/media/monaco-viewer/icons/git.svg";
+import HTMLIcon from "$lib/media/monaco-viewer/icons/html.svg";
+import JavaIcon from "$lib/media/monaco-viewer/icons/java.svg";
+import JavascriptIcon from "$lib/media/monaco-viewer/icons/javascript.svg";
+import JSONIcon from "$lib/media/monaco-viewer/icons/json.svg";
+import MavenIcon from "$lib/media/monaco-viewer/icons/maven.svg";
+import PHPIcon from "$lib/media/monaco-viewer/icons/php.svg";
 import PreviewIcon from "$lib/media/monaco-viewer/icons/preview.svg";
 import PythonIcon from "$lib/media/monaco-viewer/icons/python.svg";
+import StylelintIcon from "$lib/media/monaco-viewer/icons/stylelint.svg";
 import SvelteIcon from "$lib/media/monaco-viewer/icons/svelte.svg";
-import { type LanguageType, python } from "svelte-highlight/languages";
+import TypescriptIcon from "$lib/media/monaco-viewer/icons/typescript.svg";
+import WebpackIcon from "$lib/media/monaco-viewer/icons/webpack.svg";
+import {
+	cpp,
+	css,
+	java,
+	javascript,
+	json,
+	php,
+	python,
+	typescript,
+	xml,
+	yaml,
+} from "svelte-highlight/languages";
 
-export const SVELTE_HIGHLIGHT_LANGUAGES: {
-	[key: string]: LanguageType<string>;
-} = {
+type HighlightType =
+	| "raw"
+	| "markdown_preview"
+	| "svelte"
+	| keyof typeof SVELTE_HIGHLIGHT_LANGUAGES;
+
+export const SVELTE_HIGHLIGHT_LANGUAGES = {
+	cpp,
+	css,
+	html: xml,
+	java,
+	js: javascript,
+	json,
+	php,
 	py: python,
+	ts: typescript,
+	xml,
+	yml: yaml,
 };
 
-export const FILE_ICONS: { [key: string]: string } = {
-	_default: DefaultIcon,
-	previewMarkdown: PreviewIcon,
-	svelte: SvelteIcon,
-	py: PythonIcon,
-};
+export function chooseHighlightType(
+	filename: string,
+	extension: string,
+): HighlightType {
+	if (extension === "svelte") return "svelte";
+	if (filename.startsWith("Preview ") && extension === "md")
+		return "markdown_preview";
+	if (extension in SVELTE_HIGHLIGHT_LANGUAGES)
+		return extension as keyof typeof SVELTE_HIGHLIGHT_LANGUAGES;
+	return "raw";
+}
+
+export function chooseFileIcon(filename: string, extension: string) {
+	switch (extension) {
+		case "cpp":
+			return CPPIcon;
+		case "css":
+			return CSSIcon;
+		case "htaccess":
+			return ConfigIcon;
+		case "gitignore":
+			return GitIcon;
+		case "html":
+			return HTMLIcon;
+		case "java":
+			return JavaIcon;
+		case "js":
+			if (filename.startsWith("eslint.")) return ESLintIcon;
+			if (filename.startsWith("webpack.")) return WebpackIcon;
+			return JavascriptIcon;
+		case "json":
+			return JSONIcon;
+		case "md":
+			// Currently, all markdown files are preview
+			return PreviewIcon;
+		case "php":
+			return PHPIcon;
+		case "py":
+			return PythonIcon;
+		case "svelte":
+			return SvelteIcon;
+		case "ts":
+			return TypescriptIcon;
+		case "xml":
+			// Currently, the only XML file is pom.xml
+			return MavenIcon;
+		case "yml":
+			// Currently, the only YML file is .stylelintrc.yml
+			return StylelintIcon;
+	}
+	return DefaultIcon;
+}
 
 export interface MonacoFile {
-	type: string;
+	highlight_type: HighlightType;
+	icon: string;
 	name: string;
 	path: string;
 	contents?: string;

src/lib/media/monaco-viewer/icons/README.md

@@ -1,3 +1,3 @@
 preview.svg is adapted from [VSCode's preview-dark.svg](https://github.com/microsoft/vscode/blob/e0e011ce6050040d1f2898f27969e0befc1711a4/extensions/markdown-language-features/media/preview-dark.svg)
 
-All other icons are from [seti-ui](https://github.com/jesseweed/seti-ui/tree/8fef6fa2992ff442158fde1928a3f079c910e999). They have been modified to fill with the corresponding colors.
+All other icons are from [seti-ui](https://github.com/jesseweed/seti-ui/tree/8fef6fa2992ff442158fde1928a3f079c910e999). They have been compressed and modified to fill with the corresponding colors.