From 5b7c6538745083dfd48771392ab22de557a7a344 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 2 Aug 2022 00:37:48 +0300
Subject: initial scratch

---
 .../update_notification/update_notification.vue    | 41 ++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/update_notification/update_notification.vue

(limited to 'src/components/update_notification/update_notification.vue')

diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
new file mode 100644
index 00000000..e7118d81
--- /dev/null
+++ b/src/components/update_notification/update_notification.vue
@@ -0,0 +1,41 @@
+<template>
+  <Modal
+    :is-open="true"
+    class="UpdateNotification"
+    :class="{ peek: modalPeeked }"
+    :no-background="true"
+  >
+    <div class="UpdateNotificationModal panel">
+      <div class="panel-heading">
+        <span class="title">
+          {{ $t('update.big_update_title') }}
+        </span>
+      </div>
+      <div class="panel-body">
+        <p>
+          {{ $t('update.big_update_content') }}
+        </p>
+        <p>
+        <button
+          class="button-unstyled -link tall-status-hider"
+          @click.prevent="toggleShowMore"
+        >
+          {{ $t("general.show_more") }}
+        </button>
+        {{ ' ' }}
+        <button
+          class="button-unstyled -link tall-status-hider"
+          @click.prevent="toggleShowMore"
+        >
+          {{ $t("general.never_show_again") }}
+        </button>
+          </p>
+        <img class="pleroma-tan" :src="pleromaTanVariant"/>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script src="./update_notification.js"></script>
+
+<style src="./update_notification.scss" lang="scss"></style>
-- 
cgit v1.2.3-70-g09d2


From dbfca224d812c2ba80a48852ba047bb65c4c6dd9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 4 Aug 2022 01:56:52 +0300
Subject: server-side storage for flags

---
 .../update_notification/update_notification.js     |  40 +++++-
 .../update_notification/update_notification.scss   |  95 +++++++++++--
 .../update_notification/update_notification.vue    |  52 ++++---
 src/lib/persisted_state.js                         |   1 +
 src/main.js                                        |   3 +
 src/modules/serverSideStorage.js                   | 158 +++++++++++++++++++++
 src/modules/users.js                               |   2 +
 .../entity_normalizer/entity_normalizer.service.js |   3 +
 8 files changed, 323 insertions(+), 31 deletions(-)
 create mode 100644 src/modules/serverSideStorage.js

(limited to 'src/components/update_notification/update_notification.vue')

diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
index 6b8665dd..1dd771eb 100644
--- a/src/components/update_notification/update_notification.js
+++ b/src/components/update_notification/update_notification.js
@@ -10,15 +10,49 @@ library.add(
   faTimes
 )
 
-const SettingsModal = {
+const CURRENT_UPDATE_COUNTER = 1
+
+const UpdateNotification = {
   data () {
     return {
-      pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox
+      pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox,
+      showingMore: true,
+      contentHeight: 0
     }
   },
   components: {
     Modal
+  },
+  computed: {
+    pleromaTanStyles () {
+      return {
+        'shape-outside': 'url(' + this.pleromaTanVariant + ')'
+      }
+    },
+    shouldShow () {
+      return this.$store.state.serverSideStorage.flagStorage.updateCounter < CURRENT_UPDATE_COUNTER &&
+        !this.$store.state.serverSideStorage.flagStorage.dontShowUpdateNotifs
+    }
+  },
+  methods: {
+    toggleShow () {
+      this.showingMore = !this.showingMore
+    },
+    neverShowAgain () {
+      this.$store.commit('setFlag', { flag: 'updateCounter', value: CURRENT_UPDATE_COUNTER })
+      this.$store.commit('setFlag', { flag: 'dontShowUpdateNotifs', value: 1 })
+      this.$store.dispatch('pushServerSideStorage')
+    },
+    dismiss () {
+      this.$store.commit('setFlag', { flag: 'updateCounter', value: CURRENT_UPDATE_COUNTER })
+      this.$store.dispatch('pushServerSideStorage')
+    }
+  },
+  mounted () {
+    setTimeout(() => {
+      this.contentHeight = this.$refs.content.offsetHeight
+    }, 10)
   }
 }
 
-export default SettingsModal
+export default UpdateNotification
diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
index 5fd9eb9b..594f4c6b 100644
--- a/src/components/update_notification/update_notification.scss
+++ b/src/components/update_notification/update_notification.scss
@@ -1,5 +1,13 @@
 @import 'src/_variables.scss';
+.UpdateNotification {
+  overflow: hidden;
+}
 .UpdateNotificationModal {
+  --__top-fringe: 18em; // how much pleroma-tan should stick her head above
+  --__bottom-fringe: 80em; // just reserving as much as we can, number is mostly irrelevant
+  --__right-fringe: 8em;
+
+  font-size: 15px;
   /* Explanation:
    * Modal is positioned vertically centered.
    * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
@@ -8,27 +16,90 @@
    *   bottom of the screen
    * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
    */
-  transform: translateY(calc(((100vh - 100%) / 2 + 5%)));
-  max-width: 90vh;
-  width: 30em;
   position: relative;
+  transition: transform;
+  transition-timing-function: ease-in-out;
+  transition-duration: 500ms;
+
+  .text {
+    width: 40em;
+    padding-left: 1em;
+  }
 
   @media all and (max-width: 800px) {
     /* For mobile, the modal takes 100% of the available screen.
     This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
    */
-    transform: translateY(calc(100% - 50px));
+    width: 100vw;
+  }
+
+  @media all and (max-height: 600px) {
+    display: none;
   }
-  .panel-body > p {
-    width: calc(100% - 10em)
+
+  .content {
+    overflow: hidden;
+    margin-top: calc(-1 * var(--__top-fringe));
+    margin-bottom: calc(-1 * var(--__bottom-fringe));
+    margin-right: calc(-1 * var(--__right-fringe));
+  }
+
+  .panel-body {
+    border-width: 0 0 1px 0;
+    border-style: solid;
+    border-color: var(--border, $fallback--border);
+  }
+
+  .panel-footer {
+    z-index: 22;
+    position: relative;
+    border-width: 0;
+    grid-template-columns: auto;
   }
 
   .pleroma-tan {
-    max-width: 20em;
-    max-height: 40em;
-    position: absolute;
-    right: -5em;
-    top: -10em;
-    z-index: 10;
+    object-fit: cover;
+    object-position: top;
+    transition: position, left, right, top, bottom, max-width, max-height;
+    transition-timing-function: ease-in-out;
+    transition-duration: 500ms;
+    width: 25em;
+    float: right;
+    z-index: 20;
+    position: relative;
+    shape-margin: 0.5em;
+  }
+
+  .spacer-top {
+    min-height: var(--__top-fringe);
+  }
+
+  .spacer-bottom {
+    min-height: var(--__bottom-fringe);
+  }
+
+  .extra-info {
+    transition: max-height, padding, height;
+    transition-timing-function: ease-in-out;
+    transition-duration: 500ms;
+    max-height: auto;
+    height: auto;
+  }
+
+  &.-peek {
+    transform: translateY(calc(((100vh - 100%) / 2)));
+
+    .pleroma-tan {
+      float: right;
+      z-index: 10;
+      shape-image-threshold: 0.7;
+    }
+
+    .extra-info {
+      max-height: 0;
+      height: 0;
+      display: none;
+      overflow: hidden;
+    }
   }
 }
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index e7118d81..793966eb 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -1,36 +1,56 @@
 <template>
   <Modal
-    :is-open="true"
+    :is-open="shouldShow"
     class="UpdateNotification"
-    :class="{ peek: modalPeeked }"
     :no-background="true"
   >
-    <div class="UpdateNotificationModal panel">
+    <div
+      class="UpdateNotificationModal panel"
+      :class="{ '-peek': !showingMore }"
+    >
       <div class="panel-heading">
         <span class="title">
           {{ $t('update.big_update_title') }}
         </span>
       </div>
       <div class="panel-body">
-        <p>
-          {{ $t('update.big_update_content') }}
-        </p>
-        <p>
+        <div class="content" ref="content">
+          <img class="pleroma-tan" :src="pleromaTanVariant" :style="pleromaTanStyles"/>
+          <div class="spacer-top"/>
+          <div class="text">
+            <p>
+                {{ $t('update.big_update_content') }}
+            </p>
+            <p class="extra-info">
+                {{ $t('update.update_bugs') }}
+            </p>
+            <p class="extra-info">
+                {{ $t('update.update_changelog') }}
+            </p>
+            </div>
+            <div class="spacer-bottom"/>
+        </div>
+      </div>
+      <div class="panel-footer">
+        <button
+          class="button-default"
+          @click.prevent="neverShowAgain"
+          >
+          {{ $t("general.never_show_again") }}
+        </button>
         <button
-          class="button-unstyled -link tall-status-hider"
+          class="button-default"
           @click.prevent="toggleShowMore"
-        >
+          v-if="!showingMore"
+          >
           {{ $t("general.show_more") }}
         </button>
-        {{ ' ' }}
         <button
-          class="button-unstyled -link tall-status-hider"
-          @click.prevent="toggleShowMore"
-        >
-          {{ $t("general.never_show_again") }}
+          class="button-default"
+          @click.prevent="dismiss"
+          >
+          {{ $t("general.dismiss") }}
         </button>
-          </p>
-        <img class="pleroma-tan" :src="pleromaTanVariant"/>
       </div>
     </div>
   </Modal>
diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
index c73a38ec..6d59c595 100644
--- a/src/lib/persisted_state.js
+++ b/src/lib/persisted_state.js
@@ -17,6 +17,7 @@ const saveImmedeatelyActions = [
   'markNotificationsAsSeen',
   'clearCurrentUser',
   'setCurrentUser',
+  'setServerSideStorage',
   'setHighlight',
   'setOption',
   'setClientData',
diff --git a/src/main.js b/src/main.js
index eacd554c..fc798ed6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import usersModule from './modules/users.js'
 import apiModule from './modules/api.js'
 import configModule from './modules/config.js'
 import serverSideConfigModule from './modules/serverSideConfig.js'
+import serverSideStorageModule from './modules/serverSideStorage.js'
 import shoutModule from './modules/shout.js'
 import oauthModule from './modules/oauth.js'
 import authFlowModule from './modules/auth_flow.js'
@@ -42,6 +43,7 @@ messages.setLanguage(i18n, currentLocale)
 
 const persistedStateOptions = {
   paths: [
+    'serverSideStorage.cache',
     'config',
     'users.lastLoginName',
     'oauth'
@@ -73,6 +75,7 @@ const persistedStateOptions = {
       api: apiModule,
       config: configModule,
       serverSideConfig: serverSideConfigModule,
+      serverSideStorage: serverSideStorageModule,
       shout: shoutModule,
       oauth: oauthModule,
       authFlow: authFlowModule,
diff --git a/src/modules/serverSideStorage.js b/src/modules/serverSideStorage.js
new file mode 100644
index 00000000..5ebe17fd
--- /dev/null
+++ b/src/modules/serverSideStorage.js
@@ -0,0 +1,158 @@
+import { toRaw } from 'vue'
+
+const VERSION = 1
+const NEW_USER_DATE = new Date('04-08-2022') // date of writing this, basically
+
+const COMMAND_TRIM_FLAGS = 1000
+const COMMAND_TRIM_FLAGS_AND_RESET = 1001
+
+const defaultState = {
+  // last timestamp
+  timestamp: 0,
+  // need to update server
+  dirty: false,
+  // storage of flags - stuff that can only be set and incremented
+  flagStorage: {
+    updateCounter: 0, // Counter for most recent update notification seen
+    // TODO move to prefsStorage when that becomes a thing since only way
+    // this can be reset is by complete reset of all flags
+    dontShowUpdateNotifs: 0, // if user chose to not show update notifications ever again
+    reset: 0 // special flag that can be used to force-reset all flags, debug purposes only
+    // special reset codes:
+    // 1000: trim keys to those known by currently running FE
+    // 1001: same as above + reset everything to 0
+  },
+  // raw data
+  raw: null,
+  // local cache
+  cache: null
+}
+
+const newUserFlags = {
+  ...defaultState.flagStorage,
+  updateCounter: 1 // new users don't need to see update notification
+}
+
+const serverSideStorage = {
+  state: {
+    ...defaultState
+  },
+  mutations: {
+    setServerSideStorage (state, userData) {
+      const live = userData.storage
+      const userNew = userData.created_at > NEW_USER_DATE
+      const flagsTemplate = userNew ? newUserFlags : defaultState.defaultState
+      state.raw = live
+      console.log(1111, live._timestamp)
+      let recent = null
+      const cache = state.cache || {}
+      const cacheValid = cache._timestamp > 0 && cache._version > 0
+      const liveValid = live._timestamp > 0 && live._version > 0
+      if (!liveValid) {
+        state.dirty = true
+        console.debug('Nothing valid stored on server, assuming cache to be source of truth')
+        if (cacheValid) {
+          recent = cache
+        } else {
+          console.debug(`Local cache is empty, initializing for ${userNew ? 'new' : 'existing'} user`)
+
+          recent = {
+            _timestamp: Date.now(),
+            _version: VERSION,
+            flagStorage: { ...flagsTemplate }
+          }
+        }
+      } else if (!cacheValid) {
+        console.debug('Valid storage on server found, no local cache found, using live as source of truth')
+        recent = live
+      } else {
+        console.debug('Both sources have valid data, figuring things out...')
+        console.log(live._timestamp, cache._timestamp)
+        if (live._timestamp === cache._timestamp && live._version === cache._version) {
+          console.debug('Same version/timestamp on both source, source of truth irrelevant')
+          recent = cache
+        } else {
+          state.dirty = true
+          console.debug('Different timestamp, figuring out which one is more recent')
+          let stale
+          if (live._timestamp < cache._timestamp) {
+            recent = cache
+            stale = live
+          } else {
+            recent = live
+            stale = cache
+          }
+
+          // Merge the flags
+          console.debug('Merging the flags...')
+          recent.flagStorage = recent.flagStorage || { ...flagsTemplate }
+          stale.flagStorage = stale.flagStorage || { ...flagsTemplate }
+          const allFlags = Array.from(new Set([
+            ...Object.keys(toRaw(recent.flagStorage)),
+            ...Object.keys(toRaw(stale.flagStorage))
+          ]))
+
+          const totalFlags = Object.fromEntries(allFlags.map(flag => {
+            const recentFlag = recent.flagStorage[flag]
+            const staleFlag = stale.flagStorage[flag]
+            // use flag that is of higher value
+            return [flag, recentFlag > staleFlag ? recentFlag : staleFlag]
+          }))
+
+          console.debug('AAA', totalFlags)
+          // flag reset functionality
+          if (totalFlags.reset >= COMMAND_TRIM_FLAGS && totalFlags.reset <= COMMAND_TRIM_FLAGS_AND_RESET) {
+            console.debug('Received command to trim the flags')
+            const knownKeys = new Set(Object.keys(defaultState.flagStorage))
+            allFlags.forEach(flag => {
+              if (!knownKeys.has(flag)) {
+                delete totalFlags[flag]
+              }
+            })
+            if (totalFlags.reset === COMMAND_TRIM_FLAGS_AND_RESET) {
+              // 1001 - and reset everything to 0
+              console.debug('Received command to reset the flags')
+              allFlags.forEach(flag => { totalFlags[flag] = 0 })
+            } else {
+              // reset the reset 0
+              totalFlags.reset = 0
+            }
+          } else if (totalFlags.reset > 0 && totalFlags.reset < 9000) {
+            console.debug('Received command to reset the flags')
+            allFlags.forEach(flag => { totalFlags[flag] = 0 })
+            // for good luck
+            totalFlags.reset = 0
+          }
+          console.log('AAAA', totalFlags)
+          state.cache.flagStorage = totalFlags
+        }
+      }
+      state.cache = recent
+      state.flagStorage = state.cache.flagStorage
+    },
+    setFlag (state, { flag, value }) {
+      state.flagStorage[flag] = value
+      state.dirty = true
+    }
+  },
+  actions: {
+    pushServerSideStorage ({ state, rootState, commit }, { force = false } = {}) {
+      console.log('PUSH')
+      const needPush = state.dirty || force
+      if (!needPush) return
+      state.cache = {
+        _timestamp: Date.now(),
+        _version: VERSION,
+        flagStorage: toRaw(state.flagStorage)
+      }
+      console.log('YES')
+      const params = { pleroma_settings_store: { 'pleroma-fe': state.cache } }
+      rootState.api.backendInteractor
+        .updateProfile({ params })
+        .then((user) => commit('setServerSideStorage', user))
+      state.dirty = false
+    }
+  }
+}
+
+export default serverSideStorage
diff --git a/src/modules/users.js b/src/modules/users.js
index 13d4e318..b6fb9746 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -525,6 +525,7 @@ const users = {
               user.muteIds = []
               user.domainMutes = []
               commit('setCurrentUser', user)
+              commit('setServerSideStorage', user)
               commit('addNewUsers', [user])
 
               store.dispatch('fetchEmoji')
@@ -534,6 +535,7 @@ const users = {
 
               // Set our new backend interactor
               commit('setBackendInteractor', backendInteractorService(accessToken))
+              store.dispatch('pushServerSideStorage')
 
               if (user.token) {
                 store.dispatch('setWsToken', user.token)
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 7f831ed9..e6a87b63 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -90,6 +90,9 @@ export const parseUser = (data) => {
     output.bot = data.bot
 
     if (data.pleroma) {
+      if (data.pleroma.settings_store) {
+        output.storage = data.pleroma.settings_store['pleroma-fe']
+      }
       const relationship = data.pleroma.relationship
 
       output.background_image = data.pleroma.background_image
-- 
cgit v1.2.3-70-g09d2


From 8b56db177bd2b1c7356d4e27cd5611a9cb6d7510 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 4 Aug 2022 02:12:04 +0300
Subject: debug handlers for now

---
 src/components/update_notification/update_notification.js  | 11 ++++++-----
 src/components/update_notification/update_notification.vue |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

(limited to 'src/components/update_notification/update_notification.vue')

diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
index 1dd771eb..da3e1876 100644
--- a/src/components/update_notification/update_notification.js
+++ b/src/components/update_notification/update_notification.js
@@ -16,7 +16,7 @@ const UpdateNotification = {
   data () {
     return {
       pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox,
-      showingMore: true,
+      showingMore: false,
       contentHeight: 0
     }
   },
@@ -39,13 +39,14 @@ const UpdateNotification = {
       this.showingMore = !this.showingMore
     },
     neverShowAgain () {
-      this.$store.commit('setFlag', { flag: 'updateCounter', value: CURRENT_UPDATE_COUNTER })
-      this.$store.commit('setFlag', { flag: 'dontShowUpdateNotifs', value: 1 })
-      this.$store.dispatch('pushServerSideStorage')
+      this.toggleShow()
+      // this.$store.commit('setFlag', { flag: 'updateCounter', value: CURRENT_UPDATE_COUNTER })
+      // this.$store.commit('setFlag', { flag: 'dontShowUpdateNotifs', value: 1 })
+      // this.$store.dispatch('pushServerSideStorage')
     },
     dismiss () {
       this.$store.commit('setFlag', { flag: 'updateCounter', value: CURRENT_UPDATE_COUNTER })
-      this.$store.dispatch('pushServerSideStorage')
+      // this.$store.dispatch('pushServerSideStorage')
     }
   },
   mounted () {
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index 793966eb..07e91ec9 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -40,7 +40,7 @@
         </button>
         <button
           class="button-default"
-          @click.prevent="toggleShowMore"
+          @click.prevent="toggleShow"
           v-if="!showingMore"
           >
           {{ $t("general.show_more") }}
-- 
cgit v1.2.3-70-g09d2


From fcf62a13ed49359b6bc2e82e8d05f55bfe914803 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 Aug 2022 02:01:07 +0300
Subject: don't show to anons, make it possible to disable notification
 instance-wide

---
 src/components/update_notification/update_notification.js  | 4 +++-
 src/components/update_notification/update_notification.vue | 3 ++-
 src/modules/instance.js                                    | 1 +
 static/config.json                                         | 1 +
 4 files changed, 7 insertions(+), 2 deletions(-)

(limited to 'src/components/update_notification/update_notification.vue')

diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
index 172be889..83fbf922 100644
--- a/src/components/update_notification/update_notification.js
+++ b/src/components/update_notification/update_notification.js
@@ -30,7 +30,9 @@ const UpdateNotification = {
       }
     },
     shouldShow () {
-      return this.$store.state.serverSideStorage.flagStorage.updateCounter < CURRENT_UPDATE_COUNTER &&
+      return !this.$store.state.instance.disableUpdateNotification &&
+        this.$store.state.currentUser &&
+        this.$store.state.serverSideStorage.flagStorage.updateCounter < CURRENT_UPDATE_COUNTER &&
         !this.$store.state.serverSideStorage.flagStorage.dontShowUpdateNotifs
     }
   },
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index 07e91ec9..8cae3de9 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -1,6 +1,7 @@
 <template>
   <Modal
-    :is-open="shouldShow"
+    v-if="shouldShow"
+    :is-open="!!shouldShow"
     class="UpdateNotification"
     :no-background="true"
   >
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 220463ca..bfce6f38 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -41,6 +41,7 @@ const defaultState = {
   logoMargin: '.2em',
   logoMask: true,
   logoLeft: false,
+  disableUpdateNotification: false,
   minimalScopesMode: false,
   nsfwCensorImage: undefined,
   postContentType: 'text/plain',
diff --git a/static/config.json b/static/config.json
index 53a4be82..fb39ff77 100644
--- a/static/config.json
+++ b/static/config.json
@@ -14,6 +14,7 @@
   "logoMask": true,
   "logoLeft": false,
   "minimalScopesMode": false,
+  "disableUpdateNotification": false,
   "nsfwCensorImage": "",
   "postContentType": "text/plain",
   "redirectRootLogin": "/main/friends",
-- 
cgit v1.2.3-70-g09d2


From f63ee29fac87489b754890a73f676bb143fb3b63 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 Aug 2022 02:14:09 +0300
Subject: proper links and fix user detection

---
 .../update_notification/update_notification.js      |  2 +-
 .../update_notification/update_notification.scss    |  1 +
 .../update_notification/update_notification.vue     | 21 ++++++++++++---------
 src/i18n/en.json                                    |  4 ++--
 4 files changed, 16 insertions(+), 12 deletions(-)

(limited to 'src/components/update_notification/update_notification.vue')

diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
index 83fbf922..399b8d46 100644
--- a/src/components/update_notification/update_notification.js
+++ b/src/components/update_notification/update_notification.js
@@ -31,7 +31,7 @@ const UpdateNotification = {
     },
     shouldShow () {
       return !this.$store.state.instance.disableUpdateNotification &&
-        this.$store.state.currentUser &&
+        this.$store.state.users.currentUser &&
         this.$store.state.serverSideStorage.flagStorage.updateCounter < CURRENT_UPDATE_COUNTER &&
         !this.$store.state.serverSideStorage.flagStorage.dontShowUpdateNotifs
     }
diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
index c55bb192..43a82f16 100644
--- a/src/components/update_notification/update_notification.scss
+++ b/src/components/update_notification/update_notification.scss
@@ -69,6 +69,7 @@
     position: relative;
     shape-margin: 0.5em;
     filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
+    pointer-events: none;
   }
 
   .spacer-top {
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index 8cae3de9..75ac742c 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -1,6 +1,5 @@
 <template>
   <Modal
-    v-if="shouldShow"
     :is-open="!!shouldShow"
     class="UpdateNotification"
     :no-background="true"
@@ -22,14 +21,18 @@
             <p>
                 {{ $t('update.big_update_content') }}
             </p>
-            <p class="extra-info">
-                {{ $t('update.update_bugs') }}
-            </p>
-            <p class="extra-info">
-                {{ $t('update.update_changelog') }}
-            </p>
-            </div>
-            <div class="spacer-bottom"/>
+            <i18n-t keypath="update.update_bugs" tag="p" class="extra-info">
+              <template #pleromaGitlab>
+                <a target="_blank" href="https://git.pleroma.social/">{{ $t('update.update_bugs_gitlab') }}</a>
+              </template>
+            </i18n-t>
+            <i18n-t keypath="update.update_changelog" tag="p" class="extra-info">
+              <template #theFullChangelog>
+                <a target="_blank" href="https://pleroma.social/announcements/">{{ $t('update.update_changelog_here') }}</a>
+              </template>
+            </i18n-t>
+          </div>
+          <div class="spacer-bottom"/>
         </div>
       </div>
       <div class="panel-footer">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3945e6f9..77bd8cf2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -968,7 +968,7 @@
     "big_update_content": "We haven't had a release in a while, so things might look and feel different than what you're used to.",
     "update_bugs": "Please report any issues and bugs on {pleromaGitlab}, as we have changed a lot, and although we test thoroughly and use development versions ourselves, we may have missed some things. We welcome your feedback and suggestions on issues you might encounter, or how to improve Pleroma and Pleroma-FE.",
     "update_bugs_gitlab": "Pleroma GitLab",
-    "update_changelog": "For more details on what's changed, see {theFullChangelog}",
-    "update_changelog_here": "here"
+    "update_changelog": "For more details on what's changed, see {theFullChangelog}.",
+    "update_changelog_here": "the full changelog"
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 502d76ebcd87dc29f03ded587fe5c92d655931a7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 Aug 2022 02:14:43 +0300
Subject: lint

---
 .../update_notification/update_notification.vue    | 47 ++++++++++++++++------
 1 file changed, 34 insertions(+), 13 deletions(-)

(limited to 'src/components/update_notification/update_notification.vue')

diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index 75ac742c..54cb686b 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -14,45 +14,66 @@
         </span>
       </div>
       <div class="panel-body">
-        <div class="content" ref="content">
-          <img class="pleroma-tan" :src="pleromaTanVariant" :style="pleromaTanStyles"/>
-          <div class="spacer-top"/>
+        <div
+          ref="content"
+          class="content"
+        >
+          <img
+            class="pleroma-tan"
+            :src="pleromaTanVariant"
+            :style="pleromaTanStyles"
+          >
+          <div class="spacer-top" />
           <div class="text">
             <p>
-                {{ $t('update.big_update_content') }}
+              {{ $t('update.big_update_content') }}
             </p>
-            <i18n-t keypath="update.update_bugs" tag="p" class="extra-info">
+            <i18n-t
+              keypath="update.update_bugs"
+              tag="p"
+              class="extra-info"
+            >
               <template #pleromaGitlab>
-                <a target="_blank" href="https://git.pleroma.social/">{{ $t('update.update_bugs_gitlab') }}</a>
+                <a
+                  target="_blank"
+                  href="https://git.pleroma.social/"
+                >{{ $t('update.update_bugs_gitlab') }}</a>
               </template>
             </i18n-t>
-            <i18n-t keypath="update.update_changelog" tag="p" class="extra-info">
+            <i18n-t
+              keypath="update.update_changelog"
+              tag="p"
+              class="extra-info"
+            >
               <template #theFullChangelog>
-                <a target="_blank" href="https://pleroma.social/announcements/">{{ $t('update.update_changelog_here') }}</a>
+                <a
+                  target="_blank"
+                  href="https://pleroma.social/announcements/"
+                >{{ $t('update.update_changelog_here') }}</a>
               </template>
             </i18n-t>
           </div>
-          <div class="spacer-bottom"/>
+          <div class="spacer-bottom" />
         </div>
       </div>
       <div class="panel-footer">
         <button
           class="button-default"
           @click.prevent="neverShowAgain"
-          >
+        >
           {{ $t("general.never_show_again") }}
         </button>
         <button
+          v-if="!showingMore"
           class="button-default"
           @click.prevent="toggleShow"
-          v-if="!showingMore"
-          >
+        >
           {{ $t("general.show_more") }}
         </button>
         <button
           class="button-default"
           @click.prevent="dismiss"
-          >
+        >
           {{ $t("general.dismiss") }}
         </button>
       </div>
-- 
cgit v1.2.3-70-g09d2


From 3f7cf52f531220113deda594bcc5f331cdf01951 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 Aug 2022 12:17:32 +0300
Subject: proper animation

---
 .../update_notification/update_notification.js     |  9 +++-
 .../update_notification/update_notification.scss   | 28 +++++------
 .../update_notification/update_notification.vue    | 56 +++++++++++-----------
 3 files changed, 47 insertions(+), 46 deletions(-)

(limited to 'src/components/update_notification/update_notification.vue')

diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
index 399b8d46..ba008d81 100644
--- a/src/components/update_notification/update_notification.js
+++ b/src/components/update_notification/update_notification.js
@@ -29,6 +29,11 @@ const UpdateNotification = {
         'shape-outside': 'url(' + this.pleromaTanVariant + ')'
       }
     },
+    dynamicStyles () {
+      return {
+        '--____extraInfoGroupHeight': this.contentHeight + 'px'
+      }
+    },
     shouldShow () {
       return !this.$store.state.instance.disableUpdateNotification &&
         this.$store.state.users.currentUser &&
@@ -53,8 +58,8 @@ const UpdateNotification = {
   },
   mounted () {
     setTimeout(() => {
-      this.contentHeight = this.$refs.content.offsetHeight
-    }, 10)
+      this.contentHeight = this.$refs.animatedText.scrollHeight
+    }, 1000)
   }
 }
 
diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
index 43a82f16..c3b1bc13 100644
--- a/src/components/update_notification/update_notification.scss
+++ b/src/components/update_notification/update_notification.scss
@@ -2,27 +2,20 @@
 .UpdateNotification {
   overflow: hidden;
 }
+
 .UpdateNotificationModal {
   --__top-fringe: 18em; // how much pleroma-tan should stick her head above
   --__bottom-fringe: 80em; // just reserving as much as we can, number is mostly irrelevant
   --__right-fringe: 8em;
 
   font-size: 15px;
-  /* Explanation:
-   * Modal is positioned vertically centered.
-   * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
-   * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
-   * + 10% - we move modal completely off-screen, it's top boundary touches
-   *   bottom of the screen
-   * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
-   */
   position: relative;
   transition: transform;
   transition-timing-function: ease-in-out;
   transition-duration: 500ms;
 
   .text {
-    width: 40em;
+    max-width: 40em;
     padding-left: 1em;
   }
 
@@ -80,15 +73,21 @@
     min-height: var(--__bottom-fringe);
   }
 
-  .extra-info {
+  .extra-info-group {
     transition: max-height, padding, height;
     transition-timing-function: ease-in-out;
     transition-duration: 500ms;
-    max-height: auto;
-    height: auto;
+    max-height: calc(var(--____extraInfoGroupHeight) + 1em); // include bottom padding
+    mask:
+      linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat,
+      linear-gradient(to top, white, white);
   }
 
   &.-peek {
+  /* Explanation:
+   * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
+   * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
+   */
     transform: translateY(calc(((100vh - 100%) / 2)));
 
     .pleroma-tan {
@@ -97,11 +96,8 @@
       shape-image-threshold: 0.7;
     }
 
-    .extra-info {
+    .extra-info-group {
       max-height: 0;
-      height: 0;
-      display: none;
-      overflow: hidden;
     }
   }
 }
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index 54cb686b..60cf189d 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -7,6 +7,7 @@
     <div
       class="UpdateNotificationModal panel"
       :class="{ '-peek': !showingMore }"
+      :style="dynamicStyles"
     >
       <div class="panel-heading">
         <span class="title">
@@ -14,10 +15,7 @@
         </span>
       </div>
       <div class="panel-body">
-        <div
-          ref="content"
-          class="content"
-        >
+        <div class="content">
           <img
             class="pleroma-tan"
             :src="pleromaTanVariant"
@@ -28,30 +26,32 @@
             <p>
               {{ $t('update.big_update_content') }}
             </p>
-            <i18n-t
-              keypath="update.update_bugs"
-              tag="p"
-              class="extra-info"
-            >
-              <template #pleromaGitlab>
-                <a
-                  target="_blank"
-                  href="https://git.pleroma.social/"
-                >{{ $t('update.update_bugs_gitlab') }}</a>
-              </template>
-            </i18n-t>
-            <i18n-t
-              keypath="update.update_changelog"
-              tag="p"
-              class="extra-info"
-            >
-              <template #theFullChangelog>
-                <a
-                  target="_blank"
-                  href="https://pleroma.social/announcements/"
-                >{{ $t('update.update_changelog_here') }}</a>
-              </template>
-            </i18n-t>
+            <div class="extra-info-group" ref="animatedText">
+              <i18n-t
+                keypath="update.update_bugs"
+                tag="p"
+                class="extra-info"
+              >
+                <template #pleromaGitlab>
+                  <a
+                    target="_blank"
+                    href="https://git.pleroma.social/"
+                  >{{ $t('update.update_bugs_gitlab') }}</a>
+                </template>
+              </i18n-t>
+              <i18n-t
+                keypath="update.update_changelog"
+                tag="p"
+                class="extra-info"
+              >
+                <template #theFullChangelog>
+                  <a
+                    target="_blank"
+                    href="https://pleroma.social/announcements/"
+                  >{{ $t('update.update_changelog_here') }}</a>
+                </template>
+              </i18n-t>
+            </div>
           </div>
           <div class="spacer-bottom" />
         </div>
-- 
cgit v1.2.3-70-g09d2


From 0832228e45eb5a2c456e3140c4e36aa1e7617ee6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 Aug 2022 12:18:06 +0300
Subject: lint

---
 src/components/update_notification/update_notification.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/components/update_notification/update_notification.vue')

diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index 60cf189d..1651384b 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -26,7 +26,10 @@
             <p>
               {{ $t('update.big_update_content') }}
             </p>
-            <div class="extra-info-group" ref="animatedText">
+            <div
+              ref="animatedText"
+              class="extra-info-group"
+            >
               <i18n-t
                 keypath="update.update_bugs"
                 tag="p"
-- 
cgit v1.2.3-70-g09d2


From e147dbfb8226f1f6c072a6e9231a0ccbb13a4bc5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 Aug 2022 14:20:01 +0300
Subject: art credit

---
 .../update_notification/update_notification.scss          |  4 ++++
 .../update_notification/update_notification.vue           | 15 +++++++++++++--
 src/i18n/en.json                                          |  3 ++-
 3 files changed, 19 insertions(+), 3 deletions(-)

(limited to 'src/components/update_notification/update_notification.vue')

diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
index c3b1bc13..77ee275a 100644
--- a/src/components/update_notification/update_notification.scss
+++ b/src/components/update_notification/update_notification.scss
@@ -83,6 +83,10 @@
       linear-gradient(to top, white, white);
   }
 
+  .art-credit {
+    text-align: right;
+  }
+
   &.-peek {
   /* Explanation:
    * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index 1651384b..d0e2499c 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -33,7 +33,6 @@
               <i18n-t
                 keypath="update.update_bugs"
                 tag="p"
-                class="extra-info"
               >
                 <template #pleromaGitlab>
                   <a
@@ -45,7 +44,6 @@
               <i18n-t
                 keypath="update.update_changelog"
                 tag="p"
-                class="extra-info"
               >
                 <template #theFullChangelog>
                   <a
@@ -54,6 +52,19 @@
                   >{{ $t('update.update_changelog_here') }}</a>
                 </template>
               </i18n-t>
+              <p class="art-credit">
+                <i18n-t
+                  keypath="update.art_by"
+                  tag="small"
+                >
+                  <template #linkToArtist>
+                    <a
+                      target="_blank"
+                      href="https://post.ebin.club/pipivovott"
+                    >pipivovott</a>
+                  </template>
+                </i18n-t>
+              </p>
             </div>
           </div>
           <div class="spacer-bottom" />
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 77bd8cf2..ae3be443 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -969,6 +969,7 @@
     "update_bugs": "Please report any issues and bugs on {pleromaGitlab}, as we have changed a lot, and although we test thoroughly and use development versions ourselves, we may have missed some things. We welcome your feedback and suggestions on issues you might encounter, or how to improve Pleroma and Pleroma-FE.",
     "update_bugs_gitlab": "Pleroma GitLab",
     "update_changelog": "For more details on what's changed, see {theFullChangelog}.",
-    "update_changelog_here": "the full changelog"
+    "update_changelog_here": "the full changelog",
+    "art_by": "Art by {linkToArtist}"
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 8a67fe93c2ca56689c478c38e527e2f5a0d8d5ab Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Aug 2022 01:07:26 +0300
Subject: update link in update notification to be a better one

---
 src/components/update_notification/update_notification.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/update_notification/update_notification.vue')

diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index d0e2499c..00841af2 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -60,7 +60,7 @@
                   <template #linkToArtist>
                     <a
                       target="_blank"
-                      href="https://post.ebin.club/pipivovott"
+                      href="https://post.ebin.club/users/pipivovott"
                     >pipivovott</a>
                   </template>
                 </i18n-t>
-- 
cgit v1.2.3-70-g09d2


From fa1d9f3fb4a886cde2553739f5f9a83aa35f2fdd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Sep 2022 00:24:08 +0300
Subject: using the half-shit approach since proper approach is full-shit

---
 src/components/update_notification/update_notification.js | 15 +++++----------
 .../update_notification/update_notification.scss          | 12 +++++++++---
 .../update_notification/update_notification.vue           |  7 +++++--
 3 files changed, 19 insertions(+), 15 deletions(-)

(limited to 'src/components/update_notification/update_notification.vue')

diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
index 06241688..ddf379f5 100644
--- a/src/components/update_notification/update_notification.js
+++ b/src/components/update_notification/update_notification.js
@@ -17,9 +17,9 @@ export const CURRENT_UPDATE_COUNTER = 1
 const UpdateNotification = {
   data () {
     return {
+      showingImage: false,
       pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox,
-      showingMore: false,
-      contentHeight: 0
+      showingMore: false
     }
   },
   components: {
@@ -32,11 +32,6 @@ const UpdateNotification = {
         'shape-outside': 'url(' + mask + ')'
       }
     },
-    dynamicStyles () {
-      return {
-        '--____extraInfoGroupHeight': this.contentHeight + 'px'
-      }
-    },
     shouldShow () {
       return !this.$store.state.instance.disableUpdateNotification &&
         this.$store.state.users.currentUser &&
@@ -60,12 +55,12 @@ const UpdateNotification = {
     }
   },
   mounted () {
+    this.contentHeightNoImage = this.$refs.animatedText.scrollHeight
+
     // Workaround to get the text height only after mask loaded. A bit hacky.
     const newImg = new Image()
     newImg.onload = () => {
-      setTimeout(() => {
-        this.contentHeight = this.$refs.animatedText.scrollHeight
-      }, 100)
+      setTimeout(() => { this.showingImage = true }, 100)
     }
     newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
   }
diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
index 8cad1bc7..ce8129d0 100644
--- a/src/components/update_notification/update_notification.scss
+++ b/src/components/update_notification/update_notification.scss
@@ -35,6 +35,12 @@
     margin-top: calc(-1 * var(--__top-fringe));
     margin-bottom: calc(-1 * var(--__bottom-fringe));
     margin-right: calc(-1 * var(--__right-fringe));
+
+    &.-noImage {
+      .text {
+        padding-right: var(--__right-fringe);
+      }
+    }
   }
 
   .panel-body {
@@ -75,9 +81,9 @@
 
   .extra-info-group {
     transition: max-height, padding, height;
-    transition-timing-function: ease-in-out;
-    transition-duration: 500ms;
-    max-height: calc(var(--____extraInfoGroupHeight) + 1em); // include bottom padding
+    transition-timing-function: ease-in;
+    transition-duration: 700ms;
+    max-height: 70vh;
     mask:
       linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat,
       linear-gradient(to top, white, white);
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index 00841af2..78e70a74 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -7,7 +7,6 @@
     <div
       class="UpdateNotificationModal panel"
       :class="{ '-peek': !showingMore }"
-      :style="dynamicStyles"
     >
       <div class="panel-heading">
         <span class="title">
@@ -15,8 +14,12 @@
         </span>
       </div>
       <div class="panel-body">
-        <div class="content">
+        <div
+          class="content"
+          :class="{ '-noImage': !showingImage }"
+        >
           <img
+            v-if="showingImage"
             class="pleroma-tan"
             :src="pleromaTanVariant"
             :style="pleromaTanStyles"
-- 
cgit v1.2.3-70-g09d2

