k1ngsterr1/landing
1
0
Fork 0
forked from Rosetta/landing
Code Pull Requests Activity

Refine documentation and support experience

Browse Source
This commit is contained in:
rosetta
2026-07-31 04:32:34 -07:00
parent 179e2e65c6
commit 33d4574583
18 changed files with 924 additions and 1296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
src/pages/SupportPage.tsx
View File

@@ -1,252 +1,137 @@
import {
Accordion,
Anchor,
Box,
Button,
Card,
Group,
Paper,
SimpleGrid,
Stack,
Text,
ThemeIcon,
Title,
} from '@mantine/core';
import {
IconKey,
IconMail,
IconMessageCircle,
IconShieldLock,
type TablerIcon,
} from '@tabler/icons-react';
import type { ReactNode } from 'react';
import { Anchor, Box, Button, Paper, Stack, Text, Textarea, Title } from '@mantine/core';
import { IconMail, IconSearch } from '@tabler/icons-react';
import { useMemo, useState } from 'react';
import knownIssues from '../../known-issues.json';
import { LegalPage } from '../components/LegalPage/LegalPage';
import { SEO } from '../components/SEO/SEO';
import classes from './SupportPage.module.css';
const TOPICS: Array<{
href: string;
icon: TablerIcon;
title: string;
description: string;
}> = [
{
href: '#account',
icon: IconKey,
title: 'Account and access',
description: 'Recovery phrases, device access, and account security.',
},
{
href: '#messaging',
icon: IconMessageCircle,
title: 'Messaging and media',
description: 'Messages, photos, videos, files, voice messages, and groups.',
},
{
href: '#privacy',
icon: IconShieldLock,
title: 'Privacy and safety',
description: 'Security questions, privacy information, and abuse reports.',
},
];
const ACCOUNT_FAQS = [
{
question: 'How do I access my account on a new device?',
answer:
'Install Rosetta and enter your recovery phrase in the exact order it was created. Rosetta may ask you to confirm a new device to protect your account.',
},
{
question: 'I lost my recovery phrase. Can it be restored?',
answer:
'No. Your recovery phrase is the key to your account. Rosetta cannot recover it for you, so keep it private and backed up before you need it.',
},
{
question: 'Why am I asked to confirm a new device?',
answer:
'New-device confirmation helps prevent someone who has obtained a recovery phrase from silently accessing your account on another device.',
},
{
question: 'How do I report an account-access problem?',
answer:
'Email us with the device model, Rosetta version, and a short description of what happened. Do not include your recovery phrase or private keys.',
},
];
const MESSAGING_FAQS = [
{
question: 'How do I send a photo, video, or file?',
answer:
'Open a chat, tap the attachment button next to the message field, choose the item you want to share, then send it. Allow Photos or Files access when iOS asks for it.',
},
{
question: 'Why is an attachment still sending?',
answer:
'Media uploads depend on the file size and your connection. Keep Rosetta open and connected until the send indicator completes. You can retry a message that failed.',
},
{
question: 'How do I send a voice message?',
answer:
'In a chat, press and hold the microphone control to record, then release it to send. Microphone permission is required the first time you record.',
},
{
question: 'How do I get help with a group?',
answer:
'Contact us with the group name and a description of the issue. Do not send private recovery phrases, message contents, or encryption keys.',
},
];
const PRIVACY_FAQS = [
{
question: 'How is message content protected?',
answer:
'Rosetta is designed to encrypt message content before it is sent. For details about how we handle data, read the Rosetta Privacy Policy.',
},
{
question: 'How do I report abuse or a security issue?',
answer: (
<>
Email{' '}
<Anchor href="mailto:support@rosetta.im?subject=Rosetta%20Security%20Report">
Support@rosetta.im
</Anchor>{' '}
with a description of the concern. Do not include recovery phrases or private
keys.
</>
),
},
];
interface SupportSectionProps {
id: string;
title: string;
description: string;
items: Array<{ question: string; answer: ReactNode }>;
}
function SupportSection({ id, title, description, items }: SupportSectionProps) {
return (
<Box component="section" id={id} className={classes.section}>
<div>
<Title order={2} className={classes.sectionTitle}>
{title}
</Title>
<Text c="dimmed" mt="xs" lh={1.65}>
{description}
</Text>
</div>
<Accordion multiple variant="separated" radius="md">
{items.map(({ question, answer }) => (
<Accordion.Item key={question} value={question}>
<Accordion.Control>{question}</Accordion.Control>
<Accordion.Panel>
<Text c="dimmed" size="sm" lh={1.65}>
{answer}
</Text>
</Accordion.Panel>
</Accordion.Item>
))}
</Accordion>
</Box>
);
}
export function SupportPage() {
const [query, setQuery] = useState('');
const normalizedQuery = query.trim().toLowerCase();
const suggestions = useMemo(() => {
if (!normalizedQuery) {
return [];
}
const terms = normalizedQuery
.split(/\s+/)
.map((term) => term.replace(/[^a-z0-9-]/g, ''))
.filter((term) => term.length > 2);
return knownIssues
.map((issue) => {
const searchable = [issue.title, issue.summary, issue.solution, ...issue.keywords]
.join(' ')
.toLowerCase();
const score = terms.filter((term) => searchable.includes(term)).length;
return { issue, score };
})
.filter(({ score }) => score > 0)
.sort((left, right) => right.score - left.score)
.slice(0, 4);
}, [normalizedQuery]);
return (
<>
<SEO
title="Rosetta Support"
description="Contact Rosetta Support for help with account access, recovery phrases, messaging, media, privacy, and security."
description="Find known Rosetta issues or contact support for help with account access, messaging, media, privacy, and security."
canonical="https://rosetta.im/support/"
keywords="Rosetta support, account recovery, messaging help, privacy help"
keywords="Rosetta support, known issues, account recovery, messaging help"
/>
<LegalPage
eyebrow="Rosetta Support"
title="Help with your Rosetta account and messages."
>
<Stack gap="xl">
<div>
<Text className={classes.lead}>
Find answers about account access, recovery phrases, private messaging,
shared media, and privacy. For anything else, contact our support team.
</Text>
<Button
component="a"
href="mailto:support@rosetta.im?subject=Rosetta%20Support%20Request"
leftSection={<IconMail size={18} />}
variant="default"
mt="xl"
size="xl"
className={classes.primaryAction}
>
Email Rosetta Support
</Button>
</div>
<LegalPage eyebrow="Help centre" title="Support">
<Text className={classes.intro}>
Describe the problem in your own words. Rosetta will suggest a relevant known
issue while you type. The text is processed only in this page and is not sent
to the support service.
</Text>
<SimpleGrid cols={{ base: 1, sm: 3 }} spacing="md">
{TOPICS.map(({ href, icon: Icon, title, description }) => (
<Card
key={href}
component="a"
href={href}
withBorder
radius="md"
padding="lg"
className={classes.topic}
>
<ThemeIcon variant="light" radius="xl" size="lg">
<Icon size={18} />
</ThemeIcon>
<Text fw={600} mt="md">
{title}
<Box className={classes.searchArea}>
<Textarea
value={query}
onChange={(event) => setQuery(event.currentTarget.value)}
leftSection={<IconSearch size={18} />}
leftSectionProps={{ style: { alignItems: 'flex-start', paddingTop: 16 } }}
placeholder="For example: my attachment is still sending…"
aria-label="Describe your Rosetta problem"
minRows={6}
autosize
maxRows={10}
radius="sm"
className={classes.problemField}
/>
{normalizedQuery && (
<Paper withBorder radius="sm" className={classes.suggestions}>
<Text fw={700} size="xs" tt="uppercase" c="dimmed">
Suggested issues
</Text>
{suggestions.length > 0 ? (
<Stack gap={0} mt="xs">
{suggestions.map(({ issue }) => (
<Anchor
key={issue.id}
href={`#${issue.id}`}
className={classes.suggestion}
>
<Text fw={600} size="sm">
{issue.title}
</Text>
<Text c="dimmed" size="xs" mt={3}>
{issue.summary}
</Text>
</Anchor>
))}
</Stack>
) : (
<Text c="dimmed" size="sm" mt="xs">
No matching known issue. You can contact support below.
</Text>
<Text c="dimmed" size="sm" mt={6} lh={1.5}>
{description}
)}
</Paper>
)}
</Box>
<Box component="section" className={classes.issuesSection}>
<Title order={2}>Known issues</Title>
<Text c="dimmed" size="sm" mt="xs" lh={1.7}>
Common situations and the information needed to resolve them.
</Text>
<Box className={classes.issueList}>
{knownIssues.map((issue) => (
<Box component="article" id={issue.id} key={issue.id} className={classes.issue}>
<Title order={3}>{issue.title}</Title>
<Text c="dimmed" size="sm" mt={6} lh={1.7}>
{issue.summary}
</Text>
</Card>
<Text size="sm" mt="md" lh={1.75}>
{issue.solution}
</Text>
</Box>
))}
</SimpleGrid>
</Box>
</Box>
<SupportSection
id="account"
title="Account and access"
description="Rosetta accounts are accessed with a recovery phrase instead of a phone number. Keep your phrase private and stored somewhere safe."
items={ACCOUNT_FAQS}
/>
<SupportSection
id="messaging"
title="Messaging and media"
description="Rosetta supports private chats, groups, photos, videos, files, and voice messages. Attachment choices can vary depending on your device permissions and the selected item."
items={MESSAGING_FAQS}
/>
<SupportSection
id="privacy"
title="Privacy and safety"
description="Rosetta is designed for private communication. If you have a security concern or a question about data handling, contact us directly."
items={PRIVACY_FAQS}
/>
<Paper radius="lg" p="xl" className={classes.contact}>
<Group justify="space-between" align="center">
<div>
<Title order={2} className={classes.contactTitle}>
Need more help?
</Title>
<Text c="dimmed" mt="xs" className={classes.contactCopy}>
Send us your device model, app version, and a short explanation.
Never send a recovery phrase, private key, or private message
content.
</Text>
</div>
<Anchor
href="mailto:support@rosetta.im?subject=Rosetta%20Support%20Request"
fw={700}
>
Support@rosetta.im
</Anchor>
</Group>
</Paper>
</Stack>
<Box component="section" className={classes.contact}>
<Title order={2}>Contact support</Title>
<Text c="dimmed" size="sm" mt="xs" lh={1.7}>
Include your operating system, Rosetta version, approximate time of the
problem, and reproduction steps. Never send a recovery phrase or private
key.
</Text>
<Button
component="a"
href="mailto:support@rosetta.im?subject=Rosetta%20Support%20Request"
leftSection={<IconMail size={17} />}
variant="default"
mt="lg"
>
support@rosetta.im
</Button>
</Box>
</LegalPage>
</>
);