feat: add tutorial

apps/desktop/src/routes/home/index.tsx

@@ -6,13 +6,9 @@ import { Thread } from "@columns/thread";
 import { Timeline } from "@columns/timeline";
 import { User } from "@columns/user";
 import { useColumnContext } from "@lume/ark";
-import {
- ArrowLeftIcon,
- ArrowRightIcon,
- HelpIcon,
- PlusSquareIcon,
-} from "@lume/icons";
+import { ArrowLeftIcon, ArrowRightIcon, PlusSquareIcon } from "@lume/icons";
 import { IColumn } from "@lume/types";
+import { TutorialModal } from "@lume/ui/src/tutorial/modal";
 import { COL_TYPES } from "@lume/utils";
 import { useRef, useState } from "react";
 import { VList, VListHandle } from "virtua";
@@ -46,6 +42,7 @@ export function HomeScreen() {
  return (
  <div className="relative w-full h-full">
  <VList
+ id="timeline"
  ref={ref}
  className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
  itemSize={420}
@@ -85,7 +82,7 @@ export function HomeScreen() {
  <div className="w-[420px]" />
  </VList>
  <div className="absolute bottom-3 right-3">
- <div className="flex items-center gap-1 p-1 bg-black/50 dark:bg-white/30 backdrop-blur-xl rounded-xl">
+ <div className="flex items-center gap-1 p-1 bg-black/30 dark:bg-white/30 backdrop-blur-xl rounded-xl">
  <button
  type="button"
  onClick={() => {
@@ -96,7 +93,7 @@ export function HomeScreen() {
  smooth: true,
  });
  }}
- className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
+ className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
  >
  <ArrowLeftIcon className="size-5" />
  </button>
@@ -110,7 +107,7 @@ export function HomeScreen() {
  smooth: true,
  });
  }}
- className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
+ className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
  >
  <ArrowRightIcon className="size-5" />
  </button>
@@ -123,17 +120,12 @@ export function HomeScreen() {
  content: "",
  })
  }
- className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
+ className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
  >
  <PlusSquareIcon className="size-5" />
  </button>
  <div className="w-px h-6 bg-white/10" />
- <button
- type="button"
- className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
- >
- <HelpIcon className="size-5" />
- </button>
+ <TutorialModal />
  </div>
  </div>
  </div>

packages/ui/package.json

@@ -16,6 +16,7 @@
  "@radix-ui/react-dialog": "^1.0.5",
  "@radix-ui/react-dropdown-menu": "^2.0.6",
  "@radix-ui/react-hover-card": "^1.0.7",
+ "@radix-ui/react-popover": "^1.0.7",
  "@tanstack/react-query": "^5.17.9",
  "@tauri-apps/api": "2.0.0-alpha.13",
  "@tauri-apps/plugin-http": "2.0.0-alpha.6",

packages/ui/src/tutorial/finish.tsx

@@ -0,0 +1,35 @@
+import { tutorialAtom } from "@lume/utils";
+import { useSetAtom } from "jotai";
+
+export function TutorialFinishScreen() {
+ const tutorial = useSetAtom(tutorialAtom);
+
+ return (
+ <div className="px-5 h-full flex flex-col justify-between">
+ <div className="h-full min-h-0 flex flex-col gap-2">
+ <p>
+ <span className="font-semibold">Great Job!</span> You have completed
+ this section. Feel free to explore other menus in the interface, such
+ as Activity and Relay Explorer.
+ </p>
+ <p>
+ If you want to see this tutorial again, don't hesitate to press the ?
+ icon in Bottom bar
+ </p>
+ <p>
+ If you want to seek help from Lume Devs, you can publish a post with{" "}
+ <span className="text-blue-500">#lumesos</span>
+ </p>
+ </div>
+ <div className="h-16 w-full shrink-0 flex items-center justify-end">
+ <button
+ type="button"
+ onClick={() => tutorial(false)}
+ className="inline-flex items-center justify-center w-20 font-semibold border-t rounded-lg border-neutral-900 dark:border-neutral-800 h-9 bg-neutral-950 text-neutral-50 dark:bg-neutral-900 hover:bg-neutral-900 dark:hover:bg-neutral-800"
+ >
+ Finish
+ </button>
+ </div>
+ </div>
+ );
+}

packages/ui/src/tutorial/manageColumn.tsx

@@ -0,0 +1,31 @@
+import { Link } from "react-router-dom";
+
+export function TutorialManageColumnScreen() {
+ return (
+ <div className="px-5 h-full flex flex-col justify-between">
+ <div className="h-full min-h-0 flex flex-col gap-2">
+ <p>
+ Lume is also provide simple way to customize column after creation.
+ </p>
+ <p>
+ <span className="font-semibold">To customize each column,</span> you
+ can go to header of each column
+ </p>
+ <p>Click to "Three Dots" icon</p>
+ <img
+ src="/tutorial-3.gif"
+ alt="tutorial-3"
+ className="w-full h-auto rounded-lg"
+ />
+ </div>
+ <div className="h-16 w-full shrink-0 flex items-center justify-end">
+ <Link
+ to="/finish"
+ className="inline-flex items-center justify-center w-20 font-semibold border-t rounded-lg border-neutral-900 dark:border-neutral-800 h-9 bg-neutral-950 text-neutral-50 dark:bg-neutral-900 hover:bg-neutral-900 dark:hover:bg-neutral-800"
+ >
+ Next
+ </Link>
+ </div>
+ </div>
+ );
+}

packages/ui/src/tutorial/modal.tsx

@@ -0,0 +1,38 @@
+import { CancelIcon, HelpIcon } from "@lume/icons";
+import { tutorialAtom } from "@lume/utils";
+import * as Popover from "@radix-ui/react-popover";
+import { useAtom } from "jotai";
+import { TutorialRouter } from "./router";
+
+export function TutorialModal() {
+ const [tutorial, setTutorial] = useAtom(tutorialAtom);
+
+ return (
+ <Popover.Root open={tutorial}>
+ <Popover.Trigger asChild>
+ <button
+ type="button"
+ onClick={() => setTutorial((state) => !state)}
+ className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
+ >
+ <HelpIcon className="size-5" />
+ </button>
+ </Popover.Trigger>
+ <Popover.Portal>
+ <Popover.Content className="relative right-4 bottom-8">
+ <div className="flex flex-col w-full max-w-xs bg-white h-[480px] rounded-xl dark:bg-neutral-950 dark:border dark:border-neutral-900 overflow-hidden shadow-[0_8px_30px_rgb(0,0,0,0.12)]">
+ <div className="pt-5 mb-3 shrink-0 flex px-5 items-center justify-between text-neutral-500 dark:text-neutral-400">
+ <h3 className="text-sm font-medium">Tutorial</h3>
+ <Popover.Close onClick={() => setTutorial(false)}>
+ <CancelIcon className="size-4" />
+ </Popover.Close>
+ </div>
+ <div className="min-h-0 flex-1 h-full">
+ <TutorialRouter />
+ </div>
+ </div>
+ </Popover.Content>
+ </Popover.Portal>
+ </Popover.Root>
+ );
+}

packages/ui/src/tutorial/newColumn.tsx

@@ -0,0 +1,29 @@
+import { Link } from "react-router-dom";
+
+export function TutorialNewColumnScreen() {
+ return (
+ <div className="px-5 h-full flex flex-col justify-between">
+ <div className="h-full min-h-0 flex flex-col gap-2">
+ <p>Lume is column based, each column is each experience</p>
+ <p>
+ <span className="font-semibold">To create new column,</span> you can
+ look into bottom right part of screen
+ </p>
+ <p>Click to "Plus" icon</p>
+ <img
+ src="/tutorial-2.gif"
+ alt="tutorial-2"
+ className="w-full h-auto rounded-lg"
+ />
+ </div>
+ <div className="h-16 w-full shrink-0 flex items-center justify-end">
+ <Link
+ to="/manage-column"
+ className="inline-flex items-center justify-center w-20 font-semibold border-t rounded-lg border-neutral-900 dark:border-neutral-800 h-9 bg-neutral-950 text-neutral-50 dark:bg-neutral-900 hover:bg-neutral-900 dark:hover:bg-neutral-800"
+ >
+ Next
+ </Link>
+ </div>
+ </div>
+ );
+}

packages/ui/src/tutorial/router.tsx

@@ -0,0 +1,31 @@
+import { AnimatePresence } from "framer-motion";
+import {
+ MemoryRouter,
+ Route,
+ Routes,
+ UNSAFE_LocationContext,
+} from "react-router-dom";
+import { TutorialFinishScreen } from "./finish";
+import { TutorialManageColumnScreen } from "./manageColumn";
+import { TutorialNewColumnScreen } from "./newColumn";
+import { TutorialWelcomeScreen } from "./welcome";
+
+export function TutorialRouter() {
+ return (
+ <UNSAFE_LocationContext.Provider value={null}>
+ <MemoryRouter future={{ v7_startTransition: true }}>
+ <AnimatePresence>
+ <Routes>
+ <Route path="/" element={<TutorialWelcomeScreen />} />
+ <Route path="/new-column" element={<TutorialNewColumnScreen />} />
+ <Route
+ path="/manage-column"
+ element={<TutorialManageColumnScreen />}
+ />
+ <Route path="/finish" element={<TutorialFinishScreen />} />
+ </Routes>
+ </AnimatePresence>
+ </MemoryRouter>
+ </UNSAFE_LocationContext.Provider>
+ );
+}

packages/ui/src/tutorial/welcome.tsx

@@ -0,0 +1,30 @@
+import { Link } from "react-router-dom";
+
+export function TutorialWelcomeScreen() {
+ return (
+ <div className="px-5 h-full flex flex-col justify-between">
+ <div className="h-full min-h-0 flex flex-col gap-2">
+ <p>
+ <span className="font-semibold">Welcome to your Home Screen.</span>{" "}
+ This is your personalized screen, which you can customize to you
+ liking
+ </p>
+ <p>Feel free to make adjustments as needed.</p>
+ <p>Let's take a few minutes to explore the features together.</p>
+ <img
+ src="/tutorial-1.gif"
+ alt="tutorial-1"
+ className="w-full h-auto rounded-lg"
+ />
+ </div>
+ <div className="h-16 w-full shrink-0 flex items-center justify-end">
+ <Link
+ to="/new-column"
+ className="inline-flex items-center justify-center w-20 font-semibold border-t rounded-lg border-neutral-900 dark:border-neutral-800 h-9 bg-neutral-950 text-neutral-50 dark:bg-neutral-900 hover:bg-neutral-900 dark:hover:bg-neutral-800"
+ >
+ Next
+ </Link>
+ </div>
+ </div>
+ );
+}

packages/utils/src/state.ts

@@ -15,3 +15,6 @@ export const onboardingAtom = atom(false);
 // Activity
 export const activityAtom = atom(false);
 export const activityUnreadAtom = atom(0);
+
+// Tutorial
+export const tutorialAtom = atom(true);