fix: mobile color input, file input, code editor jank + toast error for canShow false

Author: zhengkyl

src/components/ColorInput.tsx

@@ -22,8 +22,7 @@ export default function ColorInput(props: Props) {
     <div class="w-full">
       <input
         class="text-white pl-9 font-mono w-full bg-back-subtle leading-none px-3 py-2 rounded-md border focus:(outline-none ring-2 ring-fore-base ring-offset-2 ring-offset-back-base)"
-        type="text"
-        // @ts-expect-error i'm right
+        type="button"
         on:input={(e) => {
           props.setValue(e.target.value);
         }}
@@ -33,6 +32,7 @@ export default function ColorInput(props: Props) {
             el: ref,
             alpha: true,
             formatToggle: true,
+            focusInput: false,
             theme: "large",
             themeMode: "auto",
           });

src/components/ImageInput.tsx

@@ -13,7 +13,7 @@ export function FileInput(props: Props) {
   return (
     <div class="inline-flex items-center gap-1">
       <input
-        class="border rounded-md text-sm px-1 py-2 file:(bg-transparent border-none text-fore-base) bg-back-base hover:bg-fore-base/5 focus-visible:(outline-none ring-2 ring-fore-base ring-offset-2 ring-offset-back-base)"
+        class="w-full border rounded-md text-sm px-1 py-2 file:(bg-transparent border-none text-fore-base) bg-back-base hover:bg-fore-base/5 focus-visible:(outline-none ring-2 ring-fore-base ring-offset-2 ring-offset-back-base)"
         ref={input!}
         type="file"
         accept={props.accept}

src/components/editor/CodeEditor.tsx

@@ -144,50 +144,54 @@ export function CodeEditor(props: Props) {
   const [showDialog, setShowDialog] = createSignal(false);
 
   return (
-    <div>
-      <AllowPasteDialog
-        open={showDialog()}
-        setClosed={() => {
-          setShowDialog(false);
-        }}
-        onAllow={() => {
-          allowPaste = true;
-          localStorage.setItem(ALLOW_PASTE_KEY, "true");
-        }}
-      />
-      <div class="flex justify-between pb-2 h-11">
-        <Switch label="Show code" value={showCode()} setValue={setShowCode} />
-        <Show when={showCode()}>
-          <label class="flex items-center gap-1 text-sm">
-            Vim mode
-            <input
-              class="h-4 w-4"
-              type="checkbox"
-              checked={vimMode()}
-              onChange={(e) => setVimMode(e.target.checked)}
-            />
-          </label>
-          <label class="flex items-center gap-1 text-sm">
-            Update thumbnail
-            <input
-              class="h-4 w-4"
-              type="checkbox"
-              checked={updateThumbnail()}
-              onChange={(e) => setUpdateThumbnail(e.target.checked)}
-            />
-          </label>
-          <Button
-            disabled={!dirty()}
-            onMouseDown={() =>
-              props.onSave(view.state.doc.toString(), updateThumbnail())
-            }
-            class="bg-green-700 border rounded-md hover:bg-green-700/90 focus-visible:(outline-none ring-2 ring-fore-base ring-offset-2 ring-offset-back-base) disabled:(bg-transparent text-fore-base pointer-events-none opacity-50) transition-colors px-3 min-w-150px"
-          >
-            {dirty() ? "Save" : "No changes"}
-          </Button>
-        </Show>
+    <>
+      <div class="py-2">
+        <Switch label="Code editor" value={showCode()} setValue={setShowCode} />
       </div>
-      <div ref={parent!} classList={{ hidden: !showCode() }}></div>
-    </div>
+      <div>
+        <AllowPasteDialog
+          open={showDialog()}
+          setClosed={() => {
+            setShowDialog(false);
+          }}
+          onAllow={() => {
+            allowPaste = true;
+            localStorage.setItem(ALLOW_PASTE_KEY, "true");
+          }}
+        />
+        <div class="flex justify-end gap-4 pb-2 h-11">
+          <Show when={showCode()}>
+            <label class="flex items-center gap-1 text-sm">
+              Vim mode
+              <input
+                class="h-4 w-4"
+                type="checkbox"
+                checked={vimMode()}
+                onChange={(e) => setVimMode(e.target.checked)}
+              />
+            </label>
+            <label class="flex items-center gap-1 text-sm">
+              Update thumbnail
+              <input
+                class="h-4 w-4"
+                type="checkbox"
+                checked={updateThumbnail()}
+                onChange={(e) => setUpdateThumbnail(e.target.checked)}
+              />
+            </label>
+            <Button
+              disabled={!dirty()}
+              onMouseDown={() =>
+                props.onSave(view.state.doc.toString(), updateThumbnail())
+              }
+              class="bg-green-700 border rounded-md hover:bg-green-700/90 focus-visible:(outline-none ring-2 ring-fore-base ring-offset-2 ring-offset-back-base) disabled:(bg-transparent text-fore-base pointer-events-none opacity-50) transition-colors px-3 min-w-150px"
+            >
+              {dirty() ? "Save" : "No changes"}
+            </Button>
+          </Show>
+        </div>
+        <div ref={parent!} classList={{ hidden: !showCode() }}></div>
+      </div>
+    </>
   );
 }

src/components/preview/QrPreview.tsx

@@ -240,12 +240,15 @@ function DownloadButtons(props: DownloadProps) {
                     }),
                   ],
                 };
+                if (!navigator.canShare(shareData)) {
+                  throw new Error();
+                }
                 navigator.share(shareData);
               } catch (e) {
                 console.log(e);
                 toastError(
                   "Native sharing failed",
-                  "Unsupported in this browser"
+                  "File sharing not supported by browser"
                 );
               }
             }}