chore: add sort imports prettier plugin and format

Author: stabldev

frontend/.prettierrc

@@ -3,7 +3,12 @@
   "trailingComma": "none",
   "printWidth": 92,
   "tabWidth": 2,
-  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "plugins": [
+    "prettier-plugin-svelte",
+    "prettier-plugin-tailwindcss",
+    "@trivago/prettier-plugin-sort-imports"
+  ],
+  "importOrderSeparation": true,
   "overrides": [
     {
       "files": "*.svelte",

frontend/eslint.config.js

@@ -1,5 +1,5 @@
-import prettier from 'eslint-config-prettier';
 import js from '@eslint/js';
+import prettier from 'eslint-config-prettier';
 import svelte from 'eslint-plugin-svelte';
 import globals from 'globals';
 import ts from 'typescript-eslint';

frontend/package-lock.json

@@ -25,6 +25,7 @@
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
     "@types/eslint": "^9.6.0",
     "@types/node": "^22.10.1",
     "autoprefixer": "^10.4.20",

frontend/package.json

@@ -1,5 +1,4 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
-
 import type { components } from '$lib/clients/v1';
 
 type Profile = components['schemas']['Profile'];

frontend/src/app.d.ts

@@ -1,6 +1,6 @@
+import { PUBLIC_API_URL } from '$env/static/public';
 import type { paths } from './v1';
 import createClient from 'openapi-fetch';
-import { PUBLIC_API_URL } from '$env/static/public';
 
 /**
  * A Fetch API wrapper for generating types based on OpenAPI specs

frontend/src/lib/clients/client.ts

@@ -1,12 +1,12 @@
 <script lang="ts">
+  import { page } from '$app/stores';
   import ChartBarsIcon from '$lib/components/icons/chart_bars.svelte';
   import QuibbleLogo from '$lib/components/icons/logos/quibble.svelte';
   import QuibbleTextLogo from '$lib/components/icons/logos/quibble_text.svelte';
   import NotificationIcon from '$lib/components/icons/notification.svelte';
   import Image from '$lib/components/ui/image.svelte';
-  import { createModalsStore } from '$lib/stores/modals.svelte';
   import { createAuthStore } from '$lib/stores/auth.svelte';
-  import { page } from '$app/stores';
+  import { createModalsStore } from '$lib/stores/modals.svelte';
 
   const show_search_in_quiblet = $derived.by(
     () => $page.url.pathname.includes('/q/') && $page.data.quiblet

frontend/src/lib/components/header.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { SVGAttributes } from 'svelte/elements';
+
   let { ...props }: SVGAttributes<SVGElement> = $props();
 </script>
 

frontend/src/lib/components/icons/logos/google.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { SVGAttributes } from 'svelte/elements';
+
   let { ...props }: SVGAttributes<SVGElement> = $props();
 </script>
 

frontend/src/lib/components/icons/logos/quibble.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { SVGAttributes } from 'svelte/elements';
+
   let { ...props }: SVGAttributes<SVGElement> = $props();
 </script>
 

frontend/src/lib/components/icons/logos/quibble_text.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
+  import { enhance } from '$app/forms';
   import GoogleLogo from '$lib/components/icons/logos/google.svelte';
   import QuibbleLogo from '$lib/components/icons/logos/quibble.svelte';
   import QuibbleTextLogo from '$lib/components/icons/logos/quibble_text.svelte';
   import { cn } from '$lib/functions/classnames';
-  import type { SubmitFunction } from '@sveltejs/kit';
   import type { FormProps } from '../types';
-  import { enhance } from '$app/forms';
+  import type { SubmitFunction } from '@sveltejs/kit';
 
   let { update_forms_state, goto_form }: FormProps = $props();
 

frontend/src/lib/components/modals/auth/forms/login.svelte

@@ -3,8 +3,8 @@
   import QuibbleLogo from '$lib/components/icons/logos/quibble.svelte';
   import QuibbleTextLogo from '$lib/components/icons/logos/quibble_text.svelte';
   import { cn } from '$lib/functions/classnames';
-  import type { SubmitFunction } from '@sveltejs/kit';
   import type { FormProps } from '../types';
+  import type { SubmitFunction } from '@sveltejs/kit';
 
   let { forms_state, update_forms_state, goto_form }: FormProps = $props();
 

frontend/src/lib/components/modals/auth/forms/profile_create.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import QuibbleLogo from '$lib/components/icons/logos/quibble.svelte';
-  import QuibbleTextLogo from '$lib/components/icons/logos/quibble_text.svelte';
-  import type { FormProps } from '../types';
-  import Image from '$lib/components/ui/image.svelte';
-  import { onMount } from 'svelte';
   import { enhance } from '$app/forms';
-  import type { SubmitFunction } from '@sveltejs/kit';
-  import { createModalsStore } from '$lib/stores/modals.svelte';
   import { invalidateAll } from '$app/navigation';
   import client from '$lib/clients/client';
   import type { components } from '$lib/clients/v1';
+  import QuibbleLogo from '$lib/components/icons/logos/quibble.svelte';
+  import QuibbleTextLogo from '$lib/components/icons/logos/quibble_text.svelte';
+  import Image from '$lib/components/ui/image.svelte';
+  import { createModalsStore } from '$lib/stores/modals.svelte';
+  import type { FormProps } from '../types';
+  import type { SubmitFunction } from '@sveltejs/kit';
+  import { onMount } from 'svelte';
 
   type Profile = components['schemas']['Profile'];
 

frontend/src/lib/components/modals/auth/forms/profile_select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createModalsStore } from '$lib/stores/modals.svelte';
-  import type { FormsState, FormSubmitData, Forms } from './types';
   import forms from './forms';
+  import type { FormsState, FormSubmitData, Forms } from './types';
 
   let _form = $state<Forms>('login');
 

frontend/src/lib/components/modals/auth/index.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+  import { page } from '$app/stores';
   import type { components } from '$lib/clients/v1';
   import Image from '$lib/components/ui/image.svelte';
-  import readable from 'readable-numbers';
   import { FormatDate } from '$lib/functions/date';
   import { createAuthStore } from '$lib/stores/auth.svelte';
-  import { page } from '$app/stores';
+  import readable from 'readable-numbers';
 
   type QuibProps = components['schemas']['Quib'];
 

frontend/src/lib/components/quib.svelte

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest';
 import { FormatDate } from '$lib/functions/date';
+import { describe, it, expect } from 'vitest';
 
 describe('FormatDate', () => {
   describe('timeAgo', () => {

frontend/src/lib/functions/date.test.ts

@@ -1,7 +1,7 @@
 import { dev } from '$app/environment';
-import { fail } from '@sveltejs/kit';
-import type { Actions } from './$types';
 import client from '$lib/clients/client';
+import type { Actions } from './$types';
+import { fail } from '@sveltejs/kit';
 
 export const actions = {
   login: async ({ request, cookies }) => {

frontend/src/routes/(actions)/auth/+page.server.ts

@@ -1,10 +1,10 @@
 <script lang="ts">
   import Quib from '$lib/components/quib.svelte';
   import QuibsHeader from '$lib/components/quibs_header.svelte';
-  import recent_posts from '$lib/data/mock/recent_posts.json';
-  import readable from 'readable-numbers';
   import Image from '$lib/components/ui/image.svelte';
+  import recent_posts from '$lib/data/mock/recent_posts.json';
   import type { PageData } from './$types';
+  import readable from 'readable-numbers';
 
   const { data }: { data: PageData } = $props();
 </script>

frontend/src/routes/(app)/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Quibble404 from '$lib/assets/vectors/quibble_404.svg';
   import { page } from '$app/stores';
+  import Quibble404 from '$lib/assets/vectors/quibble_404.svg';
 </script>
 
 <svelte:head>