style: improve button

src/interface/components/Button.svelte

@@ -2,6 +2,6 @@
   let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
 </script>
 
-<button onclick={onClick} class='px-14 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
+<button onclick={onClick} class='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
   {text}
 </button>

src/interface/pages/settings/general.svelte

@@ -22,7 +22,7 @@
     (Omit<SelectSetting<string>, 'type'> & { 
       type: 'select', 
       id: string, 
-      options: Array<{ value: string, label: string }> 
+      options: string[]
     });
 
   interface Plugin {
@@ -130,11 +130,21 @@
                     max={setting.max}
                     step={setting.step}
                   />
+                {:else if setting.type === 'string'}
+                  <input
+                    type="text"
+                    class="px-2 py-1 text-sm rounded-md dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white"
+                    value={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
+                    oninput={(e) => updatePluginSetting(plugin.pluginId, key, e.currentTarget.value)}
+                  />                
                 {:else if setting.type === 'select'}
                   <Select
                   state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
                   onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
-                    options={setting.options}
+                  options={(setting.options as string[]).map(opt => ({
+                    value: opt,
+                    label: opt.charAt(0).toUpperCase() + opt.slice(1)
+                    }))}
                   />
                 {/if}
               </div>