@hanzo/ui 0.5.24 → 0.6.16

package/src/components/internal/Root.svelte

@@ -0,0 +1,323 @@
+<script lang="ts">
+  import platform, { OK, PlatformEvent, Severity, Status, addEventListener, getMetadata } from '@hanzo/platform'
+  import { onDestroy } from 'svelte'
+  import type { AnyComponent, WidthType } from '../../types'
+  import { deviceSizes, deviceWidths } from '../../types'
+  // import { applicationShortcutKey } from '../../utils'
+  import { Theme, themeStore } from '@hanzo/theme'
+  import {
+    IconArrowLeft,
+    IconArrowRight,
+    checkMobile,
+    deviceOptionsStore as deviceInfo,
+    checkAdaptiveMatching,
+    getLocalWeekStart,
+    updateEmojis
+  } from '../../'
+  import { desktopPlatform, getCurrentLocation, location, locationStorageKeyId, navigate } from '../../location'
+  import uiPlugin from '../../plugin'
+  import Component from '../Component.svelte'
+  import Label from '../Label.svelte'
+  import StatusComponent from '../Status.svelte'
+  import Clock from './Clock.svelte'
+  import RootBarExtension from './RootBarExtension.svelte'
+  import Settings from './Settings.svelte'
+
+  let application: AnyComponent | undefined
+
+  onDestroy(
+    location.subscribe((loc) => {
+      const routes = getMetadata(uiPlugin.metadata.Routes) ?? new Map()
+      const component = loc.path[0]
+
+      application = routes.get(component)
+      if (application === undefined && Array.from(routes.values()).includes(component as AnyComponent)) {
+        // if component id is used
+        application = component as AnyComponent
+      }
+
+      if (application === undefined) {
+        let last = loc.path[1] !== undefined ? localStorage.getItem(`${locationStorageKeyId}_${loc.path[1]}`) : null
+        if (last === null) {
+          last = localStorage.getItem(locationStorageKeyId)
+        }
+        let useDefault = true
+        if (last !== null) {
+          const storedLoc = JSON.parse(last)
+          const key = storedLoc.path?.[0]
+          if (Array.from(routes.values()).includes(key) || Array.from(routes.keys()).includes(key)) {
+            useDefault = false
+            navigate(storedLoc)
+          }
+        }
+        if (useDefault) {
+          application = getMetadata(uiPlugin.metadata.DefaultApplication)
+          if (application !== undefined) {
+            const loc = getCurrentLocation()
+            loc.path = [application]
+            navigate(loc)
+          }
+        }
+      }
+    })
+  )
+
+  let status = OK
+  let maintenanceTime = -1
+
+  addEventListener(PlatformEvent, async (_event, _status: Status) => {
+    if (_status.code === platform.status.MaintenanceWarning) {
+      maintenanceTime = _status.params.time
+    } else {
+      status = _status
+    }
+  })
+
+  let docWidth: number = window.innerWidth
+  let docHeight: number = window.innerHeight
+
+  let isMobile: boolean
+  const alwaysMobile: boolean = false
+  $: isMobile = alwaysMobile || checkMobile()
+  let isPortrait: boolean
+  $: isPortrait = docWidth <= docHeight
+
+  $: $deviceInfo.docWidth = docWidth
+  $: $deviceInfo.docHeight = docHeight
+  $: $deviceInfo.isPortrait = isPortrait
+  $: $deviceInfo.isMobile = isMobile
+  $: $deviceInfo.minWidth = docWidth <= 480
+  $: $deviceInfo.twoRows = docWidth <= 680
+  $: $deviceInfo.language = $themeStore.language
+  $: $deviceInfo.fontSize = $themeStore.fontSize
+
+  $: document.documentElement.style.setProperty('--app-height', `${docHeight}px`)
+
+  $: void updateEmojis($themeStore.language)
+
+  let doubleTouchStartTimestamp = 0
+  document.addEventListener('touchstart', (event) => {
+    const now = +new Date()
+    if (doubleTouchStartTimestamp + 500 > now) {
+      event.preventDefault()
+    }
+    doubleTouchStartTimestamp = now
+  })
+  document.addEventListener('dblclick', (event) => {
+    event.preventDefault()
+  })
+
+  let remove: any = null
+  const sizes: Record<WidthType, boolean> = { xs: false, sm: false, md: false, lg: false, xl: false, xxl: false }
+  const css: Record<WidthType, string> = { xs: '', sm: '', md: '', lg: '', xl: '', xxl: '' }
+  deviceSizes.forEach((ds, i) => {
+    if (i === 0) css[ds] = `(max-width: ${deviceWidths[i]}px)`
+    else if (i === deviceSizes.length - 1) css[ds] = `(min-width: ${deviceWidths[i - 1]}.01px)`
+    else css[ds] = `(min-width: ${deviceWidths[i - 1]}.01px) and (max-width: ${deviceWidths[i]}px)`
+  })
+  const getSize = (width: number): WidthType => {
+    return deviceSizes[
+      deviceWidths.findIndex((it) => (it === -1 ? deviceWidths[deviceWidths.length - 2] < width : it > width))
+    ]
+  }
+  const updateDeviceSize = () => {
+    if (remove !== null) remove()
+    const size = getSize(docWidth)
+    const mqString = css[size]
+    const media = matchMedia(mqString)
+
+    deviceWidths.forEach((_, i) => (sizes[deviceSizes[i]] = false))
+    deviceWidths.forEach((dw, i) => {
+      sizes[deviceSizes[i]] =
+        dw === -1 ? deviceWidths[deviceWidths.length - 2] < docWidth : docWidth > dw || size === deviceSizes[i]
+    })
+    $deviceInfo.size = size
+    $deviceInfo.sizes = sizes
+    media.addEventListener('change', updateDeviceSize)
+    remove = () => {
+      media.removeEventListener('change', updateDeviceSize)
+    }
+  }
+  updateDeviceSize()
+
+  $: secondRow = checkAdaptiveMatching($deviceInfo.size, 'xs')
+  $: appsMini =
+    $deviceInfo.isMobile &&
+    (($deviceInfo.isPortrait && $deviceInfo.docWidth <= 480) ||
+      (!$deviceInfo.isPortrait && $deviceInfo.docHeight <= 480))
+
+  const weekInfoFirstDay: number = getLocalWeekStart()
+  const savedFirstDayOfWeek = localStorage.getItem('firstDayOfWeek') ?? 'system'
+  $deviceInfo.firstDayOfWeek =
+    parseInt(savedFirstDayOfWeek === 'system' ? weekInfoFirstDay.toString() : savedFirstDayOfWeek, 10) ??
+    weekInfoFirstDay
+</script>
+
+<svelte:window bind:innerWidth={docWidth} bind:innerHeight={docHeight} />
+
+<Theme>
+  <div id="ui-root" class:mobile-theme={isMobile}>
+    <div class="antiStatusBar">
+      <div class="flex-row-center h-full content-color gap-3 px-4">
+        {#if desktopPlatform}
+          <div class="history-box flex-row-center gap-3">
+            <button
+              id="statusbar-back"
+              class="antiButton ghost jf-center bs-none no-focus resetIconSize statusButton square"
+              style:color={'var(--theme-dark-color)'}
+              on:click={() => {
+                history.back()
+              }}
+            >
+              <IconArrowLeft size={'small'} />
+            </button>
+            <button
+              id="statusbar-forward"
+              class="antiButton ghost jf-center bs-none no-focus resetIconSize statusButton square"
+              style:color={'var(--theme-dark-color)'}
+              on:click={() => {
+                history.forward()
+              }}
+            >
+              <IconArrowRight size={'small'} />
+            </button>
+          </div>
+        {/if}
+        {#if !secondRow}
+          <div
+            class="flex-row-center left-items flex-gap-0-5"
+            class:ml-14={appsMini}
+            style:-webkit-app-region={'no-drag'}
+          >
+            <RootBarExtension position="left" />
+          </div>
+        {/if}
+        <div
+          class="flex-row-center justify-center status-info"
+          style:margin-left={(isPortrait && docWidth <= 480) || (!isPortrait && docHeight <= 480) ? '1.5rem' : '0'}
+        >
+          {#if maintenanceTime > 0}
+            <div class="flex-grow flex-center flex-row-center" class:maintenanceScheduled={maintenanceTime > 0}>
+              <Label label={platform.status.MaintenanceWarning} params={{ time: maintenanceTime }} />
+            </div>
+          {:else if status.severity !== Severity.OK}
+            <StatusComponent {status} />
+          {/if}
+        </div>
+        <div class="flex-row-reverse flex-gap-2" style:-webkit-app-region={'no-drag'}>
+          <Settings />
+          <Clock />
+          <div class="flex-row-center gap-statusbar">
+            {#if !secondRow}
+              <RootBarExtension position="right" />
+            {/if}
+          </div>
+        </div>
+      </div>
+      {#if secondRow}
+        <div class="flex-between h-full content-color gap-3 px-2 second-row" style:-webkit-app-region={'no-drag'}>
+          <div class="flex-row-center flex-gap-0-5">
+            <RootBarExtension position="left" />
+          </div>
+          <div class="flex-row-center flex-gap-0-5">
+            <RootBarExtension position="right" />
+          </div>
+        </div>
+      {/if}
+    </div>
+    <div class="app">
+      {#if application}
+        <Component is={application} props={{}} />
+      {:else}
+        <div class="error">
+          Application not found: {application}
+        </div>
+      {/if}
+    </div>
+  </div>
+</Theme>
+
+<style lang="scss">
+  #ui-root {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    // height: 100vh;
+    height: 100%;
+    height: 100dvh;
+    // height: var(--app-height);
+
+    .antiStatusBar {
+      -webkit-app-region: drag;
+      min-width: 0;
+      min-height: var(--status-bar-height);
+      height: var(--status-bar-height);
+      // min-width: 600px;
+      font-size: 0.75rem;
+      line-height: 150%;
+      background-color: var(--theme-statusbar-color);
+      // border-bottom: 1px solid var(--theme-navpanel-divider);
+
+      .history-box {
+        -webkit-app-region: no-drag;
+        margin-left: 4.625rem;
+      }
+      .maintenanceScheduled {
+        padding: 0 0.5rem;
+        width: fit-content;
+        height: 1.25rem;
+        max-width: 22rem;
+        color: var(--tooltip-bg-color);
+        background-color: var(--highlight-red);
+        border-radius: 0.625rem;
+      }
+
+      .status-info {
+        flex-grow: 1;
+        text-align: center;
+      }
+      .logo-status {
+        font-weight: 500;
+        font-size: 14px;
+        color: var(--theme-content-color);
+      }
+
+      .second-row {
+        display: none;
+      }
+
+      @media (max-width: 480px) {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding: 2px 0;
+        width: 100%;
+
+        .second-row {
+          display: flex;
+        }
+      }
+      @media print {
+        display: none;
+      }
+    }
+
+    .app {
+      display: flex;
+      height: calc(100% - var(--status-bar-height));
+
+      .error {
+        margin-top: 45vh;
+        text-align: center;
+      }
+
+      @media print {
+        flex-direction: column;
+      }
+    }
+  }
+
+  .left-items {
+    overflow-x: auto;
+  }
+</style>

package/src/components/internal/RootBarExtension.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { location as locationStore } from '../../location'
+  import { rootBarExtensions } from '../../utils'
+  import Component from '../Component.svelte'
+
+  export let position: 'left' | 'right'
+  let oldLoc: string | undefined = undefined
+  locationStore.subscribe((newLocation) => {
+    if (oldLoc !== undefined && oldLoc !== newLocation.path[0]) {
+      rootBarExtensions.set([])
+    }
+    oldLoc = newLocation.path[0]
+  })
+
+  $: sorted = $rootBarExtensions.sort((a, b) => a[1].order - b[1].order)
+</script>
+
+{#each sorted as ext (ext[1].id)}
+  {#if ext[0] === position}
+    <div id={ext[1].id} class="clear-mins">
+      <Component
+        is={ext[1].component}
+        props={ext[1].props}
+        on:close={() => {
+          rootBarExtensions.update((cur) => {
+            return cur.filter((it) => it[1].id !== ext[1].id)
+          })
+        }}
+      />
+    </div>
+  {/if}
+{/each}

package/src/components/internal/Settings.svelte

@@ -0,0 +1,39 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { showPopup } from '../..'
+  import SettingsPopup from './SettingsPopup.svelte'
+  import Settings from './icons/Settings.svelte'
+
+  let pressed: boolean = false
+  let btn: HTMLButtonElement
+
+  function showSettings (): void {
+    pressed = true
+    showPopup(SettingsPopup, {}, btn, () => {
+      pressed = false
+    })
+  }
+</script>
+
+<button
+  bind:this={btn}
+  class="antiButton ghost jf-center bs-none no-focus resetIconSize statusButton square"
+  class:pressed
+  style:color={'var(--theme-dark-color)'}
+  on:click={showSettings}
+>
+  <Settings />
+</button>

package/src/components/internal/SettingsPopup.svelte

@@ -0,0 +1,196 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { type IntlString, getMetadata } from '@hanzo/platform'
+  import { getContext } from 'svelte'
+  import { type Readable } from 'svelte/store'
+
+  import FontSize from './icons/FontSize.svelte'
+  import Language from './icons/Language.svelte'
+
+  import ThemeButton from './ThemeButton.svelte'
+  import ui, {
+    Html,
+    Icon,
+    Label,
+    ModernPopup,
+    showPopup,
+    deviceOptionsStore as deviceInfo,
+    modalStore,
+    eventToHTMLElement
+  } from '../..'
+
+  const { currentFontSize, setFontSize } = getContext<{
+    currentFontSize: Readable<string>
+    setFontSize: (value: string) => void
+  }>('fontsize')
+
+  const { currentTheme, setTheme } = getContext<{ currentTheme: Readable<string>, setTheme: (theme: string) => void }>(
+    'theme'
+  )
+
+  const { currentLanguage, setLanguage } = getContext<{
+    currentLanguage: Readable<string>
+    setLanguage: (language: string) => void
+  }>('lang')
+
+  const fontsizes: Array<{ id: string, label: IntlString, size: number }> = [
+    { id: 'normal-font', label: ui.string.Spacious, size: 16 },
+    { id: 'small-font', label: ui.string.Compact, size: 14 }
+  ]
+
+  const themes: Array<{ id: string, label: IntlString }> = [
+    { id: 'theme-light', label: ui.string.ThemeLight },
+    { id: 'theme-dark', label: ui.string.ThemeDark },
+    { id: 'theme-system', label: ui.string.ThemeSystem }
+  ]
+
+  const uiLangs = new Set(getMetadata(ui.metadata.Languages))
+  const langs = [
+    { id: 'en', label: ui.string.English, logo: '&#x1F1FA;&#x1F1F8;' },
+    { id: 'pt', label: ui.string.Portuguese, logo: '&#x1F1F5;&#x1F1F9;' },
+    { id: 'es', label: ui.string.Spanish, logo: '&#x1F1EA;&#x1F1F8;' },
+    { id: 'ru', label: ui.string.Russian, logo: '&#x1F1F7;&#x1F1FA;' },
+    { id: 'zh', label: ui.string.Chinese, logo: '&#x1F1E8;&#x1F1F3;' },
+    { id: 'fr', label: ui.string.French, logo: '&#x1F1EB;&#x1F1F7;' },
+    { id: 'it', label: ui.string.Italian, logo: '&#x1F1EE;&#x1F1F9;' },
+    { id: 'cs', label: ui.string.Czech, logo: '&#x1F1E8;&#x1F1FF;' },
+    { id: 'de', label: ui.string.German, logo: '&#x1F1E9;&#x1F1EA;' }
+  ].filter((lang) => uiLangs.has(lang.id))
+
+  if (langs.findIndex((l) => l.id === $currentLanguage) < 0 && langs.length !== 0) {
+    setLanguage(langs[0].id)
+  }
+
+  if (langs.length === 0) {
+    console.error(
+      `List of configured UI languages: [${getMetadata(ui.metadata.Languages)?.join(
+        ', '
+      )}] doesn't contain any languages available in the app. Please check you configuration.`
+    )
+  }
+
+  function selectFontSize (size: string): void {
+    if ($currentFontSize === size) return
+    setFontSize(size)
+    $modalStore = $modalStore
+  }
+
+  function selectTheme (theme: string): void {
+    if ($currentTheme === theme) return
+    setTheme(theme)
+  }
+
+  function selectLanguage (language: string): void {
+    if ($currentLanguage === language) return
+    setLanguage(language)
+  }
+
+  $: $deviceInfo.theme = $currentTheme
+  $: fontsize = fontsizes.find((fs) => fs.id === $currentFontSize) ?? fontsizes[0]
+  $: language = langs.find((lang) => lang.id === $currentLanguage) ?? langs[0]
+</script>
+
+<div class="antiPopup">
+  <div class="ap-scroll">
+    <div class="ap-box">
+      <div class="flex-row-center m-4">
+        {#each themes as theme}
+          {@const selected = $currentTheme === theme.id}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <div
+            class="statusPopup-option"
+            class:selected
+            on:click={() => {
+              selectTheme(theme.id)
+            }}
+          >
+            <ThemeButton theme={theme.id} focused={$currentTheme} />
+            <span class="label overflow-label">
+              <Label label={theme.label} />
+            </span>
+          </div>
+        {/each}
+      </div>
+
+      <div class="ap-menuItem separator halfMargin" />
+
+      <button
+        class="ap-menuItem antiPopup-submenu withIcon flex-row-center flex-grow"
+        on:click={(ev) => {
+          const items = fontsizes.map((p) => {
+            return {
+              ...p,
+              icon: FontSize,
+              iconProps: {
+                size: p.size
+              }
+            }
+          })
+          showPopup(ModernPopup, { items, selected: fontsize.id }, eventToHTMLElement(ev), (id) => {
+            if (id !== undefined) {
+              selectFontSize(id)
+            }
+          })
+        }}
+      >
+        <div class="flex-between flex-grow">
+          <div class="flex-row-center">
+            <div class="icon mr-2"><FontSize size={'16px'} /></div>
+            <span class="label font-medium"><Label label={ui.string.FontSize} /></span>
+          </div>
+          <div class="flex-row-center pr-4">
+            <Label label={fontsize.label} />
+          </div>
+        </div>
+      </button>
+
+      <div class="ap-menuItem separator halfMargin" />
+
+      <button
+        class="ap-menuItem antiPopup-submenu withIcon flex-row-center flex-grow"
+        on:click={(ev) => {
+          const items = langs.map((p) => {
+            return {
+              ...p,
+              icon: Html,
+              iconProps: {
+                value: p.logo
+              }
+            }
+          })
+          showPopup(ModernPopup, { items, selected: language.id }, eventToHTMLElement(ev), (id) => {
+            if (id !== undefined) {
+              selectLanguage(id)
+            }
+          })
+        }}
+      >
+        <div class="flex-between flex-grow">
+          <div class="flex-row-center">
+            <div class="icon mr-2"><Icon icon={Language} size={'small'} /></div>
+            <span class="label font-medium"><Label label={ui.string.Language} /></span>
+          </div>
+          <div class="flex-row-center pr-4">
+            <div class="label text-lgd">
+              <Html value={language.logo} />
+            </div>
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+</div>