@meshxdata/fops 0.1.51 → 0.1.53

package/src/plugins/bundled/fops-plugin-cloud/ui/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@meshxdata/fops-cloud-ui",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@auth0/auth0-react": "^2.16.0",
+    "@tanstack/react-query": "^5.60.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.460.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.0",
+    "tailwind-merge": "^2.5.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^4.0.0",
+    "vite": "^6.0.0"
+  }
+}

package/src/plugins/bundled/fops-plugin-cloud/ui/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/src/plugins/bundled/fops-plugin-cloud/ui/src/App.jsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from "react";
+import { Routes, Route, useLocation } from "react-router-dom";
+
+import "./css/style.css";
+
+import Resources from "./pages/Resources";
+import CreateResource from "./pages/CreateResource";
+import Fleet from "./pages/Fleet";
+import Costs from "./pages/Costs";
+import Audit from "./pages/Audit";
+
+function App() {
+  const location = useLocation();
+
+  useEffect(() => {
+    document.querySelector("html").style.scrollBehavior = "auto";
+    window.scroll({ top: 0 });
+    document.querySelector("html").style.scrollBehavior = "";
+  }, [location.pathname]);
+
+  return (
+    <Routes>
+      <Route exact path="/" element={<Resources />} />
+      <Route path="/resources/new" element={<CreateResource />} />
+      <Route path="/fleet" element={<Fleet />} />
+      <Route path="/costs" element={<Costs />} />
+      <Route path="/audit" element={<Audit />} />
+    </Routes>
+  );
+}
+
+export default App;

package/src/plugins/bundled/fops-plugin-cloud/ui/src/api/client.js

@@ -0,0 +1,114 @@
+const BASE = "/cloud/api";
+
+// Token getter — set by AuthContext once Auth0 is initialized
+let _getToken = null;
+
+export function setTokenGetter(fn) {
+  _getToken = fn;
+}
+
+async function authHeaders(extra = {}) {
+  if (!_getToken) return extra;
+  try {
+    const token = await _getToken();
+    return { ...extra, Authorization: `Bearer ${token}` };
+  } catch {
+    return extra;
+  }
+}
+
+export async function apiFetch(path, opts = {}) {
+  const headers = await authHeaders({ "Content-Type": "application/json", ...opts.headers });
+  const res = await fetch(`${BASE}${path}`, { ...opts, headers });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error || `HTTP ${res.status}`);
+  }
+  return res.json();
+}
+
+/**
+ * Make a streaming POST/DELETE request and call onLine for each SSE event.
+ * Returns the final result from the "done" event, or throws on "error".
+ */
+export async function apiStream(path, { method = "POST", body, onLine, onJobId } = {}) {
+  const headers = await authHeaders({ "Content-Type": "application/json" });
+  const res = await fetch(`${BASE}${path}`, {
+    method,
+    headers,
+    body: body ? JSON.stringify(body) : undefined,
+  });
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err.error || `HTTP ${res.status}`);
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let finalResult = null;
+  let finalError = null;
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+
+    const lines = buffer.split("\n");
+    buffer = lines.pop();
+
+    for (const line of lines) {
+      if (!line.startsWith("data: ")) continue;
+      try {
+        const evt = JSON.parse(line.slice(6));
+        if (evt.type === "job") {
+          onJobId?.(evt.jobId);
+        } else if (evt.type === "done") {
+          finalResult = evt.result;
+          onLine?.("\u2713 Operation complete", "done");
+        } else if (evt.type === "error" && !evt.text?.startsWith("  ")) {
+          finalError = evt.text;
+        } else if (evt.type === "log" || evt.type === "error") {
+          onLine?.(evt.text, evt.type);
+        }
+      } catch { /* ignore */ }
+    }
+  }
+
+  if (finalError) throw new Error(finalError);
+  return finalResult;
+}
+
+/**
+ * Poll a job's buffered logs for reconnection after page reload.
+ */
+export async function pollJob(jobId, onLine) {
+  let offset = 0;
+
+  while (true) {
+    const headers = await authHeaders();
+    const res = await fetch(`${BASE}/jobs/${jobId}?since=${offset}`, { headers });
+    if (!res.ok) {
+      if (res.status === 404) throw new Error("Job not found \u2014 it may have expired");
+      throw new Error(`HTTP ${res.status}`);
+    }
+
+    const data = await res.json();
+
+    for (const log of data.logs) {
+      onLine?.(log.text, log.type);
+    }
+    offset = data.offset + data.logs.length;
+
+    if (data.status === "done") {
+      onLine?.("\u2713 Operation complete", "done");
+      return { status: "done", result: data.result };
+    }
+    if (data.status === "error") {
+      return { status: "error", error: data.error };
+    }
+
+    await new Promise((r) => setTimeout(r, 1000));
+  }
+}

package/src/plugins/bundled/fops-plugin-cloud/ui/src/api/queries.js

@@ -0,0 +1,111 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiFetch, apiStream } from "./client";
+
+export function useResources() {
+  return useQuery({ queryKey: ["resources"], queryFn: () => apiFetch("/resources") });
+}
+
+export function useHealth() {
+  return useQuery({ queryKey: ["health"], queryFn: () => apiFetch("/health") });
+}
+
+export function useCosts(days = 30) {
+  return useQuery({
+    queryKey: ["costs", days],
+    queryFn: () => apiFetch(`/costs?days=${days}`),
+    staleTime: 5 * 60 * 1000, // cache for 5 minutes — cost queries are slow
+  });
+}
+
+export function useFleet() {
+  return useQuery({ queryKey: ["fleet"], queryFn: () => apiFetch("/fleet") });
+}
+
+export function useAudit() {
+  return useQuery({ queryKey: ["audit"], queryFn: () => apiFetch("/audit"), staleTime: 300_000 });
+}
+
+/**
+ * Streaming mutations — accept an onLine callback to show live output.
+ */
+
+export function useSyncResources() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ onLine } = {}) =>
+      apiStream("/sync", { onLine }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["resources"] });
+      qc.invalidateQueries({ queryKey: ["fleet"] });
+      qc.invalidateQueries({ queryKey: ["health"] });
+    },
+  });
+}
+
+export function useResourceAction() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ type, name, action, onLine }) =>
+      apiStream(`/resources/${type}/${name}/${action}`, { onLine }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["resources"] }),
+  });
+}
+
+export function useDeleteResource() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ type, name, onLine }) =>
+      apiStream(`/resources/${type}/${name}`, { method: "DELETE", onLine }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["resources"] }),
+  });
+}
+
+export function useFeatureFlags(vmName) {
+  return useQuery({
+    queryKey: ["flags", vmName],
+    queryFn: () => apiFetch(`/flags/${vmName}`),
+    enabled: !!vmName,
+  });
+}
+
+export function useSetFeatureFlags() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ vmName, flags, onLine }) =>
+      apiStream(`/flags/${vmName}`, { body: { flags }, onLine }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["flags"] }),
+  });
+}
+
+export function useDeploy() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ vmName, opts = {}, onLine }) =>
+      apiStream(`/deploy/${vmName}`, { body: opts, onLine }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["resources"] });
+      qc.invalidateQueries({ queryKey: ["fleet"] });
+    },
+  });
+}
+
+export function useGrantAdmin() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ vmName, username, onLine }) =>
+      apiStream(`/resources/vm/${vmName}/grant-admin`, {
+        body: username ? { username } : {},
+        onLine,
+      }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["fleet"] }),
+  });
+}
+
+export function useCreateResource() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ body, onLine, onJobId }) =>
+      apiStream(`/resources/${body.type}`, { body, onLine, onJobId }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["resources"] }),
+  });
+}

package/src/plugins/bundled/fops-plugin-cloud/ui/src/components/LogPanel.jsx

@@ -0,0 +1,162 @@
+import React, { useRef, useEffect, useMemo } from "react";
+
+// ANSI color code → Tailwind class mapping
+const ANSI_COLORS = {
+  "30": "text-gray-900", "31": "text-red-400", "32": "text-green-400",
+  "33": "text-yellow-400", "34": "text-blue-400", "35": "text-purple-400",
+  "36": "text-cyan-400", "37": "text-gray-200", "90": "text-gray-500",
+  "91": "text-red-300", "92": "text-green-300", "93": "text-yellow-300",
+  "94": "text-blue-300", "95": "text-purple-300", "96": "text-cyan-300",
+  "97": "text-white",
+};
+
+const ANSI_RE = /\x1b\[([0-9;]*)m/g;
+
+function parseAnsi(str) {
+  const segments = [];
+  let lastIndex = 0;
+  let currentClass = "text-gray-300";
+  ANSI_RE.lastIndex = 0;
+  let match;
+  while ((match = ANSI_RE.exec(str)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ text: str.slice(lastIndex, match.index), className: currentClass });
+    }
+    const codes = match[1].split(";");
+    for (const code of codes) {
+      if (code === "0" || code === "") currentClass = "text-gray-300";
+      else if (code === "1") currentClass = currentClass + " font-bold";
+      else if (ANSI_COLORS[code]) currentClass = ANSI_COLORS[code];
+    }
+    lastIndex = ANSI_RE.lastIndex;
+  }
+  if (lastIndex < str.length) {
+    segments.push({ text: str.slice(lastIndex), className: currentClass });
+  }
+  return segments;
+}
+
+function stripAnsi(s) {
+  return s.replace(/\x1b\[[0-9;]*m/g, "");
+}
+
+// Provisioning phases detected from section headers in the log stream
+const PHASES = [
+  { id: "infra",    label: "Infrastructure",  match: "Infrastructure" },
+  { id: "firewall", label: "Firewall",        match: "Firewall" },
+  { id: "security", label: "Security",        match: "Security" },
+  { id: "connect",  label: "Connectivity",    match: "Connectivity" },
+  { id: "services", label: "Services",        match: "Services" },
+  { id: "post",     label: "Post-start",      match: "Post-start" },
+];
+
+function detectPhases(lines) {
+  const reached = new Set();
+  let current = null;
+
+  for (const line of lines) {
+    const clean = stripAnsi(line.text);
+
+    // Detect section headers: "─ Infrastructure ─" or "── Post-start ──"
+    for (const phase of PHASES) {
+      if (clean.includes(phase.match)) {
+        reached.add(phase.id);
+        current = phase.id;
+      }
+    }
+
+    // "Reconciliation complete" means all reconciliation phases done
+    if (clean.includes("Reconciliation complete")) {
+      reached.add("post");
+      current = "post";
+    }
+  }
+
+  return { reached, current };
+}
+
+export default function LogPanel({ lines = [], title = "Output", isDone = false, showPhases = false }) {
+  const endRef = useRef(null);
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [lines.length]);
+
+  const { reached, current } = useMemo(() => detectPhases(lines), [lines]);
+
+  const completedChecks = useMemo(
+    () => lines.filter((l) => stripAnsi(l.text).includes("✓")).length,
+    [lines],
+  );
+
+  const phaseIndex = PHASES.findIndex((p) => p.id === current);
+  const progressPercent = isDone ? 100 : Math.min(95, Math.floor(((phaseIndex + 1) / PHASES.length) * 100));
+
+  if (lines.length === 0) return null;
+
+  return (
+    <div className="mt-6">
+      {/* Phase steps */}
+      {showPhases && (
+        <div className="mb-5">
+          <div className="flex items-center gap-1">
+            {PHASES.map((phase, i) => {
+              const done = isDone || (reached.has(phase.id) && current !== phase.id);
+              const active = !isDone && current === phase.id;
+              return (
+                <React.Fragment key={phase.id}>
+                  <div className="flex items-center gap-1.5">
+                    <div className={`w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 ${
+                      done ? "bg-green-500 text-white"
+                      : active ? "bg-violet-500 text-white"
+                      : "bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500"
+                    }`}>
+                      {done ? "✓" : i + 1}
+                    </div>
+                    <span className={`text-xs font-medium whitespace-nowrap hidden sm:inline ${
+                      done ? "text-green-600 dark:text-green-400"
+                      : active ? "text-gray-800 dark:text-gray-100"
+                      : "text-gray-400 dark:text-gray-500"
+                    }`}>
+                      {phase.label}
+                    </span>
+                  </div>
+                  {i < PHASES.length - 1 && (
+                    <div className={`flex-1 h-px min-w-4 ${done ? "bg-green-500/40" : "bg-gray-200 dark:bg-gray-700"}`} />
+                  )}
+                </React.Fragment>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Header + progress */}
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase">{title}</h3>
+        <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+          {isDone ? "Complete" : `${completedChecks} checks — ${progressPercent}%`}
+        </span>
+      </div>
+
+      <div className="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full mb-3 overflow-hidden">
+        <div
+          className={`h-full rounded-full transition-all duration-500 ease-out ${isDone ? "bg-green-500" : "bg-violet-500"}`}
+          style={{ width: `${progressPercent}%` }}
+        />
+      </div>
+
+      {/* Terminal output */}
+      <div className={`bg-gray-900 dark:bg-gray-950 border border-gray-200 dark:border-gray-700/60 rounded-lg p-4 overflow-y-auto font-mono text-xs leading-relaxed ${showPhases ? "max-h-[60vh]" : "max-h-80"}`}>
+        {lines.map((line, i) => (
+          <div key={i}>
+            {parseAnsi(line.text).map((seg, j) => (
+              <span key={j} className={seg.className}>{seg.text}</span>
+            ))}
+          </div>
+        ))}
+        <div ref={endRef} />
+      </div>
+    </div>
+  );
+}

package/src/plugins/bundled/fops-plugin-cloud/ui/src/components/ThemeToggle.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { useThemeProvider } from "../utils/ThemeContext";
+
+export default function ThemeToggle() {
+  const { currentTheme, changeCurrentTheme } = useThemeProvider();
+
+  return (
+    <div>
+      <input
+        type="checkbox"
+        name="light-switch"
+        id="light-switch"
+        className="light-switch sr-only"
+        checked={currentTheme === "light"}
+        onChange={() => changeCurrentTheme(currentTheme === "light" ? "dark" : "light")}
+      />
+      <label
+        className="flex items-center justify-center cursor-pointer w-8 h-8 hover:bg-gray-100 lg:hover:bg-gray-200 dark:hover:bg-gray-700/50 dark:lg:hover:bg-gray-800 rounded-full"
+        htmlFor="light-switch"
+      >
+        <svg
+          className="dark:hidden fill-current text-gray-500/80 dark:text-gray-400/80"
+          width={16}
+          height={16}
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M8 0a1 1 0 0 1 1 1v.5a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1Z" />
+          <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-4 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
+          <path d="M13.657 3.757a1 1 0 0 0-1.414-1.414l-.354.354a1 1 0 0 0 1.414 1.414l.354-.354ZM13.5 8a1 1 0 0 1 1-1h.5a1 1 0 1 1 0 2h-.5a1 1 0 0 1-1-1ZM13.303 11.889a1 1 0 0 0-1.414 1.414l.354.354a1 1 0 0 0 1.414-1.414l-.354-.354ZM8 13.5a1 1 0 0 1 1 1v.5a1 1 0 1 1-2 0v-.5a1 1 0 0 1 1-1ZM4.111 13.303a1 1 0 1 0-1.414-1.414l-.354.354a1 1 0 1 0 1.414 1.414l.354-.354ZM0 8a1 1 0 0 1 1-1h.5a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1ZM3.757 2.343a1 1 0 1 0-1.414 1.414l.354.354A1 1 0 1 0 4.11 2.697l-.354-.354Z" />
+        </svg>
+        <svg
+          className="hidden dark:block fill-current text-gray-500/80 dark:text-gray-400/80"
+          width={16}
+          height={16}
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M11.875 4.375a.625.625 0 1 0 1.25 0c.001-.69.56-1.249 1.25-1.25a.625.625 0 1 0 0-1.25 1.252 1.252 0 0 1-1.25-1.25.625.625 0 1 0-1.25 0 1.252 1.252 0 0 1-1.25 1.25.625.625 0 1 0 0 1.25c.69.001 1.249.56 1.25 1.25Z" />
+          <path d="M7.019 1.985a1.55 1.55 0 0 0-.483-1.36 1.44 1.44 0 0 0-1.53-.277C2.056 1.553 0 4.5 0 7.9 0 12.352 3.648 16 8.1 16c3.407 0 6.246-2.058 7.51-4.963a1.446 1.446 0 0 0-.25-1.55 1.554 1.554 0 0 0-1.372-.502c-4.01.552-7.539-2.987-6.97-7ZM2 7.9C2 5.64 3.193 3.664 4.961 2.6 4.82 7.245 8.72 11.158 13.36 11.04 12.265 12.822 10.341 14 8.1 14 4.752 14 2 11.248 2 7.9Z" />
+        </svg>
+        <span className="sr-only">Switch to light / dark version</span>
+      </label>
+    </div>
+  );
+}

package/src/plugins/bundled/fops-plugin-cloud/ui/src/css/additional-styles/utility-patterns.css

@@ -0,0 +1,147 @@
+/* Cloud panel field inputs */
+.field-input {
+    @apply w-full bg-white dark:bg-gray-900/60 border border-gray-200 dark:border-gray-700/60 text-sm text-gray-800 dark:text-gray-100 rounded-lg px-3 py-2.5 placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500/30 shadow-xs transition;
+}
+
+/* Typography */
+.h1 {
+    @apply text-4xl font-extrabold tracking-tighter;
+}
+
+.h2 {
+    @apply text-3xl font-extrabold tracking-tighter;
+}
+
+.h3 {
+    @apply text-3xl font-extrabold;
+}
+
+.h4 {
+    @apply text-2xl font-extrabold tracking-tight;
+}
+
+@media (width >= theme(--breakpoint-md)) {
+    .h1 {
+        @apply text-5xl;
+    }
+
+    .h2 {
+        @apply text-4xl;
+    }
+}
+
+/* Buttons */
+.btn,
+.btn-lg,
+.btn-sm,
+.btn-xs {
+    @apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-xs transition;
+}
+
+.btn {
+    @apply px-3 py-2;
+}
+
+.btn-lg {
+    @apply px-4 py-3;
+}
+
+.btn-sm {
+    @apply px-2 py-1;
+}
+
+.btn-xs {
+    @apply px-2 py-0.5;
+}
+
+/* Forms */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox,
+.form-radio {
+    @apply bg-white dark:bg-gray-900/30 border focus:ring-0 focus:ring-offset-0 dark:disabled:bg-gray-700/30 dark:disabled:border-gray-700 dark:disabled:hover:border-gray-700;
+}
+
+.form-checkbox {
+    @apply rounded-sm;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select {
+    @apply text-sm text-gray-800 dark:text-gray-100 leading-5 py-2 px-3 border-gray-200 hover:border-gray-300 focus:border-gray-300 dark:border-gray-700/60 dark:hover:border-gray-600 dark:focus:border-gray-600 shadow-xs rounded-lg;
+}
+
+.form-input,
+.form-textarea {
+    @apply placeholder-gray-400 dark:placeholder-gray-500;
+}
+
+.form-select {
+    @apply pr-10;
+}
+
+.form-checkbox,
+.form-radio {
+    @apply text-violet-500 checked:bg-violet-500 checked:border-transparent border border-gray-300 dark:border-gray-700/60 dark:checked:border-transparent focus-visible:ring-2 focus-visible:ring-violet-500/50;
+}
+
+/* Switch element */
+.form-switch {
+    @apply relative select-none;
+    width: 44px;
+}
+
+.form-switch label {
+    @apply block overflow-hidden cursor-pointer h-6 rounded-full;
+}
+
+.form-switch label > span:first-child {
+    @apply absolute block rounded-full;
+    width: 20px;
+    height: 20px;
+    top: 2px;
+    left: 2px;
+    right: 50%;
+    transition: all .15s ease-out;
+}
+
+.form-switch input[type="checkbox"] + label {
+  @apply bg-gray-400 dark:bg-gray-700;
+}
+
+.form-switch input[type="checkbox"]:checked + label {
+  @apply bg-violet-500;
+}
+
+.form-switch input[type="checkbox"]:checked + label > span:first-child {
+    left: 22px;
+}
+
+.form-switch input[type="checkbox"]:disabled + label {
+    @apply cursor-not-allowed bg-gray-100 dark:bg-gray-700/20 border border-gray-200 dark:border-gray-700/60;
+}
+
+.form-switch input[type="checkbox"]:disabled + label > span:first-child {
+    @apply bg-gray-400 dark:bg-gray-600;
+}
+
+/* Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}