Add some more linting rules

frontend/.eslintrc.cjs

@@ -76,9 +76,11 @@ module.exports = {
     '@stylistic/quote-props': ['error', 'as-needed', { keywords: false, unnecessary: true, numbers: false }],
     '@stylistic/semi': ['error', 'always'],
     '@stylistic/comma-dangle': ['error', 'always-multiline'],
+    '@stylistic/comma-spacing': 'error',
     '@stylistic/object-curly-spacing': ['error', 'always'],
     // imports
-    'import/order': ['error', { 'newlines-between': 'always' }],
+    'sort-imports': ['error', { ignoreDeclarationSort: true }],
+    'import/order': ['error', { 'newlines-between': 'always', alphabetize: { order: 'asc' } }],
     'import/newline-after-import': ['error'],
     'import/no-duplicates': ['error'],
   },

frontend/postcss.config.cjs

@@ -1,7 +1,7 @@
+const importUrl = require('postcss-import-url');
 const postcssPresetEnv = require('postcss-preset-env');
 const tailwindCSS = require('tailwindcss');
 const tailwindCSSNesting = require('tailwindcss/nesting');
-const importUrl = require('postcss-import-url');
 
 module.exports = {
   plugins: [

frontend/src/App.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
   import './_global.postcss';
+  import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
+  import { Modal, initializeStores, storePopup } from '@skeletonlabs/skeleton';
   import { setContextClient } from '@urql/svelte';
-  import { storePopup , initializeStores, Modal } from '@skeletonlabs/skeleton';
-  import { computePosition, autoUpdate, offset, shift, flip, arrow, size } from '@floating-ui/dom';
 
   import TitleBar from '$lib/components/TitleBar.svelte';
-  import ModsList from '$lib/components/mods-list/ModsList.svelte';
-  import { initializeGraphQLClient } from '$lib/core/graphql';
-  import { Environment, EventsOn } from '$wailsjs/runtime';
-  import ModDetails from '$lib/components/mod-details/ModDetails.svelte';
-  import { ExpandMod, UnexpandMod , GenerateDebugInfo } from '$wailsjs/go/app/app';
   import LeftBar from '$lib/components/left-bar/LeftBar.svelte';
-  import { installs, invalidInstalls, progress } from '$lib/store/ficsitCLIStore';
-  import { konami } from '$lib/store/settingsStore';
-  import { expandedMod, error, siteURL } from '$lib/store/generalStore';
-  import { initializeModalStore, getModalStore } from '$lib/store/skeletonExtensions';
+  import ModDetails from '$lib/components/mod-details/ModDetails.svelte';
+  import ErrorModal from '$lib/components/modals/ErrorModal.svelte';
   import ExternalInstallMod from '$lib/components/modals/ExternalInstallMod.svelte';
+  import { supportedProgressTypes } from '$lib/components/modals/ProgressModal.svelte';
   import { modalRegistry } from '$lib/components/modals/modalsRegistry';
-  import ErrorModal from '$lib/components/modals/ErrorModal.svelte';
   import ImportProfile from '$lib/components/modals/profiles/ImportProfile.svelte';
-  import { supportedProgressTypes } from '$lib/components/modals/ProgressModal.svelte';
+  import ModsList from '$lib/components/mods-list/ModsList.svelte';
+  import { initializeGraphQLClient } from '$lib/core/graphql';
+  import { installs, invalidInstalls, progress } from '$lib/store/ficsitCLIStore';
+  import { error, expandedMod, siteURL } from '$lib/store/generalStore';
+  import { konami } from '$lib/store/settingsStore';
+  import { getModalStore, initializeModalStore } from '$lib/store/skeletonExtensions';
+  import { ExpandMod, GenerateDebugInfo, UnexpandMod } from '$wailsjs/go/app/app';
+  import { Environment, EventsOn } from '$wailsjs/runtime';
 
   initializeStores();
   initializeModalStore();

frontend/src/lib/components/Markdown.svelte

@@ -4,10 +4,10 @@
   import ModImage from './modals/ModImage.svelte';
 
   import { GetModReferenceDocument } from '$lib/generated';
-  import { markdown as renderMarkdown } from '$lib/utils/markdown';
-  import { expandedMod } from '$lib/store/generalStore';
   import { BrowserOpenURL } from '$lib/generated/wailsjs/runtime/runtime';
+  import { expandedMod } from '$lib/store/generalStore';
   import { getModalStore } from '$lib/store/skeletonExtensions';
+  import { markdown as renderMarkdown } from '$lib/utils/markdown';
 
   export let markdown: string;
 

frontend/src/lib/components/ResponsiveButton.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
+  import { type PopupSettings, popup } from '@skeletonlabs/skeleton';
 
-  import Tooltip from '$lib/components/Tooltip.svelte';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
   import type { ButtonDisplay } from '$lib/utils/responsiveButton';
 
   export let id: string;

frontend/src/lib/components/Select.svelte

@@ -1,7 +1,7 @@
 <script generics="T" lang="ts">
-  import { mdiMenuDown } from '@mdi/js';
-  import { popup, type PopupSettings, ListBox, ListBoxItem, focusTrap } from '@skeletonlabs/skeleton';
   import type { SizeOptions } from '@floating-ui/dom';
+  import { mdiMenuDown } from '@mdi/js';
+  import { ListBox, ListBoxItem, type PopupSettings, focusTrap, popup } from '@skeletonlabs/skeleton';
   import { createEventDispatcher, tick } from 'svelte';
 
   import SvgIcon from '$lib/components/SVGIcon.svelte';

frontend/src/lib/components/TitleBar.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { mdiWindowMinimize, mdiWindowRestore, mdiWindowMaximize, mdiWindowClose } from '@mdi/js';
+  import { mdiWindowClose, mdiWindowMaximize, mdiWindowMinimize, mdiWindowRestore } from '@mdi/js';
 
   import SvgIcon from './SVGIcon.svelte';
 
-  import { Quit, WindowMinimise, WindowToggleMaximise } from '$wailsjs/runtime';
   import { version } from '$lib/store/settingsStore';
+  import { Quit, WindowMinimise, WindowToggleMaximise } from '$wailsjs/runtime';
 
   function minimize() {
     WindowMinimise();

frontend/src/lib/components/announcements/Announcement.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { mdiAlertOutline, mdiInformationOutline } from '@mdi/js';
 
-  import { AnnouncementImportance, type Announcement } from '$lib/generated';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
+  import { type Announcement, AnnouncementImportance } from '$lib/generated';
   import { viewedAnnouncements } from '$lib/store/settingsStore';
 
   export let announcement: Pick<Announcement, 'id' | 'importance' | 'message'>;

frontend/src/lib/components/announcements/AnnouncementsBar.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
+  import { type PopupSettings, popup } from '@skeletonlabs/skeleton';
   import { getContextClient, queryStore } from '@urql/svelte';
   import Carousel from 'svelte-carousel';
-  import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
 
   import Tooltip from '$lib/components/Tooltip.svelte';
   import Announcement from '$lib/components/announcements/Announcement.svelte';
-  import { viewedAnnouncements , offline } from '$lib/store/settingsStore';
-  import { AnnouncementImportance, GetAnnouncementsDocument, SmrHealthcheckDocument, type Announcement as AnnouncementType } from '$lib/generated';
+  import { AnnouncementImportance, type Announcement as AnnouncementType, GetAnnouncementsDocument, SmrHealthcheckDocument } from '$lib/generated';
+  import { offline, viewedAnnouncements } from '$lib/store/settingsStore';
   import { SetAnnouncementViewed } from '$wailsjs/go/settings/settings';
   
   const client = getContextClient();

frontend/src/lib/components/left-bar/LaunchButton.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-  import { getContextClient } from '@urql/svelte';
   import { mdiOpenInNew, mdiTrayFull } from '@mdi/js';
-  import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
+  import { type PopupSettings, popup } from '@skeletonlabs/skeleton';
+  import { getContextClient } from '@urql/svelte';
 
   import Tooltip from '../Tooltip.svelte';
 
-  import { selectedInstallMetadata, isGameRunning, lockfileMods, progress } from '$lib/store/ficsitCLIStore';
+  import SvgIcon from '$lib/components/SVGIcon.svelte';
+  import { type Compatibility, CompatibilityState } from '$lib/generated';
   import { queuedMods, startQueue } from '$lib/store/actionQueue';
-  import { launchButton, queueAutoStart } from '$lib/store/settingsStore';
+  import { isGameRunning, lockfileMods, progress, selectedInstallMetadata } from '$lib/store/ficsitCLIStore';
   import { error, isLaunchingGame } from '$lib/store/generalStore';
-  import { LaunchGame } from '$wailsjs/go/ficsitcli/ficsitCLI';
-  import { CompatibilityState, type Compatibility } from '$lib/generated';
-  import { getCompatibility, type CompatibilityWithSource } from '$lib/utils/modCompatibility';
-  import SvgIcon from '$lib/components/SVGIcon.svelte';
+  import { launchButton, queueAutoStart } from '$lib/store/settingsStore';
+  import { type CompatibilityWithSource, getCompatibility } from '$lib/utils/modCompatibility';
   import { installTypeToTargetName } from '$lib/wailsTypesExtensions';
+  import { LaunchGame } from '$wailsjs/go/ficsitcli/ficsitCLI';
 
   $: isInstallLaunchable = !!$selectedInstallMetadata?.launchPath;
 

frontend/src/lib/components/left-bar/LeftBar.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
   import { mdiAlert, mdiCheckCircle, mdiCloseCircle, mdiDownload, mdiFolderOpen, mdiHelpCircle, mdiPencil, mdiPlusCircle, mdiServerNetwork, mdiTrashCan, mdiUpload, mdiWeb } from '@mdi/js';
-  import { siDiscord, siGithub } from 'simple-icons/icons';
-  import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
+  import { type PopupSettings, popup } from '@skeletonlabs/skeleton';
   import _ from 'lodash';
+  import { siDiscord, siGithub } from 'simple-icons/icons';
 
   import Tooltip from '../Tooltip.svelte';
-  import RenameProfile from '../modals/profiles/RenameProfile.svelte';
   import DeleteProfile from '../modals/profiles/DeleteProfile.svelte';
+  import RenameProfile from '../modals/profiles/RenameProfile.svelte';
 
+  import LaunchButton from './LaunchButton.svelte';
   import Settings from './Settings.svelte';
   import Updates from './Updates.svelte';
-  import LaunchButton from './LaunchButton.svelte';
 
-  import Select from '$lib/components/Select.svelte';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
-  import { installs, profiles, canModify, selectedInstallMetadata, selectedInstall, selectedProfile, modsEnabled, installsMetadata } from '$lib/store/ficsitCLIStore';
+  import Select from '$lib/components/Select.svelte';
+  import { canModify, installs, installsMetadata, modsEnabled, profiles, selectedInstall, selectedInstallMetadata, selectedProfile } from '$lib/store/ficsitCLIStore';
   import { error, siteURL } from '$lib/store/generalStore';
-  import { BrowserOpenURL } from '$wailsjs/runtime/runtime';
+  import { getModalStore } from '$lib/store/skeletonExtensions';
   import { OpenExternal } from '$wailsjs/go/app/app';
-  import { common } from '$wailsjs/go/models';
   import { ExportCurrentProfile } from '$wailsjs/go/ficsitcli/ficsitCLI';
-  import { getModalStore } from '$lib/store/skeletonExtensions';
+  import { common } from '$wailsjs/go/models';
+  import { BrowserOpenURL } from '$wailsjs/runtime/runtime';
   
   const modalStore = getModalStore();
 

frontend/src/lib/components/left-bar/Settings.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import { mdiBug, mdiCheck, mdiCheckboxBlankOutline, mdiCheckboxMarkedOutline, mdiChevronRight, mdiClipboard, mdiCog, mdiDownload, mdiFolderEdit, mdiTune } from '@mdi/js';
+  import { ListBox, ListBoxItem, type PopupSettings, popup } from '@skeletonlabs/skeleton';
   import { getContextClient } from '@urql/svelte';
-  import { popup, type PopupSettings , ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
 
   import SvgIcon from '$lib/components/SVGIcon.svelte';
-  import { GenerateDebugInfo } from '$wailsjs/go/app/app';
-  import { debug, startView, konami, launchButton, queueAutoStart, offline, updateCheckMode, version } from '$lib/store/settingsStore';
-  import { manifestMods, lockfileMods } from '$lib/store/ficsitCLIStore';
   import { GetModNameDocument } from '$lib/generated';
+  import { lockfileMods, manifestMods } from '$lib/store/ficsitCLIStore';
+  import { debug, konami, launchButton, offline, queueAutoStart, startView, updateCheckMode, version } from '$lib/store/settingsStore';
+  import { getModalStore } from '$lib/store/skeletonExtensions';
   import type { LaunchButtonType, ViewType } from '$lib/wailsTypesExtensions';
+  import { GenerateDebugInfo } from '$wailsjs/go/app/app';
   import { OfflineGetMod } from '$wailsjs/go/ficsitcli/ficsitCLI';
-  import { getModalStore } from '$lib/store/skeletonExtensions';
 
   const modalStore = getModalStore();
 

frontend/src/lib/components/left-bar/Updates.svelte

@@ -2,10 +2,10 @@
   import { mdiCheckCircle, mdiSync } from '@mdi/js';
 
   import SvgIcon from '$lib/components/SVGIcon.svelte';
-  import { checkForUpdates, progress, updates, updateCheckInProgress, unignoredUpdates } from '$lib/store/ficsitCLIStore';
-  import { CheckForUpdates as CheckForSMMUpdates } from '$wailsjs/go/autoupdate/autoUpdate';
-  import { smmUpdate, smmUpdateReady } from '$lib/store/smmUpdateStore';
+  import { checkForUpdates, progress, unignoredUpdates, updateCheckInProgress, updates } from '$lib/store/ficsitCLIStore';
   import { getModalStore } from '$lib/store/skeletonExtensions';
+  import { smmUpdate, smmUpdateReady } from '$lib/store/smmUpdateStore';
+  import { CheckForUpdates as CheckForSMMUpdates } from '$wailsjs/go/autoupdate/autoUpdate';
 
   const modalStore = getModalStore();
 

frontend/src/lib/components/mod-details/ModDetails.svelte

@@ -1,28 +1,28 @@
 <script lang="ts">
-  import { getContextClient, queryStore } from '@urql/svelte';
-  import { mdiCheck, mdiChevronDown, mdiImport, mdiRocketLaunch, mdiTestTube, mdiWeb } from '@mdi/js';
-  import { minVersion, validRange, sort, coerce, SemVer, parse } from 'semver';
-  import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
   import type { SizeOptions } from '@floating-ui/dom';
+  import { mdiCheck, mdiChevronDown, mdiImport, mdiRocketLaunch, mdiTestTube, mdiWeb } from '@mdi/js';
+  import { type PopupSettings, popup } from '@skeletonlabs/skeleton';
+  import { getContextClient, queryStore } from '@urql/svelte';
+  import { SemVer, coerce, minVersion, parse, sort, validRange } from 'semver';
 
   import ModChangelog from '../modals/ModChangelog.svelte';
 
-  import Tooltip from '$lib/components/Tooltip.svelte';
-  import { CompatibilityState, GetModDetailsDocument } from '$lib/generated';
   import Markdown from '$lib/components/Markdown.svelte';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
-  import { bytesToAppropriate } from '$lib/utils/dataFormats';
-  import { canModify, lockfileMods, manifestMods, progress , selectedInstallMetadata } from '$lib/store/ficsitCLIStore';
-  import { error , expandedMod, siteURL } from '$lib/store/generalStore';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+  import { CompatibilityState, GetModDetailsDocument } from '$lib/generated';
+  import { canModify, lockfileMods, manifestMods, progress, selectedInstallMetadata } from '$lib/store/ficsitCLIStore';
+  import { error, expandedMod, siteURL } from '$lib/store/generalStore';
   import { search } from '$lib/store/modFiltersStore';
-  import { InstallModVersion, OfflineGetMod } from '$wailsjs/go/ficsitcli/ficsitCLI';
-  import { BrowserOpenURL } from '$wailsjs/runtime/runtime';
-  import { getAuthor } from '$lib/utils/getModAuthor';
-  import { getCompatibility, getVersionCompatibility, type CompatibilityWithSource } from '$lib/utils/modCompatibility';
   import { offline } from '$lib/store/settingsStore';
-  import type { ficsitcli } from '$wailsjs/go/models';
   import { getModalStore } from '$lib/store/skeletonExtensions';
+  import { bytesToAppropriate } from '$lib/utils/dataFormats';
+  import { getAuthor } from '$lib/utils/getModAuthor';
+  import { type CompatibilityWithSource, getCompatibility, getVersionCompatibility } from '$lib/utils/modCompatibility';
   import { installTypeToTargetName } from '$lib/wailsTypesExtensions';
+  import { InstallModVersion, OfflineGetMod } from '$wailsjs/go/ficsitcli/ficsitCLI';
+  import type { ficsitcli } from '$wailsjs/go/models';
+  import { BrowserOpenURL } from '$wailsjs/runtime/runtime';
 
   export let focusOnEntry: HTMLElement | undefined = undefined;
 

frontend/src/lib/components/modals/ExternalInstallMod.svelte

@@ -2,10 +2,10 @@
   import { getContextClient, queryStore } from '@urql/svelte';
 
   import { GetModSummaryDocument } from '$lib/generated';
-  import { manifestMods } from '$lib/store/ficsitCLIStore';
   import { addQueuedModAction, queuedMods } from '$lib/store/actionQueue';
-  import { offline } from '$lib/store/settingsStore';
+  import { manifestMods } from '$lib/store/ficsitCLIStore';
   import { error } from '$lib/store/generalStore';
+  import { offline } from '$lib/store/settingsStore';
   import { InstallMod, InstallModVersion } from '$wailsjs/go/ficsitcli/ficsitCLI';
 
   export let parent: { onClose: () => void };

frontend/src/lib/components/modals/ServerManager.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { mdiAlert, mdiServerNetwork, mdiTrashCan } from '@mdi/js';
-  import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
+  import { type PopupSettings, popup } from '@skeletonlabs/skeleton';
 
-  import Tooltip from '$lib/components/Tooltip.svelte';
-  import Select from '$lib/components/Select.svelte';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
-  import { installsMetadata, remoteServers } from '$lib/store/ficsitCLIStore';
+  import Select from '$lib/components/Select.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
   import { AddRemoteServer, RemoveRemoteServer } from '$lib/generated/wailsjs/go/ficsitcli/ficsitCLI';
+  import { installsMetadata, remoteServers } from '$lib/store/ficsitCLIStore';
 
   export let parent: { onClose: () => void };
   

frontend/src/lib/components/modals/modalsRegistry.ts

@@ -2,12 +2,12 @@ import type { ModalComponent } from '@skeletonlabs/skeleton';
 
 import ProgressModal from './ProgressModal.svelte';
 import ServerManager from './ServerManager.svelte';
-import CacheLocationPicker from './settings/CacheLocationPicker.svelte';
 import AddProfile from './profiles/AddProfile.svelte';
 import ImportProfile from './profiles/ImportProfile.svelte';
-import UpdatesModal from './updates/UpdatesModal.svelte';
-import SMMUpdateReady from './smmUpdate/SMMUpdateReady.svelte';
+import CacheLocationPicker from './settings/CacheLocationPicker.svelte';
 import SMMUpdateDownload from './smmUpdate/SMMUpdateDownload.svelte';
+import SMMUpdateReady from './smmUpdate/SMMUpdateReady.svelte';
+import UpdatesModal from './updates/UpdatesModal.svelte';
 
 // We can only store here modals (or modal instances) that do not require additional props
 export const modalRegistry = {

frontend/src/lib/components/modals/profiles/ImportProfile.svelte

@@ -4,8 +4,8 @@
   import { OpenFileDialog } from '$lib/generated/wailsjs/go/app/app';
   import { ImportProfile, ReadExportedProfileMetadata } from '$lib/generated/wailsjs/go/ficsitcli/ficsitCLI';
   import type { ficsitcli } from '$lib/generated/wailsjs/go/models';
-  import { error } from '$lib/store/generalStore';
   import { profiles } from '$lib/store/ficsitCLIStore';
+  import { error } from '$lib/store/generalStore';
 
   export let parent: { onClose: () => void };
 

frontend/src/lib/components/modals/profiles/RenameProfile.svelte

@@ -2,8 +2,8 @@
   import { newProfileName } from './renameProfile';
 
   import { RenameProfile } from '$lib/generated/wailsjs/go/ficsitcli/ficsitCLI';
-  import { error } from '$lib/store/generalStore';
   import { profiles } from '$lib/store/ficsitCLIStore';
+  import { error } from '$lib/store/generalStore';
 
   export let parent: { onClose: () => void };
 

frontend/src/lib/components/modals/smmUpdate/SMMUpdateDownload.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { ProgressBar } from '@skeletonlabs/skeleton';
 
-  import { smmUpdate , smmUpdateProgress, smmUpdateReady } from '$lib/store/smmUpdateStore';
   import Markdown from '$lib/components/Markdown.svelte';
-  import { bytesToAppropriate, secondsToAppropriate } from '$lib/utils/dataFormats';
   import { getModalStore } from '$lib/store/skeletonExtensions';
+  import { smmUpdate, smmUpdateProgress, smmUpdateReady } from '$lib/store/smmUpdateStore';
+  import { bytesToAppropriate, secondsToAppropriate } from '$lib/utils/dataFormats';
 
   export let parent: { onClose: () => void };