From 288631f08c5dd1978405de00e4589084b1c115a2 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 19 Feb 2026 15:10:15 +0100
Subject: [PATCH] feat: migrate home/navigation components from FontAwesome to
 Phosphor Icons

---
 .../src/components/home/AddToHomeScreen.vue     |  8 +++-----
 frontend/src/components/home/AppHeader.vue      | 10 ++++------
 frontend/src/components/home/ContentAuth.vue    |  5 +++--
 frontend/src/components/home/DemoMode.vue       |  3 ++-
 frontend/src/components/home/Navigation.vue     | 12 +++++++-----
 .../components/home/ProjectsNavigationItem.vue  | 17 ++++++-----------
 6 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/home/AddToHomeScreen.vue b/frontend/src/components/home/AddToHomeScreen.vue
index 337bd8276..978334c46 100644
--- a/frontend/src/components/home/AddToHomeScreen.vue
+++ b/frontend/src/components/home/AddToHomeScreen.vue
@@ -4,10 +4,7 @@
 		class="add-to-home-screen"
 		:class="{'has-update-available': hasUpdateAvailable}"
 	>
-		<Icon
-			icon="arrow-up-from-bracket"
-			class="add-icon"
-		/>
+		<PhUploadSimple class="add-icon" />
 		<p>
 			{{ $t('home.addToHomeScreen') }}
 		</p>
@@ -15,12 +12,13 @@
 			class="hide-button"
 			@click="() => hideMessage = true"
 		>
-			<Icon icon="x" />
+			<PhX />
 		</BaseButton>
 	</div>
 </template>
 
 <script lang="ts" setup>
+import {PhUploadSimple, PhX} from '@phosphor-icons/vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import {useLocalStorage} from '@vueuse/core'
 import {computed} from 'vue'
diff --git a/frontend/src/components/home/AppHeader.vue b/frontend/src/components/home/AppHeader.vue
index 9bcc2fc98..d66a27d39 100644
--- a/frontend/src/components/home/AppHeader.vue
+++ b/frontend/src/components/home/AppHeader.vue
@@ -31,7 +31,7 @@
 				class="project-title-button"
 			>
 				<span class="is-sr-only">{{ $t('project.description') }}</span>
-				<Icon icon="circle-info" />
+				<PhInfo />
 			</BaseButton>
 
 			<ProjectSettingsDropdown
@@ -45,10 +45,7 @@
 						@click="toggleOpen"
 					>
 						<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
-						<Icon
-							icon="ellipsis-h"
-							class="icon"
-						/>
+						<PhDotsThree class="icon" />
 					</BaseButton>
 				</template>
 			</ProjectSettingsDropdown>
@@ -79,7 +76,7 @@
 								transform: open ? 'rotate(180deg)' : 'rotate(0)',
 							}"
 						>
-							<Icon icon="chevron-down" />
+							<PhCaretDown />
 						</span>
 					</BaseButton>
 				</template>
@@ -118,6 +115,7 @@ import { computed } from 'vue'
 
 import { PERMISSIONS as Permissions } from '@/constants/permissions'
 
+import {PhCaretDown, PhDotsThree, PhInfo} from '@phosphor-icons/vue'
 import ProjectSettingsDropdown from '@/components/project/ProjectSettingsDropdown.vue'
 import Dropdown from '@/components/misc/Dropdown.vue'
 import DropdownItem from '@/components/misc/DropdownItem.vue'
diff --git a/frontend/src/components/home/ContentAuth.vue b/frontend/src/components/home/ContentAuth.vue
index b713337bf..3d664d583 100644
--- a/frontend/src/components/home/ContentAuth.vue
+++ b/frontend/src/components/home/ContentAuth.vue
@@ -5,7 +5,7 @@
 			class="menu-hide-button d-print-none"
 			@click="baseStore.setMenuActive(false)"
 		>
-			<Icon icon="times" />
+			<PhX />
 		</BaseButton>
 		<div
 			class="app-container"
@@ -64,7 +64,7 @@
 					@click="showKeyboardShortcuts()"
 				>
 					<span class="is-sr-only">{{ $t('keyboardShortcuts.title') }}</span>
-					<Icon icon="keyboard" />
+					<PhKeyboard />
 				</BaseButton>
 			</main>
 		</div>
@@ -79,6 +79,7 @@ import Navigation from '@/components/home/Navigation.vue'
 import QuickActions from '@/components/quick-actions/QuickActions.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
+import {PhKeyboard, PhX} from '@phosphor-icons/vue'
 import {useBaseStore} from '@/stores/base'
 import {useLabelStore} from '@/stores/labels'
 import {useProjectStore} from '@/stores/projects'
diff --git a/frontend/src/components/home/DemoMode.vue b/frontend/src/components/home/DemoMode.vue
index b8ab9139e..91c2b1def 100644
--- a/frontend/src/components/home/DemoMode.vue
+++ b/frontend/src/components/home/DemoMode.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import {useConfigStore} from '@/stores/config'
+import {PhX} from '@phosphor-icons/vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 const configStore = useConfigStore()
@@ -21,7 +22,7 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
 			class="hide-button"
 			@click="() => hide = true"
 		>
-			<Icon icon="times" />
+			<PhX />
 		</BaseButton>
 	</div>
 </template>
diff --git a/frontend/src/components/home/Navigation.vue b/frontend/src/components/home/Navigation.vue
index aedbaae33..0a4bcb09c 100644
--- a/frontend/src/components/home/Navigation.vue
+++ b/frontend/src/components/home/Navigation.vue
@@ -22,7 +22,7 @@
 						:to="{ name: 'home'}"
 					>
 						<span class="menu-item-icon icon">
-							<Icon icon="calendar" />
+							<PhCalendar />
 						</span>
 						{{ $t('navigation.overview') }}
 					</RouterLink>
@@ -33,7 +33,7 @@
 						:to="{ name: 'tasks.range'}"
 					>
 						<span class="menu-item-icon icon">
-							<Icon :icon="['far', 'calendar-alt']" />
+							<PhCalendarBlank />
 						</span>
 						{{ $t('navigation.upcoming') }}
 					</RouterLink>
@@ -44,7 +44,7 @@
 						:to="{ name: 'projects.index'}"
 					>
 						<span class="menu-item-icon icon">
-							<Icon icon="layer-group" />
+							<PhStack />
 						</span>
 						{{ $t('project.projects') }}
 					</RouterLink>
@@ -55,7 +55,7 @@
 						:to="{ name: 'labels.index'}"
 					>
 						<span class="menu-item-icon icon">
-							<Icon icon="tags" />
+							<PhTag />
 						</span>
 						{{ $t('label.title') }}
 					</RouterLink>
@@ -66,7 +66,7 @@
 						:to="{ name: 'teams.index'}"
 					>
 						<span class="menu-item-icon icon">
-							<Icon icon="users" />
+							<PhUsers />
 						</span>
 						{{ $t('team.title') }}
 					</RouterLink>
@@ -131,6 +131,8 @@ import PoweredByLink from '@/components/home/PoweredByLink.vue'
 import Logo from '@/components/home/Logo.vue'
 import Loading from '@/components/misc/Loading.vue'
 
+import {PhCalendar, PhCalendarBlank, PhStack, PhTag, PhUsers} from '@phosphor-icons/vue'
+
 import {useBaseStore} from '@/stores/base'
 import {useProjectStore} from '@/stores/projects'
 import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
diff --git a/frontend/src/components/home/ProjectsNavigationItem.vue b/frontend/src/components/home/ProjectsNavigationItem.vue
index 3e9b9688f..9562a7527 100644
--- a/frontend/src/components/home/ProjectsNavigationItem.vue
+++ b/frontend/src/components/home/ProjectsNavigationItem.vue
@@ -13,10 +13,7 @@
 				class="collapse-project-button"
 				@click="childProjectsOpen = !childProjectsOpen"
 			>
-				<Icon
-					icon="chevron-down"
-					:class="{ 'project-is-collapsed': !childProjectsOpen }"
-				/>
+				<PhCaretDown :class="{ 'project-is-collapsed': !childProjectsOpen }" />
 			</BaseButton>
 			<span
 				v-if="canEditOrder && project.id > 0 && project.maxPermission !== null && project.maxPermission > PERMISSIONS.READ"
@@ -25,7 +22,7 @@
 				@click.stop.prevent
 				@touchstart.stop
 			>
-				<Icon icon="grip-lines" />
+				<PhDotsSix />
 			</span>
 			<BaseButton
 				:to="{ name: 'project.index', params: { projectId: project.id} }"
@@ -46,7 +43,7 @@
 						v-else-if="project.id < -1"
 						class="saved-filter-icon icon menu-item-icon"
 					>
-						<Icon icon="filter" />
+						<PhFunnel />
 					</span>
 				</div>
 				<span class="project-menu-title">{{ getProjectTitle(project) }}</span>
@@ -58,7 +55,7 @@
 				@click="projectStore.toggleProjectFavorite(project)"
 			>
 				<span class="is-sr-only">{{ project.isFavorite ? $t('project.unfavorite') : $t('project.favorite') }}</span>
-				<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
+				<PhStar :weight="project.isFavorite ? 'fill' : 'regular'" />
 			</BaseButton>
 			<ProjectSettingsDropdown
 				v-if="project.maxPermission !== null && project.maxPermission > PERMISSIONS.READ"
@@ -72,10 +69,7 @@
 						@click="toggleOpen"
 					>
 						<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
-						<Icon
-							icon="ellipsis-h"
-							class="icon"
-						/>
+						<PhDotsThree class="icon" />
 					</BaseButton>
 				</template>
 			</ProjectSettingsDropdown>
@@ -98,6 +92,7 @@ import {useStorage} from '@vueuse/core'
 
 import type {IProject} from '@/modelTypes/IProject'
 
+import {PhCaretDown, PhDotsThree, PhDotsSix, PhFunnel, PhStar} from '@phosphor-icons/vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import ProjectSettingsDropdown from '@/components/project/ProjectSettingsDropdown.vue'
 import {getProjectTitle} from '@/helpers/getProjectTitle'