use webgen's empty component

MGP6775 · Dec 19, 2023 · 47870d5 · 47870d5
1 parent 8953f2b
commit 47870d5
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 30 deletions.
diff --git a/components/nav.ts b/components/nav.ts
@@ -1,6 +1,6 @@
 import { API } from "shared/mod.ts";
 import { delay } from "std/async/delay.ts";
-import { BasicLabel, Box, Button, ButtonStyle, Component, Custom, Grid, Horizontal, Image, Label, MIcon, Spacer, Vertical, createElement } from "webgen/mod.ts";
+import { BasicLabel, Box, Button, ButtonStyle, Component, Custom, Empty, Grid, Horizontal, Image, Label, MIcon, Spacer, Vertical, createElement } from "webgen/mod.ts";
 import { IsLoggedIn, activeUser, permCheck, showProfilePicture } from "../pages/_legacy/helper.ts";
 import './nav.css';
 import { activeLogo, pages } from "./pages.ts";
@@ -88,7 +88,7 @@ export function DynaNavigation(type: "Home" | "Music" | "Settings" | "Hosting" |
                         await API.user.mail.resendVerifyEmail.post();
                         await delay(1000);
                     })
-            ).addClass("email-banner", type.toLowerCase()) : Box().removeFromLayout(),
+            ).addClass("email-banner", type.toLowerCase()) : Empty(),
         )
             .setMargin("0.5rem auto")
             .setGap("0.4rem"),

diff --git a/pages/_legacy/music/edit.ts b/pages/_legacy/music/edit.ts
@@ -1,5 +1,5 @@
 import { API, LoadingSpinner, Navigation, createActionList, createBreadcrumb, createTagList, stupidErrorAlert } from "shared/mod.ts";
-import { Body, Box, Grid, Horizontal, Label, Spacer, State, Vertical, WebGen, isMobile } from "webgen/mod.ts";
+import { Body, Empty, Grid, Horizontal, Label, Spacer, State, Vertical, WebGen, isMobile } from "webgen/mod.ts";
 import '../../../assets/css/main.css';
 import '../../../assets/css/music.css';
 import { DynaNavigation } from "../../../components/nav.ts";
@@ -72,7 +72,7 @@ Body(Vertical(
                         await API.music.id(drop._id).type.post(DropType.Private);
                         location.reload();
                     },
-                } : Box().removeFromLayout(),
+                } : Empty(),
             Permissions.canSubmit(drop) ?
                 {
                     id: "publish",
@@ -82,7 +82,7 @@ Body(Vertical(
                         await API.music.id(drop._id).type.post(DropType.UnderReview);
                         location.reload();
                     },
-                } : Box().removeFromLayout(),
+                } : Empty(),
             Permissions.canTakedown(drop) ?
                 {
                     id: "takedown",
@@ -92,7 +92,7 @@ Body(Vertical(
                         await API.music.id(drop._id).type.post(DropType.Private);
                         location.reload();
                     },
-                } : Box().removeFromLayout()
+                } : Empty()
         ]
     })
         .addClass(
@@ -105,7 +105,7 @@ Body(Vertical(
                     Grid(
                         showPreviewImage(drop).addClass("image-preview")
                     ).setEvenColumns(1, "10rem")
-                    : Box().removeFromLayout()
+                    : Empty()
                 ).asRefComponent(),
                 createBreadcrumb(menu),
                 createTagList(menu)

diff --git a/pages/admin/review.ts b/pages/admin/review.ts
@@ -1,5 +1,5 @@
 import { API, LoadingSpinner, Navigation, createActionList, createBreadcrumb, createTagList, stupidErrorAlert } from "shared/mod.ts";
-import { Body, Box, Button, ButtonStyle, Color, Entry, Grid, Horizontal, Label, Spacer, Vertical, WebGen, isMobile } from "webgen/mod.ts";
+import { Body, Button, ButtonStyle, Color, Empty, Entry, Grid, Horizontal, Label, Spacer, Vertical, WebGen, isMobile } from "webgen/mod.ts";
 import '../../assets/css/main.css';
 import '../../assets/css/music.css';
 import { DynaNavigation } from "../../components/nav.ts";
@@ -94,7 +94,7 @@ Body(Vertical(
                         Grid(
                             showPreviewImage(drop).addClass("image-preview")
                         ).setEvenColumns(1, "10rem")
-                        : Box().removeFromLayout()
+                        : Empty()
                     ).asRefComponent(),
                     createBreadcrumb(menu),
                     createTagList(menu)

diff --git a/pages/hosting/views/FileBrowser.ts b/pages/hosting/views/FileBrowser.ts
@@ -3,7 +3,7 @@ import { createDownloadStream } from "shared/libs/streamSaver.ts";
 import { Progress } from "shared/Progress.ts";
 import { ProgressTracker } from "shared/upload.ts";
 import { format } from "std/fmt/bytes.ts";
-import { asPointer, BasicLabel, BIcon, Box, Button, ButtonStyle, Color, Entry, Grid, IconButton, Label, MIcon, ref, refMerge } from "webgen/mod.ts";
+import { asPointer, BasicLabel, BIcon, Box, Button, ButtonStyle, Color, Empty, Entry, Grid, IconButton, Label, MIcon, ref, refMerge } from "webgen/mod.ts";
 import { SidecarResponse } from "../../../spec/music.ts";
 import { mapFiletoIcon } from "../constants.ts";
 import { downloadFile, listFiles, messageQueueSidecar } from "../loading.ts";
@@ -149,7 +149,7 @@ export function FileBrowser() {
                     .addColumn("Type", (data) => data.fileMimeType !== undefined ? Label(fileTypeName(data.fileMimeType)) : Label("Folder"))
                     .addColumn("Size", (data) => data.size !== undefined ? Label(format(parseInt(data.size))).addClass('text-align-right') : Box())
                     .addColumn("", (data) => Grid(
-                        data.uploadingRatio !== undefined ? Progress(data.uploadingRatio).addClass("fileProgressBar") : Box().removeFromLayout(),
+                        data.uploadingRatio !== undefined ? Progress(data.uploadingRatio).addClass("fileProgressBar") : Empty(),
                         data.fileMimeType && [ "text/yaml", "application/json", "text/plain" ].includes(data.fileMimeType.split(";")[ 0 ]) && data.uploadingRatio === undefined
                             ? IconButton(MIcon("file_open"), "Open file")
                                 .addClass("table-button")

diff --git a/pages/hosting/views/menu.ts b/pages/hosting/views/menu.ts
@@ -3,7 +3,7 @@ import { calculateUptime } from "shared/uptime.ts";
 import { debounce } from "std/async/debounce.ts";
 import { delay } from "std/async/delay.ts";
 import { WEEK } from "std/datetime/constants.ts";
-import { asPointer, BasicLabel, Box, Button, Cache, Color, Entry, Grid, Image, isMobile, Label, MIcon, ref, refMerge, State, StateHandler, TextInput } from "webgen/mod.ts";
+import { asPointer, BasicLabel, Box, Button, Cache, Color, Empty, Entry, Grid, Image, isMobile, Label, MIcon, ref, refMerge, State, StateHandler, TextInput } from "webgen/mod.ts";
 import { createCachedLoader, createIndexPaginationLoader } from "webgen/network.ts";
 import { templateArtwork } from "../../../assets/imports.ts";
 import locations from "../../../data/locations.json" with { type: "json" };
@@ -283,7 +283,7 @@ function addonBrowser(server: StateHandler<Server>): RenderItem {
                                 .onPromiseClick(() => loadMore())
                         )
                             .setJustify("center")
-                        : Box().removeFromLayout()
+                        : Empty()
                     ).asRefComponent()
                 ).setGap()
             )

diff --git a/pages/hosting/views/profile.ts b/pages/hosting/views/profile.ts
@@ -1,7 +1,7 @@
 import { confettiFromElement } from "shared/libs/canvasConfetti.ts";
 import { API, stupidErrorAlert } from "shared/mod.ts";
 import { format } from "std/fmt/bytes.ts";
-import { Box, Button, ButtonStyle, Color, Entry, Grid, Label, MediaQuery, Pointable, Vertical } from "webgen/mod.ts";
+import { Box, Button, ButtonStyle, Color, Empty, Entry, Grid, Label, MediaQuery, Pointable, Vertical } from "webgen/mod.ts";
 import { MB, state } from "../data.ts";
 import { refreshState } from "../loading.ts";
 import './profile.css';
@@ -47,7 +47,7 @@ export const profileView = () =>
                             refreshState();
                         }
                     }) :
-                        Box().removeFromLayout()
+                        Empty()
                 )
                     .addClass("shop"),
                 Box(
@@ -75,7 +75,7 @@ export const profileView = () =>
                             refreshState();
                         }
                     }) :
-                        Box().removeFromLayout()
+                        Empty()
                 )
                     .addClass("shop"),
                 Box(
@@ -103,7 +103,7 @@ export const profileView = () =>
                             refreshState();
                         }
                     }) :
-                        Box().removeFromLayout()
+                        Empty()
                 )
                     .addClass("shop"),
                 Box(
@@ -131,7 +131,7 @@ export const profileView = () =>
                             refreshState();
                         }
                     }) :
-                        Box().removeFromLayout()
+                        Empty()
                 )
                     .addClass("shop")
             )

diff --git a/pages/hosting/views/wizard.ts b/pages/hosting/views/wizard.ts
@@ -1,6 +1,6 @@
 import { API, displayError, LoadingSpinner, SliderInput } from "shared/mod.ts";
 import { format } from "std/fmt/bytes.ts";
-import { BasicLabel, Box, Dialog, DropDownInput, Grid, Label, Page, refMerge, TextInput, Vertical, Wizard } from "webgen/mod.ts";
+import { BasicLabel, Box, DropDownInput, Grid, Label, Page, refMerge, TextInput, Vertical, Wizard } from "webgen/mod.ts";
 import locations from "../../../data/locations.json" with { type: "json" };
 import { ServerCreate, serverCreate } from "../../../spec/music.ts";
 import { creationState, MB, state } from "../data.ts";

diff --git a/pages/shared/list.ts b/pages/shared/list.ts
@@ -1,4 +1,4 @@
-import { Box, Button, CenterV, Component, Horizontal, Label, MIcon, Pointable, Pointer, State, Vertical, asPointer } from "webgen/mod.ts";
+import { Box, Button, CenterV, Component, Empty, Horizontal, Label, MIcon, Pointable, Pointer, State, Vertical, asPointer } from "webgen/mod.ts";
 import { LoadingSpinner } from "./components.ts";
 import { External, displayError } from "./restSpec.ts";
 
@@ -58,7 +58,7 @@ export const HeavyList = <T>(items: Pointable<External<T[]> | 'loading' | T[]>,
                 this.wrapper.append(
                     Vertical(
                         ...val.length == 0 ? [ this.placeholder ] : val.map(x => map(x)),
-                        this.paging.$enabled.map(() => this.paging.enabled ? Button("Load More").setMargin("0 0 var(--gap)").onPromiseClick(() => this.loadMore(val.length - 2, this.paging.limit + 1)) : Box().removeFromLayout()).asRefComponent().removeFromLayout(),
+                        this.paging.$enabled.map(() => this.paging.enabled ? Button("Load More").setMargin("0 0 var(--gap)").onPromiseClick(() => this.loadMore(val.length - 2, this.paging.limit + 1)) : Empty()).asRefComponent().removeFromLayout(),
                     )
                         .setGap("var(--gap)")
                         .draw()

diff --git a/pages/shared/navigation.ts b/pages/shared/navigation.ts
@@ -1,5 +1,5 @@
 import { assert } from "std/assert/assert.ts";
-import { Box, Component, Entry, Grid, Label, MIcon, Pointable, Pointer, Taglist, Vertical, asPointer, isMobile, isPointer } from "webgen/mod.ts";
+import { Box, Component, Empty, Entry, Grid, Label, MIcon, Pointable, Pointer, Taglist, Vertical, asPointer, isMobile, isPointer } from "webgen/mod.ts";
 import { HeavyList } from "./list.ts";
 import './navigation.css';
 
@@ -106,7 +106,7 @@ class MenuImpl extends Component {
                     return item;
 
                 if (asPointer(item.hidden).getValue())
-                    return Box().removeFromLayout();
+                    return Empty();
 
                 const entry = Entry(item.replacement ? asPointer(item.replacement).getValue() : item).addClass(isMobile.map(mobile => mobile ? "small" : "desktop"));
                 const click = this.createClickHandler(item);
@@ -183,15 +183,15 @@ function defaultHeader(menu: MenuImpl) {
 }
 
 function defaultFooter(menu: MenuImpl) {
-    return isMobile.map(mobile => mobile && menu.rootNode.actions ? Box(createActionList(menu)).addClass(asPointer(menu.rootNode.actions).map(it => it.length == 0 ? "remove-from-layout" : "normal"), "sticky-footer") : Box().removeFromLayout()).asRefComponent().removeFromLayout();
+    return isMobile.map(mobile => mobile && menu.rootNode.actions ? Box(createActionList(menu)).addClass(asPointer(menu.rootNode.actions).map(it => it.length == 0 ? "remove-from-layout" : "normal"), "sticky-footer") : Empty()).asRefComponent().removeFromLayout();
 }
 
 export function createActionList(menu: MenuImpl) {
     return asPointer(menu.rootNode.actions).map(it => Grid(...(it ?? [])).addClass("action-list-bar")).asRefComponent().removeFromLayout();
 }
 
 export function createTagList(menu: MenuImpl) {
-    if (!menu.rootNode.categories) return Box().removeFromLayout();
+    if (!menu.rootNode.categories) return Empty();
     const index = asPointer(0);
     index.listen((val, oldVal) => {
         if (oldVal != undefined) {
@@ -209,7 +209,7 @@ export function createTagList(menu: MenuImpl) {
         const [ rootId ] = path.split("/");
         const unprefixed = path.replace(rootId, "");
         const visible = unprefixed == "/";
-        return visible && menu.rootNode.categories ? Taglist(menu.rootNode.categories.map(it => it.title), index) : Box().removeFromLayout();
+        return visible && menu.rootNode.categories ? Taglist(menu.rootNode.categories.map(it => it.title), index) : Empty();
     }).asRefComponent();
 }
 

diff --git a/pages/user/oauth.ts b/pages/user/oauth.ts
@@ -1,6 +1,6 @@
 import { Footer } from "shared/footer.ts";
 import { API, LoadingSpinner, stupidErrorAlert } from "shared/mod.ts";
-import { Box, Button, ButtonStyle, Color, Grid, Horizontal, Image, Label, MIcon, Spacer, State, Vertical, View, WebGen, isMobile } from "webgen/mod.ts";
+import { Body, Box, Button, ButtonStyle, Color, Grid, Horizontal, Image, Label, MIcon, Spacer, State, Vertical, WebGen, isMobile } from "webgen/mod.ts";
 import '../../assets/css/main.css';
 import { dots, templateArtwork } from "../../assets/imports.ts";
 import { DynaNavigation } from "../../components/nav.ts";
@@ -97,13 +97,12 @@ const list = state.$loaded.map(loaded => {
     return LoadingSpinner();
 }).asRefComponent();
 
-View(() => Vertical(
+Body(Vertical(
     DynaNavigation("Home"),
     Box().addClass("background-image"),
     list.addClass("auth-area"),
     Footer()
-))
-    .appendOn(document.body);
+));
 
 async function authorize() {
     await API.oauth.authorize(params.clientId!, params.scope!, params.redirectUri!)