diff --git a/package.json b/package.json index cbaf6134..fa8cc1f3 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "dev": "concurrently -p \"[{time}] [{name}]\" -n=sveltekit,electron -c=red,blue \"electron-vite dev --watch\" \"yarn run dev:sveltekit\"", "build": "yarn build:sveltekit && yarn typecheck && electron-vite build", "setup": "cd rust-utils && yarn && yarn build && cd ..", - "fetch:default-apps": "curl -L --output resources/default-apps/kando.webhapp https://drive.switch.ch/index.php/s/nSXZlwCYFAl9aRD/download", + "fetch:default-apps": "curl -L --output resources/default-apps/kando.webhapp https://github.com/holochain-apps/kando/releases/download/v0.8.18/kando.webhapp", "postinstall": "electron-builder install-app-deps", "build:win": "yarn build && electron-builder --win --config", "build:mac": "yarn build && electron-builder --mac --config", diff --git a/src/main/binaries.ts b/src/main/binaries.ts index 090ddeb4..ffc77d6a 100644 --- a/src/main/binaries.ts +++ b/src/main/binaries.ts @@ -5,12 +5,12 @@ import * as path from 'path'; import { HolochainLairVersionSchema } from '../types'; -const getFilePath = (relativePath) => path.join(app.getAppPath(), relativePath); +const getFilePath = (relativePath: string) => path.join(app.getAppPath(), relativePath); const getPackageJSONPath = () => getFilePath(app.isPackaged ? '../app.asar.unpacked/package.json' : './package.json'); -const readJSONFile = (filePath) => JSON.parse(readFileSync(filePath, 'utf8')); +const readJSONFile = (filePath: string) => JSON.parse(readFileSync(filePath, 'utf8')); const packageJSON = readJSONFile(getPackageJSONPath()); 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..d0adf22b 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 btn !rounded-full bg-app-gradient; +} + +.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/components/InstallAppForm.svelte b/src/renderer/src/lib/components/InstallAppForm.svelte deleted file mode 100644 index 925177d6..00000000 --- a/src/renderer/src/lib/components/InstallAppForm.svelte +++ /dev/null @@ -1,101 +0,0 @@ - - - - {$i18n.t('installNewApp')} - {$i18n.t('installKanDo')} - - - {#if tabsBasic === 0 || tabsBasic === 1} -
{ - if (tabsBasic === 0) { - return $installHappMutation.mutate( - { - appId, - networkSeed, - filePath: files[0].path - }, - - { - onSuccess: () => { - $installedApps.refetch(); - appId = ''; - networkSeed = ''; - } - } - ); - } - return $installKandoMutation.mutate( - { - appId, - networkSeed - }, - { - onSuccess: () => { - $installedApps.refetch(); - appId = ''; - networkSeed = ''; - } - } - ); - }} - class="column center-content space-y-4" - > -

{$i18n.t('installNewApp')}

-

{tabsBasic === 0 ? $i18n.t('selectAppFromFilesystem') : ''}

- {#if tabsBasic === 0} - - {/if} - - - - - - - -
- {/if} - - 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..d7451113 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", @@ -28,11 +31,12 @@ "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", "setupProgress": "Setup Progress", "startingHolochain": "Starting Holochain...", "startingLairKeystore": "Starting Lair Keystore...", - "whatDoYouWantToLaunch": "What do you want to launch?" + "whatDoYouWantToInstall": "What do you want to install?" } diff --git a/src/renderer/src/lib/types/components.ts b/src/renderer/src/lib/types/components.ts index 79ea0631..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,19 +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 type ButtonProps = - | (CommonButtonProps & { - disabled: boolean; - }) - | (CommonButtonProps & { - type: 'submit'; - }) - | (CommonButtonProps & { - type: 'button'; - }) - | CommonButtonProps; +export const AppStore = 'app-store'; +export const AppsView = 'apps-view'; + +export type AppHeader = typeof AppStore | typeof AppsView; 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/+page.svelte b/src/renderer/src/routes/+page.svelte index 512c352a..3f886e43 100644 --- a/src/renderer/src/routes/+page.svelte +++ b/src/renderer/src/routes/+page.svelte @@ -18,7 +18,7 @@ return showModalError({ modalStore, errorTitle: $i18n.t('appError'), - errorMessage: setupData.error.message + errorMessage: $i18n.t(setupData.error.message) }); } 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 8c3ba45d..da352cdf 100644 --- a/src/renderer/src/routes/main/app-store/+page.svelte +++ b/src/renderer/src/routes/main/app-store/+page.svelte @@ -1,33 +1,64 @@ - - - - -
- App Store Placeholder + + +
+
+ {#if isKandoInSearch} +
+ +
+

{$i18n.t('kando')}

+

+ Holochain hApp for collaborative KanBan boards. Real-time collaboration delivered by syn +

+
+ +
+ {/if} +
diff --git a/src/renderer/src/routes/main/app-store/components/InputModal.svelte b/src/renderer/src/routes/main/app-store/components/InputModal.svelte new file mode 100644 index 00000000..2d0d77c0 --- /dev/null +++ b/src/renderer/src/routes/main/app-store/components/InputModal.svelte @@ -0,0 +1,19 @@ + + +
+ + +
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..0caa5685 --- /dev/null +++ b/src/renderer/src/routes/main/app-store/components/Modal.svelte @@ -0,0 +1,87 @@ + + +{#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(); + }, + onError: (error) => { + modalStore.close(); + showModalError({ + modalStore, + errorTitle: $i18n.t('appError'), + errorMessage: $i18n.t(error.message) + }); + } + } + )} + 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 37884f38..c8c53914 100644 --- a/src/renderer/src/routes/main/apps-view/+page.svelte +++ b/src/renderer/src/routes/main/apps-view/+page.svelte @@ -1,15 +1,25 @@ - { - 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(); @@ -16,7 +16,7 @@ const openApp = client.openApp.createMutation(); -
+
@@ -24,10 +24,9 @@ {@const isDisabled = 'disabled' in app.appInfo.status} {@const shouldGreyOut = isSearchInputFilled && index !== 0} {/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 @@ + +
+ $installHappMutation.mutate( + { + appId, + networkSeed, + filePath: files[0].path + }, + + { + onSuccess: () => { + $installedApps.refetch(); + appId = ''; + networkSeed = ''; + } + } + )} + class="my-4 flex max-w-md flex-col items-center space-y-4 self-center" +> +

{$i18n.t('installNewApp')}

+

{$i18n.t('selectAppFromFilesystem')}

+ + + + + + + + + +
diff --git a/src/renderer/src/routes/settings/components/index.ts b/src/renderer/src/routes/settings/components/index.ts new file mode 100644 index 00000000..962f043e --- /dev/null +++ b/src/renderer/src/routes/settings/components/index.ts @@ -0,0 +1,2 @@ +export { default as AppEntry } from './AppEntry.svelte'; +export { default as InstallAppForm } from './InstallAppForm.svelte'; diff --git a/src/renderer/src/routes/splash/+layout.svelte b/src/renderer/src/routes/splash/+layout.svelte index 71f16860..23f32493 100644 --- a/src/renderer/src/routes/splash/+layout.svelte +++ b/src/renderer/src/routes/splash/+layout.svelte @@ -25,7 +25,7 @@