feat: hide apps without launch url on My Apps page

frontend/src/lib/components/ui/empty/empty-content.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-content"
+	class={cn(
+		'gap-4 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/empty/empty-description.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-description"
+	class={cn(
+		'text-sm/relaxed text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/empty/empty-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-header"
+	class={cn('gap-2 flex max-w-sm flex-col items-center', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/empty/empty-media.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	export const emptyMediaVariants = tv({
+		base: 'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				icon: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted text-foreground [&_svg:not([class*='size-'])]:size-5"
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = 'default',
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-icon"
+	data-variant={variant}
+	class={cn(emptyMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/empty/empty-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-title"
+	class={cn('text-lg font-medium tracking-tight', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/empty/empty.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty"
+	class={cn(
+		'gap-4 rounded-2xl border-dashed p-12 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/empty/index.ts

@@ -0,0 +1,22 @@
+import Content from './empty-content.svelte';
+import Description from './empty-description.svelte';
+import Header from './empty-header.svelte';
+import Media from './empty-media.svelte';
+import Title from './empty-title.svelte';
+import Root from './empty.svelte';
+
+export {
+	Root,
+	Header,
+	Media,
+	Title,
+	Description,
+	Content,
+	//
+	Root as Empty,
+	Header as EmptyHeader,
+	Media as EmptyMedia,
+	Title as EmptyTitle,
+	Description as EmptyDescription,
+	Content as EmptyContent
+};

frontend/src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -27,17 +27,21 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-lg bg-foreground text-background z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)',
+			'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 text-popover-foreground relative isolate inline-flex w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin) items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs shadow-lg ring-1 has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-lg z-50',
 			className
 		)}
 		{...restProps}
 	>
+		<span
+			aria-hidden="true"
+			class="tooltip-surface pointer-events-none absolute inset-0 -z-1 rounded-[inherit]"
+		></span>
 		{@render children?.()}
 		<TooltipPrimitive.Arrow>
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						'size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px] bg-foreground fill-foreground z-50',
+						'tooltip-surface size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px] z-50',
 						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]',
 						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]',
 						'data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2',
@@ -50,3 +54,12 @@
 		</TooltipPrimitive.Arrow>
 	</TooltipPrimitive.Content>
 </TooltipPortal>
+
+<style>
+	.tooltip-surface {
+		background-color: color-mix(in oklab, var(--popover) 70%, transparent);
+		background-image: linear-gradient(color-mix(in oklab, var(--foreground) 16%, transparent) 0 0);
+		backdrop-filter: blur(40px) saturate(1.5);
+		-webkit-backdrop-filter: blur(40px) saturate(1.5);
+	}
+</style>

frontend/src/lib/services/oidc-service.ts

@@ -1,6 +1,7 @@
 import type { ListRequestOptions, Paginated } from '$lib/types/list-request.type';
 import type {
 	AccessibleOidcClient,
+	AuthorizedOidcClient,
 	CompleteInteractionResponse,
 	InteractionSession,
 	InteractionStep,
@@ -121,6 +122,11 @@ class OidcService extends APIService {
 		return res.data as Paginated<AccessibleOidcClient>;
 	};
 
+	listOwnAuthorizedClients = async (options?: ListRequestOptions) => {
+		const res = await this.api.get('/oidc/users/me/authorized-clients', { params: options });
+		return res.data as Paginated<AuthorizedOidcClient>;
+	};
+
 	revokeOwnAuthorizedClient = async (clientId: string) => {
 		await this.api.delete(`/oidc/users/me/authorized-clients/${encodeClientIdParam(clientId)}`);
 	};

frontend/src/lib/types/oidc.type.ts

@@ -94,6 +94,12 @@ export type AccessibleOidcClient = OidcClientMetaData & {
 	lastUsedAt: Date | null;
 };
 
+export type AuthorizedOidcClient = {
+	scope: string;
+	client: OidcClientMetaData;
+	lastUsedAt: Date;
+};
+
 export type InteractionStep = 'authenticate' | 'select_account' | 'reauthenticate' | 'consent';
 
 export type InteractionScopeInfo = {

frontend/src/routes/settings/apps/+page.svelte

@@ -1,28 +1,65 @@
 <script lang="ts">
 	import { openConfirmDialog } from '$lib/components/confirm-dialog';
+	import { Button } from '$lib/components/ui/button';
+	import * as Empty from '$lib/components/ui/empty';
 	import * as Pagination from '$lib/components/ui/pagination';
+	import { Separator } from '$lib/components/ui/separator';
 	import { m } from '$lib/paraglide/messages';
 	import OIDCService from '$lib/services/oidc-service';
 	import type { ListRequestOptions, Paginated } from '$lib/types/list-request.type';
-	import type { AccessibleOidcClient, OidcClientMetaData } from '$lib/types/oidc.type';
+	import type {
+		AccessibleOidcClient,
+		AuthorizedOidcClient,
+		OidcClientMetaData
+	} from '$lib/types/oidc.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LayoutDashboard } from '@lucide/svelte';
+	import { cn } from '$lib/utils/style';
+	import { ChevronDown, LayoutDashboard } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
+	import { slide } from 'svelte/transition';
 	import AuthorizedOidcClientCard from './authorized-oidc-client-card.svelte';
 
 	let { data } = $props();
 	let clients: Paginated<AccessibleOidcClient> = $state(data.clients);
 	let requestOptions: ListRequestOptions = $state(data.appRequestOptions);
-
+	let authorizedClientsWithoutLaunchURL: Paginated<AuthorizedOidcClient> = $state(
+		data.authorizedClientsWithoutLaunchURL
+	);
+	let authorizedClientRequestOptions: ListRequestOptions = $state(
+		data.authorizedClientRequestOptions
+	);
+	let showAllApps = $state(false);
+	const hiddenAuthorizedClients = $derived(
+		authorizedClientsWithoutLaunchURL.data.map(({ client, lastUsedAt }) => ({
+			...client,
+			lastUsedAt
+		}))
+	);
 	const oidcService = new OIDCService();
 
-	async function onRefresh(options: ListRequestOptions) {
-		clients = await oidcService.listOwnAccessibleClients(options);
+	async function refreshClients() {
+		[clients, authorizedClientsWithoutLaunchURL] = await Promise.all([
+			oidcService.listOwnAccessibleClients(requestOptions),
+			oidcService.listOwnAuthorizedClients(authorizedClientRequestOptions)
+		]);
+		if (authorizedClientsWithoutLaunchURL.pagination.totalItems === 0) {
+			showAllApps = false;
+		}
 	}
 
 	async function onPageChange(page: number) {
 		requestOptions.pagination = { limit: clients.pagination.itemsPerPage, page };
-		onRefresh(requestOptions);
+		clients = await oidcService.listOwnAccessibleClients(requestOptions);
+	}
+
+	async function onAuthorizedClientPageChange(page: number) {
+		authorizedClientRequestOptions.pagination = {
+			limit: authorizedClientsWithoutLaunchURL.pagination.itemsPerPage,
+			page
+		};
+		authorizedClientsWithoutLaunchURL = await oidcService.listOwnAuthorizedClients(
+			authorizedClientRequestOptions
+		);
 	}
 
 	async function revokeAuthorizedClient(client: OidcClientMetaData) {
@@ -38,7 +75,7 @@
 				action: async () => {
 					try {
 						await oidcService.revokeOwnAuthorizedClient(client.id);
-						onRefresh(requestOptions);
+						await refreshClients();
 						toast.success(
 							m.revoke_access_successful({
 								clientName: client.name
@@ -56,74 +93,153 @@
 <svelte:head>
 	<title>{m.my_apps()}</title>
 </svelte:head>
-
-<div class="space-y-6">
+<div>
 	<div>
-		<h1 class="flex items-center gap-2 text-2xl font-bold">
+		<h1 class="flex items-center gap-2 text-2xl font-bold mb-5">
 			<LayoutDashboard class="text-primary/80 size-6" />
 			{m.my_apps()}
 		</h1>
 	</div>
 
-	{#if clients.data.length === 0}
-		<div class="py-16 text-center">
-			<LayoutDashboard class="text-muted-foreground mx-auto mb-4 size-16" />
-			<h3 class="text-muted-foreground mb-2 text-lg font-medium">
-				{m.no_apps_available()}
-			</h3>
-			<p class="text-muted-foreground mx-auto max-w-md text-sm">
-				{m.contact_your_administrator_for_app_access()}
-			</p>
-		</div>
+	{#if clients.data.length === 0 && !showAllApps}
+		<Empty.Root>
+			<Empty.Header>
+				<Empty.Media variant="icon">
+					<LayoutDashboard />
+				</Empty.Media>
+				<Empty.Title>{m.no_apps_available()}</Empty.Title>
+				<Empty.Description>
+					{m.contact_your_administrator_for_app_access()}
+				</Empty.Description>
+			</Empty.Header>
+			<Empty.Content>
+				<Button variant="outline" size="sm" onclick={() => (showAllApps = !showAllApps)}
+					>{m.show_hidden_apps()}</Button
+				>
+			</Empty.Content>
+		</Empty.Root>
 	{:else}
-		<div class="space-y-8">
+		{#if clients.data.length > 0}
 			<div
 				class="grid gap-3"
-				style="grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));"
+				style="grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));"
 			>
 				{#each clients.data as client (client.id)}
 					<AuthorizedOidcClientCard {client} onRevoke={revokeAuthorizedClient} />
 				{/each}
 				<!-- Gap fix if two elements are present-->
-				{#if clients.data.length == 2}
+				{#if clients.data.length === 2}
 					<div></div>
 				{/if}
 			</div>
+		{/if}
 
-			{#if clients.pagination.totalPages > 1}
-				<div class="border-border flex items-center justify-center border-t pt-3">
-					<Pagination.Root
-						class="mx-0 w-auto"
-						count={clients.pagination.totalItems}
-						perPage={clients.pagination.itemsPerPage}
-						{onPageChange}
-						page={clients.pagination.currentPage}
-					>
-						{#snippet children({ pages })}
-							<Pagination.Content class="flex justify-center">
-								<Pagination.Item>
-									<Pagination.PrevButton />
-								</Pagination.Item>
-								{#each pages as page (page.key)}
-									{#if page.type !== 'ellipsis' && page.value != 0}
-										<Pagination.Item>
-											<Pagination.Link
-												{page}
-												isActive={clients.pagination.currentPage === page.value}
-											>
-												{page.value}
-											</Pagination.Link>
-										</Pagination.Item>
-									{/if}
-								{/each}
-								<Pagination.Item>
-									<Pagination.NextButton />
-								</Pagination.Item>
-							</Pagination.Content>
-						{/snippet}
-					</Pagination.Root>
+		{#if clients.pagination.totalPages > 1}
+			<div class="flex items-center justify-center mt-5">
+				<Pagination.Root
+					class="mx-0 w-auto"
+					count={clients.pagination.totalItems}
+					perPage={clients.pagination.itemsPerPage}
+					{onPageChange}
+					page={clients.pagination.currentPage}
+				>
+					{#snippet children({ pages })}
+						<Pagination.Content class="flex justify-center">
+							<Pagination.Item>
+								<Pagination.PrevButton />
+							</Pagination.Item>
+							{#each pages as page (page.key)}
+								{#if page.type !== 'ellipsis' && page.value != 0}
+									<Pagination.Item>
+										<Pagination.Link
+											{page}
+											isActive={clients.pagination.currentPage === page.value}
+										>
+											{page.value}
+										</Pagination.Link>
+									</Pagination.Item>
+								{/if}
+							{/each}
+							<Pagination.Item>
+								<Pagination.NextButton />
+							</Pagination.Item>
+						</Pagination.Content>
+					{/snippet}
+				</Pagination.Root>
+			</div>
+		{/if}
+
+		{#if showAllApps}
+			<div transition:slide={{ duration: 200 }}>
+				{#if clients.data.length > 0}
+					<Separator class="my-8" />
+				{/if}
+				<div
+					class="grid gap-3"
+					style="grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));"
+				>
+					{#each hiddenAuthorizedClients as client (client.id)}
+						<AuthorizedOidcClientCard {client} onRevoke={revokeAuthorizedClient} />
+					{/each}
+					<!-- Gap fix if two elements are present-->
+					{#if hiddenAuthorizedClients.length === 2}
+						<div></div>
+					{/if}
 				</div>
-			{/if}
+
+				{#if authorizedClientsWithoutLaunchURL.pagination.totalPages > 1}
+					<div class="flex items-center justify-center mt-5">
+						<Pagination.Root
+							class="mx-0 w-auto"
+							count={authorizedClientsWithoutLaunchURL.pagination.totalItems}
+							perPage={authorizedClientsWithoutLaunchURL.pagination.itemsPerPage}
+							onPageChange={onAuthorizedClientPageChange}
+							page={authorizedClientsWithoutLaunchURL.pagination.currentPage}
+						>
+							{#snippet children({ pages })}
+								<Pagination.Content class="flex justify-center">
+									<Pagination.Item>
+										<Pagination.PrevButton />
+									</Pagination.Item>
+									{#each pages as page (page.key)}
+										{#if page.type !== 'ellipsis' && page.value != 0}
+											<Pagination.Item>
+												<Pagination.Link
+													{page}
+													isActive={authorizedClientsWithoutLaunchURL.pagination.currentPage ===
+														page.value}
+												>
+													{page.value}
+												</Pagination.Link>
+											</Pagination.Item>
+										{/if}
+									{/each}
+									<Pagination.Item>
+										<Pagination.NextButton />
+									</Pagination.Item>
+								</Pagination.Content>
+							{/snippet}
+						</Pagination.Root>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	{/if}
+
+	{#if authorizedClientsWithoutLaunchURL.pagination.totalItems > 0 && clients.data.length !== 0}
+		<div class="flex justify-center mt-10">
+			<Button
+				variant="ghost"
+				class="text-muted-foreground"
+				onclick={() => (showAllApps = !showAllApps)}
+			>
+				{showAllApps ? m.hide_all_apps() : m.show_all_apps()}
+				({authorizedClientsWithoutLaunchURL.pagination.totalItems})
+				<ChevronDown
+					data-icon="inline-end"
+					class={cn('transition-transform duration-200', showAllApps && 'rotate-180 transform')}
+				/>
+			</Button>
 		</div>
 	{/if}
 </div>

frontend/src/routes/settings/apps/+page.ts

@@ -13,10 +13,35 @@ export const load: PageLoad = async () => {
 		sort: {
 			column: 'lastUsedAt',
 			direction: 'desc'
+		},
+		filters: {
+			hasLaunchURL: [true]
 		}
 	};
 
-	const clients = await oidcService.listOwnAccessibleClients(appRequestOptions);
+	const authorizedClientRequestOptions: ListRequestOptions = {
+		pagination: {
+			page: 1,
+			limit: 20
+		},
+		sort: {
+			column: 'lastUsedAt',
+			direction: 'desc'
+		},
+		filters: {
+			hasLaunchURL: [false]
+		}
+	};
 
-	return { clients, appRequestOptions };
+	const [clients, authorizedClientsWithoutLaunchURL] = await Promise.all([
+		oidcService.listOwnAccessibleClients(appRequestOptions),
+		oidcService.listOwnAuthorizedClients(authorizedClientRequestOptions)
+	]);
+
+	return {
+		clients,
+		appRequestOptions,
+		authorizedClientsWithoutLaunchURL,
+		authorizedClientRequestOptions
+	};
 };

frontend/src/routes/settings/apps/authorized-oidc-client-card.svelte

@@ -33,10 +33,11 @@
 </script>
 
 <Card.Root
-	class="border-muted group relative h-[160px] p-5 transition-all duration-200 hover:shadow-md sm:max-w-[50vw] md:max-w-[430px]"
-	data-testid="authorized-oidc-client-card"
+	class="border-muted group relative h-[160px] p-5 hover:shadow-md sm:max-w-[50vw] md:max-w-[450px]"
+	role="article"
+	aria-label={client.name}
 >
-	<Card.Content class=" p-0">
+	<Card.Content class="p-0">
 		<div class="flex gap-3">
 			<div class="aspect-square h-[56px]">
 				{#if client.hasLogo}
@@ -124,17 +125,18 @@
 			{:else}
 				<div></div>
 			{/if}
-			<Button
-				href={client.launchURL}
-				target="_blank"
-				size="sm"
-				class="h-8 text-xs"
-				rel="noopener noreferrer"
-				disabled={!client.launchURL}
-			>
-				{m.launch()}
-				<LucideExternalLink class="ml-1 size-3" />
-			</Button>
+			{#if client.launchURL}
+				<Button
+					href={client.launchURL}
+					target="_blank"
+					size="sm"
+					class="h-8 text-xs"
+					rel="noopener noreferrer"
+				>
+					{m.launch()}
+					<LucideExternalLink data-icon="inline-end" />
+				</Button>
+			{/if}
 		</div>
 	</Card.Content>
 </Card.Root>