From eb61c6b5e6ddf8371a6f56d392d46b4ff812ae52 Mon Sep 17 00:00:00 2001 From: Brian Ginsburg <7957636+bgins@users.noreply.github.com> Date: Tue, 30 Aug 2022 13:42:46 -0700 Subject: [PATCH] Add homepage (#41) * Add homepage * Check backup status when loading account * Rename app * Add about card * Replace hamburger menu with brand * Rename app in title Co-authored-by: Jess Martin --- src/app.html | 2 +- src/components/Header.svelte | 59 +++++++--------- src/components/icons/Brand.svelte | 22 ++++++ src/components/icons/Shield.svelte | 1 + src/lib/app-name.ts | 2 +- src/lib/common/webnative.ts | 5 +- src/routes/index.svelte | 106 ++++++++++++++++++++++++++++- 7 files changed, 158 insertions(+), 39 deletions(-) create mode 100644 src/components/icons/Brand.svelte diff --git a/src/app.html b/src/app.html index 8b5a642..1144e4a 100644 --- a/src/app.html +++ b/src/app.html @@ -1,7 +1,7 @@ - WebNative Template + Webnative Template diff --git a/src/components/Header.svelte b/src/components/Header.svelte index 0073457..ce5f0db 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -3,6 +3,8 @@ import { sessionStore, theme } from '../stores' import { storeTheme, type Theme } from '$lib/theme/index' + import { appName } from '$lib/app-name' + import Brand from '$components/icons/Brand.svelte' import Shield from '$components/icons/Shield.svelte' import LightMode from '$components/icons/LightMode.svelte' import DarkMode from '$components/icons/DarkMode.svelte' @@ -14,25 +16,30 @@
-
- +
goto('/')}> + + {appName}
- + {#if !$sessionStore.loading && !$sessionStore.authed} +
+ + Connect + +
+ {/if} + + {#if !$sessionStore.loading && $sessionStore.backupCreated === false} + goto('delegate-account')} + class="btn btn-sm h-10 btn-warning rounded-full font-normal transition-colors ease-in hover:bg-orange-500 hover:border-orange-500" + > + + + + {/if} + + {#if $theme === 'light'} setTheme('dark')}> @@ -43,22 +50,4 @@ {/if} - - {#if !$sessionStore.loading} - {#if !$sessionStore.authed} -
- - Connect - -
- {:else if $sessionStore.backupCreated === false} - goto('delegate-account')} - class="btn btn-sm btn-warning rounded-full font-extralight" - > - - Backup required - - {/if} - {/if}
diff --git a/src/components/icons/Brand.svelte b/src/components/icons/Brand.svelte new file mode 100644 index 0000000..484f1a4 --- /dev/null +++ b/src/components/icons/Brand.svelte @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/components/icons/Shield.svelte b/src/components/icons/Shield.svelte index cef753f..e7c5520 100644 --- a/src/components/icons/Shield.svelte +++ b/src/components/icons/Shield.svelte @@ -4,6 +4,7 @@ viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg" + class="inline-block" > => { const fs = await webnative.loadRootFileSystem() filesystemStore.set(fs) + const backupStatus = await getBackupStatus(fs) + sessionStore.update(session => ({ ...session, username, - authed: true + authed: true, + backupCreated: backupStatus.created })) } diff --git a/src/routes/index.svelte b/src/routes/index.svelte index c89866f..1ea85ef 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -1,7 +1,111 @@ -

Application Interface

+
+

Welcome to {appName}!

+ + {#if session?.authed} +
+
+

👋 Account

+

+ Your username is + + {session.username} + +

+ + {#if session.backupCreated} +

✅ You have connected your account on another device.

+ {:else} +

+ + + + + You have not connected your account on another device. +

+ {/if} +
+ +
+
+
+ +
+
+

📷 Photo Gallery Demo

+

+ Try out the Webnative File System by storing your photos in public and + private storage. +

+
+ Go to Photos +
+
+
+ {/if} +
+
+

About

+

+ This app is a template for building apps with the + + Webnative SDK + ⎋ + +

+

+ Get started + + using this template + ⎋ + + and learn more in the + + Webnative Guide + ⎋ + +

+
+
+