From ae6ac1f624f2df4f4d0124ca1ae63114fa91713b Mon Sep 17 00:00:00 2001 From: jon r Date: Fri, 18 Apr 2025 11:08:13 +0200 Subject: [PATCH] Feat(front): use new UI library, explicityly imported, in all views closes #2359 #2367 #2091 Co-Authored-By: ArneBo Co-Authored-By: Flupsi Co-Authored-By: jon r fix(front): null error in user profile --- changes/changelog.d/2091.feature | 1 + front/src/components/About.vue | 756 ++- front/src/components/AboutPod.vue | 117 +- front/src/components/Home.vue | 62 +- front/src/components/Logo.vue | 2 +- front/src/components/PageNotFound.vue | 8 +- front/src/components/Queue.vue | 201 +- front/src/components/QueueItem.vue | 43 +- front/src/components/RemoteSearchForm.vue | 153 +- front/src/components/ServiceMessages.vue | 8 +- front/src/components/SetInstanceModal.vue | 188 + front/src/components/ShortcutsModal.vue | 161 - front/src/components/Sidebar.vue | 589 --- front/src/components/admin/SettingsGroup.vue | 333 +- .../components/admin/SignupFormBuilder.vue | 48 +- front/src/components/album/Card.vue | 96 + .../components/{audio => }/album/Widget.vue | 72 +- front/src/components/artist/Card.vue | 103 + .../components/{audio => }/artist/Widget.vue | 88 +- .../components/audio/ArtistCreditLabel.vue | 55 +- front/src/components/audio/ArtistLabel.vue | 7 +- front/src/components/audio/ChannelCard.vue | 124 +- front/src/components/audio/ChannelEntries.vue | 90 +- .../src/components/audio/ChannelEntryCard.vue | 21 +- front/src/components/audio/ChannelForm.vue | 227 +- .../src/components/audio/ChannelSerieCard.vue | 114 +- front/src/components/audio/ChannelSeries.vue | 56 +- front/src/components/audio/ChannelsWidget.vue | 98 +- front/src/components/audio/EmbedWizard.vue | 66 +- .../components/audio/LibraryFollowButton.vue | 8 +- front/src/components/audio/PlayButton.vue | 324 +- front/src/components/audio/Player.vue | 205 +- front/src/components/audio/PlayerControls.vue | 54 +- front/src/components/audio/Search.vue | 14 +- front/src/components/audio/SearchBar.vue | 289 +- front/src/components/audio/VolumeControl.vue | 16 +- front/src/components/audio/album/Card.vue | 73 +- front/src/components/audio/artist/Card.vue | 20 +- .../components/audio/podcast/MobileRow.vue | 9 +- front/src/components/audio/podcast/Modal.vue | 48 +- front/src/components/audio/podcast/Row.vue | 22 +- front/src/components/audio/podcast/Table.vue | 18 +- .../src/components/audio/track/MobileRow.vue | 25 +- front/src/components/audio/track/Modal.vue | 50 +- .../components/audio/track/PlayIndicator.vue | 4 + front/src/components/audio/track/Row.vue | 111 +- front/src/components/audio/track/Table.vue | 172 +- front/src/components/audio/track/Widget.vue | 414 +- .../components/audio/visualizer/MilkDrop.vue | 14 + front/src/components/auth/ApplicationEdit.vue | 22 +- front/src/components/auth/ApplicationForm.vue | 24 +- front/src/components/auth/ApplicationNew.vue | 4 +- front/src/components/auth/Authorize.vue | 58 +- front/src/components/auth/LoginForm.vue | 133 +- front/src/components/auth/Logout.vue | 73 +- front/src/components/auth/Plugin.vue | 100 +- front/src/components/auth/Settings.vue | 1108 ++-- front/src/components/auth/SignupForm.vue | 204 +- .../src/components/auth/SubsonicTokenForm.vue | 82 +- front/src/components/channels/AlbumForm.vue | 36 +- front/src/components/channels/AlbumModal.vue | 135 +- front/src/components/channels/AlbumSelect.vue | 82 +- .../src/components/channels/LicenseSelect.vue | 9 +- .../components/channels/SubscribeButton.vue | 25 +- front/src/components/channels/UploadForm.vue | 553 +- .../channels/UploadMetadataForm.vue | 106 +- front/src/components/channels/UploadModal.vue | 166 +- front/src/components/common/ActionTable.vue | 410 +- front/src/components/common/ActorAvatar.vue | 27 +- front/src/components/common/ActorLink.vue | 48 +- .../src/components/common/AttachmentInput.vue | 29 +- front/src/components/common/CollapseLink.vue | 7 +- front/src/components/common/ContentForm.vue | 124 +- front/src/components/common/CopyInput.vue | 84 +- .../src/components/common/DangerousButton.vue | 64 +- front/src/components/common/Duration.vue | 7 +- front/src/components/common/EmptyState.vue | 28 +- front/src/components/common/ExpandableDiv.vue | 7 +- front/src/components/common/HumanDate.vue | 9 +- .../src/components/common/InlineSearchBar.vue | 31 +- front/src/components/common/LoginModal.vue | 39 +- front/src/components/common/Message.vue | 50 +- .../components/common/RenderedDescription.vue | 179 +- front/src/components/common/Tooltip.vue | 2 +- front/src/components/common/UserLink.vue | 35 +- front/src/components/common/UserMenu.vue | 28 +- front/src/components/common/UserModal.vue | 23 +- front/src/components/favorites/List.vue | 254 +- .../favorites/TrackFavoriteIcon.vue | 29 +- .../src/components/federation/FetchButton.vue | 81 +- .../components/federation/LibraryWidget.vue | 93 +- .../federation/UserFollowButton.vue | 20 +- front/src/components/forms/PasswordInput.vue | 58 +- front/src/components/library/AlbumBase.vue | 402 +- front/src/components/library/AlbumDetail.vue | 56 +- .../src/components/library/AlbumDropdown.vue | 206 +- front/src/components/library/AlbumEdit.vue | 44 +- front/src/components/library/Albums.vue | 318 +- front/src/components/library/ArtistBase.vue | 502 +- front/src/components/library/ArtistDetail.vue | 152 +- front/src/components/library/ArtistEdit.vue | 54 +- front/src/components/library/Artists.vue | 329 +- front/src/components/library/EditCard.vue | 171 +- front/src/components/library/EditDetail.vue | 14 +- front/src/components/library/EditForm.vue | 349 +- front/src/components/library/EditList.vue | 57 +- front/src/components/library/FileUpload.vue | 568 +- .../components/library/FileUploadWidget.vue | 22 +- front/src/components/library/FsBrowser.vue | 37 +- front/src/components/library/FsLogs.vue | 5 +- front/src/components/library/Home.vue | 113 +- .../components/library/ImportStatusModal.vue | 40 +- front/src/components/library/Library.vue | 11 +- front/src/components/library/Podcasts.vue | 442 +- front/src/components/library/Radios.vue | 351 +- front/src/components/library/TagDetail.vue | 178 +- front/src/components/library/TagsSelector.vue | 134 +- front/src/components/library/TrackBase.vue | 579 +- front/src/components/library/TrackDetail.vue | 457 +- front/src/components/library/TrackEdit.vue | 53 +- .../src/components/library/radios/Builder.vue | 294 +- .../src/components/library/radios/Filter.vue | 60 +- front/src/components/manage/ChannelsTable.vue | 257 +- .../components/manage/library/AlbumsTable.vue | 275 +- .../manage/library/ArtistsTable.vue | 228 +- .../manage/library/EditsCardList.vue | 141 +- .../manage/library/LibrariesTable.vue | 293 +- .../components/manage/library/TagsTable.vue | 206 +- .../components/manage/library/TracksTable.vue | 313 +- .../manage/library/UploadsTable.vue | 383 +- .../manage/moderation/AccountsTable.vue | 233 +- .../manage/moderation/DomainsTable.vue | 215 +- .../manage/moderation/InstancePolicyCard.vue | 21 +- .../manage/moderation/InstancePolicyForm.vue | 42 +- .../manage/moderation/InstancePolicyModal.vue | 39 +- .../components/manage/moderation/NoteForm.vue | 4 +- .../manage/moderation/NotesThread.vue | 29 +- .../manage/moderation/ReportCard.vue | 71 +- .../manage/moderation/UserRequestCard.vue | 41 +- .../manage/users/InvitationForm.vue | 74 +- .../manage/users/InvitationsTable.vue | 273 +- .../components/manage/users/UsersTable.vue | 85 +- .../src/components/moderation/FilterModal.vue | 45 +- .../moderation/ReportCategoryDropdown.vue | 2 +- .../src/components/moderation/ReportModal.vue | 60 +- .../notifications/NotificationRow.vue | 126 +- front/src/components/playlist/Card.vue | 78 + front/src/components/playlist/style.scss | 66 + front/src/components/playlists/Card.vue | 158 +- front/src/components/playlists/CardList.vue | 17 +- front/src/components/playlists/Editor.vue | 246 +- front/src/components/playlists/Form.vue | 156 +- .../components/playlists/PlaylistDropdown.vue | 126 +- .../components/playlists/PlaylistModal.vue | 302 +- .../playlists/TrackPlaylistIcon.vue | 26 +- front/src/components/playlists/Widget.vue | 113 +- front/src/components/podcast/Card.vue | 31 + front/src/components/podcast/style.scss | 23 + front/src/components/radio/Card.vue | 45 + front/src/components/radio/style.scss | 67 + front/src/components/radios/Button.vue | 28 +- front/src/components/radios/Card.vue | 110 +- front/src/components/semantic/Modal.vue | 95 - front/src/components/tags/List.vue | 29 +- front/src/injection-keys.ts | 21 + front/src/locales/bn.json | 21 + front/src/locales/ca.json | 21 + front/src/locales/ca@valencia.json | 4645 +++++++++++++++++ front/src/locales/de.json | 21 + front/src/locales/en_GB.json | 132 +- front/src/locales/en_US.json | 221 +- front/src/locales/es.json | 21 + front/src/locales/eu.json | 21 + front/src/locales/fr_FR.json | 21 + front/src/locales/nl.json | 26 + front/src/locales/tr.json | 21 + front/src/locales/zh_Hans.json | 21 + front/src/style/_main.scss | 6 - front/src/style/_vars.scss | 3 - front/src/style/base/generic.scss | 79 + front/src/style/base/index.scss | 1 + front/src/style/bootstrap-icons/LICENSE | 21 + .../bootstrap-icons/font/bootstrap-icons.css | 2078 ++++++++ .../bootstrap-icons/font/bootstrap-icons.json | 2052 ++++++++ .../font/bootstrap-icons.min.css | 5 + .../bootstrap-icons/font/bootstrap-icons.scss | 2090 ++++++++ .../font/fonts/bootstrap-icons.woff | Bin 0 -> 176200 bytes .../font/fonts/bootstrap-icons.woff2 | Bin 0 -> 130608 bytes front/src/style/colors.scss | 663 +++ front/src/style/components/_avatar.scss | 19 +- front/src/style/components/_card.scss | 137 +- front/src/style/components/_form.scss | 34 + front/src/style/components/_placeholder.scss | 7 +- .../src/style/components/_play_indicator.scss | 140 +- front/src/style/components/_player.scss | 145 +- front/src/style/components/_queue.scss | 91 +- front/src/style/components/_track_table.scss | 32 +- .../src/style/components/_volume_control.scss | 3 +- front/src/style/font.scss | 71 + front/src/style/font/Lato-Black.ttf | Bin 0 -> 69500 bytes front/src/style/font/Lato-BlackItalic.ttf | Bin 0 -> 72000 bytes front/src/style/font/Lato-Bold.ttf | Bin 0 -> 73332 bytes front/src/style/font/Lato-BoldItalic.ttf | Bin 0 -> 77732 bytes front/src/style/font/Lato-Italic.ttf | Bin 0 -> 75792 bytes front/src/style/font/Lato-Light.ttf | Bin 0 -> 77208 bytes front/src/style/font/Lato-LightItalic.ttf | Bin 0 -> 49080 bytes front/src/style/font/Lato-Regular.ttf | Bin 0 -> 75152 bytes front/src/style/font/Lato-Thin.ttf | Bin 0 -> 69976 bytes front/src/style/font/Lato-ThinItalic.ttf | Bin 0 -> 48864 bytes front/src/style/font/OFL.txt | 93 + front/src/style/funkwhale.scss | 31 + front/src/style/globals/_channels.scss | 13 +- front/src/style/globals/_fomantic.scss | 73 - front/src/style/globals/_layout.scss | 4 +- front/src/style/inc/docs.scss | 7 + front/src/style/inc/theme.scss | 45 + front/src/views/Notifications.vue | 322 +- front/src/views/Search.vue | 21 +- front/src/views/admin/ChannelDetail.vue | 785 +-- front/src/views/admin/CommonList.vue | 100 +- front/src/views/admin/Settings.vue | 81 +- front/src/views/admin/library/AlbumDetail.vue | 844 +-- .../src/views/admin/library/ArtistDetail.vue | 835 +-- front/src/views/admin/library/Base.vue | 102 +- front/src/views/admin/library/EditsList.vue | 31 +- .../src/views/admin/library/LibraryDetail.vue | 76 +- front/src/views/admin/library/TagDetail.vue | 395 +- front/src/views/admin/library/TrackDetail.vue | 872 ++-- .../src/views/admin/library/UploadDetail.vue | 775 +-- .../views/admin/moderation/AccountsDetail.vue | 863 ++- front/src/views/admin/moderation/Base.vue | 80 +- .../views/admin/moderation/DomainsDetail.vue | 78 +- .../views/admin/moderation/DomainsList.vue | 114 +- .../views/admin/moderation/ReportsList.vue | 138 +- .../views/admin/moderation/RequestsList.vue | 212 +- front/src/views/admin/users/Base.vue | 47 +- front/src/views/auth/Callback.vue | 6 +- front/src/views/auth/EmailConfirm.vue | 118 +- front/src/views/auth/Login.vue | 14 +- front/src/views/auth/ManageUploads.vue | 606 +++ front/src/views/auth/PasswordReset.vue | 121 +- front/src/views/auth/PasswordResetConfirm.vue | 128 +- front/src/views/auth/Plugins.vue | 45 +- front/src/views/auth/ProfileActivity.vue | 100 +- front/src/views/auth/ProfileBase.vue | 327 +- front/src/views/auth/ProfileOverview.vue | 161 +- front/src/views/auth/Signup.vue | 20 +- front/src/views/channels/DetailBase.vue | 743 +-- front/src/views/channels/DetailOverview.vue | 96 +- front/src/views/channels/List.vue | 375 ++ .../src/views/channels/SubscriptionsList.vue | 124 +- front/src/views/content/Base.vue | 41 +- front/src/views/content/Home.vue | 21 +- .../src/views/content/channels/CardUpload.vue | 84 + front/src/views/content/libraries/Card.vue | 22 +- .../views/content/libraries/CardUpload.vue | 82 + front/src/views/content/libraries/Files.vue | 4 +- .../views/content/libraries/FilesTable.vue | 342 +- front/src/views/content/libraries/Form.vue | 40 +- front/src/views/content/libraries/Home.vue | 97 +- front/src/views/content/libraries/Quota.vue | 364 +- front/src/views/content/remote/Card.vue | 254 +- front/src/views/content/remote/Home.vue | 19 +- front/src/views/content/remote/ScanForm.vue | 4 +- front/src/views/content/upload/Home.vue | 165 + front/src/views/library/DetailAlbums.vue | 11 +- front/src/views/library/DetailOverview.vue | 21 +- front/src/views/library/DetailTracks.vue | 7 +- front/src/views/library/Edit.vue | 40 +- front/src/views/library/LibraryBase.vue | 364 +- front/src/views/library/Upload.vue | 6 +- front/src/views/playlists/Detail.vue | 412 +- front/src/views/playlists/List.vue | 291 +- front/src/views/radios/Detail.vue | 167 +- 274 files changed, 31600 insertions(+), 15802 deletions(-) create mode 100644 changes/changelog.d/2091.feature create mode 100644 front/src/components/SetInstanceModal.vue delete mode 100644 front/src/components/ShortcutsModal.vue delete mode 100644 front/src/components/Sidebar.vue create mode 100644 front/src/components/album/Card.vue rename front/src/components/{audio => }/album/Widget.vue (61%) create mode 100644 front/src/components/artist/Card.vue rename front/src/components/{audio => }/artist/Widget.vue (55%) create mode 100644 front/src/components/playlist/Card.vue create mode 100644 front/src/components/playlist/style.scss create mode 100644 front/src/components/podcast/Card.vue create mode 100644 front/src/components/podcast/style.scss create mode 100644 front/src/components/radio/Card.vue create mode 100644 front/src/components/radio/style.scss delete mode 100644 front/src/components/semantic/Modal.vue create mode 100644 front/src/injection-keys.ts create mode 100644 front/src/locales/ca@valencia.json create mode 100644 front/src/style/base/generic.scss create mode 100644 front/src/style/base/index.scss create mode 100644 front/src/style/bootstrap-icons/LICENSE create mode 100644 front/src/style/bootstrap-icons/font/bootstrap-icons.css create mode 100644 front/src/style/bootstrap-icons/font/bootstrap-icons.json create mode 100644 front/src/style/bootstrap-icons/font/bootstrap-icons.min.css create mode 100644 front/src/style/bootstrap-icons/font/bootstrap-icons.scss create mode 100644 front/src/style/bootstrap-icons/font/fonts/bootstrap-icons.woff create mode 100644 front/src/style/bootstrap-icons/font/fonts/bootstrap-icons.woff2 create mode 100644 front/src/style/colors.scss create mode 100644 front/src/style/font.scss create mode 100644 front/src/style/font/Lato-Black.ttf create mode 100644 front/src/style/font/Lato-BlackItalic.ttf create mode 100644 front/src/style/font/Lato-Bold.ttf create mode 100644 front/src/style/font/Lato-BoldItalic.ttf create mode 100644 front/src/style/font/Lato-Italic.ttf create mode 100644 front/src/style/font/Lato-Light.ttf create mode 100644 front/src/style/font/Lato-LightItalic.ttf create mode 100644 front/src/style/font/Lato-Regular.ttf create mode 100644 front/src/style/font/Lato-Thin.ttf create mode 100644 front/src/style/font/Lato-ThinItalic.ttf create mode 100644 front/src/style/font/OFL.txt create mode 100644 front/src/style/funkwhale.scss delete mode 100644 front/src/style/globals/_fomantic.scss create mode 100644 front/src/style/inc/docs.scss create mode 100644 front/src/style/inc/theme.scss create mode 100644 front/src/views/auth/ManageUploads.vue create mode 100644 front/src/views/channels/List.vue create mode 100644 front/src/views/content/channels/CardUpload.vue create mode 100644 front/src/views/content/libraries/CardUpload.vue create mode 100644 front/src/views/content/upload/Home.vue diff --git a/changes/changelog.d/2091.feature b/changes/changelog.d/2091.feature new file mode 100644 index 000000000..43a00d298 --- /dev/null +++ b/changes/changelog.d/2091.feature @@ -0,0 +1 @@ +Improve visuals & layout (#2091) diff --git a/front/src/components/About.vue b/front/src/components/About.vue index a40cf6da2..cf9984f59 100644 --- a/front/src/components/About.vue +++ b/front/src/components/About.vue @@ -5,8 +5,16 @@ import { get } from 'lodash-es' import { humanSize } from '~/utils/filters' import { computed } from 'vue' +import type { components } from '~/generated/types.ts' + import SignupForm from '~/components/auth/SignupForm.vue' import LogoText from '~/components/LogoText.vue' +import useMarkdown from '~/composables/useMarkdown' + +import Link from '~/components/ui/Link.vue' +import Card from '~/components/ui/Card.vue' +import Button from '~/components/ui/Button.vue' +import Layout from '~/components/ui/Layout.vue' const store = useStore() const nodeinfo = computed(() => store.state.instance.nodeinfo) @@ -16,7 +24,8 @@ const labels = computed(() => ({ title: t('components.About.title') })) -const podName = computed(() => get(nodeinfo.value, 'metadata.nodeName') ?? 'Funkwhale') +const podName = computed(() => (n => n === '' ? 'No name' : n ?? 'Funkwhale')(get(nodeinfo.value, 'metadata.nodeName'))) + const banner = computed(() => get(nodeinfo.value, 'metadata.banner')) const shortDescription = computed(() => get(nodeinfo.value, 'metadata.shortDescription')) @@ -28,10 +37,22 @@ const stats = computed(() => { return null } - return { users, hours } + const info = nodeinfo.value ?? {} as components['schemas']['NodeInfo21'] + + const data = { + users: info.usage.users.activeMonth || null, + hours: info.metadata.content.local.hoursOfContent || null, + artists: info.metadata.content.local.artists || null, + albums: info.metadata.content.local.releases || null, + tracks: info.metadata.content.local.recordings || null, + listenings: info.metadata.usage?.listenings.total || null + } + + return { users, hours, data } }) const openRegistrations = computed(() => get(nodeinfo.value, 'openRegistrations')) + const defaultUploadQuota = computed(() => humanSize(get(nodeinfo.value, 'metadata.defaultUploadQuota', 0) * 1000 * 1000)) const headerStyle = computed(() => { @@ -43,219 +64,554 @@ const headerStyle = computed(() => { backgroundImage: `url(${store.getters['instance/absoluteUrl'](banner.value)})` } }) + +const longDescription = useMarkdown(() => get(nodeinfo.value, 'metadata.longDescription', '')) +const rules = useMarkdown(() => get(nodeinfo.value, 'metadata.rules', '')) +const terms = useMarkdown(() => get(nodeinfo.value, 'metadata.terms', '')) +const contactEmail = computed(() => get(nodeinfo.value, 'metadata.contactEmail')) +const anonymousCanListen = computed(() => { + const features = get(nodeinfo.value, 'metadata.metadata.feature', []) as string[] + const hasAnonymousCanListen = features.includes('anonymousCanListen') + return hasAnonymousCanListen +}) +const allowListEnabled = computed(() => get(nodeinfo.value, 'metadata.allowList.enabled')) +const version = computed(() => get(nodeinfo.value, 'software.version')) +const federationEnabled = computed(() => { + const features = get(nodeinfo.value, 'metadata.metadata.feature', []) as string[] + const hasAnonymousCanListen = features.includes('federation') + return hasAnonymousCanListen +}) + + + +
+

+ +

+
+
+

+ {{ t('components.About.header.aboutPod') }} +

+
+ {{ shortDescription }}
+

+ {{ t('components.About.placeholder.noDescription') }} +

+ + +
+ + +
+ + + + + + {{ t('components.About.description.publicContent') }} + + + + {{ t('components.About.description.publicContent') }} + + + + {{ t('components.About.description.findApp') }} + + + +
+

+ + {{ podName }} +

+
+ + +
+
+
+ +
+

+ {{ t('components.AboutPod.header.about') }} +

+ +

+ {{ t('components.AboutPod.placeholder.noDescription') }} +

+ +

+ {{ t('components.AboutPod.header.rules') }} +

+ +

+ {{ t('components.AboutPod.placeholder.noRules') }} +

+ +

+ {{ t('components.AboutPod.header.terms') }} +

+ +

+ {{ t('components.AboutPod.placeholder.noTerms') }} +

+ +

+ {{ t('components.AboutPod.header.features') }} +

+
+
+ + + + + + + + + + + + + + + + + + +
+ {{ t('components.AboutPod.feature.version') }} + + + {{ version }} + + + + {{ t('components.AboutPod.notApplicable') }} + +
+ {{ t('components.AboutPod.feature.federation') }} + + + + {{ t('components.AboutPod.feature.status.enabled') }} + + + + + {{ t('components.AboutPod.feature.status.disabled') }} + +
+ {{ t('components.AboutPod.feature.allowList') }} + + + + {{ t('components.AboutPod.feature.status.enabled') }} + + + + + {{ t('components.AboutPod.feature.status.disabled') }} + +
+
+
+ + + + + + + + + + + + + + + + + + +
+ {{ t('components.AboutPod.feature.anonymousAccess') }} + + + + {{ t('components.AboutPod.feature.status.enabled') }} + + + + + {{ t('components.AboutPod.feature.status.disabled') }} + +
+ {{ t('components.AboutPod.feature.registrations') }} + + + + {{ t('components.AboutPod.feature.status.open') }} + + + + + {{ t('components.AboutPod.feature.status.closed') }} + +
+ {{ t('components.AboutPod.feature.quota') }} + + + {{ defaultUploadQuota }} + + + + {{ t('components.AboutPod.notApplicable') }} + +
+
+
+ + + + + +
- + diff --git a/front/src/components/AboutPod.vue b/front/src/components/AboutPod.vue index a4bbe09f6..f59eb6209 100644 --- a/front/src/components/AboutPod.vue +++ b/front/src/components/AboutPod.vue @@ -5,7 +5,6 @@ import { get } from 'lodash-es' import { computed } from 'vue' import useMarkdown from '~/composables/useMarkdown' -import type { NodeInfo } from '~/store/instance' import { useI18n } from 'vue-i18n' const store = useStore() @@ -39,24 +38,14 @@ const federationEnabled = computed(() => { const onDesktop = computed(() => window.innerWidth > 800) -const stats = computed(() => { - const info = nodeinfo.value ?? {} as NodeInfo - - const data = { - users: get(info, 'usage.users.activeMonth', null), - hours: get(info, 'metadata.content.local.hoursOfContent', null), - artists: get(info, 'metadata.content.local.artists.total', null), - albums: get(info, 'metadata.content.local.albums.total', null), - tracks: get(info, 'metadata.content.local.tracks.total', null), - listenings: get(info, 'metadata.usage.listenings.total', null) - } - - if (data.users === null || data.artists === null) { - return data - } - - return data -}) +const stats = computed(() => ({ + users: nodeinfo.value?.usage.users.activeMonth, + hours: nodeinfo.value?.metadata.content.local.hoursOfContent, + artists: nodeinfo.value?.metadata.content.local.artists, + albums: nodeinfo.value?.metadata.content.local.releases, // TODO: Check where to get 'metadata.content.local.albums.total' + tracks: nodeinfo.value?.metadata.content.local.recordings, // TODO: 'metadata.content.local.tracks.total' + listenings: nodeinfo.value?.metadata.usage?.listenings.total +})) const headerStyle = computed(() => { if (!banner.value) { @@ -72,7 +61,7 @@ const headerStyle = computed(() => { @@ -420,7 +409,7 @@ const headerStyle = computed(() => { class="ui left floated basic secondary button" > - {{ $t('components.AboutPod.link.introduction') }} + {{ t('components.AboutPod.link.introduction') }}
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue index 9b6cd4d80..4e10082a9 100644 --- a/front/src/components/Home.vue +++ b/front/src/components/Home.vue @@ -1,6 +1,6 @@ diff --git a/front/src/components/PageNotFound.vue b/front/src/components/PageNotFound.vue index 07d249fec..92a473726 100644 --- a/front/src/components/PageNotFound.vue +++ b/front/src/components/PageNotFound.vue @@ -12,7 +12,7 @@ const labels = computed(() => ({ - +

- {{ labels.queue }}
@@ -420,7 +421,10 @@ if (!isWebGLSupported) { - + {{ endsIn }} @@ -451,30 +455,31 @@ if (!isWebGLSupported) { diff --git a/front/src/components/QueueItem.vue b/front/src/components/QueueItem.vue index ce2b384ad..86e4b8271 100644 --- a/front/src/components/QueueItem.vue +++ b/front/src/components/QueueItem.vue @@ -3,6 +3,11 @@ import type { QueueItemSource } from '~/types' import time from '~/utils/time' import { generateTrackCreditStringFromQueue } from '~/utils/utils' +import { useStore } from '~/store' + +import Button from '~/components/ui/Button.vue' + +const store = useStore() interface Events { (e: 'play', index: number): void @@ -24,7 +29,7 @@ defineProps() tabindex="0" >
- +
() >
- +
- - + />
diff --git a/front/src/components/RemoteSearchForm.vue b/front/src/components/RemoteSearchForm.vue index 00e0c858b..122a7f0ed 100644 --- a/front/src/components/RemoteSearchForm.vue +++ b/front/src/components/RemoteSearchForm.vue @@ -8,6 +8,11 @@ import { useStore } from '~/store' import axios from 'axios' +import Layout from '~/components/ui/Layout.vue' +import Button from '~/components/ui/Button.vue' +import Input from '~/components/ui/Input.vue' +import Alert from '~/components/ui/Alert.vue' + import updateQueryString from '~/composables/updateQueryString' import useLogger from '~/composables/useLogger' @@ -165,85 +170,85 @@ watch(() => props.initialId, () => { diff --git a/front/src/components/ServiceMessages.vue b/front/src/components/ServiceMessages.vue index 4f16067ba..df9662033 100644 --- a/front/src/components/ServiceMessages.vue +++ b/front/src/components/ServiceMessages.vue @@ -1,7 +1,13 @@ + +