wip

src/style/app/pulldown.scss

@@ -1,6 +1,7 @@
 @use "../base";
 @use "pulldown/help";
 @use "pulldown/accounts";
+@use "pulldown/files";
 
 #overlay {
     position:absolute;

src/style/app/pulldown/accounts.scss

@@ -8,7 +8,8 @@
             text-align:center;
 
             @media screen and (max-width:500px) {
-                transform:scale(1.35) translateY(-50%);
+                /* lazy */
+                transform:scale(1.15) translateY(-50%);
             }
 
             h1 {

src/style/app/pulldown/files.scss

@@ -0,0 +1,29 @@
+.pulldown_display[name=files] {
+    .notLoggedIn {
+        position:absolute;
+        top:100%;
+        transform:translateY(-100%);
+        width:100%;
+        text-align:center;
+        background-color:#202020;
+
+        .flavor {
+            font-size:16px;
+            color:#999999;
+            margin: 0 0 10px 0;
+        }
+
+        button {
+            background-color: #232323;
+            color:#999999;
+            font-size:14px;
+            border:1px solid #999999;
+            padding:2px 10px 2px 10px;
+            cursor:pointer;
+
+            &:hover {
+                background-color:#333333;
+            }
+        }
+    }
+}

src/style/app/uploader/add_new_files.scss

@@ -49,6 +49,7 @@
                 background-color:#333333;
                 color:#DDDDDD;
                 border:none;
+                border-radius: 0px;
                 outline:none;
                 padding:5px;
                 

src/svelte/App.svelte

@@ -3,6 +3,7 @@
     import Topbar from "./elem/Topbar.svelte";
     import PulldownManager from "./elem/PulldownManager.svelte";
     import UploadWindow from "./elem/UploadWindow.svelte";
+    import { pulldownManager } from "./elem/stores.mjs";
     
     /** 
      * @type Topbar
@@ -12,12 +13,16 @@
     /**
      * @type PulldownManager
     */
-    let pulldownManager;
+    let pulldown;
+
+    onMount(() => {
+        pulldownManager.set(pulldown)
+    })
 </script>
 
-<Topbar bind:this={topbar} pulldown={pulldownManager} />
+<Topbar bind:this={topbar} pulldown={pulldown} />
 <div id="appContent">
-    <PulldownManager bind:this={pulldownManager} />
+    <PulldownManager bind:this={pulldown} />
 
     <UploadWindow/>
 </div>

src/svelte/elem/pulldowns/Files.svelte

@@ -1,7 +1,31 @@
 <script>
     import Pulldown from "./Pulldown.svelte"
+    import { pulldownManager } from "../stores.mjs";
 </script>
 
-<Pulldown>
-    <p>no</p>
+<Pulldown name="files">
+
+    <div class="notLoggedIn">
+        <div style:height="2px" style:background-color="#66AAFF" />
+        <div style:height="10px" />
+        <p class="flavor"><em>Log in to view uploads & collections</em></p>
+        <button on:click={$pulldownManager.openPulldown("account")}>OK</button>
+        <div style:height="14px" />
+    </div>
+
+    <!-- 
+        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/pulldowns/Help.svelte

@@ -1,3 +1,5 @@
+<!-- i'm lazy, could probably just use plain html here but hwatever, mgiht make this grab from the server idk -->
+
 <script>
     import Pulldown from "./Pulldown.svelte"
 

src/svelte/elem/stores.mjs

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store"
+
+export let pulldownManager = writable(0)