match icons for S3 providers

Signed-off-by: FTCHD <144691102+FTCHD@users.noreply.github.com>

lib/rclone/api.ts

@@ -100,7 +100,10 @@ export async function getRemote(remote: string) {
         method: 'POST',
         headers: getAuthHeader(),
     }).then(
-        (res) => res.json() as Promise<{ type: string } & Record<string, string | number | boolean>>
+        (res) =>
+            res.json() as Promise<
+                { type: string; provider?: string } & Record<string, string | number | boolean>
+            >
     )
 
     // console.log(JSON.stringify(r, null, 2))
@@ -138,6 +141,8 @@ export async function createRemote(
     options.set('type', type)
     options.set('parameters', JSON.stringify(parameters))
 
+    console.log('[createRemote] params', options.toString())
+
     await fetch(`http://localhost:5572/config/create?${options.toString()}`, {
         method: 'POST',
         headers: getAuthHeader(),

src/components/RemoteCreateDrawer.tsx

@@ -98,7 +98,19 @@ export default function RemoteCreateDrawer({
                             }}
                         >
                             {(item) => (
-                                <AutocompleteItem key={item.Value} textValue={item.Value}>
+                                <AutocompleteItem
+                                    key={item.Value}
+                                    textValue={item.Value}
+                                    startContent={
+                                        option.Name === 'provider' && (
+                                            <img
+                                                src={`/icons/providers/${item.Value}.png`}
+                                                className="object-contain w-4 h-4"
+                                                alt={item.Value}
+                                            />
+                                        )
+                                    }
+                                >
                                     {item.Help || item.Value}
                                 </AutocompleteItem>
                             )}
@@ -183,6 +195,8 @@ export default function RemoteCreateDrawer({
             await createRemote(name, type, parameters)
             addRemote(name)
             onClose()
+            setConfig({})
+            setShowMoreOptions(false)
             await triggerTrayRebuild()
         } catch (error) {
             console.error('Failed to create remote:', error)
@@ -263,7 +277,7 @@ export default function RemoteCreateDrawer({
                                             key={backend.Name}
                                             startContent={
                                                 <img
-                                                    src={`/icons/${backend.Prefix}.png`}
+                                                    src={`/icons/backends/${backend.Prefix}.png`}
                                                     className="object-contain w-8 h-8"
                                                     alt={backend.Name}
                                                 />
@@ -271,7 +285,10 @@ export default function RemoteCreateDrawer({
                                         >
                                             {backend.Description.includes('Compliant')
                                                 ? `${backend.Description.split('Compliant')[0]} Compliant`
-                                                : backend.Description || backend.Name}
+                                                : backend.Description?.replace(
+                                                      ' (this is not Google Drive)',
+                                                      ''
+                                                  ) || backend.Name}
                                         </SelectItem>
                                     ))}
                                 </Select>

src/components/RemoteEditDrawer.tsx

@@ -92,7 +92,19 @@ export default function RemoteEditDrawer({
                             description={option.Help.split('\n').slice(1).join('\n')}
                         >
                             {(item) => (
-                                <AutocompleteItem key={item.Value} textValue={item.Value}>
+                                <AutocompleteItem
+                                    key={item.Value}
+                                    textValue={item.Value}
+                                    startContent={
+                                        option.Name === 'provider' && (
+                                            <img
+                                                src={`/icons/providers/${item.Value}.png`}
+                                                className="object-contain w-4 h-4"
+                                                alt={item.Value}
+                                            />
+                                        )
+                                    }
+                                >
                                     {item.Help || item.Value}
                                 </AutocompleteItem>
                             )}
@@ -208,7 +220,7 @@ export default function RemoteEditDrawer({
                                             key={backend.Name}
                                             startContent={
                                                 <img
-                                                    src={`/icons/${backend.Prefix}.png`}
+                                                    src={`/icons/backends/${backend.Prefix}.png`}
                                                     className="object-contain w-8 h-8"
                                                     alt={backend.Name}
                                                 />
@@ -216,7 +228,10 @@ export default function RemoteEditDrawer({
                                         >
                                             {backend.Description.includes('Compliant')
                                                 ? `${backend.Description.split('Compliant')[0]} Compliant`
-                                                : backend.Description || backend.Name}
+                                                : backend.Description?.replace(
+                                                      ' (this is not Google Drive)',
+                                                      ''
+                                                  ) || backend.Name}
                                         </SelectItem>
                                     ))}
                                 </Select>

src/pages/Settings.tsx

@@ -652,7 +652,7 @@ function LicenseSection() {
                     autoComplete="off"
                     autoCorrect="off"
                     spellCheck="false"
-                    endContent={licenseValid && <CheckIcon className="w-5 h-5 text-green-500" />}
+                    endContent={licenseValid && <CheckIcon className="w-5 h-5 text-success" />}
                     data-focus-visible="false"
                     fullWidth={true}
                 />
@@ -705,6 +705,7 @@ function LicenseSection() {
                         isLoading={isRevoking}
                         color="danger"
                         variant="ghost"
+                        size="lg"
                         onPress={async () => {
                             // usePersistedStore.setState({
                             //     licenseKey: undefined,
@@ -914,14 +915,18 @@ function RemoteCard({
     onDeletePress: () => void
 }) {
     const [type, setType] = useState<string | null>(null)
+    const [provider, setProvider] = useState<string | null>(null)
 
-    const imageUrl = type ? `/icons/${type}.png` : undefined
+    const imageUrl = provider ? `/icons/providers/${provider}.png` : `/icons/backends/${type}.png`
 
     useEffect(() => {
         const loadRemoteConfig = async () => {
             try {
                 const remoteInfo = await getRemote(remote)
                 setType(remoteInfo.type)
+                if (remoteInfo.provider) {
+                    setProvider(remoteInfo.provider)
+                }
             } catch (error) {
                 console.error('[RemoteCard] Failed to load remote config:', error)
             }