refactor: deep link for faq

src/features/nav/ResponsiveNav.tsx

@@ -20,7 +20,7 @@ export function ResponsiveNav({
       className={`@container/nav grow grid grid-cols-1 grid-rows-[auto_1fr] md:grid-rows-1 md:grid-cols-[10rem_1fr] ${className}`}
     >
       {/* Sidebar */}
-      <aside className={`bg-base-300 md:p-4 md:block ${navigationClassName}`}>{navigation}</aside>
+      <aside className={`bg-base-100 md:p-4 md:block ${navigationClassName}`}>{navigation}</aside>
 
       {/* Main content */}
       <div className={`p-4 grow ${contentClassName}`}>{children}</div>

src/features/nav/TabNavLink.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import type { RefAttributes } from 'react';
+import { NavLink, type NavLinkProps } from 'react-router';
+
+const tabClassNames = ({ isActive }: { isActive: boolean }) =>
+  classNames(
+    'link inline-flex text-nowrap mb-[-2px] no-underline w-full',
+    'border-b-2 md:border-b-0 md:border-r-2',
+    'tab md:grow',
+    {
+      'tab-active bg-accent/10 border-accent': isActive,
+    },
+  );
+
+export function TabNavLink({ children, ...props }: NavLinkProps & RefAttributes<HTMLAnchorElement>) {
+  return (
+    <NavLink className={tabClassNames} role="tab" {...props}>
+      {children}
+    </NavLink>
+  );
+}

src/features/settings/Settings.tsx

@@ -1,12 +1,12 @@
 import { useAppDispatch, useAppSelector } from '~/hooks';
 import { commitStagingChange, discardStagingChanges } from './settingsSlice';
 import { selectIsSettingsNotSaved } from './settingsSelector';
-import { NavLink, Outlet } from 'react-router';
+import { Outlet } from 'react-router';
 import { SETTINGS_TABS } from '~/features/settings/settingsTabs.tsx';
 import { MdOutlineSettingsBackupRestore } from 'react-icons/md';
 import { toast } from 'react-toastify';
 import { ResponsiveNav } from '../nav/ResponsiveNav';
-import classNames from 'classnames';
+import { TabNavLink } from '../nav/TabNavLink';
 
 export function Settings() {
   const dispatch = useAppDispatch();
@@ -27,16 +27,6 @@ export function Settings() {
   };
   const isSettingsNotSaved = useAppSelector(selectIsSettingsNotSaved);
 
-  const tabClassNames = ({ isActive }: { isActive: boolean }) =>
-    classNames(
-      'link inline-flex text-nowrap mb-[-2px] no-underline w-full',
-      'border-b-2 md:border-b-0 md:border-r-2',
-      'tab md:grow',
-      {
-        'tab-active bg-accent/10 border-accent': isActive,
-      },
-    );
-
   return (
     <div className="flex flex-col flex-1 container w-full">
       <ResponsiveNav
@@ -46,9 +36,9 @@ export function Settings() {
         navigation={
           <div role="tablist" className="tabs gap-1 flex-nowrap md:flex-col grow items-center">
             {Object.entries(SETTINGS_TABS).map(([id, { name }]) => (
-              <NavLink className={tabClassNames} key={id} to={`/settings/${id}`} role="tab">
+              <TabNavLink key={id} to={`/settings/${id}`}>
                 {name}
-              </NavLink>
+              </TabNavLink>
             ))}
           </div>
         }

src/features/settings/panels/QMCv2/QMCv2QQMusicAllInstructions.tsx

@@ -4,7 +4,7 @@ import { InstructionsMac } from './InstructionsMac';
 import { InstructionsPC } from './InstructionsPC';
 import { InstructionsTabs, InstructionTab } from '~/components/InstructionsTabs.tsx';
 
-export function QMCv2QQMusicAllInstructions() {
+export function QMCv2QQMusicAllInstructions({ limitHeight }: { limitHeight?: boolean }) {
   const tabs: InstructionTab[] = [
     {
       id: 'android',
@@ -16,5 +16,5 @@ export function QMCv2QQMusicAllInstructions() {
     { id: 'windows', label: 'Windows', content: <InstructionsPC /> },
   ];
 
-  return <InstructionsTabs tabs={tabs} />;
+  return <InstructionsTabs tabs={tabs} limitHeight={limitHeight} />;
 }