Add sidebar and dropdown UI to editor

.yarnrc.yml

@@ -1,2 +1,2 @@
-yarnPath: ".yarn/releases/yarn-berry.js"
+yarnPath: ".yarn/releases/yarn-berry.cjs"
 nodeLinker: node-modules

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"

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 @@
 </script>
 
 <div class="flex h-[calc(100vh-5rem)] w-screen border-gray-500 border-t-[1px]">
+	{#if currentSidebar}
 	<div class="w-[20%] h-full flex">
-		<div class="w-[20%] h-full bg-slate-900 border-r-[1px] border-gray-500"></div>
-		<div class="w-[80%] h-full bg-slate-900 border-r-[1px] border-gray-500">
+		<Sidebar />
+		<div class="w-full h-full bg-slate-900 border-r-[1px] border-gray-500">
 			{#if currentSidebar === "files"}
 				<Files />
+			{:else}
+				<div class="flex items-center justify-center h-full text-gray-500">
+					<p class="text-lg">No content for {currentSidebar} tab yet.</p>
+				</div>
 			{/if}
 		</div>
 	</div>
-	<div class="w-[80%] h-full">
+	{/if}
+	<div class="w-full h-full">
 		<div class="h-[5%] bg-slate-900 border-b-[1px] border-gray-500"></div>
 		<canvas bind:this={canvas} class="h-[95%] w-full"></canvas>
 	</div>

apps/web-application/src/lib/Components/Editor/Sidebar.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+   	import FaNetworkWired from 'svelte-icons/fa/FaNetworkWired.svelte'
+	import FaDownload from 'svelte-icons/fa/FaDownload.svelte'
+	import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
+	import FaCopy from 'svelte-icons/fa/FaCopy.svelte'
+	import FaEdit from 'svelte-icons/fa/FaEdit.svelte'
+</script>
+
+<div class="w-[20%] xl:w-[15%] min-w-[3em] flex flex-col bg-slate-900 border-r-[1px] border-gray-500 px-2 py-4 space-y-6">
+  <FaNetworkWired />
+  <FaDownload />
+  <FaSearch />
+  <FaCopy />
+  <FaEdit />
+</div>

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;
+		}
+	}
 </script>
+<div class="flex items-center justify-between px-3 pt-3">
+  <button class="flex items-center cursor-pointer" onclick={() => openFile(name)}>
+      <img src="/DISFLOW_ICO.png" alt="Disflow file" class="h-10 rounded-sm">
+      <span class="ml-3 text-gray-200 text-lg">{name}</span>
 
-<button class="w-full px-2 flex h-12 items-center transition-all duration-75 cursor-pointer hover:border-white hover:border-2" onclick={() => {
-    changeContent(name);
-}}>
-    <img src="/DISFLOW_ICO.png" alt="Disflow file" class="h-10 rounded-sm">
-    <span class="ml-3 text-gray-200 text-lg">{name}</span>
-</button>
+    </button>
+  <div class="flex items-center space-x-2">
+    <Dropdown options={DropdownOptions} onSelect={onOptionSelected}>
+      <div class="flex items-center h-8 px-2 rounded-lg text-gray-300 cursor-pointer">
+        <FaBars />
+      </div>
+    </Dropdown>
+  </div>
+  </div>

apps/web-application/src/lib/Components/Editor/SidebarComponents/File/Files.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import File from "./File.svelte";
-
     let commands: { name: string, file: string }[] = $state([]);
-    let projectName: string = $state("");
+    let projectName: string = $state("Unnamed project");
 
     onMount(() => {
         // if(location.pathname === "/demo") {
@@ -17,9 +16,9 @@
 </script>
 
 <div class="pl-2 text-white pt-2">
-    Project: {projectName}
+    {projectName}
 </div>
 <File name="main" />
 {#each commands as command}
-    <File name={command.name} />
+<File name={command.name} />
 {/each}

apps/web-application/src/lib/Components/Theme/Dropdown/Dropdown.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	let state = $state({ isOpen: false });
+
+	let { options, onSelect }: {
+		options: string[],
+		onSelect: (value: string) => void
+	} = $props();
+
+	function handleOption(option: string) {
+		onSelect(option);
+		state.isOpen = false;
+	}
+</script>
+
+<div class="inline-block relative">
+	<button
+		onclick={() => (state.isOpen = !state.isOpen)}
+		class="cursor-pointer select-none"
+	>
+		<slot />
+	</button>
+	{#if state.isOpen}
+		<div
+			class="dropdown  absolute left-0 mt-2 w-48 bg-slate-900 border border-gray-500 rounded-lg shadow-lg z-10"
+			tabindex="0"
+			role="menu"
+			aria-label="Dropdown Menu"
+		>
+			<div class="py-2">
+				{#each options as option}
+					<button
+						onclick={() => handleOption(option)}
+						class="w-full text-left px-4 py-2 text-sm text-gray-300	hover:bg-gray-100 hover:text-black transition-colors"
+					>
+						{option}
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>

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"