feat(settings): reorder Usage Analysis section and restore view details button

apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/TaskReportDropdown.tsx

@@ -1,4 +1,5 @@
 import { ActionButton } from "@follow/components/ui/button/index.js"
+import { nextFrame } from "@follow/utils"
 import type { AIChatSession } from "@follow-app/client-sdk"
 import type { ReactElement } from "react"
 import { useCallback, useMemo, useState } from "react"
@@ -22,6 +23,7 @@ import {
   useDeleteAIChatSessionMutation,
 } from "~/modules/ai-chat-session/query"
 import { AITaskModal, useCanCreateNewAITask } from "~/modules/ai-task"
+import { useSettingModal } from "~/modules/settings/modal/use-setting-modal-hack"
 
 import { AIPersistService } from "../../services"
 
@@ -95,6 +97,7 @@ export const TaskReportDropdown = ({ triggerElement, asChild = true }: TaskRepor
   const { ask } = useDialog()
   const { t } = useTranslation("ai")
   const [loadingChatId, setLoadingChatId] = useState<string | null>(null)
+  const showSettings = useSettingModal()
 
   // Only keep unread sessions for display
   const unreadSessions = useMemo(
@@ -111,10 +114,13 @@ export const TaskReportDropdown = ({ triggerElement, asChild = true }: TaskRepor
       toast.error("Please remove an existing task before creating a new one.")
       return
     }
-    present({
-      title: "New AI Task",
-      canClose: true,
-      content: () => <AITaskModal showSettingsTip />,
+    showSettings("ai")
+    nextFrame(() => {
+      present({
+        title: "New AI Task",
+        canClose: true,
+        content: () => <AITaskModal showSettingsTip />,
+      })
     })
   }
 

apps/desktop/layer/renderer/src/modules/settings/tabs/ai.tsx

@@ -22,7 +22,6 @@ export const SettingAI = () => {
     <div className="mt-4">
       <SettingBuilder
         settings={[
-          UsageAnalysisSection,
           {
             type: "title",
             value: t("features.title"),
@@ -62,6 +61,12 @@ export const SettingAI = () => {
             value: t("tasks.section.title"),
           },
           TaskSchedulingSection,
+
+          {
+            type: "title",
+            value: t("usage_analysis.title"),
+          },
+          UsageAnalysisSection,
           AISecurityDisclosureSection,
         ]}
       />

apps/desktop/layer/renderer/src/modules/settings/tabs/ai/usage/UsageAnalysisSection.tsx

@@ -32,26 +32,6 @@ export const UsageAnalysisSection = () => {
 
       <Card>
         <CardContent className="h-36 p-4">
-          <div className="mb-4 flex items-center justify-between">
-            <h3 className="text-text text-sm font-medium">{t("usage_analysis.title")}</h3>
-
-            <button
-              type="button"
-              onClick={() =>
-                present({
-                  id: "detailed-usage-modal",
-                  content: DetailedUsageModal,
-                  title: t("usage_analysis.detailed_title"),
-                  modalContentClassName: "-mx-6 -mb-4",
-                })
-              }
-              className="text-text-secondary hover:text-text flex items-center gap-1 text-sm duration-200"
-            >
-              {t("usage_analysis.view_details")}
-              <i className="i-mingcute-right-line" />
-            </button>
-          </div>
-
           <div className="flex items-center gap-4">
             <UsageProgressRing percentage={usagePercentage} size="md" />
 
@@ -75,6 +55,23 @@ export const UsageAnalysisSection = () => {
               </div>
             </div>
           </div>
+          <div className="mt-4 flex items-center justify-between">
+            <button
+              type="button"
+              onClick={() =>
+                present({
+                  id: "detailed-usage-modal",
+                  content: DetailedUsageModal,
+                  title: t("usage_analysis.detailed_title"),
+                  modalContentClassName: "-mx-6 -mb-4",
+                })
+              }
+              className="text-text-secondary hover:text-text flex items-center gap-1 text-sm duration-200"
+            >
+              {t("usage_analysis.view_details")}
+              <i className="i-mingcute-right-line" />
+            </button>
+          </div>
         </CardContent>
       </Card>
     </div>