update

RSSNext · Oct 21, 2024 · cf13524 · cf13524
1 parent 01a8522
commit cf13524
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 46 deletions.
diff --git a/apps/renderer/src/modules/new-user-guide/guide-modal-content.tsx b/apps/renderer/src/modules/new-user-guide/guide-modal-content.tsx
@@ -13,8 +13,8 @@ import confettiUrl from "~/lottie/confetti.lottie?url"
 import { settings } from "~/queries/settings"
 
 import { settingSyncQueue } from "../settings/helper/sync-queue"
+import { LanguageSelector } from "../settings/tabs/general"
 import { useHaveUsedOtherRSSReader } from "./atoms"
-import { AppearanceGuide } from "./steps/appearance"
 import { BehaviorGuide } from "./steps/behavior"
 import { TrendingFeeds } from "./steps/feeds"
 import { RookieCheck } from "./steps/rookie"
@@ -49,6 +49,7 @@ function Intro() {
       <Logo className="mx-auto size-20" />
       <p className="mt-5 text-xl font-semibold">{t("new_user_guide.intro.title")}</p>
       <p className="text-lg">{t("new_user_guide.intro.description")}</p>
+      <LanguageSelector containerClassName="px-16" contentClassName="z-10" />
     </div>
   )
 }
@@ -73,11 +74,6 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
   const guideSteps = useMemo(
     () =>
       [
-        {
-          title: t.settings("appearance.sidebar_title"),
-          content: createElement(AppearanceGuide),
-          icon: "i-mgc-palette-cute-re",
-        },
         {
           title: t.app("new_user_guide.step.start_question.title"),
           content: createElement(RookieCheck),
@@ -139,31 +135,6 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
         </h1>
       )}
 
-      <div className="relative mx-auto flex w-full max-w-2xl items-center">
-        <AnimatePresence initial={false} custom={direction} mode="popLayout">
-          <m.div
-            key={step - 1}
-            custom={direction}
-            variants={variants}
-            initial="enter"
-            animate="center"
-            exit="exit"
-            transition={{
-              x: { type: "spring", stiffness: 300, damping: 30 },
-              opacity: { duration: 0.1 },
-            }}
-          >
-            {status === "initial" ? (
-              <Intro />
-            ) : status === "active" ? (
-              guideSteps[step - 1].content
-            ) : status === "complete" ? (
-              <Outtro />
-            ) : null}
-          </m.div>
-        </AnimatePresence>
-      </div>
-
       <div className="absolute inset-x-0 bottom-4 z-[1] flex w-full items-center justify-between px-6">
         <div className={clsx("flex h-fit gap-4", step === 0 && "invisible")}>
           {Array.from({ length: totalSteps }, (_, i) => i + 1).map((i) => (
@@ -217,6 +188,31 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
           </Button>
         </div>
       </div>
+
+      <div className="relative mx-auto flex w-full max-w-2xl items-center">
+        <AnimatePresence initial={false} custom={direction} mode="popLayout">
+          <m.div
+            key={step - 1}
+            custom={direction}
+            variants={variants}
+            initial="enter"
+            animate="center"
+            exit="exit"
+            transition={{
+              x: { type: "spring", stiffness: 300, damping: 30 },
+              opacity: { duration: 0.1 },
+            }}
+          >
+            {status === "initial" ? (
+              <Intro />
+            ) : status === "active" ? (
+              guideSteps[step - 1].content
+            ) : status === "complete" ? (
+              <Outtro />
+            ) : null}
+          </m.div>
+        </AnimatePresence>
+      </div>
     </m.div>
   )
 }

diff --git a/apps/renderer/src/modules/new-user-guide/steps/appearance.tsx b/apps/renderer/src/modules/new-user-guide/steps/appearance.tsx
diff --git a/apps/renderer/src/modules/settings/tabs/general.tsx b/apps/renderer/src/modules/settings/tabs/general.tsx
@@ -217,7 +217,13 @@ export const VoiceSelector = () => {
   )
 }
 
-export const LanguageSelector = () => {
+export const LanguageSelector = ({
+  containerClassName,
+  contentClassName,
+}: {
+  containerClassName?: string
+  contentClassName?: string
+}) => {
   const { t } = useTranslation("settings")
   const { t: langT } = useTranslation("lang")
   const language = useGeneralSettingSelector((state) => state.language)
@@ -229,7 +235,7 @@ export const LanguageSelector = () => {
   const [loadingLanguageLockMap] = useAtom(langLoadingLockMapAtom)
 
   return (
-    <div className="mb-3 mt-4 flex items-center justify-between">
+    <div className={cn("mb-3 mt-4 flex items-center justify-between", containerClassName)}>
       <span className="shrink-0 text-sm font-medium">{t("general.language")}</span>
       <Select
         defaultValue={finalRenderLanguage}
@@ -246,7 +252,7 @@ export const LanguageSelector = () => {
           <SelectValue />
           {loadingLanguageLockMap[finalRenderLanguage] && <LoadingCircle size="small" />}
         </SelectTrigger>
-        <SelectContent position="item-aligned">
+        <SelectContent position="item-aligned" className={contentClassName}>
           {currentSupportedLanguages.map((lang) => {
             const percent = I18N_COMPLETENESS_MAP[lang]