Add WebAppSwitcher component and related icons; update config for web app URLs

2026-06-21 16:57:33 +01:00 · 2026-06-21 16:57:33 +01:00 · 0a5563b2a7
commit 0a5563b2a7
parent 3b60543deb
7 changed files with 116 additions and 0 deletions
--- a/assets/icons/openinappicon.svg
+++ b/assets/icons/openinappicon.svg
@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-82,0)">
+        <g id="Artboard1" transform="matrix(1,0,0,1,82,0)">
+            <rect x="0" y="0" width="64" height="64" style="fill:none;"/>
+            <clipPath id="_clip1">
+                <rect x="0" y="0" width="64" height="64"/>
+            </clipPath>
+            <g clip-path="url(#_clip1)">
+                <g transform="matrix(1,0,0,1,-82,0)">
+                    <path d="M114.235,58.85L101,58.85C93.825,58.85 88,53.025 88,45.85L88,18.367C88,11.192 93.825,5.367 101,5.367L127,5.367C134.175,5.367 140,11.192 140,18.367L140,31.684C138.344,30.666 136.522,29.892 134.583,29.414L134.583,18.367C134.583,14.182 131.185,10.784 127,10.784L101,10.784C96.815,10.784 93.417,14.182 93.417,18.367L93.417,45.85C93.417,50.036 96.815,53.434 101,53.434L111.638,53.434C112.218,55.387 113.102,57.211 114.235,58.85Z"/>
+                </g>
+                <g transform="matrix(0.121769,0,0,0.121769,14.308464,17.834503)">
+                    <path d="M8.945,187.103L8.945,45C8.945,41.153 10.395,37.687 13.54,34.715C16.57,31.856 19.983,30.533 23.684,30.533L101.541,30.533C105.244,30.533 108.657,31.856 111.685,34.716C114.831,37.688 116.28,41.153 116.28,45L116.28,63.239C116.28,67.084 114.831,70.551 111.685,73.523C108.657,76.383 105.244,77.706 101.541,77.706L59.112,77.706L59.112,99.952L95.825,99.952C99.527,99.952 102.939,101.273 105.967,104.134C109.115,107.105 110.563,110.572 110.563,114.418L110.563,132.658C110.563,136.503 109.116,139.968 105.968,142.941C102.939,145.803 99.527,147.124 95.825,147.124L59.112,147.123L59.112,187.103C59.112,190.807 57.79,194.219 54.928,197.248C51.956,200.394 48.491,201.842 44.646,201.842L23.412,201.842C19.565,201.842 16.1,200.393 13.128,197.247C10.268,194.219 8.946,190.807 8.945,187.103Z"/>
+                </g>
+                <g transform="matrix(0.121769,0,0,0.121769,-40.771914,17.834503)">
+                    <path d="M591.369,171.626C580.987,156.298 575.724,137.883 575.724,116.331C575.724,91.129 582.921,70.216 597.085,53.512C611.534,36.472 631.157,27.818 656.07,27.818C677.329,27.818 694.356,32.953 707.26,42.842C720.259,52.803 729.209,67.651 733.791,87.574C734,88.48 734.021,89.418 733.855,90.333C733.839,90.422 733.822,90.511 733.804,90.6C732.171,90.549 730.531,90.524 728.886,90.524C713.323,90.524 698.283,92.793 684.08,97.019C683.789,96.57 683.51,96.096 683.244,95.596C683,95.139 682.809,94.657 682.674,94.157C680.956,87.783 678.047,82.918 673.679,79.732C669.187,76.455 663.286,74.99 656.07,74.99C646.542,74.99 639.4,78.26 634.849,85.227C629.672,93.155 627.252,103.55 627.252,116.331C627.252,120.193 627.479,123.842 627.944,127.277C613.205,139.652 600.767,154.681 591.369,171.626Z"/>
+                </g>
+                <g transform="matrix(0.485113,0,0,0.485113,32,32.108844)">
+                    <path d="M66.016,33C66.016,51.203 51.234,66 33,66C14.797,66 0,51.203 0,33C0,14.781 14.797,0 33,0C51.234,0 66.016,14.781 66.016,33ZM27.094,19.5C24.859,19.5 23.438,20.75 23.438,22.734C23.438,24.734 24.859,25.969 27.078,25.969L31.812,25.969L35.847,25.339L31.234,29.375L20.781,39.828C20.031,40.562 19.609,41.578 19.609,42.547C19.609,44.75 21.234,46.219 23.281,46.219C24.375,46.219 25.312,45.844 26.156,45.016L36.516,34.656L40.507,30.084L39.969,34.312L39.969,38.75C39.969,40.953 41.219,42.391 43.234,42.391C45.188,42.391 46.438,40.922 46.438,38.75L46.438,23.797C46.438,20.984 44.812,19.5 42.094,19.5L27.094,19.5Z" style="fill-rule:nonzero;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/assets/icons/openinbrowsericon.svg
+++ b/assets/icons/openinbrowsericon.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect id="Artboard1" x="0" y="0" width="64" height="64" style="fill:none;"/>
+    <g id="Artboard11" serif:id="Artboard1">
+        <g transform="matrix(0.787693,0,0,0.787693,6,6.006144)">
+            <path d="M32.595,65.998C14.563,65.781 0,51.084 0,33C0,14.781 14.781,0 33,0C51.1,0 65.797,14.564 66.013,32.597C64.003,31.361 61.8,30.409 59.459,29.798C58.946,25.474 57.39,21.467 55.038,18.044C53.252,19.386 50.843,20.54 47.998,21.441C48.59,23.904 48.996,26.56 49.179,29.359C44.485,30.163 40.247,32.317 36.882,35.406L35.437,35.406L35.437,36.848C32.698,39.819 30.69,43.476 29.7,47.53C22.786,47.922 16.949,49.55 13.541,52.117C13.713,51.988 13.892,51.861 14.082,51.738C17.087,54.794 20.831,57.118 25.018,58.434C22.762,56.224 20.842,53.084 19.416,49.278C20.904,48.804 22.542,48.417 24.297,48.124C25.593,51.493 27.274,54.199 29.137,55.808C29.348,57.858 29.815,59.833 30.505,61.701C28.928,61.293 27.428,60.491 26.037,59.349C27.43,60.505 28.934,61.317 30.515,61.729C31.07,63.227 31.769,64.655 32.595,65.998ZM6.474,35.406C6.886,40.076 8.511,44.4 11.044,48.053C12.829,46.735 15.216,45.6 18.025,44.712C17.325,41.847 16.882,38.72 16.753,35.406L6.474,35.406ZM52.484,14.02C52.335,14.133 52.181,14.244 52.014,14.35C48.978,11.231 45.176,8.866 40.916,7.541C43.22,9.772 45.175,12.973 46.615,16.866C45.134,17.339 43.502,17.726 41.755,18.022C40.131,13.743 37.888,10.527 35.437,9.228L35.437,18.669C42.758,18.365 48.953,16.691 52.484,14.02ZM30.697,4.271C28.855,4.713 27.116,5.696 25.532,7.13C27.115,5.709 28.851,4.737 30.688,4.299L30.697,4.271ZM21.697,30.562L30.594,30.562L30.594,23.513C27.88,23.402 25.274,23.103 22.853,22.645C22.247,25.113 21.847,27.793 21.697,30.562ZM40.497,7.15C38.915,5.712 37.177,4.726 35.335,4.279L35.343,4.307C37.181,4.749 38.916,5.726 40.497,7.15ZM10.972,18.051C8.486,21.673 6.889,25.948 6.478,30.562L16.757,30.562C16.893,27.318 17.327,24.253 18.005,21.438C15.168,20.539 12.761,19.388 10.972,18.051ZM25.091,7.542C20.832,8.867 17.03,11.234 13.995,14.355C13.823,14.245 13.663,14.131 13.509,14.015C17.058,16.692 23.268,18.369 30.594,18.67L30.594,9.212C28.138,10.505 25.887,13.729 24.26,18.022C22.509,17.726 20.874,17.338 19.389,16.863C20.831,12.972 22.788,9.772 25.091,7.542ZM22.875,43.507C25.29,43.051 27.889,42.754 30.594,42.643L30.594,35.406L21.687,35.406C21.835,38.238 22.247,40.982 22.875,43.507ZM43.162,22.644C40.747,23.101 38.146,23.399 35.437,23.512L35.437,30.562L44.319,30.562C44.169,27.793 43.769,25.113 43.162,22.644Z"/>
+        </g>
+        <g transform="matrix(0.485113,0,0,0.485113,31.974958,31.982526)">
+            <path d="M66.016,33C66.016,51.203 51.234,66 33,66C14.797,66 0,51.203 0,33C0,14.781 14.797,0 33,0C51.234,0 66.016,14.781 66.016,33ZM27.094,19.5C24.859,19.5 23.438,20.75 23.438,22.734C23.438,24.734 24.859,25.969 27.078,25.969L31.812,25.969L35.847,25.339L31.234,29.375L20.781,39.828C20.031,40.562 19.609,41.578 19.609,42.547C19.609,44.75 21.234,46.219 23.281,46.219C24.375,46.219 25.312,45.844 26.156,45.016L36.516,34.656L40.507,30.084L39.969,34.312L39.969,38.75C39.969,40.953 41.219,42.391 43.234,42.391C45.188,42.391 46.438,40.922 46.438,38.75L46.438,23.797C46.438,20.984 44.812,19.5 42.094,19.5L27.094,19.5Z" style="fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>
--- a/src/components/Dashboard/common/DashboardNavigation.jsx
+++ b/src/components/Dashboard/common/DashboardNavigation.jsx
@ -38,6 +38,7 @@ import SettingsIcon from '../../Icons/SettingsIcon'
 import DeveloperIcon from '../../Icons/DeveloperIcon'
 import { ElectronContext } from '../context/ElectronContext'
 import DashboardWindowButtons from './DashboardWindowButtons'
+import WebAppSwitcher from './WebAppSwitcher'
 import {
  getSidebarDefaultPath,
  getSidebarMenuSections
@ -223,6 +224,7 @@ const DashboardNavigation = () => {
        style={{ marginTop: '-2px', marginRight: '6px' }}
      >
        <Space>
+          <WebAppSwitcher />
          <KeyboardShortcut
            shortcut='alt+q'
            hint='ALT Q'
--- a/src/components/Dashboard/common/WebAppSwitcher.jsx
+++ b/src/components/Dashboard/common/WebAppSwitcher.jsx
@ -0,0 +1,59 @@
+import { useContext } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { Button, Tooltip } from 'antd'
+import { ElectronContext } from '../context/ElectronContext'
+import OpenInAppIcon from '../../Icons/OpenInAppIcon'
+import OpenInBrowserIcon from '../../Icons/OpenInBrowserIcon'
+import config from '../../../config'
+
+const WebAppSwitcher = () => {
+  const { isElectron, openExternalUrl } = useContext(ElectronContext)
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  const getCurrentPath = () =>
+    `${location.pathname}${location.search}${location.hash}`
+
+  const handleClick = () => {
+    const path = getCurrentPath()
+
+    if (isElectron) {
+      const url = window.location.protocol.startsWith('http')
+        ? `${window.location.origin}${path}`
+        : `${config.webAppUrl}${path}`
+
+      openExternalUrl(url)
+      return
+    }
+
+    const redirectType =
+      import.meta.env.MODE === 'development' ? 'app-localhost' : 'app-scheme'
+    const redirect =
+      redirectType === 'app-localhost'
+        ? `http://localhost:3500${path}`
+        : `farmcontrol://app${path}`
+
+    const params = new URLSearchParams({
+      redirect,
+      redirectType
+    })
+
+    navigate(`/applaunch?${params.toString()}`)
+  }
+
+  return (
+    <Tooltip
+      title={isElectron ? 'Open in browser' : 'Open in app'}
+      arrow={false}
+    >
+      <Button
+        icon={isElectron ? <OpenInBrowserIcon /> : <OpenInAppIcon />}
+        type='text'
+        style={{ marginTop: '2px' }}
+        onClick={handleClick}
+      />
+    </Tooltip>
+  )
+}
+
+export default WebAppSwitcher
--- a/src/components/Icons/OpenInAppIcon.jsx
+++ b/src/components/Icons/OpenInAppIcon.jsx
@ -0,0 +1,6 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/openinappicon.svg?react'
+
+const OpenInAppIcon = (props) => <Icon component={CustomIconSvg} {...props} />
+
+export default OpenInAppIcon
--- a/src/components/Icons/OpenInBrowserIcon.jsx
+++ b/src/components/Icons/OpenInBrowserIcon.jsx
@ -0,0 +1,8 @@
+import Icon from '@ant-design/icons'
+import CustomIconSvg from '../../../assets/icons/openinbrowsericon.svg?react'
+
+const OpenInBrowserIcon = (props) => (
+  <Icon component={CustomIconSvg} {...props} />
+)
+
+export default OpenInBrowserIcon
--- a/src/config.js
+++ b/src/config.js
@ -1,12 +1,14 @@
 const config = {
  development: {
    backendUrl: 'https://dev.tombutcher.work/api',
+    webAppUrl: 'https://dev.tombutcher.work',
    printServerUrl: 'ws://192.168.68.53:8081',
    apiServerUrl: 'https://dev-wss.tombutcher.work',
    logLevel: 'trace'
  },
  production: {
    backendUrl: 'https://api.farmcontrol.app',
+    webAppUrl: 'https://web.farmcontrol.app',
    printServerUrl: 'ws://192.168.68.53:8081',
    apiServerUrl: 'https://ws.farmcontrol.app',
    logLevel: 'error'