HEAVY wip - i'll prob clean up next commit

assets/icons/more.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM18 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" fill="#DDDDDD"/></svg>

assets/icons/multiselect.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.707 3.293a1 1 0 0 0-1.414 0L4 4.586l-.293-.293a1 1 0 0 0-1.414 1.414l1 1a1 1 0 0 0 1.414 0l2-2a1 1 0 0 0 0-1.414ZM10 16.993h11.003a1 1 0 0 1 .117 1.994l-.117.006H10A1 1 0 0 1 9.883 17l.117-.007ZM10 11h11.003a1 1 0 0 1 .117 1.993l-.117.007H10a1 1 0 0 1-.117-1.993L10 11Zm0-6h11.003a1 1 0 0 1 .117 1.993L21.003 7H10a1 1 0 0 1-.117-1.993L10 5ZM5.293 16.293a1 1 0 0 1 1.414 1.414l-2 2a1 1 0 0 1-1.414 0l-1-1a1 1 0 1 1 1.414-1.414l.293.293 1.293-1.293Z" fill="#DDDDDD"/></svg>

src/server/routes/authRoutes.ts

@@ -113,23 +113,15 @@ authRoutes.post("/logout", (req,res) => {
     res.send("logged out")
 })
 
-authRoutes.post("/dfv", (req,res) => {
+authRoutes.post("/dfv", parser, (req,res) => {
     let acc = Accounts.getFromToken(req.cookies.auth)
     if (!acc) {
         ServeError(res, 401, "not logged in")
         return
     }
 
-    let body:{[key:string]:any}
+    if (['public','private','anonymous'].find(e => e == req.body.defaultFileVisibility)) {
-    try {
+        acc.defaultFileVisibility = req.body.defaultFileVisibility
-        body = JSON.parse(req.body)
-    } catch {
-        ServeError(res,400,"bad request")
-        return
-    }
-
-    if (['public','private','anonymous'].find(e => e == body.defaultFileVisibility)) {
-        acc.defaultFileVisibility = body.defaultFileVisibility
         Accounts.save()
         res.send(`dfv has been set to ${acc.defaultFileVisibility}`)
     } else {
@@ -138,28 +130,19 @@ authRoutes.post("/dfv", (req,res) => {
     }
 })
 
-authRoutes.post("/delete_account", (req,res) => {
+authRoutes.post("/delete_account", parser, (req,res) => {
     let acc = Accounts.getFromToken(req.cookies.auth)
     if (!acc) {
         ServeError(res, 401, "not logged in")
         return
     }
-
-    let body:{[key:string]:any}
-    try {
-        body = JSON.parse(req.body)
-    } catch {
-        ServeError(res,400,"bad request")
-        return
-    }
-
     let accId = acc.id
 
     auth.AuthTokens.filter(e => e.account == accId).forEach((v) => {
         auth.invalidate(v.token)
     })
     
-    if (body.deleteFiles) {
+    if (req.body.deleteFiles) {
         acc.files.forEach((v) => {
             files.unlink(v)
         })
@@ -170,7 +153,7 @@ authRoutes.post("/delete_account", (req,res) => {
     res.send("account deleted")
 })
 
-authRoutes.post("/change_username", (req,res) => {
+authRoutes.post("/change_username", parser, (req,res) => {
     let acc = Accounts.getFromToken(req.cookies.auth)
     if (!acc) {
         ServeError(res, 401, "not logged in")
@@ -200,7 +183,7 @@ authRoutes.post("/change_username", (req,res) => {
     res.send("username changed")
 })
 
-authRoutes.post("/change_password", (req,res) => {
+authRoutes.post("/change_password", parser, (req,res) => {
     let acc = Accounts.getFromToken(req.cookies.auth)
     if (!acc) {
         ServeError(res, 401, "not logged in")

src/style/app/pulldown/files.scss

@@ -68,6 +68,7 @@
 
             .flFile {
                 padding: 3px 8px;
+                position:relative;
 
                 @media screen and (max-width: 500px) {
                     padding:7px 12px;
@@ -76,10 +77,22 @@
                 .detail {
                     color:#777777;
                     font-size:14px;
+                    position:relative;
 
                     @media screen and (max-width: 500px) {
                         font-size:16px;
                     }
+
+                    img {
+                        width: 14px;
+                        height: 14px;
+
+                        /* this is shit but it's the best way i can think of to do this */
+                        /* other than flexbox but i don't feel like doing that rn */
+
+                        position:relative;
+                        top:2px;
+                    }
                 }
 
                 h2 {
@@ -97,6 +110,50 @@
                     margin:0 0 0 0;
                     white-space: nowrap;
                 }
+
+                button {
+                    background-color:#00000000;
+                    border:none;
+                    outline:none;
+                    cursor:pointer;
+
+                    &.hitbox {
+                        position:absolute;
+                        left:0px;
+                        top:0px;
+                        height:100%;
+                        width:100%;
+                        z-index:10;
+                    }
+
+                    &.more {
+                        min-height:100%;
+                        width:auto;
+                        aspect-ratio: 1 / 1;
+                        z-index:11;
+                        position:relative;
+
+                        img {
+                            margin:auto;
+                        }
+                    }
+                }
+
+                .flexCont {
+                    display: flex;
+
+                    .fileInfo {
+                        width:100%;
+                        min-width:0;
+                    }
+                }
+
+                @media screen and (min-width:500px) {
+                    &:hover {
+                        background-color: #252525;
+                    }
+                }
+                
             }
         }
     }

src/svelte/elem/prompts/uploads.js

@@ -62,4 +62,31 @@ export function update_all_files(optPicker) {
             })
         }
     })
+}
+
+export function fileOptions(optPicker,file) {
+    optPicker.picker(file.filename,[
+        {
+            name: file.tag ? "Remove tag" : "Tag file",
+            icon: `/static/assets/icons/${file.tag ? "tag_remove" : "tag"}.svg`,
+            description: file.tag || `File has no tag`,
+            id: "tag"
+        },
+        {
+            name: "Change file visibility",
+            icon: `/static/assets/icons/${file.visibility||"public"}.svg`,
+            description: `File is currently ${file.visibility||"public"}`,
+            id: "changeFileVisibility"
+        },
+        {
+            name: "Delete file",
+            icon: `/static/assets/icons/admin/delete_file.svg`,
+            description: ``,
+            id: "delete"
+        }
+    ]).then((exp) => {
+        if (exp && exp.selected) {
+            
+        }
+    })
 }

src/svelte/elem/pulldowns/Files.svelte

@@ -1,12 +1,21 @@
 <script>
-    import Pulldown from "./Pulldown.svelte"
+    import Pulldown from "./Pulldown.svelte";
     import { account, fetchFilePointers, files, pulldownManager } from "../stores.mjs";
 
+    import { fade } from "svelte/transition";
+    import { flip } from "svelte/animate";
+    import { fileOptions } from "../prompts/uploads";
+    import OptionPicker from "../prompts/OptionPicker.svelte";
+
+    let picker;
+
     fetchFilePointers();
 </script>
 
 <Pulldown name="files">
 
+    <OptionPicker bind:this={picker} />
+
     {#if !$account.username}
         <div class="notLoggedIn">
             <div style:height="10px" />
@@ -20,9 +29,20 @@
 
             <div class="fileList">
                 {#each $files as file (file.id)}
-                    <div class="flFile">
+                    <div class="flFile" transition:fade={{duration:200}} animate:flip={{duration:200}}>
-                        <h2>{file.filename}</h2>
+                        <button class="hitbox" on:click={window.open(`/download/${file.id}`)}></button> <!-- this is bad, but I'm lazy -->
-                        <p class="detail"><span class="number">{file.id}</span>&nbsp;&nbsp;—&nbsp;&nbsp;<span class="number">{file.mime.split(";")[0]}</span></p>
+                        <div class="flexCont">
+                            <div class="fileInfo">
+                                <h2>{file.filename}</h2>
+                                <p class="detail">
+                                    <img src="/static/assets/icons/{file.visibility || "public"}.svg" alt={file.visibility||"public"} />&nbsp;
+                                    <span class="number">{file.id}</span>&nbsp;&nbsp;—&nbsp;&nbsp;<span class="number">{file.mime.split(";")[0]}</span>
+                                </p>
+                            </div>
+                            <button class="more" on:click={fileOptions(picker, file)}>
+                                <img src="/static/assets/icons/more.svg" alt="more" />
+                            </button>
+                        </div>
                     </div>
                 {/each}
             </div>