feat: migrate task partial components from FontAwesome to Phosphor Icons

frontend/src/components/tasks/partials/AssigneeList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type {IUser} from '@/modelTypes/IUser'
+import {PhX} from '@phosphor-icons/vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import User from '@/components/misc/User.vue'
 
@@ -44,7 +45,7 @@ defineEmits<{
 				class="remove-assignee"
 				@click="$emit('remove', user)"
 			>
-				<Icon icon="times" />
+				<PhX />
 			</BaseButton>
 		</span>
 	</div>

frontend/src/components/tasks/partials/Attachments.vue

@@ -2,7 +2,7 @@
 	<div class="attachments">
 		<h3>
 			<span class="icon is-grey">
-				<Icon icon="paperclip" />
+				<PhPaperclip />
 			</span>
 			{{ $t('task.attachment.title') }}
 		</h3>
@@ -77,14 +77,14 @@
 								class="attachment-info-meta-button"
 								@click.prevent.stop="downloadAttachment(a)"
 							>
-								<Icon icon="download" />
+								<PhDownload />
 							</BaseButton>
 							<BaseButton
 								v-tooltip="$t('task.attachment.copyUrlTooltip')"
 								class="attachment-info-meta-button"
 								@click.stop="copyUrl(a)"
 							>
-								<Icon icon="copy" />
+								<PhCopy />
 							</BaseButton>
 							<BaseButton
 								v-if="editEnabled"
@@ -92,7 +92,7 @@
 								class="attachment-info-meta-button"
 								@click.prevent.stop="setAttachmentToDelete(a)"
 							>
-								<Icon icon="trash-alt" />
+								<PhTrash />
 							</BaseButton>
 							<BaseButton
 								v-if="editEnabled && canPreview(a)"
@@ -102,7 +102,8 @@
 								class="attachment-info-meta-button"
 								@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
 							>
-								<Icon :icon="task.coverImageAttachmentId === a.id ? 'eye-slash' : 'eye'" />
+								<PhEyeSlash v-if="task.coverImageAttachmentId === a.id" />
+								<PhEye v-else />
 							</BaseButton>
 						</p>
 					</div>
@@ -114,11 +115,13 @@
 			v-if="editEnabled"
 			:disabled="loading"
 			class="mbe-4"
-			icon="cloud-upload-alt"
 			variant="secondary"
 			:shadow="false"
 			@click="filesRef?.click()"
 		>
+			<template #icon>
+				<PhCloudArrowUp />
+			</template>
 			{{ $t('task.attachment.upload') }}
 		</XButton>
 
@@ -131,7 +134,7 @@
 			>
 				<div class="drop-hint">
 					<div class="icon">
-						<Icon icon="cloud-upload-alt" />
+						<PhCloudArrowUp />
 					</div>
 					<div class="hint">
 						{{ $t('task.attachment.drop') }}
@@ -174,6 +177,7 @@
 <script setup lang="ts">
 import {ref, shallowReactive, computed, watch} from 'vue'
 import {useDropZone} from '@vueuse/core'
+import {PhPaperclip, PhDownload, PhCopy, PhTrash, PhEye, PhEyeSlash, PhCloudArrowUp} from '@phosphor-icons/vue'
 
 import User from '@/components/misc/User.vue'
 import ProgressBar from '@/components/misc/ProgressBar.vue'

frontend/src/components/tasks/partials/CommentCount.vue

@@ -5,7 +5,7 @@
 		class="comment-count"
 		:class="{'is-unread': task.isUnread}"
 	>
-		<Icon :icon="['far', 'comments']" />
+		<PhChats />
 		<span class="comment-count-badge">{{ task.commentCount }}</span>
 		<span
 			v-if="task.isUnread"
@@ -17,6 +17,7 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 import {useI18n} from 'vue-i18n'
+import {PhChats} from '@phosphor-icons/vue'
 
 import type {ITask} from '@/modelTypes/ITask'
 

frontend/src/components/tasks/partials/Comments.vue

@@ -11,7 +11,7 @@
 		>
 			<span>
 				<span class="icon is-grey">
-					<Icon :icon="['far', 'comments']" />
+					<PhChats />
 				</span>
 				{{ $t('task.comment.title') }}
 			</span>
@@ -20,7 +20,8 @@
 				class="comment-sort-button"
 				@click="toggleSortOrder"
 			>
-				<Icon :icon="commentSortOrder === 'asc' ? 'arrow-down-short-wide' : 'arrow-up-short-wide'" />
+				<PhSortAscending v-if="commentSortOrder === 'asc'" />
+				<PhSortDescending v-else />
 				{{ commentSortOrder === 'asc' ? $t('task.comment.sortOldestFirst') : $t('task.comment.sortNewestFirst') }}
 			</BaseButton>
 		</h3>
@@ -80,7 +81,7 @@
 							@click.prevent.stop="copy(getCommentUrl(`${c.id}`))"
 						>
 							<span class="is-sr-only">{{ $t('task.comment.permalink') }}</span>
-							<Icon icon="link" />
+							<PhLink />
 						</a>
 						<CustomTransition name="fade">
 							<span
@@ -224,6 +225,7 @@
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, watch} from 'vue'
 import {useI18n} from 'vue-i18n'
+import {PhChats, PhLink, PhSortAscending, PhSortDescending} from '@phosphor-icons/vue'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'

frontend/src/components/tasks/partials/Description.vue

@@ -2,7 +2,7 @@
 	<div>
 		<h3>
 			<span class="icon is-grey">
-				<Icon icon="align-left" />
+				<PhTextAlignLeft />
 			</span>
 			{{ $t('task.attributes.description') }}
 			<CustomTransition name="fade">
@@ -17,7 +17,7 @@
 					v-else-if="!loading && saved"
 					class="is-small has-text-success"
 				>
-					<Icon icon="check" />
+					<PhCheck />
 					{{ $t('misc.saved') }}
 				</span>
 			</CustomTransition>
@@ -43,6 +43,7 @@
 <script setup lang="ts">
 import {ref, computed, watchEffect,  onBeforeUnmount} from 'vue'
 import {onBeforeRouteLeave} from 'vue-router'
+import {PhTextAlignLeft, PhCheck} from '@phosphor-icons/vue'
 
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import Editor from '@/components/input/AsyncEditor'

frontend/src/components/tasks/partials/FilePreview.vue

@@ -11,15 +11,13 @@
 		v-else
 		class="icon-wrapper"
 	>
-		<Icon
-			size="6x"
-			icon="file"
-		/>
+		<PhFile size="6em" />
 	</div>
 </template>
 
 <script setup lang="ts">
 import {ref, shallowReactive, watchEffect} from 'vue'
+import {PhFile} from '@phosphor-icons/vue'
 import AttachmentService, {PREVIEW_SIZE} from '@/services/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 import {canPreview} from '@/models/attachment'

frontend/src/components/tasks/partials/Heading.vue

@@ -20,7 +20,7 @@
 				class="close"
 				@click="$emit('close')"
 			>
-				<Icon icon="times" />
+				<PhX />
 			</BaseButton>
 		</div>
 		<h1
@@ -40,7 +40,7 @@
 			class="close"
 			@click="$emit('close')"
 		>
-			<Icon icon="times" />
+			<PhX />
 		</BaseButton>
 		<CustomTransition name="fade">
 			<span
@@ -54,10 +54,7 @@
 				v-else-if="!loading && showSavedMessage"
 				class="has-text-success is-inline-flex is-align-content-center"
 			>
-				<Icon
-					icon="check"
-					class="mie-2"
-				/>
+				<PhCheck class="mie-2" />
 				{{ $t('misc.saved') }}
 			</span>
 		</CustomTransition>
@@ -67,6 +64,7 @@
 <script setup lang="ts">
 import {ref, computed, onMounted, onBeforeUnmount, watch} from 'vue'
 import {useRouter} from 'vue-router'
+import {PhX, PhCheck} from '@phosphor-icons/vue'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'

frontend/src/components/tasks/partials/KanbanCard.vue

@@ -48,7 +48,7 @@
 					class="due-date"
 				>
 					<span class="icon">
-						<Icon :icon="['far', 'calendar-alt']" />
+						<PhCalendarBlank />
 					</span>
 					<time :datetime="formatISO(task.dueDate)">
 						{{ formatDisplayDate(task.dueDate) }}
@@ -81,19 +81,19 @@
 					v-if="task.attachments.length > 0"
 					class="icon"
 				>
-					<Icon icon="paperclip" />
+					<PhPaperclip />
 				</span>
 				<span
 					v-if="!isEditorContentEmpty(task.description)"
 					class="icon"
 				>
-					<Icon icon="align-left" />
+					<PhTextAlignLeft />
 				</span>
 				<span
 					v-if="task.repeatAfter.amount > 0"
 					class="icon"
 				>
-					<Icon icon="history" />
+					<PhClockCounterClockwise />
 				</span>
 				<CommentCount
 					:task="task"
@@ -116,6 +116,7 @@
 <script lang="ts" setup>
 import {computed, ref, watch} from 'vue'
 import {useRouter} from 'vue-router'
+import {PhCalendarBlank, PhPaperclip, PhTextAlignLeft, PhClockCounterClockwise} from '@phosphor-icons/vue'
 
 import {useGlobalNow} from '@/composables/useGlobalNow'
 

frontend/src/components/tasks/partials/PriorityLabel.vue

@@ -9,13 +9,11 @@
 		class="priority-label"
 	>
 		<span class="icon">
-			<Icon
+			<PhWarningCircle
 				v-if="priority >= priorities.HIGH"
-				icon="exclamation-circle"
 			/>
-			<Icon
+			<PhWarning
 				v-else
-				icon="exclamation"
 			/>
 		</span>
 		<span>
@@ -31,6 +29,7 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
+import {PhWarningCircle, PhWarning} from '@phosphor-icons/vue'
 import {PRIORITIES as priorities} from '@/constants/priorities'
 import {useAuthStore} from '@/stores/auth'
 	

frontend/src/components/tasks/partials/QuickAddMagic.vue

@@ -7,7 +7,7 @@
 			:class="{'is-highlighted': highlightHintIcon}"
 			@click="() => visible = true"
 		>
-			<Icon :icon="['far', 'circle-question']" />
+			<PhQuestion />
 		</BaseButton>
 		<Modal
 			:enabled="visible"
@@ -101,6 +101,7 @@
 
 <script setup lang="ts">
 import {ref, computed} from 'vue'
+import {PhQuestion} from '@phosphor-icons/vue'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 

frontend/src/components/tasks/partials/RelatedTasks.vue

@@ -7,10 +7,13 @@
 			class="is-pulled-right add-task-relation-button d-print-none"
 			:class="{'is-active': showNewRelationForm}"
 			variant="secondary"
-			icon="plus"
 			:shadow="false"
 			@click="showNewRelationForm = !showNewRelationForm"
-		/>
+		>
+			<template #icon>
+				<PhPlus />
+			</template>
+		</XButton>
 		<transition-group name="fade">
 			<template v-if="editEnabled && showCreate">
 				<label
@@ -151,7 +154,7 @@
 							otherTaskId: task.id
 						})"
 					>
-						<Icon icon="trash-alt" />
+						<PhTrash />
 					</BaseButton>
 				</div>
 			</div>
@@ -186,6 +189,7 @@
 import {ref, reactive, shallowReactive, watch, computed} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useRoute} from 'vue-router'
+import {PhPlus, PhTrash} from '@phosphor-icons/vue'
 
 import TaskService from '@/services/task'
 import TaskModel from '@/models/task'

frontend/src/components/tasks/partials/Reminders.vue

@@ -18,7 +18,7 @@
 				class="remove"
 				@click="removeReminderByIndex(index)"
 			>
-				<Icon icon="times" />
+				<PhX />
 			</BaseButton>
 		</div>
 
@@ -33,6 +33,7 @@
 
 <script setup lang="ts">
 import {ref, watch, computed} from 'vue'
+import {PhX} from '@phosphor-icons/vue'
 
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 

frontend/src/components/tasks/partials/SingleTaskInProject.vue

@@ -111,19 +111,19 @@
 						v-if="task.attachments.length > 0"
 						class="project-task-icon"
 					>
-						<Icon icon="paperclip" />
+						<PhPaperclip />
 					</span>
 					<span
 						v-if="!isEditorContentEmpty(task.description)"
 						class="project-task-icon is-mirrored-rtl"
 					>
-						<Icon icon="align-left" />
+						<PhTextAlignLeft />
 					</span>
 					<span
 						v-if="isRepeating"
 						class="project-task-icon"
 					>
-						<Icon icon="history" />
+						<PhClockCounterClockwise />
 					</span>
 					<CommentCount
 						:task="task"
@@ -162,14 +162,7 @@
 				@click.stop="toggleFavorite"
 			>
 				<span class="is-sr-only">{{ task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite') }}</span>
-				<Icon
-					v-if="task.isFavorite"
-					icon="star"
-				/>
-				<Icon
-					v-else
-					:icon="['far', 'star']"
-				/>
+				<PhStar :weight="task.isFavorite ? 'fill' : 'regular'" />
 			</BaseButton>
 			<slot />
 		</div>
@@ -193,6 +186,7 @@
 <script setup lang="ts">
 import {ref, watch, shallowReactive, onMounted, computed} from 'vue'
 import {useI18n} from 'vue-i18n'
+import {PhPaperclip, PhTextAlignLeft, PhClockCounterClockwise, PhStar} from '@phosphor-icons/vue'
 
 import TaskModel, {getHexColor} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'

frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue

@@ -67,19 +67,19 @@
 				v-if="task.attachments.length > 0"
 				class="project-task-icon"
 			>
-				<Icon icon="paperclip" />
+				<PhPaperclip />
 			</span>
 			<span
 				v-if="task.description"
 				class="project-task-icon"
 			>
-				<Icon icon="align-left" />
+				<PhTextAlignLeft />
 			</span>
 			<span
 				v-if="task.repeatAfter.amount > 0"
 				class="project-task-icon"
 			>
-				<Icon icon="history" />
+				<PhClockCounterClockwise />
 			</span>
 		</span>
 
@@ -98,6 +98,7 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
+import {PhPaperclip, PhTextAlignLeft, PhClockCounterClockwise} from '@phosphor-icons/vue'
 
 import {getHexColor} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'

frontend/src/components/tasks/partials/Sort.vue

@@ -1,25 +1,22 @@
 <template>
 	<BaseButton>
-		<Icon
+		<PhSortAscending
 			v-if="order === 'asc'"
-			icon="sort-up"
 			class="sort__icon"
 		/>
-		<Icon
+		<PhSortDescending
 			v-else-if="order === 'desc'"
-			icon="sort-up"
-			rotation="180"
 			class="sort__icon"
 		/>
-		<Icon
+		<PhArrowsDownUp
 			v-else
-			icon="sort"
 			class="sort__icon"
 		/>
 	</BaseButton>
 </template>
 
 <script setup lang="ts">
+import {PhSortAscending, PhSortDescending, PhArrowsDownUp} from '@phosphor-icons/vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 withDefaults(defineProps<{

frontend/src/components/tasks/partials/TaskGlanceTooltip.vue

@@ -27,7 +27,7 @@
 								v-if="task.attachments.length > 0"
 								class="task-glance-icon"
 							>
-								<Icon icon="paperclip" />
+								<PhPaperclip />
 							</span>
 							<CommentCount
 								:task="task"
@@ -58,7 +58,7 @@
 						v-if="task.dueDate"
 						class="task-glance-due"
 					>
-						<Icon icon="calendar" />
+						<PhCalendarBlank />
 						<span>{{ $t('task.detail.due', {at: formatDisplayDate(task.dueDate)}) }}</span>
 					</div>
 
@@ -82,6 +82,7 @@
 <script setup lang="ts">
 import {ref, computed, onUnmounted, nextTick} from 'vue'
 import {computePosition, flip, offset, shift} from '@floating-ui/dom'
+import {PhPaperclip, PhCalendarBlank} from '@phosphor-icons/vue'
 
 import type {ITask} from '@/modelTypes/ITask'
 import {getTaskIdentifier} from '@/models/task'