refactor(front): create channel modal in user profile

front/src/components/audio/ChannelForm.vue

@@ -9,6 +9,11 @@ import axios from 'axios'
 import AttachmentInput from '~/components/common/AttachmentInput.vue'
 import TagsSelector from '~/components/library/TagsSelector.vue'
 
+import Layout from '~/components/ui/Layout.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Input from '~/components/ui/Input.vue'
+import Pills from '~/components/ui/Pills.vue'
+
 interface Events {
   (e: 'category', contentCategory: ContentCategory): void
   (e: 'submittable', value: boolean): void
@@ -41,6 +46,10 @@ const newValues = reactive({
   metadata: { ...(props.object?.metadata ?? {}) }
 })
 
+const tagList = computed(() => ({
+  custom: newValues.tags
+}))
+
 const creating = computed(() => props.object === null)
 const categoryChoices = computed(() => [
   {
@@ -155,14 +164,12 @@ defineExpose({
 </script>
 
 <template>
-  <form
-    class="ui form"
+  <Layout form
     @submit.prevent.stop="submit"
   >
-    <div
+    <Alert
       v-if="errors.length > 0"
-      role="alert"
-      class="ui negative message"
+      red
     >
       <h4 class="header">
         {{ t('components.audio.ChannelForm.header.error') }}
@@ -175,7 +182,7 @@ defineExpose({
           {{ error }}
         </li>
       </ul>
-    </div>
+    </Alert>
     <template v-if="metadataChoices">
       <fieldset
         v-if="creating && step === 1"
@@ -199,7 +206,7 @@ defineExpose({
               :value="choice.value"
             >
             <label :for="`category-${choice.value}`">
-              <span :class="['right floated', 'placeholder', 'image', {circular: choice.value === 'music'}]" />
+              <span :class="['right floated', 'placeholder', 'image', 'shifted', {circular: choice.value === 'music'}]" />
               <strong>{{ choice.label }}</strong>
               <div class="ui small hidden divider" />
               {{ choice.helpText }}
@@ -207,34 +214,26 @@ defineExpose({
           </div>
         </div>
       </fieldset>
+
       <template v-if="!creating || step === 2">
         <div class="ui required field">
-          <label for="channel-name">
-            {{ t('components.audio.ChannelForm.label.name') }}
-          </label>
-          <input
+          <Input
             v-model="newValues.name"
             type="text"
             required
             :placeholder="labels.namePlaceholder"
-          >
+            :label="t('components.audio.ChannelForm.label.name')"
+          />
         </div>
         <div class="ui required field">
-          <label for="channel-username">
-            {{ t('components.audio.ChannelForm.label.username') }}
-          </label>
-          <div class="ui left labeled input">
-            <div class="ui basic label">
-              <span class="at symbol" />
-            </div>
-            <input
-              v-model="newValues.username"
-              type="text"
-              :required="creating"
-              :disabled="!creating"
-              :placeholder="labels.usernamePlaceholder"
-            >
-          </div>
+          <Input
+            v-model="newValues.username"
+            type="text"
+            :required="creating"
+            :disabled="!creating"
+            :placeholder="labels.usernamePlaceholder"
+            :label="t('components.audio.ChannelForm.label.username')"
+          />
           <template v-if="creating">
             <div class="ui small hidden divider" />
             <p>
@@ -255,13 +254,9 @@ defineExpose({
         <div class="ui stackable grid row">
           <div class="ten wide column">
             <div class="ui field">
-              <label for="channel-tags">
-                {{ t('components.audio.ChannelForm.label.tags') }}
-              </label>
-              <tags-selector
-                id="channel-tags"
-                v-model="newValues.tags"
-                :required="false"
+              <Pills
+                v-model="tagList"
+                :label="t('components.audio.ChannelForm.label.tags')"
               />
             </div>
           </div>
@@ -369,10 +364,10 @@ defineExpose({
               maxlength="255"
             >
           </div>
+          <p>
+            {{ t('components.audio.ChannelForm.help.podcastFields') }}
+          </p>
         </div>
-        <p>
-          {{ t('components.audio.ChannelForm.help.podcastFields') }}
-        </p>
       </template>
     </template>
     <div
@@ -383,5 +378,5 @@ defineExpose({
         {{ t('components.audio.ChannelForm.loader.loading') }}
       </div>
     </div>
-  </form>
+  </Layout>
 </template>

front/src/style/components/_placeholder.scss

@@ -1,8 +1,8 @@
 
 .placeholder.image {
   background-color: rgba(0,0,0,.08);
-  width: 3em;
-  height: 3em;
+  width: 48px;
+  height: 48px;
   &.large {
     width: 8em;
     height: 8em;
@@ -15,6 +15,9 @@
   &.static {
     animation: none;
   }
+  &.shifted {
+    margin-top: -15px;
+  }
 }
 
 .component-placeholder {

front/src/style/globals/_channels.scss

@@ -124,6 +124,11 @@
   display: block;
   padding: 1.5em;
   &.selected {
-    background-color: rgba(0, 0, 0, 0.05);
+    @include light-theme {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    @include dark-theme {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
   }
 }

front/src/views/auth/ProfileOverview.vue

@@ -39,16 +39,6 @@ const createForm = ref()
 
 <template>
   <section>
-    <div v-if="store.getters['ui/layoutVersion'] === 'small'">
-      <rendered-description
-        :content="object?.summary"
-        :field-name="'summary'"
-        :update-url="`users/${store.state.auth.username}/`"
-        :can-update="store.state.auth.authenticated && object?.full_username === store.state.auth.fullUsername"
-        @updated="emit('updated', $event)"
-      />
-      <div class="ui hidden divider" />
-    </div>
     <div>
       <h2 class="ui with-actions header">
         {{ t('views.auth.ProfileOverview.header.channels') }}
@@ -95,24 +85,18 @@ const createForm = ref()
           'artist.header'
       }`)"
     >
-      <div
-        ref="modalContent"
-        class="scrolling content"
-      >
-        <channel-form
-          ref="createForm"
-          :object="null"
-          :step="step"
-          @loading="loading = $event"
-          @submittable="submittable = $event"
-          @category="category = $event"
-          @errored="modalContent.scrollTop = 0"
-          @created="router.push({name: 'channels.detail', params: {id: $event.actor.preferred_username}})"
-        />
-        <div class="ui hidden divider" />
-      </div>
+      <channel-form
+        ref="createForm"
+        :object="null"
+        :step="step"
+        @loading="loading = $event"
+        @submittable="submittable = $event"
+        @category="category = $event"
+        @errored="modalContent.scrollTop = 0"
+        @created="router.push({name: 'channels.detail', params: {id: $event.actor.preferred_username}})"
+      />
       <template #actions>
-        <Button destructive
+        <Button secondary
           v-if="step === 1"
           autofocus
         >