Use <translate> instead of to avoid extraction issues

front/src/App.vue

@@ -2,12 +2,12 @@
   <div id="app">
     <div class="ui main text container instance-chooser" v-if="!$store.state.instance.instanceUrl">
       <div class="ui padded segment">
-        <h1 class="ui header">{{ $gettext('Choose your instance') }}</h1>
+        <h1 class="ui header"><translate>Choose your instance</translate></h1>
         <form class="ui form" @submit.prevent="$store.dispatch('instance/setUrl', instanceUrl)">
-          <p>{{ $gettext('You need to select an instance in order to continue') }}</p>
+          <p><translate>You need to select an instance in order to continue</translate></p>
           <div class="ui action input">
             <input type="text" v-model="instanceUrl">
-            <button type="submit" class="ui button">{{ $gettext('Submit') }}</button>
+            <button type="submit" class="ui button"><translate>Submit</translate></button>
           </div>
           <p>{{ $gettext('Suggested choices') }}</p>
           <div class="ui bulleted list">
@@ -30,17 +30,17 @@
               <h4 v-translate class="ui header">Links</h4>
               <div class="ui link list">
                 <router-link class="item" to="/about">
-                  {{ $gettext('About this instance') }}
+                  <translate>About this instance</translate>
                 </router-link>
-                <a href="https://funkwhale.audio" class="item" target="_blank">{{ $gettext('Official website') }}</a>
-                <a href="https://docs.funkwhale.audio" class="item" target="_blank">{{ $gettext('Documentation') }}</a>
+                <a href="https://funkwhale.audio" class="item" target="_blank"><translate>Official website</translate></a>
+                <a href="https://docs.funkwhale.audio" class="item" target="_blank"><translate>Documentation</translate></a>
                 <a href="https://code.eliotberriot.com/funkwhale/funkwhale" class="item" target="_blank">
                   <translate :translate-params="{version: version}" v-if="version">Source code (%{version})</translate>
                   <translate v-else>Source code</translate>
                 </a>
-                <a href="https://code.eliotberriot.com/funkwhale/funkwhale/issues" class="item" target="_blank">{{ $gettext('Issue tracker') }}</a>
+                <a href="https://code.eliotberriot.com/funkwhale/funkwhale/issues" class="item" target="_blank"><translate>Issue tracker</translate></a>
                 <a @click="switchInstance" class="item" >
-                  {{ $gettext('Use another instance') }}
+                  <translate>Use another instance</translate>
                   <template v-if="$store.state.instance.instanceUrl !== '/'">
                     <br>
                     ({{ $store.state.instance.instanceUrl }})

front/src/components/About.vue

@@ -6,20 +6,20 @@
             <template v-if="instance.name.value" :template-params="{instance: instance.name}">
              About %{ instance }
             </template>
-            <template v-else="instance.name.value">{{ $gettext('About this instance') }}</template>
+            <template v-else="instance.name.value"><translate>About this instance</translate></template>
         </h1>
         <stats></stats>
       </div>
     </div>
     <div class="ui vertical stripe segment">
       <p v-if="!instance.short_description.value && !instance.long_description.value">
-        {{ $gettext('Unfortunately, owners of this instance did not yet take the time to complete this page.') }}
+        <translate>Unfortunately, owners of this instance did not yet take the time to complete this page.</translate>
       </p>
       <router-link
         class="ui button"
         v-if="$store.state.auth.availablePermissions['settings']"
         :to="{path: '/manage/settings', hash: 'instance'}">
-        <i class="pencil icon"></i>{{ $gettext('Edit instance info') }}
+        <i class="pencil icon"></i><translate>Edit instance info</translate>
       </router-link>
       <div
         v-if="instance.short_description.value"

front/src/components/Home.vue

@@ -3,15 +3,15 @@
     <div class="ui vertical center aligned stripe segment">
       <div class="ui text container">
         <h1 class="ui huge header">
-          {{ $gettext('Welcome on Funkwhale') }}
+          <translate>Welcome on Funkwhale</translate>
         </h1>
-        <p>{{ $gettext('We think listening to music should be simple.') }}</p>
+        <p><translate>We think listening to music should be simple.</translate></p>
         <router-link class="ui icon button" to="/about">
           <i class="info icon"></i>
-          {{ $gettext('Learn more about this instance') }}
+          <translate>Learn more about this instance</translate>
         </router-link>
         <router-link class="ui icon teal button" to="/library">
-          {{ $gettext('Get me to the library') }}
+          <translate>Get me to the library</translate>
           <i class="right arrow icon"></i>
         </router-link>
       </div>
@@ -22,9 +22,9 @@
           <div class="row">
             <div class="eight wide left floated column">
               <h2 class="ui header">
-                {{ $gettext('Why funkwhale?') }}
+                <translate>Why funkwhale?</translate>
               </h2>
-              <p>{{ $gettext('That\'s simple: we loved Grooveshark and we want to build something even better.') }}</p>
+              <p><translate>That's simple: we loved Grooveshark and we want to build something even better.</translate></p>
             </div>
             <div class="four wide left floated column">
               <img class="ui medium image" src="../assets/logo/logo.png" />
@@ -35,26 +35,26 @@
       <div class="ui middle aligned stackable text container">
         <div class="ui hidden divider"></div>
         <h2 class="ui header">
-          {{ $gettext('Unlimited music') }}
+          <translate>Unlimited music</translate>
         </h2>
-        <p>{{ $gettext('Funkwhale is designed to make it easy to listen to music you like, or to discover new artists.') }}</p>
+        <p><translate>Funkwhale is designed to make it easy to listen to music you like, or to discover new artists.</translate></p>
         <div class="ui list">
           <div class="item">
             <i class="sound icon"></i>
             <div class="content">
-              {{ $gettext('Click once, listen for hours using built-in radios') }}
+              <translate>Click once, listen for hours using built-in radios</translate>
             </div>
           </div>
           <div class="item">
             <i class="heart icon"></i>
             <div class="content">
-              {{ $gettext('Keep a track of your favorite songs') }}
+              <translate>Keep a track of your favorite songs</translate>
             </div>
           </div>
           <div class="item">
             <i class="list icon"></i>
             <div class="content">
-              {{ $gettext('Playlists? We got them') }}
+              <translate>Playlists? We got them</translate>
             </div>
           </div>
         </div>
@@ -62,14 +62,14 @@
       <div class="ui middle aligned stackable text container">
         <div class="ui hidden divider"></div>
         <h2 class="ui header">
-          {{ $gettext('Clean library') }}
+          <translate>Clean library</translate>
         </h2>
-        <p>{{ $gettext('Funkwhale takes care of handling your music') }}.</p>
+        <p><translate>Funkwhale takes care of handling your music</translate>.</p>
         <div class="ui list">
           <div class="item">
             <i class="download icon"></i>
             <div class="content">
-              {{ $gettext('Import music from various platforms, such as YouTube or SoundCloud') }}
+              <translate>Import music from various platforms, such as YouTube or SoundCloud</translate>
             </div>
           </div>
           <div class="item">
@@ -86,7 +86,7 @@
           <div class="item">
             <i class="plus icon"></i>
             <div class="content">
-              {{ $gettext('Covers, lyrics, our goal is to have them all ;)') }}
+              <translate>Covers, lyrics, our goal is to have them all ;)</translate>
             </div>
           </div>
         </div>
@@ -94,20 +94,20 @@
       <div class="ui middle aligned stackable text container">
         <div class="ui hidden divider"></div>
         <h2 class="ui header">
-          {{ $gettext('Easy to use') }}
+          <translate>Easy to use</translate>
         </h2>
-        <p>{{ $gettext('Funkwhale is dead simple to use.') }}</p>
+        <p><translate>Funkwhale is dead simple to use.</translate></p>
         <div class="ui list">
           <div class="item">
             <i class="book icon"></i>
             <div class="content">
-              {{ $gettext('No add-ons, no plugins : you only need a web library') }}
+              <translate>No add-ons, no plugins : you only need a web library</translate>
             </div>
           </div>
           <div class="item">
             <i class="wizard icon"></i>
             <div class="content">
-              {{ $gettext('Access your music from a clean interface that focus on what really matters') }}
+              <translate>Access your music from a clean interface that focus on what really matters</translate>
             </div>
           </div>
         </div>
@@ -115,26 +115,26 @@
       <div class="ui middle aligned stackable text container">
         <div class="ui hidden divider"></div>
         <h2 class="ui header">
-          {{ $gettext('Your music, your way') }}
+          <translate>Your music, your way</translate>
         </h2>
-        <p>{{ $gettext('Funkwhale is free and gives you control on your music.') }}</p>
+        <p><translate>Funkwhale is free and gives you control on your music.</translate></p>
         <div class="ui list">
           <div class="item">
             <i class="smile icon"></i>
             <div class="content">
-              {{ $gettext('The plaform is free and open-source, you can install it and modify it without worries') }}
+              <translate>The plaform is free and open-source, you can install it and modify it without worries</translate>
             </div>
           </div>
           <div class="item">
             <i class="protect icon"></i>
             <div class="content">
-              {{ $gettext('We do not track you or bother you with ads') }}
+              <translate>We do not track you or bother you with ads</translate>
             </div>
           </div>
           <div class="item">
             <i class="users icon"></i>
             <div class="content">
-              {{ $gettext('You can invite friends and family to your instance so they can enjoy your music') }}
+              <translate>You can invite friends and family to your instance so they can enjoy your music</translate>
             </div>
           </div>
         </div>

front/src/components/PageNotFound.vue

@@ -5,14 +5,14 @@
         <h1 class="ui huge header">
           <i class="warning icon"></i>
           <div class="content">
-            <strike>{{ $gettext('Whale') }}</strike> {{ $gettext('Page not found!') }}
+            <strike><translate>Whale') }}</strike> {{ $gettext('Page not found!</translate>
           </div>
         </h1>
-        <p>{{ $gettext('We\'re sorry, the page you asked for does not exist:') }}</p>
+        <p><translate>We're sorry, the page you asked for does not exist:</translate></p>
         <a :href="path">{{ path }}</a>
         <div class="ui hidden divider"></div>
         <router-link class="ui icon button" to="/">
-          {{ $gettext('Go to home page') }}
+          <translate>Go to home page</translate>
           <i class="right arrow icon"></i>
         </router-link>
       </div>

front/src/components/Sidebar.vue

@@ -16,11 +16,11 @@
 
   <div class="menu-area">
     <div class="ui compact fluid two item inverted menu">
-      <a class="active item" @click="selectedTab = 'library'" data-tab="library">Browse</a>
+      <a class="active item" @click="selectedTab = 'library'" data-tab="library"><translate>Browse</translate></a>
       <a class="item" @click="selectedTab = 'queue'" data-tab="queue">
-        {{ $gettext('Queue') }}&nbsp;
+        <translate>Queue</translate>&nbsp;
          <template v-if="queue.tracks.length === 0">
-           {{ $gettext('(empty)') }}
+           <translate>(empty)</translate>
          </template>
          <translate v-else :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}">
           (%{ index } of %{ length })
@@ -32,7 +32,7 @@
     <div class="ui bottom attached active tab" data-tab="library">
       <div class="ui inverted vertical large fluid menu">
         <div class="item">
-          <div class="header">{{ $gettext('My account') }}</div>
+          <div class="header"><translate>My account</translate></div>
           <div class="menu">
             <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'profile', params: {username: $store.state.auth.username}}">
               <i class="user icon"></i>
@@ -40,34 +40,34 @@
                 Logged in as %{ username }
               </translate>
             </router-link>
-            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'logout'}"><i class="sign out icon"></i>{{ $gettext('Logout') }}</router-link>
-            <router-link class="item" v-else :to="{name: 'login'}"><i class="sign in icon"></i>{{ $gettext('Login') }}</router-link>
+            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'logout'}"><i class="sign out icon"></i><translate>Logout</translate></router-link>
+            <router-link class="item" v-else :to="{name: 'login'}"><i class="sign in icon"></i><translate>Login</translate></router-link>
           </div>
         </div>
         <div class="item">
-          <div class="header">{{ $gettext('Music') }}</div>
+          <div class="header"><translate>Music</translate></div>
           <div class="menu">
-            <router-link class="item" :to="{path: '/library'}"><i class="sound icon"> </i>{{ $gettext('Browse library') }}</router-link>
-            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{path: '/favorites'}"><i class="heart icon"></i>{{ $gettext('Favorites') }}</router-link>
+            <router-link class="item" :to="{path: '/library'}"><i class="sound icon"> </i><translate>Browse library</translate></router-link>
+            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{path: '/favorites'}"><i class="heart icon"></i><translate>Favorites</translate></router-link>
             <a
               @click="$store.commit('playlists/chooseTrack', null)"
               v-if="$store.state.auth.authenticated"
               class="item">
-              <i class="list icon"></i>{{ $gettext('Playlists') }}
+              <i class="list icon"></i><translate>Playlists</translate>
             </a>
             <router-link
               v-if="$store.state.auth.authenticated"
-              class="item" :to="{path: '/activity'}"><i class="bell icon"></i>{{ $gettext('Activity') }}</router-link>
+              class="item" :to="{path: '/activity'}"><i class="bell icon"></i><translate>Activity</translate></router-link>
           </div>
         </div>
         <div class="item" v-if="showAdmin">
-          <div class="header">{{ $gettext('Administration') }}</div>
+          <div class="header"><translate>Administration</translate></div>
           <div class="menu">
             <router-link
               class="item"
               v-if="$store.state.auth.availablePermissions['library']"
               :to="{name: 'manage.library.files'}">
-              <i class="book icon"></i>{{ $gettext('Library') }}
+              <i class="book icon"></i><translate>Library</translate>
               <div
                 :class="['ui', {'teal': $store.state.ui.notifications.importRequests > 0}, 'label']"
                 :title="$gettext('Pending import requests')">
@@ -78,13 +78,13 @@
               class="item"
               v-else-if="$store.state.auth.availablePermissions['upload']"
               to="/library/import/launch">
-              <i class="download icon"></i>{{ $gettext('Import music') }}
+              <i class="download icon"></i><translate>Import music</translate>
             </router-link>
             <router-link
               class="item"
               v-if="$store.state.auth.availablePermissions['federation']"
               :to="{path: '/manage/federation/libraries'}">
-              <i class="sitemap icon"></i>{{ $gettext('Federation') }}
+              <i class="sitemap icon"></i><translate>Federation</translate>
               <div
                 :class="['ui', {'teal': $store.state.ui.notifications.federation > 0}, 'label']"
                 :title="$gettext('Pending follow requests')">
@@ -94,13 +94,13 @@
               class="item"
               v-if="$store.state.auth.availablePermissions['settings']"
               :to="{path: '/manage/settings'}">
-              <i class="settings icon"></i>{{ $gettext('Settings') }}
+              <i class="settings icon"></i><translate>Settings</translate>
             </router-link>
             <router-link
               class="item"
               v-if="$store.state.auth.availablePermissions['settings']"
               :to="{name: 'manage.users.users.list'}">
-              <i class="users icon"></i>{{ $gettext('Users') }}
+              <i class="users icon"></i><translate>Users</translate>
             </router-link>
           </div>
         </div>
@@ -110,7 +110,7 @@
       <i class="history icon"></i>
       <div class="content">
         <div class="header">
-          {{ $gettext('Do you want to restore your previous queue?') }}
+          <translate>Do you want to restore your previous queue?</translate>
         </div>
         <p>
           <translate
@@ -121,8 +121,8 @@
           </translate>
         </p>
         <div class="ui two buttons">
-          <div @click="queue.restore()" class="ui basic inverted green button">{{ $gettext('Yes') }}</div>
-          <div @click="queue.removePrevious()" class="ui basic inverted red button">{{ $gettext('No') }}</div>
+          <div @click="queue.restore()" class="ui basic inverted green button"><translate>Yes</translate></div>
+          <div @click="queue.removePrevious()" class="ui basic inverted red button"><translate>No</translate></div>
         </div>
       </div>
     </div>
@@ -153,10 +153,10 @@
       <div v-if="$store.state.radios.running" class="ui black message">
         <div class="content">
           <div class="header">
-            <i class="feed icon"></i> {{ $gettext('You have a radio playing') }}
+            <i class="feed icon"></i> <translate>You have a radio playing</translate>
           </div>
-          <p>{{ $gettext('New tracks will be appended here automatically.') }}</p>
-          <div @click="$store.dispatch('radios/stop')" class="ui basic inverted red button">{{ $gettext('Stop radio') }}</div>
+          <p><translate>New tracks will be appended here automatically.</translate></p>
+          <div @click="$store.dispatch('radios/stop')" class="ui basic inverted red button"><translate>Stop radio</translate></div>
         </div>
       </div>
     </div>

front/src/components/admin/SettingsGroup.vue

@@ -3,13 +3,13 @@
     <div class="ui divider" />
     <h3 class="ui header">{{ group.label }}</h3>
     <div v-if="errors.length > 0" class="ui negative message">
-      <div class="header">{{ $gettext('Error while saving settings') }}</div>
+      <div class="header"><translate>Error while saving settings</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>
     </div>
     <div v-if="result" class="ui positive message">
-      {{ $gettext('Settings updated successfully.') }}
+      <translate>Settings updated successfully.</translate>
     </div>
     <p v-if="group.help">{{ group.help }}</p>
     <div v-for="setting in settings" class="ui field">
@@ -61,7 +61,7 @@
     <button
       type="submit"
       :class="['ui', {'loading': isLoading}, 'right', 'floated', 'green', 'button']">
-        {{ $gettext('Save') }}
+        <translate>Save</translate>
     </button>
   </form>
 </template>

front/src/components/audio/PlayButton.vue

@@ -6,14 +6,14 @@
       :disabled="!playable"
       :class="['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}, 'button']">
       <i class="ui play icon"></i>
-      <template v-if="!discrete"><slot>{{ $gettext('Play') }}</slot></template>
+      <template v-if="!discrete"><slot><translate>Play</translate></slot></template>
     </button>
     <div v-if="!discrete" :class="['ui', {disabled: !playable}, 'floating', 'dropdown', 'icon', 'button']">
       <i class="dropdown icon"></i>
       <div class="menu">
-        <div class="item" :disabled="!playable" @click="add"><i class="plus icon"></i>{{ $gettext('Add to queue') }}</div>
-        <div class="item" :disabled="!playable" @click="addNext()"><i class="step forward icon"></i>{{ $gettext('Play next') }}</div>
-        <div class="item" :disabled="!playable" @click="addNext(true)"><i class="arrow down icon"></i>{{ $gettext('Play now') }}</div>
+        <div class="item" :disabled="!playable" @click="add"><i class="plus icon"></i><translate>Add to queue</translate></div>
+        <div class="item" :disabled="!playable" @click="addNext()"><i class="step forward icon"></i><translate>Play next</translate></div>
+        <div class="item" :disabled="!playable" @click="addNext(true)"><i class="arrow down icon"></i><translate>Play now</translate></div>
       </div>
     </div>
   </div>

front/src/components/audio/Search.vue

 <template>
   <div>
-    <h2>{{ $gettext('Search for some music') }}</h2>
+    <h2><translate>Search for some music</translate></h2>
     <div :class="['ui', {'loading': isLoading }, 'search']">
       <div class="ui icon big input">
         <i class="search icon"></i>
@@ -8,22 +8,22 @@
       </div>
     </div>
     <template v-if="query.length > 0">
-      <h3 class="ui title">{{ $gettext('Artists') }}</h3>
+      <h3 class="ui title"><translate>Artists</translate></h3>
       <div v-if="results.artists.length > 0" class="ui stackable three column grid">
         <div class="column" :key="artist.id" v-for="artist in results.artists">
           <artist-card class="fluid" :artist="artist" ></artist-card>
         </div>
       </div>
-      <p v-else>{{ $gettext('Sorry, we did not found any artist matching your query') }}</p>
+      <p v-else><translate>Sorry, we did not found any artist matching your query</translate></p>
     </template>
     <template v-if="query.length > 0">
-      <h3 class="ui title">{{ $gettext('Albums') }}</h3>
+      <h3 class="ui title"><translate>Albums</translate></h3>
       <div v-if="results.albums.length > 0" class="ui stackable three column grid">
         <div class="column" :key="album.id" v-for="album in results.albums">
           <album-card class="fluid" :album="album" ></album-card>
         </div>
       </div>
-      <p v-else>{{ $gettext('Sorry, we did not found any album matching your query') }}</p>
+      <p v-else><translate>Sorry, we did not found any album matching your query</translate></p>
     </template>
   </div>
 </template>

front/src/components/audio/album/Card.vue

@@ -41,14 +41,14 @@
               <translate :translate-params="{count: album.tracks.length - initialTracks}" :translate-n="album.tracks.length - initialTracks" translate-plural="Show %{ count } more tracks">Show 1 more track</translate>
             </em>
             <em v-else @click="showAllTracks = false" class="expand">
-              {{ $gettext('Collapse') }}
+              <translate>Collapse</translate>
             </em>
           </div>
         </div>
       </div>
       <div class="extra content">
         <play-button class="mini basic orange right floated" :tracks="album.tracks">
-          {{ $gettext('Play all') }}
+          <translate>Play all</translate>
         </play-button>
         <span>
           <i class="music icon"></i>

front/src/components/audio/artist/Card.vue

@@ -31,7 +31,7 @@
               <translate :translate-params="{count: artist.albums.length - initialAlbums}" :translate-n="artist.albums.length - initialAlbums" translate-plural="Show %{ count } more albums">Show 1 more album</translate>
             </em>
             <em v-else @click="showAllAlbums = false" class="expand">
-              {{ $gettext('Collapse') }}
+              <translate>Collapse</translate>
             </em>
           </div>
         </div>
@@ -42,7 +42,7 @@
             <translate :translate-params="{count: artist.albums.length}" :translate-n="artist.albums.length" translate-plural="%{ count } albums">1 album</translate>
         </span>
         <play-button class="mini basic orange right floated" :artist="artist.id">
-          {{ $gettext('Play all') }}
+          <translate>Play all</translate>
         </play-button>
       </div>
     </div>

front/src/components/audio/track/Table.vue

@@ -40,7 +40,7 @@ curl -G -o "{{ track.files[0].filename }}" <template v-if="$store.state.auth.aut
               </div>
             </div>
             <div class="actions">
-              <div class="ui black deny button">{{ $gettext('Cancel') }}</div>
+              <div class="ui black deny button"><translate>Cancel</translate></div>
             </div>
           </modal>
         </th>

front/src/components/auth/Login.vue

@@ -2,10 +2,10 @@
   <div class="main pusher" v-title="'Log In'">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
-        <h2>{{ $gettext('Log in to your Funkwhale account') }}</h2>
+        <h2><translate>Log in to your Funkwhale account</translate></h2>
         <form class="ui form" @submit.prevent="submit()">
           <div v-if="error" class="ui negative message">
-            <div class="header">{{ $gettext('We cannot log you in') }}</div>
+            <div class="header"><translate>We cannot log you in</translate></div>
             <ul class="list">
               <li v-if="error == 'invalid_credentials'">{{ $gettext('Please double-check your username/password couple is correct') }}</li>
               <li v-else>{{ $gettext('An unknown error happend, this can mean the server is down or cannot be reached') }}</li>
@@ -13,9 +13,9 @@
           </div>
           <div class="field">
             <label>
-              {{ $gettext('Username or email') }} |
+              <translate>Username or email</translate> |
               <router-link :to="{path: '/signup'}">
-                {{ $gettext('Create an account') }}
+                <translate>Create an account</translate>
               </router-link>
             </label>
             <input
@@ -30,9 +30,9 @@
           </div>
           <div class="field">
             <label>
-              {{ $gettext('Password') }} |
+              <translate>Password</translate> |
               <router-link :to="{name: 'auth.password-reset', query: {email: credentials.username}}">
-                {{ $gettext('Reset your password') }}
+                <translate>Reset your password</translate>
               </router-link>
             </label>
             <password-input :index="2" required v-model="credentials.password" />

front/src/components/auth/Logout.vue

@@ -3,10 +3,10 @@
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>
-          {{ $gettext('Are you sure you want to log out?') }}
+          <translate>Are you sure you want to log out?</translate>
         </h2>
         <p v-translate="{username: $store.state.auth.username}">You are currently logged in as %{ username }</p>
-        <button class="ui button" @click="$store.dispatch('auth/logout')">{{ $gettext('Yes, log me out!') }}</button>
+        <button class="ui button" @click="$store.dispatch('auth/logout')"><translate>Yes, log me out!</translate></button>
       </div>
     </div>
   </div>

front/src/components/auth/Profile.vue

 <template>
-  <div class="main pusher" v-title="username + '\'s Profile'">
+  <div class="main pusher" v-title="username + ''s Profile'">
     <div v-if="isLoading" class="ui vertical segment">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
@@ -13,15 +13,15 @@
           </div>
         </h2>
         <div class="ui basic green label">
-          {{ $gettext('This is you!') }}
+          <translate>This is you!</translate>
         </div>
         <div v-if="$store.state.auth.profile.is_staff" class="ui yellow label">
           <i class="star icon"></i>
-          {{ $gettext('Staff member') }}
+          <translate>Staff member</translate>
         </div>
         <router-link class="ui tiny basic button" :to="{path: '/settings'}">
           <i class="setting icon"> </i>
-          {{ $gettext('Settings...') }}
+          <translate>Settings...</translate>
         </router-link>
 
       </div>

front/src/components/auth/Settings.vue

@@ -3,16 +3,16 @@
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2 class="ui header">
-          {{ $gettext('Account settings') }}
+          <translate>Account settings</translate>
         </h2>
         <form class="ui form" @submit.prevent="submitSettings()">
           <div v-if="settings.success" class="ui positive message">
             <div class="header">
-              {{ $gettext('Settings updated') }}
+              <translate>Settings updated</translate>
             </div>
           </div>
           <div v-if="settings.errors.length > 0" class="ui negative message">
-            <div class="header">{{ $gettext('We cannot save your settings') }}</div>
+            <div class="header"><translate>We cannot save your settings</translate></div>
             <ul class="list">
               <li v-for="error in settings.errors">{{ error }}</li>
             </ul>
@@ -25,26 +25,26 @@
             </select>
           </div>
           <button :class="['ui', {'loading': isLoading}, 'button']" type="submit">
-            {{ $gettext('Update settings') }}
+            <translate>Update settings</translate>
           </button>
         </form>
       </div>
       <div class="ui hidden divider"></div>
       <div class="ui small text container">
         <h2 class="ui header">
-          {{ $gettext('Change my password') }}
+          <translate>Change my password</translate>
         </h2>
         <div class="ui message">
-          {{ $gettext('Changing your password will also change your Subsonic API password if you have requested one.') }}
-          {{ $gettext('You will have to update your password on your clients that use this password.') }}
+          <translate>Changing your password will also change your Subsonic API password if you have requested one.</translate>
+          <translate>You will have to update your password on your clients that use this password.</translate>
         </div>
         <form class="ui form" @submit.prevent="submitPassword()">
           <div v-if="passwordError" class="ui negative message">
             <div class="header">
-              {{ $gettext('Cannot change your password') }}
+              <translate>Cannot change your password</translate>
             </div>
             <ul class="list">
-              <li v-if="passwordError == 'invalid_credentials'">{{ $gettext('Please double-check your password is correct') }}</li>
+              <li v-if="passwordError == 'invalid_credentials'"><translate>Please double-check your password is correct</translate></li>
             </ul>
           </div>
           <div class="field">
@@ -60,16 +60,16 @@
             color="yellow"
             :class="['ui', {'loading': isLoading}, 'button']"
             :action="submitPassword">
-            {{ $gettext('Change password') }}
-            <p slot="modal-header">{{ $gettext('Change your password?') }}</p>
+            <translate>Change password</translate>
+            <p slot="modal-header"><translate>Change your password?</translate></p>
             <div slot="modal-content">
               <p>{{ $gettext("Changing your password will have the following consequences") }}</p>
               <ul>
-                <li>{{ $gettext('You will be logged out from this session and have to log out with the new one') }}</li>
-                <li>{{ $gettext('Your Subsonic password will be changed to a new, random one, logging you out from devices that used the old Subsonic password') }}</li>
+                <li><translate>You will be logged out from this session and have to log out with the new one</translate></li>
+                <li><translate>Your Subsonic password will be changed to a new, random one, logging you out from devices that used the old Subsonic password</translate></li>
               </ul>
             </div>
-            <p slot="modal-confirm">{{ $gettext('Disable access') }}</p>
+            <p slot="modal-confirm"><translate>Disable access</translate></p>
           </dangerous-button>
         </form>
         <div class="ui hidden divider" />

front/src/components/auth/Signup.vue

@@ -7,7 +7,7 @@
           :class="['ui', {'loading': isLoadingInstanceSetting}, 'form']"
           @submit.prevent="submit()">
           <p class="ui message" v-if="!$store.state.instance.settings.users.registration_enabled.value">
-            {{ $gettext('Registration are closed on this instance, you will need an invitation code to signup.') }}
+            <translate>Registration are closed on this instance, you will need an invitation code to signup.</translate>
           </p>
 
           <div v-if="errors.length > 0" class="ui negative message">

front/src/components/auth/SubsonicTokenForm.vue

 <template>
   <form class="ui form" @submit.prevent="requestNewToken()">
-    <h2>{{ $gettext('Subsonic API password') }}</h2>
+    <h2><translate>Subsonic API password</translate></h2>
     <p class="ui message" v-if="!subsonicEnabled">
-      {{ $gettext('The Subsonic API is not available on this Funkwhale instance.') }}
+      <translate>The Subsonic API is not available on this Funkwhale instance.</translate>
     </p>
     <p>
-      {{ $gettext('Funkwhale is compatible with other music players that support the Subsonic API.') }}
-      {{ $gettext('You can use those to enjoy your playlist and music in offline mode, on your smartphone or tablet, for instance.') }}
+      <translate>Funkwhale is compatible with other music players that support the Subsonic API.</translate>
+      <translate>You can use those to enjoy your playlist and music in offline mode, on your smartphone or tablet, for instance.</translate>
     </p>
     <p>
-      {{ $gettext('However, accessing Funkwhale from those clients require a separate password you can set below.') }}
+      <translate>However, accessing Funkwhale from those clients require a separate password you can set below.</translate>
     </p>
     <p><a href="https://docs.funkwhale.audio/users/apps.html#subsonic-compatible-clients" target="_blank">
-      {{ $gettext('Discover how to use Funkwhale from other apps') }}
+      <translate>Discover how to use Funkwhale from other apps</translate>
     </a></p>
     <div v-if="success" class="ui positive message">
       <div class="header">{{ successMessage }}</div>
     </div>
     <div v-if="subsonicEnabled && errors.length > 0" class="ui negative message">
-      <div class="header">{{ $gettext('Error') }}</div>
+      <div class="header"><translate>Error</translate></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>
@@ -32,25 +32,25 @@
         color="grey"
         :class="['ui', {'loading': isLoading}, 'button']"
         :action="requestNewToken">
-        {{ $gettext('Request a new password') }}
-        <p slot="modal-header">{{ $gettext('Request a new Subsonic API password?') }}</p>
-        <p slot="modal-content">{{ $gettext('This will log you out from existing devices that use the current password.') }}</p>
-        <p slot="modal-confirm">{{ $gettext('Request a new password') }}</p>
+        <translate>Request a new password</translate>
+        <p slot="modal-header"><translate>Request a new Subsonic API password?</translate></p>
+        <p slot="modal-content"><translate>This will log you out from existing devices that use the current password.</translate></p>
+        <p slot="modal-confirm"><translate>Request a new password</translate></p>
       </dangerous-button>
       <button
         v-else
         color="grey"
         :class="['ui', {'loading': isLoading}, 'button']"
-        @click="requestNewToken">{{ $gettext('Request a password') }}</button>
+        @click="requestNewToken"><translate>Request a password</translate></button>
         <dangerous-button
           v-if="token"
           color="yellow"
           :class="['ui', {'loading': isLoading}, 'button']"
           :action="disable">
-          {{ $gettext('Disable Subsonic access') }}
-          <p slot="modal-header">{{ $gettext('Disable Subsonic API access?') }}</p>
-          <p slot="modal-content">{{ $gettext('This will completely disable access to the Subsonic API using from account.') }}</p>
-          <p slot="modal-confirm">{{ $gettext('Disable access') }}</p>
+          <translate>Disable Subsonic access</translate>
+          <p slot="modal-header"><translate>Disable Subsonic API access?</translate></p>
+          <p slot="modal-content"><translate>This will completely disable access to the Subsonic API using from account.</translate></p>
+          <p slot="modal-confirm"><translate>Disable access</translate></p>
         </dangerous-button>
     </template>
   </form>

front/src/components/common/ActionTable.vue

@@ -6,7 +6,7 @@
           <div class="ui small form">
             <div class="ui inline fields">
               <div class="field">
-                <label>{{ $gettext('Actions') }}</label>
+                <label><translate>Actions</translate></label>
                 <select class="ui dropdown" v-model="currentActionName">
                   <option v-for="action in actions" :value="action.name">
                     {{ action.label }}
@@ -19,13 +19,13 @@
                   @click="launchAction"
                   :disabled="checked.length === 0"
                   :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']">
-                  {{ $gettext('Go') }}</div>
+                  <translate>Go</translate></div>
                 <dangerous-button
                   v-else-if="!currentAction.isDangerous" :class="['ui', {disabled: checked.length === 0}, {'loading': actionLoading}, 'button']"
                   confirm-color="green"
                   color=""
                   @confirm="launchAction">
-                  {{ $gettext('Go') }}
+                  <translate>Go</translate>
                   <p slot="modal-header">
                     <translate
                       :translate-n="objectsData.count"
@@ -37,7 +37,7 @@
                   <p slot="modal-content">
                     {{ $gettext('This may affect a lot of elements, please double check this is really what you want.')}}
                   </p>
-                  <p slot="modal-confirm">{{ $gettext('Launch') }}</p>
+                  <p slot="modal-confirm"><translate>Launch</translate></p>
                 </dangerous-button>
               </div>
               <div class="count field">
@@ -67,13 +67,13 @@
                     </translate>
                   </a>
                   <a @click="selectAll = false" v-else>
-                    {{ $gettext('Select only current page') }}
+                    <translate>Select only current page</translate>
                   </a>
                 </template>
               </div>
             </div>
             <div v-if="actionErrors.length > 0" class="ui negative message">
-              <div class="header">{{ $gettext('Error while applying action') }}</div>
+              <div class="header"><translate>Error while applying action</translate></div>
               <ul class="list">
                 <li v-for="error in actionErrors">{{ error }}</li>
               </ul>

front/src/components/common/DangerousButton.vue

@@ -5,7 +5,7 @@
     <modal class="small" :show.sync="showModal">
       <div class="header">
         <slot name="modal-header">
-          {{ $gettext('Do you want to confirm this action?') }}
+          <translate>Do you want to confirm this action?</translate>
         </slot>
       </div>
       <div class="scrolling content">
@@ -15,11 +15,11 @@
       </div>
       <div class="actions">
         <div class="ui cancel button">
-          {{ $gettext('Cancel') }}
+          <translate>Cancel</translate>
         </div>
         <div :class="['ui', 'confirm', confirmButtonColor, 'button']" @click="confirm">
           <slot name="modal-confirm">
-            {{ $gettext('Confirm') }}
+            <translate>Confirm</translate>
           </slot>
         </div>
       </div>

front/src/components/discussion/Comment.vue

@@ -12,13 +12,13 @@
           @click="collapsed = false"
           v-if="truncated && collapsed"
           class="expand">
-          {{ $gettext('Expand') }}
+          <translate>Expand</translate>
         </span>
         <span
           @click="collapsed = true"
           v-if="truncated && !collapsed"
           class="collapse">
-          {{ $gettext('Collapse') }}
+          <translate>Collapse</translate>
         </span>
       </div>
     </div>