From 9ed7af6d2f9f6778aa7176bd6a2e64ea4abc2040 Mon Sep 17 00:00:00 2001 From: Dawid Urbas Date: Tue, 30 Jan 2024 11:37:28 +0000 Subject: [PATCH 1/7] Change structure, add app-store search --- .../src/lib/components/MainHeader.svelte | 29 ------ .../lib/components/TooltipForTruncate.svelte | 16 --- src/renderer/src/lib/components/index.ts | 8 -- src/renderer/src/lib/locale/en/common.json | 1 + src/renderer/src/lib/types/components.ts | 5 + .../src/routes/main/app-store/+page.svelte | 47 ++++----- .../src/routes/main/apps-view/+page.svelte | 43 ++------ .../apps-view}/components/ListOfApps.svelte | 8 +- .../components/TooltipForTruncate.svelte | 16 +++ .../routes/main/components/MainHeader.svelte | 97 +++++++++++++++++++ src/renderer/src/routes/settings/+page.svelte | 5 +- .../settings}/components/AppEntry.svelte | 2 +- .../components/InstallAppForm.svelte | 0 .../src/routes/settings/components/index.ts | 2 + .../splash}/components/PasswordForm.svelte | 0 .../components/SetupProgressWrapper.svelte | 0 .../splash}/components/TitleSubtitle.svelte | 0 .../src/routes/splash/components/index.ts | 3 + .../splash/confirm-password/+page.svelte | 5 +- .../routes/splash/enter-password/+page.svelte | 3 +- .../routes/splash/setup-password/+page.svelte | 4 +- .../src/routes/splash/welcome/+page.svelte | 4 +- 22 files changed, 167 insertions(+), 131 deletions(-) delete mode 100644 src/renderer/src/lib/components/MainHeader.svelte delete mode 100644 src/renderer/src/lib/components/TooltipForTruncate.svelte rename src/renderer/src/{lib => routes/main/apps-view}/components/ListOfApps.svelte (86%) create mode 100644 src/renderer/src/routes/main/apps-view/components/TooltipForTruncate.svelte create mode 100644 src/renderer/src/routes/main/components/MainHeader.svelte rename src/renderer/src/{lib => routes/settings}/components/AppEntry.svelte (95%) rename src/renderer/src/{lib => routes/settings}/components/InstallAppForm.svelte (100%) create mode 100644 src/renderer/src/routes/settings/components/index.ts rename src/renderer/src/{lib => routes/splash}/components/PasswordForm.svelte (100%) rename src/renderer/src/{lib => routes/splash}/components/SetupProgressWrapper.svelte (100%) rename src/renderer/src/{lib => routes/splash}/components/TitleSubtitle.svelte (100%) create mode 100644 src/renderer/src/routes/splash/components/index.ts diff --git a/src/renderer/src/lib/components/MainHeader.svelte b/src/renderer/src/lib/components/MainHeader.svelte deleted file mode 100644 index a4bf716e..00000000 --- a/src/renderer/src/lib/components/MainHeader.svelte +++ /dev/null @@ -1,29 +0,0 @@ - - -
-
- -
diff --git a/src/renderer/src/lib/components/TooltipForTruncate.svelte b/src/renderer/src/lib/components/TooltipForTruncate.svelte deleted file mode 100644 index 9d48c77f..00000000 --- a/src/renderer/src/lib/components/TooltipForTruncate.svelte +++ /dev/null @@ -1,16 +0,0 @@ - - -
- - {text} - - {#if text.length > 14} - - {/if} -
diff --git a/src/renderer/src/lib/components/index.ts b/src/renderer/src/lib/components/index.ts index f5ed0bff..d5d3a129 100644 --- a/src/renderer/src/lib/components/index.ts +++ b/src/renderer/src/lib/components/index.ts @@ -1,12 +1,4 @@ -export { default as AppEntry } from './AppEntry.svelte'; export { default as Button } from './Button.svelte'; export { default as CenterProgressRadial } from './CenterProgressRadial.svelte'; export { default as Error } from './Error.svelte'; export { default as Input } from './Input.svelte'; -export { default as InstallAppForm } from './InstallAppForm.svelte'; -export { default as ListOfApps } from './ListOfApps.svelte'; -export { default as MainHeader } from './MainHeader.svelte'; -export { default as PasswordForm } from './PasswordForm.svelte'; -export { default as SetupProgressWrapper } from './SetupProgressWrapper.svelte'; -export { default as TitleSubtitle } from './TitleSubtitle.svelte'; -export { default as TooltipForTruncate } from './TooltipForTruncate.svelte'; diff --git a/src/renderer/src/lib/locale/en/common.json b/src/renderer/src/lib/locale/en/common.json index d97e72ba..f180124b 100644 --- a/src/renderer/src/lib/locale/en/common.json +++ b/src/renderer/src/lib/locale/en/common.json @@ -28,6 +28,7 @@ "passwordPlaceholder": "Enter your password", "passwordWarning": "Your password can not be reset, recovered or changed. Write it down and store it in a secure location.", "passwordsDontMatch": "Passwords don't match!", + "searchForApps": "Search for apps", "secureYourAccount": "Secure your account", "selectAppFromFilesystem": "Select app from filesystem", "setupError": "Setup Error", diff --git a/src/renderer/src/lib/types/components.ts b/src/renderer/src/lib/types/components.ts index 79ea0631..d889e2fb 100644 --- a/src/renderer/src/lib/types/components.ts +++ b/src/renderer/src/lib/types/components.ts @@ -23,6 +23,11 @@ type CommonButtonProps = { class?: string; }; +export const AppStore = 'app-store'; +export const AppsView = 'apps-view'; + +export type AppHeader = typeof AppStore | typeof AppsView; + export type ButtonProps = | (CommonButtonProps & { disabled: boolean; diff --git a/src/renderer/src/routes/main/app-store/+page.svelte b/src/renderer/src/routes/main/app-store/+page.svelte index 8c3ba45d..9697aca4 100644 --- a/src/renderer/src/routes/main/app-store/+page.svelte +++ b/src/renderer/src/routes/main/app-store/+page.svelte @@ -1,33 +1,24 @@ - - - - -
+ + +
App Store Placeholder
diff --git a/src/renderer/src/routes/main/apps-view/+page.svelte b/src/renderer/src/routes/main/apps-view/+page.svelte index 37884f38..a971c026 100644 --- a/src/renderer/src/routes/main/apps-view/+page.svelte +++ b/src/renderer/src/routes/main/apps-view/+page.svelte @@ -1,9 +1,10 @@ - { - searchInput = ''; - }} -> - -
- -
- -
-
- + {#if $installedApps.isSuccess} import { Avatar } from '@skeletonlabs/skeleton'; - import { TooltipForTruncate } from '$components'; import { i18n, trpc } from '$services'; - import type { ExtendedAppInfo } from '../../../../types'; + import type { ExtendedAppInfo } from '../../../../../../types'; + import TooltipForTruncate from './TooltipForTruncate.svelte'; const client = trpc(); @@ -27,7 +27,7 @@ type="button" class:cursor-not-allowed={isDisabled} class:opacity-50={isDisabled || shouldGreyOut} - class="flex shrink-0 snap-start flex-col items-center" + class="flex w-20 snap-start flex-col items-center" on:click={() => { if (!isDisabled) $openApp.mutate(app, { @@ -47,7 +47,7 @@ {/each} + {/if} + +
+ +
+ {#if type === AppsView} + + {:else} + + {/if} +
+
+ {#if type == AppStore} + + {/if} + +
diff --git a/src/renderer/src/routes/settings/+page.svelte b/src/renderer/src/routes/settings/+page.svelte index bb5ca26a..7d7ced75 100644 --- a/src/renderer/src/routes/settings/+page.svelte +++ b/src/renderer/src/routes/settings/+page.svelte @@ -1,9 +1,10 @@

1 {$i18n.t('of')} 2

diff --git a/src/renderer/src/routes/splash/welcome/+page.svelte b/src/renderer/src/routes/splash/welcome/+page.svelte index 0f46a2bf..9c9f8d63 100644 --- a/src/renderer/src/routes/splash/welcome/+page.svelte +++ b/src/renderer/src/routes/splash/welcome/+page.svelte @@ -1,8 +1,10 @@ Date: Tue, 30 Jan 2024 11:37:59 +0000 Subject: [PATCH 2/7] Fix format --- src/renderer/src/routes/main/app-store/+page.svelte | 2 +- .../src/routes/main/apps-view/components/ListOfApps.svelte | 2 +- src/renderer/src/routes/main/components/MainHeader.svelte | 2 +- src/renderer/src/routes/splash/confirm-password/+page.svelte | 2 +- tsconfig.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/renderer/src/routes/main/app-store/+page.svelte b/src/renderer/src/routes/main/app-store/+page.svelte index 9697aca4..87553456 100644 --- a/src/renderer/src/routes/main/app-store/+page.svelte +++ b/src/renderer/src/routes/main/app-store/+page.svelte @@ -19,6 +19,6 @@ -
+
App Store Placeholder
diff --git a/src/renderer/src/routes/main/apps-view/components/ListOfApps.svelte b/src/renderer/src/routes/main/apps-view/components/ListOfApps.svelte index 6efb6c84..ee63fe61 100644 --- a/src/renderer/src/routes/main/apps-view/components/ListOfApps.svelte +++ b/src/renderer/src/routes/main/apps-view/components/ListOfApps.svelte @@ -16,7 +16,7 @@ const openApp = client.openApp.createMutation(); -
+
diff --git a/src/renderer/src/routes/main/components/MainHeader.svelte b/src/renderer/src/routes/main/components/MainHeader.svelte index ea8e07ef..5b5673bf 100644 --- a/src/renderer/src/routes/main/components/MainHeader.svelte +++ b/src/renderer/src/routes/main/components/MainHeader.svelte @@ -32,7 +32,7 @@ }; -
+
{#if type == AppsView}
-

+

{$i18n.t('passwordWarning')}

Date: Wed, 31 Jan 2024 19:00:43 +0000 Subject: [PATCH 3/7] Finish basic app-store --- src/main/windows.ts | 1 - src/renderer/src/app.postcss | 55 ++++++-- src/renderer/src/lib/components/Button.svelte | 4 +- src/renderer/src/lib/locale/en/common.json | 11 +- src/renderer/src/lib/types/components.ts | 18 +-- src/renderer/src/routes/+layout.svelte | 6 +- src/renderer/src/routes/main/+layout.svelte | 4 +- .../src/routes/main/app-store/+page.svelte | 40 +++++- .../app-store/components/InputModal.svelte | 20 +++ .../main/app-store/components/Modal.svelte | 83 +++++++++++ .../src/routes/main/apps-view/+page.svelte | 11 +- .../apps-view/components/ListOfApps.svelte | 6 +- .../routes/main/components/MainHeader.svelte | 7 +- .../settings/components/InstallAppForm.svelte | 133 +++++++----------- src/renderer/src/routes/splash/+layout.svelte | 4 +- .../splash/components/TitleSubtitle.svelte | 4 +- .../routes/splash/enter-password/+page.svelte | 2 +- src/renderer/tailwind.config.ts | 2 +- src/renderer/theme.ts | 48 +++---- 19 files changed, 296 insertions(+), 163 deletions(-) create mode 100644 src/renderer/src/routes/main/app-store/components/InputModal.svelte create mode 100644 src/renderer/src/routes/main/app-store/components/Modal.svelte diff --git a/src/main/windows.ts b/src/main/windows.ts index 225e5c05..886c6b77 100644 --- a/src/main/windows.ts +++ b/src/main/windows.ts @@ -37,7 +37,6 @@ const createBrowserWindow = (title: string, frame = false) => frame, width: 500, height: 520, - resizable: true, title: title, show: false, webPreferences: { diff --git a/src/renderer/src/app.postcss b/src/renderer/src/app.postcss index 1187aef7..d1161754 100644 --- a/src/renderer/src/app.postcss +++ b/src/renderer/src/app.postcss @@ -14,30 +14,65 @@ body { src: url('/fonts/Figtree-VariableFont_wght.ttf'); } +.heading { + @apply font-semibold; +} + .h1 { - @apply text-4xl font-semibold; + @apply heading text-4xl; } .h2 { - @apply text-2xl font-semibold; + @apply heading text-2xl; } .h3 { + @apply heading text-lg leading-5; +} +.h4 { @apply pb-8 text-base; } + .btn { - @apply mb-2 rounded font-semibold; + @apply mb-2 rounded; } -.btn-primary { - @apply btn bg-button-gradient; + +.btn-primary, +.btn-next { + @apply btn bg-button-gradient font-semibold; } + .btn-secondary { - @apply btn border border-surface-400 bg-transparent pl-2 pr-4 text-sm; + @apply btn border border-surface-400 bg-transparent pl-2 pr-4 text-sm font-semibold; } + .btn-next { - @apply btn ml-2 h-10 rounded bg-button-gradient p-2 leading-4; + @apply ml-2 h-10 p-2 leading-4; +} + +.btn-app-store { + @apply btn btn-sm !rounded-full font-semibold; } + +.btn-app-store-modal { + @apply bg-app-gradient btn !rounded-full; +} + +.btn-app-store-modal-secondary { + @apply btn !rounded-full border-4 border-primary-900; +} + +.input-base { + @apply rounded !bg-black py-2.5 leading-5; +} + +.input, +.input-modal { + @apply input-base; +} + .input { - @apply rounded py-2.5 leading-5; + @apply !border-surface-400; } -.dark .input { - @apply border-surface-400 bg-black; + +.input-modal { + @apply w-full rounded-full border-4 !border-primary-900 text-center !outline-none; } diff --git a/src/renderer/src/lib/components/Button.svelte b/src/renderer/src/lib/components/Button.svelte index dc216fa3..e75c44a6 100644 --- a/src/renderer/src/lib/components/Button.svelte +++ b/src/renderer/src/lib/components/Button.svelte @@ -3,9 +3,9 @@ export let props: ButtonProps; - $: ({ onClick, class: btnClass = 'btn-primary', ...rest } = props); + $: ({ onClick, class: btnClass = 'btn-primary', type = 'button', ...rest } = props); - diff --git a/src/renderer/src/lib/locale/en/common.json b/src/renderer/src/lib/locale/en/common.json index f180124b..5e216adb 100644 --- a/src/renderer/src/lib/locale/en/common.json +++ b/src/renderer/src/lib/locale/en/common.json @@ -2,25 +2,28 @@ "addApps": "Add Apps", "appError": "App Error", "back": "Back", + "cancel": "Cancel", "chooseAPassword": "Choose a password", "chooseCarefullyPasswordsCanNotBeRecovered": "Choose carefully! Passwords can not be recovered.", - "chooseNetworkSeed": "Choose a network seed (Optional)", "choosePassword": "Choose a password to encrypt your data and private keys. You will always need this password to start Launcher.", "confirmPassword": "Confirm password", "confirmYourPassword": "Confirm your password", - "customAppName": "Custom App Name", "discoverInstallAndManageYourApps": "Discover, install and manage your apps", "enterAppName": "Enter app name", "enterNetworkSeed": "Enter network seed", "getStarted": "Get started", "holochainLauncher": "Holochain Launcher", "initializingLairKeystore": "Initializing Lair Keystore...", + "install": "Install", "installHapp": "Install Happ", - "installKanDo": "Install KanDo", - "installNewApp": "Install new app", + "installNewApp": "Install new app from file", + "installing": "Installing...", + "kando": "KanDo", "launch": "Launch", "loginError": "Login error", "manageAndLaunchApps": "Log in to add, manage & launch your Holochain apps", + "name": "name", + "network": "network", "noAppsInstalled": "No apps installed.", "of": "of", "open": "Open", diff --git a/src/renderer/src/lib/types/components.ts b/src/renderer/src/lib/types/components.ts index d889e2fb..d64fa7bd 100644 --- a/src/renderer/src/lib/types/components.ts +++ b/src/renderer/src/lib/types/components.ts @@ -9,7 +9,7 @@ type FileProps = { }; type TextProps = { - placeholder: string; + placeholder?: string; required?: boolean; }; @@ -18,24 +18,14 @@ export type InputProps = | (CommonInputProps & FileProps & { type: 'file' }) | (CommonInputProps & TextProps & { type: 'password' }); -type CommonButtonProps = { +export type ButtonProps = { onClick?: (event: MouseEvent) => void; class?: string; + disabled?: boolean; + type?: 'submit' | 'button' | 'reset'; }; export const AppStore = 'app-store'; export const AppsView = 'apps-view'; export type AppHeader = typeof AppStore | typeof AppsView; - -export type ButtonProps = - | (CommonButtonProps & { - disabled: boolean; - }) - | (CommonButtonProps & { - type: 'submit'; - }) - | (CommonButtonProps & { - type: 'button'; - }) - | CommonButtonProps; diff --git a/src/renderer/src/routes/+layout.svelte b/src/renderer/src/routes/+layout.svelte index 7abd496c..3f6aef7a 100644 --- a/src/renderer/src/routes/+layout.svelte +++ b/src/renderer/src/routes/+layout.svelte @@ -9,7 +9,9 @@ initializeStores(); - - + +
+ +
diff --git a/src/renderer/src/routes/main/+layout.svelte b/src/renderer/src/routes/main/+layout.svelte index 18744108..b78c36fd 100644 --- a/src/renderer/src/routes/main/+layout.svelte +++ b/src/renderer/src/routes/main/+layout.svelte @@ -21,6 +21,4 @@ }); -
- -
+ diff --git a/src/renderer/src/routes/main/app-store/+page.svelte b/src/renderer/src/routes/main/app-store/+page.svelte index 87553456..d42e43ce 100644 --- a/src/renderer/src/routes/main/app-store/+page.svelte +++ b/src/renderer/src/routes/main/app-store/+page.svelte @@ -1,6 +1,26 @@ + +
+ + +
diff --git a/src/renderer/src/routes/main/app-store/components/Modal.svelte b/src/renderer/src/routes/main/app-store/components/Modal.svelte new file mode 100644 index 00000000..7935576f --- /dev/null +++ b/src/renderer/src/routes/main/app-store/components/Modal.svelte @@ -0,0 +1,83 @@ + + +{#if $modalStore[0]} +
+ +
{$modalStore[0].title ?? $i18n.t('kando')}
+
+ $installKandoMutation.mutate( + { + appId: formData.appId, + networkSeed: formData.networkSeed + }, + { + onSuccess: () => { + $installedApps.refetch(); + goto(`apps-view?presearch=${formData.appId}`); + modalStore.close(); + } + } + )} + class="modal-form flex flex-col space-y-4 p-4" + > + + +
+ {#if !$installKandoMutation.isPending} + + {/if} + +
+ +
+{/if} diff --git a/src/renderer/src/routes/main/apps-view/+page.svelte b/src/renderer/src/routes/main/apps-view/+page.svelte index a971c026..c8c53914 100644 --- a/src/renderer/src/routes/main/apps-view/+page.svelte +++ b/src/renderer/src/routes/main/apps-view/+page.svelte @@ -1,4 +1,7 @@ diff --git a/src/renderer/src/routes/main/apps-view/components/ListOfApps.svelte b/src/renderer/src/routes/main/apps-view/components/ListOfApps.svelte index ee63fe61..34b58ac8 100644 --- a/src/renderer/src/routes/main/apps-view/components/ListOfApps.svelte +++ b/src/renderer/src/routes/main/apps-view/components/ListOfApps.svelte @@ -16,7 +16,7 @@ const openApp = client.openApp.createMutation(); -
+
@@ -24,7 +24,6 @@ {@const isDisabled = 'disabled' in app.appInfo.status} {@const shouldGreyOut = isSearchInputFilled && index !== 0} {/each} - - {/if} - - + + + + + + + diff --git a/src/renderer/src/routes/splash/+layout.svelte b/src/renderer/src/routes/splash/+layout.svelte index 71f16860..66870791 100644 --- a/src/renderer/src/routes/splash/+layout.svelte +++ b/src/renderer/src/routes/splash/+layout.svelte @@ -24,8 +24,8 @@ }); -