Peak to Peek

components/system/Taskbar/TaskbarEntry/Peek/StyledPeekWindow.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const StyledPeakWindow = styled.div`
+const StyledPeekWindow = styled.div`
   background-color: ${({ theme }) => theme.colors.taskbar.hover};
   border: ${({ theme }) => `1px solid ${theme.colors.taskbar.background}`};
   border-bottom: 0;
@@ -39,4 +39,4 @@ const StyledPeakWindow = styled.div`
   }
 `;
 
-export default StyledPeakWindow;
+export default StyledPeekWindow;

components/system/Taskbar/TaskbarEntry/Peek/useWindowPeek.tsx

@@ -1,4 +1,4 @@
-import StyledPeakWindow from 'components/system/Taskbar/TaskbarEntry/Peak/StyledPeakWindow';
+import StyledPeekWindow from 'components/system/Taskbar/TaskbarEntry/Peek/StyledPeekWindow';
 import useWindowActions from 'components/system/Window/Titlebar/useWindowActions';
 import { CloseIcon } from 'components/system/Window/Titlebar/WindowActionIcons';
 import { useProcesses } from 'contexts/process';
@@ -7,15 +7,15 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import Button from 'styles/common/Button';
 import { MILLISECONDS_IN_SECOND } from 'utils/constants';
 
-type WindowPeak = {
-  PeakComponent?: React.ComponentType;
-  peakEvents: {
+type WindowPeek = {
+  PeekComponent?: React.ComponentType;
+  peekEvents: {
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
   };
 };
 
-const useWindowPeak = (id: string): WindowPeak => {
+const useWindowPeek = (id: string): WindowPeek => {
   const {
     processes: {
       [id]: { componentWindow = undefined, minimized = false, title = '' } = {}
@@ -23,16 +23,16 @@ const useWindowPeak = (id: string): WindowPeak => {
   } = useProcesses();
   const mouseTimer = useRef<NodeJS.Timer | null>(null);
   const previewTimer = useRef<NodeJS.Timer | null>(null);
-  const [showPeak, setShowPeak] = useState(false);
+  const [showPeek, setShowPeek] = useState(false);
   const [previewSrc, setPreviewSrc] = useState('');
   const { onClose } = useWindowActions(id);
-  const PeakWindow = (): JSX.Element => (
-    <StyledPeakWindow>
+  const PeekWindow = (): JSX.Element => (
+    <StyledPeekWindow>
       <img alt={title} src={previewSrc} />
       <Button onClick={onClose} title="Close">
         <CloseIcon />
       </Button>
-    </StyledPeakWindow>
+    </StyledPeekWindow>
   );
   const onMouseEnter = () => {
     if (componentWindow) {
@@ -46,7 +46,7 @@ const useWindowPeak = (id: string): WindowPeak => {
 
       mouseTimer.current = setTimeout(() => {
         renderFrame();
-        setShowPeak(true);
+        setShowPeek(true);
         previewTimer.current = setInterval(renderFrame, MILLISECONDS_IN_SECOND);
       }, MILLISECONDS_IN_SECOND / 2);
     }
@@ -55,13 +55,13 @@ const useWindowPeak = (id: string): WindowPeak => {
     if (mouseTimer?.current) clearTimeout(mouseTimer.current);
     if (previewTimer?.current) clearInterval(previewTimer.current);
 
-    setShowPeak(false);
+    setShowPeek(false);
     setPreviewSrc('');
   }, []);
 
   useEffect(() => {
     if (minimized) {
-      setShowPeak(false);
+      setShowPeek(false);
       setPreviewSrc('');
     }
   }, [minimized]);
@@ -69,8 +69,8 @@ const useWindowPeak = (id: string): WindowPeak => {
   useEffect(() => onMouseLeave, [onMouseLeave]);
 
   return {
-    PeakComponent: showPeak && previewSrc ? PeakWindow : undefined,
-    peakEvents: minimized
+    PeekComponent: showPeek && previewSrc ? PeekWindow : undefined,
+    peekEvents: minimized
       ? {}
       : {
           onMouseEnter,
@@ -79,4 +79,4 @@ const useWindowPeak = (id: string): WindowPeak => {
   };
 };
 
-export default useWindowPeak;
+export default useWindowPeek;

components/system/Taskbar/TaskbarEntry/index.tsx

@@ -1,4 +1,4 @@
-import useWindowPeak from 'components/system/Taskbar/TaskbarEntry/Peak/useWindowPeak';
+import useWindowPeek from 'components/system/Taskbar/TaskbarEntry/Peek/useWindowPeek';
 import StyledTaskbarEntry from 'components/system/Taskbar/TaskbarEntry/StyledTaskbarEntry';
 import useNextFocusable from 'components/system/Window/useNextFocusable';
 import { useProcesses } from 'contexts/process';
@@ -34,11 +34,11 @@ const TaskbarEntry = ({ icon, id, title }: TaskbarEntryProps): JSX.Element => {
 
     setForegroundId(isForeground ? nextFocusableId : id);
   };
-  const { PeakComponent, peakEvents } = useWindowPeak(id);
+  const { PeekComponent, peekEvents } = useWindowPeek(id);
 
   return (
-    <StyledTaskbarEntry foreground={isForeground} title={title} {...peakEvents}>
-      {PeakComponent && <PeakComponent />}
+    <StyledTaskbarEntry foreground={isForeground} title={title} {...peekEvents}>
+      {PeekComponent && <PeekComponent />}
       <Button onClick={onClick} ref={linkTaskbarEntry}>
         <figure>
           <Icon src={icon} alt={title} imgSize={16} />