-
-
-
);
-
-
- {t(step.title)}
-- {t("onboarding.step")} {currentStep + 1} {t("onboarding.of")}{" "} - {relevantSteps.length} -
+
+
-
+
+
+
+
- {t(step.title)}
++ {t("onboarding.step")} {currentStep + 1} / {relevantSteps.length} +
+
+
+ !imageError && !imageLoading && setImageEnlarged(true)}
+ >
+ {imageLoading && !imageError && (
+ 
- !imageError && !imageLoading && setImageEnlarged(true)
- }
- >
- {imageLoading && !imageError && (
- {
- setImageLoading(false);
- imageCache.set(imageUrl, { loaded: true, error: false });
- }}
- onError={() => {
- setImageError(true);
- setImageLoading(false);
- imageCache.set(imageUrl, { loaded: true, error: true });
- }}
- />
- {!imageLoading && (
-
-
+
+
+ )}
+
-
-
+ "w-full h-full object-contain transition-opacity duration-300",
+ imageLoading ? "opacity-0" : "opacity-100",
)}
- {imageError ? (
-
-
- ) : (
- <>
-
-
- {t("onboarding.clickToEnlarge") || "Click to enlarge"}
-
-
- )}
-
- )}
- - {t(step.description)} -
+ onLoad={() => setImageLoading(false)} + onError={(e) => { + const el = e.currentTarget as HTMLImageElement; + const filename = el.src.split("/").pop() || ""; + const fallback = `/assets/${filename}`; + if (!el.src.includes("/assets/")) { + el.src = fallback; + } else { + setImageError(true); + } + setImageLoading(false); + }} + /> +
+ {t(step.description)}
+ {CustomComponent && (
+
+
+ )}
+
-
-
+ {contentComponent}
-
- );
- }
-
- return (
- <>
- {enlargedImageModal}
-
+
+
+ )}
);
}
diff --git a/ui/src/components/ui/select.tsx b/ui/src/components/ui/select.tsx
new file mode 100644
index 0000000..1d5c5e5
--- /dev/null
+++ b/ui/src/components/ui/select.tsx
@@ -0,0 +1,188 @@
+import * as React from "react";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Select({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return ) {
+ return & {
+ size?: "sm" | "default";
+}) {
+ return (
+
+ {children}
+
+
+
+ );
+}
+
+function SelectContent({
+ className,
+ children,
+ position = "item-aligned",
+ align = "center",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
+
+function SelectLabel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+}
+
+function SelectSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
+
+ );
+}
+
+function SelectScrollDownButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ );
+}
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+};
diff --git a/ui/src/lib/detectPlatform.ts b/ui/src/lib/detectPlatform.ts
new file mode 100644
index 0000000..a8236a1
--- /dev/null
+++ b/ui/src/lib/detectPlatform.ts
@@ -0,0 +1,23 @@
+export enum Platform {
+ Android = "android",
+ iOS = "ios",
+ Windows = "windows",
+ Linux = "linux",
+}
+
+export const detectPlatform = (): Platform => {
+ if (typeof window === "undefined") return Platform.Android;
+
+ const ua =
+ window.navigator.userAgent ||
+ window.navigator.vendor ||
+ (window as any).opera;
+
+ if (/android/i.test(ua)) return Platform.Android;
+ if (/iPad|iPhone|iPod/.test(ua)) return Platform.iOS;
+ if (/Windows NT/.test(ua)) return Platform.Windows;
+ if (/Linux/.test(ua) && !/android/i.test(ua)) return Platform.Linux;
+
+ //Return most likely platform
+ return Platform.Android;
+};
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index 9723791..cf66f99 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -21,17 +21,69 @@
"review": "Review onboarding",
"step": "Step",
"steps": {
- "home": {
- "test": {
- "description": "You are about to leave the Matrix.... :(",
- "title": "Second page for test"
- },
- "welcome": {
- "description": "There is no going back after this one...",
- "title": "Enter The Matrix.."
- }
+ "desktop-intro": {
+ "title": "Welcome to Matrix",
+ "description": "This onboarding uses the Element-client, but you can use almost any Matrix Client. The steps you need to take should be somewhat similar in other clients."
+ },
+ "setup": {
+ "title": "Prerequisites",
+ "description": "Copy the homeserver address (1). You can return to the guide always from the bottom right corner.(2)"
+ },
+ "desktop-step-1": {
+ "title": "Log into Element - 1",
+ "description": "Open Element and select \"Sign in\"."
+ },
+ "desktop-step-2": {
+ "title": "Log into Element - 2",
+ "description": "Press \"Edit\" on the homeserver address."
+ },
+ "desktop-step-3": {
+ "title": "Log into Element - 3",
+ "description": "Paste the server address you copied earlier. Press \"Continue\"."
+ },
+ "desktop-step-4": {
+ "title": "Log into Element - 4",
+ "description": "Press \"Continue with Keycloak\". Continue in your browser, which should ask your for your mTLS-certificate. Authenticate with mTLS."
+ },
+ "desktop-step-5": {
+ "title": "Element Homepage",
+ "description": "You are now logged in and able to use Matrix. You can see or create spaces on the left (1). You can see and create your direct messages near the middle (2)."
+ },
+ "mobile-intro": {
+ "title": "Welcome to Matrix",
+ "description": "This onboarding uses the Element Classic-client, but you can use almost any Matrix Client. The steps you need to take should be somewhat similar in other clients."
+ },
+ "mobile-step-1": {
+ "title": "Log into Element Classic - 1",
+ "description": "Open Element and select \"Sign in\"."
+ },
+ "mobile-step-2": {
+ "title": "Log into Element Classic - 2",
+ "description": "Press \"Edit\" on the homeserver address."
+ },
+ "mobile-step-3": {
+ "title": "Log into Element Classic - 3",
+ "description": "Paste the server address you copied earlier. Press \"Next\"."
+ },
+ "mobile-step-4": {
+ "title": "Log into Element Classic - 4",
+ "description": "Press \"Continue with Keycloak\". Continue in your browser, which should ask your for your mTLS-certificate. Authenticate with mTLS."
+ },
+ "mobile-step-5": {
+ "title": "Element Classic Homepage",
+ "description": "You are now logged in and able to use Matrix. You search users and rooms at the top right corner (1). You can start a chat from the bottom right corner (2)."
}
},
- "title": "Onboard to Matrix"
+ "title": "Onboard to Matrix",
+ "downloads": {
+ "open_website": "Open download website"
+ }
+ },
+ "platform": {
+ "select_placeholder": "Select platform",
+ "android": "Android",
+ "ios": "iOS",
+ "linux": "Linux",
+ "windows": "Windows"
}
}
diff --git a/ui/src/locales/fi.json b/ui/src/locales/fi.json
index f0349d5..4c65979 100644
--- a/ui/src/locales/fi.json
+++ b/ui/src/locales/fi.json
@@ -11,27 +11,79 @@
"onboarding": {
"back": "Takaisin",
"clickToEnlarge": "Klikkaa suurentaaksesi",
- "completion": "Perehdyttäminen valmis!",
- "completionDesc": "Olet valmis ja voit nyt työskennellä täysillä teholla.",
- "finish": "Valmis",
- "imageMissing": "Kuva ei ole saatavilla",
+ "completion": "Perehdytys valmis!",
+ "completionDesc": "Kaikki on valmista ja olet valmis aloittamaan.",
+ "finish": "Lopeta",
+ "imageMissing": "Kuvaa ei ole saatavilla",
"next": "Seuraava",
"of": "/",
- "progressSaved": "Perehdyttämisen edistyminen on tallennettu.",
- "review": "Tarkista perehdyttäminen",
+ "progressSaved": "Perehdytyksen edistyminen on tallennettu.",
+ "review": "Tarkastele perehdytystä",
"step": "Vaihe",
"steps": {
- "home": {
- "test": {
- "description": "You are about to leave the Matrix.... :(",
- "title": "Second page for test"
- },
- "welcome": {
- "description": "There is no going back after this one...",
- "title": "Enter The Matrix.."
- }
+ "desktop-intro": {
+ "title": "Tervetuloa Matrixiin",
+ "description": "Tämä opas käyttää Element-sovellusta, mutta voit käyttää mitä tahansa Matrix-sovellusta. Vaiheet ovat samankaltaisia muissakin sovelluksissa."
+ },
+ "setup": {
+ "title": "Esivaatimukset",
+ "description": "Kopioi kotipalvelimen osoite (1). Voit palata oppaaseen milloin vain oikeasta alakulmasta (2)."
+ },
+ "desktop-step-1": {
+ "title": "Kirjaudu Elementiin - 1",
+ "description": "Avaa Element ja valitse \"Log in\"."
+ },
+ "desktop-step-2": {
+ "title": "Kirjaudu Elementiin - 2",
+ "description": "Paina \"Edit\" kotipalvelimen osoitteen kohdalta."
+ },
+ "desktop-step-3": {
+ "title": "Kirjaudu Elementiin - 3",
+ "description": "Liitä aiemmin kopioimasi palvelimen osoite. Paina \"Continue\"."
+ },
+ "desktop-step-4": {
+ "title": "Kirjaudu Elementiin - 4",
+ "description": "Paina \"Continue with Keycloak\". Jatka selaimessasi, jonka pitäisi pyytää mTLS-varmennettasi muutaman kerran. Tunnistaudu mTLS-varmenteella."
+ },
+ "desktop-step-5": {
+ "title": "Elementin kotinäkymä",
+ "description": "Olet nyt kirjautunut sisään ja voit käyttää Matrixia. Voit tarkastella tai luoda tiloja (Spaces) sivupalkista (1). Näet ja voit luoda suoraviestejä vasemmasta reunasta (2)."
+ },
+ "mobile-intro": {
+ "title": "Tervetuloa Matrixiin",
+ "description": "Tämä opas käyttää Element Classic -sovellusta, mutta voit käyttää lähes mitä tahansa Matrix-sovellusta. Vaiheet ovat samankaltaisia muissakin sovelluksissa."
+ },
+ "mobile-step-1": {
+ "title": "Kirjaudu Element Classiciin - 1",
+ "description": "Avaa Element ja valitse \"Sign in\"."
+ },
+ "mobile-step-2": {
+ "title": "Kirjaudu Element Classiciin - 2",
+ "description": "Paina \"Edit\" kotipalvelimen osoitteen kohdalta."
+ },
+ "mobile-step-3": {
+ "title": "Kirjaudu Element Classiciin - 3",
+ "description": "Liitä aiemmin kopioimasi palvelimen osoite. Paina \"Next\"."
+ },
+ "mobile-step-4": {
+ "title": "Kirjaudu Element Classiciin - 4",
+ "description": "Paina \"Continue with Keycloak\". Jatka selaimessasi, jonka pitäisi pyytää mTLS-varmennettasi. Tunnistaudu mTLS-varmenteella."
+ },
+ "mobile-step-5": {
+ "title": "Element Classicin kotinäkymä",
+ "description": "Olet nyt kirjautunut sisään ja voit käyttää Matrixia. Voit etsiä käyttäjiä ja huoneita oikeasta yläkulmasta (1). Voit aloittaa keskustelun oikeasta alakulmasta (2)."
}
},
- "title": "Matrix -sovelluksen perehdyttäminen"
+ "title": "Matrix-perehdytys",
+ "downloads": {
+ "open_website": "Avaa lataussivusto"
+ }
+ },
+ "platform": {
+ "select_placeholder": "Valitse alusta",
+ "android": "Android",
+ "ios": "iOS",
+ "linux": "Linux",
+ "windows": "Windows"
}
}
diff --git a/ui/src/locales/sv.json b/ui/src/locales/sv.json
index c3bfbdf..58e79d9 100644
--- a/ui/src/locales/sv.json
+++ b/ui/src/locales/sv.json
@@ -9,29 +9,81 @@
"copyButton": "Kopiera"
},
"onboarding": {
- "back": "Tillbaka",
+ "back": "Bakåt",
"clickToEnlarge": "Klicka för att förstora",
- "completion": "Introduktionen är slutförd!",
- "completionDesc": "Du är redo och kan nu arbeta i full kapacitet.",
+ "completion": "Introduktionen är klar!",
+ "completionDesc": "Allt är klart och du är redo att köra igång.",
"finish": "Slutför",
- "imageMissing": "Bild inte tillgänglig",
+ "imageMissing": "Bild saknas",
"next": "Nästa",
"of": "av",
- "progressSaved": "Dina introduktionsframsteg har sparats.",
+ "progressSaved": "Dina framsteg i introduktionen har sparats.",
"review": "Granska introduktion",
"step": "Steg",
"steps": {
- "home": {
- "test": {
- "description": "You are about to leave the Matrix.... :(",
- "title": "Second page for test"
- },
- "welcome": {
- "description": "There is no going back after this one...",
- "title": "Enter The Matrix.."
- }
+ "desktop-intro": {
+ "title": "Välkommen till Matrix",
+ "description": "Denna introduktion använder Element-klienten, men du kan använda vilken Matrix-klient som helst. Stegen bör vara liknande i andra klienter."
+ },
+ "setup": {
+ "title": "Förutsättningar",
+ "description": "Kopiera adressen till hemservern (1). Du kan alltid återvända till guiden via det nedre högra hörnet (2)."
+ },
+ "desktop-step-1": {
+ "title": "Logga in i Element - 1",
+ "description": "Öppna Element och välj \"Logga in\"."
+ },
+ "desktop-step-2": {
+ "title": "Logga in i Element - 2",
+ "description": "Tryck på \"Redigera\" vid hemserverns adress."
+ },
+ "desktop-step-3": {
+ "title": "Logga in i Element - 3",
+ "description": "Klistra in serveradressen du kopierade tidigare. Tryck på \"Fortsätt\"."
+ },
+ "desktop-step-4": {
+ "title": "Logga in i Element - 4",
+ "description": "Tryck på \"Fortsätt med Keycloak\". Fortsätt i din webbläsare, som bör fråga efter ditt mTLS-certifikat några gånger. Autentisera med mTLS."
+ },
+ "desktop-step-5": {
+ "title": "Elements startsida",
+ "description": "Du är nu inloggad och kan använda Matrix. Du kan se eller skapa ytor (Spaces) till vänster (1). Du kan se och skapa direktmeddelanden i mitten (2)."
+ },
+ "mobile-intro": {
+ "title": "Välkommen till Matrix",
+ "description": "Denna introduktion använder Element Classic-klienten, men du kan använda nästan vilken Matrix-klient som helst. Stegen bör vara liknande i andra klienter."
+ },
+ "mobile-step-1": {
+ "title": "Logga in i Element Classic - 1",
+ "description": "Öppna Element och välj \"Sign in\"."
+ },
+ "mobile-step-2": {
+ "title": "Logga in i Element Classic - 2",
+ "description": "Tryck på \"Edit\" vid hemserverns adress."
+ },
+ "mobile-step-3": {
+ "title": "Logga in i Element Classic - 3",
+ "description": "Klistra in serveradressen du kopierade tidigare. Tryck på \"Next\"."
+ },
+ "mobile-step-4": {
+ "title": "Logga in i Element Classic - 4",
+ "description": "Tryck på \"Continue with Keycloak\". Fortsätt i din webbläsare, som bör fråga efter ditt mTLS-certifikat. Autentisera med mTLS."
+ },
+ "mobile-step-5": {
+ "title": "Element Classics startsida",
+ "description": "Du är nu inloggad och kan använda Matrix. Du kan söka efter användare och rum i det övre högra hörnet (1). Du kan starta en chatt från det nedre högra hörnet (2)."
}
},
- "title": "Introduktion till Matrix"
+ "title": "Introduktion till Matrix",
+ "downloads": {
+ "open_website": "Öppna webbplatsen för nedladdning"
+ }
+ },
+ "platform": {
+ "select_placeholder": "Välj plattform",
+ "android": "Android",
+ "ios": "iOS",
+ "linux": "Linux",
+ "windows": "Windows"
}
}
diff --git a/ui/src/pages/HomePage.tsx b/ui/src/pages/HomePage.tsx
index 1429776..11ff893 100644
--- a/ui/src/pages/HomePage.tsx
+++ b/ui/src/pages/HomePage.tsx
@@ -1,12 +1,12 @@
import { useTranslation } from "react-i18next";
import { PRODUCT_SHORTNAME } from "@/App";
-import { OnboardingGuide } from "@/components/OnboardingGuide";
import { Toaster } from "@/components/ui/sonner";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Copy } from "lucide-react";
import { copyToClipboard } from "@/lib/clipboard";
+import { OnboardingHandler } from "@/components/OnboardingGuide";
export const HomePage = () => {
const { t } = useTranslation(PRODUCT_SHORTNAME);
@@ -44,7 +44,7 @@ export const HomePage = () => {
-
-
+
);
- const enlargedImageModal = (
-
- );
+
+
- if (isMobile) {
- return (
- <>
- {enlargedImageModal}
+ {isMobile ? (
-
- {t("onboarding.title") || "Onboarding Guide"}
-
- {contentComponent}
-
-