Add label as a selectable permission

src/lib/components/permissions/actions.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
     import { DropList, DropListItem } from '..';
+    import Label from './label.svelte';
     import Custom from './custom.svelte';
     import Team from './team.svelte';
     import User from './user.svelte';
@@ -10,6 +11,7 @@
     export let showDropdown: boolean;
     export let showUser: boolean;
     export let showTeam: boolean;
+    export let showLabel: boolean;
     export let showCustom: boolean;
     export let groups: Writable<Map<string, Permission>>;
 
@@ -38,6 +40,7 @@
         </DropListItem>
         <DropListItem on:click={() => (showUser = true)}>Select users</DropListItem>
         <DropListItem on:click={() => (showTeam = true)}>Select teams</DropListItem>
+        <DropListItem on:click={() => (showLabel = true)}>Label</DropListItem>
         <DropListItem on:click={() => (showCustom = true)}>Custom permission</DropListItem>
     </svelte:fragment>
 </DropList>
@@ -51,4 +54,5 @@
         showCustom = true;
     }}
     {groups} />
+<Label bind:show={showLabel} on:create {groups} />
 <Custom bind:show={showCustom} on:create {groups} />

src/lib/components/permissions/label.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { Button, FormList, Helper, InputText } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+    import { Modal } from '..';
+    import type { Writable } from 'svelte/store';
+    import type { Permission } from './permissions.svelte';
+
+    export let show: boolean;
+    export let groups: Writable<Map<string, Permission>>;
+
+    const dispatch = createEventDispatcher();
+
+    const pattern = String.raw`^[a-zA-Z0-9]+$`;
+    let value = '';
+    let isError = false;
+
+    function reset() {
+        value = '';
+        show = false;
+    }
+
+    function create() {
+        if (!value || !value.match(pattern)) {
+            isError = true;
+            return;
+        }
+
+        dispatch('create', [`label:${value}`]);
+        reset();
+    }
+
+    $: disabled = !value || $groups.has(value);
+</script>
+
+<Modal title="Label" bind:show on:close={reset} onSubmit={create}>
+    <p class="text">Labels allow you to grant access to users with the specfied label.</p>
+    <FormList>
+        <InputText showLabel={false} id="label" label="Label" placeholder="admin" bind:value />
+        <Helper type={isError ? 'warning' : 'neutral'}
+            >Only alphanumeric characters are allowed.</Helper>
+    </FormList>
+
+    <svelte:fragment slot="footer">
+        <Button submit {disabled}>Add</Button>
+    </svelte:fragment>
+</Modal>

src/lib/components/permissions/permissions.svelte

@@ -30,6 +30,7 @@
 
     let showUser = false;
     let showTeam = false;
+    let showLabel = false;
     let showCustom = false;
     let showDropdown = false;
 
@@ -207,6 +208,7 @@
     </div>
 
     <Actions
+        bind:showLabel
         bind:showCustom
         bind:showDropdown
         bind:showTeam
@@ -223,6 +225,7 @@
         <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
             <div class="common-section">
                 <Actions
+                    bind:showLabel
                     bind:showCustom
                     bind:showDropdown
                     bind:showTeam

src/lib/components/permissions/roles.svelte

@@ -20,6 +20,7 @@
 
     let showUser = false;
     let showTeam = false;
+    let showLabel = false;
     let showCustom = false;
     let showDropdown = false;
 
@@ -112,6 +113,7 @@
         </TableBody>
     </Table>
     <Actions
+        bind:showLabel
         bind:showCustom
         bind:showDropdown
         bind:showTeam
@@ -128,6 +130,7 @@
         <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
             <div class="common-section">
                 <Actions
+                    bind:showLabel
                     bind:showCustom
                     bind:showDropdown
                     bind:showTeam