diff --git a/pages/music/main.ts b/pages/music/main.ts index e49b708..a5bf3b9 100644 --- a/pages/music/main.ts +++ b/pages/music/main.ts @@ -6,13 +6,15 @@ import "./pages/unpublishedDrops.ts"; /// -import { activeUser, RegisterAuthRefresh, renewAccessTokenIfNeeded, sheetStack } from "shared/helper.ts"; +import { RegisterAuthRefresh, renewAccessTokenIfNeeded, sheetStack } from "shared/helper.ts"; +import { Navigation } from "shared/navigation.ts"; import { API, stupidErrorAlert } from "shared/restSpec.ts"; -import { activeRoute, appendBody, Box, Content, createRoute, css, DialogContainer, FullWidthSection, Grid, Label, menuList, PageRouter, PrimaryButton, ref, SecondaryButton, StartRouting, WebGenTheme } from "webgen/mod.ts"; +import { activeRoute, appendBody, Box, Content, createRoute, css, DialogContainer, FullWidthSection, PrimaryButton, StartRouting, WebGenTheme } 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 { artistsPage } from "./pages/artists.ts"; import { draftsDropsPage } from "./pages/draftDrops.ts"; import { publishedDrops } from "./pages/publishedDrops.ts"; @@ -34,44 +36,6 @@ createRoute({ }, }); -export function Navigation() { - return Box( - Content( - Grid( - Label(ref`Hi ${activeUser.username} 👋`) - .setFontWeight("bold") - .setTextSize("4xl"), - Grid( - menuList - .map((item) => - item - .filter((item) => item.route.entry.patternUrl.startsWith("/c/music?list=")) - .map((item) => - Box(activeRoute.map((activeRoute) => - (activeRoute == item.route.entry ? PrimaryButton(item.label) : SecondaryButton(item.label)) - .onPromiseClick(async () => { - await window.navigation.navigate(item.route.entry.patternUrl).finished; - }) - )) - ) - ), - ) - .setGap(".8rem") - .setAutoFlow("column") - .setAutoColumn("max-content"), - ) - .setGap("1rem") - .setMargin("4rem 0 1rem"), - ) - .addStyle(css` - :host { - --wg-button-border-radius: var(--wg-radius-large); - } - `), - PageRouter, - ); -} - appendBody( WebGenTheme( DialogContainer(sheetStack.visible(), sheetStack), @@ -80,7 +44,23 @@ appendBody( DynaNavigation("Music"), ), ), - Navigation(), + Navigation( + Box( + activeRoute.map((route) => route === artistsPage.route.entry) + .map((isArtistsRoute) => + isArtistsRoute + ? PrimaryButton("Create new Artist") + .onClick(() => { + // createArtistSheet().then(async () => menuState.artists = await API.music.artists.list().then(stupidErrorAlert)) + }) + : PrimaryButton("Create new Drop") + .onPromiseClick(async () => { + const { id } = await API.music.drops.create().then(stupidErrorAlert); + location.href = `/c/music/new-drop?id=${id}`; + }) + ), + ), + ), ) .addStyle(css` :host { diff --git a/pages/music/pages/draftDrops.ts b/pages/music/pages/draftDrops.ts index 52a5040..eaf385b 100644 --- a/pages/music/pages/draftDrops.ts +++ b/pages/music/pages/draftDrops.ts @@ -9,6 +9,7 @@ const source = data.map((data) => data === "loading" ? [] : data); export const draftsDropsPage = createPage( { label: "Drafts", + weight: 0, route: createRoute({ path: "/c/music?list=drafts", events: { diff --git a/pages/shared/navigation.ts b/pages/shared/navigation.ts index aa2c284..9b3e725 100644 --- a/pages/shared/navigation.ts +++ b/pages/shared/navigation.ts @@ -1,3 +1,55 @@ +import { activeUser } from "shared/helper.ts"; +import { activeRoute, Box, Component, Content, css, Empty, Grid, Label, menuList, PageRouter, PrimaryButton, ref, SecondaryButton } from "webgen/mod.ts"; + +export function Navigation(actions?: Component) { + return Box( + Content( + Grid( + Grid( + Label(ref`Hi ${activeUser.username} 👋`) + .setFontWeight("bold") + .setTextSize("4xl"), + Grid( + menuList + .map((item) => + item + .filter((item) => item.weight !== undefined) + .map((item) => + Box( + activeRoute + .map((activeRoute) => activeRoute == item.route.entry) + .map((active) => + (active ? PrimaryButton(item.label) : SecondaryButton(item.label)) + .onPromiseClick(async () => { + await window.navigation.navigate(item.route.entry.patternUrl).finished; + }) + ), + ) + ) + ), + ) + .setGap(".8rem") + .setAutoFlow("column") + .setAutoColumn("max-content") + .setPadding("7px 0") + .setCssStyle("overflow", "auto"), + ) + .setGap("1rem") + .setMargin("4rem 0 1rem"), + actions ?? Empty(), + ) + .setTemplateColumns("auto max-content") + .setAlignItems("center"), + ) + .addStyle(css` + :host { + --wg-button-border-radius: var(--wg-radius-large); + } + `), + PageRouter, + ); +} + // import { assert } from "@std/assert"; // import { alwaysRef, asRef, Box, Component, Empty, Entry, Grid, isMobile, isRef, Label, Refable, Reference } from "webgen/mod.ts"; // import "./navigation.css";