more frontend work

web/package.json

@@ -14,6 +14,7 @@
 		"test": "npm run test:unit -- --run"
 	},
 	"devDependencies": {
+		"@iconify/svelte": "^4.2.0",
 		"@sveltejs/adapter-auto": "^4.0.0",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
@@ -24,7 +25,6 @@
 		"jsdom": "^26.0.0",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
-		"tailwindcss": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^6.2.5",
 		"vitest": "^3.0.0"
@@ -32,9 +32,7 @@
 	"dependencies": {
 		"@inlang/paraglide-js": "^2.0.0",
 		"bulma": "^1.0.3",
-		"node-sass": "^9.0.0",
 		"rollup-plugin-postcss": "^4.0.2",
-		"svelma": "^0.4.5",
 		"svelte-preprocess": "^6.0.3"
 	}
 }

web/src/app.css

@@ -1 +1,7 @@
 @import 'bulma';
+html,
+body {
+    height: 100%;
+    margin: 0px;
+        padding: 0px;
+}

web/src/lib/components/sidebar.svelte

@@ -1,9 +1,9 @@
 <aside class="sidebar pl-0 mb-0">
   <p class="sidebar-header">Workspace</p>
   <ul class="sidebar-list">
-    <li class="is-active"><button>[ic] Files</button></li>
+    <li class="is-active"><button><Icon icon="akar-icons:copy"></Icon> Files</button></li>
-    <li><button>[ic] Favorites</button></li>
+    <li><button><Icon icon="akar-icons:heart"></Icon> Favorites</button></li>
-    <li><button>[ic] Activities</button></li>
+    <li><button><Icon icon="akar-icons:clock"></Icon> Activities</button></li>
   </ul>
   <p class="sidebar-header">Help</p>
   <ul class="sidebar-list">
@@ -12,7 +12,12 @@
   </ul>
 </aside>
 
-<style scoped>
+
+<script lang="ts">
+import Icon from "@iconify/svelte";
+</script>
+
+<style>
 .sidebar {
 
 }
@@ -26,14 +31,17 @@
     padding-left: 5px;
     margin-bottom: 25px;
 }
-.sidebar-list li {
+.sidebar-list li button {
     padding-left: 8px;
-    padding-top: 6px;
+    padding-top: 10px;
-    padding-bottom: 6px;
+    padding-bottom: 10px;
     padding-right: 5px;
-    border-radius: 5px;
+    border-radius: 2.5px;
+    /* margin-top: 4px; */
+    width: 100%;
+    text-align: left;
 }
-.sidebar-list li:hover, .sidebar-list li.is-active {
+.sidebar-list li button:hover, .sidebar-list li button.is-active {
     background-color: lightgray;
 }
 </style>

web/src/routes/+layout.svelte

@@ -7,13 +7,20 @@
 </script>
 
 <Nav />
-<div class="mx-5">
+<div class="mx-5 columns">
-	<div class="columns">
+	<div class="column pl-0 sidebar-column">
-		<div class="column pl-0">
+		<Sidebar />
-			<Sidebar />
+	</div>
-		</div>
+	<div class="column is-10">
-		<div class="column is-10">
+		{@render children()}
-			{@render children()}
-		</div>
 	</div>
 </div>
+
+<style>
+.columns, .sidebar-column {
+	height: 100%;
+}
+.sidebar-column {
+	border-right: 1px solid lightgray;
+}
+</style>

web/src/routes/+page.svelte

@@ -1,4 +1,29 @@
-<h4 class="title is-4">My Files</h4>
+<div class="">
+    <h4 class="title is-4 is-inline">My Files</h4>
+    <div class="is-pulled-right is-inline-block">
+        <div class="buttons">
+            <div class="button is-small">
+                Display
+            </div>
+            <div class="button is-small">
+                Sort
+            </div>
+        </div>
+    </div>
+    <hr class="my-2">
+    <table class="table is-fullwidth">
+        <thead>
+            <tr>
+                <td>Name </td>
+                <td>Size </td>
+                <td>Last Updated </td>
+                <td>Owner </td>
+            </tr>
+        </thead>
+    </table>
+</div>
+<FileList />
 
 <script lang="ts">
+import FileList from '$lib/components/filelist.svelte'
 </script>

web/vite.config.ts

@@ -3,6 +3,7 @@ import tailwindcss from '@tailwindcss/vite';
 import { paraglideVitePlugin } from '@inlang/paraglide-js';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import Icons from 'unplugin-icons/vite'
 
 export default defineConfig({
 	plugins: [
@@ -11,6 +12,9 @@ export default defineConfig({
 		paraglideVitePlugin({
 			project: './project.inlang',
 			outdir: './src/lib/paraglide'
+		} ),
+		Icons( {
+			compiler: 'svelte',
 		})
 	],
 	test: {