Initial commit

client/src/components/Sidebar.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { Link } from "svelte-routing";
+  export let menuOpen = false;
+</script>
+
+<div class="sidebar" class:open={menuOpen}>
+  <div class="logo">du.pe</div>
+  <div class="menu">
+    <Link to="/" class="item" getProps={({ isCurrent }) => ({ class: isCurrent ? "item active" : "item" })}>
+      <i class="fa-solid fa-folder icon"></i> Files
+    </Link>
+    <Link to="/transfers" class="item" getProps={({ isCurrent }) => ({ class: isCurrent ? "item active" : "item" })}>
+      <i class="fa-solid fa-arrow-down icon"></i> Transfers
+    </Link>
+    <Link to="/sharing" class="item" getProps={({ isCurrent }) => ({ class: isCurrent ? "item active" : "item" })}>
+      <i class="fa-solid fa-share-nodes icon"></i> Sharing
+    </Link>
+    <Link to="/trash" class="item" getProps={({ isCurrent }) => ({ class: isCurrent ? "item active" : "item" })}>
+      <i class="fa-solid fa-trash icon"></i> Trash
+    </Link>
+  </div>
+</div>

client/src/components/Topbar.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+
+  let search = "";
+  export let placeholder = "Search files...";
+  const onToggle = () => dispatch("toggleMenu");
+</script>
+
+<div class="topbar">
+  <!-- Mobilde görünen hamburger -->
+  <button class="menu-toggle" on:click={onToggle} aria-label="Toggle menu">
+    <i class="fa-solid fa-bars"></i>
+  </button>
+
+  <div class="search">
+    <i class="fa-solid fa-magnifying-glass"></i>
+    <input placeholder={placeholder} bind:value={search} />
+  </div>
+</div>

client/src/components/TorrentItem.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let t;
+</script>
+
+<div class="torrent">
+  <div style="flex:1">
+    <div style="font-weight:600;">{t.name}</div>
+    <div class="progress"><div style="width:{t.progress * 100}%"></div></div>
+    <div class="small">{Math.round(t.progress * 100)}% - {t.downloadSpeed} KB/s</div>
+  </div>
+</div>