feat: add Ctrl+L shortcut

Author: 0l1v3rr

src/components/terminal/TerminalBody.tsx

@@ -18,12 +18,16 @@ const TerminalBody: FC<TerminalBodyProps> = () => {
 
   const scrollToRef = useRef<HTMLDivElement>(null);
 
+  function handleClear() {
+    setHistory([]);
+    setMotdVisible(false);
+  }
+
   function handlePromptEnter(prompt: string) {
     const { command, args, sudo } = processPrompt(prompt);
 
     if (command === "clear") {
-      setHistory([]);
-      setMotdVisible(false);
+      handleClear();
       return;
     }
 
@@ -64,7 +68,10 @@ const TerminalBody: FC<TerminalBodyProps> = () => {
       ))}
 
       <TerminalPrompt username={username}>
-        <TerminalPromptInput onEnter={handlePromptEnter} />
+        <TerminalPromptInput
+          onEnter={handlePromptEnter}
+          onClear={handleClear}
+        />
       </TerminalPrompt>
 
       <div ref={scrollToRef} />

src/components/terminal/TerminalPromptInput.tsx

@@ -6,9 +6,13 @@ import { COMMAND_NAMES } from "../../lib/commands";
 
 interface TerminalPromptInputProps {
   onEnter(prompt: string): void;
+  onClear(): void;
 }
 
-const TerminalPromptInput: FC<TerminalPromptInputProps> = ({ onEnter }) => {
+const TerminalPromptInput: FC<TerminalPromptInputProps> = ({
+  onEnter,
+  onClear,
+}) => {
   const [input, setInput] = useState("");
   const [inputFocus, setInputFocus] = useState(false);
   const [caretPosition, setCaretPosition] = useState(0);
@@ -30,6 +34,13 @@ const TerminalPromptInput: FC<TerminalPromptInputProps> = ({ onEnter }) => {
       e.preventDefault();
       setInput(autocompleteCommand);
       setCaretPosition(autocompleteCommand.length);
+      return;
+    }
+
+    if (e.ctrlKey && e.key === "l") {
+      e.preventDefault();
+      onClear();
+      return;
     }
   }
 

tailwind.config.js

@@ -46,7 +46,7 @@ export default {
       },
       boxShadow: {
         "5xl": "0 10px 30px 0 rgba(0, 0, 0, 0.75)",
-        terminal: "0 0 0 2px rgba(0, 0, 0, 0.16)",
+        terminal: "0 0 0 3px rgba(0, 0, 0, 0.16)",
       },
     },
   },