From 7dc22774532872fc99aa7768cf299ab623e9d155 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 9 Jan 2023 13:02:16 -0500
Subject: Use stylelint

---
 src/App.scss | 78 ++++++++++++++++++++++++++++++++----------------------------
 1 file changed, 42 insertions(+), 36 deletions(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index 75b2667c..0d2daa7d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,5 +1,7 @@
 // stylelint-disable rscss/class-format
-@import './_variables.scss';
+/* stylelint-disable no-descending-specificity */
+@import "./variables";
+@import "./panel";
 
 :root {
   --navbar-height: 3.5rem;
@@ -123,7 +125,7 @@ h4 {
   font-weight: 1000;
 }
 
-i[class*=icon-],
+i[class*="icon-"],
 .svg-inline--fa,
 .iconLetter {
   color: $fallback--icon;
@@ -132,7 +134,7 @@ i[class*=icon-],
 
 .button-unstyled:hover,
 a:hover {
-  > i[class*=icon-],
+  > i[class*="icon-"],
   > .svg-inline--fa,
   > .iconLetter {
     color: var(--text);
@@ -141,12 +143,11 @@ a:hover {
 
 nav {
   z-index: var(--ZI_navbar);
-  color: var(--topBarText);
   background-color: $fallback--fg;
   background-color: var(--topBar, $fallback--fg);
   color: $fallback--faint;
   color: var(--faint, $fallback--faint);
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 4px rgb(0 0 0 / 60%);
   box-shadow: var(--topBarShadow);
   box-sizing: border-box;
   height: var(--navbar-height);
@@ -191,13 +192,11 @@ nav {
 }
 
 .underlay {
-  grid-column-start: 1;
-  grid-column-end: span 3;
-  grid-row-start: 1;
-  grid-row-end: 1;
+  grid-column: 1 / span 3;
+  grid-row: 1 / 1;
   pointer-events: none;
-  background-color: rgba(0, 0, 0, 0.15);
-  background-color: var(--underlay, rgba(0, 0, 0, 0.15));
+  background-color: rgb(0 0 0 / 15%);
+  background-color: var(--underlay, rgb(0 0 0 / 15%));
   z-index: -1000;
 }
 
@@ -215,8 +214,10 @@ nav {
   grid-template-columns:
     var(--effectiveSidebarColumnWidth)
     var(--effectiveContentColumnWidth);
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
   grid-template-areas: "sidebar content";
   grid-template-rows: 1fr;
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
   box-sizing: border-box;
   margin: 0 auto;
   align-content: flex-start;
@@ -231,8 +232,7 @@ nav {
     display: grid;
     grid-template-columns: 100%;
     box-sizing: border-box;
-    grid-row-start: 1;
-    grid-row-end: 1;
+    grid-row: 1 / 1;
     margin: 0 calc(var(--___columnMargin) / 2);
     padding: calc(var(--___columnMargin)) 0;
     row-gap: var(--___columnMargin);
@@ -307,7 +307,7 @@ nav {
     align-content: start;
   }
 
-  &.-reverse:not(.-wide):not(.-mobile) {
+  &.-reverse:not(.-wide, .-mobile) {
     grid-template-columns:
       var(--effectiveContentColumnWidth)
       var(--effectiveSidebarColumnWidth);
@@ -336,11 +336,8 @@ nav {
     padding: 0;
 
     .column {
-      margin-left: 0;
-      margin-right: 0;
       padding-top: 0;
-      margin-top: var(--navbar-height);
-      margin-bottom: 0;
+      margin-top: var(--navbar-height) 0 0 0;
     }
 
     .panel-heading,
@@ -389,7 +386,7 @@ nav {
     background: transparent;
   }
 
-  i[class*=icon-],
+  i[class*="icon-"],
   .svg-inline--fa {
     color: $fallback--text;
     color: var(--btnText, $fallback--text);
@@ -400,12 +397,15 @@ nav {
   }
 
   &:hover {
-    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
+    box-shadow: 0 0 4px rgb(255 255 255 / 30%);
     box-shadow: var(--buttonHoverShadow);
   }
 
   &:active {
-    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
+    box-shadow:
+      0 0 4px 0 rgb(255 255 255 / 30%),
+      0 1px 0 0 rgb(0 0 0 / 20%) inset,
+      0 -1px 0 0 rgb(255 255 255 / 20%) inset;
     box-shadow: var(--buttonPressedShadow);
     color: $fallback--text;
     color: var(--btnPressedText, $fallback--text);
@@ -438,7 +438,10 @@ nav {
     color: var(--btnToggledText, $fallback--text);
     background-color: $fallback--fg;
     background-color: var(--btnToggled, $fallback--fg);
-    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
+    box-shadow:
+      0 0 4px 0 rgb(255 255 255 / 30%),
+      0 1px 0 0 rgb(0 0 0 / 20%) inset,
+      0 -1px 0 0 rgb(255 255 255 / 20%) inset;
     box-shadow: var(--buttonPressedShadow);
 
     svg,
@@ -503,7 +506,10 @@ textarea,
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 rgba(0, 0, 0, 1) inset;
+  box-shadow:
+    0 1px 0 0 rgb(0 0 0 / 20%) inset,
+    0 -1px 0 0 rgb(255 255 255 / 20%) inset,
+    0 0 2px 0 rgb(0 0 0 / 100%) inset;
   box-shadow: var(--inputShadow);
   background-color: $fallback--fg;
   background-color: var(--input, $fallback--fg);
@@ -521,13 +527,13 @@ textarea,
   padding: 0 var(--_padding);
 
   &:disabled,
-  &[disabled=disabled],
+  &[disabled="disabled"],
   &.disabled {
     cursor: not-allowed;
     opacity: 0.5;
   }
 
-  &[type=range] {
+  &[type="range"] {
     background: none;
     border: none;
     margin: 0;
@@ -535,7 +541,7 @@ textarea,
     flex: 1;
   }
 
-  &[type=radio] {
+  &[type="radio"] {
     display: none;
 
     &:checked + label::before {
@@ -555,7 +561,7 @@ textarea,
     + label::before {
       flex-shrink: 0;
       display: inline-block;
-      content: '';
+      content: "";
       transition: box-shadow 200ms;
       width: 1.1em;
       height: 1.1em;
@@ -575,7 +581,7 @@ textarea,
     }
   }
 
-  &[type=checkbox] {
+  &[type="checkbox"] {
     display: none;
 
     &:checked + label::before {
@@ -594,7 +600,7 @@ textarea,
     + label::before {
       flex-shrink: 0;
       display: inline-block;
-      content: '✓';
+      content: "✓";
       transition: color 200ms;
       width: 1.1em;
       height: 1.1em;
@@ -634,10 +640,10 @@ option {
 }
 
 .hide-number-spinner {
-  -moz-appearance: textfield;
+  appearance: textfield;
 
-  &[type=number]::-webkit-inner-spin-button,
-  &[type=number]::-webkit-outer-spin-button {
+  &[type="number"]::-webkit-inner-spin-button,
+  &[type="number"]::-webkit-outer-spin-button {
     opacity: 0;
     display: none;
   }
@@ -669,8 +675,6 @@ option {
   }
 }
 
-@import './panel.scss';
-
 .fa {
   color: grey;
 }
@@ -686,7 +690,7 @@ option {
   max-width: 10em;
   min-width: 1.7em;
   height: 1.3em;
-  padding: 0.15em 0.15em;
+  padding: 0.15em;
   vertical-align: middle;
   font-weight: normal;
   font-style: normal;
@@ -789,7 +793,8 @@ option {
 
 .fa-old-padding {
   &.iconLetter,
-  &.svg-inline--fa, &-layer {
+  &.svg-inline--fa,
+  &-layer {
     padding: 0 0.3em;
   }
 }
@@ -883,3 +888,4 @@ option {
 .fade-leave-active {
   opacity: 0;
 }
+/* stylelint-enable no-descending-specificity */
-- 
cgit v1.2.3-70-g09d2


From a28032fa58ff341b8815a0651d621ed358efd168 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 13 Jan 2023 00:37:42 -0500
Subject: Disable no-shorthand for certain props for better readability

---
 .stylelintrc.json                           | 17 ++++++++++++++++-
 src/App.scss                                |  2 --
 src/components/desktop_nav/desktop_nav.scss |  2 --
 src/components/user_card/user_card.scss     |  9 ++++-----
 4 files changed, 20 insertions(+), 10 deletions(-)

(limited to 'src/App.scss')

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 7517362c..d6689cc0 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -21,6 +21,21 @@
     "import-notation": null,
     "custom-property-pattern": null,
     "keyframes-name-pattern": null,
-    "scss/operator-no-newline-after": null
+    "scss/operator-no-newline-after": null,
+    "declaration-block-no-redundant-longhand-properties": [
+      true,
+      {
+        "ignoreShorthands": [
+          "grid-template",
+          "margin",
+          "padding",
+          "border",
+          "border-width",
+          "border-style",
+          "border-color",
+          "border-radius"
+        ]
+      }
+    ]
   }
 }
diff --git a/src/App.scss b/src/App.scss
index 0d2daa7d..be5dce9d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -214,10 +214,8 @@ nav {
   grid-template-columns:
     var(--effectiveSidebarColumnWidth)
     var(--effectiveContentColumnWidth);
-  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
   grid-template-areas: "sidebar content";
   grid-template-rows: 1fr;
-  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
   box-sizing: border-box;
   margin: 0 auto;
   align-content: flex-start;
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 00f434bf..c7e02936 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -14,11 +14,9 @@
 
   .inner-nav {
     display: grid;
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
     grid-template-rows: var(--navbar-height);
     grid-template-columns: 2fr auto 2fr;
     grid-template-areas: "sitename logo actions";
-    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
     box-sizing: border-box;
     padding: 0 1.2em;
     margin: auto;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 942673c4..d56b6672 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -43,11 +43,10 @@
     mask-composite: exclude;
     background-size: cover;
     mask-size: 100% 60%;
-    border-radius:
-      calc(var(--__roundnessTop, --panelRadius) - 1px)
-      calc(var(--__roundnessTop, --panelRadius) - 1px)
-      calc(var(--__roundnessBottom, --panelRadius) - 1px)
-      calc(var(--__roundnessBottom, --panelRadius) - 1px);
+    border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
+    border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
+    border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
+    border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
     background-color: var(--profileBg);
     z-index: -2;
 
-- 
cgit v1.2.3-70-g09d2


From bd58ccd3b6db00c98520987c42fdea40d8e8dd2f Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 15 Jan 2023 22:39:20 -0500
Subject: Fix mobile layout margin

---
 src/App.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index be5dce9d..1c4c8941 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -335,7 +335,7 @@ nav {
 
     .column {
       padding-top: 0;
-      margin-top: var(--navbar-height) 0 0 0;
+      margin: var(--navbar-height) 0 0 0;
     }
 
     .panel-heading,
-- 
cgit v1.2.3-70-g09d2


From 902954b29825647eaf5435c89e379ef4babe7931 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 9 Feb 2023 21:35:56 -0500
Subject: Use class to style screenreader-only text

---
 src/App.scss                                               | 14 ++++++++++++--
 src/_mixins.scss                                           | 12 ------------
 src/components/checkbox/checkbox.vue                       |  3 +--
 .../screen_reader_notice/screen_reader_notice.vue          | 10 +---------
 .../settings_modal/helpers/modified_indicator.vue          |  2 +-
 5 files changed, 15 insertions(+), 26 deletions(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index 1c4c8941..3f352e8d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -580,8 +580,6 @@ textarea,
   }
 
   &[type="checkbox"] {
-    display: none;
-
     &:checked + label::before {
       color: $fallback--text;
       color: var(--inputText, $fallback--text);
@@ -887,3 +885,15 @@ option {
   opacity: 0;
 }
 /* stylelint-enable no-descending-specificity */
+
+.visible-for-screenreader-only {
+  display: block;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  visibility: visible;
+  clip: rect(0 0 0 0);
+  padding: 0;
+  position: absolute;
+}
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 677bc210..e99fe26f 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -16,15 +16,3 @@
     @content;
   }
 }
-
-@mixin visible-for-screenreader-only {
-  display: block;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  visibility: visible;
-  clip: rect(0 0 0 0);
-  padding: 0;
-  position: absolute;
-}
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index ac7acd52..42f89be9 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -5,6 +5,7 @@
   >
     <input
       type="checkbox"
+      class="visible-for-screenreader-only"
       :disabled="disabled"
       :checked="modelValue"
       :indeterminate="indeterminate"
@@ -85,8 +86,6 @@ export default {
   }
 
   input[type="checkbox"] {
-    @include visible-for-screenreader-only;
-
     &:checked + .checkbox-indicator::before {
       color: $fallback--text;
       color: var(--inputText, $fallback--text);
diff --git a/src/components/screen_reader_notice/screen_reader_notice.vue b/src/components/screen_reader_notice/screen_reader_notice.vue
index 1cd908ae..8384ae6b 100644
--- a/src/components/screen_reader_notice/screen_reader_notice.vue
+++ b/src/components/screen_reader_notice/screen_reader_notice.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="screen-reader-text"
+    class="visible-for-screenreader-only"
     :aria-live="ariaLive"
   >
     {{ currentText }}
@@ -8,11 +8,3 @@
 </template>
 
 <script src="./screen_reader_notice.js"></script>
-
-<style lang="scss">
-@import "../../mixins";
-
-.screen-reader-text {
-  @include visible-for-screenreader-only;
-}
-</style>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index 8311533a..45db3fc2 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -5,12 +5,12 @@
   >
     <Popover
       trigger="hover"
+      :trigger-attrs="{ 'aria-label': $t('settings.setting_changed') }"
     >
       <template #trigger>
         &nbsp;
         <FAIcon
           icon="wrench"
-          :aria-label="$t('settings.setting_changed')"
         />
       </template>
       <template #content>
-- 
cgit v1.2.3-70-g09d2


From 7bb28bb23c61e2d648eecf5d59969d32631f78e8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 29 Mar 2023 00:58:07 +0300
Subject: frontends tab initial implementation, now you can (re)install
 frontends! yay!

---
 src/App.scss                                       | 22 ++++++-
 .../settings_modal/admin_tabs/frontends_tab.js     | 58 +++++++++++++++++
 .../settings_modal/admin_tabs/frontends_tab.scss   | 13 ++++
 .../settings_modal/admin_tabs/frontends_tab.vue    | 72 ++++++++++++++++++++++
 src/components/settings_modal/settings_modal.scss  |  1 -
 .../settings_modal/settings_modal_admin_content.js |  8 +--
 src/i18n/en.json                                   |  8 +++
 src/modules/adminSettings.js                       | 15 +++++
 src/services/api/api.service.js                    | 42 ++++++++++++-
 9 files changed, 229 insertions(+), 10 deletions(-)
 create mode 100644 src/components/settings_modal/admin_tabs/frontends_tab.js
 create mode 100644 src/components/settings_modal/admin_tabs/frontends_tab.scss
 create mode 100644 src/components/settings_modal/admin_tabs/frontends_tab.vue

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index 3f352e8d..149d640f 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -645,6 +645,19 @@ option {
   }
 }
 
+.cards-list {
+  display: grid;
+  grid-auto-flow: row dense;
+  grid-template-columns: 1fr 1fr;
+
+  li {
+    border: 1px solid var(--border);
+    border-radius: var(--inputRadius);
+    padding: 0.5em;
+    margin: 0.25em;
+  }
+}
+
 .btn-block {
   display: block;
   width: 100%;
@@ -655,16 +668,19 @@ option {
   display: inline-flex;
   vertical-align: middle;
 
-  button {
+  button,
+  .button-dropdown {
     position: relative;
     flex: 1 1 auto;
 
-    &:not(:last-child) {
+    &:not(:last-child),
+    &:not(:last-child) .button-default {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
 
-    &:not(:first-child) {
+    &:not(:first-child),
+    &:not(:first-child) .button-default {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
new file mode 100644
index 00000000..a5d33cbe
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -0,0 +1,58 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import Popover from 'src/components/popover/popover.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const FrontendsTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    GroupSetting,
+    Popover
+  },
+  created () {
+    if (this.user.rights.admin) {
+      this.$store.dispatch('loadFrontendsStuff')
+    }
+  },
+  computed: {
+    frontends () {
+      return this.$store.state.adminSettings.frontends
+    },
+    ...SharedComputedObject()
+  },
+  methods: {
+    update (frontend, suggestRef) {
+      const ref = suggestRef || frontend.refs[0]
+      const { name } = frontend
+      const payload = { name, ref }
+
+      this.$store.state.api.backendInteractor.installFrontend({ payload })
+        .then((externalUser) => {
+          this.$store.dispatch('loadFrontendsStuff')
+        })
+    }
+  }
+}
+
+export default FrontendsTab
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
new file mode 100644
index 00000000..1e1881ff
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
@@ -0,0 +1,13 @@
+.frontends-tab {
+  .cards-list {
+    padding: 0;
+  }
+
+  dd {
+    text-overflow: ellipsis;
+    word-wrap: nowrap;
+    white-space: nowrap;
+    overflow-x: hidden;
+    max-width: 80%;
+  }
+}
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
new file mode 100644
index 00000000..48649dfb
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="frontends-tab" :label="$t('admin_dash.tabs.frontends')">
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.tabs.frontends') }}</h2>
+      <ul class="setting-list cards-list">
+        <li v-for="frontend in frontends" :key="frontend.name">
+          <strong>{{ frontend.name }}</strong>
+          <dl>
+            <dt>{{ $t('admin_dash.frontend.repository') }}</dt>
+            <dd><a :href="frontend.git">{{ frontend.git }}</a></dd>
+            <dt v-if="expertLevel">{{ $t('admin_dash.frontend.versions') }}</dt>
+            <dd v-if="expertLevel">{{ frontend.refs }}</dd>
+            <dt v-if="expertLevel">{{ $t('admin_dash.frontend.build_url') }}</dt>
+            <dd v-if="expertLevel">{{ frontend.build_url }}</dd>
+          </dl>
+          <div>
+            <span class="btn-group">
+              <button
+                class="button button-default btn"
+                type="button"
+                :title="$t('admin_dash.frontend.update')"
+                @click="update(frontend)"
+              >
+                {{
+                    frontend.installed
+                    ? $t('admin_dash.frontend.reinstall')
+                    : $t('admin_dash.frontend.install')
+                }}
+              </button>
+              <Popover
+                v-if="frontend.refs.length > 1"
+                trigger="click"
+                class="button-dropdown"
+                placement="bottom"
+              >
+                <template #content>
+                  <div class="dropdown-menu">
+                    <button
+                      v-for="ref in frontend.refs"
+                      :key="ref"
+                      class="button-default dropdown-item"
+                      @click="update(frontend, ref)"
+                    >
+                      <i18n-t keypath="admin_dash.frontend.install_version">
+                        <template #version>
+                          <code>{{ ref }}</code>
+                        </template>
+                      </i18n-t>
+                    </button>
+                  </div>
+                </template>
+                <template #trigger>
+                  <button
+                    class="button button-default btn"
+                    type="button"
+                    :title="$t('admin_dash.frontend.update')"
+                  >
+                    <FAIcon icon="chevron-down" />
+                  </button>
+                </template>
+              </Popover>
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./frontends_tab.js"></script>
+
+<style lang="scss" src="./frontends_tab.scss"></style>
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 4cb506f9..98de736b 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -43,7 +43,6 @@
 
       .btn {
         min-height: 2em;
-        min-width: 10em;
         padding: 0 2em;
       }
     }
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
index 1c239e59..b7c0de57 100644
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -1,9 +1,8 @@
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 
-import DataImportExportTab from './tabs/data_import_export_tab.vue'
-import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
 import InstanceTab from './admin_tabs/instance_tab.vue'
 import LimitsTab from './admin_tabs/limits_tab.vue'
+import FrontendsTab from './admin_tabs/frontends_tab.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -32,10 +31,9 @@ const SettingsModalAdminContent = {
   components: {
     TabSwitcher,
 
-    DataImportExportTab,
-    MutesAndBlocksTab,
     InstanceTab,
-    LimitsTab
+    LimitsTab,
+    FrontendsTab
   },
   computed: {
     user () {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 86ae7f06..ede5d494 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -873,6 +873,14 @@
       "users": "User profile limits",
       "profile_fields": "Profile fields limits",
       "user_uploads": "Profile media limits"
+    },
+    "frontend": {
+      "repository": "Repository link",
+      "versions": "Available versions",
+      "build_url": "Build URL",
+      "reinstall": "Reinstall",
+      "install": "Install",
+      "install_version": "Install version {version}"
     }
   },
   "time": {
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index b8265949..cad9c0ca 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -1,6 +1,7 @@
 import { set, get, cloneDeep, differenceWith, isEqual, flatten } from 'lodash'
 
 export const defaultState = {
+  frontends: [],
   loaded: false,
   needsReboot: null,
   config: null,
@@ -23,6 +24,16 @@ const adminSettingsStorage = {
       state.loaded = false
       state.dbConfigEnabled = false
     },
+    setAvailableFrontends (state, { frontends }) {
+      state.frontends = frontends.map(f => {
+        if (f.name === 'pleroma-fe') {
+          f.refs = ['master', 'develop']
+        } else {
+          f.refs = [f.ref]
+        }
+        return f
+      })
+    },
     updateAdminSettings (state, { config, modifiedPaths }) {
       state.loaded = true
       state.dbConfigEnabled = true
@@ -48,6 +59,10 @@ const adminSettingsStorage = {
     }
   },
   actions: {
+    loadFrontendsStuff ({ state, rootState, dispatch, commit }) {
+      rootState.api.backendInteractor.fetchAvailableFrontends()
+        .then(frontends => commit('setAvailableFrontends', { frontends }))
+    },
     loadAdminStuff ({ state, rootState, dispatch, commit }) {
       rootState.api.backendInteractor.fetchInstanceDBConfig()
         .then(backendDbConfig => {
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 073f40a3..56e7de71 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -110,6 +110,8 @@ const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcemen
 
 const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
 const PLEROMA_ADMIN_DESCRIPTIONS_URL = '/api/pleroma/admin/config/descriptions'
+const PLEROMA_ADMIN_FRONTENDS_URL = '/api/pleroma/admin/frontends'
+const PLEROMA_ADMIN_FRONTENDS_INSTALL_URL = '/api/pleroma/admin/frontends/install'
 
 const oldfetch = window.fetch
 
@@ -1693,6 +1695,21 @@ const fetchInstanceConfigDescriptions = ({ credentials }) => {
     })
 }
 
+const fetchAvailableFrontends = ({ credentials }) => {
+  return fetch(PLEROMA_ADMIN_FRONTENDS_URL, {
+    headers: authHeaders(credentials)
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
 const pushInstanceDBConfig = ({ credentials, payload }) => {
   return fetch(PLEROMA_ADMIN_CONFIG_URL, {
     headers: {
@@ -1714,6 +1731,27 @@ const pushInstanceDBConfig = ({ credentials, payload }) => {
     })
 }
 
+const installFrontend = ({ credentials, payload }) => {
+  return fetch(PLEROMA_ADMIN_FRONTENDS_INSTALL_URL, {
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      ...authHeaders(credentials)
+    },
+    method: 'POST',
+    body: JSON.stringify(payload)
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
 const apiService = {
   verifyCredentials,
   fetchTimeline,
@@ -1830,7 +1868,9 @@ const apiService = {
   adminFetchAnnouncements,
   fetchInstanceDBConfig,
   fetchInstanceConfigDescriptions,
-  pushInstanceDBConfig
+  fetchAvailableFrontends,
+  pushInstanceDBConfig,
+  installFrontend
 }
 
 export default apiService
-- 
cgit v1.2.3-70-g09d2


From ac75d051b720da2c47393de6b35663afe50d37cc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 29 Mar 2023 23:26:57 +0300
Subject: better frontends tab, now you can set default frontend

---
 src/App.scss                                       |   1 +
 .../settings_modal/admin_tabs/frontends_tab.js     |   6 +
 .../settings_modal/admin_tabs/frontends_tab.scss   |   2 +-
 .../settings_modal/admin_tabs/frontends_tab.vue    | 204 +++++++++++++++------
 .../settings_modal/helpers/group_setting.js        |   1 -
 src/components/settings_modal/helpers/setting.js   |   4 +-
 .../helpers/shared_computed_object.js              |   3 +
 src/components/settings_modal/settings_modal.scss  |   3 +
 .../settings_modal/settings_modal_admin_content.js |   3 +
 .../settings_modal_admin_content.vue               |   1 +
 src/i18n/en.json                                   |  11 +-
 11 files changed, 177 insertions(+), 62 deletions(-)

(limited to 'src/App.scss')

diff --git a/src/App.scss b/src/App.scss
index 149d640f..ef68ac50 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -646,6 +646,7 @@ option {
 }
 
 .cards-list {
+  list-style: none;
   display: grid;
   grid-auto-flow: row dense;
   grid-template-columns: 1fr 1fr;
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
index a5d33cbe..a2c27c2a 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -51,6 +51,12 @@ const FrontendsTab = {
         .then((externalUser) => {
           this.$store.dispatch('loadFrontendsStuff')
         })
+    },
+    setDefault (frontend, suggestRef) {
+      const ref = suggestRef || frontend.refs[0]
+      const { name } = frontend
+
+      this.$store.commit('updateAdminDraft', { path: [':pleroma', ':frontends', ':primary'], value: { name, ref } })
     }
   }
 }
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
index 1e1881ff..e3e04bc6 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.scss
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
@@ -8,6 +8,6 @@
     word-wrap: nowrap;
     white-space: nowrap;
     overflow-x: hidden;
-    max-width: 80%;
+    max-width: 10em;
   }
 }
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 48649dfb..71bbfa69 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -2,67 +2,157 @@
   <div class="frontends-tab" :label="$t('admin_dash.tabs.frontends')">
     <div class="setting-item">
       <h2>{{ $t('admin_dash.tabs.frontends') }}</h2>
-      <ul class="setting-list cards-list">
-        <li v-for="frontend in frontends" :key="frontend.name">
-          <strong>{{ frontend.name }}</strong>
-          <dl>
-            <dt>{{ $t('admin_dash.frontend.repository') }}</dt>
-            <dd><a :href="frontend.git">{{ frontend.git }}</a></dd>
-            <dt v-if="expertLevel">{{ $t('admin_dash.frontend.versions') }}</dt>
-            <dd v-if="expertLevel">{{ frontend.refs }}</dd>
-            <dt v-if="expertLevel">{{ $t('admin_dash.frontend.build_url') }}</dt>
-            <dd v-if="expertLevel">{{ frontend.build_url }}</dd>
-          </dl>
-          <div>
-            <span class="btn-group">
-              <button
-                class="button button-default btn"
-                type="button"
-                :title="$t('admin_dash.frontend.update')"
-                @click="update(frontend)"
-              >
-                {{
-                    frontend.installed
-                    ? $t('admin_dash.frontend.reinstall')
-                    : $t('admin_dash.frontend.install')
-                }}
-              </button>
-              <Popover
-                v-if="frontend.refs.length > 1"
-                trigger="click"
-                class="button-dropdown"
-                placement="bottom"
+      <p>{{ $t('admin_dash.frontend.wip_notice') }}</p>
+      <ul class="setting-list">
+        <li>
+          <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
+          <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
+          <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:frontends.:primary.name">
+            NAME
+          </StringSetting>
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:frontends.:primary.ref">
+            REF
+          </StringSetting>
+        </li>
+        <li>
+          <GroupSetting path=":pleroma.:frontends.:primary"/>
+        </li>
+      </ul>
+      <div class="setting-list">
+        <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
+        <ul class="cards-list">
+          <li v-for="frontend in frontends" :key="frontend.name">
+            <strong>{{ frontend.name }}</strong>
+            {{ ' ' }}
+            <span v-if="adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name">
+              <i18n-t
+                keypath="admin_dash.frontend.is_default"
+                v-if="adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]"
+              />
+              <i18n-t
+                keypath="admin_dash.frontend.is_default_custom"
+                v-else
               >
-                <template #content>
-                  <div class="dropdown-menu">
+                <template #version>
+                  <code>{{ adminDraft[':pleroma'][':frontends'][':primary'].ref }}</code>
+                </template>
+              </i18n-t>
+            </span>
+            <dl>
+              <dt>{{ $t('admin_dash.frontend.repository') }}</dt>
+              <dd><a :href="frontend.git" target="_blank">{{ frontend.git }}</a></dd>
+              <template v-if="expertLevel">
+                <dt>{{ $t('admin_dash.frontend.versions') }}</dt>
+                <dd v-for="ref in frontend.refs" :key="ref"><code>{{ ref }}</code></dd>
+              </template>
+              <dt v-if="expertLevel">{{ $t('admin_dash.frontend.build_url') }}</dt>
+              <dd v-if="expertLevel"><a :href="frontend.build_url" target="_blank">{{ frontend.build_url }}</a></dd>
+            </dl>
+            <div>
+              <span class="btn-group">
+                <button
+                  class="button button-default btn"
+                  type="button"
+                  :title="$t('admin_dash.frontend.update')"
+                  @click="update(frontend)"
+                >
+                  {{
+                      frontend.installed
+                      ? $t('admin_dash.frontend.reinstall')
+                      : $t('admin_dash.frontend.install')
+                  }}
+                </button>
+                <Popover
+                  v-if="frontend.refs.length > 1"
+                  trigger="click"
+                  class="button-dropdown"
+                  placement="bottom"
+                >
+                  <template #content>
+                    <div class="dropdown-menu">
+                      <button
+                        v-for="ref in frontend.refs"
+                        :key="ref"
+                        class="button-default dropdown-item"
+                        @click="update(frontend, ref)"
+                      >
+                        <i18n-t keypath="admin_dash.frontend.install_version">
+                          <template #version>
+                            <code>{{ ref }}</code>
+                          </template>
+                        </i18n-t>
+                      </button>
+                    </div>
+                  </template>
+                  <template #trigger>
                     <button
-                      v-for="ref in frontend.refs"
-                      :key="ref"
-                      class="button-default dropdown-item"
-                      @click="update(frontend, ref)"
+                      class="button button-default btn dropdown-button"
+                      type="button"
+                      :title="$t('admin_dash.frontend.update')"
                     >
-                      <i18n-t keypath="admin_dash.frontend.install_version">
-                        <template #version>
-                          <code>{{ ref }}</code>
-                        </template>
-                      </i18n-t>
+                      <FAIcon icon="chevron-down" />
                     </button>
-                  </div>
-                </template>
-                <template #trigger>
-                  <button
-                    class="button button-default btn"
-                    type="button"
-                    :title="$t('admin_dash.frontend.update')"
-                  >
-                    <FAIcon icon="chevron-down" />
-                  </button>
-                </template>
-              </Popover>
-            </span>
-          </div>
-        </li>
-      </ul>
+                  </template>
+                </Popover>
+              </span>
+              <span class="btn-group" v-if="frontend.name !== 'admin-fe'">
+                <button
+                  class="button button-default btn"
+                  type="button"
+                  :disabled="
+                             adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
+                             adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
+                             "
+                  :title="$t('admin_dash.frontend.update')"
+                  @click="setDefault(frontend)"
+                >
+                  {{
+                      $t('admin_dash.frontend.set_default')
+                  }}
+                </button>
+                {{ ' ' }}
+                <Popover
+                  v-if="frontend.refs.length > 1"
+                  trigger="click"
+                  class="button-dropdown"
+                  placement="bottom"
+                >
+                  <template #content>
+                    <div class="dropdown-menu">
+                      <button
+                        v-for="ref in frontend.refs.slice(1)"
+                        :key="ref"
+                        class="button-default dropdown-item"
+                        @click="setDefault(frontend, ref)"
+                      >
+                        <i18n-t keypath="admin_dash.frontend.set_default_version">
+                          <template #version>
+                            <code>{{ ref }}</code>
+                          </template>
+                        </i18n-t>
+                      </button>
+                    </div>
+                  </template>
+                  <template #trigger>
+                    <button
+                      class="button button-default btn dropdown-button"
+                      type="button"
+                      :title="$t('admin_dash.frontend.update')"
+                    >
+                      <FAIcon icon="chevron-down" />
+                    </button>
+                  </template>
+                </Popover>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/settings_modal/helpers/group_setting.js b/src/components/settings_modal/helpers/group_setting.js
index 12a49000..23a2a202 100644
--- a/src/components/settings_modal/helpers/group_setting.js
+++ b/src/components/settings_modal/helpers/group_setting.js
@@ -7,7 +7,6 @@ export default {
   computed: {
     ...Setting.computed,
     isDirty () {
-      console.log(this.state, this.draft)
       return !isEqual(this.state, this.draft)
     }
   }
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index d2e1a6f4..4f0be448 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -61,7 +61,7 @@ export default {
       // TODO allow passing shared draft object?
       get () {
         if (this.realSource === 'admin') {
-          return get(this.$store.state.adminSettings.draft, this.path)
+          return get(this.$store.state.adminSettings.draft, this.canonPath)
         } else {
           return this.localDraft
         }
@@ -75,7 +75,7 @@ export default {
       }
     },
     state () {
-      const value = get(this.configSource, this.path)
+      const value = get(this.configSource, this.canonPath)
       if (value === undefined) {
         return this.defaultState
       } else {
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index d02db542..bb3d36ac 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -10,6 +10,9 @@ const SharedComputedObject = () => ({
   },
   adminConfig () {
     return this.$store.state.adminSettings.config
+  },
+  adminDraft () {
+    return this.$store.state.adminSettings.draft
   }
 })
 
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 98de736b..49ef83e0 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -43,6 +43,9 @@
 
       .btn {
         min-height: 2em;
+      }
+
+      .btn:not(.dropdown-button) {
         padding: 0 2em;
       }
     }
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
index b7c0de57..f94721ec 100644
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -51,6 +51,9 @@ const SettingsModalAdminContent = {
     adminDbLoaded () {
       return this.$store.state.adminSettings.loaded
     },
+    adminDescriptionsLoaded () {
+      return this.$store.state.adminSettings.descriptions !== null
+    },
     noDb () {
       return this.$store.state.adminSettings.dbConfigEnabled === false
     }
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
index ae670a90..a7a2ac9a 100644
--- a/src/components/settings_modal/settings_modal_admin_content.vue
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -1,5 +1,6 @@
 <template>
   <tab-switcher
+    v-if="adminDescriptionsLoaded && (noDb || adminDbLoaded)"
     ref="tabSwitcher"
     class="settings_tab-switcher"
     :side-tab-bar="true"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ede5d494..6ae31ee8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -879,8 +879,17 @@
       "versions": "Available versions",
       "build_url": "Build URL",
       "reinstall": "Reinstall",
+      "is_default": "(Default)",
+      "is_default_custom": "(Default, version: {version})",
       "install": "Install",
-      "install_version": "Install version {version}"
+      "install_version": "Install version {version}",
+      "set_default": "Set default",
+      "set_default_version": "Set version {version} as default",
+      "wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
+      "default_frontend": "Default front-end",
+      "default_frontend_tip": "Default front-end will be shown to all users. Currently there's no way to for a user to select personal front-end. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
+      "default_frontend_tip2": "WIP: Since Pleroma backend doesn't properly list all installed frontends you'll have to enter name and reference manually. List below provides shortcuts to fill the values.",
+      "available_frontends": "Available for install"
     }
   },
   "time": {
-- 
cgit v1.2.3-70-g09d2