remove some more old stuff

BBN-Holding · Nov 12, 2024 · 33c1d10 · 33c1d10
1 parent 77284ef
commit 33c1d10
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 124 deletions.
diff --git a/components/nav.ts b/components/nav.ts
@@ -106,6 +106,7 @@ export function DynaNavigation(type: "Home" | "Music" | "Settings" | "Hosting" |
                 : Empty(),
         )
             .setGap("0.4rem")
+            .setDirection("row")
             .setMargin("0.5rem auto"),
     );
 }
diff --git a/pages/holding/loading.ts b/pages/holding/loading.ts
@@ -1,8 +1,8 @@
 import { API } from "shared/restSpec.ts";
 import { createStableWebSocket } from "webgen/extended/mod.ts";
-import { asState, lazy } from "webgen/mod.ts";
+import { asRefRecord, lazy } from "webgen/mod.ts";
 
-export const data = asState({
+export const data = asRefRecord({
     stats: {
         users: 0,
         drops: 0,
@@ -17,7 +17,7 @@ export const streamingPool = lazy(async () => {
         onMessage: (msg) => {
             if (typeof msg !== "string") return;
             const json = JSON.parse(msg);
-            data.stats = asState(json as typeof data.stats);
+            data.stats.setValue(json);
         },
     });
 });
diff --git a/pages/music-landing/main.ts b/pages/music-landing/main.ts
@@ -1,4 +1,5 @@
 import { Footer } from "shared/footer.ts";
+import { RegisterAuthRefresh } from "shared/helper.ts";
 import { MaterialIcon, mediaQueryRef, PrimaryButton, SheetHeader, Sheets, WebGenTheme } from "webgen/components/mod.ts";
 import { Box, Content, Empty, FullWidthSection, Grid, Label } from "webgen/core/mod.ts";
 import { appendBody } from "webgen/mod.ts";
@@ -26,7 +27,7 @@ import "./main.css";
 
 //
 
-// await RegisterAuthRefresh();
+await RegisterAuthRefresh();
 
 // const images = () =>
 //     Array.from({ length: 4 }, () => [

diff --git a/pages/music/main.ts b/pages/music/main.ts
@@ -1,18 +1,13 @@
-import { changeThemeColor, RegisterAuthRefresh, renewAccessTokenIfNeeded, sheetStack } from "shared/helper.ts";
+import { RegisterAuthRefresh, renewAccessTokenIfNeeded, sheetStack } from "shared/helper.ts";
 import { API, stupidErrorAlert } from "shared/restSpec.ts";
-import { Body, Vertical, WebGen } from "webgen/mod.ts";
+import { Body, Vertical } from "webgen/mod.ts";
 import "../../assets/css/main.css";
 import "../../assets/css/music.css";
 import { DynaNavigation } from "../../components/nav.ts";
 import { DropType } from "../../spec/music.ts";
 import { menuState, musicMenu } from "./views/menu.ts";
 
 await RegisterAuthRefresh();
-WebGen({
-    events: {
-        themeChanged: changeThemeColor(),
-    },
-});
 
 sheetStack.setDefault(Vertical(DynaNavigation("Music"), musicMenu));
 

diff --git a/pages/music/newDrop.ts b/pages/music/newDrop.ts
@@ -1,5 +1,5 @@
 import { API, LoadingSpinner, stupidErrorAlert } from "shared/mod.ts";
-import { AdvancedImage, asRef, asState, Body, Box, Button, ButtonStyle, Center, CenterV, Color, createFilePicker, Custom, DropAreaInput, DropDownInput, Empty, getErrorMessage, Grid, Horizontal, Image, Label, MediaQuery, Reference, SheetDialog, Spacer, SupportedThemes, TextInput, Validate, Vertical, WebGen } from "webgen/mod.ts";
+import { AdvancedImage, asRef, asState, Body, Box, Button, ButtonStyle, Center, CenterV, Color, createFilePicker, Custom, DropAreaInput, DropDownInput, Empty, getErrorMessage, Grid, Horizontal, Image, Label, MediaQuery, Reference, SheetDialog, Spacer, TextInput, Validate, Vertical } from "webgen/mod.ts";
 import { zod } from "webgen/zod.ts";
 import "../../assets/css/main.css";
 import { DynaNavigation } from "../../components/nav.ts";
@@ -15,9 +15,6 @@ import "./newDrop.css";
 
 await RegisterAuthRefresh();
 
-WebGen({
-    theme: SupportedThemes.dark,
-});
 // Because this is a mix of light and dark mode we force dropdowns to be dark
 document.querySelector(".wpopover")?.setAttribute("data-theme", "dark");
 

diff --git a/pages/music/share.ts b/pages/music/share.ts
@@ -1,14 +1,8 @@
 import { API, stupidErrorAlert } from "shared/restSpec.ts";
-import { asRef, Body, Empty, Horizontal, Image, Label, LinkButton, Vertical, WebGen } from "webgen/mod.ts";
-import { changeThemeColor, sheetStack, streamingImages } from "../shared/helper.ts";
+import { asRef, Body, Empty, Horizontal, Image, Label, LinkButton, Vertical } from "webgen/mod.ts";
+import { sheetStack, streamingImages } from "../shared/helper.ts";
 import "./share.css";
 
-WebGen({
-    events: {
-        themeChanged: changeThemeColor(),
-    },
-});
-
 const params = new URLSearchParams(location.search);
 const data = Object.fromEntries(params.entries());
 if (!data.s) {

diff --git a/pages/shared/components.ts b/pages/shared/components.ts
@@ -1,14 +1,14 @@
-// import type { ChartConfiguration, ChartConfigurationCustomTypesPerDataset, ChartType, DefaultDataPoint } from "https://esm.sh/chart.js@4.4.6/auto";
-// import { Box, Custom, lazy, loadingWheel } from "webgen/mod.ts";
+import type { ChartConfiguration, ChartConfigurationCustomTypesPerDataset, ChartType, DefaultDataPoint } from "https://esm.sh/chart.js@4.4.6/auto";
+import { Box, lazy } from "webgen/mod.ts";
 
-// export const LoadingSpinner = () => Box(Custom(loadingWheel() as Element as HTMLElement)).addClass("loading");
+const lazyChart = lazy(() => import("https://esm.sh/chart.js@4.4.6/auto"));
 
-// const lazyChart = lazy(() => import("https://esm.sh/chart.js@4.4.6/auto"));
+export const Chart = <TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(config: ChartConfiguration<TType, TData, TLabel> | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>) => {
+    const canvas = document.createElement("canvas");
 
-// export const Chart = <TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(config: ChartConfiguration<TType, TData, TLabel> | ChartConfigurationCustomTypesPerDataset<TType, TData, TLabel>) => {
-//     const canvas = document.createElement("canvas");
+    lazyChart().then((chartjs) => new chartjs.Chart(canvas, config));
 
-//     lazyChart().then((chartjs) => new chartjs.Chart(canvas, config));
+    const component = { draw: () => canvas };
 
-//     return Box(Custom(canvas).addClass("chart"));
-// };
+    return Box(component).addClass("chart");
+};
diff --git a/pages/shared/helper.ts b/pages/shared/helper.ts
@@ -1,5 +1,5 @@
 import { API, fileCache, Permission, stupidErrorAlert } from "shared/mod.ts";
-import { asRefRecord, Component, Empty } from "webgen/mod.ts";
+import { asRefRecord, Component, Empty, Sheets } from "webgen/mod.ts";
 import { loginRequired } from "../../components/pages.ts";
 import { Drop } from "../../spec/music.ts";
 
@@ -151,6 +151,10 @@ function shouldLoginPage() {
     throw "aborting javascript here";
 }
 
+export const sheetStack = Sheets()
+    .setMinWidth("auto")
+    .setWidth("auto");
+
 export function getYearList(): string[] {
     return new Array(new Date().getFullYear() - 2000 + 1)
         .fill(1)

diff --git a/pages/user/actions.ts b/pages/user/actions.ts
@@ -1,7 +1,7 @@
 import { assert } from "@std/assert";
 import { delay } from "@std/async";
+import { forceRefreshToken, gotoGoal } from "shared/helper.ts";
 import { API, displayError, stupidErrorAlert } from "shared/mod.ts";
-import { forceRefreshToken, gotoGoal } from "../shared/helper.ts";
 import { state } from "./state.ts";
 
 export async function loginUser() {

diff --git a/pages/user/oauth.ts b/pages/user/oauth.ts
@@ -1,9 +1,8 @@
 import { Footer } from "shared/footer.ts";
-import { activeUser, getNameInital, logOut, ProfilePicture, RegisterAuthRefresh } from "shared/helper.ts";
-import { API, LoadingSpinner, stupidErrorAlert } from "shared/mod.ts";
-import { asState, Body, Box, Button, ButtonStyle, Color, Content, FullWidthSection, Grid, Horizontal, Image, isMobile, Label, MIcon, Spacer, Vertical, WebGen } from "webgen/mod.ts";
+import { activeUser, logOut, RegisterAuthRefresh } from "shared/helper.ts";
+import { API, stupidErrorAlert } from "shared/mod.ts";
+import { appendBody, asRefRecord, Content, Empty, FullWidthSection, Grid, isMobile, Label, MaterialIcon, PrimaryButton, Spinner, TextButton, WebGenTheme } from "webgen/mod.ts";
 import "../../assets/css/main.css";
-import { dots, templateArtwork } from "../../assets/imports.ts";
 import { DynaNavigation } from "../../components/nav.ts";
 import { OAuthScopes } from "../../spec/music.ts";
 import "./oauth.css";
@@ -31,76 +30,76 @@ if (!params.clientId || !params.scope || !params.redirectUri) {
     throw new Error("Invalid OAuth Request");
 }
 
-WebGen();
-
-const state = asState({
+const state = asRefRecord({
     loaded: false,
     name: "",
     icon: "",
 });
 
-Body(
-    Content(
-        FullWidthSection(DynaNavigation("Home"), Box().addClass("background-image")),
-        state.$loaded.map((loaded) =>
-            loaded
-                ? Grid(
-                    isMobile.map((small) =>
-                        Label("Connect Now!")
-                            .setMargin("5rem 0 .8rem")
-                            .addClass(small ? "no-custom" : "line-header", "header")
-                            .setFontWeight("extrabold")
-                            .setTextSize(small ? "6xl" : "7xl")
-                    ).asRefComponent().removeFromLayout(),
-                    Label("CONNECTION")
-                        .addClass("label-small"),
-                    Grid(
-                        Grid(
-                            Image(state.icon || templateArtwork, "New Connection"),
-                            Label(state.name || "---")
-                                .setJustifySelf("center")
-                                .addClass("label-small"),
+appendBody(
+    WebGenTheme(
+        Content(
+            FullWidthSection(DynaNavigation("Home"), Empty().addClass("background-image")),
+            state.loaded.map((loaded) =>
+                loaded
+                    ? Grid(
+                        isMobile.map((small) =>
+                            Label("Connect Now!")
+                                .setMargin("5rem 0 .8rem")
+                                .addClass(small ? "no-custom" : "line-header", "header")
+                                .setFontWeight("extrabold")
+                                .setTextSize(small ? "6xl" : "7xl")
                         ),
-                        Image(dots, "dots"),
+                        // .removeFromLayout(),
+                        Label("CONNECTION")
+                            .addClass("label-small"),
                         Grid(
-                            ProfilePicture(
-                                activeUser.avatar ? Image(activeUser.avatar, "Profile Picture") : Label(getNameInital(activeUser.username)),
-                                activeUser.username,
+                            Grid(
+                                // Image(state.icon || templateArtwork, "New Connection"),
+                                Label(state.name || "---")
+                                    .setJustifySelf("center")
+                                    .addClass("label-small"),
                             ),
-                            Label(activeUser.username)
-                                .setJustifySelf("center")
-                                .addClass("label-small"),
-                        ),
-                    ).addClass("linkage"),
-                    Label("PERMISSIONS")
-                        .addClass("label-small"),
-                    Vertical(
-                        params.scope!.split(",").map((e) =>
+                            // Image(dots, "dots"),
                             Grid(
-                                MIcon("check"),
-                                Label(oauthScopes[e as OAuthScopes]),
-                            ).addClass("permission")
+                                // ProfilePicture(
+                                //     activeUser.avatar ? Image(activeUser.avatar, "Profile Picture") : Label(getNameInital(activeUser.username)),
+                                //     activeUser.username,
+                                // ),
+                                Label(activeUser.username)
+                                    .setJustifySelf("center")
+                                    .addClass("label-small"),
+                            ),
+                        ).addClass("linkage"),
+                        Label("PERMISSIONS")
+                            .addClass("label-small"),
+                        Grid(
+                            params.scope!.split(",").map((e) =>
+                                Grid(
+                                    MaterialIcon("check"),
+                                    Label(oauthScopes[e as OAuthScopes]),
+                                ).addClass("permission")
+                            ),
                         ),
-                    ),
-                    Button("Connect")
-                        .setWidth("100%")
-                        .setJustifyContent("center")
-                        .setMargin("1rem 0 0")
-                        .onPromiseClick(async () => await authorize()),
-                    Horizontal(
-                        Label("Wrong account?"),
-                        Button("Switch it here")
-                            .setStyle(ButtonStyle.Inline)
-                            .setColor(Color.Colored)
-                            .onClick(() => logOut(location.pathname + location.search))
-                            .addClass("link"),
-                        Spacer(),
+                        PrimaryButton("Connect")
+                            .onPromiseClick(async () => await authorize())
+                            .setWidth("100%")
+                            .setJustifyContent("center")
+                            .setMargin("1rem 0 0"),
+                        Grid(
+                            Label("Wrong account?"),
+                            TextButton("Switch it here")
+                                // .setStyle(ButtonStyle.Inline)
+                                // .setColor(Color.Colored)
+                                .onClick(() => logOut(location.pathname + location.search))
+                                .addClass("link"),
+                        )
+                            .setMargin("1rem 0 0"),
                     )
-                        .setMargin("1rem 0 0"),
-                )
-                : LoadingSpinner()
-        ).asRefComponent().addClass("auth-area").setCssStyle("display", "grid"),
-        FullWidthSection(Footer()),
+                    : Spinner()
+            ).addClass("auth-area").setCssStyle("display", "grid"),
+            FullWidthSection(Footer()),
+        ),
     ),
 );
 

diff --git a/pages/user/settings.personal.ts b/pages/user/settings.personal.ts
@@ -1,22 +1,22 @@
 import { delay } from "@std/async";
 import { activeUser, allowedImageFormats, forceRefreshToken, IsLoggedIn, showProfilePicture } from "shared/helper.ts";
 import { API, StreamingUploadHandler, stupidErrorAlert } from "shared/mod.ts";
-import { asRef, asState, Box, Button, CenterV, createFilePicker, Empty, getErrorMessage, Grid, Horizontal, IconButton, Image, Label, MIcon, Spacer, TextInput, Validate, Vertical } from "webgen/mod.ts";
-import { zod } from "webgen/zod.ts";
+import { asRef, asRefRecord, Box, createFilePicker, Empty, Grid, Label, MaterialIcon, PrimaryButton, TextInput } from "webgen/mod.ts";
+import { z } from "zod/mod.ts";
 
 export function ChangePersonal() {
-    const state = asState({
+    const state = asRefRecord({
         email: activeUser.email,
         name: activeUser.username,
-        validationState: <zod.ZodError | undefined> undefined,
+        validationState: <z.ZodError | undefined> undefined,
     });
 
     const profilePicture = asRef(showProfilePicture(IsLoggedIn()!).setTextSize("8xl"));
 
-    return Vertical(
+    return Grid(
         Grid(
             profilePicture.map((pic) =>
-                Box(pic, IconButton(MIcon("edit"), "edit-icon")).addClass("upload-image").onClick(async () => {
+                Box(pic, IconButton(MaterialIcon("edit"), "edit-icon")).addClass("upload-image").onClick(async () => {
                     const file = await createFilePicker(allowedImageFormats.join(","));
                     const blobUrl = URL.createObjectURL(file);
                     profilePicture.setValue(Image({ type: "uploading", filename: file.name, blobUrl, percentage: 0 }, "Profile Picture"));
@@ -40,7 +40,7 @@ export function ChangePersonal() {
                         }, file);
                     });
                 })
-            ).asRefComponent(),
+            ),
             [
                 { width: 2 },
                 Vertical(
@@ -52,8 +52,7 @@ export function ChangePersonal() {
             .setDynamicColumns(1, "12rem")
             .setJustifyContent("center")
             .setGap("15px"),
-        Horizontal(
-            Spacer(),
+        Grid(
             Box(
                 state.$validationState.map((error) =>
                     error
@@ -65,7 +64,7 @@ export function ChangePersonal() {
                         : Empty()
                 ).asRefComponent(),
             ),
-            Button("Save").onClick(async () => {
+            PrimaryButton("Save").onClick(async () => {
                 const { error, validate } = Validate(
                     state,
                     zod.object({

diff --git a/pages/user/settings.ts b/pages/user/settings.ts
@@ -1,19 +1,17 @@
 import { logOut, RegisterAuthRefresh } from "shared/helper.ts";
 import { API, Navigation } from "shared/mod.ts";
-import { asState, Body, Box, Button, CenterV, Empty, getErrorMessage, Grid, Horizontal, isMobile, Label, Spacer, TextInput, Validate, Vertical, WebGen } from "webgen/mod.ts";
-import { zod } from "webgen/zod.ts";
+import { asRefRecord } from "webgen/mod.ts";
+import { z } from "zod/mod.ts";
 import "../../assets/css/main.css";
 import { DynaNavigation } from "../../components/nav.ts";
 import { ChangePersonal } from "./settings.personal.ts";
 
-WebGen();
-
 await RegisterAuthRefresh();
 
-const state = asState({
+const state = asRefRecord({
     newPassword: <string | undefined> undefined,
     verifyNewPassword: <string | undefined> undefined,
-    validationState: <zod.ZodError | undefined> undefined,
+    validationState: <z.ZodError | undefined> undefined,
 });
 
 const settingsMenu = Navigation({

diff --git a/pages/user/signin.ts b/pages/user/signin.ts
@@ -2,7 +2,7 @@ import { assert } from "@std/assert";
 import { Footer } from "shared/footer.ts";
 import { RegisterAuthRefresh } from "shared/helper.ts";
 import { API, LoadingSpinner } from "shared/mod.ts";
-import { Body, Box, Button, ButtonStyle, Color, Component, createElement, Custom, Grid, Horizontal, Image, isMobile, Label, LinkButton, Spacer, TextInput, Vertical, WebGen } from "webgen/mod.ts";
+import { Body, Box, Button, ButtonStyle, Color, Component, createElement, Custom, Grid, Horizontal, Image, isMobile, Label, LinkButton, Spacer, TextInput, Vertical } from "webgen/mod.ts";
 import "../../assets/css/main.css";
 import { discordLogo, googleLogo } from "../../assets/imports.ts";
 import { DynaNavigation } from "../../components/nav.ts";
@@ -12,8 +12,6 @@ import { state } from "./state.ts";
 
 await RegisterAuthRefresh();
 
-WebGen();
-
 export const Form = (ele: Component) => {
     const form = createElement("form");
     form.append(ele.draw());