diff --git a/apps/desktop/public/tutorial-1.gif b/apps/desktop/public/tutorial-1.gif
new file mode 100644
index 000000000..a536c39b3
Binary files /dev/null and b/apps/desktop/public/tutorial-1.gif differ
diff --git a/apps/desktop/public/tutorial-2.gif b/apps/desktop/public/tutorial-2.gif
new file mode 100644
index 000000000..16f74d342
Binary files /dev/null and b/apps/desktop/public/tutorial-2.gif differ
diff --git a/apps/desktop/public/tutorial-3.gif b/apps/desktop/public/tutorial-3.gif
new file mode 100644
index 000000000..37ba9f6e0
Binary files /dev/null and b/apps/desktop/public/tutorial-3.gif differ
diff --git a/apps/desktop/src/routes/home/index.tsx b/apps/desktop/src/routes/home/index.tsx
index fed5d928e..9480eea69 100644
--- a/apps/desktop/src/routes/home/index.tsx
+++ b/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 (
-
+
@@ -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"
>
@@ -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"
>
-
+
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b687cddad..b1770b06b 100644
--- a/packages/ui/package.json
+++ b/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",
diff --git a/packages/ui/src/tutorial/finish.tsx b/packages/ui/src/tutorial/finish.tsx
new file mode 100644
index 000000000..a342dd34a
--- /dev/null
+++ b/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 (
+
+
+
+ Great Job! You have completed
+ this section. Feel free to explore other menus in the interface, such
+ as Activity and Relay Explorer.
+
+
+ If you want to see this tutorial again, don't hesitate to press the ?
+ icon in Bottom bar
+
+
+ If you want to seek help from Lume Devs, you can publish a post with{" "}
+ #lumesos
+
+
+
+
+
+
+ );
+}
diff --git a/packages/ui/src/tutorial/manageColumn.tsx b/packages/ui/src/tutorial/manageColumn.tsx
new file mode 100644
index 000000000..7a9320faf
--- /dev/null
+++ b/packages/ui/src/tutorial/manageColumn.tsx
@@ -0,0 +1,31 @@
+import { Link } from "react-router-dom";
+
+export function TutorialManageColumnScreen() {
+ return (
+
+
+
+ Lume is also provide simple way to customize column after creation.
+
+
+ To customize each column, you
+ can go to header of each column
+
+
Click to "Three Dots" icon
+
+
+
+
+ Next
+
+
+
+ );
+}
diff --git a/packages/ui/src/tutorial/modal.tsx b/packages/ui/src/tutorial/modal.tsx
new file mode 100644
index 000000000..e43eec83e
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
Tutorial
+
setTutorial(false)}>
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/ui/src/tutorial/newColumn.tsx b/packages/ui/src/tutorial/newColumn.tsx
new file mode 100644
index 000000000..7ec25920f
--- /dev/null
+++ b/packages/ui/src/tutorial/newColumn.tsx
@@ -0,0 +1,29 @@
+import { Link } from "react-router-dom";
+
+export function TutorialNewColumnScreen() {
+ return (
+
+
+
Lume is column based, each column is each experience
+
+ To create new column, you can
+ look into bottom right part of screen
+
+
Click to "Plus" icon
+
+
+
+
+ Next
+
+
+
+ );
+}
diff --git a/packages/ui/src/tutorial/router.tsx b/packages/ui/src/tutorial/router.tsx
new file mode 100644
index 000000000..33e05a55e
--- /dev/null
+++ b/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 (
+
+
+
+
+ } />
+ } />
+ }
+ />
+ } />
+
+
+
+
+ );
+}
diff --git a/packages/ui/src/tutorial/welcome.tsx b/packages/ui/src/tutorial/welcome.tsx
new file mode 100644
index 000000000..48d99ee1b
--- /dev/null
+++ b/packages/ui/src/tutorial/welcome.tsx
@@ -0,0 +1,30 @@
+import { Link } from "react-router-dom";
+
+export function TutorialWelcomeScreen() {
+ return (
+
+
+
+ Welcome to your Home Screen.{" "}
+ This is your personalized screen, which you can customize to you
+ liking
+
+
Feel free to make adjustments as needed.
+
Let's take a few minutes to explore the features together.
+
+
+
+
+ Next
+
+
+
+ );
+}
diff --git a/packages/utils/src/state.ts b/packages/utils/src/state.ts
index f6722c699..e2c8c3400 100644
--- a/packages/utils/src/state.ts
+++ b/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);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b260b48e..6118b9020 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -965,6 +965,9 @@ importers:
'@radix-ui/react-hover-card':
specifier: ^1.0.7
version: 1.0.7(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-popover':
+ specifier: ^1.0.7
+ version: 1.0.7(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
'@tanstack/react-query':
specifier: ^5.17.9
version: 5.17.9(react@18.2.0)