improve mobile layout

packages/otfjs-ui/src/components/font-icon/font-icon.tsx

@@ -15,7 +15,7 @@ export function FontIcon({ name, size }: FontIconProps) {
   if (complexFonts.has(id)) {
     return (
       <img
-        src={`${id}.svg`}
+        src={`/${id}.svg`}
         width={size}
         height={size}
         className={styles.imgPreview}

packages/otfjs-ui/src/components/no-font-view/font-grid.tsx → packages/otfjs-ui/src/components/font-list/font-list.components/font-grid.tsx

@@ -1,13 +1,13 @@
 import { memo, useEffect, useMemo, useRef } from 'react'
 import { Link, useRouter } from '@tanstack/react-router'
 
-import { useTimeoutAfterSet } from '../../hooks/use-timeout-after-set'
-import { handle } from '../../shortcuts/shortcuts'
-import { Fonts } from '../../types/fonts'
-import { createElementWalkerFactory } from '../../utils/dom'
-import { addListener } from '../../utils/event'
-import { entriesFilterMap } from '../../utils/object'
-import { FontIcon } from '../font-icon/font-icon'
+import { useTimeoutAfterSet } from '../../../hooks/use-timeout-after-set'
+import { handle } from '../../../shortcuts/shortcuts'
+import { Fonts } from '../../../types/fonts'
+import { createElementWalkerFactory } from '../../../utils/dom'
+import { addListener } from '../../../utils/event'
+import { entriesFilterMap } from '../../../utils/object'
+import { FontIcon } from '../../font-icon/font-icon'
 
 import styles from './font-grid.module.css'
 

packages/otfjs-ui/src/components/no-font-view/no-font-view.module.css → packages/otfjs-ui/src/components/font-list/font-list.module.css

@@ -1,4 +1,6 @@
 .root {
+  --gap: 26px;
+
   position: relative;
   display: grid;
   padding-top: 20px;

packages/otfjs-ui/src/components/no-font-view/no-font-view.tsx → packages/otfjs-ui/src/components/font-list/font-list.tsx

@@ -1,12 +1,12 @@
 import { useDeferredValue, useState } from 'react'
 
 import fonts from '../../fonts.json'
-import { SearchBar } from './components/search-bar'
-import { FontGrid } from './font-grid'
+import { FontGrid } from './font-list.components/font-grid'
+import { SearchBar } from './font-list.components/search-bar'
 
-import styles from './no-font-view.module.css'
+import styles from './font-list.module.css'
 
-export function NoFontView() {
+export function FontList() {
   const [filter, setFilter] = useState('')
   const deferredSearch = useDeferredValue(filter)
 

packages/otfjs-ui/src/components/font-view/components/head.module.css

@@ -1,8 +1,9 @@
 .head {
+  grid-area: head;
   display: grid;
   grid-template-columns: auto 1fr;
   height: 97px;
   gap: 8px;
   padding: 8px;
-  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg-sidebar);
 }

packages/otfjs-ui/src/components/font-view/components/json-view.tsx

@@ -9,22 +9,20 @@ const theme: React.CSSProperties = {
 
 export function JsonView({
   data,
-  /* replacements, */
+  replacements,
 }: {
   data: object
   replacements?: Record<string, (value: unknown) => any>
 }) {
-  /*
-  const replacer = useMemo(() => {
-    if (!replacements) return undefined
-
-    return (key: string, value: any): any => {
-      const r = replacements[key]
-      if (r) return r(value)
-      return value
+  if (replacements) {
+    data = structuredClone(data)
+    for (const [key, replace] of Object.entries(replacements)) {
+      if (key in data) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+        ;(data as any)[key] = replace((data as any)[key])
+      }
     }
-  }, [replacements])
-  */
+  }
 
   return <JsonViewPkg value={data} style={theme} displayDataTypes={false} />
 }

packages/otfjs-ui/src/components/font-view/font-view.module.css

@@ -1,19 +1,30 @@
 .root {
   display: grid;
-  grid-template-columns: auto 1fr;
+  gap: 1px;
+  grid:
+    'head view' auto
+    'tabs view' 1fr / 240px 1fr;
   height: 100%;
   overflow: hidden;
+
+  background: var(--color-border);
+
+  :where(& > *) {
+    background: var(--color-bg);
+  }
+
+  @media screen and (max-width: 600px) {
+    grid:
+      'head head' auto
+      'tabs view' 1fr / 100px 1fr;
+  }
 }
 
-.sidebar {
+.tabs {
+  grid-area: tabs;
   overflow: scroll;
-  width: 240px;
-  box-sizing: content-box;
-  border-right: 1px solid var(--color-border);
   background: var(--color-bg-sidebar);
-}
 
-.tabs {
   & ul {
     list-style: none;
     padding: 0;
@@ -50,6 +61,7 @@
 }
 
 .tableView {
+  grid-area: view;
   position: relative;
   overflow: scroll;
 }

packages/otfjs-ui/src/components/font-view/font-view.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import clsx from 'clsx'
 import { Font, NameId } from 'otfjs'
 
@@ -19,33 +19,19 @@ export function FontView({ font }: FontViewProps) {
   return (
     <FontContext value={font}>
       <div className={styles.root}>
-        <Sidebar tab={tab} setTab={setTab} />
+        <Head />
+        <Tabs tab={tab} setTab={setTab} />
         <View tab={tab} />
       </div>
     </FontContext>
   )
 }
 
-function Sidebar({
-  tab,
-  setTab,
-}: {
-  tab: string
-  setTab: React.Dispatch<React.SetStateAction<string>>
-}) {
-  return (
-    <div className={styles.sidebar}>
-      <Head className="mb-2" />
-      <Tabs tab={tab} setTab={setTab} />
-    </div>
-  )
-}
-
 function Tabs({ tab, setTab }: { tab: string; setTab: (tab: string) => void }) {
   const font = useFont()
 
   return (
-    <div className={styles.tabs}>
+    <div className={`${styles.tabs} pt-2`}>
       <ul>
         <li>
           <button
@@ -78,11 +64,19 @@ function Overview() {
   const font = useFont()
   const fontFamily = font.getName(NameId.FontFamilyName)
 
+  const value = `${fontFamily}\n\nThe quick brown fox jumps over the lazy dog.\n0123456789\n\n`
+
+  const ref = useCallback((el: HTMLTextAreaElement | null) => {
+    if (!el) return
+    el.focus()
+    el.setSelectionRange(el.value.length, el.value.length)
+  }, [])
+
   return (
     <div className={styles.tableView}>
       <textarea
-        autoFocus
-        defaultValue={fontFamily!}
+        ref={ref}
+        defaultValue={value}
         style={{ fontFamily: `"${fontFamily}"` }}
         className="block h-full w-full resize-none bg-[var(--color-bg)] p-2 text-2xl"
       />

packages/otfjs-ui/src/routes/index.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute, useRouterState } from '@tanstack/react-router'
 
+import { FontList } from '../components/font-list/font-list'
 import { FontView } from '../components/font-view/font-view'
-import { NoFontView } from '../components/no-font-view/no-font-view'
 import { getFontById } from '../utils/fetch-font'
 
 export const Route = createFileRoute('/')({
@@ -17,5 +17,5 @@ function Index() {
     if (font) return <FontView font={font} />
   }
 
-  return <NoFontView />
+  return <FontList />
 }