feat: custom quick preview

Author: sylingd

locale/original/messages.json

@@ -619,5 +619,13 @@
   "view": {
     "message": "View",
     "description": "View rule or a link"
+  },
+  "showQuickPreview": {
+    "message": "Show quick preview",
+    "description": "Show quick preview"
+  },
+  "popupPanel": {
+    "message": "Popup panel",
+    "description": "Popup panel"
   }
-}
+}

src/pages/options/sections/options/prefs.tsx

@@ -17,6 +17,7 @@ const prefItems: {
     type: 'switch' | 'select';
     optionList?: Array<{ label: string; value: string }>;
     disabled?: boolean;
+    multiple?: boolean;
   };
 } = {
   'manage-collapse-group': {
@@ -85,6 +86,21 @@ const prefItems: {
       },
     ],
   },
+  'show-quick-preview': {
+    langKey: 'showQuickPreview',
+    type: 'select',
+    multiple: true,
+    optionList: [
+      {
+        label: t('popupPanel'),
+        value: 'popup',
+      },
+      {
+        label: t('manage'),
+        value: 'manage',
+      },
+    ],
+  },
 };
 
 const allPrefs = Object.keys(prefItems);
@@ -167,6 +183,7 @@ export default class Prefs extends React.Component<void, PrefsState> {
                     onChange={v => this.handleChange(key, v)}
                     value={this.state.prefs[key as keyof PrefValue] as any}
                     disabled={item.disabled}
+                    multiple={item.multiple}
                   />
                 ) : (
                   <Switch

src/pages/options/sections/rules/rule-group-card.tsx

@@ -37,6 +37,7 @@ import { convertToBasicRule, createExport } from '@/share/core/rule-utils';
 import type { RuleWithVirtualKey } from '@/share/core/types';
 import { getTableName, t } from '@/share/core/utils';
 import useMarkCommon from '@/share/hooks/use-mark-common';
+import usePref from '@/share/hooks/use-pref';
 import Api from '@/share/pages/api';
 import file from '@/share/pages/file';
 import { textEllipsis } from '@/share/pages/styles';
@@ -92,6 +93,9 @@ const RuleGroupCard = (props: RuleCardProps) => {
       }
     : undefined;
 
+  const [pref] = usePref('show-quick-preview');
+  const showQuickPreview = pref.includes('manage');
+
   const tableColumns: Array<ColumnProps<RuleWithVirtualKey>> = [
     {
       title: t('enable'),
@@ -113,16 +117,19 @@ const RuleGroupCard = (props: RuleCardProps) => {
       title: t('name'),
       className: 'cell-name',
       dataIndex: 'name',
-      render: (value: string, item) => (
-        <Popover
-          showArrow
-          position="top"
-          content={<RuleDetail rule={item} />}
-          style={{ maxWidth: '300px' }}
-        >
+      render: (value: string, item) =>
+        showQuickPreview ? (
+          <Popover
+            showArrow
+            position="top"
+            content={<RuleDetail rule={item} />}
+            style={{ maxWidth: '300px' }}
+          >
+            <div className={textEllipsis}>{value}</div>
+          </Popover>
+        ) : (
           <div className={textEllipsis}>{value}</div>
-        </Popover>
-      ),
+        ),
     },
     {
       title: t('ruleType'),

src/pages/popup/rules/common/rule-item.tsx

@@ -5,6 +5,7 @@ import type { FC } from 'react';
 import RuleContentSwitcher from '@/share/components/rule-content-switcher';
 import RuleDetail from '@/share/components/rule-detail';
 import type { Rule } from '@/share/core/types';
+import usePref from '@/share/hooks/use-pref';
 import Api from '@/share/pages/api';
 import { textEllipsis } from '@/share/pages/styles';
 import QuickEdit from '../quick-edit';
@@ -38,6 +39,22 @@ const style = css`
 `;
 
 const RuleItem: FC<RuleItemProps> = ({ rule }) => {
+  const [pref] = usePref('show-quick-preview');
+  const showQuickPreview = pref.includes('popup');
+
+  const title = showQuickPreview ? (
+    <Popover
+      showArrow
+      position="top"
+      content={<RuleDetail rule={rule} size="small" />}
+      style={{ maxWidth: '300px' }}
+    >
+      <div className={cx(textEllipsis, 'name')}>{rule.name}</div>
+    </Popover>
+  ) : (
+    <div className={cx(textEllipsis, 'name')}>{rule.name}</div>
+  );
+
   return (
     <div className={style}>
       <Switch
@@ -50,14 +67,7 @@ const RuleItem: FC<RuleItemProps> = ({ rule }) => {
           })
         }
       />
-      <Popover
-        showArrow
-        position="top"
-        content={<RuleDetail rule={rule} size="small" />}
-        style={{ maxWidth: '300px' }}
-      >
-        <div className={cx(textEllipsis, 'name')}>{rule.name}</div>
-      </Popover>
+      {title}
       <div className="actions">
         <QuickEdit rule={rule} />
         <RuleContentSwitcher

src/share/core/constant.ts

@@ -44,6 +44,7 @@ export const defaultPrefValue: PrefValue = {
   'rule-history': true,
   'quick-edit': true,
   'popup-show-rules': 'common',
+  'show-quick-preview': ['popup', 'manage'],
 };
 
 export enum APIs {

src/share/core/types.ts

@@ -100,4 +100,5 @@ export interface PrefValue {
   'rule-history': boolean; // Auto save rule history into quick switch
   'quick-edit': boolean; // Quick edit rule in popup panel
   'popup-show-rules': 'all' | 'common'; // Which rules to show in popup panel
+  'show-quick-preview': Array<'popup' | 'manage'>;
 }

src/share/hooks/use-pref.ts

@@ -4,7 +4,9 @@ import emitter from '../core/emitter';
 import { prefs } from '../core/prefs';
 import type { PrefValue } from '../core/types';
 
-const usePref = <K extends keyof PrefValue>(key: K) => {
+const usePref = <K extends keyof PrefValue>(
+  key: K,
+): [PrefValue[K], (value: PrefValue[K]) => void] => {
   const [state, setState] = useState(defaultPrefValue[key]);
 
   useEffect(() => {