updated styling pt.2

updated styling pt.1
works (now), lol
2025-11-25 21:07:48 +01:00 · 2025-11-25 20:39:48 +01:00 · 2025-11-25 19:46:02 +01:00 · 2025-11-25 19:45:20 +01:00 · 2025-11-25 17:13:02 +01:00
6 changed files with 510 additions and 206 deletions
--- a/app/src/assets/dev/index.html
+++ b/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) {
--- a/app/src/assets/style/style.css
+++ b/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 */
@@ -49,21 +49,21 @@ body {
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
+    overflow: hidden;
 }

 .container {
-    max-width: 1200px;
-    margin: 0 auto;
+    margin: 4vh;
    padding: 0;
-    min-height: 100vh;
    display: flex;
    flex-direction: column;
+    height: 92vh;
 }

 .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,26 @@ body {
    white-space: nowrap;
 }

+.theme-toggle {
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    border: none;
+    background: var(--text-secondary);
+    -webkit-mask: var(--icon) center/60% no-repeat;
+    mask: var(--icon) center/60% no-repeat;
+    -webkit-mask-size: 60%;
+    mask-size: 60%;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.theme-toggle:active {
+    transform: scale(0.98);
+}
+
 .btn:hover {
    background-color: var(--accent);
    border-color: var(--accent);
@@ -142,14 +162,16 @@ body {
 }

 .content {
-    padding: 1.5rem;
+    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
-    align-items: center;
    flex-wrap: wrap;
    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;
+    overflow: scroll;
+    height: 100%;
 }

 .meta {
@@ -157,6 +179,8 @@ body {
    gap: 2rem;
    font-size: 0.875rem;
    flex-wrap: wrap;
+    justify-content: space-between;
+    width: 100%;
 }

 #summary {
@@ -213,117 +237,196 @@ body {
    overflow-x: auto;
 }

-/* Table Layout */
-.file-table {
+.file-row a,
+.btn,
+.theme-toggle {
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.file-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
    width: 100%;
-    border-collapse: collapse;
+    background: transparent;
+    border-radius: 0.25rem;
+    overflow: hidden;
 }

-.file-table thead {
-    position: sticky;
-    top: 0;
-    background-color: var(--bg-secondary);
-    z-index: 5;
-}
-
-.file-table th {
-    text-align: left;
+.file-row {
+    display: grid;
+    grid-template-columns: 2.5rem 1fr 10.5rem 14rem;
+    align-items: center;
+    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
-    color: var(--text-secondary);
-    font-size: 0.875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.file-table tbody tr {
-    border-bottom: 1px solid var(--border-color);
-    transition: all 0.2s ease;
+    transition: background-color 0.15s ease, transform 0.08s ease;
    cursor: pointer;
+    background: transparent;
 }

-.file-table tbody tr:hover {
-    background-color: var(--file-hover);
+.file-row > div:first-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
 }

-.file-table td {
-    padding: 0.75rem;
-    color: var(--text-primary);
+.file-row .name {
+    align-self: center;
+    display: block;
 }

-.file-table td.icon {
+.file-list .file-row:last-child {
+    border-bottom: none;
+}
+
+.file-row > div:first-child {
    width: 2.5rem;
-    font-size: 1.25rem;
-    text-align: center;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.125rem;
 }

-.file-table td.name {
+/* name cell */
+.file-row .name {
+    display: flex;
+    align-items: center;   /* vertically center the link text with the icon */
+    min-width: 0;          /* allow ellipsis to work inside flex items */
    font-weight: 500;
-}
-
-.file-table tr.directory td.name {
-    color: var(--accent);
-    font-weight: 600;
-}
-
-.file-table td.size,
-.file-table td.date {
-    color: var(--text-secondary);
-    font-size: 0.875rem;
+    color: var(--text-primary);
+    overflow: hidden;      /* keep long names from breaking layout */
+    text-overflow: ellipsis;
    white-space: nowrap;
 }

-/* Grid Layout */
-.grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: 1rem;
+/* name link */
+.file-row .name a {
+    display: block;        /* block-level so height:100% works reliably */
+    width: 100%;
+    height: 100%;          /* fill the .name (including padding row gives) */
+    line-height: 1.2;      /* control baseline — tweak if you want tighter/looser text */
+    text-decoration: none;
+    color: inherit;
+    padding: 0;            /* avoid extra internal vertical padding */
+    overflow: hidden;      /* ensure ellipsis works on the link text */
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }

-.grid-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 1rem;
-    background-color: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: 0.5rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    text-align: center;
-}
-
-.grid-item:hover {
-    background-color: var(--file-hover);
-    border-color: var(--accent);
-    transform: translateY(-2px);
-}
-
-.grid-icon {
-    font-size: 2.5rem;
-    margin-bottom: 0.75rem;
-}
-
-.grid-name {
-    font-weight: 500;
-    color: var(--text-primary);
-    word-break: break-word;
-    overflow-wrap: break-word;
-    font-size: 0.875rem;
-    margin-bottom: 0.5rem;
-}
-
-.grid-item:has(.grid-name) .grid-name {
+/* directory emphasis */
+.file-row.directory .name {
    color: var(--accent);
    font-weight: 600;
 }

-.grid-size {
-    font-size: 0.75rem;
+/* size and date cells */
+.file-row .size,
+.file-row .date {
    color: var(--text-secondary);
-    margin-top: auto;
+    font-size: 0.875rem;
+    white-space: nowrap;
+    justify-self: end;
+}
+
+/* smaller size column alignment */
+.file-row .size {
+    justify-self: end;
+}
+
+/* hover / focus */
+.file-row:hover {
+    background-color: var(--file-hover);
+}
+
+.file-row:active {
+    transform: translateY(0.5px);
+}
+
+.file-list.compact .file-row {
+    padding: 0.5rem;
+    grid-template-columns: 2rem 1fr 8.5rem 12rem;
+}
+
+@media (max-width: 992px) {
+    .file-row {
+        grid-template-columns: 2.5rem 1fr 9rem 12rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .file-row {
+        grid-template-columns: 2.5rem 1fr 9rem; /* icon | name | size */
+    }
+
+    .file-row .date {
+        display: none;
+    }
+
+    .file-row .size {
+        justify-self: end;
+        color: var(--text-secondary);
+    }
+}
+
+@media (max-width: 480px) {
+    .file-row {
+        grid-template-columns: 2.5rem 1fr;
+        grid-template-rows: auto auto;
+        gap: 0.25rem 0.5rem;
+        align-items: center; /* center items rather than start */
+        padding: 0.6rem;
+    }
+
+    .file-row > div:first-child {
+        grid-row: 1 / span 2;
+        align-self: center; /* was start, now center */
+        width: 2.5rem;
+        height: 2.5rem; /* slightly bigger on mobile for touch */
+    }
+
+    .file-row .name {
+        grid-column: 2;
+        grid-row: 1;
+        white-space: normal;
+        overflow: visible;
+        align-self: center;
+    }
+
+    @media (max-width: 480px) {
+        .file-row .name a {
+            padding-left: 4px;
+            padding-right: 4px;
+        }
+    }
+
+    .file-row .size {
+        grid-column: 2;
+        grid-row: 2;
+        justify-self: start;
+        color: var(--text-secondary);
+        font-size: 0.85rem;
+    }
+
+    .file-row .date {
+        display: none;
+    }
+}
+
+@media (max-width: 480px) {
+    .theme-toggle {
+        width: 1.5rem;
+        height: 1.5rem;
+        -webkit-mask-size: 56%;
+        mask-size: 56%;
+    }
+}
+
+.view-list .file-list {
+    display: block;
 }

 .empty-state {
@@ -345,6 +448,7 @@ body {
    }

    .listing {
+        width: 100%;
        padding: 1rem;
    }

@@ -354,23 +458,6 @@ body {
        align-items: flex-start;
    }

-    .file-table td.date {
-        display: none;
-    }
-
-    .file-table th:last-child {
-        display: none;
-    }
-
-    .grid {
-        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-        gap: 0.75rem;
-    }
-
-    .grid-item {
-        padding: 0.75rem;
-    }
-
    .path-container {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
@@ -427,33 +514,6 @@ body {
        font-size: 0.75rem;
        flex-direction: column;
    }
-
-    .file-table th,
-    .file-table td {
-        padding: 0.5rem 0.25rem;
-    }
-
-    .file-table td.size {
-        display: none;
-    }
-
-    .grid {
-        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-        gap: 0.5rem;
-    }
-
-    .grid-item {
-        padding: 0.5rem;
-    }
-
-    .grid-icon {
-        font-size: 2rem;
-        margin-bottom: 0.5rem;
-    }
-
-    .grid-name {
-        font-size: 0.7rem;
-    }
 }

 /* Scrollbar Styling */
--- a/app/src/main.v
+++ b/app/src/main.v
@@ -1,20 +1,11 @@
 module main

-import veb
 import os
-import log
+import veb
+import util
+// import app.src.util // IDE display version

-struct Config {
-pub mut:
-	root string
-	port int
-}
-
-struct Embedded {
-pub mut:
-	style_css string
-	error_css string
-}
+//

 pub struct User {
 pub mut:
@@ -25,7 +16,7 @@ pub mut:
 pub struct Context {
 	veb.Context
 pub mut:
-	embed      Embedded
+	embed      util.Embedded
 	user       User
 	session_id string
 }
@@ -35,7 +26,9 @@ pub struct App {
 	veb.StaticHandler
 	veb.Middleware[Context]
 pub mut:
-	embed Embedded
+	embed util.Embedded
+pub:
+	cfg util.Config
 }

 pub struct Auth {}
@@ -44,30 +37,45 @@ pub struct Auth {}

@['/:path...']
 pub fn (app &App) root(mut ctx Context, path string) veb.Result {
-	style := app.embed.style_css
-	return ctx.html($tmpl('template/dashboard.html'))
+	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()
 	}

-@['/error']
-pub fn (app &App) error(mut ctx Context) veb.Result {
-	return ctx.html(ctx.error_page(500, 'Internal Server Error', 'Oops! Seems like something went wrong here.'))
+	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.text(content)
+	}
+
+	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'))
 }

 // auth endpoints

@[get; post]
 pub fn (auth &Auth) login(mut ctx Context) veb.Result {
-	return ctx.text('')
+	return ctx.text('login')
 }

@[get; post]
 pub fn (auth &Auth) logout(mut ctx Context) veb.Result {
-	return ctx.text('')
+	return ctx.text('logout')
 }

@[get; post; put]
 pub fn (auth &Auth) register(mut ctx Context) veb.Result {
-	return ctx.text('')
+	return ctx.text('register')
 }

 // utility
@@ -77,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.'))
@@ -84,28 +97,37 @@ pub fn (mut ctx Context) not_found() veb.Result {

 // --

-fn populate() &Config {
-	mut cfg := &Config{
-		root: $d('root', '.')
-		port: $d('port', 6767)
-	}
+fn populate() &util.Config {
+	def_root := $d('root', '.')
+	def_port := int($d('port', 6767))

-	if os.getenv('CDN_ROOT') != '' {
-		cfg.root = os.getenv('CDN_ROOT').str()
-	}
-	if os.getenv('CDN_PORT') != '' {
-		cfg.port = os.getenv('CDN_PORT').int()
-	}
+	def_user := $d('username', 'cdn')
+	def_pass := $d('password', 'totallySafeCdnDatabasePassword1235')

-	return cfg
+	return &util.Config{
+		root:     if os.getenv('CDN_ROOT') != '' { os.getenv('CDN_ROOT').str() } else { def_root }
+		port:     if os.getenv('CDN_PORT') != '' { os.getenv('CDN_PORT').int() } else { def_port }
+		database: &util.Database{
+			username: if os.getenv('CDN_DB_USERNAME') != '' {
+				os.getenv('CDN_DB_USERNAME').str()
+			} else {
+				def_user
+			}
+			password: if os.getenv('CDN_DB_PASSWORD') != '' {
+				os.getenv('CDN_DB_PASSWORD').str()
+			} else {
+				def_pass
+			}
+		}
+	}
 }

 fn main() {
-	cfg := populate()
-
-	mut app := &App{}
+	mut app := &App{
+		cfg: populate()
+	}
 	mut auth := &Auth{}
-	app.embed = &Embedded{
+	app.embed = &util.Embedded{
 		style_css: $embed_file('assets/style/style.css', .zlib).to_string()
 		error_css: $embed_file('assets/style/error.css', .zlib).to_string()
 	}
@@ -122,5 +144,5 @@ fn main() {
 		}
 	})

-	veb.run[App, Context](mut app, cfg.port)
+	veb.run[App, Context](mut app, app.cfg.port)
 }
--- a/app/src/template/dashboard.html
+++ b/app/src/template/dashboard.html
--- a/app/src/util/structs.v
+++ b/app/src/util/structs.v
@@ -0,0 +1,217 @@
+// src/controller/structs/structs.v
+module util
+
+import os
+import time
+import encoding.base64
+
+pub struct Database {
+pub:
+	username string
+	password string
+}
+
+pub struct Config {
+pub mut:
+	root string
+	port int
+pub:
+	database Database
+}
+
+pub struct Embedded {
+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
+	icon     string
+}
+
+pub struct Utility {}
+
+pub fn Utility.get_icon(ext string, is_dir bool) string {
+	icons := {
+		'dir':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/></svg>' //'icon-dir'
+		'pdf':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>' // 'icon-pdf',
+		'txt':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M280-280h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm-80 480q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>'
+		'md':      '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M280-280h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm-80 480q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>'
+		'json':    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>'
+		'xml':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>'
+		'jpg':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>'
+		'jpeg':    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>'
+		'png':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>'
+		'gif':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>'
+		'svg':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>'
+		'zip':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M640-480v-80h80v80h-80Zm0 80h-80v-80h80v80Zm0 80v-80h80v80h-80ZM447-640l-80-80H160v480h400v-80h80v80h160v-400H640v80h-80v-80H447ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80v-480 480Z"/></svg>'
+		'rar':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M640-480v-80h80v80h-80Zm0 80h-80v-80h80v80Zm0 80v-80h80v80h-80ZM447-640l-80-80H160v480h400v-80h80v80h160v-400H640v80h-80v-80H447ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80v-480 480Z"/></svg>'
+		'7z':      '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M640-480v-80h80v80h-80Zm0 80h-80v-80h80v80Zm0 80v-80h80v80h-80ZM447-640l-80-80H160v480h400v-80h80v80h160v-400H640v80h-80v-80H447ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80v-480 480Z"/></svg>'
+		'mp3':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M430-200q38 0 64-26t26-64v-150h120v-80H480v155q-11-8-23.5-11.5T430-380q-38 0-64 26t-26 64q0 38 26 64t64 26ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>'
+		'mp4':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M360-240h160q17 0 28.5-11.5T560-280v-40l80 42v-164l-80 42v-40q0-17-11.5-28.5T520-480H360q-17 0-28.5 11.5T320-440v160q0 17 11.5 28.5T360-240ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>'
+		'avi':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M360-240h160q17 0 28.5-11.5T560-280v-40l80 42v-164l-80 42v-40q0-17-11.5-28.5T520-480H360q-17 0-28.5 11.5T320-440v160q0 17 11.5 28.5T360-240ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>'
+		'mov':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M360-240h160q17 0 28.5-11.5T560-280v-40l80 42v-164l-80 42v-40q0-17-11.5-28.5T520-480H360q-17 0-28.5 11.5T320-440v160q0 17 11.5 28.5T360-240ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>'
+		'java':    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>'
+		'py':      '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>'
+		'js':      '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>'
+		'ts':      '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>'
+		'v':       '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>'
+		'html':    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h420v-140H160v140Zm500 0h140v-360H660v360ZM160-460h420v-140H160v140Z"/></svg>'
+		'css':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h420v-140H160v140Zm500 0h140v-360H660v360ZM160-460h420v-140H160v140Z"/></svg>'
+		'exe':     '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"/></svg>'
+		'unknown': '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>'
+	}
+
+	return Utility.svg_to_data_uri(if is_dir { icons['dir'] } else { icons[ext] or {
+			icons['unknown']} })
+}
+
+pub fn Utility.svg_to_data_uri(svg string) string {
+	return svg
+	// return 'data:image/svg+xml;base64,${base64.encode(svg.bytes())}'
+}
+
+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)!
+		file_ext := full_path.split('.').last()
+
+		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
+			icon:     Utility.get_icon(file_ext, is_dir)
+		}
+	}
+
+	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 := '<div class="file-list">'
+
+	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 += '<div class="file-row ${file_class}">'
+			html += '<div>${entry.icon}</div>'
+			html += '<div class="name"><a href="${entry.path}">${entry.name}</a></div>'
+			html += '<div class="size">-</div>'
+			html += '<div class="date">${Utility.format_date(entry.modified)}</div>'
+			html += '</div>'
+		} else {
+			file_count++
+			total_size += entry.size
+			html += '<div class="file-row file">'
+			html += '<div>${entry.icon}</div>'
+			html += '<div class="name"><a href="${entry.path}">${entry.name}</a></div>'
+			html += '<div class="size">${Utility.format_size(entry.size)}</div>'
+			html += '<div class="date">${Utility.format_date(entry.modified)}</div>'
+			html += '</div>'
+		}
+	}
+
+	html += '</div>'
+
+	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>'
+}
--- a/app/src/v.mod
+++ b/app/src/v.mod
@@ -1,5 +1,5 @@
 Module {
-	name: 'CDN'
+	name: 'app'
 	description: ''
 	version: '0.0.1'
 	license: 'MIT'
Author	SHA1	Message	Date
Overlord	b448ded507	updated styling pt.2	2025-11-25 21:07:48 +01:00
Overlord	98d199b6d1	updated styling pt.1	2025-11-25 20:39:48 +01:00
Overlord	1eeeb59fc7	works (now), lol	2025-11-25 19:46:02 +01:00
Overlord	768c444b34	works, lol	2025-11-25 19:45:20 +01:00
Overlord	12658c14c3	moved structs to extra file, added config db keys	2025-11-25 17:13:02 +01:00