From 30ecb000632c41ea25b42cf00e38c1b2edf0daf6 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Thu, 12 Feb 2026 14:50:45 +0900
Subject: [PATCH] refactor auto change status dialog ui style

---
 .../Tools/dialogs/AutoChangeStatusDialog.vue  | 300 +++++++++---------
 1 file changed, 153 insertions(+), 147 deletions(-)

diff --git a/src/views/Tools/dialogs/AutoChangeStatusDialog.vue b/src/views/Tools/dialogs/AutoChangeStatusDialog.vue
index 00288d19..e2bce2ee 100644
--- a/src/views/Tools/dialogs/AutoChangeStatusDialog.vue
+++ b/src/views/Tools/dialogs/AutoChangeStatusDialog.vue
@@ -5,170 +5,175 @@
                 <DialogTitle>{{ t('view.settings.general.automation.auto_change_status') }}</DialogTitle>
             </DialogHeader>
 
-            <div class="grid gap-4">
+            <FieldGroup class="gap-4">
                 <SimpleSwitch
                     :label="t('view.settings.general.automation.auto_change_status')"
                     :value="autoStateChangeEnabled"
                     :tooltip="t('view.settings.general.automation.auto_state_change_tooltip')"
                     @change="setAutoStateChangeEnabled" />
 
-                <div>
-                    <span class="text-sm">{{ t('view.settings.general.automation.alone_status') }}</span>
-                    <Select
-                        :model-value="autoStateChangeAloneStatus"
-                        :disabled="!autoStateChangeEnabled"
-                        @update:modelValue="setAutoStateChangeAloneStatus">
-                        <SelectTrigger style="margin-top: 8px" size="sm">
-                            <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="join me">
-                                <i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
-                            </SelectItem>
-                            <SelectItem value="active">
-                                <i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
-                            </SelectItem>
-                            <SelectItem value="ask me">
-                                <i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
-                            </SelectItem>
-                            <SelectItem value="busy">
-                                <i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
-                            </SelectItem>
-                        </SelectContent>
-                    </Select>
+                <Field>
+                    <FieldLabel>{{ t('view.settings.general.automation.alone_status') }}</FieldLabel>
+                    <FieldContent>
+                        <Select
+                            :model-value="autoStateChangeAloneStatus"
+                            :disabled="!autoStateChangeEnabled"
+                            @update:modelValue="setAutoStateChangeAloneStatus">
+                            <SelectTrigger size="sm">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="join me">
+                                    <i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
+                                </SelectItem>
+                                <SelectItem value="active">
+                                    <i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
+                                </SelectItem>
+                                <SelectItem value="ask me">
+                                    <i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
+                                </SelectItem>
+                                <SelectItem value="busy">
+                                    <i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
 
-                    <SimpleSwitch
-                        style="margin-top: 8px"
-                        :label="t('view.settings.general.automation.change_status_description')"
-                        :value="autoStateChangeAloneDescEnabled"
-                        :disabled="!autoStateChangeEnabled"
-                        @change="setAutoStateChangeAloneDescEnabled" />
-                    <Input
-                        v-if="autoStateChangeAloneDescEnabled"
-                        :model-value="autoStateChangeAloneDesc"
-                        :disabled="!autoStateChangeEnabled"
-                        :maxlength="32"
-                        :placeholder="t('view.settings.general.automation.status_description_placeholder')"
-                        style="margin-top: 8px"
-                        size="sm"
-                        @update:modelValue="setAutoStateChangeAloneDesc" />
-                </div>
+                        <SimpleSwitch
+                            :label="t('view.settings.general.automation.change_status_description')"
+                            :value="autoStateChangeAloneDescEnabled"
+                            :disabled="!autoStateChangeEnabled"
+                            @change="setAutoStateChangeAloneDescEnabled" />
+                        <Input
+                            v-if="autoStateChangeAloneDescEnabled"
+                            :model-value="autoStateChangeAloneDesc"
+                            :disabled="!autoStateChangeEnabled"
+                            :maxlength="32"
+                            :placeholder="t('view.settings.general.automation.status_description_placeholder')"
+                            size="sm"
+                            @update:modelValue="setAutoStateChangeAloneDesc" />
+                    </FieldContent>
+                </Field>
 
-                <div>
-                    <span class="text-sm">{{ t('view.settings.general.automation.company_status') }}</span>
-                    <Select
-                        :model-value="autoStateChangeCompanyStatus"
-                        :disabled="!autoStateChangeEnabled"
-                        @update:modelValue="setAutoStateChangeCompanyStatus">
-                        <SelectTrigger style="margin-top: 8px" size="sm">
-                            <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="join me">
-                                <i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
-                            </SelectItem>
-                            <SelectItem value="active">
-                                <i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
-                            </SelectItem>
-                            <SelectItem value="ask me">
-                                <i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
-                            </SelectItem>
-                            <SelectItem value="busy">
-                                <i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
-                            </SelectItem>
-                        </SelectContent>
-                    </Select>
+                <Field>
+                    <FieldLabel>{{ t('view.settings.general.automation.company_status') }}</FieldLabel>
+                    <FieldContent>
+                        <Select
+                            :model-value="autoStateChangeCompanyStatus"
+                            :disabled="!autoStateChangeEnabled"
+                            @update:modelValue="setAutoStateChangeCompanyStatus">
+                            <SelectTrigger size="sm">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="join me">
+                                    <i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
+                                </SelectItem>
+                                <SelectItem value="active">
+                                    <i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
+                                </SelectItem>
+                                <SelectItem value="ask me">
+                                    <i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
+                                </SelectItem>
+                                <SelectItem value="busy">
+                                    <i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
 
-                    <SimpleSwitch
-                        style="margin-top: 8px"
-                        :label="t('view.settings.general.automation.change_status_description')"
-                        :value="autoStateChangeCompanyDescEnabled"
-                        :disabled="!autoStateChangeEnabled"
-                        @change="setAutoStateChangeCompanyDescEnabled" />
-                    <Input
-                        v-if="autoStateChangeCompanyDescEnabled"
-                        :model-value="autoStateChangeCompanyDesc"
-                        :disabled="!autoStateChangeEnabled"
-                        :maxlength="32"
-                        :placeholder="t('view.settings.general.automation.status_description_placeholder')"
-                        style="margin-top: 8px"
-                        size="sm"
-                        @update:modelValue="setAutoStateChangeCompanyDesc" />
-                </div>
+                        <SimpleSwitch
+                            :label="t('view.settings.general.automation.change_status_description')"
+                            :value="autoStateChangeCompanyDescEnabled"
+                            :disabled="!autoStateChangeEnabled"
+                            @change="setAutoStateChangeCompanyDescEnabled" />
+                        <Input
+                            v-if="autoStateChangeCompanyDescEnabled"
+                            :model-value="autoStateChangeCompanyDesc"
+                            :disabled="!autoStateChangeEnabled"
+                            :maxlength="32"
+                            :placeholder="t('view.settings.general.automation.status_description_placeholder')"
+                            size="sm"
+                            @update:modelValue="setAutoStateChangeCompanyDesc" />
+                    </FieldContent>
+                </Field>
 
-                <div>
-                    <span class="text-sm">{{ t('view.settings.general.automation.allowed_instance_types') }}</span>
-                    <Select
-                        :model-value="autoStateChangeInstanceTypes"
-                        :disabled="!autoStateChangeEnabled"
-                        multiple
-                        @update:modelValue="setAutoStateChangeInstanceTypes">
-                        <SelectTrigger style="margin-top: 8px" size="sm">
-                            <SelectValue
-                                :placeholder="t('view.settings.general.automation.instance_type_placeholder')" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem v-for="instanceType in instanceTypes" :key="instanceType" :value="instanceType">
-                                {{ instanceType }}
-                            </SelectItem>
-                        </SelectContent>
-                    </Select>
-                </div>
+                <Field>
+                    <FieldLabel>{{ t('view.settings.general.automation.allowed_instance_types') }}</FieldLabel>
+                    <FieldContent>
+                        <Select
+                            :model-value="autoStateChangeInstanceTypes"
+                            :disabled="!autoStateChangeEnabled"
+                            multiple
+                            @update:modelValue="setAutoStateChangeInstanceTypes">
+                            <SelectTrigger size="sm">
+                                <SelectValue
+                                    :placeholder="t('view.settings.general.automation.instance_type_placeholder')" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem
+                                    v-for="instanceType in instanceTypes"
+                                    :key="instanceType"
+                                    :value="instanceType">
+                                    {{ instanceType }}
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </FieldContent>
+                </Field>
 
-                <div>
-                    <span class="text-sm">{{ t('view.settings.general.automation.alone_condition') }}</span>
-                    <RadioGroup
-                        :model-value="autoStateChangeNoFriends ? 'true' : 'false'"
-                        :disabled="!autoStateChangeEnabled"
-                        class="gap-2 flex"
-                        style="margin-top: 8px"
-                        @update:modelValue="handleAutoStateChangeNoFriendsRadio">
-                        <div class="flex items-center space-x-2">
-                            <RadioGroupItem id="autoStateChangeNoFriends-false" value="false" />
-                            <label for="autoStateChangeNoFriends-false">
-                                {{ t('view.settings.general.automation.alone') }}
-                            </label>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <RadioGroupItem id="autoStateChangeNoFriends-true" value="true" />
-                            <label for="autoStateChangeNoFriends-true">
-                                {{ t('view.settings.general.automation.no_friends') }}
-                            </label>
-                        </div>
-                    </RadioGroup>
-                </div>
+                <Field>
+                    <FieldLabel>{{ t('view.settings.general.automation.alone_condition') }}</FieldLabel>
+                    <FieldContent>
+                        <RadioGroup
+                            :model-value="autoStateChangeNoFriends ? 'true' : 'false'"
+                            :disabled="!autoStateChangeEnabled"
+                            class="gap-2 flex"
+                            @update:modelValue="handleAutoStateChangeNoFriendsRadio">
+                            <div class="flex items-center space-x-2">
+                                <RadioGroupItem id="autoStateChangeNoFriends-false" value="false" />
+                                <label for="autoStateChangeNoFriends-false">
+                                    {{ t('view.settings.general.automation.alone') }}
+                                </label>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <RadioGroupItem id="autoStateChangeNoFriends-true" value="true" />
+                                <label for="autoStateChangeNoFriends-true">
+                                    {{ t('view.settings.general.automation.no_friends') }}
+                                </label>
+                            </div>
+                        </RadioGroup>
+                    </FieldContent>
+                </Field>
 
-                <div>
-                    <span class="text-sm"
-                        >{{ t('view.settings.general.automation.auto_invite_request_accept') }}
+                <Field>
+                    <FieldLabel>
+                        {{ t('view.settings.general.automation.auto_invite_request_accept') }}
                         <TooltipWrapper
                             side="top"
-                            style="margin-left: 5px"
                             :content="t('view.settings.general.automation.auto_invite_request_accept_tooltip')">
                             <Info class="inline-block" />
                         </TooltipWrapper>
-                    </span>
-                    <br />
-                    <ToggleGroup
-                        type="single"
-                        required
-                        variant="outline"
-                        size="sm"
-                        :model-value="autoAcceptInviteRequests"
-                        style="margin-top: 5px"
-                        @update:model-value="setAutoAcceptInviteRequests">
-                        <ToggleGroupItem value="Off">{{
-                            t('view.settings.general.automation.auto_invite_request_accept_off')
-                        }}</ToggleGroupItem>
-                        <ToggleGroupItem value="All Favorites">{{
-                            t('view.settings.general.automation.auto_invite_request_accept_favs')
-                        }}</ToggleGroupItem>
-                        <ToggleGroupItem value="Selected Favorites">{{
-                            t('view.settings.general.automation.auto_invite_request_accept_selected_favs')
-                        }}</ToggleGroupItem>
-                    </ToggleGroup>
-                </div>
-            </div>
+                    </FieldLabel>
+                    <FieldContent>
+                        <ToggleGroup
+                            type="single"
+                            required
+                            variant="outline"
+                            size="sm"
+                            :model-value="autoAcceptInviteRequests"
+                            @update:model-value="setAutoAcceptInviteRequests">
+                            <ToggleGroupItem value="Off">{{
+                                t('view.settings.general.automation.auto_invite_request_accept_off')
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="All Favorites">{{
+                                t('view.settings.general.automation.auto_invite_request_accept_favs')
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="Selected Favorites">{{
+                                t('view.settings.general.automation.auto_invite_request_accept_selected_favs')
+                            }}</ToggleGroupItem>
+                        </ToggleGroup>
+                    </FieldContent>
+                </Field>
+            </FieldGroup>
         </DialogContent>
     </Dialog>
 </template>
@@ -176,6 +181,7 @@
 <script setup>
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+    import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
     import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
     import { Info } from 'lucide-vue-next';