v1.0.4 (#21)

- Search in repositories (thanks to @SaraVieira).
- Custom Dockerfile - you be able to deploy ANY applications! 🎉 
- Basic repository scanner for Nextjs and React. It will setup the default commands and buildpack if it detects some defined parameters.
- UI/UX fixes:
  - Github loading screen instead of standard loading screen. 
  - Info tooltips which provide some explanations of the input fields.

src/components/Application/Configuration/Repositories.svelte

@@ -1,36 +1,63 @@
+<style lang="postcss">
+  :global(.repository-select-search .listItem .item),
+  :global(.repository-select-search .empty) {
+    @apply text-sm py-3 font-bold bg-warmGray-800 text-white cursor-pointer border-none hover:bg-warmGray-700 !important;
+  }
+
+  :global(.repository-select-search .listContainer) {
+    @apply bg-transparent !important;
+  }
+
+  :global(.repository-select-search .clearSelect) {
+    @apply text-white cursor-pointer !important;
+  }
+
+  :global(.repository-select-search .selectedItem) {
+    @apply text-white relative cursor-pointer font-bold text-sm flex items-center !important;
+  }
+</style>
+
 <script>
   import { createEventDispatcher } from "svelte";
   import { isActive } from "@roxi/routify";
   import { application } from "@store";
+  import Select from "svelte-select";
+
+  function handleSelect(event) {
+    $application.repository.id = parseInt(event.detail.value, 10);
+    dispatch("loadBranches");
+  }
+
   export let repositories;
+  let items = repositories.map(repo => ({
+    label: `${repo.owner.login}/${repo.name}`,
+    value: repo.id.toString(),
+  }));
+
+  const selectedValue =
+    !$isActive("/application/new") &&
+    `${$application.repository.organization}/${$application.repository.name}`;
+
   const dispatch = createEventDispatcher();
-  const loadBranches = () => dispatch("loadBranches");
   const modifyGithubAppConfig = () => dispatch("modifyGithubAppConfig");
 </script>
 
 <div class="grid grid-cols-1">
   {#if repositories.length !== 0}
     <label for="repository">Organization / Repository</label>
-    <div class="grid grid-cols-3">
-      <!-- svelte-ignore a11y-no-onchange -->
-      <select
-        id="repository"
-        class:cursor-not-allowed="{!$isActive('/application/new')}"
-        class="col-span-2"
-        bind:value="{$application.repository.id}"
-        on:change="{loadBranches}"
-        disabled="{!$isActive('/application/new')}"
-      >
-        <option selected disabled>Select a repository</option>
-        {#each repositories as repo}
-          <option value="{repo.id}" class="font-bold">
-            {repo.owner.login}
-            /
-            {repo.name}
-          </option>
-        {/each}
-      </select>
-
+    <div class="grid grid-cols-3 ">
+      <div class="repository-select-search col-span-2">
+        <Select
+          containerClasses="w-full border-none bg-transparent"
+          on:select="{handleSelect}"
+          selectedValue="{selectedValue}"
+          isClearable="{false}"
+          items="{items}"
+          noOptionsMessage="No Repositories found"
+          placeholder="Select a Repository"
+          isDisabled="{!$isActive('/application/new')}"
+        />
+      </div>
       <button
         class="button col-span-1 ml-2 bg-warmGray-800 hover:bg-warmGray-700 text-white"
         on:click="{modifyGithubAppConfig}">Configure on Github</button