Open URLs in the device browser

apps/desktop/src/main/commands/index.ts

@@ -2,6 +2,7 @@ import { CommandMap } from '@/shared/commands';
 import { CommandHandler } from '@/main/types';
 import { FileDialogOpenCommandHandler } from '@/main/commands/file-dialog-open';
 import { FileOpenCommandHandler } from '@/main/commands/file-open';
+import { UrlOpenCommandHandler } from '@/main/commands/url-open';
 
 type CommandHandlerMap = {
   [K in keyof CommandMap]: CommandHandler<CommandMap[K]['input']>;
@@ -10,4 +11,5 @@ type CommandHandlerMap = {
 export const commandHandlerMap: CommandHandlerMap = {
   file_dialog_open: new FileDialogOpenCommandHandler(),
   file_open: new FileOpenCommandHandler(),
+  url_open: new UrlOpenCommandHandler(),
 };

apps/desktop/src/main/commands/url-open.ts

@@ -0,0 +1,11 @@
+import { CommandHandler } from '@/main/types';
+import { UrlOpenCommandInput } from '@/shared/commands/url-open';
+import { shell } from 'electron';
+
+export class UrlOpenCommandHandler
+  implements CommandHandler<UrlOpenCommandInput>
+{
+  public async handleCommand(input: UrlOpenCommandInput): Promise<void> {
+    shell.openExternal(input.url);
+  }
+}

apps/desktop/src/renderer/components/records/values/record-url-value.tsx

@@ -17,19 +17,19 @@ interface RecordUrlValueProps {
 export const RecordUrlValue = ({ field, readOnly }: RecordUrlValueProps) => {
   const record = useRecord();
 
-  const text = record.getUrlValue(field);
-  const isUrl = text && isValidUrl(text);
+  const url = record.getUrlValue(field);
+  const canOpen = url && isValidUrl(url);
 
   return (
     <HoverCard openDelay={300}>
       <HoverCardTrigger>
         <SmartTextInput
-          value={text}
+          value={url}
           readOnly={!record.canEdit || readOnly}
           onChange={(newValue) => {
             if (!record.canEdit || readOnly) return;
 
-            if (newValue === text) {
+            if (newValue === url) {
               return;
             }
 
@@ -48,17 +48,22 @@ export const RecordUrlValue = ({ field, readOnly }: RecordUrlValueProps) => {
       <HoverCardContent
         className={cn(
           'flex w-full min-w-80 max-w-128 flex-row items-center justify-between gap-2 text-ellipsis',
-          !isUrl && 'hidden'
+          !canOpen && 'hidden'
         )}
       >
-        <a
+        <span
           className="text-blue-500 underline hover:cursor-pointer hover:text-blue-600"
-          href={text ?? ''}
-          target="_blank"
-          rel="noreferrer"
+          onClick={() => {
+            if (!canOpen) return;
+
+            window.colanode.executeCommand({
+              type: 'url_open',
+              url,
+            });
+          }}
         >
-          {text}
-        </a>
+          {url}
+        </span>
         <ExternalLink className="size-4 min-h-4 min-w-4 text-muted-foreground" />
       </HoverCardContent>
     </HoverCard>

apps/desktop/src/shared/commands/url-open.ts

@@ -0,0 +1,13 @@
+export type UrlOpenCommandInput = {
+  type: 'url_open';
+  url: string;
+};
+
+declare module '@/shared/commands' {
+  interface CommandMap {
+    url_open: {
+      input: UrlOpenCommandInput;
+      output: void;
+    };
+  }
+}