display the homeservers list

src/App.module.scss

@@ -12,6 +12,7 @@ body, html {
   border-radius: 16px;
   z-index: 0;
   transition: 500ms ease;
+  overflow-y: scroll;
 }
 
 @keyframes delay-show-fade-in {

src/App.svelte

@@ -10,6 +10,7 @@
     import { Router, Link, Route, navigate } from "svelte-routing";
     import RouteStore from './store/RouteStore';
     import Background from './widget/Background/Background.svelte';
+    import Explore from './page/Explore/Explore.svelte';
 
     export let url = "/load";
 
@@ -40,6 +41,7 @@
             <Route path='/' component={Greet} />
             <Route path='/load' component={Load} />
             <Route path='/sign-in' component={SignIn} />
+            <Route path='/explore' component={Explore} />
         </Router>
     </div>
 </div>

src/lib/global_styles.scss

@@ -41,4 +41,7 @@ button {
         background: #0441;
         border: 1px solid #203030;
     }
+}
+a {
+    color: #66a0af;
 }

src/main.ts

@@ -4,7 +4,7 @@ import '@fontsource-variable/red-hat-display';
 import './lib/global_styles.scss';
 
 const app = new App({
-  target: document.getElementById("app"),
+    target: document.getElementById("app"),
 });
 
 export default app;

src/page/Explore/Explore.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+    import style from './style.module.scss';
+    import Jumper from 'svelte-loading-spinners/Jumper.svelte';
+    import { invoke } from '@tauri-apps/api/tauri';
+    import { listen } from 'svelte/internal';
+    
+
+    let list = [];
+    let loaded = false;
+
+    // load servers
+    invoke('list_servers').then(data => {
+        list = data;
+        loaded = true;
+    })
+
+</script>
+
+<div class={style.root}>
+    <h1 style='text-align:center;margin-top:40px'>
+        Homeservers
+    </h1>
+
+    <p style='text-align:center'>
+        List kindly provided by
+        <a href='https://joinmatrix.org/servers'>
+            joinmatrix.org
+        </a>
+    </p>
+    <div class={style.list}>
+        {#if !loaded}
+            <p>
+                Loading...<br/>
+                <Jumper color='#e1e1e1' duration='3s' />
+            </p>
+        {/if}
+
+        {#if loaded}
+            <table style='margin:0 auto;min-width:100%'>
+                <tbody>
+                    <tr>
+                        <td class={style.server}>
+                            <h1>Server name</h1>
+                            <p class={style.remarks}>Notes</p>
+                        </td>
+                        <td>
+                            Location
+                        </td>
+                        <td>
+                            Rules
+                        </td>
+                        <td>
+                            Privacy Policy
+                        </td>
+                        <td>
+                            Version
+                        </td>
+                        <td>
+                        </td>
+                        <td>
+                        </td>
+                    </tr>
+                    {#each list as server}
+                        <script>
+                            if (!server.open) {
+                                continue
+                            }
+                        </script>
+                        <tr>
+                            <td class={style.server}>
+                                <h1>{server.name}</h1>
+                                <p class={style.remarks}>{server.remarks}</p>
+                            </td>
+                            <td>
+                                {server.jurisdiction}
+                            </td>
+                            <td>
+                                {#if server.tos}
+                                    <a href={server.tos}>Yes</a>
+                                {:else}
+                                    No
+                                {/if}
+                            </td>
+                            <td>
+                                {#if server.privacy}
+                                    <a href={server.privacy}>Yes</a>
+                                {:else}
+                                    No
+                                {/if}
+                            </td>
+                            <td style={server.version.startsWith('1.90') ? 'color: limegreen' : ''}>
+                                {server.version}
+                            </td>
+                            <td>
+                                <button>
+                                    Register here
+                                </button>
+                            </td>
+                            <td>
+                                <button>
+                                    Info
+                                </button>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        {/if}
+    </div>
+</div>

src/page/Explore/style.module.scss

@@ -0,0 +1,35 @@
+.root {
+    h1 {
+        font-size: 20pt;
+        font-weight: 400;
+    }
+    .list {
+        margin-top: 60px;
+        text-align: center;
+        overflow-y: scroll;
+        padding: 0 60px;
+
+        .server {
+            text-align: left;
+            padding: 8px 0;
+            h1 {
+                font-size: 12pt;
+                font-weight: 400;
+                margin: 0;
+                line-height: 11pt;
+            }
+            .remarks {
+                font-size: 9pt;
+                font-family: 300;
+                margin: 0;
+            }
+        }
+
+        // Spinner styles
+        :global {
+            .wrapper {
+                margin: 10px auto;
+            }
+        }
+    }
+}

src/page/Greet/Greet.svelte

@@ -30,13 +30,13 @@
             </button>
         </Link>
 
-        <Link href='/homeserver-list'>
+        <Link href='/explore'>
             <button>
                 Create account
             </button>
         </Link>
         <br/>
-        <Link href='/homeserver-list'>
+        <Link href='/explore'>
             <button>
                 Explore servers
             </button>

src/page/Load/Load.svelte

@@ -2,7 +2,7 @@
     import Blek from '../../shared/blek.svelte';
     import style from './style.module.scss';
 
-    import Plane from 'svelte-loading-spinners/Jumper.svelte';
+    import Jumper from 'svelte-loading-spinners/Jumper.svelte';
 
     let motto_translate = true;
     let motto_visible = true;
@@ -22,7 +22,7 @@
     <h1>
         Loading...
     </h1>
-    <Plane color='#e1e1e1' duration='3s' />
+    <Jumper color='#e1e1e1' duration='3s' />
     <p class={style.motto + (motto_visible ? '' : ' ' + style.hide)}>
         {
             !motto_translate ?