Don't show list of instances by default

Very basic sorting too

src/pages/login.css

@@ -51,3 +51,11 @@
   margin: 0;
   padding: 0;
 }
+
+#instances-eg {
+  margin: 0.2em 0 0;
+  padding: 8px;
+  height: 2.5em;
+  color: var(--text-insignificant-color);
+  font-style: italic;
+}

src/pages/login.jsx

@@ -83,6 +83,24 @@ function Login() {
     submitInstance(instanceURL);
   };
 
+  const instancesSuggestions = instanceText
+    ? instancesList
+        .filter((instance) => instance.includes(instanceText))
+        .sort((a, b) => {
+          // Move text that starts with instanceText to the start
+          const aStartsWith = a
+            .toLowerCase()
+            .startsWith(instanceText.toLowerCase());
+          const bStartsWith = b
+            .toLowerCase()
+            .startsWith(instanceText.toLowerCase());
+          if (aStartsWith && !bStartsWith) return -1;
+          if (!aStartsWith && bStartsWith) return 1;
+          return 0;
+        })
+        .slice(0, 10)
+    : [];
+
   return (
     <main id="login" style={{ textAlign: 'center' }}>
       <form onSubmit={onSubmit}>
@@ -107,11 +125,9 @@ function Login() {
               setInstanceText(e.target.value);
             }}
           />
+          {instancesSuggestions?.length > 0 ? (
             <ul id="instances-suggestions">
-            {instancesList
+              {instancesSuggestions.map((instance) => (
-              .filter((instance) => instance.includes(instanceText))
-              .slice(0, 10)
-              .map((instance) => (
                 <li>
                   <button
                     type="button"
@@ -125,6 +141,9 @@ function Login() {
                 </li>
               ))}
             </ul>
+          ) : (
+            <div id="instances-eg">e.g. &ldquo;mastodon.social&rsquo;</div>
+          )}
           {/* <datalist id="instances-list">
             {instancesList.map((instance) => (
               <option value={instance} />