feat: extract reusable components and refactor forms/modals

- Added `BaseModal` for consistent modal handling.
- Introduced form components to streamline form structure.
- Created `InfoCard` and `UserDisplay` for reusable UI elements.
- Implemented `QueryStateHandler` to simplify async state handling.

Author: Vilsol

COMPONENT_EXTRACTION_OPPORTUNITIES.md

@@ -0,0 +1,207 @@
+# Component Extraction Opportunities
+
+Analysis conducted: 2025-10-26
+
+## High Priority Extractions
+
+### 1. BaseModal.svelte
+
+**Impact:** HIGH | **Files:** 4 | **Lines Saved:** ~60/modal
+
+**Current State:** All modals duplicate dialog structure, positioning classes, and lifecycle logic.
+
+**Affected Files:**
+
+- `src/lib/modals/LoginModal.svelte:49-92`
+- `src/lib/modals/CompatibilityModal.svelte:33-47`
+- `src/lib/modals/EditCompatibilityModal.svelte:33-53`
+- `src/lib/modals/BasicModal.svelte:37-53`
+
+**Proposal:** Extract base modal wrapper handling dialog lifecycle, click-outside, and positioning. Expose content slot.
+
+---
+
+### 2. Form Field Components
+
+**Impact:** VERY HIGH | **Files:** 10+ | **Reduction:** ~60% form boilerplate
+
+**Current State:** Every form repeats label + input + ValidationMessage pattern 5+ times.
+
+**Affected Files:**
+
+- `src/lib/components/mods/ModForm.svelte:95-259`
+- `src/lib/components/guides/GuideForm.svelte:40-104`
+- `src/lib/components/mods/VersionForm.svelte:55-166`
+- `src/routes/settings/+page.svelte:76-108`
+
+**Proposal:** Create:
+
+- `FormField.svelte` - Label + input + validation wrapper
+- `FormTextarea.svelte` - Textarea with optional character count
+- `FormSplitPreview.svelte` - Split layout with markdown preview
+
+---
+
+### 3. InfoCard.svelte
+
+**Impact:** MEDIUM-HIGH | **Files:** 4 | **Consolidation:** 4→1 component
+
+**Current State:** Mod/Guide/Version/User info cards share identical structure, differ only in content.
+
+**Affected Files:**
+
+- `src/lib/components/mods/ModInfo.svelte:17-36`
+- `src/lib/components/guides/GuideInfo.svelte:15-22`
+- `src/lib/components/mods/VersionInfo.svelte:15-26`
+- `src/lib/components/users/UserInfo.svelte:15-22`
+
+**Proposal:** Generic info card with title prop and content slot. Standard card/section styling.
+
+---
+
+### 4. UserDisplayCard.svelte
+
+**Impact:** MEDIUM | **Files:** 3 | **Consolidation:** 3→1 component
+
+**Current State:** Author/user displays duplicate avatar + username grid layout.
+
+**Affected Files:**
+
+- `src/lib/components/mods/ModAuthors.svelte:19-40`
+- `src/lib/components/guides/GuideAuthor.svelte:15-31`
+- `src/lib/components/mods/ModAuthor.svelte:31-43`
+
+**Proposal:** Reusable user card accepting user object, optional role, configurable avatar size.
+
+---
+
+### 5. QueryStateHandler.svelte
+
+**Impact:** MEDIUM | **Files:** 19 | **Pattern:** Universal
+
+**Current State:** Every data-fetching component repeats `{#if fetching}/{:else if error}` pattern.
+
+**Pattern:**
+
+```svelte
+{#if $data.fetching}
+  <p>Loading...</p>
+{:else if $data.error}
+  <p>Oh no... {$data.error.message}</p>
+{:else}
+  <!-- Content -->
+{/if}
+```
+
+**Proposal:** Wrapper component accepting query store, rendering loading/error/content states via slots.
+
+---
+
+## Medium Priority Extractions
+
+### 6. DataTable.svelte
+
+**Impact:** MEDIUM-HIGH | **Files:** 5+
+
+**Affected Files:**
+
+- `src/lib/components/mods/VersionDependenciesGrid.svelte:17-59` (contains 2 identical tables)
+- `src/lib/components/mods/VersionTargetSupportGrid.svelte:53-99`
+- `src/lib/components/mods/CompatibilityGrid.svelte:28-95`
+- Admin approval pages
+
+**Proposal:** Generic table wrapper with slot-based column definitions. Standard styling/overflow handling.
+
+---
+
+### 7. DescriptionCard.svelte
+
+**Impact:** MEDIUM | **Files:** 2
+
+**Affected Files:**
+
+- `src/lib/components/mods/ModDescription.svelte:15-33`
+- `src/lib/components/mods/VersionDescription.svelte:14-32`
+
+**Proposal:** Card component handling markdown rendering + optional announcement display.
+
+---
+
+### 8. AdminApprovalPage.svelte
+
+**Impact:** LOW-MEDIUM | **Files:** 2
+
+**Affected Files:**
+
+- `src/routes/admin/unapproved-mods/+page.svelte:1-110`
+- `src/routes/admin/unapproved-versions/+page.svelte:1-80`
+
+**Proposal:** Reusable approval page template with approve/deny mutations, pagination, and table rendering.
+
+---
+
+### 9. PaginatedListContainer.svelte
+
+**Impact:** MEDIUM | **Files:** 5+
+
+**Affected Files:**
+
+- `src/lib/components/mods/ModGrid.svelte:131-198`
+- `src/lib/components/guides/GuideGrid.svelte:42-75`
+- Multiple admin list pages
+
+**Proposal:** Container managing top/bottom pagination controls, grid/list content slot, consistent spacing.
+
+---
+
+### 10. TabSwitcher.svelte
+
+**Impact:** LOW-MEDIUM | **Files:** 2-3
+
+**Affected Files:**
+
+- `src/routes/guide/[guideId]/+page.svelte`
+- `src/routes/user/[userId]/+page.svelte`
+
+**Proposal:** Tab management component handling active state, tab buttons, and content switching.
+
+---
+
+## Implementation Phases
+
+### Phase 1: High ROI (Recommended Start)
+
+1. BaseModal.svelte
+2. FormField.svelte + FormSplitPreview.svelte
+3. QueryStateHandler.svelte
+
+### Phase 2: Consolidation
+
+4. InfoCard.svelte
+5. UserDisplayCard.svelte
+6. DescriptionCard.svelte
+
+### Phase 3: Polish
+
+7. DataTable.svelte
+8. AdminApprovalPage.svelte
+9. PaginatedListContainer.svelte
+10. TabSwitcher.svelte
+
+---
+
+## Impact Summary
+
+| Priority  | Components | Files Affected | Est. Lines Saved |
+| --------- | ---------- | -------------- | ---------------- |
+| High      | 5          | 40+            | 1000+            |
+| Medium    | 5          | 15+            | 300+             |
+| **Total** | **10**     | **55+**        | **1300+**        |
+
+**Benefits:**
+
+- Reduced code duplication
+- Improved consistency across UI
+- Easier maintenance and updates
+- Better accessibility standardization
+- Simplified testing surface

bun.lockb

@@ -1,5 +1,5 @@
 [tools]
-bun = "1.3.1"
+bun = "1.3.2"
 
 [env]
 PUBLIC_TOLGEE_API_URL = 'https://translate.ficsit.app'

mise.toml

@@ -36,14 +36,14 @@
     "custom-protocol-check": "^1.4.0",
     "dompurify": "^3.3.0",
     "felte": "^1.3.0",
-    "globals": "^16.4.0",
-    "graphql": "^16.11.0",
+    "globals": "^16.5.0",
+    "graphql": "^16.12.0",
     "js-cookie": "^3.0.5",
-    "jsdom": "^27.0.1",
+    "jsdom": "^27.2.0",
     "jszip": "^3.10.1",
-    "marked": "^16.4.1",
-    "marked-gfm-heading-id": "^4.1.2",
-    "marked-mangle": "^1.1.11",
+    "marked": "^17.0.0",
+    "marked-gfm-heading-id": "^4.1.3",
+    "marked-mangle": "^1.1.12",
     "prismjs": "^1.30.0",
     "semver": "^7.7.3",
     "socket.io-client": "^4.8.1",
@@ -56,63 +56,63 @@
     "@cfworker/json-schema": "^4.1.1",
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@eslint/compat": "^1.4.0",
+    "@eslint/compat": "^2.0.0",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.38.0",
+    "@eslint/js": "^9.39.1",
     "@graphql-codegen/add": "^6.0.0",
-    "@graphql-codegen/cli": "^6.0.1",
+    "@graphql-codegen/cli": "^6.0.2",
     "@graphql-codegen/introspection": "^5.0.0",
-    "@graphql-codegen/typed-document-node": "^6.0.2",
-    "@graphql-codegen/typescript": "^5.0.2",
-    "@graphql-codegen/typescript-document-nodes": "^5.0.2",
+    "@graphql-codegen/typed-document-node": "^6.1.2",
+    "@graphql-codegen/typescript": "^5.0.4",
+    "@graphql-codegen/typescript-document-nodes": "^5.0.4",
     "@graphql-codegen/typescript-graphql-files-modules": "^3.0.1",
-    "@graphql-codegen/typescript-operations": "^5.0.2",
+    "@graphql-codegen/typescript-operations": "^5.0.4",
     "@graphql-codegen/typescript-urql": "^4.0.1",
     "@graphql-codegen/urql-introspection": "^3.0.1",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@parcel/watcher": "^2.5.1",
-    "@skeletonlabs/skeleton": "^4.1.4",
-    "@skeletonlabs/skeleton-svelte": "^4.1.4",
+    "@skeletonlabs/skeleton": "^4.3.4",
+    "@skeletonlabs/skeleton-svelte": "^4.3.4",
     "@sveltejs/adapter-node": "^5.4.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.47.3",
+    "@sveltejs/kit": "^2.48.5",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@tailwindcss/vite": "^4.1.16",
+    "@tailwindcss/vite": "^4.1.17",
     "@types/js-cookie": "^3.0.6",
     "@types/marked": "^6.0.0",
-    "@types/node": "^24.9.1",
+    "@types/node": "^24.10.1",
     "@types/prismjs": "^1.26.5",
     "@types/semver": "^7.7.1",
-    "@typescript-eslint/eslint-plugin": "^8.46.2",
-    "@typescript-eslint/parser": "^8.46.2",
-    "autoprefixer": "^10.4.21",
-    "caniuse-lite": "^1.0.30001751",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@typescript-eslint/parser": "^8.46.4",
+    "autoprefixer": "^10.4.22",
+    "caniuse-lite": "^1.0.30001754",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^9.2.1",
     "cookieconsent": "^3.1.1",
     "cross-env": "^10.1.0",
-    "cssnano": "^7.1.1",
+    "cssnano": "^7.1.2",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
-    "eslint": "^9.38.0",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.12.5",
+    "eslint-plugin-svelte": "^3.13.0",
     "graphql-tag": "^2.12.6",
     "husky": "^9.1.7",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.7.1",
-    "rimraf": "^6.0.1",
+    "rimraf": "^6.1.0",
     "schema-dts": "^1.1.5",
-    "svelte": "^5.42.2",
+    "svelte": "^5.43.6",
     "svelte-adapter-bun": "^1.0.1",
-    "svelte-check": "^4.3.3",
+    "svelte-check": "^4.3.4",
     "svelte-preprocess": "^6.0.3",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.2",
+    "typescript-eslint": "^8.46.4",
     "urql": "^5.0.1",
-    "vite": "^7.1.12"
+    "vite": "^7.2.2"
   },
   "type": "module",
   "packageManager": "bun@1.3.1",

package.json

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { ValidationMessage } from '@felte/reporter-svelte';
+
+  interface Props {
+    label: string;
+    name: string;
+    value: string;
+    type?: string;
+    required?: boolean;
+    disabled?: boolean;
+    helperText?: string;
+  }
+
+  let {
+    label,
+    name,
+    value = $bindable(''),
+    type = 'text',
+    required = false,
+    disabled = false,
+    helperText
+  }: Props = $props();
+</script>
+
+<div class="grid grid-flow-row gap-2">
+  <label class="label">
+    <span
+      >{label}{#if required}
+        *{/if}</span>
+    <input {type} bind:value {required} {disabled} class="input p-2" />
+    {#if helperText}
+      <span>{helperText}</span>
+    {/if}
+  </label>
+  <ValidationMessage for={name}>
+    {#snippet children({ messages: message })}
+      <span class="validation-message">{message || ''}</span>
+    {/snippet}
+  </ValidationMessage>
+</div>

src/lib/components/forms/FormField.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { ValidationMessage } from '@felte/reporter-svelte';
+
+  interface Props {
+    label: string;
+    name: string;
+    id: string;
+    accept?: string;
+    placeholder?: string;
+  }
+
+  let { label, name, id, accept, placeholder }: Props = $props();
+</script>
+
+<div class="grid grid-flow-row gap-2">
+  <label for={id}>{label}</label>
+  <input {id} class="base-input" {name} type="file" {accept} {placeholder} />
+  <ValidationMessage for={name}>
+    {#snippet children({ messages: message })}
+      <span class="validation-message">{message || ''}</span>
+    {/snippet}
+  </ValidationMessage>
+</div>