fix(ui): remove fomantic, replace external ui with built stylesheets

front/package.json

@@ -22,7 +22,6 @@
     "postinstall": "yarn run fix-fomantic-css"
   },
   "dependencies": {
-    "@funkwhale/ui": "https://dev.funkwhale.audio/funkwhale/ui.git#feature/layout",
     "@sentry/tracing": "7.47.0",
     "@sentry/vue": "7.47.0",
     "@tauri-apps/api": "2.0.0-beta.1",
@@ -40,7 +39,6 @@
     "diff": "5.1.0",
     "dompurify": "3.0.8",
     "focus-trap": "7.2.0",
-    "fomantic-ui-css": "2.9.3",
     "idb-keyval": "6.2.1",
     "jsmediatags": "3.9.7",
     "lodash-es": "4.17.21",

front/src/components/album/Card.vue

@@ -18,8 +18,8 @@ let navigate = (to: 'artist' | 'album') => {}
 if (import.meta.env.PROD) {
   const router = useRouter()
   navigate = (to: 'artist' | 'album') => to === 'album'
-    ? router.push({ name: 'library.albums.detail', params: { id: album.value.id } })
+    ? router.push({ name: 'library.albums.detail', params: { id: album.id } })
-    : router.push({ name: 'library.artists.detail', params: { id: album.value.artist.id } })
+    : router.push({ name: 'library.artists.detail', params: { id: album.artist_credit.artist.id } })
 }
 </script>
 

front/src/locales/zh_Hans.json

@@ -5,7 +5,7 @@
   "vui": {
     "tracks": "{n} 歌曲 | {n} 歌曲",
     "episodes": "{n} 节目 | {n} 节目",
-    "by-user": "由 {'@'}{用户名}",
+    "by-user": "由 {'@'}{username}",
     "go-to": "去",
     "pagination": {
       "previous": "以前的",

front/src/main.ts

@@ -9,9 +9,6 @@ import { createPinia } from 'pinia'
 import useLogger from '~/composables/useLogger'
 import useTheme from '~/composables/useTheme'
 
-import Funkwhale from '@funkwhale/ui'
-import '@funkwhale/ui/style.css'
-
 import '~/style/_main.scss'
 
 import '~/api'

front/src/style/_main.scss

@@ -1,13 +1,10 @@
-@use "./_vars" as *;
-
 // not in vars because not meant to be overridden
 $desktop-sidebar-width: 275px;
 $widedesktop-sidebar-width: 275px;
 $bottom-player-height: 4rem;
 
-@import "@funkwhale/ui/style.css";
+@import "./funkwhale.scss";
 
-@import "./globals/_fomantic.scss";
 @import "./vendor/_media.scss";
 
 @import "./globals/_app.scss";

front/src/style/base/generic.scss

@@ -68,7 +68,7 @@
 hr:not(.is-raw) {
   @extend %hr;
 
-  @include docs {
+  @if $docs {
     @extend %hr;
   }
 }

front/src/style/globals/_fomantic.scss

@@ -1,73 +0,0 @@
-/*
-
-███████╗███████╗███╗   ███╗ █████╗ ███╗   ██╗████████╗██╗ ██████╗    ██╗   ██╗██╗
-██╔════╝██╔════╝████╗ ████║██╔══██╗████╗  ██║╚══██╔══╝██║██╔════╝    ██║   ██║██║
-███████╗█████╗  ██╔████╔██║███████║██╔██╗ ██║   ██║   ██║██║         ██║   ██║██║
-╚════██║██╔══╝  ██║╚██╔╝██║██╔══██║██║╚██╗██║   ██║   ██║██║         ██║   ██║██║
-███████║███████╗██║ ╚═╝ ██║██║  ██║██║ ╚████║   ██║   ██║╚██████╗    ╚██████╔╝██║
-╚══════╝╚══════╝╚═╝     ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═╝ ╚═════╝     ╚═════╝ ╚═╝
-
-  Import this file into your LESS project to use Semantic UI without build tools
-*/
-
-// Those fomantic-ui-css/*.scss don't exist in the package, but we create them
-// via scripts/link-scss-files.sh on postinstall, so we can include theme
-// under a class namespace
-
-/* Global */
-@import "fomantic-ui-css/tweaked/reset.css";
-@import "fomantic-ui-css/tweaked/site.css";
-
-/* Elements */
-@import "fomantic-ui-css/tweaked/button.css";
-@import "fomantic-ui-css/tweaked/container.css";
-@import "fomantic-ui-css/tweaked/divider.css";
-// @import "fomantic-ui-css/tweaked/flag.css";
-@import "fomantic-ui-css/tweaked/header.css";
-@import "fomantic-ui-css/tweaked/icon.css";
-@import "fomantic-ui-css/tweaked/image.css";
-@import "fomantic-ui-css/tweaked/input.css";
-@import "fomantic-ui-css/tweaked/label.css";
-@import "fomantic-ui-css/tweaked/list.css";
-@import "fomantic-ui-css/tweaked/loader.css";
-@import "fomantic-ui-css/tweaked/placeholder.css";
-// @import "fomantic-ui-css/tweaked/rail.css";
-// @import "fomantic-ui-css/tweaked/reveal.css";
-@import "fomantic-ui-css/tweaked/segment.css";
-@import "fomantic-ui-css/tweaked/step.css";
-
-/* Collections */
-// @import "fomantic-ui-css/tweaked/breadcrumb.css";
-@import "fomantic-ui-css/tweaked/form.css";
-@import "fomantic-ui-css/tweaked/grid.css";
-@import "fomantic-ui-css/tweaked/menu.css";
-@import "fomantic-ui-css/tweaked/message.css";
-@import "fomantic-ui-css/tweaked/table.css";
-
-/* Views */
-// @import "fomantic-ui-css/tweaked/ad.css";
-@import "fomantic-ui-css/tweaked/card.css";
-// @import "fomantic-ui-css/tweaked/comment.css";
-@import "fomantic-ui-css/tweaked/feed.css";
-@import "fomantic-ui-css/tweaked/item.css";
-@import "fomantic-ui-css/tweaked/statistic.css";
-
-/* Modules */
-// @import "fomantic-ui-css/tweaked/accordion.css";
-@import "fomantic-ui-css/tweaked/checkbox.css";
-@import "fomantic-ui-css/tweaked/dimmer.css";
-@import "fomantic-ui-css/tweaked/dropdown.css";
-// @import "fomantic-ui-css/tweaked/embed.css";
-@import "fomantic-ui-css/tweaked/modal.css";
-// @import "fomantic-ui-css/tweaked/nag.css";
-@import "fomantic-ui-css/tweaked/popup.css";
-@import "fomantic-ui-css/tweaked/progress.css";
-// @import "fomantic-ui-css/tweaked/rating.css";
-@import "fomantic-ui-css/tweaked/search.css";
-// @import "fomantic-ui-css/tweaked/shape.css";
-@import "fomantic-ui-css/tweaked/sidebar.css";
-@import "fomantic-ui-css/tweaked/sticky.css";
-@import "fomantic-ui-css/tweaked/tab.css";
-@import "fomantic-ui-css/tweaked/text.css";
-@import "fomantic-ui-css/tweaked/toast.css";
-@import "fomantic-ui-css/tweaked/transition.css";

front/vite.config.ts

@@ -74,8 +74,10 @@ export default defineConfig(({ mode }) => ({
     preprocessorOptions: {
       scss: {
         additionalData: `
-          @import "~/style/inc/theme";
           $docs: ${!!process.env.VP_DOCS};
+          @use "~/style/_vars" as *;
+          @import "~/style/inc/theme";
+          @import "~/style/funkwhale";
         `
       }
     }