style(launcher): Phase 3 — FA→Lucide icon migration across all launcher files

Replaces all FontAwesome <span class="fas/fab fa-*"> with Lucide Svelte
components across 20 launcher files. launcher_cfg_section.svelte icon prop
changed from FA string to AnyComponent (svelte:component for dynamic render).
Dynamic file-extension icon now uses ae_util.file_extension_icon_lucide().
Fixes class: directives on components (invalid in Svelte 5) → ternary class.
Removes title prop from Lucide components → wrapping <span title="...">.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-16 12:33:37 -04:00
parent 99df204763
commit efc0f46079
20 changed files with 184 additions and 169 deletions

View File

@@ -20,11 +20,25 @@
import { listen, idle, onIdle, restartCountdown } from 'svelte-idle';
import {
// Brain,
// House, Library,
LoaderCircle,
// RefreshCw,
Satellite
Satellite,
MapPin,
Laptop,
BedDouble,
MousePointer,
Wifi,
Network,
X,
CalendarDays,
Clock,
Biohazard,
Search,
GraduationCap,
Info,
ZoomIn,
Minimize2,
Monitor,
List
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
@@ -640,14 +654,14 @@
}}
title="Toggle Edit Mode to show location options and more"
>
<span class="fas fa-map-marker-alt"></span>
<MapPin size="1em" />
<span class="sr-only">Location:</span>
</button>
{$lq__event_location_obj?.name}
</h3>
{:else}
<div class="flex flex-row gap-1 items-center justify-center">
<span class="fas fa-spinner fa-spin mx-1"></span>
<LoaderCircle size="1em" class="animate-spin mx-1" />
<span>Loading event...</span>
</div>
{/if}
@@ -725,7 +739,7 @@
<div
class="flex flex-row items-center justify-center p-8 opacity-50"
>
<span class="fas fa-map-marker-alt mx-2 text-2xl"></span>
<MapPin size="1.5em" class="mx-2" />
<span>Please select a location from the menu</span>
</div>
{/if}
@@ -783,11 +797,11 @@
title="Toggle Edit Mode to show location options and more"
>
<span class="sr-only">Location:</span>
<span class="fas fa-map-marker-alt"></span>
<MapPin size="1em" />
</button>
{$lq__event_location_obj?.name}
{#if $lq__event_device_obj?.name}
<span class="fas fa-laptop mx-1"></span>
<Laptop size="1em" class="mx-1" />
{$lq__event_device_obj?.name}
{/if}
</div>
@@ -799,10 +813,10 @@
title="The user is currently {$idle ? 'idle' : 'active'}"
>
{#if $idle}
<span class="fas fa-bed mx-1"></span>
<BedDouble size="1em" class="mx-1" />
<span class="hidden group-hover:inline"> Idle </span>
{:else}
<span class="fas fa-mouse-pointer mx-1"></span>
<MousePointer size="1em" class="mx-1" />
<span class="hidden group-hover:inline"> Active </span>
{/if}
</span>
@@ -811,7 +825,7 @@
class="group px-2 py-0.5 rounded-md transition-colors duration-300"
title="Online status = {online?.current}"
>
<span class="fas fa-wifi mx-1"></span>
<Wifi size="1em" class="mx-1" />
{online?.current ? '' : 'Offline!'}
</span>
@@ -828,10 +842,10 @@
: 'disconnected'} API: {$ae_api?.base_url}"
>
{#if $events_sess.launcher.ws_connect_status == 'connected'}
<span class="fas fa-sitemap mx-1 text-green-700"></span>
<Network size="1em" class="mx-1 text-green-700" />
<span class="hidden group-hover:inline"> WS Connected </span>
{:else}
<span class="fas fa-times mx-1"></span>
<X size="1em" class="mx-1" />
<span class="hidden group-hover:inline"> WS Disconnected </span>
{/if}
</span>
@@ -862,11 +876,11 @@
class="current_datetime font-mono px-2 hover:font-bold hover:bg-white dark:hover:bg-slate-700 transition-colors"
>
<span class="hidden md:inline">
<span class="fas fa-calendar-alt"></span>
<CalendarDays size="1em" />
{ae_util.iso_datetime_formatter($time, 'date_full_no_year')}
</span>
<span class="hidden sm:inline">
<span class="fas fa-clock"></span>
<Clock size="1em" />
</span>
{#if $events_loc.launcher?.time_hours == 12}
{ae_util.iso_datetime_formatter($time, 'time_12_long')}
@@ -884,7 +898,7 @@
class:opacity-25={!$ae_loc.trusted_access}
class:hover:opacity-75={!$ae_loc.trusted_access}
>
<span class="fas fa-biohazard"></span>
<Biohazard size="1em" />
<span class="hidden">Launcher Config</span>
</button>
</div>
@@ -923,7 +937,7 @@
href="/events/{$events_slct.event_id}"
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
>
<span class="fas fa-search m-1"></span>
<Search size="1em" class="m-1" />
Session Search
</a>
{#if $events_slct?.event_location_id}
@@ -931,7 +945,7 @@
href="/events/{$events_slct.event_id}/location/{$events_slct.event_location_id}"
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
>
<span class="fas fa-map-marker m-1"></span>
<MapPin size="1em" class="m-1" />
View Selected Location
</a>
{/if}
@@ -940,7 +954,7 @@
href="/events/{$events_slct.event_id}/session/{$events_slct.event_session_id}"
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
>
<span class="fas fa-chalkboard-teacher m-1"></span>
<GraduationCap size="1em" class="m-1" />
View Selected Session
</a>
{/if}
@@ -974,7 +988,7 @@
onclick={() => ($events_loc.launcher.hide_drawer__debug = true)}
class="mb-4 dark:text-white"
>
<span class="fas fa-times"></span>
<X size="1em" />
<span class="hidden">Close Debug Drawer</span>
</button>
</div>
@@ -1022,7 +1036,7 @@
}}
title="Close Modal"
>
<span class="fas fa-times my-1.5"></span>
<X size="1em" class="my-1.5" />
<span class="hidden group-hover:inline"> Close</span>
</button>
{/snippet}
@@ -1068,7 +1082,7 @@
/>
{:else}
<div class="flex flex-row items-center justify-center p-4">
<span class="fas fa-info-circle mx-1"></span>
<Info size="1em" class="mx-1" />
<span>No image selected</span>
</div>
{/if}
@@ -1103,10 +1117,10 @@
: 'Fit image to screen'}
>
{#if modal_zoom_fit}
<span class="fas fa-search-plus mr-1"></span>
<ZoomIn size="1em" class="mr-1" />
<span class="hidden sm:inline">Zoom</span>
{:else}
<span class="fas fa-compress mr-1"></span>
<Minimize2 size="1em" class="mr-1" />
<span class="hidden sm:inline">Fit</span>
{/if}
</button>
@@ -1127,8 +1141,8 @@
$events_sess.launcher.ws_connect_status != 'connected'}
title="Close poster on this device and on the remote display (screensaver resumes)"
>
<span class="fas fa-tv mr-1"></span>
<span class="fas fa-times"></span>
<Monitor size="1em" class="mr-1" />
<X size="1em" />
<span class="hidden sm:inline ml-1">Close Both</span>
</button>
@@ -1147,7 +1161,7 @@
$events_sess.launcher.ws_connect_status != 'connected')}
title="Close poster on this device only — remote display keeps showing"
>
<span class="fas fa-list mr-1"></span>
<List size="1em" class="mr-1" />
<span class="hidden sm:inline">Back to List</span>
</button>
</div>