Add @ianvs/prettier-plugin-sort-imports

.prettierrc.json

@@ -4,5 +4,6 @@
   "singleQuote": true,
   "printWidth": 120,
   "tabWidth": 2,
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"]
 }

web/package.json

@@ -37,6 +37,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^2.19.0",
     "@eslint/js": "^9.3.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
     "@iconify/json": "^2.2.171",
     "@intlify/eslint-plugin-vue-i18n": "^3.0.0-next.13",
     "@types/eslint__js": "^8.42.3",

web/src/App.vue

@@ -17,14 +17,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-
 import Navbar from '~/components/layout/header/Navbar.vue';
 import PipelineFeedSidebar from '~/components/pipeline-feed/PipelineFeedSidebar.vue';
 import useApiClient from '~/compositions/useApiClient';
 import useNotifications from '~/compositions/useNotifications';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 
 const route = useRoute();
 const apiClient = useApiClient();

web/src/assets/locales/en.json

@@ -62,7 +62,7 @@
       "enable": "Enable",
       "enabled": "Already enabled",
       "disabled": "Disabled",
-      "success": "Repository enabled",
+      "success": "Repository enabled"
     },
     "open_in_forge": "Open repository in forge",
     "settings": {

web/src/components/admin/settings/AdminAgentsTab.vue

@@ -130,10 +130,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
 import Badge from '~/components/atomic/Badge.vue';
 import Button from '~/components/atomic/Button.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
@@ -148,6 +144,9 @@ import { useDate } from '~/compositions/useDate';
 import useNotifications from '~/compositions/useNotifications';
 import { usePagination } from '~/compositions/usePaginate';
 import type { Agent } from '~/lib/api/types';
+import { cloneDeep } from 'lodash';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const apiClient = useApiClient();
 const notifications = useNotifications();

web/src/components/admin/settings/AdminInfoTab.vue

@@ -15,7 +15,8 @@
             target="_blank"
             rel="noopener noreferrer"
             class="underline"
-          >{{ version.latest }}</a>
+            >{{ version.latest }}</a
+          >
           <span v-else>
             {{ version.latest }}
           </span>

web/src/components/admin/settings/AdminOrgsTab.vue

@@ -34,8 +34,6 @@
 </template>
 
 <script lang="ts" setup>
-import { useI18n } from 'vue-i18n';
-
 import IconButton from '~/components/atomic/IconButton.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
 import Settings from '~/components/layout/Settings.vue';
@@ -44,6 +42,7 @@ import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';
 import { usePagination } from '~/compositions/usePaginate';
 import type { Org } from '~/lib/api/types';
+import { useI18n } from 'vue-i18n';
 
 const apiClient = useApiClient();
 const notifications = useNotifications();

web/src/components/admin/settings/AdminQueueTab.vue

@@ -75,10 +75,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import AdminQueueStats from './queue/AdminQueueStats.vue';
 import Badge from '~/components/atomic/Badge.vue';
 import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
@@ -87,7 +83,9 @@ import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import useNotifications from '~/compositions/useNotifications';
 import type { QueueInfo } from '~/lib/api/types/queue';
-
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import AdminQueueStats from './queue/AdminQueueStats.vue';
 
 const apiClient = useApiClient();
 const notifications = useNotifications();

web/src/components/admin/settings/AdminReposTab.vue

@@ -39,8 +39,6 @@
 </template>
 
 <script lang="ts" setup>
-import { useI18n } from 'vue-i18n';
-
 import Badge from '~/components/atomic/Badge.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
@@ -50,6 +48,7 @@ import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';
 import { usePagination } from '~/compositions/usePaginate';
 import type { Repo } from '~/lib/api/types';
+import { useI18n } from 'vue-i18n';
 
 const apiClient = useApiClient();
 const notifications = useNotifications();

web/src/components/admin/settings/AdminSecretsTab.vue

@@ -29,10 +29,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
 import Button from '~/components/atomic/Button.vue';
 import Settings from '~/components/layout/Settings.vue';
 import SecretEdit from '~/components/secrets/SecretEdit.vue';
@@ -41,8 +37,11 @@ import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';
 import { usePagination } from '~/compositions/usePaginate';
-import type { Secret} from '~/lib/api/types';
+import type { Secret } from '~/lib/api/types';
 import { WebhookEvents } from '~/lib/api/types';
+import { cloneDeep } from 'lodash';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const emptySecret: Partial<Secret> = {
   name: '',

web/src/components/admin/settings/AdminUsersTab.vue

@@ -82,10 +82,6 @@
 </template>
 
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash';
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
 import Badge from '~/components/atomic/Badge.vue';
 import Button from '~/components/atomic/Button.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
@@ -98,6 +94,9 @@ import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';
 import { usePagination } from '~/compositions/usePaginate';
 import type { User } from '~/lib/api/types';
+import { cloneDeep } from 'lodash';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const apiClient = useApiClient();
 const notifications = useNotifications();

web/src/components/admin/settings/queue/AdminQueueStats.vue

@@ -51,11 +51,10 @@
 </template>
 
 <script lang="ts" setup>
+import type { QueueStats } from '~/lib/api/types/queue';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import type { QueueStats } from '~/lib/api/types/queue';
-
 const props = defineProps<{
   stats?: QueueStats;
 }>();

web/src/components/atomic/Button.vue

@@ -35,11 +35,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, useAttrs } from 'vue';
-import type { RouteLocationRaw } from 'vue-router';
-
 import type { IconNames } from '~/components/atomic/Icon.vue';
 import Icon from '~/components/atomic/Icon.vue';
+import { computed, useAttrs } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
 
 const props = withDefaults(
   defineProps<{

web/src/components/atomic/DocsLink.vue

@@ -4,13 +4,13 @@
     :title="$t('documentation_for', { topic })"
     target="_blank"
     class="text-wp-link-100 hover:text-wp-link-200 cursor-pointer mt-1"
-  ><Icon name="question" class="!w-4 !h-4" /></a>
+    ><Icon name="question" class="!w-4 !h-4"
+  /></a>
 </template>
 
 <script lang="ts" setup>
-import { computed, toRef } from 'vue';
-
 import Icon from '~/components/atomic/Icon.vue';
+import { computed, toRef } from 'vue';
 
 const props = defineProps<{
   url: string;

web/src/components/atomic/IconButton.vue

@@ -28,10 +28,9 @@
 </template>
 
 <script lang="ts" setup>
-import type { RouteLocationRaw } from 'vue-router';
-
 import type { IconNames } from '~/components/atomic/Icon.vue';
 import Icon from '~/components/atomic/Icon.vue';
+import type { RouteLocationRaw } from 'vue-router';
 
 defineProps<{
   icon?: IconNames;

web/src/components/atomic/SyntaxHighlight.ts

@@ -1,5 +1,4 @@
 import '~/style/prism.css';
-
 import Prism from 'prismjs';
 import type { VNode } from 'vue';
 import { computed, defineComponent, h, toRef } from 'vue';

web/src/components/form/CheckboxesField.vue

@@ -12,7 +12,6 @@
 
 <script lang="ts" setup>
 import { computed, toRef } from 'vue';
-
 import Checkbox from './Checkbox.vue';
 import type { CheckboxOption } from './form.types';
 

web/src/components/form/NumberField.vue

@@ -3,9 +3,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, toRef } from 'vue';
-
 import TextField from '~/components/form/TextField.vue';
+import { computed, toRef } from 'vue';
 
 const props = defineProps<{
   modelValue: number;

web/src/components/form/RadioField.vue

@@ -17,7 +17,6 @@
 
 <script lang="ts" setup>
 import { computed, toRef } from 'vue';
-
 import type { RadioOption } from './form.types';
 
 const props = defineProps<{

web/src/components/form/SelectField.vue

@@ -12,7 +12,6 @@
 
 <script lang="ts" setup>
 import { computed, toRef } from 'vue';
-
 import type { SelectOption } from './form.types';
 
 const props = defineProps<{

web/src/components/layout/Panel.vue

@@ -32,9 +32,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-
 import Icon from '~/components/atomic/Icon.vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps<{
   title?: string;

web/src/components/layout/header/ActivePipelines.vue

@@ -15,10 +15,9 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, toRef } from 'vue';
-
 import IconButton from '~/components/atomic/IconButton.vue';
 import usePipelineFeed from '~/compositions/usePipelineFeed';
+import { onMounted, toRef } from 'vue';
 
 const pipelineFeed = usePipelineFeed();
 const activePipelines = toRef(pipelineFeed, 'activePipelines');

web/src/components/layout/header/Navbar.vue

@@ -37,16 +37,14 @@
 </template>
 
 <script lang="ts" setup>
-import { useRoute } from 'vue-router';
-
-import ActivePipelines from './ActivePipelines.vue';
 import WoodpeckerLogo from '~/assets/logo.svg?component';
 import Button from '~/components/atomic/Button.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import useAuthentication from '~/compositions/useAuthentication';
 import useConfig from '~/compositions/useConfig';
 import { useVersion } from '~/compositions/useVersion';
-
+import { useRoute } from 'vue-router';
+import ActivePipelines from './ActivePipelines.vue';
 
 const version = useVersion();
 const config = useConfig();

web/src/components/layout/popups/DeployPipelinePopup.vue

@@ -46,16 +46,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, toRef, watch } from 'vue';
-import { useRouter } from 'vue-router';
-
 import Button from '~/components/atomic/Button.vue';
 import InputField from '~/components/form/InputField.vue';
 import TextField from '~/components/form/TextField.vue';
 import Panel from '~/components/layout/Panel.vue';
 import Popup from '~/components/layout/Popup.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { inject } from '~/compositions/useInjectProvide';
+import { computed, onMounted, ref, toRef, watch } from 'vue';
+import { useRouter } from 'vue-router';
 
 const props = defineProps<{
   open: boolean;

web/src/components/layout/popups/ManualPipelinePopup.vue

@@ -41,9 +41,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
-
 import Button from '~/components/atomic/Button.vue';
 import InputField from '~/components/form/InputField.vue';
 import SelectField from '~/components/form/SelectField.vue';
@@ -53,6 +50,8 @@ import Popup from '~/components/layout/Popup.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { inject } from '~/compositions/useInjectProvide';
 import { usePaginate } from '~/compositions/usePaginate';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 
 defineProps<{
   open: boolean;