feat: add modal query parameter for page load

fix: improve servers list UI for small width screens

README.MD

@@ -133,6 +133,7 @@ There are some parameters you can set in the url to archive some specific behavi
 General:
 
 - **`?setting=<setting_name>:<setting_value>`** - Set and lock the setting on load. You can set multiple settings by separating them with `&` e.g. `?setting=autoParkour:true&setting=renderDistance:4`
+- `?modal=<modal>` - Open specific modal on page load eg `keybindings`. Very useful on UI changes testing during dev. For path use `,` as separator. To get currently opened modal type this in the console: `activeModalStack.at(-1).reactType`
 
 Server specific:
 
@@ -142,7 +143,6 @@ Server specific:
 - `?proxy=<proxy_address>` - Set the proxy server address to use for  the server
 - `?username=<username>` - Set the username for the server
 - `?lockConnect=true` - Only works then `ip` parameter is set. Disables cancel/save buttons and all inputs in the connect screen already set as parameters. Useful for integrates iframes.
-- `?reconnect=true` - Reconnect to the server on page reloads. Available in **dev mode only** and very useful on server testing.
 - `?serversList=<list_or_url>` - `<list_or_url>` can be a list of servers in the format `ip:version,ip` or a url to a json file with the same format (array) or a txt file with line-delimited list of server IPs.
 
 Single player specific:
@@ -176,6 +176,10 @@ In this case you must use `?mapDirBaseUrl` to specify the base URL to fetch the
 
 - `?mapDirBaseUrl` - See above.
 
+Only during development:
+
+- `?reconnect=true` - Reconnect to the server on page reloads. Very useful on server testing.
+
 <!-- - `?mapDirGuess=<base_url>` - Load the map from the provided URL and paths will be guessed with a few additional fetch requests. -->
 
 ### Notable Things that Power this Project

src/index.ts

@@ -1065,6 +1065,13 @@ downloadAndOpenFile().then((downloadAction) => {
       viewerWsConnect,
     })
   }
+
+  if (qs.get('modal')) {
+    const modals = qs.get('modal')!.split(',')
+    for (const modal of modals) {
+      showModal({ reactType: modal })
+    }
+  }
 }, (err) => {
   console.error(err)
   alert(`Failed to download file: ${err}`)

src/react/Input.tsx

@@ -2,14 +2,17 @@ import React, { CSSProperties, useEffect, useRef, useState } from 'react'
 import { isMobile } from 'prismarine-viewer/viewer/lib/simpleUtils'
 import styles from './input.module.css'
 
-interface Props extends React.ComponentProps<'input'> {
+interface Props extends Omit<React.ComponentProps<'input'>, 'width'> {
   rootStyles?: React.CSSProperties
   autoFocus?: boolean
   inputRef?: React.RefObject<HTMLInputElement>
   validateInput?: (value: string) => CSSProperties | undefined
+  width?: number
 }
 
-export default ({ autoFocus, rootStyles, inputRef, validateInput, defaultValue, ...inputProps }: Props) => {
+export default ({ autoFocus, rootStyles, inputRef, validateInput, defaultValue, width, ...inputProps }: Props) => {
+  if (width) rootStyles = { ...rootStyles, width }
+
   const ref = useRef<HTMLInputElement>(null!)
   const [validationStyle, setValidationStyle] = useState<CSSProperties>({})
   const [value, setValue] = useState(defaultValue ?? '')

src/react/ServersList.tsx

@@ -2,9 +2,10 @@ import React from 'react'
 import Singleplayer from './Singleplayer'
 import Input from './Input'
 import Button from './Button'
-import PixelartIcon from './PixelartIcon'
+import PixelartIcon, { pixelartIcons } from './PixelartIcon'
 import Select from './Select'
 import { BaseServerInfo } from './AddServerOrConnect'
+import { useIsSmallWidth } from './simpleHooks'
 
 interface Props extends React.ComponentProps<typeof Singleplayer> {
   joinServer: (info: BaseServerInfo, additional: {
@@ -52,6 +53,8 @@ export default ({ initialProxies, updateProxies: updateProxiesProp, joinServer,
     return styles
   }
 
+  const isSmallWidth = useIsSmallWidth()
+
   return <Singleplayer
     {...props}
     firstRowChildrenOverride={<form
@@ -93,6 +96,7 @@ export default ({ initialProxies, updateProxies: updateProxiesProp, joinServer,
             setQuickConnectIp?.(value)
             setServerIp(value)
           }}
+          width={isSmallWidth ? 120 : 180}
         />
         <label style={{ fontSize: 10, display: 'flex', alignItems: 'center', gap: 5, height: '100%', marginTop: '-1px' }}>
           <input
@@ -101,7 +105,7 @@ export default ({ initialProxies, updateProxies: updateProxiesProp, joinServer,
             onChange={({ target: { checked } }) => setSave(checked)}
           /> Save
         </label>
-        <Button style={{ width: 90 }} type='submit'>Join Server</Button>
+        <Button style={{ width: 90 }} type='submit'>Connect</Button>
       </div>
     </form>}
     searchRowChildrenOverride={
@@ -110,14 +114,18 @@ export default ({ initialProxies, updateProxies: updateProxiesProp, joinServer,
       }}
       >
         <div style={{ display: 'flex', gap: 3, alignItems: 'center' }}>
-          <span style={{ color: 'lightgray', fontSize: 14 }}>Proxy:</span>
+          {isSmallWidth
+            ? <PixelartIcon iconName={pixelartIcons.server} styles={{ fontSize: 14, color: 'lightgray', marginLeft: 2 }} onClick={onProfileClick} />
+            : <span style={{ color: 'lightgray', fontSize: 14 }}>Proxy:</span>}
           <Select
             initialOptions={proxies.proxies.map(p => { return { value: p, label: p } })}
             defaultValue={{ value: proxies.selected, label: proxies.selected }}
             updateOptions={(newSel) => {
               updateProxies({ proxies: [...proxies.proxies], selected: newSel })
             }}
-
+            containerStyle={{
+              width: isSmallWidth ? 140 : 180,
+            }}
           />
           <PixelartIcon iconName='user' styles={{ fontSize: 14, color: 'lightgray', marginLeft: 2 }} onClick={onProfileClick} />
           <Input rootStyles={{ width: 80 }} value={username} onChange={({ target: { value } }) => setUsername(value)} />

src/react/Singleplayer.tsx

@@ -11,6 +11,7 @@ import Input from './Input'
 import Button from './Button'
 import Tabs from './Tabs'
 import MessageFormattedString from './MessageFormattedString'
+import { useIsSmallWidth } from './simpleHooks'
 
 export interface WorldProps {
   name: string
@@ -146,6 +147,8 @@ export default ({
     onRowSelect?.(name, index)
     setFocusedWorld(name)
   }
+  const isSmallWidth = useIsSmallWidth()
+
   return <div ref={containerRef} hidden={hidden}>
     <div className="dirt-bg" />
     <div className={classNames('fullscreen', styles.root)}>
@@ -209,12 +212,15 @@ export default ({
           }
         </div>
       </div>
-      <div style={{ display: 'flex', flexDirection: 'column', minWidth: 400, paddingBottom: 3 }}>
+      <div style={{ display: 'flex', flexDirection: 'column', minWidth: 400, paddingBottom: 3, alignItems: 'center', }}>
         {firstRowChildrenOverride || <div>
           <Button rootRef={firstButton} disabled={!focusedWorld} onClick={() => onWorldAction('load', focusedWorld)}>Load World</Button>
           <Button onClick={() => onGeneralAction('create')} disabled={isReadonly}>Create New World</Button>
         </div>}
-        <div style={{ ...secondRowStyles }}>
+        <div style={{
+          ...secondRowStyles,
+          ...isSmallWidth ? { display: 'grid', gridTemplateColumns: '1fr 1fr' } : {}
+        }}>
           {serversLayout ? <Button style={{ width: 100 }} disabled={!focusedWorld || lockedEditing} onClick={() => onWorldAction('edit', focusedWorld)}>Edit</Button> : <Button style={{ width: 100 }} disabled={!focusedWorld} onClick={() => onWorldAction('export', focusedWorld)}>Export</Button>}
           <Button style={{ width: 100 }} disabled={!focusedWorld || lockedEditing} onClick={() => onWorldAction('delete', focusedWorld)}>Delete</Button>
           {serversLayout ?