Revert "Allow joining clipboards with 4-6 character codes"

This reverts commit d0dbbbad8f737927d9c9d93deb420df94b7e1407.

apps/frontend/src/components/JoinClipboardCard.tsx

@@ -33,14 +33,14 @@ export default function JoinClipboardCard() {
       setRoomCode(lastCode);
 
       // Check if it's valid
-      const isValid = lastCode.length >= 4 && isValidRoomCode(lastCode);
+      const isValid = lastCode.length === 4 && isValidRoomCode(lastCode);
       setIsComplete(isValid);
     }
   }, [savedClipboards]);
 
-  // Validate room code format (4-6 alphanumeric characters, uppercase)
+  // Validate room code format (6 alphanumeric characters, uppercase)
   const isValidRoomCode = (code: string): boolean => {
-    const roomCodeRegex = /^[A-Z0-9]{4,6}$/;
+    const roomCodeRegex = /^[A-Z0-9]{4}$/;
     return roomCodeRegex.test(code);
   };
 
@@ -105,7 +105,7 @@ export default function JoinClipboardCard() {
         </div>
 
         <p className="text-text-secondary mb-6 pl-1">
-          Enter a 4-6 character code to join an existing clipboard.
+          Enter a 4-character code to join an existing clipboard.
         </p>
 
         <form onSubmit={handleJoinClipboard} className="space-y-4">
@@ -121,34 +121,29 @@ export default function JoinClipboardCard() {
                 onPaste={(e) => {
                   e.preventDefault()
                   const pastedValue = e.clipboardData?.getData('text') || '';
-                  const filteredValue = pastedValue
-                    .replace(/[^a-zA-Z0-9]/g, '')
-                    .toUpperCase()
-                    .slice(0, 6);
-
-                  if (filteredValue.length >= 4 && filteredValue.length <= 6) {
+                  const filteredValue = pastedValue.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
+                  if (filteredValue.length === 4) {
                     setRoomCode(filteredValue);
-                    setIsComplete(isValidRoomCode(filteredValue));
                   }
                 }}
                 value={roomCode}
                 placeholder={lastVisitedClipboard}
                 onChange={(value: string) => {
                   // Convert to uppercase automatically
-                  const uppercaseValue = value.toUpperCase().slice(0, 6);
+                  const uppercaseValue = value.toUpperCase();
                   setRoomCode(uppercaseValue);
                   setClipboardExists(true);
-                  const isValid = uppercaseValue.length >= 4 && isValidRoomCode(uppercaseValue);
+                  const isValid = uppercaseValue.length === 4 && isValidRoomCode(uppercaseValue);
                   setIsComplete(isValid)
                 }}
-                numInputs={6}
+                numInputs={4}
                 renderInput={(props, index) => (
                   <input
                     {...props}
                     className={`w-full h-full text-center text-xl sm:text-2xl font-mono font-bold
                       border-2 rounded-lg shadow-none outline-none
                       transition-colors duration-200 ease-in-out                      
-                      ${roomCode.length >= 4 && isComplete
+                      ${roomCode.length === 4 && isComplete
                         ? 'border-green-500 text-green-500 bg-green-500/5'
                         : props.value
                           ? 'border-secondary text-text-primary bg-surface/80'
@@ -192,7 +187,7 @@ export default function JoinClipboardCard() {
               onSelectClipboard={(code) => {
                 setRoomCode(code);
                 setClipboardExists(true);
-                setIsComplete(isValidRoomCode(code));
+                setIsComplete(true);
                 // Don't automatically join - just fill the input
                 // This allows users to see the code before joining
               }}