feat: migrate task, project, and input components from FontAwesome to Phosphor Icons

frontend/src/components/input/DatepickerInline.vue

@@ -4,7 +4,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('today')"
 	>
-		<span class="icon"><Icon :icon="['far', 'calendar-alt']" /></span>
+		<span class="icon"><PhCalendarBlank /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.today') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
@@ -14,7 +14,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('tomorrow')"
 	>
-		<span class="icon"><Icon :icon="['far', 'sun']" /></span>
+		<span class="icon"><PhSun /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.tomorrow') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
@@ -24,7 +24,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('nextMonday')"
 	>
-		<span class="icon"><Icon icon="coffee" /></span>
+		<span class="icon"><PhCoffee /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.nextMonday') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
@@ -35,7 +35,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('thisWeekend')"
 	>
-		<span class="icon"><Icon icon="cocktail" /></span>
+		<span class="icon"><PhMartini /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.thisWeekend') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
@@ -45,7 +45,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('laterThisWeek')"
 	>
-		<span class="icon"><Icon icon="chess-knight" /></span>
+		<span class="icon"><PhHorse /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
@@ -55,7 +55,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('nextWeek')"
 	>
-		<span class="icon"><Icon icon="forward" /></span>
+		<span class="icon"><PhFastForward /></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.nextWeek') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
@@ -77,6 +77,7 @@ import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 
 import BaseButton from '@/components/base/BaseButton.vue'
+import {PhCalendarBlank, PhSun, PhCoffee, PhMartini, PhHorse, PhFastForward} from '@phosphor-icons/vue'
 
 import {formatDate} from '@/helpers/time/formatDate'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'

frontend/src/components/input/Multiselect.vue

@@ -62,7 +62,7 @@
 					class="removal-button"
 					@click="resetSelectedValue"
 				>
-					<Icon icon="times" />
+					<PhX />
 				</BaseButton>
 			</div>
 		</div>
@@ -134,6 +134,7 @@ import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
+import {PhX} from '@phosphor-icons/vue'
 
 const props = withDefaults(defineProps<{
 	/** The object with the value, updated every time an entry is selected */

frontend/src/components/input/Password.vue

@@ -20,7 +20,7 @@
 			:aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
 			@click="togglePasswordFieldType"
 		>
-			<Icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'" />
+			<PhEye v-if="passwordFieldType === 'password'" /><PhEyeSlash v-else />
 		</BaseButton>
 	</div>
 	<p
@@ -37,6 +37,7 @@ import {useDebounceFn} from '@vueuse/core'
 import {useI18n} from 'vue-i18n'
 import BaseButton from '@/components/base/BaseButton.vue'
 import {validatePassword} from '@/helpers/validatePasswort'
+import {PhEye, PhEyeSlash} from '@phosphor-icons/vue'
 
 const props = withDefaults(defineProps<{
 	modelValue: string,

frontend/src/components/input/Reactions.vue

@@ -12,6 +12,7 @@ import CustomTransition from '@/components/misc/CustomTransition.vue'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {useAuthStore} from '@/stores/auth'
 import {useColorScheme} from '@/composables/useColorScheme'
+import {PhSmiley} from '@phosphor-icons/vue'
 
 const props = withDefaults(defineProps<{
 	entityKind: ReactionKind,
@@ -167,7 +168,7 @@ async function toggleReaction(value: string | number) {
 			@click.stop="toggleEmojiPicker"
 		>
 			<span class="is-sr-only">{{ $t('reaction.add') }}</span>
-			<Icon :icon="['far', 'face-laugh']" />
+			<PhSmiley />
 		</BaseButton>
 		<CustomTransition name="fade">
 			<VuemojiPicker

frontend/src/components/project/ProjectSettingsDropdown.vue

@@ -10,10 +10,7 @@
 					@click="triggerProps.toggleOpen"
 				>
 					<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
-					<Icon
-						icon="ellipsis-h"
-						class="icon"
-					/>
+					<PhDotsThree class="icon" />
 				</BaseButton>
 			</slot>
 		</template>
@@ -21,21 +18,27 @@
 		<template v-if="isSavedFilter(project)">
 			<DropdownItem
 				:to="{ name: 'filter.settings.edit', params: { projectId: project.id } }"
-				icon="pen"
 			>
+				<template #icon>
+					<PhPen />
+				</template>
 				{{ $t('menu.edit') }}
 			</DropdownItem>
 			<DropdownItem
 				:to="{ name: 'project.settings.views', params: { projectId: project.id } }"
-				icon="eye"
 			>
+				<template #icon>
+					<PhEye />
+				</template>
 				{{ $t('menu.views') }}
 			</DropdownItem>
 			<DropdownItem
 				:to="{ name: 'filter.settings.delete', params: { projectId: project.id } }"
-				icon="trash-alt"
 				class="has-text-danger"
 			>
+				<template #icon>
+					<PhTrash />
+				</template>
 				{{ $t('misc.delete') }}
 			</DropdownItem>
 		</template>
@@ -43,51 +46,65 @@
 		<template v-else-if="project.isArchived">
 			<DropdownItem
 				:to="{ name: 'project.settings.archive', params: { projectId: project.id } }"
-				icon="archive"
 			>
+				<template #icon>
+					<PhArchive />
+				</template>
 				{{ $t('menu.unarchive') }}
 			</DropdownItem>
 		</template>
 		<template v-else>
 			<DropdownItem
 				:to="{ name: 'project.settings.edit', params: { projectId: project.id } }"
-				icon="pen"
 			>
+				<template #icon>
+					<PhPen />
+				</template>
 				{{ $t('menu.edit') }}
 			</DropdownItem>
 			<DropdownItem
 				v-if="!simple"
 				:to="{ name: 'project.settings.views', params: { projectId: project.id } }"
-				icon="eye"
 			>
+				<template #icon>
+					<PhEye />
+				</template>
 				{{ $t('menu.views') }}
 			</DropdownItem>
 			<DropdownItem
 				v-if="backgroundsEnabled && !simple"
 				:to="{ name: 'project.settings.background', params: { projectId: project.id } }"
-				icon="image"
 			>
+				<template #icon>
+					<PhImage />
+				</template>
 				{{ $t('menu.setBackground') }}
 			</DropdownItem>
 			<DropdownItem
 				:to="{ name: 'project.settings.share', params: { projectId: project.id } }"
-				icon="share-alt"
 			>
+				<template #icon>
+					<PhShareNetwork />
+				</template>
 				{{ $t('menu.share') }}
 			</DropdownItem>
 			<DropdownItem
 				:to="{ name: 'project.settings.duplicate', params: { projectId: project.id } }"
-				icon="paste"
 			>
+				<template #icon>
+					<PhClipboard />
+				</template>
 				{{ $t('menu.duplicate') }}
 			</DropdownItem>
 			<DropdownItem
 				v-if="!simple"
 				v-tooltip="isDefaultProject ? $t('menu.cantArchiveIsDefault') : ''"
 				:to="{ name: 'project.settings.archive', params: { projectId: project.id } }"
-				icon="archive"
 				:disabled="isDefaultProject"
 			>
+				<template #icon>
+					<PhArchive />
+				</template>
 				{{ $t('menu.archive') }}
 			</DropdownItem>
 			<Subscription
@@ -101,24 +118,30 @@
 			/>
 			<DropdownItem
 				:to="{ name: 'project.settings.webhooks', params: { projectId: project.id } }"
-				icon="bolt"
 			>
+				<template #icon>
+					<PhLightning />
+				</template>
 				{{ $t('project.webhooks.title') }}
 			</DropdownItem>
 			<DropdownItem
 				:to="{ name: 'project.createFromParent', params: { parentProjectId: project.id } }"
-				icon="layer-group"
 			>
+				<template #icon>
+					<PhStack />
+				</template>
 				{{ $t('menu.createProject') }}
 			</DropdownItem>
 			<DropdownItem
 				v-if="project.maxPermission === PERMISSIONS.ADMIN"
 				v-tooltip="isDefaultProject ? $t('menu.cantDeleteIsDefault') : ''"
 				:to="{ name: 'project.settings.delete', params: { projectId: project.id } }"
-				icon="trash-alt"
 				class="has-text-danger"
 				:disabled="isDefaultProject"
 			>
+				<template #icon>
+					<PhTrash />
+				</template>
 				{{ $t('menu.delete') }}
 			</DropdownItem>
 		</template>
@@ -140,6 +163,7 @@ import {useConfigStore} from '@/stores/config'
 import {useProjectStore} from '@/stores/projects'
 import {useAuthStore} from '@/stores/auth'
 import {PERMISSIONS} from '@/constants/permissions'
+import {PhDotsThree, PhPen, PhEye, PhTrash, PhArchive, PhImage, PhShareNetwork, PhClipboard, PhLightning, PhStack} from '@phosphor-icons/vue'
 
 const props = withDefaults(defineProps<{
 	project: IProject

frontend/src/components/project/partials/FilterPopup.vue

@@ -1,10 +1,12 @@
 <template>
 	<XButton
 		variant="secondary"
-		icon="filter"
 		:class="{'has-filters': hasFilters}"
 		@click="() => modalOpen = true"
 	>
+		<template #icon>
+			<PhFunnel />
+		</template>
 		{{ $t('filters.title') }}
 	</XButton>
 	<Modal
@@ -32,6 +34,7 @@
 import {computed, ref, watch, nextTick} from 'vue'
 
 import Filters from '@/components/project/partials/Filters.vue'
+import {PhFunnel} from '@phosphor-icons/vue'
 
 import {type TaskFilterParams} from '@/services/taskCollection'
 import {type IProjectView} from '@/modelTypes/IProjectView'

frontend/src/components/project/partials/ProjectCard.vue

@@ -28,7 +28,7 @@
 				v-if="project.id < -1"
 				class="saved-filter-icon icon"
 			>
-				<Icon icon="filter" />
+				<PhFunnel />
 			</span>
 			{{ getProjectTitle(project) }}
 		</div>
@@ -47,7 +47,7 @@
 			:class="{'is-favorite': project.isFavorite}"
 			@click.prevent.stop="projectStore.toggleProjectFavorite(project)"
 		>
-			<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
+			<PhStar :weight="project.isFavorite ? 'fill' : 'regular'" />
 		</BaseButton>
 	</div>
 </template>
@@ -57,6 +57,7 @@ import {computed} from 'vue'
 import type {IProject} from '@/modelTypes/IProject'
 
 import BaseButton from '@/components/base/BaseButton.vue'
+import {PhFunnel, PhStar} from '@phosphor-icons/vue'
 
 import {useProjectBackground} from '@/composables/useProjectBackground'
 import {useProjectStore} from '@/stores/projects'

frontend/src/components/project/views/ProjectKanban.vue

@@ -50,7 +50,7 @@
 										class="icon is-small has-text-success mie-2"
 										@click.stop="() => collapseBucket(bucket)"
 									>
-										<Icon icon="check-double" />
+										<PhChecks />
 									</span>
 									<h2
 										class="title input"
@@ -73,9 +73,13 @@
 									<Dropdown
 										v-if="canWrite && !collapsedBuckets[bucket.id]"
 										class="is-right options"
-										trigger-icon="ellipsis-v"
 										@close="() => showSetLimitInput = false"
 									>
+										<template #trigger="tp">
+											<BaseButton @click="tp.toggleOpen">
+												<PhDotsThreeVertical class="icon" />
+											</BaseButton>
+										</template>
 										<div
 											v-if="showSetLimitInput"
 											class="field has-addons"
@@ -97,10 +101,13 @@
 												<XButton
 													v-cy="'setBucketLimit'"
 													:disabled="bucket.limit < 0"
-													:icon="['far', 'save']"
 													:shadow="false"
 													@click="() => {setBucketLimit(bucket.id, true); showSetLimitInput = false}"
-												/>
+												>
+													<template #icon>
+														<PhFloppyDisk />
+													</template>
+												</XButton>
 											</div>
 										</div>
 										<DropdownItem
@@ -114,23 +121,29 @@
 										<DropdownItem
 											v-tooltip="$t('project.kanban.doneBucketHintExtended')"
 											:icon-class="{'has-text-success': bucket.id === view?.doneBucketId}"
-											icon="check-double"
 											@click.stop="toggleDoneBucket(bucket)"
 										>
+											<template #icon>
+												<PhChecks />
+											</template>
 											{{ $t('project.kanban.doneBucket') }}
 										</DropdownItem>
 										<DropdownItem
 											v-tooltip="$t('project.kanban.defaultBucketHint')"
 											:icon-class="{'has-text-primary': bucket.id === view?.defaultBucketId}"
-											icon="th"
 											@click.stop="toggleDefaultBucket(bucket)"
 										>
+											<template #icon>
+												<PhSquaresFour />
+											</template>
 											{{ $t('project.kanban.defaultBucket') }}
 										</DropdownItem>
 										<DropdownItem
-											icon="angles-up"
 											@click.stop="() => collapseBucket(bucket)"
 										>
+											<template #icon>
+												<PhCaretDoubleUp />
+											</template>
 											{{ $t('project.kanban.collapse') }}
 										</DropdownItem>
 										<DropdownItem
@@ -138,9 +151,11 @@
 											class="has-text-danger"
 											:class="{'is-disabled': buckets.length <= 1}"
 											icon-class="has-text-danger"
-											icon="trash-alt"
 											@click.stop="() => deleteBucketModal(bucket.id)"
 										>
+											<template #icon>
+												<PhTrash />
+											</template>
 											{{ $t('misc.delete') }}
 										</DropdownItem>
 									</Dropdown>
@@ -197,11 +212,13 @@
 												v-tooltip="bucket.limit > 0 && bucket.count >= bucket.limit ? $t('project.kanban.bucketLimitReached') : ''"
 												class="is-fullwidth has-text-centered"
 												:shadow="false"
-												icon="plus"
 												variant="secondary"
 												:disabled="bucket.limit > 0 && bucket.count >= bucket.limit"
 												@click="toggleShowNewTaskInput(bucket.id)"
 											>
+												<template #icon>
+													<PhPlus />
+												</template>
 												{{
 													bucket.tasks.length === 0 ? $t('project.kanban.addTask') : $t('project.kanban.addAnotherTask')
 												}}
@@ -250,9 +267,11 @@
 							:shadow="false"
 							class="is-transparent is-fullwidth has-text-centered"
 							variant="secondary"
-							icon="plus"
 							@click="() => showNewBucketInput = true"
 						>
+							<template #icon>
+								<PhPlus />
+							</template>
 							{{ $t('project.kanban.addBucket') }}
 						</XButton>
 					</div>
@@ -300,8 +319,10 @@ import {useAuthStore} from '@/stores/auth'
 import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
 import FilterPopup from '@/components/project/partials/FilterPopup.vue'
 import KanbanCard from '@/components/tasks/partials/KanbanCard.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 import Dropdown from '@/components/misc/Dropdown.vue'
 import DropdownItem from '@/components/misc/DropdownItem.vue'
+import {PhChecks, PhDotsThreeVertical, PhFloppyDisk, PhSquaresFour, PhCaretDoubleUp, PhTrash, PhPlus} from '@phosphor-icons/vue'
 
 import {
 	type CollapsedBuckets,

frontend/src/components/project/views/ProjectTable.vue

@@ -10,11 +10,13 @@
 				<Popup>
 					<template #trigger="{toggle}">
 						<XButton
-							icon="th"
 							variant="secondary"
 							class="mie-2"
 							@click.prevent.stop="toggle()"
 						>
+							<template #icon>
+								<PhSquaresFour />
+							</template>
 							{{ $t('project.table.columns') }}
 						</XButton>
 					</template>
@@ -316,6 +318,7 @@ import Sort from '@/components/tasks/partials/Sort.vue'
 import FilterPopup from '@/components/project/partials/FilterPopup.vue'
 import Pagination from '@/components/misc/Pagination.vue'
 import Popup from '@/components/misc/Popup.vue'
+import {PhSquaresFour} from '@phosphor-icons/vue'
 
 import type {SortBy} from '@/composables/useTaskList'
 import {useTaskList} from '@/composables/useTaskList'

frontend/src/components/project/views/ViewEditForm.vue

@@ -12,6 +12,7 @@ import XButton from '@/components/input/Button.vue'
 import FilterInputDocs from '@/components/input/filter/FilterInputDocs.vue'
 import FilterInput from '@/components/input/filter/FilterInput.vue'
 import FormField from '@/components/input/FormField.vue'
+import {PhTrash, PhPlus} from '@phosphor-icons/vue'
 
 const props = withDefaults(defineProps<{
 	modelValue: IProjectView,
@@ -225,7 +226,7 @@ function handleBubbleSave() {
 						class="is-danger"
 						@click.prevent="() => view.bucketConfiguration.splice(index, 1)"
 					>
-						<Icon icon="trash-alt" />
+						<PhTrash />
 					</button>
 					<div class="filter-bucket-form">
 						<FormField
@@ -250,9 +251,11 @@ function handleBubbleSave() {
 				<div class="is-flex is-justify-content-end">
 					<XButton
 						variant="secondary"
-						icon="plus"
 						@click="() => view.bucketConfiguration.push({title: '', filter: {filter: ''}})"
 					>
+						<template #icon>
+							<PhPlus />
+						</template>
 						{{ $t('project.kanban.addBucket') }}
 					</XButton>
 				</div>

frontend/src/components/tasks/AddTask.vue

@@ -12,7 +12,7 @@
 					{{ $t('project.list.addPlaceholder') }}
 				</label>
 				<span class="icon is-small task-icon">
-					<Icon icon="tasks" />
+					<PhListChecks />
 				</span>
 				<textarea
 					:id="textareaId"
@@ -34,11 +34,13 @@
 				<XButton
 					class="add-task-button"
 					:disabled="newTaskTitle === '' || loading || undefined"
-					icon="plus"
 					:loading="loading"
 					:aria-label="$t('project.list.add')"
 					@click="addTask()"
 				>
+					<template #icon>
+						<PhPlus />
+					</template>
 					<span class="button-text">
 						{{ $t('project.list.add') }}
 					</span>
@@ -78,6 +80,7 @@ import {useTaskStore} from '@/stores/tasks'
 import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea'
 import TaskService from '@/services/task'
 import TaskModel from '@/models/task'
+import {PhListChecks, PhPlus} from '@phosphor-icons/vue'
 
 const props = withDefaults(defineProps<{
 	defaultPosition?: number,

frontend/src/components/tasks/TaskForm.vue

@@ -16,9 +16,11 @@
 		</CustomTransition>
 		<XButton
 			:shadow="false"
-			icon="plus"
 			@click="showCreateTaskOrCreate"
 		>
+			<template #icon>
+				<PhPlus />
+			</template>
 			{{ $t('task.new') }}
 		</XButton>
 	</form>
@@ -29,6 +31,7 @@ import {nextTick, ref} from 'vue'
 import type {ITask} from '@/modelTypes/ITask'
 
 import CustomTransition from '@/components/misc/CustomTransition.vue'
+import {PhPlus} from '@phosphor-icons/vue'
 
 const emit = defineEmits<{
 	(e: 'createTask', title: string): Promise<ITask>