💄 front: remove arrow keys from preview if a single file available #661 (#669)

tdrive/frontend/src/app/views/client/viewer/drive-preview.tsx

@@ -63,6 +63,8 @@ export const DrivePreview: React.FC<DrivePreviewProps> = ({ items }) => {
   }, []);
 
   useEffect(() => {
+    if (items.length < 2)
+      return () => {};
     addShortcut({ shortcut: 'Right', handler: handleSwitchRight });
     addShortcut({ shortcut: 'Left', handler: handleSwitchLeft });
 
@@ -146,22 +148,26 @@ export const DrivePreview: React.FC<DrivePreviewProps> = ({ items }) => {
           </div>
           <div className="whitespace-nowrap flex items-center">
             <Controls type={type} />
-            <Button
+            {items.length > 1 &&
-              iconSize="lg"
+              <>
-              className="ml-4 !rounded-full"
+                <Button
-              theme="dark"
+                  iconSize="lg"
-              size="lg"
+                  className="ml-4 !rounded-full"
-              icon={ArrowLeftIcon}
+                  theme="dark"
-              onClick={ handleSwitchLeft }
+                  size="lg"
-            />
+                  icon={ArrowLeftIcon}
-            <Button
+                  onClick={ handleSwitchLeft }
-              iconSize="lg"
+                />
-              className="ml-4 !rounded-full"
+                <Button
-              theme="dark"
+                  iconSize="lg"
-              size="lg"
+                  className="ml-4 !rounded-full"
-              icon={ArrowRightIcon}
+                  theme="dark"
-              onClick={ handleSwitchRight }
+                  size="lg"
-            />
+                  icon={ArrowRightIcon}
+                  onClick={ handleSwitchRight }
+                />
+              </>
+            }
             <Button
               iconSize="lg"
               className="ml-4 !rounded-full"