style the FileView component

package.json

@@ -24,6 +24,7 @@
     "astro": "^4.10.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "sharp": "^0.32.6",
     "shiki": "^1.7.0",
     "starlight-links-validator": "^0.7.1",

pnpm-lock.yaml

@@ -47,6 +47,9 @@ dependencies:
   react-dom:
     specifier: ^18.3.1
     version: 18.3.1(react@18.3.1)
+  react-icons:
+    specifier: ^5.2.1
+    version: 5.2.1(react@18.3.1)
   sharp:
     specifier: ^0.32.6
     version: 0.32.6
@@ -4572,6 +4575,14 @@ packages:
       scheduler: 0.23.2
     dev: false
 
+  /react-icons@5.2.1(react@18.3.1):
+    resolution: {integrity: sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.3.1
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: false

src/components/Playground.tsx

@@ -36,9 +36,9 @@ export default function Playground() {
                     "test.mcfunction": {
                         content: "",
                         language: "mcfunction",
-                    }
-                }
-            }
+                    },
+                },
+            },
         },
         files: {
             "pack.toml": {

src/components/playground/FileView.tsx

@@ -1,5 +1,9 @@
 import type { Directory, SetState } from "@components/Playground";
 import React, { useState } from "react";
+import {
+    GoChevronDown as ChevDown,
+    GoChevronRight as ChevRight,
+} from "react-icons/go";
 
 export default function FileView({
     root,
@@ -14,28 +18,31 @@ export default function FileView({
 }) {
     return (
         <div className={className}>
-            {Object.entries(root.dirs ?? {}).map(([name, dir]) => {
-                return (
-                    <DirElement
-                        key={name}
-                        name={name}
-                        dir={dir}
-                        fileName={fileName.slice(name.length + 1)}
-                        setSelectedFileName={setSelectedFileName}
-                    />
-                );
-            })}
-            {Object.entries(root.files ?? {}).map(([name, _]) => {
-                return (
-                    <span key={name}>
-                        <FileElement
+            <h3>Explorer</h3>
+            <div className="entries">
+                {Object.entries(root.dirs ?? {}).map(([name, dir]) => {
+                    return (
+                        <DirElement
+                            key={name}
                             name={name}
-                            disabled={fileName == name}
-                            onClick={() => setSelectedFileName(name)}
+                            dir={dir}
+                            fileName={fileName.slice(name.length + 1)}
+                            setSelectedFileName={setSelectedFileName}
                         />
-                    </span>
-                );
-            })}
+                    );
+                })}
+                {Object.entries(root.files ?? {}).map(([name, _]) => {
+                    return (
+                        <span key={name}>
+                            <FileElement
+                                name={name}
+                                disabled={fileName == name}
+                                onClick={() => setSelectedFileName(name)}
+                            />
+                        </span>
+                    );
+                })}
+            </div>
         </div>
     );
 }
@@ -50,7 +57,7 @@ function FileElement({
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }) {
     return (
-        <button disabled={disabled} onClick={onClick}>
+        <button disabled={disabled} onClick={onClick} className="file">
             {name}
         </button>
     );
@@ -75,15 +82,31 @@ function DirElement({
         setSelectedFileName(name + "/" + selected);
     };
 
+    const chevStyles: React.CSSProperties = {
+        marginBottom: "-2px",
+    };
+
+    const hasChildren =
+        Object.keys(currentDir.dirs ?? {}).length > 0 ||
+        Object.keys(currentDir.files ?? {}).length > 0;
+
     return (
-        <div key={name}>
+        <div key={name} className="dir">
             <button
                 style={{ display: "block" }}
                 onClick={() => setCollapsed(!collapsed)}
             >
-                {name}/
+                {collapsed ? (
+                    <ChevRight
+                        aria-description="collapsed"
+                        style={chevStyles}
+                    />
+                ) : (
+                    <ChevDown aria-description="expanded" style={chevStyles} />
+                )}{" "}
+                {name + "/" + (collapsed && hasChildren ? "..." : "")}
             </button>
-            <div style={{ marginLeft: ".25cm" }}>
+            <div style={{ marginLeft: "0.5cm" }} className="dirChildren">
                 {collapsed ? null : (
                     <div>
                         {Object.entries(currentDir.dirs ?? {}).map(

src/styles/playground.scss

@@ -12,6 +12,27 @@
         grid-area: files;
         display: flex;
         flex-direction: column;
+        margin-right: 0.5cm;
+
+        .entries {
+            button {
+                border: none;
+                width: 100%;
+                text-align: left;
+                background-color: transparent;
+                cursor: pointer;
+
+                &:disabled {
+                    cursor: default;
+                    color: var(--sl-color-text);
+                    background-color: #333;
+                }
+
+                &:hover {
+                    background-color: #444444;
+                }
+            }
+        }
     }
     > .editor {
         grid-area: editor;