Merge branch 'develop' of https://git.pleroma.social/pleroma/pleroma-fe into issue-436-mastoapi-notifications

BREAKING_CHANGES.md

@@ -0,0 +1,10 @@
+# v1.0
+## Removed features/radically changed behavior
+### minimalScopesMode
+As of !633, `scopeOptions` is no longer available and instead is changed for `minimalScopesMode` (default: `false`)
+
+Reasoning is that scopeOptions option originally existed mostly as a backwards-compatibility with GNU Social which only had `public` scope available and using scope selector would''t work. Since at some point we dropped GNU Social support, this option was mostly a nuisance (being default `false`'), however some people think scopes are an annoyance to a certain degree and want as less of that feature as possible.
+
+Solution - to only show minimal set among: *Direct*, *User default* and *Scope of post replying to*. This also makes it impossible to reply to a DM with a non-DM post from UI.
+
+*This setting is admin-default, user-configurable. Admin can choose different default for their instance but user can override it.*

README.md

@@ -41,7 +41,7 @@ FE Build process also leaves current commit hash in global variable `___pleromaf
 
 # Configuration
 
-Edit config.json for configuration. scopeOptionsEnabled gives you input fields for CWs and the scope settings.
+Edit config.json for configuration.
 
 ## Options
 

src/App.js

@@ -9,7 +9,8 @@ import ChatPanel from './components/chat_panel/chat_panel.vue'
 import MediaModal from './components/media_modal/media_modal.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
 import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue'
-import { unseenNotificationsFromStore } from './services/notification_utils/notification_utils'
+import MobileNav from './components/mobile_nav/mobile_nav.vue'
+import { windowWidth } from './services/window_utils/window_utils'
 
 export default {
   name: 'app',
@@ -24,7 +25,8 @@ export default {
     ChatPanel,
     MediaModal,
     SideDrawer,
-    MobilePostStatusModal
+    MobilePostStatusModal,
+    MobileNav
   },
   data: () => ({
     mobileActivePanel: 'timeline',
@@ -40,6 +42,10 @@ export default {
   created () {
     // Load the locale from the storage
     this.$i18n.locale = this.$store.state.config.interfaceLanguage
+    window.addEventListener('resize', this.updateMobileState)
+  },
+  destroyed () {
+    window.removeEventListener('resize', this.updateMobileState)
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
@@ -82,13 +88,8 @@ export default {
     chat () { return this.$store.state.chat.channel.state === 'joined' },
     suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
     showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel },
-    unseenNotifications () {
+    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
-      return unseenNotificationsFromStore(this.$store)
+    isMobileLayout () { return this.$store.state.interface.mobileLayout }
-    },
-    unseenNotificationsCount () {
-      return this.unseenNotifications.length
-    },
-    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }
   },
   methods: {
     scrollToTop () {
@@ -101,8 +102,12 @@ export default {
     onFinderToggled (hidden) {
       this.finderHidden = hidden
     },
-    toggleMobileSidebar () {
+    updateMobileState () {
-      this.$refs.sideDrawer.toggleDrawer()
+      const mobileLayout = windowWidth() <= 800
+      const changed = mobileLayout !== this.isMobileLayout
+      if (changed) {
+        this.$store.dispatch('setMobileLayout', mobileLayout)
+      }
     }
   }
 }

src/App.scss

@@ -484,24 +484,6 @@ nav {
   }
 }
 
-.menu-button {
-  display: none;
-  position: relative;
-}
-
-.alert-dot {
-  border-radius: 100%;
-  height: 8px;
-  width: 8px;
-  position: absolute;
-  left: calc(50% - 4px);
-  top: calc(50% - 4px);
-  margin-left: 6px;
-  margin-top: -6px;
-  background-color: $fallback--cRed;
-  background-color: var(--badgeNotification, $fallback--cRed);
-}
-
 .fade-enter-active, .fade-leave-active {
   transition: opacity .2s
 }
@@ -530,20 +512,6 @@ nav {
   display: none;
 }
 
-.panel-switcher {
-  display: none;
-  width: 100%;
-  height: 46px;
-
-  button {
-    display: block;
-    flex: 1;
-    max-height: 32px;
-    margin: 0.5em;
-    padding: 0.5em;
-  }
-}
-
 @media all and (min-width: 800px) {
   body {
     overflow-y: scroll;

src/App.vue

@@ -1,17 +1,14 @@
 <template>
   <div id="app" v-bind:style="bgAppStyle">
     <div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
-    <nav class='nav-bar container' @click="scrollToTop()" id="nav">
+    <MobileNav v-if="isMobileLayout" />
+    <nav v-else class='nav-bar container' @click="scrollToTop()" id="nav">
       <div class='logo' :style='logoBgStyle'>
         <div class='mask' :style='logoMaskStyle'></div>
         <img :src='logo' :style='logoStyle'>
       </div>
       <div class='inner-nav'>
         <div class='item'>
-          <a href="#" class="menu-button" @click.stop.prevent="toggleMobileSidebar()">
-            <i class="button-icon icon-menu"></i>
-            <div class="alert-dot" v-if="unseenNotificationsCount"></div>
-          </a>
           <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
         </div>
         <div class='item right'>
@@ -22,8 +19,7 @@
       </div>
     </nav>
     <div v-if="" class="container" id="content">
-      <side-drawer ref="sideDrawer" :logout="logout"></side-drawer>
+      <div class="sidebar-flexer mobile-hidden" v-if="!isMobileLayout">
-      <div class="sidebar-flexer mobile-hidden">
         <div class="sidebar-bounds">
           <div class="sidebar-scroller">
             <div class="sidebar">
@@ -50,7 +46,6 @@
       <media-modal></media-modal>
     </div>
     <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
-    <MobilePostStatusModal />
   </div>
 </template>
 

src/boot/after_store.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import routes from './routes'
-
 import App from '../App.vue'
+import { windowWidth } from '../services/window_utils/window_utils'
 
 const getStatusnetConfig = async ({ store }) => {
   try {
@@ -95,7 +95,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   copyInstanceOption('redirectRootNoLogin')
   copyInstanceOption('redirectRootLogin')
   copyInstanceOption('showInstanceSpecificPanel')
-  copyInstanceOption('scopeOptionsEnabled')
+  copyInstanceOption('minimalScopesMode')
   copyInstanceOption('formattingOptionsEnabled')
   copyInstanceOption('hideMutedPosts')
   copyInstanceOption('collapseMessageWithSubject')
@@ -219,6 +219,28 @@ const getNodeInfo = async ({ store }) => {
   }
 }
 
+const setConfig = async ({ store }) => {
+  // apiConfig, staticConfig
+  const configInfos = await Promise.all([getStatusnetConfig({ store }), getStaticConfig()])
+  const apiConfig = configInfos[0]
+  const staticConfig = configInfos[1]
+
+  await setSettings({ store, apiConfig, staticConfig })
+}
+
+const checkOAuthToken = async ({ store }) => {
+  return new Promise(async (resolve, reject) => {
+    if (store.state.oauth.token) {
+      try {
+        await store.dispatch('loginUser', store.state.oauth.token)
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    resolve()
+  })
+}
+
 const afterStoreSetup = async ({ store, i18n }) => {
   if (store.state.config.customTheme) {
     // This is a hack to deal with async loading of config.json and themes
@@ -230,19 +252,19 @@ const afterStoreSetup = async ({ store, i18n }) => {
     })
   }
 
-  const apiConfig = await getStatusnetConfig({ store })
+  const width = windowWidth()
-  const staticConfig = await getStaticConfig()
+  store.dispatch('setMobileLayout', width <= 800)
-  await setSettings({ store, apiConfig, staticConfig })
-  await getTOS({ store })
-  await getInstancePanel({ store })
-  await getStaticEmoji({ store })
-  await getCustomEmoji({ store })
-  await getNodeInfo({ store })
 
-  // Now we have the server settings and can try logging in
+  // Now we can try getting the server settings and logging in
-  if (store.state.oauth.token) {
+  await Promise.all([
-    await store.dispatch('loginUser', store.state.oauth.token)
+    checkOAuthToken({ store }),
-  }
+    setConfig({ store }),
+    getTOS({ store }),
+    getInstancePanel({ store }),
+    getStaticEmoji({ store }),
+    getCustomEmoji({ store }),
+    getNodeInfo({ store })
+  ])
 
   const router = new VueRouter({
     mode: 'history',

src/components/features_panel/features_panel.js

@@ -6,7 +6,7 @@ const FeaturesPanel = {
     gopher: function () { return this.$store.state.instance.gopherAvailable },
     whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
     mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
-    scopeOptions: function () { return this.$store.state.instance.scopeOptionsEnabled },
+    minimalScopesMode: function () { return this.$store.state.instance.minimalScopesMode },
     textlimit: function () { return this.$store.state.instance.textlimit }
   }
 }

src/components/features_panel/features_panel.vue

@@ -12,7 +12,7 @@
           <li v-if="gopher">{{$t('features_panel.gopher')}}</li>
           <li v-if="whoToFollow">{{$t('features_panel.who_to_follow')}}</li>
           <li v-if="mediaProxy">{{$t('features_panel.media_proxy')}}</li>
-          <li v-if="scopeOptions">{{$t('features_panel.scope_options')}}</li>
+          <li>{{$t('features_panel.scope_options')}}</li>
           <li>{{$t('features_panel.text_limit')}} = {{textlimit}}</li>
         </ul>
       </div>

src/components/mobile_nav/mobile_nav.js

@@ -0,0 +1,77 @@
+import SideDrawer from '../side_drawer/side_drawer.vue'
+import Notifications from '../notifications/notifications.vue'
+import MobilePostStatusModal from '../mobile_post_status_modal/mobile_post_status_modal.vue'
+import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
+import GestureService from '../../services/gesture_service/gesture_service'
+
+const MobileNav = {
+  components: {
+    SideDrawer,
+    Notifications,
+    MobilePostStatusModal
+  },
+  data: () => ({
+    notificationsCloseGesture: undefined,
+    notificationsOpen: false
+  }),
+  created () {
+    this.notificationsCloseGesture = GestureService.swipeGesture(
+      GestureService.DIRECTION_RIGHT,
+      this.closeMobileNotifications,
+      50
+    )
+  },
+  computed: {
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    unseenNotifications () {
+      return unseenNotificationsFromStore(this.$store)
+    },
+    unseenNotificationsCount () {
+      return this.unseenNotifications.length
+    },
+    sitename () { return this.$store.state.instance.name }
+  },
+  methods: {
+    toggleMobileSidebar () {
+      this.$refs.sideDrawer.toggleDrawer()
+    },
+    openMobileNotifications () {
+      this.notificationsOpen = true
+    },
+    closeMobileNotifications () {
+      if (this.notificationsOpen) {
+        // make sure to mark notifs seen only when the notifs were open and not
+        // from close-calls.
+        this.notificationsOpen = false
+        this.markNotificationsAsSeen()
+      }
+    },
+    notificationsTouchStart (e) {
+      GestureService.beginSwipe(e, this.notificationsCloseGesture)
+    },
+    notificationsTouchMove (e) {
+      GestureService.updateSwipe(e, this.notificationsCloseGesture)
+    },
+    scrollToTop () {
+      window.scrollTo(0, 0)
+    },
+    logout () {
+      this.$router.replace('/main/public')
+      this.$store.dispatch('logout')
+    },
+    markNotificationsAsSeen () {
+      this.$refs.notifications.markAsSeen()
+    }
+  },
+  watch: {
+    $route () {
+      // handles closing notificaitons when you press any router-link on the
+      // notifications.
+      this.closeMobileNotifications()
+    }
+  }
+}
+
+export default MobileNav

src/components/mobile_nav/mobile_nav.vue

@@ -0,0 +1,140 @@
+<template>
+  <nav class='nav-bar container' id="nav">
+    <div class='mobile-inner-nav' @click="scrollToTop()">
+      <div class='item'>
+        <a href="#" class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()">
+          <i class="button-icon icon-menu"></i>
+        </a>
+        <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
+      </div>
+      <div class='item right'>
+        <a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="openMobileNotifications()">
+          <i class="button-icon icon-bell-alt"></i>
+          <div class="alert-dot" v-if="unseenNotificationsCount"></div>
+        </a>
+      </div>
+    </div>
+    <SideDrawer ref="sideDrawer" :logout="logout"/>
+    <div v-if="currentUser"
+      class="mobile-notifications-drawer"
+      :class="{ 'closed': !notificationsOpen }"
+      @touchstart="notificationsTouchStart"
+      @touchmove="notificationsTouchMove"
+    >
+      <div class="mobile-notifications-header">
+        <span class="title">{{$t('notifications.notifications')}}</span>
+        <a class="mobile-nav-button" @click.stop.prevent="closeMobileNotifications()">
+          <i class="button-icon icon-cancel"/>
+        </a>
+      </div>
+      <div v-if="currentUser" class="mobile-notifications">
+        <Notifications ref="notifications" noHeading="true"/>
+      </div>
+    </div>
+    <MobilePostStatusModal />
+  </nav>
+</template>
+
+<script src="./mobile_nav.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.mobile-inner-nav {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.mobile-nav-button {
+  display: flex;
+  justify-content: center;
+  width: 50px;
+  position: relative;
+  cursor: pointer;
+}
+
+.alert-dot {
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+  position: absolute;
+  left: calc(50% - 4px);
+  top: calc(50% - 4px);
+  margin-left: 6px;
+  margin-top: -6px;
+  background-color: $fallback--cRed;
+  background-color: var(--badgeNotification, $fallback--cRed);
+}
+
+.mobile-notifications-drawer {
+  width: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  box-shadow: var(--panelShadow);
+  transition-property: transform;
+  transition-duration: 0.25s;
+  transform: translateX(0);
+
+  &.closed {
+    transform: translateX(100%);
+  }
+}
+
+.mobile-notifications-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  position: absolute;
+  color: var(--topBarText);
+  background-color: $fallback--fg;
+  background-color: var(--topBar, $fallback--fg);
+  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+  box-shadow: var(--topBarShadow);
+
+  .title {
+    font-size: 1.3em;
+    margin-left: 0.6em;
+  }
+}
+
+.mobile-notifications {
+  margin-top: 50px;
+  width: 100vw;
+  height: calc(100vh - 50px);
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+
+  .notifications {
+    padding: 0;
+    border-radius: 0;
+    box-shadow: none;
+    .panel {
+      border-radius: 0;
+      margin: 0;
+      box-shadow: none;
+    }
+    .panel:after {
+      border-radius: 0;
+    }
+    .panel .panel-heading {
+      border-radius: 0;
+      box-shadow: none;
+    }
+  }
+}
+
+</style>

src/components/notifications/notifications.js

@@ -7,6 +7,9 @@ import {
 } from '../../services/notification_utils/notification_utils.js'
 
 const Notifications = {
+  props: [
+    'noHeading'
+  ],
   created () {
     const store = this.$store
     const credentials = store.state.users.currentUser.credentials

src/components/notifications/notifications.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="notifications">
     <div class="panel panel-default">
-      <div class="panel-heading">
+      <div v-if="!noHeading" class="panel-heading">
         <div class="title">
           {{$t('notifications.notifications')}}
           <span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span>

src/components/post_status_form/post_status_form.js

@@ -1,5 +1,6 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
+import ScopeSelector from '../scope_selector/scope_selector.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import Completion from '../../services/completion/completion.js'
@@ -30,6 +31,7 @@ const PostStatusForm = {
   ],
   components: {
     MediaUpload,
+    ScopeSelector,
     EmojiInput
   },
   mounted () {
@@ -80,14 +82,6 @@ const PostStatusForm = {
     }
   },
   computed: {
-    vis () {
-      return {
-        public: { selected: this.newStatus.visibility === 'public' },
-        unlisted: { selected: this.newStatus.visibility === 'unlisted' },
-        private: { selected: this.newStatus.visibility === 'private' },
-        direct: { selected: this.newStatus.visibility === 'direct' }
-      }
-    },
     candidates () {
       const firstchar = this.textAtCaret.charAt(0)
       if (firstchar === '@') {
@@ -135,6 +129,15 @@ const PostStatusForm = {
     users () {
       return this.$store.state.users.users
     },
+    userDefaultScope () {
+      return this.$store.state.users.currentUser.default_scope
+    },
+    showAllScopes () {
+      const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined'
+            ? this.$store.state.instance.minimalScopesMode
+            : this.$store.state.config.minimalScopesMode
+      return !minimalScopesMode
+    },
     emoji () {
       return this.$store.state.instance.emoji || []
     },
@@ -159,8 +162,8 @@ const PostStatusForm = {
     isOverLengthLimit () {
       return this.hasStatusLengthLimit && (this.charactersLeft < 0)
     },
-    scopeOptionsEnabled () {
+    minimalScopesMode () {
-      return this.$store.state.instance.scopeOptionsEnabled
+      return this.$store.state.instance.minimalScopesMode
     },
     alwaysShowSubject () {
       if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') {
@@ -168,7 +171,7 @@ const PostStatusForm = {
       } else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
         return this.$store.state.instance.alwaysShowSubjectInput
       } else {
-        return this.$store.state.instance.scopeOptionsEnabled
+        return true
       }
     },
     formattingOptionsEnabled () {

src/components/post_status_form/post_status_form.vue

@@ -48,12 +48,12 @@
           </label>
         </span>
 
-        <div v-if="scopeOptionsEnabled">
+        <scope-selector
-          <i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct" :title="$t('post_status.scope.direct')"></i>
+          :showAll="showAllScopes"
-          <i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private" :title="$t('post_status.scope.private')"></i>
+          :userDefault="userDefaultScope"
-          <i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted" :title="$t('post_status.scope.unlisted')"></i>
+          :originalScope="copyMessageScope"
-          <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public" :title="$t('post_status.scope.public')"></i>
+          :initialScope="newStatus.visibility"
-        </div>
+          :onScopeChange="changeVis"/>
       </div>
     </div>
     <div class="autocomplete-panel" v-if="candidates">

src/components/scope_selector/scope_selector.js

@@ -0,0 +1,54 @@
+const ScopeSelector = {
+  props: [
+    'showAll',
+    'userDefault',
+    'originalScope',
+    'initialScope',
+    'onScopeChange'
+  ],
+  data () {
+    return {
+      currentScope: this.initialScope
+    }
+  },
+  computed: {
+    showNothing () {
+      return !this.showPublic && !this.showUnlisted && !this.showPrivate && !this.showDirect
+    },
+    showPublic () {
+      return this.originalScope !== 'direct' && this.shouldShow('public')
+    },
+    showUnlisted () {
+      return this.originalScope !== 'direct' && this.shouldShow('unlisted')
+    },
+    showPrivate () {
+      return this.originalScope !== 'direct' && this.shouldShow('private')
+    },
+    showDirect () {
+      return this.shouldShow('direct')
+    },
+    css () {
+      return {
+        public: {selected: this.currentScope === 'public'},
+        unlisted: {selected: this.currentScope === 'unlisted'},
+        private: {selected: this.currentScope === 'private'},
+        direct: {selected: this.currentScope === 'direct'}
+      }
+    }
+  },
+  methods: {
+    shouldShow (scope) {
+      return this.showAll ||
+        this.currentScope === scope ||
+        this.originalScope === scope ||
+        this.userDefault === scope ||
+        scope === 'direct'
+    },
+    changeVis (scope) {
+      this.currentScope = scope
+      this.onScopeChange && this.onScopeChange(scope)
+    }
+  }
+}
+
+export default ScopeSelector

src/components/scope_selector/scope_selector.vue

@@ -0,0 +1,30 @@
+<template>
+<div v-if="!showNothing">
+  <i class="icon-mail-alt"
+     :class="css.direct"
+     :title="$t('post_status.scope.direct')"
+     v-if="showDirect"
+     @click="changeVis('direct')">
+  </i>
+  <i class="icon-lock"
+     :class="css.private"
+     :title="$t('post_status.scope.private')"
+     v-if="showPrivate"
+     v-on:click="changeVis('private')">
+  </i>
+  <i class="icon-lock-open-alt"
+     :class="css.unlisted"
+     :title="$t('post_status.scope.unlisted')"
+     v-if="showUnlisted"
+     @click="changeVis('unlisted')">
+  </i>
+  <i class="icon-globe"
+     :class="css.public"
+     :title="$t('post_status.scope.public')"
+     v-if="showPublic"
+     @click="changeVis('public')">
+  </i>
+</div>
+</template>
+
+<script src="./scope_selector.js"></script>

src/components/settings/settings.js

@@ -70,13 +70,18 @@ const settings = {
       alwaysShowSubjectInputLocal: typeof user.alwaysShowSubjectInput === 'undefined'
         ? instance.alwaysShowSubjectInput
         : user.alwaysShowSubjectInput,
-      alwaysShowSubjectInputDefault: instance.alwaysShowSubjectInput,
+      alwaysShowSubjectInputDefault: this.$t('settings.values.' + instance.alwaysShowSubjectInput),
 
       scopeCopyLocal: typeof user.scopeCopy === 'undefined'
         ? instance.scopeCopy
         : user.scopeCopy,
       scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),
 
+      minimalScopesModeLocal: typeof user.minimalScopesMode === 'undefined'
+        ? instance.minimalScopesMode
+        : user.minimalScopesMode,
+      minimalScopesModeDefault: this.$t('settings.values.' + instance.minimalScopesMode),
+
       stopGifs: user.stopGifs,
       webPushNotificationsLocal: user.webPushNotifications,
       loopVideoSilentOnlyLocal: user.loopVideosSilentOnly,
@@ -200,6 +205,9 @@ const settings = {
     postContentTypeLocal (value) {
       this.$store.dispatch('setOption', { name: 'postContentType', value })
     },
+    minimalScopesModeLocal (value) {
+      this.$store.dispatch('setOption', { name: 'minimalScopesMode', value })
+    },
     stopGifs (value) {
       this.$store.dispatch('setOption', { name: 'stopGifs', value })
     },

src/components/settings/settings.vue

@@ -118,6 +118,12 @@
                 </label>
               </div>
             </li>
+            <li>
+              <input type="checkbox" id="minimalScopesMode" v-model="minimalScopesModeLocal">
+              <label for="minimalScopesMode">
+                {{$t('settings.minimal_scopes_mode')}} {{$t('settings.instance_default', { value: minimalScopesModeDefault })}}
+              </label>
+            </li>
           </ul>
         </div>
 

src/components/side_drawer/side_drawer.vue

@@ -21,11 +21,6 @@
             {{ $t("login.login") }}
           </router-link>
         </li>
-        <li v-if="currentUser" @click="toggleDrawer">
-          <router-link :to="{ name: 'notifications', params: { username: currentUser.screen_name } }">
-            {{ $t("notifications.notifications") }} {{ unseenNotificationsCount > 0 ? `(${unseenNotificationsCount})` : '' }}
-          </router-link>
-        </li>
         <li v-if="currentUser" @click="toggleDrawer">
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
             {{ $t("nav.dms") }}

src/components/status/status.js

@@ -251,6 +251,12 @@ const Status = {
     },
     maxThumbnails () {
       return this.$store.state.config.maxThumbnails
+    },
+    contentHtml () {
+      if (!this.status.summary_html) {
+        return this.status.statusnet_html
+      }
+      return this.status.summary_html + '<br />' + this.status.statusnet_html
     }
   },
   components: {

src/components/status/status.vue

@@ -98,16 +98,16 @@
           </div>
 
           <div class="status-content-wrapper" :class="{ 'tall-status': !showingLongSubject }" v-if="longSubject">
-            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">Show more</a>
+            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">{{$t("general.show_more")}}</a>
-            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml"></div>
-            <a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">Show less</a>
+            <a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">{{$t("general.show_less")}}</a>
           </div>
           <div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper" v-else>
-            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">Show more</a>
+            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
-            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html" v-if="!hideSubjectStatus"></div>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml" v-if="!hideSubjectStatus"></div>
             <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary_html" v-else></div>
-            <a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">Show more</a>
+            <a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
-            <a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">Show less</a>
+            <a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">{{$t("general.show_less")}}</a>
           </div>
 
           <div v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)" class="attachments media-body">

src/components/user_settings/user_settings.js

@@ -4,6 +4,7 @@ import get from 'lodash/get'
 import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import ImageCropper from '../image_cropper/image_cropper.vue'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
+import ScopeSelector from '../scope_selector/scope_selector.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
@@ -67,6 +68,7 @@ const UserSettings = {
   },
   components: {
     StyleSwitcher,
+    ScopeSelector,
     TabSwitcher,
     ImageCropper,
     BlockList,
@@ -80,8 +82,8 @@ const UserSettings = {
     pleromaBackend () {
       return this.$store.state.instance.pleromaBackend
     },
-    scopeOptionsEnabled () {
+    minimalScopesMode () {
-      return this.$store.state.instance.scopeOptionsEnabled
+      return this.$store.state.instance.minimalScopesMode
     },
     vis () {
       return {

src/components/user_settings/user_settings.vue

@@ -38,13 +38,13 @@
               <input type="checkbox" v-model="newLocked" id="account-locked">
               <label for="account-locked">{{$t('settings.lock_account_description')}}</label>
             </p>
-            <div v-if="scopeOptionsEnabled">
+            <div>
               <label for="default-vis">{{$t('settings.default_vis')}}</label>
               <div id="default-vis" class="visibility-tray">
-                <i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct" :title="$t('post_status.scope.direct')" ></i>
+                <scope-selector
-                <i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private" :title="$t('post_status.scope.private')"></i>
+                  :showAll="true"
-                <i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted" :title="$t('post_status.scope.unlisted')"></i>
+                  :userDefault="newDefaultScope"
-                <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public" :title="$t('post_status.scope.public')"></i>
+                  :onScopeChange="changeVis"/>
               </div>
             </div>
             <p>

src/i18n/en.json

@@ -20,7 +20,9 @@
     "submit": "Submit",
     "more": "More",
     "generic_error": "An error occured",
-    "optional": "optional"
+    "optional": "optional",
+    "show_more": "Show more",
+    "show_less": "Show less"
   },
   "image_cropper": {
     "crop_picture": "Crop picture",
@@ -215,6 +217,7 @@
     "saving_ok": "Settings saved",
     "security_tab": "Security",
     "scope_copy": "Copy scope when replying (DMs are always copied)",
+    "minimal_scopes_mode": "Minimize post scope selection options",
     "set_new_avatar": "Set new avatar",
     "set_new_profile_background": "Set new profile background",
     "set_new_profile_banner": "Set new profile banner",

src/i18n/oc.json

@@ -25,6 +25,7 @@
   "image_cropper": {
      "crop_picture": "Talhar l’imatge",
      "save": "Salvar",
+     "save_without_cropping": "Salvar sens talhada",
      "cancel": "Anullar"
   },
   "login": {
@@ -152,6 +153,7 @@
     "general": "General",
     "hide_attachments_in_convo": "Rescondre las pèças juntas dins las conversacions",
     "hide_attachments_in_tl": "Rescondre las pèças juntas",
+    "hide_muted_posts": "Rescondre las publicacions del monde rescondut",
     "max_thumbnails": "Nombre maximum de vinhetas per publicacion",
     "hide_isp": "Amagar lo panèl especial instància",
     "preload_images": "Precargar los imatges",

src/i18n/pl.json

@@ -2,48 +2,114 @@
   "chat": {
     "title": "Czat"
   },
+  "features_panel": {
+    "chat": "Czat",
+    "gopher": "Gopher",
+    "media_proxy": "Proxy mediów",
+    "scope_options": "Ustawienia zakresu",
+    "text_limit": "Limit tekstu",
+    "title": "Funkcje",
+    "who_to_follow": "Propozycje obserwacji"
+  },
   "finder": {
     "error_fetching_user": "Błąd przy pobieraniu profilu",
     "find_user": "Znajdź użytkownika"
   },
   "general": {
     "apply": "Zastosuj",
-    "submit": "Wyślij"
+    "submit": "Wyślij",
+    "more": "Więcej",
+    "generic_error": "Wystąpił błąd",
+    "optional": "nieobowiązkowe"
+  },
+  "image_cropper": {
+    "crop_picture": "Przytnij obrazek",
+    "save": "Zapisz",
+    "save_without_cropping": "Zapisz bez przycinania",
+    "cancel": "Anuluj"
   },
   "login": {
     "login": "Zaloguj",
+    "description": "Zaloguj używając OAuth",
     "logout": "Wyloguj",
     "password": "Hasło",
     "placeholder": "n.p. lain",
     "register": "Zarejestruj",
-    "username": "Użytkownik"
+    "username": "Użytkownik",
+    "hint": "Zaloguj się, aby dołączyć do dyskusji"
+  },
+  "media_modal": {
+    "previous": "Poprzednie",
+    "next": "Następne"
   },
   "nav": {
+    "about": "O nas",
+    "back": "Wróć",
     "chat": "Lokalny czat",
+    "friend_requests": "Prośby o możliwość obserwacji",
     "mentions": "Wzmianki",
+    "dms": "Wiadomości prywatne",
     "public_tl": "Publiczna oś czasu",
     "timeline": "Oś czasu",
-    "twkn": "Cała znana sieć"
+    "twkn": "Cała znana sieć",
+    "user_search": "Wyszukiwanie użytkowników",
+    "who_to_follow": "Sugestie obserwacji",
+    "preferences": "Preferencje"
   },
   "notifications": {
-    "favorited_you": "dodał twój status do ulubionych",
+    "broken_favorite": "Nieznany status, szukam go…",
+    "favorited_you": "dodał(-a) twój status do ulubionych",
     "followed_you": "obserwuje cię",
+    "load_older": "Załaduj starsze powiadomienia",
     "notifications": "Powiadomienia",
     "read": "Przeczytane!",
-    "repeated_you": "powtórzył twój status"
+    "repeated_you": "powtórzył(-a) twój status",
+    "no_more_notifications": "Nie masz więcej powiadomień"
   },
   "post_status": {
+    "new_status": "Dodaj nowy status",
+    "account_not_locked_warning": "Twoje konto nie jest {0}. Każdy może cię zaobserwować aby zobaczyć wpisy tylko dla obserwujących.",
+    "account_not_locked_warning_link": "zablokowane",
+    "attachments_sensitive": "Oznacz załączniki jako wrażliwe",
+    "content_type": {
+      "text/plain": "Czysty tekst",
+      "text/html": "HTML",
+      "text/markdown": "Markdown"
+    },
+    "content_warning": "Temat (nieobowiązkowy)",
     "default": "Właśnie wróciłem z kościoła",
-    "posting": "Wysyłanie"
+    "direct_warning": "Ten wpis zobaczą tylko osoby, o których wspomniałeś(-aś).",
+    "posting": "Wysyłanie",
+    "scope": {
+      "direct": "Bezpośredni – Tylko dla wspomnianych użytkowników",
+      "private": "Tylko dla obserwujących – Umieść dla osób, które cię obserwują",
+      "public": "Publiczny – Umieść na publicznych osiach czasu",
+      "unlisted": "Niewidoczny – Nie umieszczaj na publicznych osiach czasu"
+    }
   },
   "registration": {
     "bio": "Bio",
-    "email": "Email",
+    "email": "E-mail",
     "fullname": "Wyświetlana nazwa profilu",
     "password_confirm": "Potwierdzenie hasła",
-    "registration": "Rejestracja"
+    "registration": "Rejestracja",
+    "token": "Token zaproszenia",
+    "captcha": "CAPTCHA",
+    "new_captcha": "Naciśnij na obrazek, aby dostać nowy kod captcha",
+    "username_placeholder": "np. lain",
+    "fullname_placeholder": "np. Lain Iwakura",
+    "bio_placeholder": "e.g.\nCześć, jestem Lain.\nJestem dziewczynką z anime żyjącą na peryferiach Japonii. Możesz znać mnie z Wired.",
+    "validations": {
+      "username_required": "nie może być pusta",
+      "fullname_required": "nie może być pusta",
+      "email_required": "nie może być pusty",
+      "password_required": "nie może być puste",
+      "password_confirmation_required": "nie może być puste",
+      "password_confirmation_match": "musi być takie jak hasło"
+    }
   },
   "settings": {
+    "app_name": "Nazwa aplikacji",
     "attachmentRadius": "Załączniki",
     "attachments": "Załączniki",
     "autoload": "Włącz automatyczne ładowanie po przewinięciu do końca strony",
@@ -52,6 +118,7 @@
     "avatarRadius": "Awatary",
     "background": "Tło",
     "bio": "Bio",
+    "blocks_tab": "Bloki",
     "btnRadius": "Przyciski",
     "cBlue": "Niebieski (odpowiedz, obserwuj)",
     "cGreen": "Zielony (powtórzenia)",
@@ -59,15 +126,21 @@
     "cRed": "Czerwony (anuluj)",
     "change_password": "Zmień hasło",
     "change_password_error": "Podczas zmiany hasła wystąpił problem.",
-    "changed_password": "Hasło zmienione poprawnie!",
+    "changed_password": "Pomyślnie zmieniono hasło!",
+    "collapse_subject": "Zwijaj posty z tematami",
+    "composing": "Pisanie",
     "confirm_new_password": "Potwierdź nowe hasło",
     "current_avatar": "Twój obecny awatar",
     "current_password": "Obecne hasło",
     "current_profile_banner": "Twój obecny banner profilu",
+    "data_import_export_tab": "Import/eksport danych",
+    "default_vis": "Domyślny zakres widoczności",
     "delete_account": "Usuń konto",
     "delete_account_description": "Trwale usuń konto i wszystkie posty.",
     "delete_account_error": "Wystąpił problem z usuwaniem twojego konta. Jeżeli problem powtarza się, poinformuj administratora swojej instancji.",
     "delete_account_instructions": "Wprowadź swoje hasło w poniższe pole aby potwierdzić usunięcie konta.",
+    "avatar_size_instruction": "Zalecany minimalny rozmiar awatarów to 150x150 pikseli.",
+    "export_theme": "Zapisz motyw",
     "filtering": "Filtrowanie",
     "filtering_explanation": "Wszystkie statusy zawierające te słowa będą wyciszone. Jedno słowo na linijkę.",
     "follow_export": "Eksport obserwowanych",
@@ -77,14 +150,49 @@
     "follow_import_error": "Błąd przy importowaniu obserwowanych",
     "follows_imported": "Obserwowani zaimportowani! Przetwarzanie może trochę potrwać.",
     "foreground": "Pierwszy plan",
-    "hide_attachments_in_convo": "Ukryj załączniki w rozmowach",
+    "general": "Ogólne",
-    "hide_attachments_in_tl": "Ukryj załączniki w osi czasu",
+    "hide_attachments_in_convo": "Ukrywaj załączniki w rozmowach",
+    "hide_attachments_in_tl": "Ukrywaj załączniki w osi czasu",
+    "hide_muted_posts": "Ukrywaj wpisy wyciszonych użytkowników",
+    "max_thumbnails": "Maksymalna liczba miniatur w poście",
+    "hide_isp": "Ukryj panel informacji o instancji",
+    "preload_images": "Ładuj wstępnie obrazy",
+    "use_one_click_nsfw": "Otwieraj załączniki NSFW jednym kliknięciem",
+    "hide_post_stats": "Ukrywaj statysyki postów (np. liczbę polubień)",
+    "hide_user_stats": "Ukrywaj statysyki użytkowników (np. liczbę obserwujących)",
+    "hide_filtered_statuses": "Ukrywaj filtrowane statusy",
     "import_followers_from_a_csv_file": "Importuj obserwowanych z pliku CSV",
+    "import_theme": "Załaduj motyw",
     "inputRadius": "Pola tekstowe",
+    "checkboxRadius": "Pola wyboru",
+    "instance_default": "(domyślny: {value})",
+    "instance_default_simple": "(domyślny)",
+    "interface": "Interfejs",
+    "interfaceLanguage": "Język interfejsu",
+    "invalid_theme_imported": "Wybrany plik nie jest obsługiwanym motywem Pleromy. Nie dokonano zmian w twoim motywie.",
+    "limited_availability": "Niedostępne w twojej przeglądarce",
     "links": "Łącza",
+    "lock_account_description": "Ogranicz swoje konto dla zatwierdzonych obserwowanych",
+    "loop_video": "Zapętlaj filmy",
+    "loop_video_silent_only": "Zapętlaj tylko filmy bez dźwięku (np. mastodonowe „gify”)",
+    "mutes_tab": "Wyciszenia",
+    "play_videos_in_modal": "Odtwarzaj filmy bezpośrednio w przeglądarce mediów",
+    "use_contain_fit": "Nie przycinaj załączników na miniaturach",
     "name": "Imię",
     "name_bio": "Imię i bio",
     "new_password": "Nowe hasło",
+    "notification_visibility": "Rodzaje powiadomień do wyświetlania",
+    "notification_visibility_follows": "Obserwacje",
+    "notification_visibility_likes": "Ulubione",
+    "notification_visibility_mentions": "Wzmianki",
+    "notification_visibility_repeats": "Powtórzenia",
+    "no_rich_text_description": "Usuwaj formatowanie ze wszystkich postów",
+    "no_blocks": "Bez blokad",
+    "no_mutes": "Bez wyciszeń",
+    "hide_follows_description": "Nie pokazuj kogo obserwuję",
+    "hide_followers_description": "Nie pokazuj kto mnie obserwuje",
+    "show_admin_badge": "Pokazuj odznakę Administrator na moim profilu",
+    "show_moderator_badge": "Pokazuj odznakę Moderator na moim profilu",
     "nsfw_clickthrough": "Włącz domyślne ukrywanie załączników o treści nieprzyzwoitej (NSFW)",
     "oauth_tokens": "Tokeny OAuth",
     "token": "Token",
@@ -92,47 +200,235 @@
     "valid_until": "Ważne do",
     "revoke_token": "Odwołać",
     "panelRadius": "Panele",
+    "pause_on_unfocused": "Wstrzymuj strumieniowanie kiedy karta nie jest aktywna",
     "presets": "Gotowe motywy",
     "profile_background": "Tło profilu",
     "profile_banner": "Banner profilu",
+    "profile_tab": "Profil",
     "radii_help": "Ustaw zaokrąglenie krawędzi interfejsu (w pikselach)",
+    "replies_in_timeline": "Odpowiedzi na osi czasu",
     "reply_link_preview": "Włącz dymek z podglądem postu po najechaniu na znak odpowiedzi",
+    "reply_visibility_all": "Pokazuj wszystkie odpowiedzi",
+    "reply_visibility_following": "Pokazuj tylko odpowiedzi skierowane do mnie i osób które obserwuję",
+    "reply_visibility_self": "Pokazuj tylko odpowiedzi skierowane do mnie",
+    "saving_err": "Nie udało się zapisać ustawień",
+    "saving_ok": "Zapisano ustawienia",
+    "security_tab": "Bezpieczeństwo",
+    "scope_copy": "Kopiuj zakres podczas odpowiadania (DM-y zawsze są kopiowane)",
     "set_new_avatar": "Ustaw nowy awatar",
     "set_new_profile_background": "Ustaw nowe tło profilu",
     "set_new_profile_banner": "Ustaw nowy banner profilu",
     "settings": "Ustawienia",
+    "subject_input_always_show": "Zawsze pokazuj pole tematu",
+    "subject_line_behavior": "Kopiuj temat podczas odpowiedzi",
+    "subject_line_email": "Jak w mailach – „re: temat”",
+    "subject_line_mastodon": "Jak na Mastodonie – po prostu kopiuj",
+    "subject_line_noop": "Nie kopiuj",
+    "post_status_content_type": "Post status content type",
     "stop_gifs": "Odtwarzaj GIFy po najechaniu kursorem",
-    "streaming": "Włącz automatycznie strumieniowanie nowych postów gdy na początku strony",
+    "streaming": "Włącz automatycznie strumieniowanie nowych postów gdy jesteś na początku strony",
     "text": "Tekst",
     "theme": "Motyw",
     "theme_help": "Użyj kolorów w notacji szesnastkowej (#rrggbb), by stworzyć swój motyw.",
+    "theme_help_v2_1": "Możesz też zastąpić kolory i widoczność poszczególnych komponentów przełączając pola wyboru, użyj „Wyczyść wszystko” aby usunąć wszystkie zastąpienia.",
+    "theme_help_v2_2": "Ikony pod niektórych wpisami są wskaźnikami kontrastu pomiędzy tłem a tekstem, po najechaniu na nie otrzymasz szczegółowe informacje. Zapamiętaj, że jeżeli używasz przezroczystości, wskaźniki pokazują najgorszy możliwy przypadek.",
     "tooltipRadius": "Etykiety/alerty",
-    "user_settings": "Ustawienia użytkownika"
+    "upload_a_photo": "Wyślij zdjęcie",
+    "user_settings": "Ustawienia użytkownika",
+    "values": {
+      "false": "nie",
+      "true": "tak"
+    },
+    "notifications": "Powiadomienia",
+    "enable_web_push_notifications": "Włącz powiadomienia push",
+    "style": {
+      "switcher": {
+        "keep_color": "Zachowaj kolory",
+        "keep_shadows": "Zachowaj cienie",
+        "keep_opacity": "Zachowaj widoczność",
+        "keep_roundness": "Zachowaj zaokrąglenie",
+        "keep_fonts": "Zachowaj czcionki",
+        "save_load_hint": "Opcje „zachowaj” pozwalają na pozostanie przy obecnych opcjach po wybraniu lub załadowaniu motywu, jak i przechowywanie ich podczas eksportowania motywu. Jeżeli wszystkie są odznaczone, eksportowanie motywu spowoduje zapisanie wszystkiego.",
+        "reset": "Wyzeruj",
+        "clear_all": "Wyczyść wszystko",
+        "clear_opacity": "Wyczyść widoczność"
+      },
+      "common": {
+        "color": "Kolor",
+        "opacity": "Widoczność",
+        "contrast": {
+          "hint": "Współczynnik kontrastu wynosi {ratio}, {level} {context}",
+          "level": {
+            "aa": "spełnia wymogi poziomu AA (minimalne)",
+            "aaa": "spełnia wymogi poziomu AAA (zalecane)",
+            "bad": "nie spełnia żadnych wymogów dostępności"
+          },
+          "context": {
+            "18pt": "dla dużego tekstu (18pt+)",
+            "text": "dla tekstu"
+          }
+        }
+      },
+      "common_colors": {
+        "_tab_label": "Ogólne",
+        "main": "Ogólne kolory",
+        "foreground_hint": "Zajrzyj do karty „Zaawansowane”, aby uzyskać dokładniejszą kontrolę",
+        "rgbo": "Ikony, wyróżnienia, odznaki"
+      },
+      "advanced_colors": {
+        "_tab_label": "Zaawansowane",
+        "alert": "Tło alertu",
+        "alert_error": "Błąd",
+        "badge": "Tło odznaki",
+        "badge_notification": "Powiadomienie",
+        "panel_header": "Nagłówek panelu",
+        "top_bar": "Górny pasek",
+        "borders": "Granice",
+        "buttons": "Przyciski",
+        "inputs": "Pola wejścia",
+        "faint_text": "Zanikający tekst"
+      },
+      "radii": {
+        "_tab_label": "Zaokrąglenie"
+      },
+      "shadows": {
+        "_tab_label": "Cień i podświetlenie",
+        "component": "Komponent",
+        "override": "Zastąp",
+        "shadow_id": "Cień #{value}",
+        "blur": "Rozmycie",
+        "spread": "Szerokość",
+        "inset": "Inset",
+        "hint": "Możesz też używać --zmiennych jako kolorów, aby wykorzystać zmienne CSS3. Pamiętaj, że ustawienie widoczności nie będzie wtedy działać.",
+        "filter_hint": {
+          "always_drop_shadow": "Ostrzeżenie, ten cień zawsze używa {0} jeżeli to obsługiwane przez przeglądarkę.",
+          "drop_shadow_syntax": "{0} nie obsługuje parametru {1} i słowa kluczowego {2}.",
+          "avatar_inset": "Pamiętaj że użycie jednocześnie cieni inset i nie inset na awatarach może daćnieoczekiwane wyniki z przezroczystymi awatarami.",
+          "spread_zero": "Cienie o ujemnej szerokości będą widoczne tak, jakby wynosiła ona zero",
+          "inset_classic": "Cienie inset będą używały {0}"
+        },
+        "components": {
+          "panel": "Panel",
+          "panelHeader": "Nagłówek panelu",
+          "topBar": "Górny pasek",
+          "avatar": "Awatar użytkownika (w widoku profilu)",
+          "avatarStatus": "Awatar użytkownika (w widoku wpisu)",
+          "popup": "Wyskakujące okna i podpowiedzi",
+          "button": "Przycisk",
+          "buttonHover": "Przycisk (po najechaniu)",
+          "buttonPressed": "Przycisk (naciśnięty)",
+          "buttonPressedHover": "Przycisk(naciśnięty+najechany)",
+          "input": "Pole wejścia"
+        }
+      },
+      "fonts": {
+        "_tab_label": "Czcionki",
+        "help": "Wybierz czcionkę używaną przez elementy UI. Jeżeli wybierzesz niestandardową, musisz wpisać dokładnie tę nazwę, pod którą pojawia się w systemie.",
+        "components": {
+          "interface": "Interfejs",
+          "input": "Pola wejścia",
+          "post": "Tekst postu",
+          "postCode": "Tekst o stałej szerokości znaków w sformatowanym poście"
+        },
+        "family": "Nazwa czcionki",
+        "size": "Rozmiar (w pikselach)",
+        "weight": "Grubość",
+        "custom": "Niestandardowa"
+      },
+      "preview": {
+        "header": "Podgląd",
+        "content": "Zawartość",
+        "error": "Przykładowy błąd",
+        "button": "Przycisk",
+        "text": "Trochę więcej {0} i {1}",
+        "mono": "treści",
+        "input": "Właśnie wróciłem z kościoła",
+        "faint_link": "pomocny podręcznik",
+        "fine_print": "Przeczytaj nasz {0}, aby nie nauczyć się niczego przydatnego!",
+        "header_faint": "W porządku",
+        "checkbox": "Przeleciałem przez zasady użytkowania",
+        "link": "i fajny mały odnośnik"
+      }
+    },
+    "version": {
+      "title": "Wersja",
+      "backend_version": "Wersja back-endu",
+      "frontend_version": "Wersja front-endu"
+    }
   },
   "timeline": {
     "collapse": "Zwiń",
     "conversation": "Rozmowa",
     "error_fetching": "Błąd pobierania",
     "load_older": "Załaduj starsze statusy",
+    "no_retweet_hint": "Wpis oznaczony jako tylko dla obserwujących lub bezpośredni nie może zostać powtórzony",
     "repeated": "powtórzono",
     "show_new": "Pokaż nowe",
-    "up_to_date": "Na bieżąco"
+    "up_to_date": "Na bieżąco",
+    "no_more_statuses": "Brak kolejnych statusów",
+    "no_statuses": "Brak statusów"
+  },
+  "status": {
+    "reply_to": "Odpowiedź dla",
+    "replies_list": "Odpowiedzi:"
   },
   "user_card": {
+    "approve": "Przyjmij",
     "block": "Zablokuj",
     "blocked": "Zablokowany!",
+    "deny": "Odrzuć",
+    "favorites": "Ulubione",
     "follow": "Obserwuj",
+    "follow_sent": "Wysłano prośbę!",
+    "follow_progress": "Wysyłam prośbę…",
+    "follow_again": "Wysłać prośbę ponownie?",
+    "follow_unfollow": "Przestań obserwować",
     "followees": "Obserwowani",
     "followers": "Obserwujący",
     "following": "Obserwowany!",
     "follows_you": "Obserwuje cię!",
+    "its_you": "To ty!",
+    "media": "Media",
     "mute": "Wycisz",
-    "muted": "Wyciszony",
+    "muted": "Wyciszony(-a)",
     "per_day": "dziennie",
     "remote_follow": "Zdalna obserwacja",
-    "statuses": "Statusy"
+    "statuses": "Statusy",
+    "unblock": "Odblokuj",
+    "unblock_progress": "Odblokowuję…",
+    "block_progress": "Blokuję…",
+    "unmute": "Cofnij wyciszenie",
+    "unmute_progress": "Cofam wyciszenie…",
+    "mute_progress": "Wyciszam…"
   },
   "user_profile": {
-    "timeline_title": "Oś czasu użytkownika"
+    "timeline_title": "Oś czasu użytkownika",
+    "profile_does_not_exist": "Przepraszamy, ten profil nie istnieje.",
+    "profile_loading_error": "Przepraszamy, wystąpił błąd podczas ładowania tego profilu."
+  },
+  "who_to_follow": {
+    "more": "Więcej",
+    "who_to_follow": "Propozycje obserwacji"
+  },
+  "tool_tip": {
+    "media_upload": "Wyślij media",
+    "repeat": "Powtórz",
+    "reply": "Odpowiedz",
+    "favorite": "Dodaj do ulubionych",
+    "user_settings": "Ustawienia użytkownika"
+  },
+  "upload":{
+    "error": {
+      "base": "Wysyłanie nie powiodło się.",
+      "file_too_big": "Zbyt duży plik [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
+      "default": "Spróbuj ponownie później"
+    },
+    "file_size_units": {
+      "B": "B",
+      "KiB": "KiB",
+      "MiB": "MiB",
+      "GiB": "GiB",
+      "TiB": "TiB"
+    }
   }
-}
+}

src/i18n/ru.json

@@ -111,6 +111,8 @@
     "import_theme": "Загрузить Тему",
     "inputRadius": "Поля ввода",
     "checkboxRadius": "Чекбоксы",
+    "instance_default": "(по умолчанию: {value})",
+    "instance_default_simple": "(по умолчанию)",
     "interface": "Интерфейс",
     "interfaceLanguage": "Язык интерфейса",
     "limited_availability": "Не доступно в вашем браузере",
@@ -149,7 +151,11 @@
     "reply_visibility_all": "Показывать все ответы",
     "reply_visibility_following": "Показывать только ответы мне и тех на кого я подписан",
     "reply_visibility_self": "Показывать только ответы мне",
+    "saving_err": "Не удалось сохранить настройки",
+    "saving_ok": "Сохранено",
     "security_tab": "Безопасность",
+    "scope_copy": "Копировать видимость поста при ответе (всегда включено для Личных Сообщений)",
+    "minimal_scopes_mode": "Минимизировать набор опций видимости поста",
     "set_new_avatar": "Загрузить новый аватар",
     "set_new_profile_background": "Загрузить новый фон профиля",
     "set_new_profile_banner": "Загрузить новый баннер профиля",
@@ -164,6 +170,10 @@
     "theme_help_v2_2": "Под некоторыми полями ввода это идикаторы контрастности, наведите на них мышью чтобы узнать больше. Приспользовании прозрачности контраст расчитывается для наихудшего варианта.",
     "tooltipRadius": "Всплывающие подсказки/уведомления",
     "user_settings": "Настройки пользователя",
+    "values": {
+      "false": "нет",
+      "true": "да"
+    },
     "style": {
       "switcher": {
         "keep_color": "Оставить цвета",

src/modules/config.js

@@ -33,7 +33,8 @@ const defaultState = {
   scopeCopy: undefined, // instance default
   subjectLineBehavior: undefined, // instance default
   alwaysShowSubjectInput: undefined, // instance default
-  postContentType: undefined // instance default
+  postContentType: undefined, // instance default
+  minimalScopesMode: undefined // instance default
 }
 
 const config = {

src/modules/instance.js

@@ -15,7 +15,6 @@ const defaultState = {
   redirectRootNoLogin: '/main/all',
   redirectRootLogin: '/main/friends',
   showInstanceSpecificPanel: false,
-  scopeOptionsEnabled: true,
   formattingOptionsEnabled: false,
   alwaysShowSubjectInput: true,
   hideMutedPosts: false,
@@ -32,6 +31,7 @@ const defaultState = {
   vapidPublicKey: undefined,
   noAttachmentLinks: false,
   showFeaturesPanel: true,
+  minimalScopesMode: false,
 
   // Nasty stuff
   pleromaBackend: true,

src/modules/interface.js

@@ -11,7 +11,8 @@ const defaultState = {
       window.CSS.supports('filter', 'drop-shadow(0 0)') ||
       window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
     )
-  }
+  },
+  mobileLayout: false
 }
 
 const interfaceMod = {
@@ -31,6 +32,9 @@ const interfaceMod = {
     },
     setNotificationPermission (state, permission) {
       state.notificationPermission = permission
+    },
+    setMobileLayout (state, value) {
+      state.mobileLayout = value
     }
   },
   actions: {
@@ -42,6 +46,10 @@ const interfaceMod = {
     },
     setNotificationPermission ({ commit }, permission) {
       commit('setNotificationPermission', permission)
+    },
+    setMobileLayout ({ commit }, value) {
+      console.log('setMobileLayout called')
+      commit('setMobileLayout', value)
     }
   }
 }

src/modules/statuses.js

@@ -123,7 +123,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
 
   const maxNew = statuses.length > 0 ? maxBy(statuses, 'id').id : 0
   const minNew = statuses.length > 0 ? minBy(statuses, 'id').id : 0
-  const newer = timeline && maxNew > timelineObject.maxId && statuses.length > 0
+  const newer = timeline && (maxNew > timelineObject.maxId || timelineObject.maxId === 0) && statuses.length > 0
   const older = timeline && (minNew < timelineObject.minId || timelineObject.minId === 0) && statuses.length > 0
 
   if (!noIdUpdate && newer) {

src/services/window_utils/window_utils.js

@@ -0,0 +1,5 @@
+
+export const windowWidth = () =>
+  window.innerWidth ||
+  document.documentElement.clientWidth ||
+  document.body.clientWidth

static/config.json

@@ -8,7 +8,6 @@
   "redirectRootLogin": "/main/friends",
   "chatDisabled": false,
   "showInstanceSpecificPanel": false,
-  "scopeOptionsEnabled": false,
   "formattingOptionsEnabled": false,
   "collapseMessageWithSubject": false,
   "scopeCopy": true,
@@ -21,5 +20,6 @@
   "webPushNotifications": false,
   "noAttachmentLinks": false,
   "nsfwCensorImage": "",
-  "showFeaturesPanel": true
+  "showFeaturesPanel": true,
+  "minimalScopesMode": false
 }

static/font/config.json

@@ -239,6 +239,12 @@
       "css": "pencil",
       "code": 59416,
       "src": "fontawesome"
+    },
+    {
+      "uid": "671f29fa10dda08074a4c6a341bb4f39",
+      "css": "bell-alt",
+      "code": 61683,
+      "src": "fontawesome"
     }
   ]
 }

static/font/css/fontello-codes.css

@@ -31,6 +31,7 @@
 .icon-menu:before { content: '\f0c9'; } /* '' */
 .icon-mail-alt:before { content: '\f0e0'; } /* '' */
 .icon-comment-empty:before { content: '\f0e5'; } /* '' */
+.icon-bell-alt:before { content: '\f0f3'; } /* '' */
 .icon-plus-squared:before { content: '\f0fe'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */
 .icon-lock-open-alt:before { content: '\f13e'; } /* '' */

static/font/css/fontello-ie7-codes.css

@@ -31,6 +31,7 @@
 .icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-mail-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-comment-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-bell-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello-ie7.css

@@ -42,6 +42,7 @@
 .icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-mail-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-comment-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-bell-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?40679575');
+  src: url('../font/fontello.eot?72648396');
-  src: url('../font/fontello.eot?40679575#iefix') format('embedded-opentype'),
+  src: url('../font/fontello.eot?72648396#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?40679575') format('woff2'),
+       url('../font/fontello.woff2?72648396') format('woff2'),
-       url('../font/fontello.woff?40679575') format('woff'),
+       url('../font/fontello.woff?72648396') format('woff'),
-       url('../font/fontello.ttf?40679575') format('truetype'),
+       url('../font/fontello.ttf?72648396') format('truetype'),
-       url('../font/fontello.svg?40679575#fontello') format('svg');
+       url('../font/fontello.svg?72648396#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?40679575#fontello') format('svg');
+    src: url('../font/fontello.svg?72648396#fontello') format('svg');
   }
 }
 */
@@ -87,6 +87,7 @@
 .icon-menu:before { content: '\f0c9'; } /* '' */
 .icon-mail-alt:before { content: '\f0e0'; } /* '' */
 .icon-comment-empty:before { content: '\f0e5'; } /* '' */
+.icon-bell-alt:before { content: '\f0f3'; } /* '' */
 .icon-plus-squared:before { content: '\f0fe'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */
 .icon-lock-open-alt:before { content: '\f13e'; } /* '' */

static/font/demo.html

@@ -229,11 +229,11 @@ body {
 }
 @font-face {
       font-family: 'fontello';
-      src: url('./font/fontello.eot?50378338');
+      src: url('./font/fontello.eot?23081587');
-      src: url('./font/fontello.eot?50378338#iefix') format('embedded-opentype'),
+      src: url('./font/fontello.eot?23081587#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?50378338') format('woff'),
+           url('./font/fontello.woff?23081587') format('woff'),
-           url('./font/fontello.ttf?50378338') format('truetype'),
+           url('./font/fontello.ttf?23081587') format('truetype'),
-           url('./font/fontello.svg?50378338#fontello') format('svg');
+           url('./font/fontello.svg?23081587#fontello') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -346,12 +346,13 @@ body {
         <div class="the-icons span3" title="Code: 0xf0e5"><i class="demo-icon icon-comment-empty">&#xf0e5;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xf0e5</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xf0f3"><i class="demo-icon icon-bell-alt">&#xf0f3;</i> <span class="i-name">icon-bell-alt</span><span class="i-code">0xf0f3</span></div>
         <div class="the-icons span3" title="Code: 0xf0fe"><i class="demo-icon icon-plus-squared">&#xf0fe;</i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xf0fe</span></div>
         <div class="the-icons span3" title="Code: 0xf112"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
         <div class="the-icons span3" title="Code: 0xf13e"><i class="demo-icon icon-lock-open-alt">&#xf13e;</i> <span class="i-name">icon-lock-open-alt</span><span class="i-code">0xf13e</span></div>
-        <div class="the-icons span3" title="Code: 0xf144"><i class="demo-icon icon-play-circled">&#xf144;</i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xf144"><i class="demo-icon icon-play-circled">&#xf144;</i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span></div>
         <div class="the-icons span3" title="Code: 0xf164"><i class="demo-icon icon-thumbs-up-alt">&#xf164;</i> <span class="i-name">icon-thumbs-up-alt</span><span class="i-code">0xf164</span></div>
         <div class="the-icons span3" title="Code: 0xf1e5"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
         <div class="the-icons span3" title="Code: 0xf234"><i class="demo-icon icon-user-plus">&#xf234;</i> <span class="i-name">icon-user-plus</span><span class="i-code">0xf234</span></div>

static/font/font/fontello.svg

@@ -70,6 +70,8 @@
 
 <glyph glyph-name="comment-empty" unicode="&#xf0e5;" d="M500 643q-114 0-213-39t-157-105-59-142q0-62 40-119t113-98l48-28-15-53q-13-51-39-97 85 36 154 96l24 21 32-3q38-5 72-5 114 0 213 39t157 105 59 142-59 142-157 105-213 39z m500-286q0-97-67-179t-182-130-251-48q-39 0-81 4-110-97-257-135-27-8-63-12h-3q-8 0-15 6t-9 15v1q-2 2 0 6t1 6 2 5l4 5t4 5 4 5q4 5 17 19t20 22 17 22 18 28 15 33 15 42q-88 50-138 123t-51 157q0 97 67 179t182 130 251 48 251-48 182-130 67-179z" horiz-adv-x="1000" />
 
+<glyph glyph-name="bell-alt" unicode="&#xf0f3;" d="M509-89q0 8-9 8-33 0-57 24t-23 57q0 9-9 9t-9-9q0-41 29-70t69-28q9 0 9 9z m455 160q0-29-21-50t-50-21h-250q0-59-42-101t-101-42-101 42-42 101h-250q-29 0-50 21t-21 50q28 24 51 49t47 67 42 89 27 115 11 145q0 84 66 157t171 89q-5 10-5 21 0 23 16 38t38 16 38-16 16-38q0-11-5-21 106-16 171-89t66-157q0-78 11-145t28-115 41-89 48-67 50-49z" horiz-adv-x="1000" />
+
 <glyph glyph-name="plus-squared" unicode="&#xf0fe;" d="M714 321v72q0 14-10 25t-25 10h-179v179q0 15-11 25t-25 11h-71q-15 0-25-11t-11-25v-179h-178q-15 0-25-10t-11-25v-72q0-14 11-25t25-10h178v-179q0-14 11-25t25-11h71q15 0 25 11t11 25v179h179q14 0 25 10t10 25z m143 304v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" />
 
 <glyph glyph-name="reply" unicode="&#xf112;" d="M1000 232q0-93-71-252-1-4-6-13t-7-17-7-12q-7-10-16-10-8 0-13 6t-5 14q0 5 1 15t2 13q3 38 3 69 0 56-10 101t-27 77-45 56-59 39-74 24-86 12-98 3h-125v-143q0-14-10-25t-26-11-25 11l-285 286q-11 10-11 25t11 25l285 286q11 10 25 10t26-10 10-25v-143h125q398 0 488-225 30-75 30-186z" horiz-adv-x="1000" />