From 9ea1c01a3b9c3f19b65be777e25d5904ecd88353 Mon Sep 17 00:00:00 2001 From: noxyyk Date: Wed, 25 Jun 2025 19:30:34 +0200 Subject: [PATCH] Add sidebar and dropdown UI to editor --- .../{yarn-berry.js => yarn-berry.cjs} | 0 .yarnrc.yml | 2 +- apps/web-application/package.json | 1 + .../src/lib/Components/Editor/Editor.svelte | 13 ++++-- .../src/lib/Components/Editor/Sidebar.svelte | 15 +++++++ .../Editor/SidebarComponents/File/File.svelte | 42 ++++++++++++++++--- .../SidebarComponents/File/Files.svelte | 7 ++-- .../Components/Theme/Dropdown/Dropdown.svelte | 41 ++++++++++++++++++ yarn.lock | 8 ++++ 9 files changed, 115 insertions(+), 14 deletions(-) rename .yarn/releases/{yarn-berry.js => yarn-berry.cjs} (100%) create mode 100644 apps/web-application/src/lib/Components/Editor/Sidebar.svelte create mode 100644 apps/web-application/src/lib/Components/Theme/Dropdown/Dropdown.svelte diff --git a/.yarn/releases/yarn-berry.js b/.yarn/releases/yarn-berry.cjs similarity index 100% rename from .yarn/releases/yarn-berry.js rename to .yarn/releases/yarn-berry.cjs diff --git a/.yarnrc.yml b/.yarnrc.yml index 9b14b01..f4000d4 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -1,2 +1,2 @@ -yarnPath: ".yarn/releases/yarn-berry.js" +yarnPath: ".yarn/releases/yarn-berry.cjs" nodeLinker: node-modules diff --git a/apps/web-application/package.json b/apps/web-application/package.json index d66225a..6b8608f 100644 --- a/apps/web-application/package.json +++ b/apps/web-application/package.json @@ -27,6 +27,7 @@ "prettier-plugin-svelte": "^3.3.3", "svelte": "^5.0.0", "svelte-check": "^4.0.0", + "svelte-icons": "2.1.0", "typescript": "^5.0.0", "typescript-eslint": "^8.20.0", "vite": "^6.2.6" diff --git a/apps/web-application/src/lib/Components/Editor/Editor.svelte b/apps/web-application/src/lib/Components/Editor/Editor.svelte index 960920b..4d31128 100644 --- a/apps/web-application/src/lib/Components/Editor/Editor.svelte +++ b/apps/web-application/src/lib/Components/Editor/Editor.svelte @@ -4,6 +4,7 @@ import 'litegraph.js/css/litegraph.css'; import { LiteGraph } from 'litegraph.js'; import * as Nodes from '$lib/Nodes'; + import Sidebar from './Sidebar.svelte'; import Files from './SidebarComponents/File/Files.svelte'; import { changeFile, currentFile } from './SidebarComponents/File/Switch'; @@ -67,15 +68,21 @@
+ {#if currentSidebar}
-
-
+ +
{#if currentSidebar === "files"} + {:else} +
+

No content for {currentSidebar} tab yet.

+
{/if}
-
+ {/if} +
diff --git a/apps/web-application/src/lib/Components/Editor/Sidebar.svelte b/apps/web-application/src/lib/Components/Editor/Sidebar.svelte new file mode 100644 index 0000000..015746c --- /dev/null +++ b/apps/web-application/src/lib/Components/Editor/Sidebar.svelte @@ -0,0 +1,15 @@ + + +
+ + + + + +
diff --git a/apps/web-application/src/lib/Components/Editor/SidebarComponents/File/File.svelte b/apps/web-application/src/lib/Components/Editor/SidebarComponents/File/File.svelte index 3436e74..987c48b 100644 --- a/apps/web-application/src/lib/Components/Editor/SidebarComponents/File/File.svelte +++ b/apps/web-application/src/lib/Components/Editor/SidebarComponents/File/File.svelte @@ -2,11 +2,41 @@ import { changeContent } from "./Switch"; let { name }: { name: string } = $props(); + import FaBars from 'svelte-icons/fa/FaBars.svelte'; + import Dropdown from '$lib/Components/Theme/Dropdown/Dropdown.svelte'; + + const DropdownOptions: string[] = ['Clear', 'Download', 'Rename', 'Delete']; + function openFile(fileName: string) { + console.log(`Opening file: ${fileName}`); + } + function onOptionSelected(option: string) { + switch (option) { + case 'Clear': + console.log('Clear selected'); + break; + case 'Download': + console.log('Download selected'); + break; + case 'Rename': + console.log('Rename selected'); + break; + case 'Delete': + console.log('Delete selected'); + break; + } + } +
+ \ No newline at end of file + +
+ +
+ +
+ +
+
diff --git a/apps/web-application/src/lib/Components/Editor/SidebarComponents/File/Files.svelte b/apps/web-application/src/lib/Components/Editor/SidebarComponents/File/Files.svelte index 649630e..a5bf6c6 100644 --- a/apps/web-application/src/lib/Components/Editor/SidebarComponents/File/Files.svelte +++ b/apps/web-application/src/lib/Components/Editor/SidebarComponents/File/Files.svelte @@ -1,9 +1,8 @@
- Project: {projectName} + {projectName}
{#each commands as command} - + {/each} \ No newline at end of file diff --git a/apps/web-application/src/lib/Components/Theme/Dropdown/Dropdown.svelte b/apps/web-application/src/lib/Components/Theme/Dropdown/Dropdown.svelte new file mode 100644 index 0000000..26c58d0 --- /dev/null +++ b/apps/web-application/src/lib/Components/Theme/Dropdown/Dropdown.svelte @@ -0,0 +1,41 @@ + + +
+ + {#if state.isOpen} + + {/if} +
diff --git a/yarn.lock b/yarn.lock index 80bbe98..0bb3539 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3402,6 +3402,13 @@ __metadata: languageName: node linkType: hard +"svelte-icons@npm:2.1.0": + version: 2.1.0 + resolution: "svelte-icons@npm:2.1.0" + checksum: 10c0/1150b9f67302e3b3b2b7d403d5695a5e11d3f77a10393516b719ce3b306e9a300a0fc02be9ff328a2488723feccdad7709329a97c7d43d55605ab00566a482f2 + languageName: node + linkType: hard + "svelte@npm:^5.0.0": version: 5.33.14 resolution: "svelte@npm:5.33.14" @@ -3850,6 +3857,7 @@ __metadata: prettier-plugin-svelte: "npm:^3.3.3" svelte: "npm:^5.0.0" svelte-check: "npm:^4.0.0" + svelte-icons: "npm:2.1.0" tailwindcss: "npm:^4.1.8" typescript: "npm:^5.0.0" typescript-eslint: "npm:^8.20.0"