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/board-buttons/board-buttons.tsx

@@ -20,7 +20,7 @@ import CatalogSearch from '../catalog-search';
 import Tooltip from '../tooltip';
 import { ModQueueButton } from '../../views/mod-queue/mod-queue';
 import styles from './board-buttons.module.css';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 
 interface BoardButtonsProps {
   address?: string | undefined;
@@ -510,13 +510,13 @@ const PostPageStats = () => {
   const linkCount = useCountLinksInReplies(comment);
 
   const displayReplyCount = replyCount !== undefined ? replyCount.toString() : '?';
-  const replyCountTooltip = replyCount !== undefined ? _.capitalize(t('replies')) : t('loading');
+  const replyCountTooltip = replyCount !== undefined ? capitalize(t('replies')) : t('loading');
 
   return (
     <span>
-      {pinned && `${_.capitalize(t('sticky'))} / `}
+      {pinned && `${capitalize(t('sticky'))} / `}
-      {closed && `${_.capitalize(t('closed'))} / `}
+      {closed && `${capitalize(t('closed'))} / `}
-      <Tooltip children={displayReplyCount} content={replyCountTooltip} /> / <Tooltip children={linkCount?.toString()} content={_.capitalize(t('links'))} />
+      <Tooltip children={displayReplyCount} content={replyCountTooltip} /> / <Tooltip children={linkCount?.toString()} content={capitalize(t('links'))} />
     </span>
   );
 };

src/components/board-header/board-header.tsx

@@ -14,7 +14,7 @@ import useIsMobile from '../../hooks/use-is-mobile';
 import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline';
 import { shouldShowSnow } from '../../lib/snow';
 import Tooltip from '../tooltip';
-import _ from 'lodash';
+import { startCase } from 'lodash';
 import { BANNERS } from '../../generated/asset-manifest';
 
 const ImageBanner = () => {
@@ -78,7 +78,7 @@ const BoardHeader = () => {
     : isInSubscriptionsView
       ? '/subs/ - Subscriptions'
       : isInModView
-        ? _.startCase(t('boards_you_moderate'))
+        ? startCase(t('boards_you_moderate'))
         : defaultSubplebbit?.title || stableSubplebbit?.title;
   const subtitle = isInAllView ? '' : isInSubscriptionsView ? subscriptionsSubtitle : isInModView ? '/mod/' : `${address || subplebbitAddress || ''}`;
 

src/components/catalog-row/catalog-row.tsx

@@ -22,7 +22,7 @@ import useWindowWidth from '../../hooks/use-window-width';
 import { ContentPreview } from '../../views/home/popular-threads-box';
 import PostMenuDesktop from '../post-desktop/post-menu-desktop';
 import styles from './catalog-row.module.css';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 import { selectPostMenuProps } from '../../lib/utils/post-menu-props';
 
 interface CatalogPostMediaProps {
@@ -286,7 +286,7 @@ const CatalogPost = memo(
                 t('posted_by')
               )}{' '}
               <span className={`${styles.postAuthor} ${isCatalogPostAuthorMod && styles.capcode}`}>
-                {author?.displayName || _.capitalize(t('anonymous'))}
+                {author?.displayName || capitalize(t('anonymous'))}
                 {isCatalogPostAuthorMod && <span className='capitalize'>{` ## Board ${catalogPostAuthorRole}`}</span>}
               </span>
               {(isInAllView || isInSubscriptionsView) && subplebbitAddress && ` to p/${Plebbit.getShortAddress({ address: subplebbitAddress })}`}
@@ -295,7 +295,7 @@ const CatalogPost = memo(
                 <div className={styles.postLast}>
                   {t('last_reply_by')}{' '}
                   <span className={`${styles.postAuthor} ${isLastReplyAuthorMod && styles.capcode}`}>
-                    {lastReply?.author?.displayName || _.capitalize(t('anonymous'))}
+                    {lastReply?.author?.displayName || capitalize(t('anonymous'))}
                     {isLastReplyAuthorMod && ` ## Board ${lastReplyAuthorRole}`}
                   </span>
                   <span className={styles.postAgo}> {getFormattedTimeAgo(lastReply?.timestamp)}</span>

src/components/catalog-search/catalog-search.tsx

@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import styles from './catalog-search.module.css';
 import useIsMobile from '../../hooks/use-is-mobile';
 import useCatalogFiltersStore from '../../stores/use-catalog-filters-store';
-import _ from 'lodash';
+import { debounce } from 'lodash';
 
 const CatalogSearch = () => {
   const { t } = useTranslation();
@@ -44,7 +44,7 @@ const CatalogSearch = () => {
   // Create a debounced version of setSearchFilter and URL update
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedSetSearchFilter = useCallback(
-    _.debounce((text: string) => {
+    debounce((text: string) => {
       if (text.trim()) {
         setSearchFilter(text);
         updateURL(text);

src/components/challenge-modal/challenge-modal.tsx

@@ -6,7 +6,7 @@ import useIsMobile from '../../hooks/use-is-mobile';
 import useChallengesStore from '../../stores/use-challenges-store';
 import useTheme from '../../hooks/use-theme';
 import styles from './challenge-modal.module.css';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 import { useSpring, animated } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 
@@ -269,7 +269,7 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
         {isIframeChallenge && !showIframeConfirmation ? null : (
           <>
             <div className={styles.name}>
-              <input type='text' value={displayName || _.capitalize(t('anonymous'))} disabled />
+              <input type='text' value={displayName || capitalize(t('anonymous'))} disabled />
             </div>
             {title && (
               <div className={styles.subject}>

src/components/comment-content/comment-content.tsx

@@ -14,7 +14,7 @@ import ReplyQuotePreview from '../../components/reply-quote-preview';
 import Markdown from '../../components/markdown';
 import Tooltip from '../../components/tooltip';
 import styles from '../../views/post/post.module.css';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 
 const QuotedCidLink = ({ cid, postCid }: { cid: string; postCid: string }) => {
   const commentFromStore = useSubplebbitsPagesStore((state) => state.comments[cid]);
@@ -88,16 +88,16 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
             <span className={styles.redEditMessage}>({t('this_post_was_removed')})</span>
             <br />
             <br />
-            <span className={styles.grayEditMessage}>{`${_.capitalize(t('reason'))}: "${reason}"`}</span>
+            <span className={styles.grayEditMessage}>{`${capitalize(t('reason'))}: "${reason}"`}</span>
           </>
         ) : (
-          <span className={styles.grayEditMessage}>{_.capitalize(t('this_post_was_removed'))}.</span>
+          <span className={styles.grayEditMessage}>{capitalize(t('this_post_was_removed'))}.</span>
         )
       ) : deleted ? (
         reason ? (
           <>
             <span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>{' '}
-            <span className={styles.grayEditMessage}>{`${_.capitalize(t('reason'))}: "${reason}"`}</span>
+            <span className={styles.grayEditMessage}>{`${capitalize(t('reason'))}: "${reason}"`}</span>
           </>
         ) : (
           <span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>
@@ -159,7 +159,7 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
               address: subplebbitAddress && Plebbit.getShortAddress({ address: subplebbitAddress }),
               timestamp: getFormattedDate(post?.author?.subplebbit?.banExpiresAt),
               interpolation: { escapeValue: false },
-            })}${reason ? `. ${_.capitalize(t('reason'))}: "${reason}"` : ''}`}
+            })}${reason ? `. ${capitalize(t('reason'))}: "${reason}"` : ''}`}
           />
         </span>
       )}

src/components/edit-menu/edit-menu.tsx

@@ -12,7 +12,7 @@ import {
 import styles from './edit-menu.module.css';
 import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
 import useChallengesStore from '../../stores/use-challenges-store';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 import useIsMobile from '../../hooks/use-is-mobile';
 import useAuthorPrivileges from '../../hooks/use-author-privileges';
 
@@ -277,14 +277,14 @@ const EditMenu = ({ post }: { post: Comment }) => {
                     <label>
                       [
                       <input onChange={onCheckbox} checked={publishCommentEditOptions.deleted ?? false} type='checkbox' id='deleted' />
-                      {_.capitalize(t('delete'))}?]
+                      {capitalize(t('delete'))}?]
                     </label>
                   </div>
                   <div className={styles.menuItem}>
                     <label>
                       [
                       <input type='checkbox' onChange={() => setIsContentEditorOpen(!isContentEditorOpen)} checked={isContentEditorOpen} />
-                      {_.capitalize(t('edit'))}?]
+                      {capitalize(t('edit'))}?]
                     </label>
                   </div>
                   {isContentEditorOpen && (
@@ -307,13 +307,13 @@ const EditMenu = ({ post }: { post: Comment }) => {
                     <label>
                       [
                       <input onChange={onCheckbox} checked={publishCommentEditOptions.commentModeration?.removed ?? false} type='checkbox' id='removed' />
-                      {_.capitalize(t('remove'))}?]
+                      {capitalize(t('remove'))}?]
                     </label>{' '}
                     <span className={styles.purgeItem}>
                       <label>
                         [
                         <input onChange={onPurgeCheckbox} checked={publishCommentEditOptions.commentModeration?.purged ?? false} type='checkbox' id='purged' />
-                        {_.capitalize(t('purge'))}?]
+                        {capitalize(t('purge'))}?]
                       </label>
                     </span>
                   </div>
@@ -322,7 +322,7 @@ const EditMenu = ({ post }: { post: Comment }) => {
                       [
                       <label>
                         <input onChange={onCheckbox} checked={publishCommentEditOptions.commentModeration?.locked ?? false} type='checkbox' id='locked' />
-                        {_.capitalize(t('close_thread'))}?
+                        {capitalize(t('close_thread'))}?
                       </label>
                       ]
                     </div>
@@ -331,7 +331,7 @@ const EditMenu = ({ post }: { post: Comment }) => {
                     [
                     <label>
                       <input onChange={onCheckbox} checked={publishCommentEditOptions.commentModeration?.spoiler ?? false} type='checkbox' id='spoiler' />
-                      {_.capitalize(t('spoiler'))}?
+                      {capitalize(t('spoiler'))}?
                     </label>
                     ]
                   </div>
@@ -339,7 +339,7 @@ const EditMenu = ({ post }: { post: Comment }) => {
                     [
                     <label>
                       <input onChange={onCheckbox} checked={publishCommentEditOptions.commentModeration?.pinned ?? false} type='checkbox' id='pinned' />
-                      {_.capitalize(t('sticky'))}?
+                      {capitalize(t('sticky'))}?
                     </label>
                     ]
                   </div>
@@ -378,7 +378,7 @@ const EditMenu = ({ post }: { post: Comment }) => {
                 </>
               )}
               <div className={`${styles.menuItem} ${styles.menuReason}`}>
-                {_.capitalize(t('reason'))}? ({t('optional')})
+                {capitalize(t('reason'))}? ({t('optional')})
                 <input
                   type='text'
                   value={publishCommentEditOptions.reason || ''}

src/components/post-desktop/post-desktop.tsx

@@ -33,7 +33,7 @@ import ReplyQuotePreview from '../reply-quote-preview';
 import Tooltip from '../tooltip';
 import { PostProps } from '../../views/post/post';
 import { create } from 'zustand';
-import _ from 'lodash';
+import { capitalize, lowerCase } from 'lodash';
 import { shouldShowSnow } from '../../lib/snow';
 import useReplyModalStore from '../../stores/use-reply-modal-store';
 import { selectPostMenuProps } from '../../lib/utils/post-menu-props';
@@ -241,9 +241,9 @@ const PostInfo = ({
         <span className={styles.nameBlock}>
           <span className={`${styles.name} ${authorRole && !(deleted || removed) && (authorRole === 'mod' ? styles.capcodeMod : styles.capcodeAdmin)}`}>
             {deleted ? (
-              _.capitalize(t('deleted'))
+              capitalize(t('deleted'))
             ) : removed ? (
-              _.capitalize(t('removed'))
+              capitalize(t('removed'))
             ) : displayName ? (
               displayName.length <= 20 ? (
                 displayName
@@ -254,7 +254,7 @@ const PostInfo = ({
                 />
               )
             ) : (
-              _.capitalize(t('anonymous'))
+              capitalize(t('anonymous'))
             )}
             {!(deleted || removed) && authorRole && (
               <span className='capitalize'>
@@ -328,7 +328,7 @@ const PostInfo = ({
             <>
               <span>No.</span>
               <span className={styles.pendingCid}>
-                {state === 'failed' || stateString === 'Failed' ? _.capitalize(t('failed')) : state === 'pending' ? _.capitalize(t('pending')) : ''}
+                {state === 'failed' || stateString === 'Failed' ? capitalize(t('failed')) : state === 'pending' ? capitalize(t('pending')) : ''}
               </span>
             </>
           )}
@@ -346,7 +346,7 @@ const PostInfo = ({
             <span className={styles.replyButton}>
               [
               <Link to={boardPath ? `/${boardPath}/thread/${postCid}` : `/thread/${postCid}`} onClick={(e) => !cid && e.preventDefault()}>
-                {_.capitalize(t('reply'))}
+                {capitalize(t('reply'))}
               </Link>
               ]
             </span>
@@ -507,9 +507,9 @@ const PostMedia = ({
         )}
         {t('link')}:{' '}
         <a href={url} target='_blank' rel='noopener noreferrer'>
-          {spoiler ? _.capitalize(t('spoiler')) : url && url.length > 30 ? url.slice(0, 30) + '...' : url}
+          {spoiler ? capitalize(t('spoiler')) : url && url.length > 30 ? url.slice(0, 30) + '...' : url}
         </a>{' '}
-        ({type && _.lowerCase(getDisplayMediaInfoType(type, t))}
+        ({type && lowerCase(getDisplayMediaInfoType(type, t))}
         {mediaDimensions && `, ${mediaDimensions}`})
         {!showThumbnail && (type === 'iframe' || type === 'video' || type === 'audio') && (
           <span>

src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx

@@ -12,7 +12,7 @@ import { getBoardPath } from '../../../lib/utils/route-utils';
 import { useDirectories } from '../../../hooks/use-directories';
 import { isAllView, isCatalogView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
 import useHide from '../../../hooks/use-hide';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 import { PostMenuProps } from '../../../lib/utils/post-menu-props';
 
 type CopyLinkButtonProps =
@@ -99,7 +99,7 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
       ref={refs.setReference}
       onClick={onClose}
     >
-      {_.capitalize(t('image_search'))} »
+      {capitalize(t('image_search'))} »
       {isImageSearchMenuOpen && (
         <div ref={refs.setFloating} style={floatingStyles} className={styles.dropdownMenu}>
           <a href={`https://lens.google.com/uploadbyurl?url=${url}`} target='_blank' rel='noreferrer'>

src/components/post-form/post-form.tsx

@@ -18,7 +18,7 @@ import usePublishReply from '../../hooks/use-publish-reply';
 import FileUploader from '../../plugins/file-uploader';
 import styles from './post-form.module.css';
 import { Capacitor } from '@capacitor/core';
-import _ from 'lodash';
+import { capitalize, debounce } from 'lodash';
 
 const isAndroid = Capacitor.getPlatform() === 'android';
 
@@ -79,7 +79,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
   const [lengthError, setLengthError] = useState<string | null>(null);
 
   const checkContentLength = useRef(
-    _.debounce((content: string, t: Function) => {
+    debounce((content: string, t: Function) => {
       const length = content.trim().length;
       if (length > 2000) {
         setLengthError(`${t('error')}: ${t('comment_field_too_long', { length })}`);
@@ -247,7 +247,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
           <td>
             <input
               type='text'
-              placeholder={!displayName ? _.capitalize(t('anonymous')) : undefined}
+              placeholder={!displayName ? capitalize(t('anonymous')) : undefined}
               defaultValue={displayName || undefined}
               onChange={(e) => {
                 const newDisplayName = e.target.value.trim() || undefined;
@@ -326,7 +326,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
                 type='checkbox'
                 onChange={(e) => (isInPostView ? setPublishReplyOptions({ spoiler: e.target.checked }) : setPublishPostOptions({ spoiler: e.target.checked }))}
               />
-              {_.capitalize(t('spoiler'))}?
+              {capitalize(t('spoiler'))}?
             </label>
             ]
           </td>

src/components/post-mobile/post-mobile.tsx

@@ -30,7 +30,7 @@ import PostMenuMobile from './post-menu-mobile';
 import ReplyQuotePreview from '../reply-quote-preview';
 import Tooltip from '../tooltip';
 import { PostProps } from '../../views/post/post';
-import _ from 'lodash';
+import { capitalize, lowerCase } from 'lodash';
 import useReplyModalStore from '../../stores/use-reply-modal-store';
 import { selectPostMenuProps } from '../../lib/utils/post-menu-props';
 import useChallengesStore from '../../stores/use-challenges-store';
@@ -204,9 +204,9 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
           <span className={styles.nameBlock}>
             <span className={`${styles.name} ${authorRole && !(deleted || removed) && (authorRole === 'mod' ? styles.capcodeMod : styles.capcodeAdmin)}`}>
               {removed ? (
-                _.capitalize(t('removed'))
+                capitalize(t('removed'))
               ) : deleted ? (
-                _.capitalize(t('deleted'))
+                capitalize(t('deleted'))
               ) : displayName ? (
                 displayName.length <= 20 ? (
                   displayName
@@ -217,7 +217,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
                   />
                 )
               ) : (
-                _.capitalize(t('anonymous'))
+                capitalize(t('anonymous'))
               )}{' '}
               {!(deleted || removed) && authorRole && (
                 <span className='capitalize'>
@@ -242,9 +242,9 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
               <>
                 (ID: {''}
                 {removed ? (
-                  _.lowerCase(t('removed'))
+                  lowerCase(t('removed'))
                 ) : deleted ? (
-                  _.lowerCase(t('deleted'))
+                  lowerCase(t('deleted'))
                 ) : (
                   <Tooltip
                     children={
@@ -320,7 +320,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
               <>
                 <span>No.</span>
                 <span className={styles.pendingCid}>
-                  {state === 'failed' || stateString === 'Failed' ? _.capitalize(t('failed')) : state === 'pending' ? _.capitalize(t('pending')) : ''}
+                  {state === 'failed' || stateString === 'Failed' ? capitalize(t('failed')) : state === 'pending' ? capitalize(t('pending')) : ''}
                 </span>
               </>
             )}

src/components/reply-modal/reply-modal.tsx

@@ -13,7 +13,7 @@ import usePublishReply from '../../hooks/use-publish-reply';
 import useIsMobile from '../../hooks/use-is-mobile';
 import styles from './reply-modal.module.css';
 import { LinkTypePreviewer } from '../post-form';
-import _ from 'lodash';
+import { capitalize, debounce } from 'lodash';
 import FileUploader from '../../plugins/file-uploader';
 import { Capacitor } from '@capacitor/core';
 import { useSpring, animated } from '@react-spring/web';
@@ -56,7 +56,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
   const [lengthError, setLengthError] = useState<string | null>(null);
 
   const checkContentLength = useRef(
-    _.debounce((content: string, t: Function) => {
+    debounce((content: string, t: Function) => {
       const length = content.trim().length;
       if (length > 2000) {
         setError(null);
@@ -327,7 +327,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
           <input
             type='text'
             defaultValue={displayName}
-            placeholder={displayName ? undefined : _.capitalize(t('name'))}
+            placeholder={displayName ? undefined : capitalize(t('name'))}
             onChange={(e) => {
               setAccount({ ...account, author: { ...account?.author, displayName: e.target.value } });
               setPublishReplyOptions({ displayName: e.target.value });
@@ -338,7 +338,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
           <input
             type='text'
             ref={urlRef}
-            placeholder={_.capitalize(t('link'))}
+            placeholder={capitalize(t('link'))}
             onChange={(e) => {
               setUrl(e.target.value);
               setPublishReplyOptions({ link: e.target.value });
@@ -386,7 +386,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
             [
             <label>
               <input type='checkbox' onChange={(e) => setPublishReplyOptions({ spoiler: e.target.checked })} />
-              {_.capitalize(t('spoiler'))}?
+              {capitalize(t('spoiler'))}?
             </label>
             ]
           </span>

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>
   );

src/components/topbar/topbar.tsx

@@ -15,14 +15,14 @@ import useTopbarVisibilityStore from '../../stores/use-topbar-visibility-store';
 import useDirectoryModalStore from '../../stores/use-directory-modal-store';
 import { BOARD_CODE_GROUPS, getAllBoardCodes } from '../../constants/board-codes';
 import styles from './topbar.module.css';
-import _, { debounce } from 'lodash';
+import { capitalize, debounce, lowerCase } from 'lodash';
 
 const SearchBar = ({ setShowSearchBar }: { setShowSearchBar: (show: boolean) => void }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const searchBarRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
-  const placeholder = _.lowerCase(t('enter_board_address'));
+  const placeholder = lowerCase(t('enter_board_address'));
 
   useEffect(() => {
     searchInputRef.current?.focus();
@@ -229,7 +229,7 @@ const TopBarDesktop = () => {
         )}
         [
         <span className={styles.temporaryButton} onClick={() => openTopbarEditModal()} style={{ cursor: 'pointer' }}>
-          {_.capitalize(t('edit'))}
+          {capitalize(t('edit'))}
         </span>
         ] [
         <span className={styles.temporaryButton} onClick={() => openCreateBoardModal()} style={{ cursor: 'pointer' }}>
@@ -338,7 +338,7 @@ const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
       </div>
       <div className={styles.pageJump}>
         <Link to={useLocation().pathname.replace(/\/$/, '') + '/settings'}>{t('settings')}</Link>
-        <span onClick={() => setShowSearchBar(!showSearchBar)}>{_.capitalize(t('search'))}</span>
+        <span onClick={() => setShowSearchBar(!showSearchBar)}>{capitalize(t('search'))}</span>
         <Link to='/'>{t('home')}</Link>
         {showSearchBar && <SearchBar setShowSearchBar={setShowSearchBar} />}
       </div>

src/views/home/home.tsx

@@ -12,7 +12,7 @@ import useDirectoryModalStore from '../../stores/use-directory-modal-store';
 import DisclaimerModal from '../../components/disclaimer-modal';
 import DirectoryModal from '../../components/directory-modal';
 import { getBoardPath } from '../../lib/utils/route-utils';
-import _ from 'lodash';
+import { lowerCase } from 'lodash';
 
 // https://github.com/plebbit/lists/blob/master/5chan-directories.json
 
@@ -40,7 +40,7 @@ const SearchBar = () => {
           spellCheck='false'
           autoCapitalize='off'
           type='text'
-          placeholder={_.lowerCase(t('enter_board_address'))}
+          placeholder={lowerCase(t('enter_board_address'))}
           ref={searchInputRef}
         />
         <button className={styles.searchButton}>{t('go')}</button>

src/views/mod-queue/mod-queue.tsx

@@ -21,7 +21,7 @@ import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-util
 import Tooltip from '../../components/tooltip';
 import useIsMobile from '../../hooks/use-is-mobile';
 import { Post } from '../post/post';
-import _ from 'lodash';
+import { capitalize, lowerCase } from 'lodash';
 
 const { addChallenge } = useChallengesStore.getState();
 
@@ -273,7 +273,7 @@ const ModQueueRow = ({ comment, isOdd = false }: ModQueueRowProps) => {
           <Tooltip children={<span>{getFormattedDate(timestamp)}</span>} content={getFormattedTimeAgo(timestamp)} />
         )}
       </div>
-      <div className={styles.type}>{isReply ? _.capitalize(t('reply')) : _.capitalize(t('post'))}</div>
+      <div className={styles.type}>{isReply ? capitalize(t('reply')) : capitalize(t('post'))}</div>
       <div className={styles.image}>{hasThumbnail ? t('yes') : t('no')}</div>
       <div className={styles.actions}>{renderActions()}</div>
     </div>
@@ -390,7 +390,7 @@ const ModQueueCard = ({ comment }: ModQueueCardProps) => {
         ) : (
           <span title={excerpt}>{excerpt}</span>
         )}{' '}
-        / {t('type')}: {isReply ? t('reply') : t('post')} / {_.capitalize(t('image'))}: {hasThumbnail ? _.lowerCase(t('yes')) : _.lowerCase(t('no'))}
+        / {t('type')}: {isReply ? t('reply') : t('post')} / {capitalize(t('image'))}: {hasThumbnail ? lowerCase(t('yes')) : lowerCase(t('no'))}
       </div>
       {renderActions()}
     </div>