Feat/app store

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",

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());
 

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: {

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;
 }

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);
 </script>
 
-<button on:click={onClick} class={btnClass} {...rest}>
+<button on:click={onClick} class={btnClass} {type} {...rest}>
 	<slot />
 </button>

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';

src/renderer/src/lib/locale/en/common.json

@@ -2,37 +2,41 @@
 	"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",
 	"password": "password",
 	"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?"
 }

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;

src/renderer/src/routes/+layout.svelte

@@ -9,7 +9,9 @@
 	initializeStores();
 </script>
 
-<Modal />
 <QueryClientProvider client={queryClient}>
-	<slot />
+	<Modal />
+	<div class="flex h-full min-w-80 flex-col">
+		<slot />
+	</div>
 </QueryClientProvider>

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)
 			});
 		}
 

src/renderer/src/routes/main/+layout.svelte

@@ -21,6 +21,4 @@
 	});
 </script>
 
-<div class="flex h-full flex-col">
-	<slot />
-</div>
+<slot />