refactor: move to unocss icons (#408)

* refactor: move to unocss icons

* chore: lint and format

Author: Joery-M

.github/workflows/build.yml

@@ -5,7 +5,7 @@ name: Build
 
 on:
   pull_request:
-    branches: ["main"]
+    branches: ['main']
 
 jobs:
   build-all:
@@ -25,7 +25,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "pnpm"
+          cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --ignore-scripts --frozen-lockfile

.github/workflows/lint.yml

@@ -2,7 +2,7 @@ name: Lint
 
 on:
   pull_request:
-    branches: ["main"]
+    branches: ['main']
 jobs:
   lint:
     runs-on: ubuntu-latest
@@ -21,7 +21,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "pnpm"
+          cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --ignore-scripts --frozen-lockfile

eslint.config.mjs

@@ -8,7 +8,6 @@ import prettierConfig from 'eslint-plugin-prettier/recommended';
 import eslintPluginVue from 'eslint-plugin-vue';
 import ts from 'typescript-eslint';
 import { fileURLToPath } from 'url';
-import vueParser from 'vue-eslint-parser';
 
 export default ts.config(
     {
@@ -32,35 +31,16 @@ export default ts.config(
     },
 
     // ----- i18n -----
-    // Use the base config, then re-add the rules on specific files
-    ...vueI18n.configs['flat/base'],
     {
-        name: '@intlify/vue-i18n:recommended:setup',
+        extends: vueI18n.configs['flat/recommended'],
         files: ['**/packages/safelight/**/*.vue', '**/packages/shared/**/*.vue'],
         ignores: ['dist/**', 'generated/**', '**/*.scss', '**/views/dev/**'],
-        languageOptions: {
-            ecmaVersion: 2018,
-            sourceType: 'module',
-            parserOptions: {
-                ecmaFeatures: {
-                    jsx: true
-                }
+        settings: {
+            'vue-i18n': {
+                localeDir: './packages/shared/src/Localization/i18n/*.json'
             }
-        }
-    },
-    {
-        name: '@intlify/vue-i18n:recommended:rules',
-        files: ['**/packages/safelight/**/*.vue', '**/packages/shared/**/*.vue'],
-        ignores: ['dist/**', 'generated/**', '**/*.scss', '**/views/dev/**'],
+        },
         rules: {
-            '@intlify/vue-i18n/no-deprecated-i18n-component': 'warn',
-            '@intlify/vue-i18n/no-deprecated-i18n-place-attr': 'warn',
-            '@intlify/vue-i18n/no-deprecated-i18n-places-prop': 'warn',
-            '@intlify/vue-i18n/no-deprecated-modulo-syntax': 'warn',
-            '@intlify/vue-i18n/no-deprecated-tc': 'warn',
-            '@intlify/vue-i18n/no-html-messages': 'warn',
-            '@intlify/vue-i18n/no-i18n-t-path-prop': 'warn',
-            '@intlify/vue-i18n/no-missing-keys': 'off',
             '@intlify/vue-i18n/no-raw-text': [
                 'warn',
                 {
@@ -79,9 +59,7 @@ export default ts.config(
                     ignoreNodes: ['md-icon', 'v-icon'],
                     ignorePattern: '^[-#:()&]+$'
                 }
-            ],
-            '@intlify/vue-i18n/no-v-html': 'warn',
-            '@intlify/vue-i18n/valid-message-syntax': 'warn'
+            ]
         }
     },
 
@@ -96,7 +74,6 @@ export default ts.config(
     },
     {
         languageOptions: {
-            parser: vueParser,
             parserOptions: {
                 parser: ts.parser,
                 // extraFileExtensions: ['.vue'],

packages/safelight/package.json

@@ -18,8 +18,6 @@
   },
   "dependencies": {
     "@fontsource-variable/inter": "^5.2.5",
-    "@phosphor-icons/vue": "^2.2.1",
-    "@phosphor-icons/web": "^2.1.1",
     "@primeuix/themes": "^1.0.0",
     "@safelight/daguerreo": "workspace:^",
     "@safelight/shared": "workspace:*",
@@ -43,19 +41,20 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
+    "@iconify-json/ph": "^1.2.2",
     "@quantco/pnpm-licenses": "^2.2.0",
     "@types/fuzzysearch": "^1.0.2",
     "@types/luxon": "^3.4.2",
     "@types/node": "^22.13.10",
     "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
     "@vitejs/plugin-vue": "^5.2.2",
     "sass-embedded": "^1.85.1",
     "tinyglobby": "^0.2.12",
     "tsx": "^4.19.3",
     "typescript": "^5.8.2",
     "unocss": "^66.0.0",
     "vite": "^6.2.2",
-    "@vitejs/plugin-basic-ssl": "^2.0.0",
     "vue-tsc": "2.2.8"
   }
 }

packages/safelight/src/App.vue

@@ -38,18 +38,18 @@ SettingsManager.setup([
     {
         name: 'editor',
         title: 'Editor',
-        icon: 'ph ph-sidebar',
+        icon: 'i-ph-sidebar',
         childNamespaces: [
             {
                 name: 'playback',
                 title: 'Playback',
-                icon: 'ph ph-play-pause',
+                icon: 'i-ph-play-pause',
                 settings: []
             },
             {
                 name: 'timeline',
                 title: 'Timeline',
-                icon: 'ph ph-film-strip',
+                icon: 'i-ph-film-strip',
                 settings: [
                     {
                         type: 'boolean',
@@ -86,7 +86,7 @@ SettingsManager.setup([
             {
                 name: 'library',
                 title: 'Library',
-                icon: 'ph ph-folders',
+                icon: 'i-ph-folders',
                 settings: [
                     {
                         type: 'group',
@@ -115,7 +115,7 @@ SettingsManager.setup([
     {
         name: 'keyboard',
         title: 'Keyboard',
-        icon: 'ph ph-keyboard',
+        icon: 'i-ph-keyboard',
         childNamespaces: [
             {
                 name: 'hotkeys',

packages/safelight/src/components/Editor/Library/Library.vue

@@ -25,7 +25,7 @@
                 <template #start>
                     <InputGroup class="mr-2">
                         <InputGroupAddon class="p-0">
-                            <i class="ph ph-magnifying-glass"></i>
+                            <i class="i-ph-magnifying-glass"></i>
                         </InputGroupAddon>
                         <InputText v-model="search" :placeholder="$t('general.actions.search')">
                         </InputText>
@@ -46,9 +46,7 @@
                                     ? $t('general.actions.sortAscending')
                                     : $t('general.actions.sortDescending')
                             "
-                            :icon="
-                                sortDescending ? 'ph ph-sort-descending' : 'ph ph-sort-ascending'
-                            "
+                            :icon="sortDescending ? 'i-ph-sort-descending' : 'i-ph-sort-ascending'"
                             @click="sortDescending = !sortDescending"
                         />
                         <Select
@@ -72,7 +70,7 @@
                 :model="breadcrumbItems"
                 :home="{
                     key: 'home',
-                    icon: 'ph-bold ph-house',
+                    icon: 'i-ph-house-bold',
                     command: () => {
                         while (directoryPath.shift());
                     }
@@ -136,7 +134,7 @@
                         outlined
                         severity="secondary"
                         :model="createMenuItems"
-                        icon="ph ph-plus"
+                        icon="i-ph-plus"
                         @click="fileDialog.open()"
                     />
                 </template>
@@ -337,7 +335,7 @@ type sortOptions = 'name' | 'duration' | 'fileType';
     scroll-behavior: smooth;
 }
 
-.p-breadcrumb ::v-deep(.ph-bold.ph-house) {
+.p-breadcrumb ::v-deep(.i-ph-house-bold) {
     @apply flex items-center;
 
     height: 22.4px;

packages/safelight/src/components/Editor/Library/LibraryGridItem.vue

@@ -24,7 +24,7 @@
                 :aria-label="item.name.value"
             />
             <template v-else-if="item.isDirectory">
-                <PhFolder weight="bold" style="max-width: 80%; max-height: 80%" :size="70" />
+                <div class="i-ph-folder-bold size-18 size-max-80%" />
             </template>
             <Skeleton
                 v-else
@@ -36,37 +36,37 @@
                 <i
                     v-if="item.media.value.isOfType(MediaSourceType.Video)"
                     v-tooltip.top="$t('media.attrs.video')"
-                    class="ph-bold ph-video-camera"
+                    class="i-ph-video-camera-bold"
                     :aria-label="$t('media.attrs.video')"
                 />
                 <i
                     v-if="item.media.value.isOfType(MediaSourceType.Audio)"
                     v-tooltip.top="$t('media.attrs.audio')"
-                    class="ph-bold ph-speaker-high"
+                    class="i-ph-speaker-high-bold"
                     :aria-label="$t('media.attrs.audio')"
                 />
                 <i
                     v-if="item.media.value.isOfType(MediaSourceType.Subtitles)"
                     v-tooltip.top="$t('media.attrs.subtitles')"
-                    class="ph-bold ph-subtitles"
+                    class="i-ph-subtitles-bold"
                     :aria-label="$t('media.attrs.subtitles')"
                 />
                 <i
                     v-if="item.media.value.isOfType(MediaSourceType.Image)"
                     v-tooltip.top="$t('media.attrs.image')"
-                    class="ph-bold ph-image"
+                    class="i-ph-image-bold"
                     :aria-label="$t('media.attrs.image')"
                 />
                 <i
                     v-if="item.media.value.isOfType(MediaSourceType.Timeline)"
                     v-tooltip.top="$t('media.attrs.timeline')"
-                    class="ph-bold ph-film-strip"
+                    class="i-ph-film-strip-bold"
                     :aria-label="$t('media.attrs.timeline')"
                 />
                 <i
                     v-if="item.media.value.isOfType(MediaSourceType.Special)"
                     v-tooltip.top="$t('media.attrs.special')"
-                    class="ph-bold ph-sparkle"
+                    class="i-ph-sparkle-bold"
                     :aria-label="$t('media.attrs.special')"
                 />
             </div>
@@ -125,7 +125,7 @@
                 severity="secondary"
                 aria-haspopup="true"
                 aria-controls="library_item_menu"
-                icon="ph ph-dots-three-vertical"
+                icon="i-ph-dots-three-vertical"
                 @click="overlay?.toggle"
             />
         </div>
@@ -152,7 +152,7 @@
                     v-tooltip.top="{ value: 'Delete', showDelay: 500 }"
                     severity="secondary"
                     text
-                    icon="ph ph-trash"
+                    icon="i-ph-trash"
                     @click="item.deleteSelf()"
                 />
             </template>
@@ -170,7 +170,6 @@
 <script setup lang="ts">
 import InplaceRename from '@/components/InplaceRename.vue';
 import { useProject } from '@/stores/useProject';
-import { PhFolder } from '@phosphor-icons/vue';
 import { MediaSourceType } from '@safelight/shared/Media/Media';
 import type { FileTreeItem } from '@safelight/shared/Project/ProjectFileTree';
 import Button from 'primevue/button';
@@ -231,7 +230,7 @@ function clickHandler() {
 }
 
 .media-type {
-    @apply left-0 top-0 h-full w-full gap-2 p-2;
+    @apply p-2   left-0 top-0 h-full w-full gap-2;
 
     position: absolute;
     display: flex;

packages/safelight/src/components/Editor/Timeline/PlaybackControls.vue

@@ -6,20 +6,20 @@
                 severity="secondary"
                 :aria-label="$t('general.actions.skipBackFrame', 1)"
                 :title="$t('general.actions.skipBackFrame', 1)"
-                icon="ph ph-skip-back"
+                icon="i-ph-skip-back"
                 @click="if (!project.timeline.isPlaying.value) project.timeline.stepPlayback(true);"
             />
             <Button
                 severity="secondary"
                 :aria-label="project.timeline.isPlaying.value ? 'Stop playback' : 'Start playback'"
-                :icon="project.timeline.isPlaying.value ? 'ph ph-pause' : 'ph ph-play'"
+                :icon="project.timeline.isPlaying.value ? 'i-ph-pause' : 'i-ph-play'"
                 @click="playPause"
             />
             <Button
                 severity="secondary"
                 :aria-label="$t('general.actions.skipForwardFrame', 1)"
                 :title="$t('general.actions.skipForwardFrame', 1)"
-                icon="ph ph-skip-forward"
+                icon="i-ph-skip-forward"
                 @click="if (!project.timeline.isPlaying.value) project.timeline.stepPlayback();"
             />
         </ButtonGroup>

packages/safelight/src/components/General/Notifications/Notification.vue

@@ -10,18 +10,18 @@
             <template v-if="notif.config.severity && notif.config.severity !== 'none'">
                 <i
                     v-if="notif.config.severity == 'info'"
-                    class="ph ph-info"
+                    class="i-ph-info"
                     style="color: var(--blue-500)"
                 />
                 <i
                     v-if="notif.config.severity == 'error'"
-                    class="ph ph-warning-circle"
+                    class="i-ph-warning-circle"
                     style="color: var(--red-500)"
                 />
-                <i v-if="notif.config.severity == 'warning'" class="ph ph-warning" />
+                <i v-if="notif.config.severity == 'warning'" class="i-ph-warning" />
             </template>
             <h3>{{ $t(notif.config.title ?? '', 'notification.defaultTitle') }}</h3>
-            <Button text severity="secondary" rounded icon="ph ph-x" @click="closeNotif" />
+            <Button text severity="secondary" rounded icon="i-ph-x" @click="closeNotif" />
         </template>
         <p :id="'content-' + notif.id" class="mb-0">{{ $t(notif.config.text ?? '') }}</p>
         <div v-if="buttons.length > 0" class="mt-4 flex items-center gap-2">

packages/safelight/src/components/Menu/ProjectList/ProjectList.vue

@@ -15,7 +15,7 @@
                 <Button
                     rounded
                     :title="$t('general.descriptions.refresh')"
-                    icon="ph ph-arrows-clockwise"
+                    icon="i-ph-arrows-clockwise"
                     @click="loadList.execute()"
                 />
                 <SplitButton
@@ -92,7 +92,7 @@
                     text
                     plain
                     rounded
-                    icon="ph ph-trash"
+                    icon="i-ph-trash"
                     @click="curProject.deleteProject(data.id).then(() => loadList.execute())"
                 />
             </template>
@@ -104,7 +104,7 @@
                     text
                     plain
                     rounded
-                    icon="ph ph-caret-right"
+                    icon="i-ph-caret-right"
                     @click="router.push(`/editor/${data.id}`)"
                 />
             </template>

packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue

@@ -24,7 +24,7 @@ import { computed, ref, watch } from 'vue';
 import VueMarkdown from 'vue-markdown-render';
 import SettingsGroup from './SettingsProperties/SettingsGroup.vue';
 
-const props = withDefaults(defineProps<{ path: string }>(), {
+const props = withDefaults(defineProps<{ path?: string }>(), {
     path: () => 'general'
 });