Add happs and keys list

holo-key-manager-extension/src/lib/components/ActionPage.svelte

@@ -3,10 +3,13 @@
 	import { dismissWindow } from '$lib/helpers';
 
 	import LogoCloseBar from './LogoCloseBar.svelte';
+	import Title from './Title.svelte';
 
 	export let outerWindow = false;
 	export let mainAction: () => void;
+	export let secondaryAction = dismissWindow;
 	export let mainActionLabel: string;
+	export let secondaryActionLabel = 'Cancel';
 	export let title: string;
 	export let subTitle: string;
 </script>
@@ -20,12 +23,12 @@
 		<img
 			src={mainActionLabel === 'Setup' ? '/img/setup.svg' : '/img/holo_logo.svg'}
 			alt={mainActionLabel}
-			class="max-w-[48px]"
+			class="mb-4 max-w-[48px]"
 		/>
-		<h1 class="mt-4 text-2xl font-bold">{title}</h1>
+		<Title small>{title}</Title>
 		<AppParagraph extraProps="my-4 max-w-xs text-center" text={subTitle} />
 	</div>
 
 	<Button label={mainActionLabel} onClick={mainAction} extraBottomMargin />
-	<Button label="Cancel" onClick={dismissWindow} color="secondary" />
+	<Button label={secondaryActionLabel} onClick={secondaryAction} color="secondary" />
 </div>

holo-key-manager-extension/src/lib/components/GoBack.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	const goBack = () => window?.history.back();
+
+	export let extraClass = 'ml-6';
+</script>
+
+<button class={`${extraClass} mb-4 flex items-center self-start`} on:click={goBack}>
+	<img src="/img/arrow-left.svg" alt="Arrow" />
+	<span class="ml-2 text-base">Back</span></button
+>

holo-key-manager-extension/src/lib/components/Title.svelte

@@ -1,3 +1,9 @@
-<h1 class="mb-2 text-center text-3xl font-bold">
+<script lang="ts">
+	import clsx from 'clsx';
+
+	export let small = false;
+</script>
+
+<h1 class={clsx('text-center font-bold', small ? 'text-2xl' : 'mb-2 text-3xl')}>
 	<slot />
 </h1>

holo-key-manager-extension/src/lib/components/index.ts

@@ -2,6 +2,7 @@ export { default as ActionPage } from './ActionPage.svelte';
 export { default as AppContainer } from './AppContainer.svelte';
 export { default as AppParagraph } from './AppParagraph.svelte';
 export { default as Button } from './Button.svelte';
+export { default as GoBack } from './GoBack.svelte';
 export { default as Input } from './Input.svelte';
 export { default as Login } from './Login.svelte';
 export { default as LogoCloseBar } from './LogoCloseBar.svelte';

holo-key-manager-extension/src/lib/helpers/navigation.ts

@@ -1,28 +1,24 @@
 import { derived } from 'svelte/store';
 
-import { browser } from '$app/environment';
 import { page } from '$app/stores';
 import { relevantKeys } from '$shared/const';
 
 export const dismissWindow = () => window.close();
 
 export const extractDetailsFromUrl = derived(page, ($page) => {
 	const unknownDetails = {
-		action: 'Unknown Action',
 		happName: 'Unknown App',
 		happId: 'Unknown ID',
+		happLogo: '',
+		happUiUrl: '',
 		message: 'Unknown Message',
 		requireEmail: false,
 		requireRegistrationCode: false
 	};
 
-	if (!browser) {
-		return unknownDetails;
-	}
-
 	const params = new URLSearchParams(new URL($page.url.href).search);
 
-	const getParamValue = (key: keyof typeof unknownDetails) => {
+	const getParamValue = (key: (typeof relevantKeys)[number]) => {
 		const param = params.get(key);
 		return param === 'true' ? true : param === 'false' ? false : param || unknownDetails[key];
 	};
@@ -38,6 +34,6 @@ export const extractDetailsFromUrl = derived(page, ($page) => {
 	return {
 		...unknownDetails,
 		...details,
-		action: getParamValue('action')
+		action: params.get('action') || 'Unknown Action'
 	};
 });

holo-key-manager-extension/src/lib/helpers/queries.ts

@@ -2,7 +2,6 @@ import type { QueryClient } from '@tanstack/svelte-query';
 
 import { unlockKey } from '$services';
 import {
-	APPS_LIST,
 	AUTHENTICATED_APPS_LIST,
 	BACKGROUND_SCRIPT_RECEIVED_DATA,
 	LOCAL,
@@ -12,7 +11,6 @@ import {
 import { parseMessageSchema, uint8ArrayToBase64 } from '$shared/helpers';
 import { getSessionKey, sendMessage, storageService } from '$shared/services';
 import {
-	AppsListSchema,
 	AuthenticatedAppsListSchema,
 	HashSaltSchema,
 	type Message,
@@ -30,17 +28,6 @@ export const getPassword = async () => {
 	return HashSaltSchema.safeParse(data);
 };
 
-export const fetchAndParseAppsList = async () => {
-	const appsListData = await storageService.getWithoutCallback({
-		key: APPS_LIST,
-		area: LOCAL
-	});
-
-	const parsedAppsListData = AppsListSchema.safeParse(appsListData);
-
-	return parsedAppsListData.success ? parsedAppsListData.data : [];
-};
-
 export const fetchAuthenticatedAppsList = async (happId?: string) => {
 	const authenticatedAppsListData = await storageService.getWithoutCallback({
 		key: AUTHENTICATED_APPS_LIST,

holo-key-manager-extension/src/lib/queries/applicationQueries.ts

@@ -2,7 +2,6 @@ import { createMutation, createQuery, QueryClient } from '@tanstack/svelte-query
 
 import {
 	deriveSignPubKey,
-	fetchAndParseAppsList,
 	fetchAuthenticatedAppsList,
 	handleSuccess,
 	sendMessageAndHandleResponse
@@ -18,13 +17,16 @@ import {
 	SIGN_IN_SUCCESS,
 	SIGN_UP_SUCCESS
 } from '$shared/const';
-import { storageService } from '$shared/services';
+import { fetchAndParseAppsList, storageService } from '$shared/services';
 
 export function createApplicationKeyMutation(queryClient: QueryClient) {
 	return createMutation({
 		mutationFn: async (mutationData: {
 			app_key_name: string;
 			happId: string;
+			happName: string;
+			happLogo: string;
+			happUiUrl: string;
 			email?: string;
 			registrationCode?: string;
 		}) => {
@@ -41,7 +43,10 @@ export function createApplicationKeyMutation(queryClient: QueryClient) {
 					{
 						keyName: mutationData.app_key_name,
 						happId: mutationData.happId,
-						isDeleted: false
+						happName: mutationData.happName,
+						isDeleted: false,
+						happLogo: mutationData.happLogo,
+						happUiUrl: mutationData.happUiUrl
 					}
 				],
 				area: LOCAL
@@ -143,3 +148,25 @@ export function createApplicationKeysQuery() {
 		});
 	};
 }
+
+export function createAllApplicationsQuery() {
+	return createQuery({
+		queryKey: [APPLICATION_KEYS],
+		queryFn: async () => {
+			const currentAppsList = await fetchAndParseAppsList();
+
+			const appsDetails = currentAppsList.map((app) => ({
+				happId: app.happId,
+				happName: app.happName,
+				happLogo: app.happLogo,
+				happUiUrl: app.happUiUrl
+			}));
+
+			const uniqueApps = appsDetails.filter(
+				(app, index, self) => index === self.findIndex((t) => t.happId === app.happId)
+			);
+
+			return uniqueApps;
+		}
+	});
+}

holo-key-manager-extension/src/lib/queries/index.ts

@@ -1,6 +1,7 @@
 import { useQueryClient } from '@tanstack/svelte-query';
 
 import {
+	createAllApplicationsQuery,
 	createApplicationKeyMutation,
 	createApplicationKeysQuery,
 	createSignInWithKeyMutation
@@ -31,6 +32,7 @@ export function appQueries() {
 	const applicationKeysQueryFunction = createApplicationKeysQuery();
 	const signInMutation = createSignInMutation(queryClient);
 	const storeDeviceKey = createStoreDeviceKey(queryClient);
+	const allApplicationsQuery = createAllApplicationsQuery();
 	const recoverDeviceKeyMutation = createRecoverDeviceKeyMutation();
 	const applicationKeyMutation = createApplicationKeyMutation(queryClient);
 	const passwordAndStoreDeviceKeyMutation = createPasswordAndStoreDeviceKeyMutation(queryClient);
@@ -47,6 +49,7 @@ export function appQueries() {
 		recoverDeviceKeyMutation,
 		passwordAndStoreDeviceKeyMutation,
 		applicationKeysQueryFunction,
+		allApplicationsQuery,
 		signInWithKeyMutation
 	};
 }

holo-key-manager-extension/src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	import { ActionPage, Login, LogoCloseBar } from '$components';
+	import { ActionPage, Login } from '$components';
 	import { appQueries } from '$queries';
 	import { isChromePermissionsSafe } from '$shared/helpers';
 
@@ -13,6 +13,7 @@
 	const openInNewTab = (url: string) => () => window.open(url, '_blank');
 	const redirectToChangePassword = openInNewTab('change-password.html');
 	const redirectToSetup = openInNewTab('/setup-pass/start.html');
+	const redirectToListOfHapps = openInNewTab('/list-of/happs.html');
 
 	let permissionGranted = false;
 
@@ -41,13 +42,14 @@
 		subTitle="Holo Key Manager needs additional permissions. Click “Request Permissions” to proceed."
 	/>
 {:else if hasSessionData}
-	<div class="m-8">
-		<LogoCloseBar />
-		<h1 class="mt-4 text-2xl font-bold">Holo Key Manager</h1>
-		<button on:click={redirectToChangePassword} class="text-blue-500 hover:text-blue-800">
-			Change Password
-		</button>
-	</div>
+	<ActionPage
+		mainAction={redirectToListOfHapps}
+		mainActionLabel="List of hApps"
+		secondaryAction={redirectToChangePassword}
+		secondaryActionLabel="Change Password"
+		title="Holo Key Manager"
+		subTitle=""
+	/>
 {:else if hasSetupData}
 	<Login />
 {:else}

holo-key-manager-extension/src/routes/list-of/+layout.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { Title } from '$components';
+</script>
+
+<div class="mx-8 my-4">
+	<div class="flex">
+		<img src={'/img/holo_logo.svg'} alt={'Holo Logo'} class="mr-2 max-w-[48px]" />
+		<Title small>Holo Key Manager</Title>
+	</div>
+
+	<slot />
+</div>

holo-key-manager-extension/src/routes/list-of/happs/+page.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { appQueries } from '$queries';
+
+	const { allApplicationsQuery } = appQueries();
+
+	let searchInput = '';
+
+	$: filteredApplications = $allApplicationsQuery.data?.filter(
+		(applicationKey) =>
+			applicationKey.happId.toLowerCase().includes(searchInput.toLowerCase()) ||
+			applicationKey.happName.toLowerCase().includes(searchInput.toLowerCase())
+	);
+</script>
+
+<div class="mt-4 flex justify-between">
+	<h2 class="text-xl font-semibold">Managed hApps</h2>
+	<div class="relative">
+		<img
+			src={'/img/magnifying-glass.svg'}
+			alt={'Search'}
+			class="absolute left-3 top-1/2 -translate-y-1/2"
+		/>
+		<input
+			placeholder="Search hApp"
+			bind:value={searchInput}
+			class="rounded-md border border-grey py-1.5 pl-9 outline-none focus:outline-none"
+		/>
+	</div>
+</div>
+{#each filteredApplications || [] as applicationKey}
+	<div class="flex items-center justify-between border-b border-grey py-2 last:border-b-0">
+		<div class="flex items-center">
+			{#if !!applicationKey.happLogo}
+				<img src={applicationKey.happLogo} alt="hApp Logo" class="mr-2 h-10 w-10" />
+			{/if}
+			<span>{applicationKey.happName}</span>
+		</div>
+		<div class="flex">
+			{#if !!applicationKey.happUiUrl}
+				<a
+					href={applicationKey.happUiUrl}
+					class="mr-2 flex items-center justify-center text-sm text-secondary"
+					target="_blank"
+				>
+					Visit
+					<img src="/img/arrow-outward.svg" alt="Visit page" class="ml-2" />
+				</a>
+			{/if}
+			<button
+				class="rounded-md px-4 py-2 text-sm text-primary"
+				on:click={() => goto(`keys?happId=${applicationKey.happId}`)}
+			>
+				View Keys
+			</button>
+		</div>
+	</div>
+{/each}

holo-key-manager-extension/src/routes/list-of/keys/+page.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { GoBack } from '$components';
+	import { extractDetailsFromUrl } from '$helpers';
+	import { appQueries } from '$queries';
+
+	const { applicationKeysQueryFunction } = appQueries();
+
+	const applicationKeysQuery = applicationKeysQueryFunction($extractDetailsFromUrl.happId);
+</script>
+
+<GoBack extraClass="mt-8" />
+{#if $applicationKeysQuery.data && $applicationKeysQuery.data.length > 0}
+	{@const applicationKeyFirst = $applicationKeysQuery.data[0]}
+	<div class="mt-4 flex items-center justify-between">
+		<div class="flex items-center">
+			{#if !!applicationKeyFirst.happLogo}
+				<img src={applicationKeyFirst.happLogo} alt="hApp Logo" class="mr-2 h-10 w-10" />
+			{/if}
+			<h2 class="text-center text-xl font-semibold">{applicationKeyFirst.happName}</h2>
+		</div>
+		<div class="flex">
+			{#if !!applicationKeyFirst.happUiUrl}
+				<a
+					href={applicationKeyFirst.happUiUrl}
+					class="mr-2 flex items-center justify-center text-sm text-primary"
+					target="_blank"
+				>
+					Visit
+					<img src="/img/arrow-outward-primary.svg" alt="Visit page" class="ml-2" />
+				</a>
+			{/if}
+		</div>
+	</div>
+	<h2 class="border-b border-grey py-4 text-xl font-semibold">Keys</h2>
+	<table class="mt-4 w-full rounded-lg border">
+		{#each $applicationKeysQuery.data as applicationKey, index}
+			<tr class="w-full" class:bg-gray-100={index % 2 === 0}>
+				<td class="border-b px-4 py-2 last:border-b-0">{applicationKey.keyName}</td>
+				<td class="flex justify-end border-b px-4 py-2 last:border-b-0">
+					<button class="mr-2 rounded-md px-4 py-2 text-sm text-grey" disabled> Delete Key </button>
+					<button class="rounded-md px-4 py-2 text-sm text-grey" disabled> Change Key </button>
+				</td>
+			</tr>
+		{/each}
+	</table>
+{/if}