feat: add footer profile and upgrade dialogs

apps/web_v1/src/App.css

@@ -1893,9 +1893,9 @@
 .statusbar {
   height: 32px;
   display: grid;
-  grid-template-columns: minmax(310px, 0.9fr) minmax(480px, 1.2fr) minmax(320px, 0.9fr);
+  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
   align-items: center;
-  gap: 16px;
+  gap: 20px;
   padding: 0 16px;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   background: var(--senlin-status);
@@ -1917,6 +1917,18 @@
   white-space: nowrap;
 }
 
+.status-user {
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.86);
+  padding: 0;
+  cursor: pointer;
+}
+
+.status-user:hover .status-name {
+  color: #fff;
+}
+
 .status-tasks {
   justify-content: center;
 }
@@ -1931,6 +1943,7 @@
 
 .status-system {
   justify-content: flex-end;
+  overflow: hidden;
 }
 
 .status-name {
@@ -1959,6 +1972,61 @@
   color: #7be188;
 }
 
+.status-upgrade.arco-btn {
+  height: 22px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+}
+
+.status-modal-form {
+  margin-top: 8px;
+}
+
+.billing-plan-group {
+  width: 100%;
+  display: grid;
+  gap: 10px;
+}
+
+.billing-plan.arco-card {
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.billing-plan.active.arco-card {
+  border-color: var(--senlin-primary);
+  background: var(--senlin-soft-blue);
+}
+
+.billing-plan .arco-card-body {
+  padding: 12px;
+}
+
+.billing-plan .arco-radio {
+  width: 100%;
+  align-items: flex-start;
+}
+
+.billing-plan h6 {
+  margin: 0 0 4px;
+}
+
+.billing-price {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--senlin-primary);
+  font-weight: 700;
+}
+
+.billing-payments {
+  display: grid;
+  gap: 10px;
+  margin-top: 16px;
+  border-top: 1px solid var(--senlin-border);
+  padding-top: 14px;
+}
+
 @media (max-width: 1180px) {
   .workbench-shell {
     min-width: 1180px;