feat: moved extension add button and updated label (#1408)

ui/desktop/src/components/settings/SettingsView.tsx

@@ -216,24 +216,14 @@ export default function SettingsView({
               <section id="extensions">
                 <div className="flex justify-between items-center mb-6 border-b border-borderSubtle px-8">
                   <h2 className="text-xl font-semibold text-textStandard">Extensions</h2>
-                  <div className="flex gap-4">
-                    <button
-                      onClick={() => setIsManualModalOpen(true)}
-                      className="text-indigo-500 hover:text-indigo-600 text-sm"
-                      title="Add Manually"
-                    >
-                      Add
-                    </button>
-
-                    <a
-                      href={EXTENSIONS_SITE_LINK}
-                      target="_blank"
-                      className="text-indigo-500 hover:text-indigo-600 text-sm"
-                      rel="noreferrer"
-                    >
-                      Browse
-                    </a>
-                  </div>
+                  <a
+                    href={EXTENSIONS_SITE_LINK}
+                    target="_blank"
+                    className="text-indigo-500 hover:text-indigo-600 text-sm"
+                    rel="noreferrer"
+                  >
+                    Browse
+                  </a>
                 </div>
 
                 <div className="px-8">
@@ -242,15 +232,26 @@ export default function SettingsView({
                   {settings.extensions.length === 0 ? (
                     <p className="text-textSubtle text-center py-4">No Extensions Added</p>
                   ) : (
-                    settings.extensions.map((ext) => (
-                      <ExtensionItem
-                        key={ext.id}
-                        {...ext}
-                        canConfigure={true}
-                        onToggle={handleExtensionToggle}
-                        onConfigure={(extension) => setExtensionBeingConfigured(extension)}
-                      />
-                    ))
+                    <div className="grid grid-cols-2 gap-2">
+                      {settings.extensions.map((ext) => (
+                        <ExtensionItem
+                          key={ext.id}
+                          {...ext}
+                          canConfigure={true}
+                          onToggle={handleExtensionToggle}
+                          onConfigure={(extension) => setExtensionBeingConfigured(extension)}
+                        />
+                      ))}
+                      <button
+                        onClick={() => setIsManualModalOpen(true)}
+                        className="text-indigo-500 hover:text-indigo-600 text-sm"
+                        title="Add Manually"
+                      >
+                        <div className="rounded-lg border border-dashed border-borderSubtle hover:border-borderStandard p-4 transition-colors">
+                          Add custom extension
+                        </div>
+                      </button>
+                    </div>
                   )}
                 </div>
               </section>

ui/desktop/src/components/settings/extensions/ExtensionItem.tsx

@@ -12,7 +12,7 @@ export const ExtensionItem: React.FC<ExtensionItemProps> = (props) => {
   const { id, name, description, enabled, onToggle, onConfigure, canConfigure } = props;
 
   return (
-    <div className="rounded-lg py-2 mb-2">
+    <div className="rounded-lg border border-borderSubtle p-4">
       <div className="flex justify-between items-center">
         <div className="">
           <div className="flex items-center">

ui/desktop/src/components/settings/extensions/ManualExtensionModal.tsx

@@ -132,7 +132,7 @@ export function ManualExtensionModal({ isOpen, onClose, onSubmit }: ManualExtens
       <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] bg-bgApp rounded-xl overflow-hidden shadow-none p-[16px] pt-[24px] pb-0">
         <div className="px-4 pb-0 space-y-8">
           <div className="flex">
-            <h2 className="text-2xl font-regular text-textStandard">Add Extension Manually</h2>
+            <h2 className="text-2xl font-regular text-textStandard">Add custom extension</h2>
           </div>
 
           <form onSubmit={handleSubmit}>
@@ -275,7 +275,7 @@ export function ManualExtensionModal({ isOpen, onClose, onSubmit }: ManualExtens
                 variant="ghost"
                 className="w-full h-[60px] rounded-none border-t border-borderSubtle text-md hover:bg-bgSubtle text-textProminent font-regular"
               >
-                Add Extension
+                Add
               </Button>
               <Button
                 type="button"