web: add support for configuring server urls from login screen

apps/web/src/components/auth-container/index.jsx

@@ -18,13 +18,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useMemo } from "react";
-import { Box, Flex, Image, Link, Text } from "@theme-ui/components";
-import { useStore as useThemeStore } from "../../stores/theme-store";
-import { getRandom } from "@notesnook/common";
+import { Box, Button, Flex, Image, Link, Text } from "@theme-ui/components";
+import { getRandom, usePromise } from "@notesnook/common";
 import Grberk from "../../assets/testimonials/grberk.jpeg";
 import Holenstein from "../../assets/testimonials/holenstein.jpg";
 import Jason from "../../assets/testimonials/jason.jpg";
 import Cameron from "../../assets/testimonials/cameron.jpg";
+import hosts from "@notesnook/core/dist/utils/constants";
+import { SettingsDialog } from "../../dialogs/settings";
 
 const testimonials = [
   {
@@ -74,10 +75,16 @@ function randomTitle() {
 }
 
 function AuthContainer(props) {
-  const colorScheme = useThemeStore((store) => store.colorScheme);
   const testimonial = useMemo(() => randomTestimonial(), []);
   const title = useMemo(() => randomTitle(), []);
 
+  const version = usePromise(
+    async () =>
+      await fetch(`${hosts.API_HOST}/version`)
+        .then((r) => r.json())
+        .catch(() => undefined)
+  );
+
   return (
     <Flex
       sx={{
@@ -165,7 +172,6 @@ function AuthContainer(props) {
           <Text variant={"heading"} sx={{ fontSize: 48 }}>
             {title}
           </Text>
-
           <Text
             variant="body"
             mt={10}
@@ -193,6 +199,34 @@ function AuthContainer(props) {
               <Text variant="subBody">@{testimonial.username}</Text>
             </Flex>
           </Flex>
+
+          <Flex
+            mt={2}
+            pt={2}
+            sx={{
+              justifyContent: "space-between",
+              borderTop: "1px solid var(--border)",
+              width: "100%"
+            }}
+          >
+            <Text variant={"subBody"}>
+              {version.status === "fulfilled" &&
+              version.value.instance !== "default" ? (
+                <>
+                  Using{" "}
+                  {version.value.instance + ` (v${version.value.version})`}
+                </>
+              ) : (
+                <>Using official Notesnook instance.</>
+              )}
+            </Text>
+            <Button
+              variant="anchor"
+              onClick={() => SettingsDialog.show({ activeSection: "servers" })}
+            >
+              Configure
+            </Button>
+          </Flex>
         </Flex>
       </Box>
       <Flex

apps/web/src/dialogs/settings/index.tsx

@@ -77,7 +77,9 @@ import { AppLockSettings } from "./app-lock-settings";
 import { BaseDialogProps, DialogManager } from "../../common/dialog-manager";
 import { ServersSettings } from "./servers-settings";
 
-type SettingsDialogProps = BaseDialogProps<false>;
+type SettingsDialogProps = BaseDialogProps<false> & {
+  activeSection?: SectionKeys;
+};
 
 const sectionGroups: SectionGroup[] = [
   {
@@ -187,7 +189,9 @@ export const SettingsDialog = DialogManager.register(function SettingsDialog(
   props: SettingsDialogProps
 ) {
   const [activeSettings, setActiveSettings] = useState<SettingsGroup[]>(
-    SettingsGroups.filter((g) => g.section === "profile")
+    SettingsGroups.filter(
+      (g) => g.section === (props.activeSection || "profile")
+    )
   );
 
   return (
@@ -205,6 +209,7 @@ export const SettingsDialog = DialogManager.register(function SettingsDialog(
         }}
       >
         <SettingsSideBar
+          activeSection={props.activeSection}
           onNavigate={(settings) => {
             const scrollbar = document.getElementById("settings-scrollbar");
             if (scrollbar !== null) scrollbar.scrollTop = 0;
@@ -233,10 +238,13 @@ export const SettingsDialog = DialogManager.register(function SettingsDialog(
   );
 });
 
-type SettingsSideBarProps = { onNavigate: (settings: SettingsGroup[]) => void };
+type SettingsSideBarProps = {
+  onNavigate: (settings: SettingsGroup[]) => void;
+  activeSection?: SectionKeys;
+};
 function SettingsSideBar(props: SettingsSideBarProps) {
-  const { onNavigate } = props;
-  const [route, setRoute] = useState<SectionKeys>("profile");
+  const { onNavigate, activeSection } = props;
+  const [route, setRoute] = useState<SectionKeys>(activeSection || "profile");
   useUserStore((store) => store.isLoggedIn);
 
   return (