fix(web): align browser context actions with settings pages (#302)

apps/web/src/pages/browser/components/context-setting.vue

@@ -199,28 +199,30 @@
         </div>
       </div>
 
-      <Separator class="my-6" />
-
-      <div class="flex gap-2 items-center justify-between">
+      <section class="flex justify-end mt-6 gap-4">
         <ConfirmPopover
-          :title="$t('browser.deleteConfirm')"
+          :message="$t('browser.deleteConfirm')"
           :confirm-text="$t('common.delete')"
+          :loading="isDeleting"
           @confirm="handleDelete"
         >
-          <Button
-            variant="destructive"
-            type="button"
-          >
-            <FontAwesomeIcon :icon="['fas', 'trash']" />
-          </Button>
+          <template #trigger>
+            <Button
+              type="button"
+              variant="outline"
+              :aria-label="$t('common.delete')"
+            >
+              <FontAwesomeIcon :icon="['far', 'trash-can']" />
+            </Button>
+          </template>
         </ConfirmPopover>
-        <Button
+        <LoadingButton
           type="submit"
-          :disabled="isSaving"
+          :loading="isSaving"
         >
           {{ $t('common.save') }}
-        </Button>
-      </div>
+        </LoadingButton>
+      </section>
     </form>
   </div>
 </template>
@@ -248,6 +250,7 @@ import { useI18n } from 'vue-i18n'
 import { toast } from 'vue-sonner'
 import { useDialogMutation } from '@/composables/useDialogMutation'
 import ConfirmPopover from '@/components/confirm-popover/index.vue'
+import LoadingButton from '@/components/loading-button/index.vue'
 import { resolveApiErrorMessage } from '@/utils/api-error'
 import { emptyTimezoneValue } from '@/utils/timezones'
 import TimezoneSelect from '@/components/timezone-select/index.vue'
@@ -321,7 +324,7 @@ const { mutateAsync: updateMutation, isLoading: isSaving } = useMutation({
   mutation: async (data: { id: string; name: string; config: Record<string, unknown> }) => {
     const { data: result } = await putBrowserContextsById({
       path: { id: data.id },
-      body: { name: data.name } as BrowsercontextsUpdateRequest,
+      body: { name: data.name, config: data.config } as BrowsercontextsUpdateRequest,
       throwOnError: true,
     })
     return result
@@ -329,7 +332,7 @@ const { mutateAsync: updateMutation, isLoading: isSaving } = useMutation({
   onSettled: () => queryCache.invalidateQueries({ key: ['browser-contexts'] }),
 })
 
-const { mutateAsync: deleteMutation } = useMutation({
+const { mutateAsync: deleteMutation, isLoading: isDeleting } = useMutation({
   mutation: async (id: string) => {
     await deleteBrowserContextsById({
       path: { id },

apps/web/src/pages/browser/index.vue

@@ -73,7 +73,7 @@ const openStatus = reactive({
               :model-value="selectContext(item.id as string).value"
               @update:model-value="(isSelect) => {
                 if (isSelect) {
-                  curContext = item
+                  curContext.value = item
                 }
               }"
             >