works, lol

app/src/assets/dev/index.html

@@ -39,7 +39,7 @@
                     </button>
                 </div>
             </div>
-            <button class="btn theme-toggle" onclick="toggleTheme()">🌙</button>
+            <button class="btn theme-toggle" onclick="toggleTheme()"></button>
         </div>
     </div>
 
@@ -71,7 +71,6 @@
         function initTheme() {
             const savedTheme = localStorage.getItem('theme') || 'dark';
             document.documentElement.setAttribute('data-theme', savedTheme);
-            updateThemeButton();
         }
 
         function toggleTheme() {
@@ -79,13 +78,6 @@
             const newTheme = current === 'dark' ? 'light' : 'dark';
             document.documentElement.setAttribute('data-theme', newTheme);
             localStorage.setItem('theme', newTheme);
-            updateThemeButton();
-        }
-
-        function updateThemeButton() {
-            const theme = document.documentElement.getAttribute('data-theme');
-            const btn = document.querySelector('.theme-toggle');
-            btn.textContent = theme === 'dark' ? '☀️' : '🌙';
         }
 
         function getIcon(type, name) {

app/src/assets/style/style.css

@@ -4,7 +4,6 @@
     box-sizing: border-box;
 }
 
-/* Light Mode (Cloudflare Dashboard Style) */
 :root[data-theme="light"] {
     --bg-primary: #ffffff;
     --bg-secondary: #f5f7fb;
@@ -15,9 +14,9 @@
     --accent: #0051ba;
     --accent-hover: #003e8f;
     --file-hover: #f0f2f5;
+    --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSJpbmhlcml0Ij48cGF0aCBkPSJNNjAwLTY0MCA0ODAtNzYwbDEyMC0xMjAgMTIwIDEyMC0xMjAgMTIwWm0yMDAgMTIwLTgwLTgwIDgwLTgwIDgwIDgwLTgwIDgwWk00ODMtODBxLTg0IDAtMTU3LjUtMzJ0LTEyOC04Ni41UTE0My0yNTMgMTExLTMyNi41VDc5LTQ4NHEwLTE0NiA5My0yNTcuNVQ0MDktODgwcS0xOCA5OSAxMSAxOTMuNVQ1MjAtNTIxcTcxIDcxIDE2NS41IDEwMFQ4NzktNDEwcS0yNiAxNDQtMTM4IDIzN1Q0ODMtODBabTAtODBxODggMCAxNjMtNDR0MTE4LTEyMXEtODYtOC0xNjMtNDMuNVQ0NjMtNDY1cS02MS02MS05Ny0xMzh0LTQzLTE2M3EtNzcgNDMtMTIwLjUgMTE4LjVUMTU5LTQ4NHEwIDEzNSA5NC41IDIyOS41VDQ4My0xNjBabS0yMC0zMDVaIi8+PC9zdmc+')
 }
 
-/* Dark Mode (GitHub Style) */
 :root[data-theme="dark"] {
     --bg-primary: #0d1117;
     --bg-secondary: #161b22;
@@ -28,6 +27,7 @@
     --accent: #58a6ff;
     --accent-hover: #79c0ff;
     --file-hover: #1c2128;
+    --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZTNlM2UzIj48cGF0aCBkPSJNNDQwLTgwMHYtMTIwaDgwdjEyMGgtODBabTAgNzYwdi0xMjBoODB2MTIwaC04MFptMzYwLTQwMHYtODBoMTIwdjgwSDgwMFptLTc2MCAwdi04MGgxMjB2ODBINDBabTcwOC0yNTItNTYtNTYgNzAtNzIgNTggNTgtNzIgNzBaTTE5OC0xNDBsLTU4LTU4IDcyLTcwIDU2IDU2LTcwIDcyWm01NjQgMC03MC03MiA1Ni01NiA3MiA3MC01OCA1OFpNMjEyLTY5MmwtNzItNzAgNTgtNTggNzAgNzItNTYgNTZabTI2OCA0NTJxLTEwMCAwLTE3MC03MHQtNzAtMTcwcTAtMTAwIDcwLTE3MHQxNzAtNzBxMTAwIDAgMTcwIDcwdDcwIDE3MHEwIDEwMC03MCAxNzB0LTE3MCA3MFptMC04MHE2NyAwIDExMy41LTQ2LjVUNjQwLTQ4MHEwLTY3LTQ2LjUtMTEzLjVUNDgwLTY0MHEtNjcgMC0xMTMuNSA0Ni41VDMyMC00ODBxMCA2NyA0Ni41IDExMy41VDQ4MC0zMjBabTAtMTYwWiIvPjwvc3ZnPg==')
 }
 
 /* Default to dark mode */
@@ -53,7 +53,7 @@ body {
 
 .container {
     max-width: 1200px;
-    margin: 0 auto;
+    margin: 2vh auto;
     padding: 0;
     min-height: 100vh;
     display: flex;
@@ -63,7 +63,7 @@ body {
 .header {
     background-color: var(--bg-secondary);
     border-bottom: 1px solid var(--border-color);
-    padding: 1.5rem;
+    padding: 3rem;
     position: sticky;
     top: 0;
     z-index: 10;
@@ -131,6 +131,12 @@ body {
     white-space: nowrap;
 }
 
+.theme-toggle {
+    background: var(--text-secondary);
+    -webkit-mask: var(--icon) center/60% no-repeat;
+    mask: var(--icon) center/60% no-repeat;
+}
+
 .btn:hover {
     background-color: var(--accent);
     border-color: var(--accent);
@@ -150,6 +156,7 @@ body {
     gap: 1rem;
     border-bottom: 1px solid var(--border-color);
     background-color: var(--bg-secondary);
+    transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .meta {
@@ -157,6 +164,8 @@ body {
     gap: 2rem;
     font-size: 0.875rem;
     flex-wrap: wrap;
+    justify-content: space-between;
+    width: 100%;
 }
 
 #summary {
@@ -224,6 +233,7 @@ body {
     top: 0;
     background-color: var(--bg-secondary);
     z-index: 5;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 
 .file-table th {

app/src/main.v

@@ -27,6 +27,8 @@ pub struct App {
 	veb.Middleware[Context]
 pub mut:
 	embed util.Embedded
+pub:
+	cfg util.Config
 }
 
 pub struct Auth {}
@@ -35,7 +37,27 @@ pub struct Auth {}
 
 @['/:path...']
 pub fn (app &App) root(mut ctx Context, path string) veb.Result {
+	abs_root := util.Utility.normalize_path(os.abs_path(app.cfg.root))
+	abs_path := util.Utility.normalize_path(abs_root + os.abs_path(path))
+
+	if !abs_path.starts_with(abs_root) && abs_path != abs_root {
+		return ctx.forbidden()
+	}
+
+	if os.is_file(abs_path) {
+		content := os.read_file(abs_path) or { return ctx.not_found() }
+
+		ctx.res.header.add(.content_type, 'application/octet-stream')
+		ctx.res.header.add(.content_disposition, 'attachment; filename="${os.base(abs_path)}"')
+		return ctx.file(abs_path)
+	}
+
+	entries := util.Utility.list_files(abs_path, abs_root) or { return ctx.not_found() }
+
+	directory := util.HtmlBuilder.generate_breadcrumbs(abs_path.split(abs_root)[1])
+	files, meta := util.HtmlBuilder.generate_file_list(entries, abs_path)
 	style := app.embed.style_css
+
 	return ctx.html($tmpl('template/dashboard.html'))
 }
 
@@ -63,6 +85,11 @@ fn (mut ctx Context) error_page(code int, short string, long string) string {
 	return $tmpl('template/error.html')
 }
 
+pub fn (mut ctx Context) forbidden() veb.Result {
+	ctx.res.set_status(.forbidden)
+	return ctx.html(ctx.error_page(403, 'Forbidden', "Oops! You aren't allowed around here."))
+}
+
 pub fn (mut ctx Context) not_found() veb.Result {
 	ctx.res.set_status(.not_found)
 	return ctx.html(ctx.error_page(404, 'Not found', 'Oops! The page you are looking for does not exist.'))
@@ -96,9 +123,9 @@ fn populate() &util.Config {
 }
 
 fn main() {
-	cfg := populate()
+	mut app := &App{
-
+		cfg: populate()
-	mut app := &App{}
+	}
 	mut auth := &Auth{}
 	app.embed = &util.Embedded{
 		style_css: $embed_file('assets/style/style.css', .zlib).to_string()
@@ -117,5 +144,5 @@ fn main() {
 		}
 	})
 
-	veb.run[App, Context](mut app, cfg.port)
+	veb.run[App, Context](mut app, app.cfg.port)
 }

app/src/util/structs.v

@@ -1,6 +1,9 @@
 // src/controller/structs/structs.v
 module util
 
+import os
+import time
+
 pub struct Database {
 pub:
 	username string
@@ -20,3 +23,147 @@ pub mut:
 	style_css string
 	error_css string
 }
+
+pub struct FileEntry {
+pub:
+	name     string
+	abs_path string
+	path     string
+	is_dir   bool
+	size     i64
+	modified i64
+}
+
+pub struct Utility {}
+
+pub fn Utility.format_size(bytes i64) string {
+	if bytes == 0 {
+		return '-'
+	}
+
+	units := ['B', 'KB', 'MB', 'GB']
+	mut size := f64(bytes)
+	mut unit_idx := 0
+
+	for size >= 1024 && unit_idx < units.len - 1 {
+		size /= 1024
+		unit_idx++
+	}
+
+	if size < 10 {
+		return '${size:.2f}${units[unit_idx]}'
+	}
+
+	return '${size:.0f}${units[unit_idx]}'
+}
+
+pub fn Utility.format_date(unix_time i64) string {
+	return time.unix(unix_time).format_ss_milli()
+}
+
+pub fn Utility.list_files(dir_path string, relative string) ![]FileEntry {
+	mut entries := []FileEntry{}
+
+	files := os.ls(dir_path)!
+
+	for file in files {
+		full_path := os.join_path(dir_path, file)
+		is_dir := os.is_dir(full_path)
+		file_info := os.stat(full_path)!
+
+		entries << FileEntry{
+			name:     if is_dir { '${file}/' } else { file }
+			abs_path: Utility.normalize_path(full_path)
+			path:     Utility.normalize_path(full_path).split(relative)[1] // if relative != "" { Utility.normalize_path(full_path.split(relative)[1]) } else { Utility.normalize_path(full_path) }
+			is_dir:   is_dir
+			size:     if !is_dir { file_info.size } else { 0 }
+			modified: file_info.mtime
+		}
+	}
+
+	entries.sort_with_compare(fn (a &FileEntry, b &FileEntry) int {
+		if a.is_dir != b.is_dir {
+			return if a.is_dir { -1 } else { 1 }
+		}
+
+		if a.name < b.name {
+			return -1
+		}
+		if a.name > b.name {
+			return 1
+		}
+		return 0
+	})
+
+	return entries
+}
+
+pub fn Utility.normalize_path(path string) string {
+	return path.replace('\\', '/')
+}
+
+pub struct HtmlBuilder {}
+
+pub fn HtmlBuilder.generate_breadcrumbs(path string) string {
+	mut html := '<a href="/" class="breadcrumb-link">/</a>'
+
+	parts := path.trim('/').split('/')
+	mut accumulated := ''
+
+	for i, part in parts {
+		if part == '' {
+			continue
+		}
+
+		accumulated += '/${part}'
+		is_last := i == parts.len - 1
+
+		if is_last {
+			html += '<span class="breadcrumb-text">${part}</span>'
+		} else {
+			html += '<a href="${accumulated}" class="breadcrumb-link">${part}</a>'
+		}
+
+		if i < parts.len - 1 {
+			html += '<span class="breadcrumb-sep">/</span>'
+		} else {
+			html += '<span class="breadcrumb-sep">/</span>'
+		}
+	}
+
+	return html
+}
+
+pub fn HtmlBuilder.generate_file_list(entries []FileEntry, current_path string) (string, string) {
+	if entries.len == 0 {
+		return '<div class="empty-state"><p>This folder is empty</p></div>', '<span class="meta-item"><b>0</b> directories</span><span class="meta-item"><b>0</b> files</span><span class="meta-item"><b>0B</b> total</span>'
+	}
+
+	mut html := '<table class="file-table"><thead><tr><th></th><th>Name</th><th>Size</th><th>Modified</th></tr></thead><tbody>'
+
+	mut dir_count := 0
+	mut file_count := 0
+	mut total_size := i64(0)
+
+	for entry in entries {
+		if entry.is_dir {
+			dir_count++
+			file_class := 'directory'
+			html += '<tr class="file-row ${file_class}"><td>icon</td>'
+			html += '<td class="name"><a href="${entry.path}">${entry.name}</a></td>'
+			html += '<td class="size">-</td>'
+			html += '<td class="date">${Utility.format_date(entry.modified)}</td></tr>'
+		} else {
+			file_count++
+			total_size += entry.size
+			html += '<tr class="file-row file"><td>icon</td>'
+			html += '<td class="name"><a href="${entry.path}">${entry.name}</a></td>'
+			html += '<td class="size">${Utility.format_size(entry.size)}</td>'
+			html += '<td class="date">${Utility.format_date(entry.modified)}</td></tr>'
+		}
+	}
+
+	html += '</tbody></table>'
+
+	return html, '<span class="meta-item"><b>${dir_count}</b> directories</span><span class="meta-item"><b>${file_count}</b> files</span><span class="meta-item"><b>${Utility.format_size(total_size)}</b> total</span>'
+}