files menu wip

for some reason auth was broken when i tested
so if that's still broken ill fix

src/server/routes/fileApiRoutes.ts

@@ -2,6 +2,7 @@ import bodyParser from "body-parser";
 import { Router } from "express";
 import * as Accounts from "../lib/accounts";
 import * as auth from "../lib/auth";
+import bytes from "bytes"
 
 import ServeError from "../lib/errors";
 import Files from "../lib/files";
@@ -31,10 +32,13 @@ fileApiRoutes.get("/list", (req,res) => {
     if (!acc) return
 
     res.send(acc.files.map((e) => {
+        let fp = files.getFilePointer(e)
         return {
-            ...files.getFilePointer(e),
+            ...fp,
             messageids: null,
-            id:e
+            owner: null,
+            id:e,
+            sizeDisplay: fp.sizeInBytes ? bytes(fp.sizeInBytes) : "[File size unknown]"
         }
     }))
 

src/style/app/pulldown/files.scss

@@ -1,11 +1,11 @@
 .pulldown_display[name=files] {
     .notLoggedIn {
         position:absolute;
-        top:100%;
-        transform:translateY(-100%);
+        top:50%;
+        left:0px;
+        transform:translateY(-50%);
         width:100%;
         text-align:center;
-        background-color:#202020;
 
         .flavor {
             font-size:16px;

src/svelte/elem/pulldowns/Files.svelte

@@ -1,33 +1,33 @@
 <script>
     import Pulldown from "./Pulldown.svelte"
-    import { account, pulldownManager } from "../stores.mjs";
+    import { account, fetchFilePointers, files, pulldownManager } from "../stores.mjs";
+
+    fetchFilePointers();
 </script>
 
 <Pulldown name="files">
 
     {#if !$account.username}
         <div class="notLoggedIn">
-            <div style:height="2px" style:background-color="#66AAFF" />
             <div style:height="10px" />
-            <p class="flavor">Log in to view uploads & collections</p>
+            <p class="flavor">Log in to view uploads</p>
             <button on:click={$pulldownManager.openPulldown("account")}>OK</button>
             <div style:height="14px" />
         </div>
+    {:else}
+        <div class="loggedIn">
+            <input type="text" placeholder={`Search ${$files.length} file(s)`}>
+
+            <div class="fileList">
+                {#each $files as file (file.id)}
+                    <div class="flFile">
+                        <p class="detail">{file.id}</p>
+                        <h2>{file.filename}</h2>
+                        <p class="detail"><span class="number">{file.mime.split(";")[0]}</span>&nbsp;&nbsp;—&nbsp;&nbsp;<span class="number">{file.sizeDisplay}</span></p>
+                    </div>
+                {/each}
+            </div>  
+        </div> 
     {/if}
 
-    <!-- 
-        put scrolling div containing options here
-        if not logged in, most options will be hidden
-        & the div containing the options will be resized
-        (actually, maybe we could use flexbox for this)
-    -->
-
-    <!--
-        <div>
-            <h2>Anonymous file deletion</h2>
-            <p>Enter your deletion code</p>
-            <input placeholder="0000 0000 0000 0000">
-        </div>
-    -->
-
 </Pulldown>

src/svelte/elem/stores.mjs

@@ -3,6 +3,7 @@ import { writable } from "svelte/store"
 export let pulldownManager = writable(0)
 export let account = writable({})
 export let serverStats = writable({})
+export let files = writable([])
 
 export let fetchAccountData = function() {
     fetch("/auth/me").then(async (response) => {
@@ -14,6 +15,16 @@ export let fetchAccountData = function() {
     }).catch((err) => { console.error(err) })
 }
 
+export let fetchFilePointers = function() {
+    fetch("/files/list").then(async (response) => {
+        if (response.status == 200) {
+            files.set(await response.json())
+        } else {
+            files.set([])
+        }
+    }).catch((err) => { console.error(err) })
+}
+
 export let refresh_stats = () => {
     fetch("/server").then(async (data) => {
         serverStats.set(await data.json())