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

This commit is contained in:
Nahiyan Khan
2025-02-27 04:55:41 -05:00
committed by GitHub
parent 0602b35ddc
commit 36a90077f2
3 changed files with 31 additions and 30 deletions

View File

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

View File

@@ -12,7 +12,7 @@ export const ExtensionItem: React.FC<ExtensionItemProps> = (props) => {
const { id, name, description, enabled, onToggle, onConfigure, canConfigure } = props; const { id, name, description, enabled, onToggle, onConfigure, canConfigure } = props;
return ( 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="flex justify-between items-center">
<div className=""> <div className="">
<div className="flex items-center"> <div className="flex items-center">

View File

@@ -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"> <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="px-4 pb-0 space-y-8">
<div className="flex"> <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> </div>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
@@ -275,7 +275,7 @@ export function ManualExtensionModal({ isOpen, onClose, onSubmit }: ManualExtens
variant="ghost" variant="ghost"
className="w-full h-[60px] rounded-none border-t border-borderSubtle text-md hover:bg-bgSubtle text-textProminent font-regular" 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>
<Button <Button
type="button" type="button"