refactors, layout changes, adding neccessary todo

* remove a console.log
* switch button layout to include the alternative way with keyboard
  shortcuts
* include a todo that marks an issue where the solution might depend on
  feedback

src/App.tsx

@@ -27,7 +27,7 @@ import { About } from "./sidebarComponents/About";
 import { DownloadUpload } from "./sidebarComponents/DownloadUpload";
 import { useCustomToasts } from "./useCustomToasts";
 import { useKeyboardCtrlIntercept } from "./useKeyboardCtrlIntercept";
-import { downloadText } from "./downloadUploadWrappers";
+import { downloadText } from "./downloadUploadHelpers";
 
 function getWsUri(id: string) {
   return (

src/downloadUploadWrappers.ts → src/downloadUploadHelpers.ts

@@ -30,7 +30,6 @@ export async function getFileUploadWithDialog() {
     })
   );
   controller.abort();
-  console.log("reached", uploadInput.files?.length);
   const files = uploadInput.files;
   if (files?.length !== 1) return;
   return files[0];

src/sidebarComponents/DecoratedButton.tsx

@@ -21,6 +21,8 @@ export function DecoratedButton({
       mt={1}
       flex="auto"
       onClick={onClick}
+      width="100%"
+      minWidth="100%"
     >
       {children}
     </Button>

src/sidebarComponents/DownloadUpload.tsx

@@ -1,8 +1,6 @@
-import { ButtonGroup } from "@chakra-ui/button";
-import { Text } from "@chakra-ui/layout";
 import "react";
 import { VscCloudDownload, VscCloudUpload } from "react-icons/vsc";
-import { getFileUploadWithDialog } from "../downloadUploadWrappers";
+import { getFileUploadWithDialog } from "../downloadUploadHelpers";
 import { DecoratedButton } from "./DecoratedButton";
 
 type DownloadUploadProps = {
@@ -16,33 +14,29 @@ export function DownloadUpload({
   uploadFile,
   darkMode,
 }: DownloadUploadProps) {
-  return (
-    <>
-      <Text>You can also upload with drag and drop and download with Ctrl + S</Text>
-      <ButtonGroup size="sm" display="flex">
-        <DecoratedButton
-          onClick={async (event) => {
-            event.preventDefault();
-            const file = await getFileUploadWithDialog();
-            if (!file) return;
-            uploadFile(file);
-          }}
-          icon={<VscCloudUpload />}
-          darkMode={darkMode}
-        >
-          Upload
-        </DecoratedButton>
-        <DecoratedButton
-          onClick={(event) => {
-            event.preventDefault();
-            downloadFile();
-          }}
-          icon={<VscCloudDownload />}
-          darkMode={darkMode}
-        >
-          Download
-        </DecoratedButton>
-      </ButtonGroup>
+  return (<>
+      <DecoratedButton
+        onClick={async (event) => {
+          event.preventDefault();
+          const file = await getFileUploadWithDialog();
+          if (!file) return;
+          uploadFile(file);
+        }}
+        icon={<VscCloudUpload />}
+        darkMode={darkMode}
+      >
+        Upload [drag-and-drop]
+      </DecoratedButton>
+      <DecoratedButton
+        onClick={(event) => {
+          event.preventDefault();
+          downloadFile();
+        }}
+        icon={<VscCloudDownload />}
+        darkMode={darkMode}
+      >
+        Download [Meta + S]
+      </DecoratedButton>
     </>
   );
 }

src/sidebarComponents/LanguageSelection.tsx

@@ -17,6 +17,8 @@ export function LanguageSelection({
   const toasts = useCustomToasts();
   function handleChangeLanguage(language: Language) {
     setLanguage(language);
+    // TODO: Clear up whether its on purpose that the toast is only shown for the user changing the language,
+    // TODO: then figure out how to coordinate the setLanguage for the server with rustpad.setLanguage
     // if (rustpad.current?.setLanguage(language)) {
     toasts.languageChange(language);
     // }