-
+
+
+
+
{(t.app("new_user_guide.ai_chat.intro") as string).split("\n").map((line) => (
{line}
@@ -219,7 +208,7 @@ function Welcome({ onSuggestionClick }: WelcomeProps) {
+
{t.app("new_user_guide.ai_chat.you_can_say")}
@@ -237,7 +226,7 @@ function Welcome({ onSuggestionClick }: WelcomeProps) {
onClickSuggestion(suggestionText)}
- animationDelay={index * 0.05}
+ animationDelay={index * 0.05 + 0.2}
className="font-normal text-text"
style={{ background: gradient }}
>
@@ -249,11 +238,11 @@ function Welcome({ onSuggestionClick }: WelcomeProps) {
-
+
)
}
-// if the chat response has `tool-onboardingGetTrendingFeedsTool`, set the step to pre-finish
+// if the chat response has `tool-onboardingGetTrendingFeedsTool`, mark the flow as finished
function FinishListener() {
const chatMessages = useMessages()
const setStep = useSetAtom(stepAtom)
@@ -262,7 +251,7 @@ function FinishListener() {
msg.parts.some((p) => p.type === "tool-onboardingGetTrendingFeeds"),
)
if (hasCalledConfirmTool) {
- setStep("pre-finish")
+ setStep("finish")
}
}, [chatMessages, setStep])
@@ -521,8 +510,8 @@ function AIChatInterface({ inputRef }: AIChatInterfaceProps) {
status === "ready" &&
hasFeedsSelection && (
- setStep("pre-finish")}>
- {t.app("new_user_guide.actions.next")}
+ setStep("finish")}>
+ {t.app("new_user_guide.actions.finish")}
)}
diff --git a/apps/desktop/layer/renderer/src/modules/new-user-guide/guide-modal-content.tsx b/apps/desktop/layer/renderer/src/modules/ai-onboarding/ai-onboarding-modal-content.tsx
similarity index 52%
rename from apps/desktop/layer/renderer/src/modules/new-user-guide/guide-modal-content.tsx
rename to apps/desktop/layer/renderer/src/modules/ai-onboarding/ai-onboarding-modal-content.tsx
index 1e597de5b..bd36e7b13 100644
--- a/apps/desktop/layer/renderer/src/modules/new-user-guide/guide-modal-content.tsx
+++ b/apps/desktop/layer/renderer/src/modules/ai-onboarding/ai-onboarding-modal-content.tsx
@@ -6,24 +6,21 @@ import { AIChatRoot } from "~/modules/ai-chat/components/layouts/AIChatRoot"
import { settingSyncQueue } from "../settings/helper/sync-queue"
import { AIChatPane } from "./ai-chat-pane"
-import { DiscoverImportStep } from "./discover-import-step"
import { FeedsSelectionList } from "./feeds-selection-list"
import { stepAtom } from "./store"
-export function GuideModalContent({ onClose }: { onClose: () => void }) {
+export function AiOnboardingModalContent({ onClose }: { onClose: () => void }) {
const step = useAtomValue(stepAtom)
useEffect(() => {
tracker.onBoarding({
stepV2: step,
- done: step === "finish" || step === "manual-import-finish" || step === "skip-finish",
+ done: step === "finish",
})
}, [step])
useEffect(() => {
- if (step !== "finish" && step !== "manual-import-finish") {
- return
- }
+ if (step !== "finish") return
const syncSettings = async () => {
try {
@@ -37,7 +34,7 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
}, [step])
useEffect(() => {
- if (step === "finish" || step === "manual-import-finish" || step === "skip-finish") {
+ if (step === "finish") {
onClose()
}
}, [onClose, step])
@@ -47,25 +44,29 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
case "intro":
case "selecting-feeds": {
return (
-
-
-
+
+ {/* Left side - Feed Selection (45% width on large screens) */}
+
+
+
+ {/* Gradient divider */}
+
+
+ {/* Right side - AI Chat (55% width on large screens) */}
+
)
}
- case "manual-import": {
- return
- }
- case "pre-finish":
- case "manual-import-pre-finish":
- case "skip-pre-finish": {
- return null
- }
- case "finish":
- case "manual-import-finish":
- case "skip-finish": {
- return null
- }
+
default: {
return null
}
@@ -76,8 +77,8 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
return (
-
-
{content}
+
+ {content}
)
diff --git a/apps/desktop/layer/renderer/src/modules/new-user-guide/feeds-selection-list.tsx b/apps/desktop/layer/renderer/src/modules/ai-onboarding/feeds-selection-list.tsx
similarity index 88%
rename from apps/desktop/layer/renderer/src/modules/new-user-guide/feeds-selection-list.tsx
rename to apps/desktop/layer/renderer/src/modules/ai-onboarding/feeds-selection-list.tsx
index 13587538f..4ed2eaf35 100644
--- a/apps/desktop/layer/renderer/src/modules/new-user-guide/feeds-selection-list.tsx
+++ b/apps/desktop/layer/renderer/src/modules/ai-onboarding/feeds-selection-list.tsx
@@ -39,7 +39,7 @@ export function FeedsSelectionList() {
}, [hasFeedsSelection, setStep])
return (
-
+
{hasFeedsSelection ?
@@ -49,6 +49,7 @@ export function FeedsSelectionList() {
function FeedSelectionOperationScreen() {
const chatMessages = useMessages()
+ const t = useI18n()
const feedsToSelect: FeedToSelect[] = useMemo(() => {
// find the last message that has the tool
@@ -100,6 +101,21 @@ function FeedSelectionOperationScreen() {
[selectedAtoms, store],
)
+ if (items.length === 0) {
+ return (
+
+
+
+
+ {t.app("new_user_guide.selection.empty_title")}
+
+
+ {t.app("new_user_guide.selection.empty_description")}
+
+
+ )
+ }
+
return (
@@ -187,11 +203,11 @@ function FeedSelectionFirstScreen() {
return (
{/* Grid background - consistent with app patterns */}
@@ -203,7 +219,7 @@ function FeedSelectionFirstScreen() {
@@ -215,7 +231,7 @@ function FeedSelectionFirstScreen() {
@@ -227,8 +243,8 @@ function FeedSelectionFirstScreen() {
{t.app("new_user_guide.intro.description")}
diff --git a/apps/desktop/layer/renderer/src/modules/ai-onboarding/modal.tsx b/apps/desktop/layer/renderer/src/modules/ai-onboarding/modal.tsx
new file mode 100644
index 000000000..abba2d6ce
--- /dev/null
+++ b/apps/desktop/layer/renderer/src/modules/ai-onboarding/modal.tsx
@@ -0,0 +1,45 @@
+import { Spring } from "@follow/components/constants/spring.js"
+import { RootPortal } from "@follow/components/ui/portal/index.jsx"
+import { m } from "motion/react"
+import type { PropsWithChildren } from "react"
+import { useState } from "react"
+
+import { DeclarativeModal } from "~/components/ui/modal/stacked/declarative-modal"
+
+import { AiOnboardingModalContent } from "./ai-onboarding-modal-content"
+
+const Modal = ({ children }: PropsWithChildren) => {
+ return (
+
+ )
+}
+
+export const AiOnboardingModal = () => {
+ const [open, setOpen] = useState(true)
+ return (
+
+
+ setOpen(false)} />
+
+
+ )
+}
diff --git a/apps/desktop/layer/renderer/src/modules/new-user-guide/store.ts b/apps/desktop/layer/renderer/src/modules/ai-onboarding/store.ts
similarity index 78%
rename from apps/desktop/layer/renderer/src/modules/new-user-guide/store.ts
rename to apps/desktop/layer/renderer/src/modules/ai-onboarding/store.ts
index 3f68a6465..59fd2eac6 100644
--- a/apps/desktop/layer/renderer/src/modules/new-user-guide/store.ts
+++ b/apps/desktop/layer/renderer/src/modules/ai-onboarding/store.ts
@@ -3,17 +3,7 @@ import type { FeedViewType } from "@follow-app/client-sdk"
import { atom } from "jotai"
import { splitAtom } from "jotai/utils"
-export const stepAtom = atom<
- | "intro"
- | "selecting-feeds"
- | "pre-finish"
- | "finish"
- | "skip-pre-finish"
- | "skip-finish"
- | "manual-import"
- | "manual-import-pre-finish"
- | "manual-import-finish"
->("intro")
+export const stepAtom = atom<"intro" | "selecting-feeds" | "finish">("intro")
export type FeedSelection = {
description: string | null
diff --git a/apps/desktop/layer/renderer/src/modules/app-layout/MainDestopLayout.tsx b/apps/desktop/layer/renderer/src/modules/app-layout/MainDestopLayout.tsx
index c00b412e8..c44f1daaf 100644
--- a/apps/desktop/layer/renderer/src/modules/app-layout/MainDestopLayout.tsx
+++ b/apps/desktop/layer/renderer/src/modules/app-layout/MainDestopLayout.tsx
@@ -16,6 +16,7 @@ import { PlainModal } from "~/components/ui/modal/stacked/custom-modal"
import { DeclarativeModal } from "~/components/ui/modal/stacked/declarative-modal"
import { ROOT_CONTAINER_ID } from "~/constants/dom"
import { EnvironmentIndicator } from "~/modules/app/EnvironmentIndicator"
+import { APP_TIP_DEBUG_EVENT, AppTip } from "~/modules/app-tip"
import { LoginModalContent } from "~/modules/auth/LoginModalContent"
import { DebugRegistry } from "~/modules/debug/registry"
import { EntriesProvider } from "~/modules/entry-column/context/EntriesContext"
@@ -24,7 +25,6 @@ import { SearchCmdK } from "~/modules/panel/cmdk"
import { CmdNTrigger } from "~/modules/panel/cmdn"
import { AppNotificationContainer } from "~/modules/upgrade/lazy/index"
-import { NewUserGuide } from "./subscription-column/components/NewUserGuide"
import { SubscriptionColumnContainer } from "./subscription-column/SubscriptionColumn"
const errorTypes = [
@@ -166,7 +166,7 @@ export function MainDestopLayout() {
-
@@ -233,12 +233,20 @@ const RootContainer = ({
)
}
-DebugRegistry.add("New User Guide", () => {
- import("~/modules/new-user-guide/guide-modal-content").then((m) => {
+DebugRegistry.add("App Tip Dialog", () => {
+ window.dispatchEvent(
+ new CustomEvent(APP_TIP_DEBUG_EVENT, {
+ detail: { step: 0 },
+ }),
+ )
+})
+
+DebugRegistry.add("AI Onboarding", () => {
+ import("~/modules/ai-onboarding/ai-onboarding-modal-content").then((m) => {
window.presentModal({
- title: "New User Guide",
+ title: "AI Onboarding",
content: ({ dismiss }) => (
- {
dismiss()
}}
diff --git a/apps/desktop/layer/renderer/src/modules/app-layout/subscription-column/components/NewUserGuide.tsx b/apps/desktop/layer/renderer/src/modules/app-layout/subscription-column/components/NewUserGuide.tsx
deleted file mode 100644
index 8414f96ce..000000000
--- a/apps/desktop/layer/renderer/src/modules/app-layout/subscription-column/components/NewUserGuide.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useWhoami } from "@follow/store/user/hooks"
-import { lazy, Suspense } from "react"
-
-import { useAuthQuery } from "~/hooks/common/useBizQuery"
-import { settings } from "~/queries/settings"
-
-const LazyNewUserGuideModal = lazy(() =>
- import("~/modules/new-user-guide/modal").then((m) => ({ default: m.NewUserGuideModal })),
-)
-
-export function NewUserGuide() {
- const user = useWhoami()
- const { data: remoteSettings, isLoading } = useAuthQuery(settings.get(), {})
- const isNewUser =
- !isLoading && remoteSettings && Object.keys(remoteSettings.updated ?? {}).length === 0
-
- return user && isNewUser ? (
-
-
- ) : null
-}
diff --git a/apps/desktop/layer/renderer/src/modules/app-tip/AICopilotMedia.tsx b/apps/desktop/layer/renderer/src/modules/app-tip/AICopilotMedia.tsx
new file mode 100644
index 000000000..5d51e39e6
--- /dev/null
+++ b/apps/desktop/layer/renderer/src/modules/app-tip/AICopilotMedia.tsx
@@ -0,0 +1,340 @@
+import { Spring } from "@follow/components/constants/spring.js"
+import { Folo } from "@follow/components/icons/folo.js"
+import { getEditorStateJSONString } from "@follow/components/ui/lexical-rich-editor/utils.js"
+import { ScrollArea } from "@follow/components/ui/scroll-area/ScrollArea.js"
+import { cn } from "@follow/utils"
+import { m } from "motion/react"
+import * as React from "react"
+
+import { AISpline } from "~/modules/ai-chat/components/3d-models/AISpline"
+import { AIMarkdownStreamingMessage } from "~/modules/ai-chat/components/message/AIMarkdownMessage"
+import { UserMessageParts } from "~/modules/ai-chat/components/message/UserMessageParts"
+import type { BizUIMessage } from "~/modules/ai-chat/store/types"
+
+type PreviewMessage = {
+ id: string
+ role: "user" | "assistant"
+ text: string
+}
+
+const buildUserBizMessage = (id: string, text: string): BizUIMessage => {
+ return {
+ id,
+ role: "user",
+ parts: [
+ {
+ type: "data-rich-text",
+ data: {
+ state: getEditorStateJSONString(text),
+ text,
+ },
+ },
+ ],
+ createdAt: new Date(),
+ }
+}
+
+const chatScript: PreviewMessage[] = [
+ {
+ id: "m1",
+ role: "user",
+ text: "Help me follow the latest AI trends for frontend.",
+ },
+ {
+ id: "m2",
+ role: "assistant",
+ text:
+ "Sure — here are key updates this week:\n\n" +
+ "- React 19 RC brings Actions and built-in async APIs.\n" +
+ "- Vite 6 improves SSR and dev server performance.\n" +
+ "- AI tooling: better model routers and eval kits.\n",
+ },
+ {
+ id: "m3",
+ role: "user",
+ text: "Great. Recommend some feeds to follow?",
+ },
+ {
+ id: "m4",
+ role: "assistant",
+ text:
+ "Absolutely — I’ve picked a few high-signal sources for you. " +
+ "You can follow them in one click below.",
+ },
+]
+
+export const AICopilotMedia: React.FC = () => {
+ const [visibleCount, setVisibleCount] = React.useState(0)
+ const [showRecommendations, setShowRecommendations] = React.useState(false)
+
+ React.useEffect(() => {
+ let disposed = false
+ const stepDelays = [0, 900, 1600, 2400] // stagger message reveals
+ const timers: number[] = []
+
+ const start = () => {
+ setVisibleCount(0)
+ setShowRecommendations(false)
+ for (let i = 0; i < chatScript.length; i++) {
+ timers.push(
+ window.setTimeout(() => {
+ if (disposed) return
+ setVisibleCount((v) => Math.min(v + 1, chatScript.length))
+ }, stepDelays[i]),
+ )
+ }
+ // Show recommendations after last message
+ const lastMessageDelay = stepDelays[chatScript.length - 1] || 2400
+ timers.push(
+ window.setTimeout(() => {
+ if (disposed) return
+ setShowRecommendations(true)
+ }, lastMessageDelay + 800),
+ )
+ }
+
+ start()
+ return () => {
+ disposed = true
+ for (const t of timers) {
+ clearTimeout(t)
+ }
+ }
+ }, [])
+
+ const messagesToRender = chatScript.slice(0, visibleCount)
+ const lastVisible = messagesToRender.at(-1)
+
+ return (
+
+
+
+
+
+
+ )
+}
+
+const Header: React.FC = () => {
+ return (
+
+
+
+ {/* AI Icon with glow effect */}
+
+
+
+ {/* Text content */}
+
+
+ AI
+
+
+ Summarize, search, and curate for you
+
+
+
+
+ )
+}
+
+const ChatPreview: React.FC<{
+ messages: PreviewMessage[]
+ streamingId?: string
+ showRecommendations?: boolean
+}> = ({ messages, streamingId, showRecommendations }) => {
+ const feeds = React.useMemo(
+ () => [
+ {
+ id: "vercel-blog",
+ type: "feed" as const,
+ title: "Vercel Blog",
+ url: "https://vercel.com/blog",
+ siteUrl: "https://vercel.com",
+ description: "Frontend, AI, and infra updates.",
+ },
+ {
+ id: "react",
+ type: "feed" as const,
+ title: "React",
+ url: "https://react.dev/blog",
+ siteUrl: "https://react.dev",
+ description: "Official updates and releases.",
+ },
+ {
+ id: "ai-engineering",
+ type: "feed" as const,
+ title: "AI Engineering",
+ url: "https://aie.sh",
+ siteUrl: "https://aie.sh",
+ description: "Practical AI for builders.",
+ },
+ ],
+ [],
+ )
+
+ return (
+
+
+
+ {messages.map((message, index) => {
+ const isUser = message.role === "user"
+ const delay = index * 0.1
+
+ return (
+
+
+ {/* Message bubble */}
+
+
+ {isUser ? (
+
+ ) : (
+ <>
+
+
+ )}
+
+
+ )
+ })}
+
+ {/* Recommendations section - appears after conversation */}
+ {showRecommendations && (
+
+ {/* AI Avatar + Recommendation Card Container */}
+
+ {/* Recommendation Cards */}
+
+ {/* Header */}
+
+
+
+
+ Recommended Feeds
+
+
+
+ {/* Feed cards */}
+
+ {feeds.map((feed, index) => (
+
+ {/* Icon with gradient background */}
+
+
+
+
+
+ {/* Feed title */}
+
+ {feed.title}
+
+ {/* Feed description */}
+
+ {feed.description}
+
+ {/* URL hint */}
+
+ {feed.siteUrl}
+
+
+
+ ))}
+
+
+
+ )}
+
+
+
setActiveStep(idx)}
+ onDismiss={handleDismiss}
+ hasNextStep={activeStepIndex < steps.length - 1}
+ />
+
+ {showAiGuide && (
+
+
+ )}
+
+ )
+}
diff --git a/apps/desktop/layer/renderer/src/modules/app-tip/AppTipDialog.tsx b/apps/desktop/layer/renderer/src/modules/app-tip/AppTipDialog.tsx
new file mode 100644
index 000000000..e18616921
--- /dev/null
+++ b/apps/desktop/layer/renderer/src/modules/app-tip/AppTipDialog.tsx
@@ -0,0 +1,135 @@
+import { Button } from "@follow/components/ui/button/index.js"
+import { cn } from "@follow/utils/utils"
+import { useTranslation } from "react-i18next"
+
+import { GlassButton } from "~/components/ui/button/GlassButton"
+import { PlainWithAnimationModal } from "~/components/ui/modal/stacked/custom-modal"
+import { DeclarativeModal } from "~/components/ui/modal/stacked/declarative-modal"
+
+import { AppTipMediaPreview } from "./AppTipMediaPreview"
+import type { AppTipStep } from "./types"
+
+type AppTipDialogProps = {
+ hasNextStep: boolean
+ steps: AppTipStep[]
+ activeStep: AppTipStep
+ activeStepIndex: number
+ onSelectStep: (index: number) => void
+ onDismiss: () => void
+ open: boolean
+}
+
+export function AppTipDialog({
+ steps,
+ activeStep,
+ activeStepIndex,
+ onSelectStep,
+ onDismiss,
+ open,
+ hasNextStep,
+}: AppTipDialogProps) {
+ const { t } = useTranslation()
+
+ const handleNextStep = () => {
+ if (hasNextStep) {
+ onSelectStep(activeStepIndex + 1)
+ } else {
+ onDismiss()
+ }
+ }
+
+ return (
+
+
+
+ {activeStep.media?.reactNode ? (
+
+ {activeStep.media?.reactNode}
+
+ ) : (
+
+ )}
+
+
+
+
+
+
{activeStep.title}
+
+ {activeStep.description}
+
+
+
+
+ {activeStep.highlights.map((point, idx) => (
+
+ {point}
+
+ ))}
+
+
+ {activeStep.extra}
+
+
+
+
+
+ {steps.map((step, idx) => (
+ onSelectStep(idx)}
+ aria-label={step.title}
+ aria-current={idx === activeStepIndex}
+ className={cn(
+ "size-2 cursor-pointer rounded-full transition-colors",
+ idx === activeStepIndex
+ ? "bg-text"
+ : "bg-fill-tertiary hover:bg-fill-secondary",
+ )}
+ />
+ ))}
+
+
+
+
+ {activeStep.primaryActionLabel}
+
+
+
+ {hasNextStep
+ ? t("words.next", { ns: "common" })
+ : t("new_user_dialog.actions.finish")}
+
+
+
+
+
+
+ )
+}
diff --git a/apps/desktop/layer/renderer/src/modules/app-tip/AppTipMediaPreview.tsx b/apps/desktop/layer/renderer/src/modules/app-tip/AppTipMediaPreview.tsx
new file mode 100644
index 000000000..334341df9
--- /dev/null
+++ b/apps/desktop/layer/renderer/src/modules/app-tip/AppTipMediaPreview.tsx
@@ -0,0 +1,104 @@
+import { Spring } from "@follow/components/constants/spring.js"
+import { AnimatePresence, m } from "motion/react"
+import { useEffect, useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
+
+import type { AppTipStepMedia } from "./types"
+
+type AppTipMediaPreviewProps = {
+ media?: AppTipStepMedia
+}
+
+export function AppTipMediaPreview({ media }: AppTipMediaPreviewProps) {
+ const [hasError, setHasError] = useState(false)
+ const [showReplay, setShowReplay] = useState(false)
+ const videoRef = useRef(null)
+ const { t } = useTranslation()
+ const mediaKind = media?.kind ?? "video"
+ const isVideo = mediaKind === "video"
+
+ useEffect(() => {
+ setHasError(false)
+ setShowReplay(false)
+ }, [media?.src, mediaKind])
+
+ useEffect(() => {
+ if (!isVideo) return
+ const video = videoRef.current
+ if (!video) return
+
+ const handleEnded = () => setShowReplay(true)
+ const handlePlay = () => setShowReplay(false)
+
+ video.addEventListener("ended", handleEnded)
+ video.addEventListener("play", handlePlay)
+
+ return () => {
+ video.removeEventListener("ended", handleEnded)
+ video.removeEventListener("play", handlePlay)
+ }
+ }, [isVideo, media?.src])
+
+ const handleReplay = () => {
+ if (isVideo && videoRef.current) {
+ videoRef.current.currentTime = 0
+ videoRef.current.play()
+ }
+ }
+
+ if (!media?.src || hasError) {
+ const fallbackIcon = isVideo ? "i-mgc-video-cute-re" : "i-mgc-photo-album-cute-re"
+ return (
+
+
+ )
+ }
+
+ return (
+
+ {isVideo ? (
+ <>
+
setHasError(true)}
+ />
+
+
+ {showReplay && (
+
+
+ )}
+
+
+ ) : (
+ (null)
+ const logoRef = React.useRef(null)
+ const iconRefs = React.useRef<(HTMLDivElement | null)[]>([])
+
+ const [paths, setPaths] = React.useState<{ d: string; color: string; shadow: string }[]>([])
+ const [ready, setReady] = React.useState(false)
+ const completedKeysRef = React.useRef>(new Set())
+
+ const views = React.useMemo(() => getViewList(), [])
+
+ const computePaths = React.useCallback(() => {
+ const container = containerRef.current
+ const logoEl = logoRef.current
+ if (!container || !logoEl) return
+
+ const containerRect = container.getBoundingClientRect()
+ const logoRect = logoEl.getBoundingClientRect()
+
+ const startX = logoRect.left - containerRect.left + logoRect.width / 2
+ const startY = logoRect.top - containerRect.top + logoRect.height / 2
+
+ const newPaths: { d: string; color: string; shadow: string }[] = []
+
+ iconRefs.current.forEach((el, idx) => {
+ if (!el) return
+ const r = el.getBoundingClientRect()
+ const endX = r.left - containerRect.left + r.width / 2
+ const endY = r.top - containerRect.top + r.height / 2
+
+ // Generate a slightly wobbly path between start and end
+ const dx = endX - startX
+ const dy = endY - startY
+ const distance = Math.hypot(dx, dy)
+ const segments = Math.max(6, Math.min(12, Math.round(distance / 70)))
+ const amplitude = Math.min(18, Math.max(6, distance * 0.06))
+
+ // Build points along the straight line and offset them by a seeded noise
+ const points: Array<{ x: number; y: number }> = [{ x: startX, y: startY }]
+ for (let i = 1; i < segments; i++) {
+ const t = i / segments
+ const baseX = startX + dx * t
+ const baseY = startY + dy * t
+ // Perpendicular vector
+ const px = -dy
+ const py = dx
+ const plen = Math.hypot(px, py) || 1
+ const nx = px / plen
+ const ny = py / plen
+ // Taper near the ends
+ const taper = Math.sin(Math.PI * t)
+ const rand = (seededRandom((idx + 1) * 9973 + i * 53) - 0.5) * 2 // [-1, 1]
+ const offset = rand * amplitude * taper
+ points.push({ x: baseX + nx * offset, y: baseY + ny * offset })
+ }
+ points.push({ x: endX, y: endY })
+
+ // Convert to a smooth path using quadratic curves
+ let d = `M ${points[0]!.x} ${points[0]!.y}`
+ for (let i = 1; i < points.length - 1; i++) {
+ const p1 = points[i]!
+ const p2 = points[i + 1]!
+ // Midpoint smoothing
+ const cx = p1.x
+ const cy = p1.y
+ const mx = (p1.x + p2.x) / 2
+ const my = (p1.y + p2.y) / 2
+ d += ` Q ${cx} ${cy} ${mx} ${my}`
+ }
+
+ // Use view's active color
+ const view = views[idx]
+ const color = view?.activeColor ?? "#999999"
+ const shadow = `${color}40`
+
+ newPaths.push({ d, color, shadow })
+ })
+
+ setPaths(newPaths)
+ }, [views])
+
+ // Compute when animations are completed and on resize thereafter
+ React.useLayoutEffect(() => {
+ if (!ready) return
+ // Two rafs to ensure transforms are fully flushed
+ const id = requestAnimationFrame(() => {
+ const id2 = requestAnimationFrame(() => {
+ computePaths()
+ })
+ return () => cancelAnimationFrame(id2)
+ })
+ return () => cancelAnimationFrame(id)
+ }, [ready, computePaths])
+
+ React.useEffect(() => {
+ if (!ready) return
+ const onResize = () => computePaths()
+ window.addEventListener("resize", onResize)
+ return () => window.removeEventListener("resize", onResize)
+ }, [ready, computePaths])
+
+ const markAnimationDone = React.useCallback(
+ (key: string) => {
+ const set = completedKeysRef.current
+ if (set.has(key)) return
+ set.add(key)
+ if (set.size >= views.length + 1) {
+ setReady(true)
+ }
+ },
+ [views.length],
+ )
+
+ return (
+
+ {/* Grid background */}
+
+
+ {/* Top centered Logo */}
+
markAnimationDone("logo")}
+ >
+
+ {/* Logo glow effect */}
+
+
+
+
+ {/* Bottom view icons */}
+ {views.map((view, index) => {
+ const totalViews = views.length
+ // Distribute icons evenly with equal margins on both sides
+ const margin = 10 // Margin from edges (10%)
+ const startPosition = margin // First icon center position
+ const endPosition = 100 - margin // Last icon center position
+ const totalWidth = endPosition - startPosition // Available width
+ const spacing = totalViews > 1 ? totalWidth / (totalViews - 1) : 0
+ const xPosition = startPosition + spacing * index // Evenly spaced, symmetric
+
+ return (
+
markAnimationDone(`icon-${index}`)}
+ >
+ {/* Icon container */}
+ {
+ iconRefs.current[index] = el
+ }}
+ className="relative flex size-12 items-center justify-center rounded-xl backdrop-blur-sm"
+ style={{
+ backgroundColor: `${view.activeColor}20`,
+ borderWidth: "1px",
+ borderStyle: "solid",
+ borderColor: `${view.activeColor}40`,
+ boxShadow: `0 4px 12px ${view.activeColor}20`,
+ }}
+ >
+
{view.icon}
+
+ )
+ })}
+
+ {/* Hand-drawn connector lines */}
+
+
+ {/* Slight wobble via displacement map to enhance sketch feeling (subtle) */}
+
+
+
+ {paths.map((p, index) => {
+ // Keep reveal order in sync with icon animations
+ const iconDelay = index * 0.08
+ const revealDelay = iconDelay + 0.1 // start after icon settles a bit
+ return (
+
+ {/* Underlay shadow to suggest marker bleed */}
+
+ )
+ })}
+
+
+ {/* Ambient background glow */}
+
+
(() => {
+ return [
+ {
+ id: "overview",
+ title: t("new_user_dialog.overview.title"),
+ description: t("new_user_dialog.overview.description"),
+ highlights: [
+ t("new_user_dialog.overview.highlight_1"),
+ t("new_user_dialog.overview.highlight_2"),
+ t("new_user_dialog.overview.highlight_3"),
+ ],
+ media: {
+ reactNode: jsx(OverviewMedia, {}),
+ },
+ primaryActionLabel: t("new_user_dialog.overview.primary"),
+ onPrimaryAction: () => handleNavigateAndClose("/discover?type=search"),
+ },
+ {
+ id: "ai",
+ title: t("new_user_dialog.ai.title"),
+ description: t("new_user_dialog.ai.description"),
+ highlights: [
+ t("new_user_dialog.ai.highlight_1"),
+ t("new_user_dialog.ai.highlight_2"),
+ t("new_user_dialog.ai.highlight_3"),
+ ],
+
+ media: {
+ reactNode: jsx(AICopilotMedia, {}),
+ },
+
+ primaryActionLabel: t("new_user_dialog.ai.primary"),
+ onPrimaryAction: handleLaunchAiGuide,
+ extra: jsx(AiSplineIndicatorToggle, {}),
+ },
+ {
+ id: "import",
+ title: t("new_user_dialog.import.title"),
+ description: t("new_user_dialog.import.description"),
+ highlights: [
+ t("new_user_dialog.import.highlight_1"),
+ t("new_user_dialog.import.highlight_2"),
+ t("new_user_dialog.import.highlight_3"),
+ ],
+ media: {
+ reactNode: jsx(OpmlAbstractGraphic, {}),
+ },
+
+ primaryActionLabel: t("new_user_dialog.import.primary"),
+ onPrimaryAction: () => handleNavigateAndClose("/discover?type=import"),
+ },
+ ]
+ }, [handleLaunchAiGuide, handleNavigateAndClose, t])
+
+ useEffect(() => {
+ const listener: EventListener = (event) => {
+ const { detail } = event as CustomEvent
+ setForceOpen(true)
+ setHasDismissed(false)
+ setShowAiGuide(Boolean(detail?.openAiGuide))
+ if (steps.length > 0 && typeof detail?.step === "number") {
+ const boundedIndex = Math.min(Math.max(detail.step, 0), steps.length - 1)
+ setActiveStep(boundedIndex)
+ } else {
+ setActiveStep(0)
+ }
+ }
+ window.addEventListener(APP_TIP_DEBUG_EVENT, listener)
+ return () => {
+ window.removeEventListener(APP_TIP_DEBUG_EVENT, listener)
+ }
+ }, [setHasDismissed, steps.length])
+
+ const activeStepData = steps[activeStep] ?? steps[0] ?? null
+
+ return {
+ shouldShowDialog,
+ showAiGuide,
+ steps,
+ activeStepData,
+ activeStepIndex: activeStep,
+ handleDismiss,
+ setActiveStep,
+ }
+}
+
+const AiSplineIndicatorToggle = () => {
+ const { t } = useTranslation("ai")
+ const showSplineButton = useAISettingKey("showSplineButton")
+
+ return (
+
+
+
+
+ {t("settings.showSplineButton.label")}
+
+
+ {t("settings.showSplineButton.description")}
+
+
+
+
setAISetting("showSplineButton", v)}
+ />
+
+
+ if (!detail || detail.key !== dismissKey) {
+ return
+ }
+ setHasDismissed(detail.dismissed)
+ }
+ window.addEventListener(APP_TIP_DISMISS_EVENT, listener)
+ return () => {
+ window.removeEventListener(APP_TIP_DISMISS_EVENT, listener)
+ }
+ }, [dismissKey])
+
+ const persistDismissState = useCallback(
+ (next: boolean) => {
+ if (!dismissKey || typeof window === "undefined") return
+
+ if (next) {
+ window.localStorage.setItem(dismissKey, "1")
+ } else {
+ window.localStorage.removeItem(dismissKey)
+ }
+ window.dispatchEvent(
+ new CustomEvent(APP_TIP_DISMISS_EVENT, {
+ detail: { key: dismissKey, dismissed: next },
+ }),
+ )
+ },
+ [dismissKey],
+ )
+
+ const isNewUser =
+ !isLoading && remoteSettings && Object.keys(remoteSettings.updated ?? {}).length === 0
+ const eligibleForGuide = Boolean(user && isNewUser)
+ const shouldShowNewUserGuide = eligibleForGuide && !hasDismissed
+
+ return {
+ user,
+ isNewUser,
+ eligibleForGuide,
+ shouldShowNewUserGuide,
+ hasDismissed,
+ setHasDismissed,
+ persistDismissState,
+ dismissKey,
+ isLoading,
+ }
+}
+
+function readDismissed(key: string | null) {
+ if (!key) return false
+ try {
+ return window.localStorage.getItem(key) === "1"
+ } catch {
+ return false
+ }
+}
diff --git a/apps/desktop/layer/renderer/src/modules/discover/OpmlAbstractGraphic.tsx b/apps/desktop/layer/renderer/src/modules/discover/OpmlAbstractGraphic.tsx
new file mode 100644
index 000000000..8550b2430
--- /dev/null
+++ b/apps/desktop/layer/renderer/src/modules/discover/OpmlAbstractGraphic.tsx
@@ -0,0 +1,273 @@
+import { Spring } from "@follow/components/constants/spring.js"
+import { Logo } from "@follow/components/icons/logo.jsx"
+import { cn } from "@follow/utils/utils"
+import { m } from "motion/react"
+import * as React from "react"
+
+// Popular RSS reader services
+const RSS_READERS = [
+ { icon: "i-simple-icons-feedly", name: "Feedly", color: "#2BB24C" },
+ { icon: "i-simple-icons-inoreader", name: "Inoreader", color: "#007BC5" },
+ { icon: "i-simple-icons-freshrss", name: "FreshRSS", color: "#FF9800" },
+]
+const seededRandom = (seed: number) => {
+ // Mulberry32
+ let t = (seed + 0x6d2b79f5) | 0
+ t = Math.imul(t ^ (t >>> 15), t | 1)
+ t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+ return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+}
+
+export function OpmlAbstractGraphic({ className }: { className?: string }) {
+ const containerRef = React.useRef(null)
+ const logoRef = React.useRef(null)
+ const iconRefs = React.useRef<(HTMLDivElement | null)[]>([])
+
+ const [paths, setPaths] = React.useState<{ d: string; color: string; shadow: string }[]>([])
+ const [ready, setReady] = React.useState(false)
+ const completedKeysRef = React.useRef>(new Set())
+
+ // Deterministic pseudo-random with seed
+
+ const computePaths = React.useCallback(() => {
+ const container = containerRef.current
+ const logoEl = logoRef.current
+ if (!container || !logoEl) return
+
+ const containerRect = container.getBoundingClientRect()
+ const logoRect = logoEl.getBoundingClientRect()
+
+ const endX = logoRect.left - containerRect.left + logoRect.width / 2
+ const endY = logoRect.top - containerRect.top + logoRect.height / 2
+
+ const newPaths: { d: string; color: string; shadow: string }[] = []
+
+ iconRefs.current.forEach((el, idx) => {
+ if (!el) return
+ const r = el.getBoundingClientRect()
+ const startX = r.left - containerRect.left + r.width / 2
+ const startY = r.top - containerRect.top + r.height / 2
+
+ // Generate a slightly wobbly path between start and end
+ const dx = endX - startX
+ const dy = endY - startY
+ const distance = Math.hypot(dx, dy)
+ const segments = Math.max(6, Math.min(12, Math.round(distance / 70)))
+ const amplitude = Math.min(18, Math.max(6, distance * 0.06))
+
+ // Build points along the straight line and offset them by a seeded noise
+ const points: Array<{ x: number; y: number }> = [{ x: startX, y: startY }]
+ for (let i = 1; i < segments; i++) {
+ const t = i / segments
+ const baseX = startX + dx * t
+ const baseY = startY + dy * t
+ // Perpendicular vector
+ const px = -dy
+ const py = dx
+ const plen = Math.hypot(px, py) || 1
+ const nx = px / plen
+ const ny = py / plen
+ // Taper near the ends
+ const taper = Math.sin(Math.PI * t)
+ const rand = (seededRandom((idx + 1) * 9973 + i * 53) - 0.5) * 2 // [-1, 1]
+ const offset = rand * amplitude * taper
+ points.push({ x: baseX + nx * offset, y: baseY + ny * offset })
+ }
+ points.push({ x: endX, y: endY })
+
+ // Convert to a smooth path using quadratic curves
+ let d = `M ${points[0]!.x} ${points[0]!.y}`
+ for (let i = 1; i < points.length - 1; i++) {
+ const p1 = points[i]!
+ const p2 = points[i + 1]!
+ // Midpoint smoothing
+ const cx = p1.x
+ const cy = p1.y
+ const mx = (p1.x + p2.x) / 2
+ const my = (p1.y + p2.y) / 2
+ d += ` Q ${cx} ${cy} ${mx} ${my}`
+ }
+
+ // Accent shadow color
+ const color = RSS_READERS[idx]?.color ?? "#999999"
+ const shadow =
+ idx === 0
+ ? "rgba(43,178,76,0.25)"
+ : idx === 1
+ ? "rgba(0,123,197,0.25)"
+ : "rgba(255,152,0,0.25)"
+
+ newPaths.push({ d, color, shadow })
+ })
+
+ setPaths(newPaths)
+ }, [])
+
+ // Compute when animations are completed and on resize thereafter
+ React.useLayoutEffect(() => {
+ if (!ready) return
+ // Two rafs to ensure transforms are fully flushed
+ const id = requestAnimationFrame(() => {
+ const id2 = requestAnimationFrame(() => {
+ computePaths()
+ })
+ return () => cancelAnimationFrame(id2)
+ })
+ return () => cancelAnimationFrame(id)
+ }, [ready, computePaths])
+
+ React.useEffect(() => {
+ if (!ready) return
+ const onResize = () => computePaths()
+ window.addEventListener("resize", onResize)
+ return () => window.removeEventListener("resize", onResize)
+ }, [ready, computePaths])
+
+ const markAnimationDone = React.useCallback(
+ (key: string) => {
+ const set = completedKeysRef.current
+ if (set.has(key)) return
+ set.add(key)
+ if (set.size >= RSS_READERS.length + 1) {
+ setReady(true)
+ }
+ },
+ [setReady],
+ )
+
+ return (
+
+ {/* Right side Logo */}
+
markAnimationDone("logo")}
+ >
+
+ {/* Logo glow effect */}
+
+
+
+
+ {/* Left side RSS Reader Icons in vertical layout */}
+ {RSS_READERS.map((reader, index) => {
+ const totalReaders = RSS_READERS.length
+ const spacing = 70 / (totalReaders + 1) // Distribute vertically within 70% of height
+ const yPosition = 15 + spacing * (index + 1) // Start at 15%, space evenly
+
+ return (
+
markAnimationDone(`icon-${index}`)}
+ >
+ {/* Icon container */}
+ {
+ iconRefs.current[index] = el
+ }}
+ className="relative flex size-12 items-center justify-center rounded-xl backdrop-blur-sm"
+ style={{
+ backgroundColor: `${reader.color}20`,
+ borderWidth: "1px",
+ borderStyle: "solid",
+ borderColor: `${reader.color}40`,
+ boxShadow: `0 4px 12px ${reader.color}20`,
+ }}
+ >
+
+
+ )
+ })}
+
+ {/* Hand-drawn connector lines */}
+
+
+ {/* Slight wobble via displacement map to enhance sketch feeling (subtle) */}
+
+
+
+ {paths.map((p, index) => {
+ // Keep reveal order in sync with icon animations
+ const iconDelay = index * 0.08
+ const revealDelay = iconDelay + 0.1 // start after icon settles a bit
+ return (
+
+ {/* Underlay shadow to suggest marker bleed */}
+
+ )
+ })}
+
+
+ {/* Ambient background glow on the right */}
+
+
([])
const isRefreshing = state.isFetching && !state.isFetchingNextPage
const renderAsRead = useGeneralSettingKey("renderMarkUnread")
@@ -139,6 +141,8 @@ function EntryColumnContent() {
const ListComponent = getView(view)?.gridMode ? EntryColumnGrid : EntryList
+ useNavigateFirstEntry(entriesIds, activeEntryId, view, navigate)
+
return (
-
+
@@ -128,6 +130,7 @@ export const MoreActions = ({
commandId={child.id}
onClick={resolveClick(child)!}
active={child.active}
+ disabled={child.disabled}
/>
))}
@@ -144,6 +147,7 @@ export const MoreActions = ({
commandId={config.id}
onClick={handler!}
active={config.active}
+ disabled={config.disabled}
/>
)
}
@@ -159,6 +163,7 @@ export const MoreActions = ({
commandId={config.id}
onClick={resolveClick(config)!}
active={config.active}
+ disabled={config.disabled}
/>
))}
@@ -172,11 +177,13 @@ export const CommandDropdownMenuItem = ({
onClick,
active,
asSubTrigger = false,
+ disabled = false,
}: {
commandId: FollowCommandId | string
onClick: () => void
active?: boolean
asSubTrigger?: boolean
+ disabled?: boolean
}) => {
const command = useCommand(commandId as any)
@@ -194,7 +201,13 @@ export const CommandDropdownMenuItem = ({
}
return (
-
+
{content}
)
@@ -218,8 +231,9 @@ export const CommandDropdownMenuItem = ({
key={command.id}
className="pl-3"
icon={command.icon}
- onSelect={onClick}
+ onSelect={disabled ? undefined : onClick}
active={active}
+ disabled={disabled}
>
{command.label.title}
diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/ArticleLayout.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/ArticleLayout.tsx
index 8929ccc6b..db9b1ceb8 100644
--- a/apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/ArticleLayout.tsx
+++ b/apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/ArticleLayout.tsx
@@ -1,5 +1,6 @@
import { MemoedDangerousHTMLStyle } from "@follow/components/common/MemoedDangerousHTMLStyle.js"
import { FeedViewType } from "@follow/constants"
+import { isOnboardingEntry } from "@follow/store/constants/onboarding"
import { useEntry } from "@follow/store/entry/hooks"
import { useFeedById } from "@follow/store/feed/hooks"
import { useIsInbox } from "@follow/store/inbox/hooks"
@@ -18,6 +19,7 @@ import type { TextSelectionEvent } from "~/lib/simple-text-selection"
import { useBlockActions } from "~/modules/ai-chat/store/hooks"
import { BlockSliceAction } from "~/modules/ai-chat/store/slices/block.slice"
import { EntryContentHTMLRenderer } from "~/modules/renderer/html"
+import { EntryContentMarkdownRenderer } from "~/modules/renderer/markdown"
import { WrappedElementProvider } from "~/providers/wrapped-element-provider"
import { useEntryContent, useEntryMediaInfo } from "../../hooks"
@@ -140,6 +142,9 @@ const Renderer: React.FC<{
textSelectionEnabled?: boolean
}> = ({ entryId, view, feedId, noMedia = false, content = "", translation }) => {
const mediaInfo = useEntryMediaInfo(entryId)
+ const isMarkdownEntry = useMemo(() => {
+ return isOnboardingEntry(entryId)
+ }, [entryId])
const readerRenderInlineStyle = useUISettingKey("readerRenderInlineStyle")
const stableRenderStyle = useRenderStyle()
const isInPeekModal = useInPeekModal()
@@ -156,8 +161,11 @@ const Renderer: React.FC<{
}
}, [content, tocRef])
+ const ContentRenderer = useMemo(() => {
+ return isMarkdownEntry ? EntryContentMarkdownRenderer : EntryContentHTMLRenderer
+ }, [isMarkdownEntry])
return (
-
{translation?.content || content}
-
+
)
}
diff --git a/apps/desktop/layer/renderer/src/modules/new-user-guide/discover-import-step.tsx b/apps/desktop/layer/renderer/src/modules/new-user-guide/discover-import-step.tsx
deleted file mode 100644
index dca794a69..000000000
--- a/apps/desktop/layer/renderer/src/modules/new-user-guide/discover-import-step.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Button } from "@follow/components/ui/button/index.js"
-import { useSetAtom } from "jotai"
-
-import { useI18n } from "~/hooks/common"
-
-import { DiscoverImport } from "../discover/DiscoverImport"
-import { stepAtom } from "./store"
-
-export function DiscoverImportStep() {
- const t = useI18n()
- const setStep = useSetAtom(stepAtom)
- return (
-
-
-
-
- setStep("intro")}>
- {t.app("new_user_guide.actions.back")}
-
-
- setStep("manual-import-pre-finish")}>
- {t.app("new_user_guide.actions.finish")}
-
-
-
-
- setOpen(false)} />
-
-
- )
-}
diff --git a/apps/desktop/layer/renderer/src/modules/new-user-guide/pre-finish.tsx b/apps/desktop/layer/renderer/src/modules/new-user-guide/pre-finish.tsx
deleted file mode 100644
index ec6852ca0..000000000
--- a/apps/desktop/layer/renderer/src/modules/new-user-guide/pre-finish.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Progress } from "@follow/components/ui/progress/index.js"
-import { FeedViewType } from "@follow/constants"
-import { subscriptionSyncService } from "@follow/store/subscription/store"
-import Spline from "@splinetool/react-spline"
-import { useAtom, useAtomValue } from "jotai"
-import { useEffect, useMemo, useState } from "react"
-
-import { feedSelectionsAtom, stepAtom } from "./store"
-
-const WAIT_DURATION_MS = 5000
-
-const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
-
-export function PreFinish() {
- const feedSelections = useAtomValue(feedSelectionsAtom)
- const [step, setStep] = useAtom(stepAtom)
- const selectedFeeds = useMemo(
- () => feedSelections.filter((feed) => feed.selected),
- [feedSelections],
- )
- const [progress, setProgress] = useState(selectedFeeds.length === 0 ? 100 : 0)
- const [showProgress, setShowProgress] = useState(false)
- const isSkipFlow = step === "skip-pre-finish"
-
- useEffect(() => {
- setProgress(isSkipFlow || selectedFeeds.length === 0 ? 100 : 0)
- setShowProgress(false)
-
- const timer = window.setTimeout(() => setShowProgress(true), WAIT_DURATION_MS)
-
- return () => {
- window.clearTimeout(timer)
- }
- }, [isSkipFlow, selectedFeeds])
-
- useEffect(() => {
- let disposed = false
-
- const subscribeSelectedFeeds = async () => {
- if (selectedFeeds.length === 0) {
- if (!disposed) {
- setProgress(100)
- }
- return
- }
-
- let completed = 0
-
- for (const feed of selectedFeeds) {
- if (disposed) break
- const { url, id, title } = feed
-
- try {
- await subscriptionSyncService.subscribe({
- url,
- view: feed.analytics.view ?? FeedViewType.Articles,
- category: null,
- isPrivate: false,
- hideFromTimeline: null,
- title: title ?? null,
- feedId: id,
- listId: undefined,
- })
- } catch (error) {
- if (!disposed) {
- console.error("Failed to subscribe feed during onboarding", { feedId: id, error })
- }
- } finally {
- completed += 1
- if (!disposed) {
- setProgress(Math.round((completed / selectedFeeds.length) * 100))
- }
- }
- }
- }
-
- const run = async () => {
- const tasks: Promise[] = [sleep(WAIT_DURATION_MS)]
- if (!isSkipFlow && selectedFeeds.length > 0) {
- tasks.push(subscribeSelectedFeeds())
- }
- await Promise.allSettled(tasks)
-
- if (!disposed) {
- if (step === "manual-import-pre-finish") {
- setStep("manual-import-finish")
- } else if (step === "skip-pre-finish") {
- setStep("skip-finish")
- } else {
- setStep("finish")
- }
- }
- }
-
- run()
-
- return () => {
- disposed = true
- }
- }, [isSkipFlow, selectedFeeds, setStep, step])
-
- return (
-
- {showProgress ? (
-
- ) : null}
-
-
({
view,
@@ -21,12 +22,7 @@ export function EntryContentHTMLRenderer
-} & HTMLProps) {
+}: EntryContentRendererProps & HTMLProps) {
const entry = useEntry(entryId, (state) => {
const images =
state.media?.reduce(
diff --git a/apps/desktop/layer/renderer/src/modules/renderer/markdown.tsx b/apps/desktop/layer/renderer/src/modules/renderer/markdown.tsx
new file mode 100644
index 000000000..e7f153905
--- /dev/null
+++ b/apps/desktop/layer/renderer/src/modules/renderer/markdown.tsx
@@ -0,0 +1,107 @@
+import { FeedViewType } from "@follow/constants"
+import { useEntry } from "@follow/store/entry/hooks"
+import { getFeedById } from "@follow/store/feed/getter"
+import type { ComponentProps } from "react"
+import { useMemo } from "react"
+
+import {
+ MarkdownImageRecordContext,
+ MarkdownRenderActionContext,
+} from "~/components/ui/markdown/context"
+import { Markdown } from "~/components/ui/markdown/Markdown"
+import type { MarkdownImage, MarkdownRenderActions } from "~/components/ui/markdown/types"
+
+import { TimeStamp } from "./components/TimeStamp"
+import { EntryInfoContext } from "./context"
+import type { EntryContentRendererProps } from "./types"
+
+type MarkdownProps = Omit, "children">
+
+export function EntryContentMarkdownRenderer({
+ view,
+ feedId,
+ entryId,
+ children,
+ ...props
+}: EntryContentRendererProps & MarkdownProps) {
+ const entry = useEntry(entryId, (state) => {
+ const images =
+ state.media?.reduce(
+ (acc, media) => {
+ if (media.height && media.width) {
+ acc[media.url] = media
+ }
+ return acc
+ },
+ {} as Record,
+ ) ?? {}
+
+ const { url } = state
+
+ return {
+ images,
+ url,
+ }
+ })
+
+ const images: Record = useMemo(() => entry?.images ?? {}, [entry])
+ const actions: MarkdownRenderActions = useMemo(() => {
+ return {
+ isAudio() {
+ return view === FeedViewType.Audios
+ },
+ transformUrl(url) {
+ if (!url || url.startsWith("http")) return url
+
+ const feed = getFeedById(feedId)
+ if (url.startsWith("/") && feed?.siteUrl) return safeUrl(url, feed.siteUrl)
+
+ if (url?.startsWith(".") && entry?.url) return safeUrl(url, entry?.url)
+
+ return url
+ },
+ ensureAndRenderTimeStamp,
+ }
+ }, [entry, feedId, view])
+
+ return (
+ // eslint-disable-next-line @eslint-react/no-context-provider
+
+
+ ({ feedId, entryId }), [feedId, entryId])}>
+ {children ?? ""}
+
+
+
+ )
+}
+
+const safeUrl = (url: string, baseUrl: string) => {
+ try {
+ return new URL(url, baseUrl).href
+ } catch {
+ return url
+ }
+}
+
+const ensureAndRenderTimeStamp = (children: string) => {
+ const firstPart = children.replace(" ", " ").split(" ")[0]
+ // 00:00 , 00:00:00
+ if (!firstPart) {
+ return
+ }
+ const isTime = isValidTimeString(firstPart.trim())
+ if (isTime) {
+ return (
+ <>
+ {children.slice(firstPart.length)}
+
+ )
+ }
+ return false
+}
+function isValidTimeString(time: string): boolean {
+ const timeRegex = /^\d{1,2}:[0-5]\d(?::[0-5]\d)?$/
+ return timeRegex.test(time)
+}
diff --git a/apps/desktop/layer/renderer/src/modules/renderer/types.ts b/apps/desktop/layer/renderer/src/modules/renderer/types.ts
new file mode 100644
index 000000000..f780d6e18
--- /dev/null
+++ b/apps/desktop/layer/renderer/src/modules/renderer/types.ts
@@ -0,0 +1,8 @@
+import type { FeedViewType } from "@follow-app/client-sdk"
+
+export type EntryContentRendererProps = {
+ view: FeedViewType
+ feedId: string
+ entryId: string
+ children: Nullable
+}
diff --git a/apps/desktop/layer/renderer/src/modules/settings/tabs/about.tsx b/apps/desktop/layer/renderer/src/modules/settings/tabs/about.tsx
index 0e5dd3abd..81a38d5e3 100644
--- a/apps/desktop/layer/renderer/src/modules/settings/tabs/about.tsx
+++ b/apps/desktop/layer/renderer/src/modules/settings/tabs/about.tsx
@@ -15,6 +15,7 @@ import { useModalStack } from "~/components/ui/modal/stacked/hooks"
import { ipcServices } from "~/lib/client"
import { getNewIssueUrl } from "~/lib/issues"
import { EnvironmentDebugModalContent } from "~/modules/app/EnvironmentIndicator"
+import { APP_TIP_DEBUG_EVENT } from "~/modules/app-tip"
export const SettingAbout = () => {
const { t } = useTranslation("settings")
@@ -101,6 +102,14 @@ export const SettingAbout = () => {
window.open(`https://folo.is/${path}`, "_blank")
}
+ const handleOpenAiOnboarding = () => {
+ window.dispatchEvent(
+ new CustomEvent(APP_TIP_DEBUG_EVENT, {
+ detail: { step: 0 },
+ }),
+ )
+ }
+
return (
{/* Header Section */}
@@ -188,6 +197,17 @@ export const SettingAbout = () => {
+
+
{t("about.appTip")}
+
{t("about.appTipDescription")}
+
+
This operation will delete your category, but the feeds it contains will be retained and
diff --git a/apps/desktop/layer/renderer/src/modules/subscription-column/CategoryUnsubscribeDialogContent.tsx b/apps/desktop/layer/renderer/src/modules/subscription-column/CategoryUnsubscribeDialogContent.tsx
index 1833ef478..0d698d0c6 100644
--- a/apps/desktop/layer/renderer/src/modules/subscription-column/CategoryUnsubscribeDialogContent.tsx
+++ b/apps/desktop/layer/renderer/src/modules/subscription-column/CategoryUnsubscribeDialogContent.tsx
@@ -36,7 +36,7 @@ export function CategoryUnsubscribeDialogContent({
const { dismiss } = useCurrentModal()
return (
-
+
{t("sidebar.category_unsubscribe_dialog.description", {
category,
diff --git a/apps/desktop/layer/renderer/src/modules/subscription-column/FeedCategory.tsx b/apps/desktop/layer/renderer/src/modules/subscription-column/FeedCategory.tsx
index 3769556a3..c50576a04 100644
--- a/apps/desktop/layer/renderer/src/modules/subscription-column/FeedCategory.tsx
+++ b/apps/desktop/layer/renderer/src/modules/subscription-column/FeedCategory.tsx
@@ -3,9 +3,17 @@ import { useMobile } from "@follow/components/hooks/useMobile.js"
import { MotionButtonBase } from "@follow/components/ui/button/index.js"
import { LoadingCircle } from "@follow/components/ui/loading/index.jsx"
import { useScrollViewElement } from "@follow/components/ui/scroll-area/hooks.js"
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipPortal,
+ TooltipTrigger,
+} from "@follow/components/ui/tooltip/index.jsx"
import type { FeedViewType } from "@follow/constants"
import { getViewList } from "@follow/constants"
import { useRefValue } from "@follow/hooks"
+import { isOnboardingFeedUrl } from "@follow/store/constants/onboarding"
+import { useFeedsByIds } from "@follow/store/feed/hooks"
import { useOwnedListByView } from "@follow/store/list/hooks"
import {
useSubscriptionByFeedId,
@@ -178,6 +186,10 @@ function FeedCategoryImpl({
const subscriptionCategoryExist = useSubscriptionCategoryExist(folderName)
const isAutoGroupedCategory = !!folderName && !subscriptionCategoryExist
+ // Check if any feed in this category is an onboarding feed
+ const feeds = useFeedsByIds(ids, (feed) => feed.url)
+ const hasOnboardingFeed = useMemo(() => feeds.some((url) => isOnboardingFeedUrl(url)), [feeds])
+
const { isOver, setNodeRef } = useDroppable({
id: `category-${folderName}`,
disabled: isAutoGroupedCategory,
@@ -299,7 +311,8 @@ function FeedCategoryImpl({
ref={setNodeRef}
data-active={isActive || isContextMenuOpen}
className={cn(
- isOver && "border-orange-400 bg-orange-400/60",
+ isOver && "border-folo bg-folo/60",
+
"my-px px-2.5",
feedColumnStyles.item,
)}
@@ -312,7 +325,10 @@ function FeedCategoryImpl({
}}
{...contextMenuProps}
>
-
+
{folderName}
-
+ {hasOnboardingFeed && (
+
+
+
+
+ {t("feed_category.onboarding_feed")}
+
+
+ )}
feedColumnStyles.item,
isFeed ? "py-0.5" : "py-1.5",
"justify-between py-0.5",
+
className,
)}
onClick={handleClick}
onDoubleClick={handleDoubleClick}
{...contextMenuProps}
>
-
+
+
+
+
+ {t("feed_item.onboarding_feed")}
+
+
+ )}
+ {isFeed && !isOnboardingFeed && (
)}
- {subscription?.isPrivate && (
+ {subscription?.isPrivate && !isOnboardingFeed && (
- {sortByUnreadFeedList.map((feedId) => (
+ {sortedList.map((feedId) => (
s.order === "desc")
- let sortedByAlphabetical = Object.keys(data).sort((a, b) => {
- const nameA = categoryName2RealDisplayNameMap[a]
- const nameB = categoryName2RealDisplayNameMap[b]
- if (typeof nameA !== "string" || typeof nameB !== "string") {
- return 0
- }
- return sortByAlphabet(nameA, nameB)
- })
- if (!isDesc) {
- sortedByAlphabetical = sortedByAlphabetical.reverse()
- }
+ // Separate categories with onboarding feeds and regular categories
+ const sortedByAlphabetical = useFeedStore(
+ useCallback(
+ (state) => {
+ const onboardingCategories: string[] = []
+ const regularCategories: string[] = []
+
+ // First, separate categories
+ for (const category of Object.keys(data)) {
+ const ids = data[category]!
+ const hasOnboardingFeed = ids.some((id) => {
+ const feed = state.feeds[id]
+ return feed && isOnboardingFeedUrl(feed.url)
+ })
+
+ if (hasOnboardingFeed) {
+ onboardingCategories.push(category)
+ } else {
+ regularCategories.push(category)
+ }
+ }
+
+ // Sort each group alphabetically
+ const sortCategories = (categories: string[]) => {
+ const sorted = categories.sort((a, b) => {
+ const nameA = categoryName2RealDisplayNameMap[a]
+ const nameB = categoryName2RealDisplayNameMap[b]
+ if (typeof nameA !== "string" || typeof nameB !== "string") {
+ return 0
+ }
+ return sortByAlphabet(nameA, nameB)
+ })
+ return isDesc ? sorted : sorted.reverse()
+ }
+
+ // Return onboarding categories first, then regular categories
+ return [...sortCategories(onboardingCategories), ...sortCategories(regularCategories)]
+ },
+ [data, categoryName2RealDisplayNameMap, isDesc],
+ ),
+ )
return (
diff --git a/apps/desktop/layer/renderer/src/modules/subscription-column/sort-by/SortByUnreadList.tsx b/apps/desktop/layer/renderer/src/modules/subscription-column/sort-by/SortByUnreadList.tsx
index 67f76243b..b0ae9a8c8 100644
--- a/apps/desktop/layer/renderer/src/modules/subscription-column/sort-by/SortByUnreadList.tsx
+++ b/apps/desktop/layer/renderer/src/modules/subscription-column/sort-by/SortByUnreadList.tsx
@@ -1,5 +1,7 @@
+import { isOnboardingFeedUrl } from "@follow/store/constants/onboarding"
+import { useFeedStore } from "@follow/store/feed/store"
import { useSortedCategoriesByUnread } from "@follow/store/unread/hooks"
-import { Fragment } from "react"
+import { Fragment, useCallback } from "react"
import { useFeedListSortSelector } from "../atom"
import { FeedCategoryAutoHideUnread } from "../FeedCategory"
@@ -9,9 +11,36 @@ export const SortByUnreadFeedList = ({ view, data, categoryOpenStateData }: Feed
const isDesc = useFeedListSortSelector((s) => s.order === "desc")
const sortedByUnread = useSortedCategoriesByUnread(data, isDesc)
+ // Separate categories with onboarding feeds and regular categories
+ const sortedList = useFeedStore(
+ useCallback(
+ (state) => {
+ if (!sortedByUnread) return []
+ const onboardingCategories: [string, string[]][] = []
+ const regularCategories: [string, string[]][] = []
+
+ for (const [category, ids] of sortedByUnread) {
+ const hasOnboardingFeed = ids.some((id) => {
+ const feed = state.feeds[id]
+ return feed && isOnboardingFeedUrl(feed.url)
+ })
+
+ if (hasOnboardingFeed) {
+ onboardingCategories.push([category, ids])
+ } else {
+ regularCategories.push([category, ids])
+ }
+ }
+
+ return [...onboardingCategories, ...regularCategories]
+ },
+ [sortedByUnread],
+ ),
+ )
+
return (
- {sortedByUnread?.map(([category, ids]) => (
+ {sortedList.map(([category, ids]) => (
sign in to sync your subscriptions and settings across devices.",
"notify.store.default": "the store",
"notify.store.mas": "App Store",
diff --git a/locales/app/ja.json b/locales/app/ja.json
index 3642293e1..98d06190b 100644
--- a/locales/app/ja.json
+++ b/locales/app/ja.json
@@ -193,6 +193,7 @@
"feed.followsAndFeeds": "{{subscriptionCount}} {{subscriptionNoun}} と {{feedsCount}} {{feedsNoun}} on {{appName}}",
"feed.read_one": "読む",
"feed.read_other": "読む",
+ "feed_category.onboarding_feed": "このカテゴリーにはオンボーディングフィードが含まれています",
"feed_claim_modal.choose_verification_method": "選択肢は 3 つあります。そのうち 1 つを選んで確認してください。",
"feed_claim_modal.claim_button": "クレーム",
"feed_claim_modal.content_instructions": "以下の内容をコピーして、最新の RSS フィードに投稿してください。",
@@ -239,6 +240,7 @@
"feed_item.claimed_list": "クレームされたリスト",
"feed_item.error_since": "エラー発生時刻",
"feed_item.not_publicly_visible": "プロフィールページに公開されていません",
+ "feed_item.onboarding_feed": "これはオンボーディングフィードです",
"login.agree_to": " 続行することで、あなたは私たちの",
"login.back": "戻る",
"login.confirm_password.label": "パスワードの確認",
@@ -263,11 +265,33 @@
"mark_all_read_button.mark_all_as_read": "すべてを既読にする",
"mark_all_read_button.mark_as_read": "サインイン してください。",
"notify.store.default": "ストア",
"notify.store.mas": "App Store",
diff --git a/locales/app/zh-CN.json b/locales/app/zh-CN.json
index 2a1a59e7e..613e28371 100644
--- a/locales/app/zh-CN.json
+++ b/locales/app/zh-CN.json
@@ -193,6 +193,7 @@
"feed.followsAndFeeds": "在 {{appName}} 上有 {{subscriptionCount}} 个{{subscriptionNoun}}和 {{feedsCount}} 个{{feedsNoun}}",
"feed.read_one": "阅读",
"feed.read_other": "阅读",
+ "feed_category.onboarding_feed": "此分类包含入门引导订阅源",
"feed_claim_modal.choose_verification_method": "有三种认证方式，可任选其中一种进行认证。",
"feed_claim_modal.claim_button": "认证",
"feed_claim_modal.content_instructions": "复制以下内容，发布到需要认证的订阅源。",
@@ -241,6 +242,7 @@
"feed_item.claimed_list": "已认证列表",
"feed_item.error_since": "源失效：",
"feed_item.not_publicly_visible": "在个人页面上隐藏",
+ "feed_item.onboarding_feed": "这是一个入门引导订阅源",
"login.agree_to": "继续即表示您同意我们的",
"login.back": "返回",
"login.confirm_password.label": "确认密码",
@@ -266,11 +268,34 @@
"mark_all_read_button.mark_all_as_read": "全部标记为已读",
"mark_all_read_button.mark_as_read": "标记 登录 以同步您的订阅和设置到其他设备。",
"notify.store.default": "商店",
"notify.store.mas": "App Store",
diff --git a/locales/app/zh-TW.json b/locales/app/zh-TW.json
index 49c230959..448a76c31 100644
--- a/locales/app/zh-TW.json
+++ b/locales/app/zh-TW.json
@@ -264,11 +264,33 @@
"mark_all_read_button.mark_all_as_read": "全部標記為已讀",
"mark_all_read_button.mark_as_read": "標記