feat: update didroom-components (#63)

src/lib/components/tabs/IonTabs.svelte

@@ -1,61 +1,36 @@
-<script>
-  //Credits: https://github.com/Tommertom/ionic-svelte-tabs-howto
-	// @ts-nocheck
-	import { onMount } from 'svelte';
+<script lang="ts">
 	import { page, navigating } from '$app/stores';
-
-	import { goto } from '$app/navigation';
-
-	export let ionTabsDidChange = () => {};
-	export let ionTabsWillChange = () => {};
+	import { goto, r } from '$lib/i18n';
+	import { goto as svelteGoto } from '$app/navigation';
+	import type { TabProps } from '.';
 
 	/**
     An array of tab objects containing label, and tab properties.
-    @type {{label: string; tab: string;}[]}
+    @type {{label: string; tab: string;, hasAlert: boolean;}[]}
     */
-	export let tabs = [];
-
-	let ionTabBarElement;
-	let controller;
+	export let tabs: TabProps[] = [];
 
-	// we need relative path for the goto to function properly and to allow for relative tab definitions
 	const { pathname } = $page.url;
 	const pathSplit = pathname.split('/');
-	let currentTabName = pathSplit[pathSplit.length - 1]; // we don't want to use at(-1) because of old browsers
-	const relativePath = pathname.replace(currentTabName, '');
+	let currentTabName = pathSplit[pathSplit.length - 1];
 
-	// we need to capture the router changes - to support a-href navigation and other stuff
 	$: if ($navigating && $navigating.to) {
 		tabs.forEach(async (tab) => {
-			if ($navigating.to.url.pathname.includes(relativePath + tab.tab)) {
+			if ($navigating.to?.url.pathname.includes(tab.tab)) {
 				currentTabName = tab.tab;
-				await goto(relativePath + tab.tab);
-				controller.select(tab.tab);
+				await svelteGoto(r('/' + tab.tab));
 			}
 		});
 	}
 
-	onMount(async () => {
-		// reassignment needed after onMount
-		controller = ionTabBarElement;
-		controller.select(currentTabName);
-	});
-
-	const tabBarClick = async (selectedTab) => {
-		currentTabName = selectedTab;
-		await goto(relativePath + selectedTab);
-		controller.select(selectedTab);
+	const tabBarClick = async (selectedTab: string) => {
+		await goto('/' + selectedTab);
 	};
 </script>
 
-<ion-tabs
-	on:ionTabsDidChange={ionTabsDidChange}
-	on:ionTabsWillChange={ionTabsWillChange}
-	bind:this={ionTabBarElement}
->
+<ion-tabs>
 	<slot />
-
-	<ion-tab-bar slot="bottom" class="flex ion-padding py-0 justify-between">
+	<ion-tab-bar slot="bottom" class="ion-padding flex justify-between py-0">
 		{#each tabs as tab}
 			<d-tab-button
 				tab={tab.tab}
@@ -65,8 +40,9 @@
 				on:click={() => {
 					tabBarClick(tab.tab);
 				}}
-        aria-hidden
-        active={currentTabName === tab.tab}
+				aria-hidden
+				active={currentTabName === tab.tab}
+				hasAlert={tab.hasAlert}
 			>
 				{tab.label}
 			</d-tab-button>

src/lib/components/tabs/index.ts

@@ -1,5 +1,6 @@
 export const Tabs = {
 	home: 'home',
+	wallet: 'wallet',
 	activity: 'activity',
 	profile: 'profile'
 } as const;
@@ -8,13 +9,10 @@ export type Tab = (typeof Tabs)[keyof typeof Tabs];
 
 //
 
-export type IonTabProps = {
+export type TabProps = {
 	label: string;
 	tab: Tab;
+	hasAlert?: boolean;
 };
 
 //
-
-import TabPage from './TabPage.svelte';
-import IonTabs from './IonTabs.svelte';
-export { TabPage, IonTabs };

src/routes/+layout.svelte

@@ -30,11 +30,11 @@
 	/>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/@didroom/components@1.18/dist/didroom-components/didroom-components.esm.js"
+		src="https://cdn.jsdelivr.net/npm/@didroom/components@1.25/dist/didroom-components/didroom-components.esm.js"
 	></script>
 	<link
 		rel="stylesheet"
-		href="https://cdn.jsdelivr.net/npm/@didroom/components@1.18/dist/didroom-components/didroom-components.css"
+		href="https://cdn.jsdelivr.net/npm/@didroom/components@1.25/dist/didroom-components/didroom-components.css"
 	/>
 </svelte:head>
 

src/routes/[[lang]]/(protected)/(tabs)/+layout.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { type IonTabProps, Tabs, IonTabs } from '$lib/components/tabs';
+	import { type TabProps, Tabs } from '$lib/components/tabs';
+	import IonTabs from '$lib/components/tabs/IonTabs.svelte';
 
-	const tabs: IonTabProps[] = [
+
+	const tabs: TabProps[] = [
 		{ label: 'Home', tab: Tabs.home },
 		{ label: 'Activity', tab: Tabs.activity },
 		{ label: 'Profile', tab: Tabs.profile }

src/routes/[[lang]]/(protected)/(tabs)/activity/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { TabPage } from '$lib/components/tabs';
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
 	import EmptyState from '$lib/components/molecules/EmptyState.svelte';
@@ -9,7 +8,7 @@
 	const { verifiedSids } = data;
 </script>
 
-<TabPage tab="activity" title="Activity">
+<d-tab-page tab="activity" title="Activity">
 	<div class="flex flex-col items-center justify-center gap-2">
 		{#if verifiedSids && verifiedSids.length > 0}
 			{#each verifiedSids.reverse() as verifiedSid}
@@ -33,4 +32,4 @@
 			/>
 		{/if}
 	</div>
-</TabPage>
+</d-tab-page>

src/routes/[[lang]]/(protected)/(tabs)/home/+page.svelte

@@ -1,31 +1,28 @@
 <script lang="ts">
-	import { getVerificationFlows } from '$lib/slangroom/verificationFlows';
 	import { m, r } from '$lib/i18n';
-	import { TabPage } from '$lib/components/tabs';
 	import { filesUri } from '$lib/backendUri';
+
+	export let data;
+	const { verificationFlows } = data
 </script>
 
-<TabPage tab="home" title="HOME">
-	{#await getVerificationFlows()}
-		<ion-spinner />
-	{:then verificationFlows}
-		<d-heading size="s">
-			{m.Verify_credential()}
-		</d-heading>
-		<div class="flex flex-col gap-2">
-			{#each verificationFlows as vf}
-				<d-credential-service
-					href={r(`/${vf.id}/verify/`)}
-					name={vf.name}
-					logoSrc={filesUri(
-						vf.expand.organization.avatar,
-						vf.expand.organization.collectionName,
-						vf.expand.organization.id
-					)}
-					issuer={vf.expand.relying_party.name}
-				/>
-			{/each}
-		</div>
-	{/await}
+<d-tab-page tab="home" title="HOME">
+	<d-heading size="s">
+		{m.Verify_credential()}
+	</d-heading>
+	<div class="flex flex-col gap-2">
+		{#each verificationFlows as vf}
+			<d-credential-service
+				href={r(`/${vf.id}/verify/`)}
+				name={vf.name}
+				logoSrc={filesUri(
+					vf.expand.organization.avatar,
+					vf.expand.organization.collectionName,
+					vf.expand.organization.id
+				)}
+				issuer={vf.expand.relying_party.name}
+			/>
+		{/each}
+	</div>
 	<br />
-</TabPage>
+</d-tab-page>

src/routes/[[lang]]/(protected)/(tabs)/home/+page.ts

@@ -3,6 +3,7 @@ import { r, type Locale } from '$lib/i18n';
 import { redirect } from '@sveltejs/kit';
 import { getLanguagePreference} from '$lib/preferences/lang';
 import { availableLanguageTags } from '$paraglide/runtime';
+import { getVerificationFlows } from '$lib/slangroom/verificationFlows.js';
 
 const getLang = async () => {
 	const lang = await getLanguagePreference();
@@ -15,4 +16,7 @@ export const load = async ({url}) => {
 	if (url.toString().split('/')[3] !== lang) {
 		redirect(301, r('/home', lang));
 	}
+	const verificationFlows = await getVerificationFlows()
+	return { verificationFlows}
+
 };

src/routes/[[lang]]/(protected)/(tabs)/profile/+page.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-	// import { m } from '$lib/i18n';
 	import { authFilesUri, filesUri } from '$lib/backendUri.js';
 	import AppDetails from '$lib/components/AppDetails.svelte';
-	import { TabPage } from '$lib/components/tabs/index.js';
 
 	export let data;
 
 	const { orgs, user } = data;
 </script>
 
-<TabPage tab="profile" title="Profile">
+<d-tab-page tab="profile" title="Profile">
 	<div class="flex flex-col items-center gap-2 pt-8 text-center">
 		<d-avatar src={authFilesUri(user?.avatar, user?.id)} size="xl"></d-avatar>
 		<d-heading size="s" class="w-full">{user?.name || user?.email}</d-heading>
@@ -24,4 +22,4 @@
 		<d-button href="/logout" class="mt-20 w-full" color="outline" expand>Logout</d-button>
 		<AppDetails />
 	</div>
-</TabPage>
+</d-tab-page>