Move orgs to home, and search to header

Signed-off-by: Alexis Sellier <self@cloudhead.io>

src/App.svelte

@@ -44,6 +44,12 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    background: linear-gradient(
+      180deg,
+      var(--color-secondary-background) 0%,
+      transparent 30%,
+      transparent 100%
+    );
   }
   .wrapper {
     display: flex;
@@ -69,7 +75,7 @@
     <div class="wrapper">
       <Router>
         <Route path="/">
-          <Home />
+          <Home {config} />
         </Route>
         <Route path="vesting">
           <Vesting {config} session={$session} />

src/Header.svelte

@@ -9,7 +9,8 @@
   import Connect from '@app/Connect.svelte';
   import type { Config } from '@app/config';
   import { Profile, ProfileType } from "@app/profile";
-  import Avatar from "./Avatar.svelte";
+  import Avatar from '@app/Avatar.svelte';
+  import Search from '@app/Search.svelte';
 
   export let session: Session | null;
   export let config: Config;
@@ -29,26 +30,13 @@
     margin: 0;
     padding: 1.5rem;
   }
-  header .nav {
-    display: inline-block;
-    height: 100%;
-    margin-left: 1.5rem;
-    white-space: nowrap;
-  }
-  header .nav a {
-    display: inline-block;
-    padding: 0.5rem 0.5rem;
-    margin-right: 1.5rem;
-    font-weight: 500;
-    color: var(--color-foreground-6);
-  }
-  header .nav a:hover {
-    color: var(--color-foreground);
-  }
   header .left, header .right {
     display: flex;
     align-items: center;
   }
+  .logo {
+    display: flex;
+  }
   .error {
     text-align: center;
     color: var(--color-negative);
@@ -63,6 +51,12 @@
   .error a:hover {
     text-decoration: none;
   }
+  .search {
+    height: 42px;
+    width: 16rem;
+    margin-left: 1rem;
+    display: inline-block;
+  }
   .address {
     display: flex;
     flex-direction: row;
@@ -124,10 +118,9 @@
 
 <header>
   <div class="left">
-    <a use:link href="/"><Logo /></a>
-    <div class="nav">
-      <a use:link href="/orgs/">Orgs</a>
-      <a use:link href="/registrations">Register</a>
+    <a use:link href="/" class="logo"><Logo /></a>
+    <div class="search">
+      <Search />
     </div>
   </div>
 

src/Search.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { navigate } from 'svelte-routing';
+
+  let input = "";
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      navigate(`/resolver/query?${
+        new URLSearchParams({ q: input })
+      }`);
+    }
+  };
+</script>
+
+<style>
+  input {
+    height: 100%;
+    width: 100%;
+    font-size: 0.875rem;
+    text-overflow: ellipsis;
+    margin: 0;
+    padding:  0.5rem 1.25rem;
+    border-style: dashed;
+  }
+</style>
+
+<input
+    size="40"
+    type="text"
+    bind:value={input}
+    on:keydown={handleKeydown}
+    placeholder="Search a name or address..." />

src/base/home/Index.svelte

@@ -1,23 +1,22 @@
 <script lang="ts">
-  import { navigate } from 'svelte-routing';
+  import type { Config } from '@app/config';
+  import Orgs from '@app/base/orgs/Index.svelte';
 
-  let input = "";
-  const search = () => {
-    navigate(`/resolver/query?${
-      new URLSearchParams({ q: input })
-    }`);
-  };
+  export let config: Config;
 </script>
 
+<style>
+  main {
+    width: 100%;
+  }
+</style>
+
 <svelte:head>
   <title>Radicle &ndash; Home</title>
 </svelte:head>
 
-<main class="centered">
+<main>
   <div>
-    <input size="40" type="text" bind:value={input} placeholder="Enter a name, address or domain..." />
-    <button class="primary" on:click={search} disabled={!input}>
-      Search
-    </button>
+    <Orgs {config} />
   </div>
 </main>