refactor(miniapp): polish toolbar and control affordances

apps/miniapp/src/components/layout/top-bar.tsx

@@ -1,4 +1,5 @@
 import type { Locale } from '../../i18n'
+import { GlobeIcon } from '../ui'
 
 type Props = {
   subtitle: string
@@ -17,13 +18,17 @@ export function TopBar(props: Props) {
         <h1>{props.title}</h1>
       </div>
 
-      <label class="locale-switch">
-        <span>{props.languageLabel}</span>
+      <div class="locale-switch locale-switch--compact">
+        <span class="locale-switch__label sr-only">{props.languageLabel}</span>
         <div class="locale-switch__buttons">
+          <span class="locale-switch__icon" aria-hidden="true">
+            <GlobeIcon />
+          </span>
           <button
             classList={{ 'is-active': props.locale === 'en' }}
             type="button"
             disabled={props.saving}
+            aria-label={`${props.languageLabel}: English`}
             onClick={() => props.onChange('en')}
           >
             EN
@@ -32,12 +37,13 @@ export function TopBar(props: Props) {
             classList={{ 'is-active': props.locale === 'ru' }}
             type="button"
             disabled={props.saving}
+            aria-label={`${props.languageLabel}: Russian`}
             onClick={() => props.onChange('ru')}
           >
             RU
           </button>
         </div>
-      </label>
+      </div>
     </section>
   )
 }

apps/miniapp/src/components/ui/icons.tsx

@@ -0,0 +1,67 @@
+import type { JSX } from 'solid-js'
+
+type IconProps = {
+  class?: string
+}
+
+function iconProps(props: IconProps): JSX.SvgSVGAttributes<SVGSVGElement> {
+  return {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': 1.8,
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    class: props.class ?? 'ui-icon',
+    'aria-hidden': 'true'
+  }
+}
+
+export function PencilIcon(props: IconProps) {
+  return (
+    <svg {...iconProps(props)}>
+      <path d="M12 20h9" />
+      <path d="m16.5 3.5 4 4L8 20l-5 1 1-5 12.5-12.5Z" />
+    </svg>
+  )
+}
+
+export function PlusIcon(props: IconProps) {
+  return (
+    <svg {...iconProps(props)}>
+      <path d="M12 5v14" />
+      <path d="M5 12h14" />
+    </svg>
+  )
+}
+
+export function SettingsIcon(props: IconProps) {
+  return (
+    <svg {...iconProps(props)}>
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1 1 0 0 0 .2 1.1l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1 1 0 0 0-1.1-.2 1 1 0 0 0-.6.9V20a2 2 0 1 1-4 0v-.2a1 1 0 0 0-.7-.9 1 1 0 0 0-1 .2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1 1 0 0 0 .2-1.1 1 1 0 0 0-.9-.6H4a2 2 0 1 1 0-4h.2a1 1 0 0 0 .9-.7 1 1 0 0 0-.2-1l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1 1 0 0 0 1.1.2 1 1 0 0 0 .6-.9V4a2 2 0 1 1 4 0v.2a1 1 0 0 0 .7.9 1 1 0 0 0 1-.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1 1 0 0 0-.2 1.1 1 1 0 0 0 .9.6H20a2 2 0 1 1 0 4h-.2a1 1 0 0 0-.9.7Z" />
+    </svg>
+  )
+}
+
+export function CalendarIcon(props: IconProps) {
+  return (
+    <svg {...iconProps(props)}>
+      <path d="M8 2v4" />
+      <path d="M16 2v4" />
+      <rect width="18" height="18" x="3" y="4" rx="2" />
+      <path d="M3 10h18" />
+    </svg>
+  )
+}
+
+export function GlobeIcon(props: IconProps) {
+  return (
+    <svg {...iconProps(props)}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M3 12h18" />
+      <path d="M12 3a15 15 0 0 1 0 18" />
+      <path d="M12 3a15 15 0 0 0 0 18" />
+    </svg>
+  )
+}

apps/miniapp/src/components/ui/index.ts

@@ -2,3 +2,4 @@ export * from './button'
 export * from './card'
 export * from './dialog'
 export * from './field'
+export * from './icons'