fix(web): propagation bug with slide panel focus (#791)

* removed react-app type instead use vite.

* removed index.html from public since vite uses it from root: read more: https://vitejs.dev/guide/#index-html-and-project-root

* yarn.lock update.

* added vite config file. With commented rollUp option if we want the build to be called build but using default stuff for now.

* updated tsconfig to use vite and include vite.config.ts

* changed package json build commands to use vite.

* for some reason there is an error in vite config when we put project as tsconfig.json.

* build.go updated to use the new dist folder.

* refactored as well updated to use dist and web.AssetHandler again.

* Fixed issue forcing the frontend to be reloaded for all routes to work if logged in fresh without reloading it will always go back to dashboard.

* updated it to use the new function; need to fix the Index for baseUrl I believe, if enabled it works except logs route will crash due to cors.

* refactored and default port to 7474, don't think we need the rollUpOptions.

* added tmp/ to ignore .

* init air.toml, for dev hot reloading both app and backend. https://github.com/cosmtrek/air run it using air but make sure it's in PATH

* updated the start command to build and watch for changes, works great with air.

* revert

* added proxy for vite config. To be used for dev.

* fix: This fixes #117 Propagation bug.

* chore: update yarn lock

---------

Co-authored-by: KaiserBh <kaiserbh@proton.me>
Co-authored-by: ze0s <ze0s@riseup.net>

.gitignore

@@ -33,6 +33,7 @@ bin/
 log/
 #dist/
 .run/
+tmp/
 # If needed, package-lock.json shall be added
 # manually using an explicit git add command.
 package-lock.json

web/package.json

@@ -21,6 +21,7 @@
     "react-hot-toast": "^2.2.0",
     "react-multi-select-component": "^4.2.9",
     "react-popper-tooltip": "^4.4.2",
+    "react-portal": "^4.2.2",
     "react-query": "^3.39.1",
     "react-ridge-state": "4.2.2",
     "react-router-dom": "^6.3.0",
@@ -53,6 +54,7 @@
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
+    "@types/react-portal": "^4.0.4",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-table": "^7.7.12",
     "@typescript-eslint/eslint-plugin": "^5.28.0",

web/src/App.tsx

@@ -7,6 +7,7 @@ import { LocalRouter } from "./domain/routes";
 import { AuthContext, SettingsContext } from "./utils/Context";
 import { ErrorPage } from "./components/alerts";
 import Toast from "./components/notifications/Toast";
+import { Portal } from "react-portal";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -43,7 +44,9 @@ export function App() {
       fallbackRender={ErrorPage}
     >
       <QueryClientProvider client={queryClient}>
+        <Portal>
           <Toaster position="top-right" />
+        </Portal>
         <LocalRouter isLoggedIn={authContext.isLoggedIn} />
         {settings.debug ? (
           <ReactQueryDevtools initialIsOpen={false} />