diff --git a/src/pages/login.css b/src/pages/login.css index 58a4388f..16873c3b 100644 --- a/src/pages/login.css +++ b/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; +} diff --git a/src/pages/login.jsx b/src/pages/login.jsx index a805eaee..53f9f388 100644 --- a/src/pages/login.jsx +++ b/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 (
@@ -107,11 +125,9 @@ function Login() { setInstanceText(e.target.value); }} /> - + ) : ( +
e.g. “mastodon.social’
+ )} {/* {instancesList.map((instance) => (