From 010b8a182e96256a2ac69e8d89bbf54ca824b46f Mon Sep 17 00:00:00 2001
From: lajbel <lajbelms@gmail.com>
Date: Mon, 14 Oct 2024 22:37:28 -0300
Subject: [PATCH] chore: fix file handling

---
 src/components/Editor/MonacoEditor.tsx   |  5 ++---
 src/components/FileTree/FileEntry.tsx    |  8 +++++++-
 src/components/FileTree/FileFold.tsx     | 14 +++++++++++---
 src/components/Playground/Playground.tsx | 11 ++++++++++-
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/components/Editor/MonacoEditor.tsx b/src/components/Editor/MonacoEditor.tsx
index e195c24..3a9291b 100644
--- a/src/components/Editor/MonacoEditor.tsx
+++ b/src/components/Editor/MonacoEditor.tsx
@@ -8,10 +8,9 @@ import { configMonaco } from "./monacoConfig";
 
 type Props = {
     onMount?: () => void;
+    defaultTheme?: string;
 };
 
-const defaultTheme = localStorage.getItem("theme") as string;
-
 export const MonacoEditor: FC<Props> = (props) => {
     const { updateFile, getFile } = useProject();
     const {
@@ -101,7 +100,7 @@ export const MonacoEditor: FC<Props> = (props) => {
             defaultValue={getFile(getRuntime().currentFile)?.value}
             beforeMount={handleEditorBeforeMount}
             onMount={handleEditorMount}
-            theme={defaultTheme}
+            theme={props.defaultTheme}
             language="javascript"
             options={{
                 fontSize: 20,
diff --git a/src/components/FileTree/FileEntry.tsx b/src/components/FileTree/FileEntry.tsx
index f89cb0e..4655eaa 100644
--- a/src/components/FileTree/FileEntry.tsx
+++ b/src/components/FileTree/FileEntry.tsx
@@ -6,7 +6,6 @@ import { cn } from "../../util/cn";
 import { removeExtension } from "../../util/removeExtensions";
 import "./FileEntry.css";
 import { useEditor } from "../../hooks/useEditor";
-import { debug } from "../../util/logs";
 
 type Props = {
     file: File;
@@ -23,11 +22,13 @@ const FileButton: FC<{
     onClick: MouseEventHandler;
     icon: keyof typeof assets;
     rotate?: 0 | 90 | 180 | 270;
+    hidden?: boolean;
 }> = (props) => {
     return (
         <button
             className="btn btn-ghost btn-xs rounded-sm px-1"
             onClick={props.onClick}
+            hidden={props.hidden}
         >
             <img
                 src={assets[props.icon].outlined}
@@ -135,6 +136,11 @@ export const FileEntry: FC<Props> = ({ file }) => {
                     icon="arrow"
                     rotate={270}
                 />
+                <FileButton
+                    onClick={handleMoveDown}
+                    icon="arrow"
+                    rotate={90}
+                />
             </div>
             <img
                 src={logoByKind[file.kind]}
diff --git a/src/components/FileTree/FileFold.tsx b/src/components/FileTree/FileFold.tsx
index 5a2e3f5..b3a3e0c 100644
--- a/src/components/FileTree/FileFold.tsx
+++ b/src/components/FileTree/FileFold.tsx
@@ -1,5 +1,11 @@
 import { assets } from "@kaplayjs/crew";
-import { type FC, type PropsWithChildren, useMemo, useState } from "react";
+import {
+    type FC,
+    type PropsWithChildren,
+    useEffect,
+    useMemo,
+    useState,
+} from "react";
 import { cn } from "../../util/cn";
 import { FileToolbar } from "./FileToolbar";
 import "./FileFolder.css";
@@ -25,8 +31,10 @@ const paddingLevels = {
 
 export const FileFold: FC<Props> = (props) => {
     const [folded, setFolded] = useState(false);
-    const { getFilesByFolder } = useProject();
-    const files = useMemo(() => getFilesByFolder(props.folder), [props.folder]);
+    const { getFilesByFolder, project } = useProject();
+    const files = useMemo(() => getFilesByFolder(props.folder), [
+        project.files.values(),
+    ]);
 
     return (
         <div className="mb-2">
diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx
index eb0e4d0..f3832f5 100644
--- a/src/components/Playground/Playground.tsx
+++ b/src/components/Playground/Playground.tsx
@@ -20,6 +20,7 @@ const Playground = () => {
     } = useProject();
     const [loadingProject, setLoadingProject] = useState<boolean>(true);
     const [loadingEditor, setLoadingEditor] = useState<boolean>(true);
+    const [defaultTheme, setDefaultTheme] = useState<string | null>(null);
     const isPortrait = useMediaQuery({ query: "(orientation: portrait)" });
 
     const handleMount = () => {
@@ -29,9 +30,17 @@ const Playground = () => {
     // First useEffect
     useEffect(() => {
         const defaultTheme = localStorage.getItem("theme") as string;
+        const browserPrefersDark = window.matchMedia(
+            "(prefers-color-scheme: dark)",
+        ).matches;
+
         document.documentElement.setAttribute(
             "data-theme",
-            defaultTheme || "Ghostiny",
+            defaultTheme || (browserPrefersDark ? "Spiker" : "Ghostiny"),
+        );
+
+        setDefaultTheme(
+            defaultTheme || (browserPrefersDark ? "Spiker" : "Ghostiny"),
         );
     }, []);