feat: add demo data for emails, files, filters, identities, mailboxes, vacation responses, and JMAP client interface
- Created demo emails with various states (inbox, sent, drafts, trash, etc.) in `emails.ts`. - Added demo file nodes representing directories and files in `files.ts`. - Implemented demo Sieve capabilities and scripts in `filters.ts`. - Defined demo identities for users in `identities.ts`. - Established demo mailboxes with permissions and counts in `mailboxes.ts`. - Created a demo vacation response in `vacation.ts`. - Introduced a comprehensive JMAP client interface in `client-interface.ts` to standardize interactions with the JMAP API.
This commit is contained in:
Linus Rath
@@ -303,6 +303,7 @@ export function NavigationRail({
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
onClick={activeAppId ? () => onCloseInlineApp?.() : undefined}
|
||||
data-tour={`nav-${item.id}`}
|
||||
className={cn(
|
||||
"relative flex items-center gap-2.5 rounded-md transition-colors duration-150",
|
||||
collapsed
|
||||
@@ -401,6 +402,7 @@ export function NavigationRail({
|
||||
<Link
|
||||
href="/settings"
|
||||
onClick={activeAppId ? () => onCloseInlineApp?.() : undefined}
|
||||
data-tour="nav-settings"
|
||||
className={cn(
|
||||
"flex items-center justify-center w-10 h-10 rounded-md transition-colors",
|
||||
isSettingsActive
|
||||
@@ -418,6 +420,7 @@ export function NavigationRail({
|
||||
{onShowShortcuts && (
|
||||
<button
|
||||
onClick={onShowShortcuts}
|
||||
data-tour="nav-shortcuts"
|
||||
className="flex items-center justify-center w-10 h-10 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
||||
title={t("keyboard_shortcuts")}
|
||||
>
|
||||
@@ -426,7 +429,9 @@ export function NavigationRail({
|
||||
)}
|
||||
|
||||
{quota && quota.total > 0 && (
|
||||
<StorageQuotaCircle quota={quota} usagePercent={quotaUsagePercent} />
|
||||
<div data-tour="storage-quota">
|
||||
<StorageQuotaCircle quota={quota} usagePercent={quotaUsagePercent} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isPushConnected != null && (
|
||||
|
||||
@@ -24,6 +24,10 @@ import {
|
||||
Settings,
|
||||
X,
|
||||
Tag,
|
||||
RotateCcw,
|
||||
FlaskConical,
|
||||
PlayCircle,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
|
||||
import { Mailbox } from "@/lib/jmap/types";
|
||||
@@ -40,6 +44,7 @@ import { debug } from "@/lib/debug";
|
||||
import { useConfig } from "@/hooks/use-config";
|
||||
import { useThemeStore } from "@/stores/theme-store";
|
||||
import { AccountSwitcher } from "./account-switcher";
|
||||
import { useTour } from "@/components/tour/tour-provider";
|
||||
|
||||
interface SidebarProps {
|
||||
mailboxes: Mailbox[];
|
||||
@@ -328,6 +333,68 @@ function TagItem({
|
||||
);
|
||||
}
|
||||
|
||||
function DemoBanner() {
|
||||
const t = useTranslations('sidebar');
|
||||
const { isDemoMode, loginDemo } = useAuthStore();
|
||||
const { startTour, resetTourCompletion } = useTour();
|
||||
const router = useRouter();
|
||||
const [isResetting, setIsResetting] = useState(false);
|
||||
|
||||
if (!isDemoMode) return null;
|
||||
|
||||
const handleReset = async () => {
|
||||
setIsResetting(true);
|
||||
// Navigate to home first so the mail page re-fetches data
|
||||
router.push('/');
|
||||
await loginDemo();
|
||||
setIsResetting(false);
|
||||
};
|
||||
|
||||
const handleStartTour = () => {
|
||||
resetTourCompletion();
|
||||
router.push('/');
|
||||
setTimeout(() => startTour(), 100);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tour="demo-banner"
|
||||
className={cn(
|
||||
"flex flex-col gap-1.5 w-full px-3 py-2 text-xs",
|
||||
"bg-primary/10 dark:bg-primary/10 text-primary",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<FlaskConical className="w-3.5 h-3.5 flex-shrink-0" />
|
||||
<span className="truncate font-medium">{t("demo_banner")}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
onClick={handleStartTour}
|
||||
className="flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-primary/10 hover:bg-primary/20 transition-colors"
|
||||
title={t("demo_tour")}
|
||||
>
|
||||
<PlayCircle className="w-3 h-3" />
|
||||
{t("demo_tour")}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleReset}
|
||||
disabled={isResetting}
|
||||
className="flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-primary/10 hover:bg-primary/20 transition-colors disabled:opacity-50"
|
||||
title={t("demo_reset")}
|
||||
>
|
||||
{isResetting ? (
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
) : (
|
||||
<RotateCcw className="w-3 h-3" />
|
||||
)}
|
||||
{t("demo_reset")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function VacationBanner() {
|
||||
const t = useTranslations('sidebar');
|
||||
const router = useRouter();
|
||||
@@ -491,11 +558,14 @@ export function Sidebar({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Demo Banner */}
|
||||
{!isCollapsed && <DemoBanner />}
|
||||
|
||||
{/* Vacation Banner */}
|
||||
{!isCollapsed && <VacationBanner />}
|
||||
|
||||
{/* Mailbox List */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="flex-1 overflow-y-auto" data-tour="sidebar">
|
||||
<div className="py-1">
|
||||
{mailboxes.length === 0 ? (
|
||||
<div className="px-4 py-2 text-sm text-muted-foreground">
|
||||
@@ -582,7 +652,7 @@ export function Sidebar({
|
||||
</div>
|
||||
|
||||
{((tagsExpanded && !isCollapsed) || isCollapsed) && (
|
||||
<div className="relative">
|
||||
<div className="relative" data-tour="keyword-tags">
|
||||
{emailKeywords.map((kw) => {
|
||||
const isSelected = selectedKeyword === kw.id;
|
||||
return (
|
||||
@@ -606,11 +676,11 @@ export function Sidebar({
|
||||
{/* Compose Button */}
|
||||
<div className={cn("border-t border-border", isCollapsed ? "flex justify-center py-3" : "px-3 py-3")}>
|
||||
{isCollapsed ? (
|
||||
<Button onClick={onCompose} variant="ghost" size="icon" title={t("compose_hint")}>
|
||||
<Button onClick={onCompose} variant="ghost" size="icon" title={t("compose_hint")} data-tour="compose-button">
|
||||
<PenSquare className="w-5 h-5" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={onCompose} className="w-full" title={t("compose_hint")}>
|
||||
<Button onClick={onCompose} className="w-full" title={t("compose_hint")} data-tour="compose-button">
|
||||
<PenSquare className="w-4 h-4 mr-2" />
|
||||
{t("compose")}
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user