Merge branch 'main' of https://github.com/BBN-Holding/bbn.one

BBN-Holding · Oct 1, 2024 · dd94f1b · dd94f1b
2 parents c6c1514 + 332cd94
commit dd94f1b
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 101 deletions.
diff --git a/pages/admin/views/list.ts b/pages/admin/views/list.ts
@@ -1,8 +1,8 @@
+import { saveBlob, sheetStack } from "shared/helper.ts";
 import { API, External, fileCache, RenderItem, stupidErrorAlert } from "shared/mod.ts";
-import { asRef, Box, Button, Cache, Color, Entry, Grid, Horizontal, IconButton, Image, MIcon, ref, SheetDialog, Spacer, TextInput, Vertical } from "webgen/mod.ts";
+import { asRef, Box, Button, Cache, Color, Entry, Grid, IconButton, Image, MIcon, ref, SheetDialog, TextInput } from "webgen/mod.ts";
 import { templateArtwork } from "../../../assets/imports.ts";
 import { File, OAuthApp, Transcript, Wallet } from "../../../spec/music.ts";
-import { saveBlob, sheetStack } from "../../shared/helper.ts";
 import { state } from "../state.ts";
 
 export function entryWallet(wallet: Wallet) {
@@ -67,26 +67,24 @@ export function entryOAuth(app: OAuthApp) {
         .addClass("small");
 }
 
-const oAuthViewDialog = (oauth: OAuthApp) =>
-    SheetDialog(
-        sheetStack,
+const oAuthViewDialog = (oauth: OAuthApp) => {
+    const sheet = SheetDialog(
+        sheetStack.setSheetWidth("30rem"),
         "OAuth App Details",
-        Vertical(
-            Grid(
-                TextInput("text", "Name").ref(asRef(oauth.name)).setColor(Color.Disabled),
-                TextInput("text", "Client ID").ref(asRef(oauth._id)).setColor(Color.Disabled),
-                TextInput("text", "Client Secret").ref(asRef(oauth.secret)).setColor(Color.Disabled),
-                TextInput("text", "Redirect URI").ref(asRef(oauth.redirect.join(","))).setColor(Color.Disabled),
-            ),
-            Horizontal(
-                Spacer(),
-                Button("Close").onClick(() => {
-                    oAuthViewDialog(oauth).close();
-                }),
-            ),
-        ),
+        Grid(
+            TextInput("text", "Name").ref(asRef(oauth.name)).setColor(Color.Disabled),
+            TextInput("text", "Client ID").ref(asRef(oauth._id)).setColor(Color.Disabled),
+            TextInput("text", "Client Secret").ref(asRef(oauth.secret)).setColor(Color.Disabled),
+            TextInput("text", "Redirect URI").ref(asRef(oauth.redirect.join(","))).setColor(Color.Disabled),
+            Button("Close").onClick(() => {
+                sheet.close();
+            }).setJustifySelf("end"),
+        ).setGap(),
     );
 
+    return sheet;
+};
+
 export function entryFile(file: File) {
     return Entry({
         title: file.filename,

diff --git a/pages/admin/views/menu.ts b/pages/admin/views/menu.ts
@@ -3,7 +3,7 @@ import { sumOf } from "@std/collections";
 import loader from "https://esm.sh/@monaco-editor/[email protected]";
 import { activeUser, sheetStack, showProfilePicture } from "shared/helper.ts";
 import { API, HeavyList, loadMore, Navigation, placeholder } from "shared/mod.ts";
-import { asRef, asState, Box, Button, Color, Custom, Entry, Grid, Horizontal, isMobile, Label, lazy, ref, SheetDialog, Spacer, Table, TextInput, Vertical } from "webgen/mod.ts";
+import { asRef, asState, Box, Button, Color, Custom, Entry, Grid, Horizontal, isMobile, lazy, ref, SheetDialog, Spacer, Table, TextInput } from "webgen/mod.ts";
 import { DropType } from "../../../spec/music.ts";
 import { upload } from "../loading.ts";
 import { state } from "../state.ts";
@@ -185,9 +185,7 @@ export const adminMenu = Navigation({
                     {
                         title: "Create new OAuth Application",
                         id: "add+oauth",
-                        clickHandler: () => {
-                            addOAuthDialog.open();
-                        },
+                        clickHandler: () => addOAuthDialog.open(),
                     },
                     HeavyList(state.$oauth, entryOAuth),
                 ]
@@ -218,10 +216,9 @@ const addOAuthDialog = SheetDialog(
     sheetStack,
     "Create new OAuth Application",
     Grid(
-        Label("Create new OAuth Application"),
         TextInput("text", "Name").ref(oAuthData.$name),
         oAuthData.$redirectURI.map((x) =>
-            Vertical(
+            Grid(
                 Table([
                     ["URI", "auto", (_, index) =>
                         TextInput("text", "URI", "blur")
@@ -239,11 +236,9 @@ const addOAuthDialog = SheetDialog(
                         .onClick(() => {
                             x.push("");
                         }),
-                ).setPadding("0 0 3rem 0"),
+                ),
             )
                 .setGap()
-                .setWidth("clamp(0rem, 100vw, 60vw)")
-                .setMargin("0 -.6rem 0 0")
         ).asRefComponent(),
         Button("Upload Image").onPromiseClick(async () => {
             oAuthData.image = await upload("oauth");
@@ -262,5 +257,5 @@ const addOAuthDialog = SheetDialog(
                         });
                 })
         ).asRefComponent(),
-    ).setGap("10px"),
+    ).setGap(),
 );
diff --git a/pages/user/oauth.css b/pages/user/oauth.css
@@ -19,10 +19,6 @@
     padding: 0.2rem 0;
 }
 
-.area-space {
-    max-width: 27rem;
-}
-
 .auth-area .wimage.profile-picture img,
 .auth-area .wimage.profile-picture {
     width: 100%;

diff --git a/pages/user/oauth.ts b/pages/user/oauth.ts
@@ -1,11 +1,11 @@
 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, Grid, Horizontal, Image, isMobile, Label, MIcon, Spacer, Vertical, WebGen } from "webgen/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 "../../assets/css/main.css";
 import { dots, templateArtwork } from "../../assets/imports.ts";
 import { DynaNavigation } from "../../components/nav.ts";
 import { OAuthScopes } from "../../spec/music.ts";
-import { activeUser, getNameInital, logOut, ProfilePicture, RegisterAuthRefresh } from "../shared/helper.ts";
 import "./oauth.css";
 import "./signin.css";
 
@@ -39,74 +39,70 @@ const state = asState({
     icon: "",
 });
 
-const list = state.$loaded.map((loaded) => {
-    if (loaded) {
-        return Box(
-            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(
+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(
-                        Image(state.icon || templateArtwork, "New Connection"),
-                        Label(state.name || "---")
-                            .setJustifySelf("center")
-                            .addClass("label-small"),
-                    ),
-                    Image(dots, "dots"),
-                    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"),
+                    Vertical(
+                        params.scope!.split(",").map((e) =>
+                            Grid(
+                                MIcon("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(),
+                    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(),
+                    )
+                        .setMargin("1rem 0 0"),
                 )
-                    .setMargin("1rem 0 0"),
-            ),
-        );
-    }
-    return LoadingSpinner();
-}).asRefComponent();
-
-Body(Vertical(
-    DynaNavigation("Home"),
-    Box().addClass("background-image"),
-    list.addClass("auth-area"),
-    Footer(),
-));
+                : LoadingSpinner()
+        ).asRefComponent().addClass("auth-area").setCssStyle("display", "grid"),
+        FullWidthSection(Footer()),
+    ),
+);
 
 async function authorize() {
     await API.oauth.authorize(params.clientId!, params.scope!, params.redirectUri!)

diff --git a/pages/user/settings.personal.ts b/pages/user/settings.personal.ts
@@ -1,8 +1,8 @@
 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 { activeUser, allowedImageFormats, forceRefreshToken, IsLoggedIn, showProfilePicture } from "../shared/helper.ts";
 
 export function ChangePersonal() {
     const state = asState({

diff --git a/pages/user/settings.ts b/pages/user/settings.ts
@@ -1,9 +1,9 @@
+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 "../../assets/css/main.css";
 import { DynaNavigation } from "../../components/nav.ts";
-import { logOut, RegisterAuthRefresh } from "../shared/helper.ts";
 import { ChangePersonal } from "./settings.personal.ts";
 
 WebGen();

diff --git a/pages/user/signin.ts b/pages/user/signin.ts
@@ -1,11 +1,11 @@
 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 "../../assets/css/main.css";
 import { discordLogo, googleLogo } from "../../assets/imports.ts";
 import { DynaNavigation } from "../../components/nav.ts";
-import { RegisterAuthRefresh } from "../shared/helper.ts";
 import { handleStateChange, loginUser, registerUser } from "./actions.ts";
 import "./signin.css";
 import { state } from "./state.ts";