Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿

refactor: remove GlobalShortcuts and ShortcutsModal components to streamline layout and eliminate unused code

yoginth.com 963402cb 41e789b3

verified
+1 -117
-2
apps/web/src/components/Common/Layout.tsx
··· 8 8 import FullPageLoader from "@/components/Shared/FullPageLoader"; 9 9 import GlobalAlerts from "@/components/Shared/GlobalAlerts"; 10 10 import GlobalModals from "@/components/Shared/GlobalModals"; 11 - import GlobalShortcuts from "@/components/Shared/GlobalShortcuts"; 12 11 import Navbar from "@/components/Shared/Navbar"; 13 12 import BottomNavigation from "@/components/Shared/Navbar/BottomNavigation"; 14 13 import { Spinner } from "@/components/Shared/UI"; ··· 74 73 style: { boxShadow: "none", fontSize: "16px" } 75 74 }} 76 75 /> 77 - <GlobalShortcuts /> 78 76 <GlobalModals /> 79 77 <GlobalAlerts /> 80 78 <ReloadTabsWatcher />
+1 -5
apps/web/src/components/Composer/NewPublication.tsx
··· 4 4 import type { IGif } from "@hey/types/giphy"; 5 5 import type { NewAttachment } from "@hey/types/misc"; 6 6 import { useCallback, useEffect, useState } from "react"; 7 - import { useHotkeys } from "react-hotkeys-hook"; 8 7 import { toast } from "sonner"; 9 8 import Attachment from "@/components/Composer/Actions/Attachment"; 10 9 import CollectSettings from "@/components/Composer/Actions/CollectSettings"; ··· 19 18 import collectActionParams from "@/helpers/collectActionParams"; 20 19 import errorToast from "@/helpers/errorToast"; 21 20 import getMentions from "@/helpers/getMentions"; 22 - import KeyboardShortcuts from "@/helpers/shortcuts"; 23 21 import uploadMetadata from "@/helpers/uploadMetadata"; 24 22 import useCreatePost from "@/hooks/useCreatePost"; 25 23 import useEditPost from "@/hooks/useEditPost"; ··· 240 238 addAttachments([attachment]); 241 239 }; 242 240 243 - useHotkeys(KeyboardShortcuts.CreatePost.key, () => handleCreatePost(), { 244 - enableOnContentEditable: true 245 - }); 241 + // Removed keyboard shortcut for create post 246 242 247 243 return ( 248 244 <Card className={className} onClick={() => setShowEmojiPicker(false)}>
-12
apps/web/src/components/Shared/GlobalModals.tsx
··· 7 7 import ReportAccount from "@/components/Shared/Modal/ReportAccount"; 8 8 import ReportPost from "@/components/Shared/Modal/ReportPost"; 9 9 import Subscribe from "@/components/Shared/Modal/Subscribe"; 10 - import ShortcutsModal from "@/components/Shared/ShortcutsModal"; 11 10 import { Modal } from "@/components/Shared/UI"; 12 11 import { useAuthModalStore } from "@/store/non-persisted/modal/useAuthModalStore"; 13 12 import { useFundModalStore } from "@/store/non-persisted/modal/useFundModalStore"; ··· 15 14 import { useProModalStore } from "@/store/non-persisted/modal/useProModalStore"; 16 15 import { useReportAccountModalStore } from "@/store/non-persisted/modal/useReportAccountModalStore"; 17 16 import { useReportPostModalStore } from "@/store/non-persisted/modal/useReportPostModalStore"; 18 - import { useShortcutsModalStore } from "@/store/non-persisted/modal/useShortcutsModalStore"; 19 17 import { useSuperFollowModalStore } from "@/store/non-persisted/modal/useSuperFollowModalStore"; 20 18 import { useSuperJoinModalStore } from "@/store/non-persisted/modal/useSuperJoinModalStore"; 21 19 import { useSwitchAccountModalStore } from "@/store/non-persisted/modal/useSwitchAccountModalStore"; ··· 49 47 superFollowingAccount 50 48 } = useSuperFollowModalStore(); 51 49 const { show: showProModal, setShow: setShowProModal } = useProModalStore(); 52 - const { show: showShortcutsModal, setShow: setShowShortcutsModal } = 53 - useShortcutsModalStore(); 54 - 55 50 const { screen: signupScreen } = useSignupStore(); 56 51 57 52 const authModalTitle = ··· 133 128 size="md" 134 129 > 135 130 <Subscribe /> 136 - </Modal> 137 - <Modal 138 - onClose={() => setShowShortcutsModal(false)} 139 - show={showShortcutsModal} 140 - title="Keyboard Shortcuts" 141 - > 142 - <ShortcutsModal /> 143 131 </Modal> 144 132 </> 145 133 );
-56
apps/web/src/components/Shared/GlobalShortcuts.tsx
··· 1 - import getAccount from "@hey/helpers/getAccount"; 2 - import { useHotkeys } from "react-hotkeys-hook"; 3 - import { useNavigate } from "react-router"; 4 - import KeyboardShortcuts from "@/helpers/shortcuts"; 5 - import { useShortcutsModalStore } from "@/store/non-persisted/modal/useShortcutsModalStore"; 6 - import { useAccountStore } from "@/store/persisted/useAccountStore"; 7 - 8 - const GlobalShortcuts = () => { 9 - const navigate = useNavigate(); 10 - const { currentAccount } = useAccountStore(); 11 - const { setShow: setShowShortcutsModal } = useShortcutsModalStore(); 12 - 13 - // Go to account 14 - useHotkeys(KeyboardShortcuts.GoToAccount.key, () => { 15 - navigate(getAccount(currentAccount).link); 16 - }); 17 - 18 - // Go to home 19 - useHotkeys(KeyboardShortcuts.GoToHome.key, () => { 20 - navigate("/"); 21 - }); 22 - 23 - // Go to explore 24 - useHotkeys(KeyboardShortcuts.GoToExplore.key, () => { 25 - navigate("/explore"); 26 - }); 27 - 28 - // Go to notifications 29 - useHotkeys(KeyboardShortcuts.GoToNotifications.key, () => { 30 - navigate("/notifications"); 31 - }); 32 - 33 - // Go to search 34 - useHotkeys(KeyboardShortcuts.GoToSearch.key, () => { 35 - navigate("/search"); 36 - }); 37 - 38 - // Go to bookmarks 39 - useHotkeys(KeyboardShortcuts.GoToBookmarks.key, () => { 40 - navigate("/bookmarks"); 41 - }); 42 - 43 - // Go to settings 44 - useHotkeys(KeyboardShortcuts.GoToSettings.key, () => { 45 - navigate("/settings"); 46 - }); 47 - 48 - // Show shortcuts modal 49 - useHotkeys(KeyboardShortcuts.ThisModal.key, () => { 50 - setShowShortcutsModal(true); 51 - }); 52 - 53 - return null; 54 - }; 55 - 56 - export default GlobalShortcuts;
-21
apps/web/src/components/Shared/ShortcutsModal.tsx
··· 1 - import KeyboardShortcuts from "@/helpers/shortcuts"; 2 - 3 - const ShortcutsModal = () => { 4 - return ( 5 - <div className="max-h-[60vh] overflow-y-auto p-5"> 6 - <ul className="space-y-2"> 7 - {Object.entries(KeyboardShortcuts).map(([id, shortcut]) => ( 8 - <li 9 - className="flex items-center justify-between rounded-md bg-gray-100 p-2 dark:bg-gray-700" 10 - key={id} 11 - > 12 - <span className="font-mono text-sm">{shortcut.key}</span> 13 - <span className="text-sm">{shortcut.name}</span> 14 - </li> 15 - ))} 16 - </ul> 17 - </div> 18 - ); 19 - }; 20 - 21 - export default ShortcutsModal;
-16
apps/web/src/helpers/shortcuts.ts
··· 1 - const KeyboardShortcuts = { 2 - CreatePost: { 3 - key: "mod+enter", 4 - name: "Create Post/Comment" 5 - }, 6 - GoToAccount: { key: "g+p", name: "Go to Account" }, 7 - GoToBookmarks: { key: "g+b", name: "Go to Bookmarks" }, 8 - GoToExplore: { key: "g+e", name: "Go to Explore" }, 9 - GoToHome: { key: "g+h", name: "Go to Home" }, 10 - GoToNotifications: { key: "g+n", name: "Go to Notifications" }, 11 - GoToSearch: { key: "g+s", name: "Go to Search" }, 12 - GoToSettings: { key: "g+t", name: "Go to Settings" }, 13 - ThisModal: { key: "?", name: "Shortcut help" } 14 - }; 15 - 16 - export default KeyboardShortcuts;
-5
apps/web/src/store/non-persisted/modal/useShortcutsModalStore.ts
··· 1 - import { createToggleStore } from "@/store/createToggleStore"; 2 - 3 - const { useStore: useShortcutsModalStore } = createToggleStore(); 4 - 5 - export { useShortcutsModalStore };