diff --git a/apps/desktop/public/tutorial-1.gif b/apps/desktop/public/tutorial-1.gif new file mode 100644 index 00000000..a536c39b 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 00000000..16f74d34 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 00000000..37ba9f6e 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 fed5d928..9480eea6 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 b687cdda..b1770b06 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 00000000..a342dd34 --- /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 00000000..7a9320fa --- /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

+ tutorial-3 +
+
+ + Next + +
+
+ ); +} diff --git a/packages/ui/src/tutorial/modal.tsx b/packages/ui/src/tutorial/modal.tsx new file mode 100644 index 00000000..e43eec83 --- /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 00000000..7ec25920 --- /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

+ tutorial-2 +
+
+ + Next + +
+
+ ); +} diff --git a/packages/ui/src/tutorial/router.tsx b/packages/ui/src/tutorial/router.tsx new file mode 100644 index 00000000..33e05a55 --- /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 00000000..48d99ee1 --- /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.

+ tutorial-1 +
+
+ + Next + +
+
+ ); +} diff --git a/packages/utils/src/state.ts b/packages/utils/src/state.ts index f6722c69..e2c8c340 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 5b260b48..6118b902 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)