feat: open url in the system browser instead of launcher window

apps/onelauncher/desktop/capabilities/default.json

@@ -42,6 +42,8 @@
 					"path": "$DATA/OneLauncher"
 				}
 			]
-		}
+		},
+		"opener:allow-open-url",
+		"opener:default"
 	]
 }

apps/onelauncher/frontend/src/routes/app/browser/package.$provider.$slug.tsx

@@ -1,4 +1,5 @@
 import type { ClusterModel, ManagedPackage, ManagedUser, ManagedVersion, Paginated, Provider } from '@/bindings.gen';
+import type { JSX } from 'react';
 import Modal from '@/components/overlay/Modal';
 import { useBrowserContext, usePackageData, usePackageVersions } from '@/hooks/useBrowser';
 import { useClusters } from '@/hooks/useCluster';
@@ -22,6 +23,21 @@ function includes<T, TArray extends T>(list: { includes: (arg0: TArray) => boole
 	return list.includes(element as unknown as TArray);
 }
 
+function CustomA({ href, children }: { href: string; children: any }) {
+	return (
+		<a
+			className="text-fg-primary underline"
+			href={href}
+			onClick={(e) => {
+				e.preventDefault();
+				openUrl(href);
+			}}
+		>
+			{children}
+		</a>
+	);
+}
+
 interface PackageContextType {
 	pkg: ManagedPackage | undefined;
 	versions: Paginated<ManagedVersion> | undefined;
@@ -58,23 +74,29 @@ function RouteComponent() {
 						</TabList>
 						<div className="h-full min-h-full flex-1 w-full rounded-lg bg-component-bg p-3">
 							<TabPanel className="prose prose-invert prose-sm max-w-none" id="about">
-								<Markdown rehypePlugins={[rehypeRaw]}>{packageData.data?.body}</Markdown>
+								<Markdown
+									components={{
+										a: ({ node, children, ...props }) => <CustomA children={children} href={props.href as string} />,
+									}} rehypePlugins={[rehypeRaw]}
+								>
+									{packageData.data?.body}
+								</Markdown>
 							</TabPanel>
 							<TabPanel id="versions">
 								versions
 							</TabPanel>
-							<TabPanel id="gallery" className="flex flex-wrap gap-2 justify-center">
+							<TabPanel className="flex flex-wrap gap-2 justify-center" id="gallery">
 
 								{packageData.data?.gallery.map(item => (
 									<Modal.Trigger key={item.url}>
 										<Pressable>
-											<div className='rounded-md overflow-hidden bg-component-bg-pressed outline-0 h-64 flex flex-col relative'>
-												<img className='h-full' src={item.thumbnail_url} />
-												{item.title && <div className='absolute w-full bottom-0 bg-component-bg-disabled/80 p-2'>{item.title}</div>}
+											<div className="rounded-md overflow-hidden bg-component-bg-pressed outline-0 h-64 flex flex-col relative">
+												<img className="h-full" src={item.thumbnail_url} />
+												{item.title && <div className="absolute w-full bottom-0 bg-component-bg-disabled/80 p-2">{item.title}</div>}
 											</div>
 										</Pressable>
-										<Modal className='w-full' >
-											<img className='rounded-xl' src={item.url} />
+										<Modal className="w-full">
+											<img className="rounded-xl" src={item.url} />
 										</Modal>
 									</Modal.Trigger>
 								))}

packages/web_common/src/components/Tooltip.tsx

@@ -11,8 +11,8 @@ import { tv } from 'tailwind-variants';
 
 export const tooltipVariants = tv({
 	base: [
-		'px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-lg',
-		'border border-gray-700 max-w-xs z-50',
+		'px-3 py-2 text-sm font-medium text-white bg-component-bg rounded-lg shadow-lg',
+		'border border-component-border max-w-xs z-50',
 		'data-[entering]:animate-in data-[entering]:fade-in data-[entering]:zoom-in-95',
 		'data-[exiting]:animate-out data-[exiting]:fade-out data-[exiting]:zoom-out-95',
 	],