Improve OrgRoleSelect

Now it can be used in forms (with a label) and in tables (without label)
and look good in both locations.

frontend/src/lib/forms/OrgRoleSelect.svelte

@@ -1,13 +1,26 @@
 <script lang="ts">
   import { OrgRole } from '$lib/gql/types';
   import t from '$lib/i18n';
+  import Select from './Select.svelte';
 
   export let id = 'role';
   export let value: OrgRole;
   export let disabled = false;
   export let verbose = false;
+  export let withLabel = false;
+  export let error: string | string[] | undefined = undefined;
 </script>
 
+{#if withLabel}
+<Select {id} bind:value label={$t('org_role.label')} {error}>
+  <option value={OrgRole.User}>
+    {$t(verbose ? 'org_role.user_description' : 'org_role.user')}
+  </option>
+  <option value={OrgRole.Admin}>
+    {$t(verbose ? 'org_role.admin_description' : 'org_role.admin')}
+  </option>
+</Select>
+{:else}
 <select {disabled} bind:value {id} class="select select-bordered" on:change>
   <option value={OrgRole.User}>
     {$t(verbose ? 'org_role.user_description' : 'org_role.user')}
@@ -16,3 +29,4 @@
     {$t(verbose ? 'org_role.admin_description' : 'org_role.admin')}
   </option>
 </select>
+{/if}

frontend/src/routes/(authenticated)/org/[org_id]/AddOrgMember.svelte

@@ -100,7 +100,7 @@
       autofocus
     />
   {/if}
-  <OrgRoleSelect bind:value={$form.role} error={errors.role} />
+  <OrgRoleSelect withLabel bind:value={$form.role} error={errors.role} />
   <span slot="submitText">
     {#if $form.usernameOrEmail.includes('@')}
       {$t('org_page.add_user.submit_button_email')}