Merge files and albums pages into user dashboard

svelte/rollup.config.js

@@ -14,7 +14,6 @@ export default [
 	"file_viewer",
 	"filesystem",
 	"user_home",
-	"user_file_manager",
 	"admin_panel",
 	"home_page",
 	"text_upload",

svelte/src/file_viewer/FilePicker.svelte

@@ -1,7 +1,7 @@
 <script>
 import { createEventDispatcher, tick } from "svelte";
 import { formatDataVolume } from "../util/Formatting.svelte";
-import DirectoryElement from "../user_file_manager/DirectoryElement.svelte";
+import DirectoryElement from "../user_home/filemanager/DirectoryElement.svelte";
 import Modal from "../util/Modal.svelte";
 let dispatch = createEventDispatcher()
 

svelte/src/user_file_manager.js

@@ -1,8 +0,0 @@
-import App from './user_file_manager/FileManager.svelte';
-
-const app = new App({
-	target: document.getElementById("page_body"),
-	props: {}
-});
-
-export default app;

svelte/src/user_home/Router.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 import AccountSettings from "./AccountSettings.svelte";
 import APIKeys from "./APIKeys.svelte";
 import Transactions from "./Transactions.svelte";
@@ -6,20 +6,30 @@ import Subscription from "./Subscription.svelte";
 import ConnectApp from "./ConnectApp.svelte";
 import ActivityLog from "./ActivityLog.svelte";
 import DepositCredit from "./DepositCredit.svelte";
-import TabMenu from "../util/TabMenu.svelte";
+import TabMenu, { type Tab } from "../util/TabMenu.svelte";
 import BandwidthSharing from "./BandwidthSharing.svelte";
 import EmbeddingControls from "./EmbeddingControls.svelte";
 import PageBranding from "./PageBranding.svelte";
 import Dashboard from "./dashboard/Dashboard.svelte";
 import AffiliatePrompt from "./AffiliatePrompt.svelte";
+import FileManager from "./filemanager/FileManager.svelte";
+import { onMount } from "svelte";
+import { get_user, type User } from "../lib/PixeldrainAPI.mjs";
 
-let pages = [
+let pages: Tab[] = [
 	{
 		path: "/user",
 		title: "Dashboard",
 		icon: "dashboard",
 		component: Dashboard,
 		hide_background: true,
+	}, {
+		path: "/user/filemanager",
+		title: "My Files",
+		icon: "",
+		component: FileManager,
+		hidden: true,
+		hide_frame: true,
 	}, {
 		path: "/user/settings",
 		title: "Settings",
@@ -86,8 +96,13 @@ let pages = [
 		component: ActivityLog,
 	},
 ]
+
+let user = {} as User
+onMount(async () => {
+	user = await get_user()
+})
 </script>
 
-<TabMenu pages={pages} title="Welcome, {window.user.username}!"/>
+<TabMenu pages={pages} title="Welcome, {user.username}!"/>
 
 <AffiliatePrompt always/>

svelte/src/user_home/dashboard/CardAccount.svelte

@@ -43,11 +43,11 @@
 <h3>Exports</h3>
 
 <div class="button_row">
-	<a href="/user/export/files" class="button">
+	<a href="/api/user/files?format=csv" class="button">
 		<i class="icon">list</i>
 		Export files to CSV
 	</a>
-	<a href="/user/export/lists" class="button">
+	<a href="/api/user/lists?format=csv" class="button">
 		<i class="icon">list</i>
 		Export albums to CSV
 	</a>

svelte/src/user_home/filemanager/DirectoryElement.svelte

@@ -1,5 +1,5 @@
 <script>
-import { formatDataVolume, formatDate } from "../util/Formatting.svelte";
+import { formatDataVolume, formatDate } from "../../util/Formatting.svelte";
 
 // Main elements
 let directoryArea

svelte/src/user_home/filemanager/FileManager.svelte

@@ -1,9 +1,9 @@
 <script>
 import { onMount } from "svelte";
-import { formatDataVolume } from "../util/Formatting.svelte";
-import Modal from "../util/Modal.svelte";
-import Spinner from "../util/Spinner.svelte";
-import UploadWidget from "../util/upload_widget/UploadWidget.svelte";
+import { formatDataVolume } from "../../util/Formatting.svelte";
+import Modal from "../../util/Modal.svelte";
+import Spinner from "../../util/Spinner.svelte";
+import UploadWidget from "../../util/upload_widget/UploadWidget.svelte";
 import DirectoryElement from "./DirectoryElement.svelte"
 
 let loading = true
@@ -97,7 +97,7 @@ let hashChange = () => {
 	}
 	if (window.location.hash === "#lists") {
 		contentType = "lists"
-		document.title = "My Lists"
+		document.title = "My Albums"
 		getUserLists()
 		resetMenu()
 	} else {
@@ -286,7 +286,7 @@ onMount(() => {
 	{#if selecting}
 		<div class="nav_bar">
 			{#if contentType === "files"}
-				<button on:click={createList}><i class="icon">list</i> Make list</button>
+				<button on:click={createList}><i class="icon">list</i> Make album</button>
 				<button on:click={downloadFiles}><i class="icon">download</i> Download</button>
 			{/if}
 			<button on:click={bulkDelete}><i class="icon">delete</i> Delete</button>

svelte/src/util/TabMenu.svelte

@@ -1,11 +1,23 @@
-<script>
-import { onMount } from "svelte";
+<script lang="ts" context="module">
+export type Tab = {
+	path: string,
+	title: string,
+	icon: string,
+	component?: ComponentType,
+	hidden?: boolean,
+	hide_background?: boolean,
+	hide_frame?: boolean,
+	subpages?: Tab[],
+}
+</script>
+<script lang="ts">
+import { onMount, type ComponentType } from "svelte";
 import Footer from "../layout/Footer.svelte";
 
 export let title = ""
-export let pages = []
+export let pages: Tab[] = []
 
-let navigate = (path, title) => {
+let navigate = (path: string, title: string) => {
 	window.document.title = title+" ~ pixeldrain"
 	window.history.pushState({}, window.document.title, path)
 
@@ -46,33 +58,35 @@ let get_page = () => {
 	pages = pages
 }
 
-let current_page = null
-let current_subpage = null
+let current_page: Tab = null
+let current_subpage: Tab = null
 
 onMount(() => get_page())
 </script>
 
 <svelte:window on:popstate={get_page} />
 
-<header>
-	<h1>{title}</h1>
+{#if current_page !== null && current_page.hide_frame !== true}
+	<header>
+		<h1>{title}</h1>
 
-	<div class="tab_bar">
-		{#each pages as page}
-			{#if !page.hidden}
-				<a class="button"
-					href="{page.path}"
-					class:button_highlight={current_page && page.path === current_page.path}
-					on:click|preventDefault={() => {navigate(page.path, page.title)}}>
-					<i class="icon">{page.icon}</i>
-					<span>{page.title}</span>
-				</a>
-			{/if}
-		{/each}
-	</div>
-</header>
+		<div class="tab_bar">
+			{#each pages as page}
+				{#if !page.hidden}
+					<a class="button"
+						href="{page.path}"
+						class:button_highlight={current_page && page.path === current_page.path}
+						on:click|preventDefault={() => {navigate(page.path, page.title)}}>
+						<i class="icon">{page.icon}</i>
+						<span>{page.title}</span>
+					</a>
+				{/if}
+			{/each}
+		</div>
+	</header>
+{/if}
 
-{#if current_page}
+{#if current_page !== null}
 	<div id="page_content" class:page_content={current_page.hide_background !== true}>
 		{#if current_page.subpages}
 			<div class="tab_bar submenu">
@@ -98,7 +112,9 @@ onMount(() => get_page())
 	</div>
 {/if}
 
-<Footer/>
+{#if current_page !== null && current_page.hide_frame !== true}
+	<Footer/>
+{/if}
 
 <style>
 .submenu {

svelte/tsconfig.json

@@ -1,5 +1,6 @@
 {
 	"compilerOptions": {
+		"baseUrl": "./",
 		"verbatimModuleSyntax": true,
 		"target": "ES2017",
 	},