From b7d8f326590bf9aa0e386f0b9557328cc7951822 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 19 Feb 2026 15:10:28 +0100
Subject: [PATCH] feat: migrate misc, sharing, notification, and date
 components from FontAwesome to Phosphor Icons

---
 .../components/date/DatepickerWithRange.vue    | 11 +++++++----
 .../components/date/DatepickerWithValues.vue   |  6 ++++--
 frontend/src/components/misc/Card.vue          |  3 ++-
 frontend/src/components/misc/Modal.vue         |  3 ++-
 .../src/components/misc/OpenQuickActions.vue   |  3 ++-
 .../components/notifications/Notifications.vue |  3 ++-
 .../components/quick-actions/QuickActions.vue  |  5 +++--
 .../src/components/sharing/LinkSharing.vue     | 18 ++++++++++--------
 frontend/src/components/sharing/UserTeam.vue   | 12 +++++++-----
 9 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/date/DatepickerWithRange.vue b/frontend/src/components/date/DatepickerWithRange.vue
index ab867ecb6..3eeec9152 100644
--- a/frontend/src/components/date/DatepickerWithRange.vue
+++ b/frontend/src/components/date/DatepickerWithRange.vue
@@ -42,10 +42,11 @@
 								</div>
 								<div class="control">
 									<XButton
-										icon="calendar"
 										variant="secondary"
 										data-toggle
-									/>
+									>
+										<template #icon><PhCalendar /></template>
+									</XButton>
 								</div>
 							</div>
 						</label>
@@ -61,10 +62,11 @@
 								</div>
 								<div class="control">
 									<XButton
-										icon="calendar"
 										variant="secondary"
 										data-toggle
-									/>
+									>
+										<template #icon><PhCalendar /></template>
+									</XButton>
 								</div>
 							</div>
 						</label>
@@ -102,6 +104,7 @@
 
 <script lang="ts" setup>
 import {computed, ref, watch} from 'vue'
+import {PhCalendar} from '@phosphor-icons/vue'
 import {useI18n} from 'vue-i18n'
 
 import flatPickr from 'vue-flatpickr-component'
diff --git a/frontend/src/components/date/DatepickerWithValues.vue b/frontend/src/components/date/DatepickerWithValues.vue
index ae1068b78..321fe6937 100644
--- a/frontend/src/components/date/DatepickerWithValues.vue
+++ b/frontend/src/components/date/DatepickerWithValues.vue
@@ -39,10 +39,11 @@
 								</div>
 								<div class="control">
 									<XButton
-										icon="calendar"
 										variant="secondary"
 										data-toggle
-									/>
+									>
+										<template #icon><PhCalendar /></template>
+									</XButton>
 								</div>
 							</div>
 						</label>
@@ -80,6 +81,7 @@
 
 <script lang="ts" setup>
 import {computed, ref, watch} from 'vue'
+import {PhCalendar} from '@phosphor-icons/vue'
 import {useI18n} from 'vue-i18n'
 
 import flatPickr from 'vue-flatpickr-component'
diff --git a/frontend/src/components/misc/Card.vue b/frontend/src/components/misc/Card.vue
index ccd19faa1..e3e9cdf64 100644
--- a/frontend/src/components/misc/Card.vue
+++ b/frontend/src/components/misc/Card.vue
@@ -17,7 +17,7 @@
 				@click="$emit('close')"
 			>	
 				<span class="icon">
-					<Icon icon="times" />
+					<PhX />
 				</span>
 			</BaseButton>
 		</header>
@@ -44,6 +44,7 @@
 
 <script setup lang="ts">
 import BaseButton from '@/components/base/BaseButton.vue'
+import {PhX} from '@phosphor-icons/vue'
 
 withDefaults(defineProps<{
 	title?: string
diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index 5a05e8025..00a98d3d7 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -24,7 +24,7 @@
 						class="close"
 						@click="$emit('close')"
 					>
-						<Icon icon="times" />
+						<PhX />
 					</BaseButton>
 					<div
 						class="modal-content"
@@ -68,6 +68,7 @@
 <script lang="ts" setup>
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
+import {PhX} from '@phosphor-icons/vue'
 import {ref, useAttrs, watchEffect, onBeforeUnmount, watch} from 'vue'
 import {useScrollLock} from '@vueuse/core'
 
diff --git a/frontend/src/components/misc/OpenQuickActions.vue b/frontend/src/components/misc/OpenQuickActions.vue
index a7b8841d1..07ceb3aa1 100644
--- a/frontend/src/components/misc/OpenQuickActions.vue
+++ b/frontend/src/components/misc/OpenQuickActions.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import BaseButton from '@/components/base/BaseButton.vue'
+import {PhMagnifyingGlass} from '@phosphor-icons/vue'
 import {useBaseStore} from '@/stores/base'
 import {onBeforeUnmount, onMounted} from 'vue'
 import {eventToHotkeyString} from '@github/hotkey'
@@ -40,6 +41,6 @@ function openQuickActions() {
 		:title="$t('keyboardShortcuts.quickSearch')"
 		@click="openQuickActions"
 	>
-		<Icon icon="search" />
+		<PhMagnifyingGlass />
 	</BaseButton>
 </template>
diff --git a/frontend/src/components/notifications/Notifications.vue b/frontend/src/components/notifications/Notifications.vue
index 4a38eb0f8..49085b63d 100644
--- a/frontend/src/components/notifications/Notifications.vue
+++ b/frontend/src/components/notifications/Notifications.vue
@@ -14,7 +14,7 @@
 					v-if="unreadNotifications > 0"
 					class="unread-indicator"
 				/>
-				<Icon icon="bell" />
+				<PhBell />
 			</BaseButton>
 		</slot>
 
@@ -87,6 +87,7 @@
 
 <script lang="ts" setup>
 import {computed, onMounted, onUnmounted, ref} from 'vue'
+import {PhBell} from '@phosphor-icons/vue'
 import {useRouter} from 'vue-router'
 
 import NotificationService from '@/services/notification'
diff --git a/frontend/src/components/quick-actions/QuickActions.vue b/frontend/src/components/quick-actions/QuickActions.vue
index 8cec745c2..09e898ed3 100644
--- a/frontend/src/components/quick-actions/QuickActions.vue
+++ b/frontend/src/components/quick-actions/QuickActions.vue
@@ -32,7 +32,7 @@
 					class="close"
 					@click="closeQuickActions"
 				>
-					<Icon icon="times" />
+					<PhX />
 				</BaseButton>
 			</div>
 
@@ -84,7 +84,7 @@
 									v-if="i.id < -1"
 									class="saved-filter-icon icon"
 								>
-									<Icon icon="filter" />
+									<PhFunnel />
 								</span>
 								{{ i.title }}
 							</template>
@@ -98,6 +98,7 @@
 
 <script setup lang="ts">
 import {type ComponentPublicInstance, computed, ref, shallowReactive, watchEffect} from 'vue'
+import {PhX, PhFunnel} from '@phosphor-icons/vue'
 import {useI18n} from 'vue-i18n'
 import {useRouter} from 'vue-router'
 
diff --git a/frontend/src/components/sharing/LinkSharing.vue b/frontend/src/components/sharing/LinkSharing.vue
index 658406ffc..a58fe392e 100644
--- a/frontend/src/components/sharing/LinkSharing.vue
+++ b/frontend/src/components/sharing/LinkSharing.vue
@@ -13,10 +13,10 @@
 		<div class="sharables-project">
 			<XButton
 				v-if="!showNewForm"
-				icon="plus"
 				class="mbe-4"
 				@click="showNewForm = true"
 			>
+				<template #icon><PhPlus /></template>
 				{{ $t('project.share.links.create') }}
 			</XButton>
 
@@ -60,9 +60,9 @@
 					:placeholder="$t('user.auth.passwordPlaceholder')"
 				/>
 				<XButton
-					icon="plus"
 					@click="add(projectId)"
 				>
+					<template #icon><PhPlus /></template>
 					{{ $t('project.share.share') }}
 				</XButton>
 			</div>
@@ -105,19 +105,19 @@
 							<p class="mbe-2">
 								<template v-if="s.permission === PERMISSIONS.ADMIN">
 									<span class="icon is-small">
-										<Icon icon="lock" />
+										<PhLock />
 									</span>&nbsp;
 									{{ $t('project.share.permission.admin') }}
 								</template>
 								<template v-else-if="s.permission === PERMISSIONS.READ_WRITE">
 									<span class="icon is-small">
-										<Icon icon="pen" />
+										<PhPen />
 									</span>&nbsp;
 									{{ $t('project.share.permission.readWrite') }}
 								</template>
 								<template v-else>
 									<span class="icon is-small">
-										<Icon icon="users" />
+										<PhUsers />
 									</span>&nbsp;
 									{{ $t('project.share.permission.read') }}
 								</template>
@@ -135,7 +135,7 @@
 										@click="copy(shareLinks[s.id])"
 									>
 										<span class="icon">
-											<Icon icon="paste" />
+											<PhClipboard />
 										</span>
 									</XButton>
 								</template>
@@ -157,14 +157,15 @@
 						<td class="actions">
 							<XButton
 								danger
-								icon="trash-alt"
 								@click="
 									() => {
 										linkIdToDelete = s.id
 										showDeleteModal = true
 									}
 								"
-							/>
+							>
+								<template #icon><PhTrash /></template>
+							</XButton>
 						</td>
 					</tr>
 				</tbody>
@@ -189,6 +190,7 @@
 
 <script setup lang="ts">
 import {ref, watch, computed, shallowReactive} from 'vue'
+import {PhLock, PhPen, PhUsers, PhClipboard, PhPlus, PhTrash} from '@phosphor-icons/vue'
 import {useI18n} from 'vue-i18n'
 
 import {PERMISSIONS} from '@/constants/permissions'
diff --git a/frontend/src/components/sharing/UserTeam.vue b/frontend/src/components/sharing/UserTeam.vue
index 62725cc95..a89bf9802 100644
--- a/frontend/src/components/sharing/UserTeam.vue
+++ b/frontend/src/components/sharing/UserTeam.vue
@@ -73,19 +73,19 @@
 					<td class="type">
 						<template v-if="s.permission === PERMISSIONS.ADMIN">
 							<span class="icon is-small">
-								<Icon icon="lock" />
+								<PhLock />
 							</span>
 							{{ $t('project.share.permission.admin') }}
 						</template>
 						<template v-else-if="s.permission === PERMISSIONS.READ_WRITE">
 							<span class="icon is-small">
-								<Icon icon="pen" />
+								<PhPen />
 							</span>
 							{{ $t('project.share.permission.readWrite') }}
 						</template>
 						<template v-else>
 							<span class="icon is-small">
-								<Icon icon="users" />
+								<PhUsers />
 							</span>
 							{{ $t('project.share.permission.read') }}
 						</template>
@@ -122,14 +122,15 @@
 						</div>
 						<XButton
 							danger
-							icon="trash-alt"
 							@click="
 								() => {
 									sharable = s
 									showDeleteModal = true
 								}
 							"
-						/>
+						>
+							<template #icon><PhTrash /></template>
+						</XButton>
 					</td>
 				</tr>
 			</tbody>
@@ -159,6 +160,7 @@
 
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, type Ref} from 'vue'
+import {PhLock, PhPen, PhUsers, PhTrash} from '@phosphor-icons/vue'
 import {useI18n} from 'vue-i18n'
 
 import UserProjectService from '@/services/userProject'