reorganize code into smaller files & dirs

packages/app/src/Components/Progress/Progress.css

@@ -0,0 +1,23 @@
+.progress {
+  position: relative;
+  height: 1em;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: var(--gray);
+}
+
+.progress > div {
+  position: absolute;
+  background-color: var(--success);
+  width: var(--progress);
+  height: 100%;
+}
+
+.progress > span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-size: small;
+  line-height: 1em;
+}

packages/app/src/Components/Progress/Progress.tsx

@@ -0,0 +1,21 @@
+import "./Progress.css";
+import { FormattedNumber } from "react-intl";
+import { CSSProperties, ReactNode } from "react";
+
+export default function Progress({ value, status }: { value: number; status?: ReactNode }) {
+  const v = Math.max(0.01, Math.min(1, value));
+  return (
+    <div className="progress">
+      <div
+        style={
+          {
+            "--progress": `${v * 100}%`,
+          } as CSSProperties
+        }></div>
+      <span>
+        {status}
+        <FormattedNumber value={v} style="percent" />
+      </span>
+    </div>
+  );
+}