enable pull-to-refresh

This requires backend changes to work properly.

Currently Akkoma maps:
* public and unlisted (and local?) to public
* private to private

src/App.scss

@@ -20,7 +20,7 @@ body {
   color: var(--text, $fallback--text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  overscroll-behavior-y: none;
+  overscroll-behavior-y: auto;
   overflow-x: clip;
   overflow-y: scroll;
 

src/components/retweet_button/retweet_button.js

@@ -1,12 +1,14 @@
+import Popover from '../popover/popover.vue'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faRetweet } from '@fortawesome/free-solid-svg-icons'
+import { faRetweet, faTrash } from '@fortawesome/free-solid-svg-icons'
 
-library.add(faRetweet)
+library.add(faRetweet, faTrash)
 
 const RetweetButton = {
   props: ['status', 'loggedIn', 'visibility'],
   components: {
+    Popover,
     ConfirmModal
   },
   data () {
@@ -16,16 +18,16 @@ const RetweetButton = {
     }
   },
   methods: {
-    retweet () {
+    retweet (visibility) {
       if (!this.status.repeated && this.shouldConfirmRepeat) {
         this.showConfirmDialog()
       } else {
-        this.doRetweet()
+        this.doRetweet(visibility)
       }
     },
-    doRetweet () {
+    doRetweet (visibility) {
       if (!this.status.repeated) {
-        this.$store.dispatch('retweet', { id: this.status.id })
+        this.$store.dispatch('retweet', { id: this.status.id, visibility: visibility })
       } else {
         this.$store.dispatch('unretweet', { id: this.status.id })
       }

src/components/retweet_button/retweet_button.vue

@@ -1,57 +1,124 @@
 <template>
-  <div class="RetweetButton">
-    <button
-      v-if="(visibility !== 'private' || isOwn) && visibility !== 'direct' && loggedIn"
-      class="button-unstyled interactive"
-      :class="status.repeated && '-repeated'"
-      :title="$t('tool_tip.repeat')"
-      @click.prevent="retweet()"
-    >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="retweet"
-        :spin="animated"
-      />
-    </button>
-    <span v-else-if="loggedIn">
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="lock"
-        :title="$t('timeline.no_retweet_hint')"
-      />
-    </span>
-    <a
-      v-else
-      class="button-unstyled interactive"
-      target="_blank"
-      role="button"
-      :href="remoteInteractionLink"
-    >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="retweet"
+  <!-- TODO settings the offset like this feels like a hack -->
+  <Popover
+    class="RetweetButton"
+    trigger="click"
+    placement="bottom"
+    :offset="{ y: 22 }"
+    :bound-to="{ x: 'container' }"
+    remove-padding
+  >
+    <template v-slot:content="{close}">
+      <div class="dropdown-menu">
+        <template v-if="status.repeated">
+          <button
+            v-if="status.repeated"
+            class="button-default dropdown-item dropdown-item-icon"
+            @click.prevent="retweet()"
+          >
+            <!-- TODO: i18n -->
+            <FAIcon
+              fixed-width
+              icon="trash"
+            /><span>Undo repeat</span>
+          </button>
+        </template>
+        <template v-else>
+          <!-- TODO: don't show button that would increase post visibility -->
+          <button
+            class="button-default dropdown-item dropdown-item-icon"
+            @click.prevent="retweet('public')"
+          >
+            <FAIcon
+              fixed-width
+              icon="globe"
+            /><span>{{ $t("general.scope_in_timeline.public") }}</span>
+          </button>
+          <button
+            class="button-default dropdown-item dropdown-item-icon"
+            @click.prevent="retweet('unlisted')"
+          >
+            <FAIcon
+              fixed-width
+              icon="lock-open"
+            /><span>{{ $t("general.scope_in_timeline.unlisted") }}</span>
+          </button>
+          <button
+            class="button-default dropdown-item dropdown-item-icon"
+            @click.prevent="retweet('private')"
+          >
+            <FAIcon
+              fixed-width
+              icon="lock"
+            /><span>{{ $t("general.scope_in_timeline.private") }}</span>
+          </button>
+          <button
+            class="button-default dropdown-item dropdown-item-icon"
+            @click.prevent="retweet('local')"
+          >
+            <!-- TODO: "general.scope_in_timeline.local" feels too long for the popover -->
+            <FAIcon
+              fixed-width
+              icon="users"
+            /><span>Local</span>
+          </button>
+        </template>
+      </div>
+    </template>
+    <template v-slot:trigger>
+      <button
+        v-if="(visibility !== 'private' || isOwn) && visibility !== 'direct' && loggedIn"
+        class="button-unstyled popover-trigger"
+        :class="status.repeated && '-repeated'"
         :title="$t('tool_tip.repeat')"
-      />
-    </a>
-    <span
-      v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
-      class="no-event"
-    >
-      {{ status.repeat_num }}
-    </span>
-    <teleport to="#modal">
-      <confirm-modal
-        v-if="showingConfirmDialog"
-        :title="$t('status.repeat_confirm_title')"
-        :confirm-text="$t('status.repeat_confirm_accept_button')"
-        :cancel-text="$t('status.repeat_confirm_cancel_button')"
-        @accepted="doRetweet"
-        @cancelled="hideConfirmDialog"
       >
-        {{ $t('status.repeat_confirm') }}
-      </confirm-modal>
-    </teleport>
-  </div>
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="retweet"
+          :spin="animated"
+        />
+      </button>
+      <span v-else-if="loggedIn">
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="lock"
+          :title="$t('timeline.no_retweet_hint')"
+        />
+      </span>
+      <a
+        v-else
+        class="button-unstyled interactive"
+        target="_blank"
+        role="button"
+        :href="remoteInteractionLink"
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="retweet"
+          :title="$t('tool_tip.repeat')"
+        />
+      </a>
+      <span
+        v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
+        class="no-event"
+      >
+        {{ status.repeat_num }}
+      </span>
+      <teleport to="#modal">
+        <!-- TODO does this work for all? -->
+        <confirm-modal
+          v-if="showingConfirmDialog"
+          :title="$t('status.repeat_confirm_title')"
+          :confirm-text="$t('status.repeat_confirm_accept_button')"
+          :cancel-text="$t('status.repeat_confirm_cancel_button')"
+          @accepted="doRetweet"
+          @cancelled="hideConfirmDialog"
+        >
+          {{ $t('status.repeat_confirm') }}
+        </confirm-modal>
+      </teleport>
+    </template>
+  </Popover>
 </template>
 
 <script src="./retweet_button.js" ></script>
@@ -72,7 +139,7 @@
     user-select: none;
   }
 
-  .interactive {
+  .popover-trigger {
     .svg-inline--fa {
       @media (prefers-reduced-motion: reduce) {
         animation: unset;
@@ -80,6 +147,7 @@
       animation-duration: 0.6s;
     }
 
+    /* TODO: don't turn green on hover because it keeps being focused on mobile when the popover is open. Instead make it while(?) like in extra_buttons and only green once it's been repeated. */
     &:hover .svg-inline--fa,
     &.-repeated .svg-inline--fa {
       color: $fallback--cGreen;

src/components/status/status.js

@@ -215,6 +215,7 @@ const Status = {
     retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name_ui },
     retweeterHtml () { return this.statusoid.user.name },
     retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
+    retweeterVisibility () { return this.statusoid.visibility },
     status () {
       if (this.retweet) {
         return this.statusoid.retweeted_status
@@ -440,6 +441,9 @@ const Status = {
     visibilityLocalized () {
       return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
     },
+    retweeterVisibilityLocalized () {
+      return this.$i18n.t('general.scope_in_timeline.' + this.statusoid.visibility)
+    },
     isEdited () {
       return this.status.edited_at !== null
     },

src/components/status/status.scss

@@ -42,10 +42,6 @@
     display: flex;
     padding: var(--status-margin, $status-margin);
 
-    .content {
-      overflow: hidden;
-    }
-
     > * {
       min-width: 0;
     }

src/components/status/status.vue

@@ -108,6 +108,17 @@
             :title="$t('tool_tip.repeat')"
           />
           {{ $t('timeline.repeated') }}
+          <span
+            v-if="retweeterVisibility"
+            class="visibility-icon"
+            :title="retweeterVisibilityLocalized"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110"
+              :icon="visibilityIcon(retweeterVisibility)"
+            />
+          </span>
         </div>
       </div>
 

src/components/user_card/user_card.scss

@@ -41,6 +41,7 @@
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     background-size: cover;
+    background-position: top;
     mask-size: 100% 60%;
     border-top-left-radius: calc(var(--panelRadius) - 1px);
     border-top-right-radius: calc(var(--panelRadius) - 1px);

src/modules/statuses.js

@@ -666,7 +666,7 @@ const statuses = {
     retweet ({ rootState, commit }, status) {
       // Optimistic retweeting...
       commit('setRetweeted', { status, value: true })
-      rootState.api.backendInteractor.retweet({ id: status.id })
+      rootState.api.backendInteractor.retweet({ id: status.id, visibility: status.visibility })
         .then(status => commit('setRetweetedConfirm', { status: status.retweeted_status, user: rootState.users.currentUser }))
     },
     unretweet ({ rootState, commit }, status) {

src/panel.scss

@@ -18,7 +18,6 @@
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 5;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
     pointer-events: none;
@@ -60,7 +59,6 @@
   padding: 0.6em;
   height: var(--__panel-heading-height);
   line-height: var(--__panel-heading-height-inner);
-  z-index: 4;
 
   &.-flexible-height {
     --__panel-heading-height: auto;
@@ -131,6 +129,7 @@
   color: var(--panelText);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
+  z-index: 4;
 
   &::after {
     background-color: $fallback--fg;

src/services/api/api.service.js

@@ -125,21 +125,31 @@ let fetch = (url, options) => {
 }
 
 const promisedRequest = ({ method, url, params, payload, credentials, headers = {} }) => {
+  const payloadIsFormData = payload instanceof FormData
+
   const options = {
     method,
     headers: {
       'Accept': 'application/json',
-      'Content-Type': 'application/json',
       ...headers
     }
   }
+  if (!payloadIsFormData) {
+    // only set content type if payload is not form data
+    // if it is unset the content type will be automatically set to multipart/form-data
+    options.headers['Content-Type'] = 'application/json'
+  }
   if (params) {
     url += '?' + Object.entries(params)
       .map(([key, value]) => encodeURIComponent(key) + '=' + encodeURIComponent(value))
       .join('&')
   }
   if (payload) {
-    options.body = JSON.stringify(payload)
+    if (payloadIsFormData) {
+      options.body = payload
+    } else {
+      options.body = JSON.stringify(payload)
+    }
   }
   if (credentials) {
     options.headers = {
@@ -822,8 +832,16 @@ const unfavorite = ({ id, credentials }) => {
     .then((data) => parseStatus(data))
 }
 
-const retweet = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_RETWEET_URL(id), method: 'POST', credentials })
+const retweet = ({ id, credentials, visibility }) => {
+  const form = new FormData()
+  if (visibility) form.append('visibility', visibility)
+
+  return promisedRequest({
+    url: MASTODON_RETWEET_URL(id),
+    payload: form,
+    method: 'POST',
+    credentials
+  })
     .then((data) => parseStatus(data))
 }