Add links to plugins

src-web/components/Settings/SettingsPlugins.tsx

@@ -18,6 +18,7 @@ import { useUninstallPlugin } from '../../hooks/useUninstallPlugin';
 import { Button } from '../core/Button';
 import { IconButton } from '../core/IconButton';
 import { InlineCode } from '../core/InlineCode';
+import { Link } from '../core/Link';
 import { LoadingIcon } from '../core/LoadingIcon';
 import { PlainInput } from '../core/PlainInput';
 import { HStack } from '../core/Stacks';
@@ -115,7 +116,15 @@ function PluginTableRow({
 
   return (
     <TableRow>
-      <TableCell className="font-semibold">{pluginInfo.data.displayName}</TableCell>
+      <TableCell className="font-semibold">
+        {plugin.url ? (
+          <Link noUnderline href={plugin.url}>
+            {pluginInfo.data.displayName}
+          </Link>
+        ) : (
+          pluginInfo.data.displayName
+        )}
+      </TableCell>
       <TableCell>
         <InlineCode>{pluginInfo.data?.version}</InlineCode>
       </TableCell>
@@ -187,7 +196,11 @@ function PluginSearch() {
             <TableBody>
               {results.data.plugins.map((plugin) => (
                 <TableRow key={plugin.id}>
-                  <TableCell className="font-semibold">{plugin.displayName}</TableCell>
+                  <TableCell className="font-semibold">
+                    <Link noUnderline href={plugin.url}>
+                      {plugin.displayName}
+                    </Link>
+                  </TableCell>
                   <TableCell>
                     <InlineCode>{plugin.version}</InlineCode>
                   </TableCell>

src-web/components/core/Link.tsx

@@ -6,12 +6,13 @@ import { Icon } from './Icon';
 
 interface Props extends HTMLAttributes<HTMLAnchorElement> {
   href: string;
+  noUnderline?: boolean;
 }
 
-export function Link({ href, children, className, ...other }: Props) {
+export function Link({ href, children, noUnderline, className, ...other }: Props) {
   const isExternal = href.match(/^https?:\/\//);
 
-  className = classNames(className, 'relative underline hover:text-violet-600');
+  className = classNames(className, 'relative');
 
   if (isExternal) {
     let finalHref = href;
@@ -25,13 +26,17 @@ export function Link({ href, children, className, ...other }: Props) {
         href={finalHref}
         target="_blank"
         rel="noopener noreferrer"
-        className={classNames(className, 'pr-4 inline-flex items-center')}
+        className={classNames(
+          className,
+          'pr-4 inline-flex items-center hover:underline',
+          !noUnderline && 'underline',
+        )}
         onClick={(e) => {
           e.preventDefault();
         }}
         {...other}
       >
-        <span className="underline">{children}</span>
+        <span>{children}</span>
         <Icon className="inline absolute right-0.5 top-[0.3em]" size="xs" icon="external_link" />
       </a>
     );