Merge branch 'tusooa/date-absolute' into shigusegubu-themes3

Merge branch 'splashscreen' into shigusegubu-themes3
replace toSorted with sort, add artist credit
2024-09-17 23:33:49 +03:00 · 2024-09-17 23:03:13 +03:00 · 2024-09-17 22:57:39 +03:00 · 2024-09-17 22:57:39 +03:00 · 2024-09-17 22:57:39 +03:00 · 2024-09-17 22:57:39 +03:00
16 changed files with 477 additions and 263 deletions
--- a/changelog.d/date-absolute.add
+++ b/changelog.d/date-absolute.add
@ -0,0 +1 @@
+Support displaying time in absolute format
--- a/index.html
+++ b/index.html
@ -4,6 +4,114 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <link rel="icon" type="image/png" href="/favicon.png">
+    <style id="splashscreen">
+     #webpack-hot-middleware-clientOverlay {
+       z-index: 9999999999999999999999999999;
+     }
+
+     #splash {
+       --scale: 1;
+       width: 100vw;
+       height: 100vh;
+       display: grid;
+       grid-template-rows: auto;
+       grid-template-columns: auto;
+       align-content: center;
+       align-items: center;
+       justify-content: center;
+       justify-items: center;
+       flex-direction: column;
+       background: #0f161e;
+       font-family: sans-serif;
+       color: #b9b9ba;
+       position: absolute;
+       z-index: 9999;
+       font-size: calc(1vw + 1vh + 1vmin);
+     }
+
+     #splash-credit {
+       position: absolute;
+       font-size: 14px;
+       bottom: 0;
+       right: 0;
+     }
+
+     #splash-container {
+       align-items: center;
+     }
+
+     #mascot-container {
+       display: flex;
+       align-items: flex-end;
+       justify-content: center;
+     }
+
+     #mascot:not(.orz) {
+       margin-bottom: 2em
+       object-position: 2.5em 0;
+     }
+
+     #mascot-temp.orz {
+       margin-bottom: 2em
+       object-position: 2.5em 0;
+     }
+
+     #mascot,
+     #mascot-temp {
+       width: calc(10em * var(--scale));
+       height: calc(8em * var(--scale));
+       object-fit: contain;
+       object-position: bottom;
+     }
+
+     #throbber {
+       display: grid;
+       width: calc(5em * 0.5 * var(--scale));
+       height: calc(8em * 0.5 * var(--scale));
+       grid-template-rows: repeat(8, 1fr);
+       grid-template-columns: repeat(5, 1fr);
+       grid-template-areas: "P P . L L"
+                            "P P . L L"
+                            "P P . L L"
+                            "P P . L L"
+                            "P P . . ."
+                            "P P . . ."
+                            "P P . E E"
+                            "P P . E E";
+     }
+
+     .chunk {
+       background-color: #e2b188;
+       box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
+     }
+
+     #chunk-P {
+       grid-area: P;
+       border-top-left-radius:  calc(var(--logoChunkSize) / 2);
+     }
+
+     #chunk-L {
+       grid-area: L;
+       border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+     }
+
+     #chunk-E {
+       grid-area: E;
+       border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+     }
+
+     #status {
+       line-height: 2;
+       width: 100%;
+       text-align: center;
+     }
+
+     @media (prefers-reduced-motion) {
+       #throbber {
+         animation: none;
+       }
+     }
+    </style>
    <style id="pleroma-eager-styles" type="text/css"></style>
    <style id="pleroma-lazy-styles" type="text/css"></style>
    <!--server-generated-meta-->
@ -11,95 +119,26 @@
  <body style="margin: 0; padding: 0">
    <noscript>To use Pleroma, please enable JavaScript.</noscript>
    <!-- putting styles here to avoid having to wait for styles to load up -->
-    <div id="splash" style="
-      width: 100vw;
-      height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      background: #0f161e;
-      font-family: sans-serif;
-      color: #b9b9ba;
-      position: absolute;
-      z-index: 999999;
-      "
-    >
-      <img
-        style="
-          width: 30vh;
-          margin-top: 1vh;
-          margin-bottom: 0.5vh;
-        "
-        src="/static/pleromatan_apology_fox.png"
-      />
-      <div
-        id="throbber"
-        style='
-          --logoChunkSize: 2vh;
-          display: grid;
-          margin-top: 2.5vh;
-          margin-bottom: 0.5vh;
-          width: 30vw;
-          grid-template-rows: repeat(8, var(--logoChunkSize));
-          grid-template-columns: repeat(5, var(--logoChunkSize));
-          grid-template-areas: "P P . L L"
-                               "P P . L L"
-                               "P P . L L"
-                               "P P . L L"
-                               "P P . . ."
-                               "P P . . ."
-                               "P P . E E"
-                               "P P . E E";
-          width: auto;
-        '
-      >
-        <div
-          style="
-            background-color: #e2b188;
-            grid-area: P;
-            border-top-left-radius:  calc(var(--logoChunkSize) / 2);
-            box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188;
-          "
-        >
-        </div>
-        <div
-          style="
-            width: 100%;
-            height: 100%;
-            background-color: #e2b188;
-            grid-area: L;
-            border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
-            box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188;
-          "
-        >
-        </div>
-        <div
-          style="
-            width: 100%;
-            height: 100%;
-            background-color: #e2b188;
-            grid-area: E;
-            border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
-            box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188;
-          "
-        >
-        </div>
+    <div id="splash">
+      <div id="splash-credit">
+        Art by pipivovott
      </div>
-      <div
-        id="status"
-        class="css-ok"
-        style="
-        margin-top: 3.5vh;
-        height: 4vh;
-        line-height: 4vh;
-        font-size: 4vh;
-        width: 100%;
-        text-align: center;
-        "
-      >
-        <!-- (｡>﹏<) -->
-        <span class="initial-text">(｡&gt;﹏&lt;)</span>
+      <div id="splash-container">
+        <div id="mascot-container">
+          <div id="throbber">
+            <div class="chunk" id="chunk-P">
+            </div>
+            <div class="chunk" id="chunk-L">
+            </div>
+            <div class="chunk" id="chunk-E">
+            </div>
+          </div>
+          <img id="mascot" src="/static/pleromatan_apology_fox.png">
+        </div>
+        <div id="status" class="css-ok">
+          <!-- (｡>﹏<) -->
+          <span class="initial-text">(｡&gt;﹏&lt;)</span>
+        </div>
      </div>
    </div>
    <div id="app" class="hidden"></div>
--- a/src/App.scss
+++ b/src/App.scss
@ -919,7 +919,6 @@ option {
  pointer-events: none;
  transition: opacity 2s;
  opacity: 1;
-  z-index: 9999999999999999999999999999;

  &.hidden {
    opacity: 0;
@ -938,13 +937,80 @@ option {
    }
  }

+  #mascot-container {
+    perspective: 60em;
+    perspective-origin: 0 -15em;
+    transform-style: preserve-3d;
+  }
+
  #throbber {
-    animation-duration: 2s;
+    animation-duration: 3s;
    animation-name: bounce;
    animation-iteration-count: infinite;
    animation-direction: normal;
    transform-origin: bottom center;

+    --defaultY: 0;
+
+    &.dead {
+      animation-name: dead;
+      animation-duration: 3s;
+      // animation-iteration-count: 1;
+      animation-iteration-count: 1;
+      transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
+    }
+
+    @keyframes dead {
+      0% {
+        transform: rotateX(0) rotateY(0) rotateZ(0);
+      }
+
+      5% {
+        transform: rotateX(0) rotateY(0) rotateZ(1deg);
+      }
+
+      10% {
+        transform: rotateX(0) rotateY(0) rotateZ(-2deg);
+      }
+
+      15% {
+        transform: rotateX(0) rotateY(0) rotateZ(3deg);
+      }
+
+      20% {
+        transform: rotateX(0) rotateY(0) rotateZ(0);
+      }
+
+      25% {
+        transform: rotateX(0) rotateY(0) rotateZ(0);
+      }
+
+      30% {
+        transform: rotateX(10deg) rotateY(0) rotateZ(0);
+      }
+
+      35% {
+        transform: rotateX(-10deg) rotateY(0) rotateZ(0);
+      }
+
+      40% {
+        transform: rotateX(10deg) rotateY(0) rotateZ(0);
+      }
+
+      45% {
+        transform: rotateX(-10deg) rotateY(0) rotateZ(0);
+      }
+
+      50% {
+        transform: rotateX(10deg) rotateY(0) rotateZ(0);
+      }
+
+      100% {
+        transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
+        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
+      }
+    }
+
    @keyframes bounce {
      0% {
        scale: 1 1;
@ -955,24 +1021,28 @@ option {
      10% {
        scale: 1.2 0.8;
        translate: 0 0;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-out;
      }

      30% {
        scale: 0.9 1.1;
        translate: 0 -40%;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-in;
      }

      40% {
        scale: 1.1 0.9;
        translate: 0 -50%;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-in;
      }

      45% {
        scale: 0.9 1.1;
        translate: 0 -45%;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-in;
      }

@ -985,30 +1055,35 @@ option {
      55% {
        scale: 0.985 1.025;
        translate: 0 -35%;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-in;
      }

      60% {
        scale: 1.0125 0.9985;
        translate: 0 -30%;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-in;
      }

      80% {
        scale: 1.0063 0.9938;
        translate: 0 -10%;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-in-ou;
      }

      90% {
        scale: 1.2 0.8;
        translate: 0 0;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-out;
      }

      100% {
        scale: 1 1;
        translate: 0 0;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-out;
      }
    }
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -327,11 +327,7 @@ const setConfig = async ({ store }) => {

 const checkOAuthToken = async ({ store }) => {
  if (store.getters.getUserToken()) {
-    try {
-      await store.dispatch('loginUser', store.getters.getUserToken())
-    } catch (e) {
-      console.error(e)
-    }
+    return store.dispatch('loginUser', store.getters.getUserToken())
  }
  return Promise.resolve()
 }
@ -349,10 +345,15 @@ const afterStoreSetup = async ({ store, i18n }) => {
  const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
  store.dispatch('setInstanceOption', { name: 'server', value: server })

+  document.querySelector('#status').textContent = i18n.global.t('splash.settings')
  await setConfig({ store })
-  await store.dispatch('setTheme')
-
  document.querySelector('#status').textContent = i18n.global.t('splash.theme')
+  try {
+    await store.dispatch('setTheme').catch((e) => { console.log(e) })
+  } catch (e) {
+    return Promise.reject(e)
+  }
+
  applyConfig(store.state.config, i18n.global)

  // Now we can try getting the server settings and logging in
@ -363,7 +364,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
    getInstancePanel({ store }),
    getNodeInfo({ store }),
    getInstanceConfig({ store })
-  ])
+  ]).catch(e => Promise.reject(e))

  // Start fetching things that don't need to block the UI
  store.dispatch('fetchMutes')
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -217,6 +217,27 @@
            {{ $t('settings.no_rich_text_description') }}
          </BooleanSetting>
        </li>
+        <li>
+          <BooleanSetting
+            path="useAbsoluteTimeFormat"
+            expert="1"
+          >
+            {{ $t('settings.absolute_time_format') }}
+          </BooleanSetting>
+        </li>
+        <ul
+          class="setting-list suboptions"
+          v-if="mergedConfig.useAbsoluteTimeFormat"
+        >
+          <li>
+            <IntegerSetting
+              path="absoluteTimeFormatMinAgeDays"
+              :min="0"
+            >
+              {{ $t('settings.absolute_time_format_min_age_days') }}
+            </IntegerSetting>
+          </li>
+        </ul>
        <h3>{{ $t('settings.attachments') }}</h3>
        <li>
          <BooleanSetting
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@ -3,7 +3,7 @@
    :datetime="time"
    :title="localeDateString"
  >
-    {{ relativeTimeString }}
+    {{ relativeOrAbsoluteTimeString }}
  </time>
 </template>

@ -16,16 +16,28 @@ export default {
  props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'],
  data () {
    return {
+      relativeTimeMs: 0,
      relativeTime: { key: 'time.now', num: 0 },
      interval: null
    }
  },
  computed: {
-    localeDateString () {
-      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
+    shouldUseAbsoluteTimeFormat () {
+      if (!this.$store.getters.mergedConfig.useAbsoluteTimeFormat) {
+        return false
+      }
+      return this.$store.getters.mergedConfig.absoluteTimeFormatMinAgeDays * DateUtils.DAY <= this.relativeTimeMs
+    },
+    browserLocale () {
+      return localeService.internalToBrowserLocale(this.$i18n.locale)
+    },
+    timeAsDate () {
      return typeof this.time === 'string'
-        ? new Date(Date.parse(this.time)).toLocaleString(browserLocale)
-        : this.time.toLocaleString(browserLocale)
+        ? new Date(Date.parse(this.time))
+        : this.time
+    },
+    localeDateString () {
+      return this.timeAsDate.toLocaleString(this.browserLocale)
    },
    relativeTimeString () {
      const timeString = this.$i18n.tc(this.relativeTime.key, this.relativeTime.num, [this.relativeTime.num])
@ -35,6 +47,40 @@ export default {
      }

      return timeString
+    },
+    absoluteTimeString () {
+      if (this.longFormat) {
+        return this.localeDateString
+      }
+      const now = new Date()
+      const formatter = (() => {
+        if (DateUtils.isSameDay(this.timeAsDate, now)) {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            minute: 'numeric',
+            hour: 'numeric'
+          })
+        } else if (DateUtils.isSameMonth(this.timeAsDate, now)) {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            hour: 'numeric',
+            day: 'numeric'
+          })
+        } else if (DateUtils.isSameYear(this.timeAsDate, now)) {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            month: 'short',
+            day: 'numeric'
+          })
+        } else {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            year: 'numeric',
+            month: 'short'
+          })
+        }
+      })()
+
+      return formatter.format(this.timeAsDate)
+    },
+    relativeOrAbsoluteTimeString () {
+      return this.shouldUseAbsoluteTimeFormat ? this.absoluteTimeString : this.relativeTimeString
    }
  },
  watch: {
@ -54,6 +100,7 @@ export default {
  methods: {
    refreshRelativeTimeObject () {
      const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
+      this.relativeTimeMs = DateUtils.relativeTimeMs(this.time)
      this.relativeTime = this.longFormat
        ? DateUtils.relativeTime(this.time, nowThreshold)
        : DateUtils.relativeTimeShort(this.time, nowThreshold)
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -506,6 +506,8 @@
    "autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
    "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
    "emoji_reactions_scale": "Reactions scale factor",
+    "absolute_time_format": "Use absolute time format",
+    "absolute_time_format_min_age_days": "Only use for time more than this number of days away from now",
    "export_theme": "Save preset",
    "filtering": "Filtering",
    "wordfilter": "Wordfilter",
@ -870,9 +872,6 @@
        "component": "Component",
        "override": "Override",
        "shadow_id": "Shadow #{value}",
-        "offset": "Shadow offset",
-        "light_grid": "Use light checkerboard",
-        "name": "Name",
        "blur": "Blur",
        "spread": "Spread",
        "inset": "Inset",
@ -880,7 +879,6 @@
        "filter_hint": {
          "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
          "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
-          "avatar_inset_short": "Separate inset shadow",
          "avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
          "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
          "inset_classic": "Inset shadows will be using {0}"
@ -1410,11 +1408,12 @@
    "loading": "Loading...",
    "theme": "Applying theme, please wait warmly...",
    "instance": "Getting instance info...",
-    "splines": "Reticulating splines...",
-    "almost": "Almost there!",
-    "fun_1": "Drink more water!",
+    "settings": "Applying settings...",
+    "almost": "Reticulating splines...",
+    "fun_1": "Drink more water",
    "fun_2": "Take it easy!",
-    "fun_3": "Suya..",
-    "fun_4": "#cofe"
+    "fun_3": "Suya...",
+    "fun_4": "My Pleroma machine is full power!",
+    "error": "Something went wrong"
  }
 }
--- a/src/main.js
+++ b/src/main.js
@ -48,6 +48,16 @@ const i18n = createI18n({

 messages.setLanguage(i18n.global, currentLocale)

+const splashError = (i18n, e) => {
+  document.querySelector('#mascot').src = (Math.floor(Math.random() * 2) > 0)
+    ? '/static/pleromatan_orz_fox.png'
+    : '/static/pleromatan_orz.png'
+  document.querySelector('#mascot').classList.add('orz')
+  document.querySelector('#throbber').classList.add('dead')
+  document.querySelector('#status').textContent = i18n.global.t('splash.error')
+  console.error('PleromaFE failed to initialize: ', e)
+}
+
 const persistedStateOptions = {
  paths: [
    'serverSideStorage.cache',
@ -58,57 +68,62 @@ const persistedStateOptions = {
 };

 (async () => {
-  let storageError = false
-  const plugins = [pushNotifications]
  try {
-    const persistedState = await createPersistedState(persistedStateOptions)
-    plugins.push(persistedState)
-  } catch (e) {
-    console.error(e)
-    storageError = true
-  }
-  document.querySelector('#status').removeAttribute('class')
-  document.querySelector('#status').textContent = i18n.global.t('splash.loading')
-  const store = createStore({
-    modules: {
-      i18n: {
-        getters: {
-          i18n: () => i18n.global
-        }
+    let storageError
+    const plugins = [pushNotifications]
+    try {
+      const persistedState = await createPersistedState(persistedStateOptions)
+      plugins.push(persistedState)
+    } catch (e) {
+      console.error('Storage error', e)
+      storageError = e
+    }
+    document.querySelector('#status').removeAttribute('class')
+    document.querySelector('#status').textContent = i18n.global.t('splash.loading')
+    document.querySelector('#splash-credit').textContent = i18n.global.t('update.art_by', { linkToArtist: 'pipivovott' })
+    const store = createStore({
+      modules: {
+        i18n: {
+          getters: {
+            i18n: () => i18n.global
+          }
+        },
+        interface: interfaceModule,
+        instance: instanceModule,
+        // TODO refactor users/statuses modules, they depend on each other
+        users: usersModule,
+        statuses: statusesModule,
+        notifications: notificationsModule,
+        lists: listsModule,
+        api: apiModule,
+        config: configModule,
+        profileConfig: profileConfigModule,
+        serverSideStorage: serverSideStorageModule,
+        adminSettings: adminSettingsModule,
+        shout: shoutModule,
+        oauth: oauthModule,
+        authFlow: authFlowModule,
+        mediaViewer: mediaViewerModule,
+        oauthTokens: oauthTokensModule,
+        reports: reportsModule,
+        polls: pollsModule,
+        postStatus: postStatusModule,
+        editStatus: editStatusModule,
+        statusHistory: statusHistoryModule,
+        chats: chatsModule,
+        announcements: announcementsModule
      },
-      interface: interfaceModule,
-      instance: instanceModule,
-      // TODO refactor users/statuses modules, they depend on each other
-      users: usersModule,
-      statuses: statusesModule,
-      notifications: notificationsModule,
-      lists: listsModule,
-      api: apiModule,
-      config: configModule,
-      profileConfig: profileConfigModule,
-      serverSideStorage: serverSideStorageModule,
-      adminSettings: adminSettingsModule,
-      shout: shoutModule,
-      oauth: oauthModule,
-      authFlow: authFlowModule,
-      mediaViewer: mediaViewerModule,
-      oauthTokens: oauthTokensModule,
-      reports: reportsModule,
-      polls: pollsModule,
-      postStatus: postStatusModule,
-      editStatus: editStatusModule,
-      statusHistory: statusHistoryModule,
-      chats: chatsModule,
-      announcements: announcementsModule
-    },
-    plugins,
-    strict: false // Socket modifies itself, let's ignore this for now.
-    // strict: process.env.NODE_ENV !== 'production'
-  })
-  if (storageError) {
-    store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
+      plugins,
+      strict: false // Socket modifies itself, let's ignore this for now.
+      // strict: process.env.NODE_ENV !== 'production'
+    })
+    if (storageError) {
+      store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
+    }
+    return await afterStoreSetup({ store, i18n })
+  } catch (e) {
+    splashError(i18n, e)
  }
-  afterStoreSetup({ store, i18n })
 })()

 // These are inlined by webpack's DefinePlugin
--- a/src/modules/config.js
+++ b/src/modules/config.js
@ -180,7 +180,9 @@ export const defaultState = {
  autocompleteSelect: undefined, // instance default
  closingDrawerMarksAsSeen: undefined, // instance default
  unseenAtTop: undefined, // instance default
-  ignoreInactionableSeen: undefined // instance default
+  ignoreInactionableSeen: undefined, // instance default
+  useAbsoluteTimeFormat: undefined, // instance defualt
+  absoluteTimeFormatMinAgeDays: undefined // instance default
 }

 // caching the instance default properties
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@ -119,6 +119,8 @@ const defaultState = {
  closingDrawerMarksAsSeen: true,
  unseenAtTop: false,
  ignoreInactionableSeen: false,
+  useAbsoluteTimeFormat: false,
+  absoluteTimeFormatMinAgeDays: 0,

  // Nasty stuff
  customEmoji: [],
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@ -230,27 +230,27 @@ const interfaceMod = {

      const forceRecompile = forceThemeRecompilation || recompile

-      let promise = null
+      let result = null

      if (themeData) {
-        promise = Promise.resolve(normalizeThemeData(themeData))
+        result = normalizeThemeData(themeData)
      } else if (themeName) {
-        promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
+        result = normalizeThemeData(getPreset(themeName))
+          .then(themeData => normalizeThemeData(themeData))
      } else if (userThemeSource || userThemeSnapshot) {
-        promise = Promise.resolve(normalizeThemeData({
+        result = normalizeThemeData({
          _pleroma_theme_version: 2,
          theme: userThemeSnapshot,
          source: userThemeSource
-        }))
-      } else if (actualThemeName && actualThemeName !== 'custom') {
-        promise = getPreset(actualThemeName).then(themeData => {
-          const realThemeData = normalizeThemeData(themeData)
-          if (actualThemeName === instanceThemeName) {
-            // This sole line is the reason why this whole block is above the recompilation check
-            commit('setInstanceOption', { name: 'themeData', value: { theme: realThemeData } })
-          }
-          return realThemeData
        })
+      } else if (actualThemeName && actualThemeName !== 'custom') {
+        const themeData = actualThemeName
+        const realThemeData = normalizeThemeData(themeData)
+        if (actualThemeName === instanceThemeName) {
+          // This sole line is the reason why this whole block is above the recompilation check
+          commit('setInstanceOption', { name: 'themeData', value: { theme: realThemeData } })
+        }
+        result = realThemeData
      } else {
        throw new Error('Cannot load any theme!')
      }
@ -259,95 +259,91 @@ const interfaceMod = {
      // cache (tryLoadCache return true if load successful)
      if (!forceRecompile && !themeDebug && tryLoadCache()) {
        dispatch('setThemeApplied')
-        return
+        return Promise.resolve()
      }

-      promise
-        .then(realThemeData => {
-          const theme2ruleset = convertTheme2To3(realThemeData)
+      const realThemeData = result
+      const theme2ruleset = convertTheme2To3(realThemeData)

-          if (saveData) {
-            commit('setOption', { name: 'theme', value: themeName || actualThemeName })
-            commit('setOption', { name: 'customTheme', value: realThemeData })
-            commit('setOption', { name: 'customThemeSource', value: realThemeData })
+      if (saveData) {
+        commit('setOption', { name: 'theme', value: themeName || actualThemeName })
+        commit('setOption', { name: 'customTheme', value: realThemeData })
+        commit('setOption', { name: 'customThemeSource', value: realThemeData })
+      }
+      const hacks = []
+
+      Object.entries(theme3hacks).forEach(([key, value]) => {
+        switch (key) {
+          case 'fonts': {
+            Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
+              if (!font?.family) return
+              switch (fontKey) {
+                case 'interface':
+                  hacks.push({
+                    component: 'Root',
+                    directives: {
+                      '--font': 'generic | ' + font.family
+                    }
+                  })
+                  break
+                case 'input':
+                  hacks.push({
+                    component: 'Input',
+                    directives: {
+                      '--font': 'generic | ' + font.family
+                    }
+                  })
+                  break
+                case 'post':
+                  hacks.push({
+                    component: 'RichContent',
+                    directives: {
+                      '--font': 'generic | ' + font.family
+                    }
+                  })
+                  break
+                case 'monospace':
+                  hacks.push({
+                    component: 'Root',
+                    directives: {
+                      '--monoFont': 'generic | ' + font.family
+                    }
+                  })
+                  break
+              }
+            })
+            break
          }
-          const hacks = []
-
-          Object.entries(theme3hacks).forEach(([key, value]) => {
-            switch (key) {
-              case 'fonts': {
-                Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
-                  if (!font?.family) return
-                  switch (fontKey) {
-                    case 'interface':
-                      hacks.push({
-                        component: 'Root',
-                        directives: {
-                          '--font': 'generic | ' + font.family
-                        }
-                      })
-                      break
-                    case 'input':
-                      hacks.push({
-                        component: 'Input',
-                        directives: {
-                          '--font': 'generic | ' + font.family
-                        }
-                      })
-                      break
-                    case 'post':
-                      hacks.push({
-                        component: 'RichContent',
-                        directives: {
-                          '--font': 'generic | ' + font.family
-                        }
-                      })
-                      break
-                    case 'monospace':
-                      hacks.push({
-                        component: 'Root',
-                        directives: {
-                          '--monoFont': 'generic | ' + font.family
-                        }
-                      })
-                      break
-                  }
-                })
-                break
+          case 'underlay': {
+            if (value !== 'none') {
+              const newRule = {
+                component: 'Underlay',
+                directives: {}
              }
-              case 'underlay': {
-                if (value !== 'none') {
-                  const newRule = {
-                    component: 'Underlay',
-                    directives: {}
-                  }
-                  if (value === 'opaque') {
-                    newRule.directives.opacity = 1
-                    newRule.directives.background = '--wallpaper'
-                  }
-                  if (value === 'transparent') {
-                    newRule.directives.opacity = 0
-                  }
-                  hacks.push(newRule)
-                }
-                break
+              if (value === 'opaque') {
+                newRule.directives.opacity = 1
+                newRule.directives.background = '--wallpaper'
              }
+              if (value === 'transparent') {
+                newRule.directives.opacity = 0
+              }
+              hacks.push(newRule)
            }
-          })
+            break
+          }
+        }
+      })

-          const ruleset = [
-            ...theme2ruleset,
-            ...hacks
-          ]
+      const ruleset = [
+        ...theme2ruleset,
+        ...hacks
+      ]

-          applyTheme(
-            ruleset,
-            () => dispatch('setThemeApplied'),
-            themeDebug
-          )
-        })
-
-      return promise
+      applyTheme(
+        ruleset,
+        () => dispatch('setThemeApplied'),
+        themeDebug
+      )
    }
  }
 }
--- a/src/services/date_utils/date_utils.js
+++ b/src/services/date_utils/date_utils.js
@ -6,10 +6,13 @@ export const WEEK = 7 * DAY
 export const MONTH = 30 * DAY
 export const YEAR = 365.25 * DAY

-export const relativeTime = (date, nowThreshold = 1) => {
+export const relativeTimeMs = (date) => {
  if (typeof date === 'string') date = Date.parse(date)
+  return Math.abs(Date.now() - date)
+}
+export const relativeTime = (date, nowThreshold = 1) => {
  const round = Date.now() > date ? Math.floor : Math.ceil
-  const d = Math.abs(Date.now() - date)
+  const d = relativeTimeMs(date)
  const r = { num: round(d / YEAR), key: 'time.unit.years' }
  if (d < nowThreshold * SECOND) {
    r.num = 0
@ -57,3 +60,18 @@ export const secondsToUnit = (unit, amount) => {
    case 'days': return (1000 * amount) / DAY
  }
 }
+
+export const isSameYear = (a, b) => {
+  return a.getFullYear() === b.getFullYear()
+}
+
+export const isSameMonth = (a, b) => {
+  return a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth()
+}
+
+export const isSameDay = (a, b) => {
+  return a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+}
--- a/src/services/locale/locale.service.js
+++ b/src/services/locale/locale.service.js
@ -19,7 +19,7 @@ const internalToBackendLocaleMulti = codes => {

 const getLanguageName = (code) => {
  const specialLanguageNames = {
-    pdc: 'Pennsylvania Dutch',
+    pdc: 'Pennsilfaanisch-Deitsch',
    ja_easy: 'やさしいにほんご',
    'nan-TW': '臺語（閩南語）',
    zh: '简体中文',
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@ -43,16 +43,16 @@ const adoptStyleSheets = (styles) => {
  // is nothing to do here.
 }

-export const generateTheme = async (inputRuleset, callbacks, debug) => {
+export const generateTheme = (inputRuleset, callbacks, debug) => {
  const {
    onNewRule = (rule, isLazy) => {},
    onLazyFinished = () => {},
    onEagerFinished = () => {}
  } = callbacks

-  // Assuming that "worst case scenario background" is panel background since it's the most likely one
  const themes3 = init({
    inputRuleset,
+    // Assuming that "worst case scenario background" is panel background since it's the most likely one
    ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(),
    debug
  })
@ -146,11 +146,11 @@ export const tryLoadCache = () => {
  }
 }

-export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
+export const applyTheme = (input, onFinish = (data) => {}, debug) => {
  const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
  const lazyStyles = createStyleSheet(LAZY_STYLE_ID)

-  const { lazyProcessFunc } = await generateTheme(
+  const { lazyProcessFunc } = generateTheme(
    input,
    {
      onNewRule (rule, isLazy) {
@ -185,8 +185,6 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
  )

  setTimeout(lazyProcessFunc, 0)
-
-  return Promise.resolve()
 }

 const extractStyleConfig = ({
--- a/static/pleromatan_orz.png
+++ b/static/pleromatan_orz.png
--- a/static/pleromatan_orz_fox.png
+++ b/static/pleromatan_orz_fox.png
Author	SHA1	Message	Date
Henry Jameson	facf0de397	Merge branch 'tusooa/date-absolute' into shigusegubu-themes3	2024-09-17 23:33:49 +03:00
Henry Jameson	1f84b79f4e	Merge branch 'splashscreen' into shigusegubu-themes3	2024-09-17 23:03:13 +03:00
Henry Jameson	05577aea54	replace toSorted with sort, add artist credit	2024-09-17 22:57:39 +03:00
Henry Jameson	7550b8cbd2	splashscreen is now smaller, big cleanup on aisle themes - removed a lot unnecessary sync/awaits and promises that were sequential anyway	2024-09-17 22:57:39 +03:00
Henry Jameson	6c5fc53789	fix production	2024-09-17 22:57:39 +03:00
Henry Jameson	5bbfa5ab25	attemt to fix production	2024-09-17 22:57:39 +03:00
Henry Jameson	2abde63afc	swap pleromatan_apology_fox location	2024-09-17 22:57:39 +03:00
Henry Jameson	dc4cbbe830	fix symlink	2024-09-17 22:57:39 +03:00
Henry Jameson	bfc1091f7f	ugh, json	2024-09-17 22:57:39 +03:00
Henry Jameson	6b37e5baec	actual escape for real this time	2024-09-17 22:57:39 +03:00
Henry Jameson	d7059dbf3d	escape	2024-09-17 22:57:39 +03:00
Henry Jameson	023c1d5ff0	oops	2024-09-17 22:57:39 +03:00
Henry Jameson	00df9c9c32	initial splashscreen implementation	2024-09-17 22:57:39 +03:00
HJ	8ee5122909	Merge branch 'add-pdc-language' into 'develop' add Pennsylvania Dutch to languages See merge request pleroma/pleroma-fe!1935	2024-09-14 23:31:53 +00:00
HJ	5ad5f4c51e	Apply 1 suggestion(s) to 1 file(s)	2024-09-14 20:23:06 +00:00
tusooa	d67180c1e6	Support displaying time in absolute format This adds two config items: useAbsoluteTimeFormat (boolean) and absoluteTimeFormatMinAgeDays (number). When `useAbsoluteTimeFormat` is true, the Timeago component will display absolute time if the time is at least `absoluteTimeFormatMinAgeDays` days from now. If `longFormat` prop is true, the fully formatted time is displayed. Otherwise, the format is determined by the `time` prop: (1) if `time` is on the same day of now, display hour and minute; (2) if `time` is in the same month of now, display day and hour; (3) if `time` is in the same year of now, display month and day; (4) otherwise, display year and month. If it should display relative time, the format is the same as before.	2024-09-14 00:10:46 -04:00