Moves home nav back to top

Author: d13

src/webviews/apps/home/components/repo-alerts.ts

@@ -1,6 +1,6 @@
 import { consume } from '@lit/context';
 import { css, html } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import type { State } from '../../../home/protocol';
 import { GlElement } from '../../shared/components/element';
@@ -38,6 +38,11 @@ export class GlRepoAlerts extends GlElement {
 		`,
 	];
 
+	@property({ type: Boolean, reflect: true, attribute: 'has-alerts' })
+	get hasAlerts() {
+		return this.alertVisibility.header;
+	}
+
 	@consume<State>({ context: stateContext, subscribe: true })
 	@state()
 	private _state!: State;

src/webviews/apps/home/home.css.ts

@@ -57,8 +57,6 @@ export const homeStyles = css`
 	}
 	.home__nav {
 		flex: none;
-		padding: 0;
-		margin-block: 0.6rem -1rem;
 	}
 	.home__footer {
 		flex: none;
@@ -67,6 +65,10 @@ export const homeStyles = css`
 	gl-home-account-content {
 		margin-bottom: 0;
 	}
+
+	gl-repo-alerts:not([has-alerts]) {
+		display: none;
+	}
 `;
 
 export const inlineNavStyles = css`
@@ -128,6 +130,9 @@ export const inlineNavStyles = css`
 		color: var(--color-foreground--50);
 		margin-bottom: 0.2rem;
 	}
+	.promo-banner:not([has-promo]) {
+		display: none;
+	}
 `;
 
 export const buttonStyles = css`

src/webviews/apps/home/home.ts

@@ -52,16 +52,15 @@ export class GlHomeApp extends GlApp<State> {
 	override render() {
 		return html`
 			<div class="home scrollable">
+				<gl-home-nav class="home__nav"></gl-home-nav>
 				<gl-repo-alerts class="home__header"></gl-repo-alerts>
 				<main class="home__main scrollable" id="main">
 					<gl-onboarding></gl-onboarding>
 					<gl-feature-nav .badgeSource=${this.badgeSource}></gl-feature-nav>
 				</main>
 
 				<footer class="home__footer">
-					<gl-home-account-content id="account-content">
-						<gl-home-nav class="home__nav"></gl-home-nav>
-					</gl-home-account-content>
+					<gl-home-account-content id="account-content"> </gl-home-account-content>
 				</footer>
 			</div>
 		`;

src/webviews/apps/shared/components/promo.ts

@@ -52,6 +52,11 @@ export class GlPromo extends LitElement {
 	@property({ reflect: true, type: String })
 	type: 'link' | 'info' = 'info';
 
+	@property({ reflect: true, type: Boolean, attribute: 'has-promo' })
+	get hasPromo() {
+		return this.promo != null;
+	}
+
 	override render() {
 		if (!this.promo) return;