refactor: replace default lodash imports with named imports

Replaced `import _ from 'lodash'` with specific named imports (`capitalize`, `lowerCase`, `debounce`, `startCase`) across 18 files. This reduces bundle size and improves tree-shaking efficiency.

src/components/settings-modal/avatar-settings/avatar-settings.tsx

@@ -5,7 +5,7 @@ import styles from './avatar-settings.module.css';
 import { Trans, useTranslation } from 'react-i18next';
 import LoadingEllipsis from '../../loading-ellipsis';
 import ErrorDisplay from '../../error-display/error-display';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 
 const AvatarPreview = ({ avatar }: any) => {
   const { t } = useTranslation();
@@ -132,7 +132,7 @@ const AvatarSettings = () => {
       <AvatarPreview avatar={avatar} />
       <div className={styles.avatarSettingsForm}>
         <div className={`${styles.settingField} ${styles.step1}`}>
-          <span className={styles.settingTitle}>{_.capitalize(t('chain_ticker'))}: </span>
+          <span className={styles.settingTitle}>{capitalize(t('chain_ticker'))}: </span>
           <input
             type='text'
             placeholder='eth/sol/matic'
@@ -197,7 +197,7 @@ const AvatarSettings = () => {
           </span>
         </div>
         <div className={styles.settingField}>
-          <span className={`${styles.settingTitle} ${styles.timestampfield}`}>{_.capitalize(t('timestamp'))}: </span>
+          <span className={`${styles.settingTitle} ${styles.timestampfield}`}>{capitalize(t('timestamp'))}: </span>
           <input
             type='text'
             placeholder='1234567890'
@@ -209,7 +209,7 @@ const AvatarSettings = () => {
           />
         </div>
         <div className={`${styles.settingField} ${styles.step5}`}>
-          <span className={styles.settingTitle}>{_.capitalize(t('paste_signature'))}: </span>
+          <span className={styles.settingTitle}>{capitalize(t('paste_signature'))}: </span>
           <input
             type='text'
             placeholder='0x...'

src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Account, setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
 import styles from './crypto-wallets-setting.module.css';
 import { Trans, useTranslation } from 'react-i18next';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 
 interface Wallet {
   chainTicker: string;
@@ -102,7 +102,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
     walletsArray.length > 0 ? (
       <div key={selectedWallet} className={styles.walletBox}>
         <div className={`${styles.walletField} ${styles.step1}`}>
-          <span className={styles.walletFieldTitle}>{_.capitalize(t('chain_ticker'))}: </span>
+          <span className={styles.walletFieldTitle}>{capitalize(t('chain_ticker'))}: </span>
           <input
             type='text'
             onChange={(e) => setWalletsArrayProperty(selectedWallet, 'chainTicker', e.target.value)}
@@ -111,7 +111,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
           />
         </div>
         <div className={`${styles.walletField} ${styles.step2}`}>
-          <span className={styles.walletFieldTitle}>{_.capitalize(t('wallet_address'))}: </span>
+          <span className={styles.walletFieldTitle}>{capitalize(t('wallet_address'))}: </span>
           <input
             type='text'
             onChange={(e) => setWalletsArrayProperty(selectedWallet, 'address', e.target.value)}
@@ -133,7 +133,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
           </span>
         </div>
         <div className={styles.walletField}>
-          <span className={`${styles.walletFieldTitle} ${styles.timestampfield}`}>{_.capitalize(t('timestamp'))}: </span>
+          <span className={`${styles.walletFieldTitle} ${styles.timestampfield}`}>{capitalize(t('timestamp'))}: </span>
           <input
             type='text'
             onChange={(e) => setWalletsArrayProperty(selectedWallet, 'timestamp', Number(e.target.value))}
@@ -142,7 +142,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
           />
         </div>
         <div className={`${styles.walletField} ${styles.step4}`}>
-          <span className={styles.walletFieldTitle}>{_.capitalize(t('paste_signature'))}: </span>
+          <span className={styles.walletFieldTitle}>{capitalize(t('paste_signature'))}: </span>
           <input
             type='text'
             onChange={(e) => setWalletsArrayProperty(selectedWallet, 'signature', e.target.value)}

src/components/settings-modal/interface-settings/interface-settings.tsx

@@ -4,7 +4,7 @@ import useAvatarVisibilityStore from '../../../stores/use-avatar-visibility-stor
 import useTheme from '../../../hooks/use-theme';
 import packageJson from '../../../../package.json';
 import styles from './interface-settings.module.css';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 import useInterfaceSettingsStore from '../../../stores/use-interface-settings-store';
 import useCatalogFiltersStore from '../../../stores/use-catalog-filters-store';
 import useExpandedMediaStore from '../../../stores/use-expanded-media-store';
@@ -138,16 +138,16 @@ const InterfaceSettings = () => {
   return (
     <div className={styles.interfaceSettings}>
       <div className={styles.version}>
-        {_.capitalize(t('version'))}: <Version />
+        {capitalize(t('version'))}: <Version />
       </div>
       <div className={styles.setting}>
-        {_.capitalize(t('update'))}: <CheckForUpdates />
+        {capitalize(t('update'))}: <CheckForUpdates />
       </div>
       <div className={styles.setting}>
-        {_.capitalize(t('style'))}: <Style />
+        {capitalize(t('style'))}: <Style />
       </div>
       <div className={styles.setting}>
-        {_.capitalize(t('interface_language'))}: <InterfaceLanguage />
+        {capitalize(t('interface_language'))}: <InterfaceLanguage />
       </div>
       <div className={styles.setting}>
         <label>
@@ -159,22 +159,22 @@ const InterfaceSettings = () => {
               setShowTextOnlyThreads(!e.target.checked);
             }}
           />
-          {_.capitalize(t('hide_threads_without_images'))}
+          {capitalize(t('hide_threads_without_images'))}
         </label>
-        <div className={styles.settingTip}>{_.capitalize(t('threads_without_images_tip'))}</div>
+        <div className={styles.settingTip}>{capitalize(t('threads_without_images_tip'))}</div>
       </div>
       <div className={styles.setting}>
         <label>
           <input type='checkbox' checked={fitExpandedImagesToScreen} onChange={(e) => setFitExpandedImagesToScreen(e.target.checked)} />
-          {_.capitalize(t('fit_expanded_images_to_screen'))}
+          {capitalize(t('fit_expanded_images_to_screen'))}
         </label>
-        <div className={styles.settingTip}>{_.capitalize(t('fit_expanded_images_to_screen_tip'))}</div>
+        <div className={styles.settingTip}>{capitalize(t('fit_expanded_images_to_screen_tip'))}</div>
       </div>
       <div className={styles.setting}>
         <label>
-          <input type='checkbox' checked={hideAvatars} onChange={handleHideAvatarsChange} /> {_.capitalize(t('hide_avatars'))}
+          <input type='checkbox' checked={hideAvatars} onChange={handleHideAvatarsChange} /> {capitalize(t('hide_avatars'))}
         </label>
-        <div className={styles.settingTip}>{_.capitalize(t('hide_avatars_tip'))}</div>
+        <div className={styles.settingTip}>{capitalize(t('hide_avatars_tip'))}</div>
       </div>
     </div>
   );