add more files

app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue

@@ -10,7 +10,7 @@
         <span class="text-slate-900 dark:text-slate-25 text-normal font-medium">
           Profile picture
         </span>
-        <!-- <thumbnail src="" username="John Doe" size="72px" /> -->
+        <thumbnail src="" username="John Doe" size="72px" />
       </div>
       <personal-wrapper
         header="Personal message signature"
@@ -27,6 +27,52 @@
             :has-error="true"
             :error-message="$t('REGISTER.FULL_NAME.ERROR')"
           />
+          <form-select
+            name="timezone"
+            spacing="compact"
+            label="Ding"
+            placeholder="Ding"
+            class="max-w-xl"
+          >
+            <option
+              v-for="file in audioFiles"
+              :key="file.label"
+              :value="file.value"
+            >
+              {{ file.label }}
+            </option>
+          </form-select>
+          <div
+            class="flex flex-row p-2 justify-between max-w-xl h-10 rounded-md border border-solid border-slate-75 dark:border-slate-600"
+          >
+            <div
+              class="flex flex-row gap-1 border-r border-slate-75 justify-center items-center grow"
+            >
+              <input type="radio" name="hotkey" value="enter" />
+              <label>None</label>
+            </div>
+            <div
+              class="flex flex-row gap-1 border-r border-slate-75 justify-center items-center grow"
+            >
+              <input type="radio" name="hotkey" value="enter" />
+              <label>Assigned</label>
+            </div>
+            <div class="flex flex-row gap-1 grow justify-center items-center">
+              <input type="radio" name="hotkey" value="enter" />
+              <label>All</label>
+            </div>
+          </div>
+          <div class="flex flex-row gap-1 items-center justify-start">
+            <input
+              type="checkbox"
+              name="send"
+              :checked="true"
+              class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+            />
+            <label>
+              Send audio alerts only if the browser window is not active
+            </label>
+          </div>
         </template>
       </personal-wrapper>
 
@@ -56,15 +102,12 @@
   </div>
 </template>
 <script setup>
-import { ref } from 'vue';
 import MessageSignature from '../profile/MessageSignature.vue';
-// import Thumbnail from './Thumbnail.vue';
+import Thumbnail from './Thumbnail.vue';
 import PersonalWrapper from './PersonalWrapper.vue';
 import PreviewCard from 'dashboard/components/ui/PreviewCard.vue';
 import FormInput from 'v3/components/Form/Input.vue';
-const credentials = ref({
-  fullName: '',
-});
+import FormSelect from 'v3/components/Form/Select.vue';
 const keyOptions = [
   {
     key: 'enter',
@@ -79,4 +122,8 @@ const keyOptions = [
     content: 'Send messages by pressing the Enter key',
   },
 ];
+const audioFiles = [
+  { label: 'Ding', value: 'ding' },
+  { label: 'Dong', value: 'dong' },
+];
 </script>

app/javascript/dashboard/routes/dashboard/settings/personal/Thumbnail.vue

@@ -1,47 +1,37 @@
 <template>
   <div
+    class="relative rounded-xl"
     :class="thumbnailBoxClass"
     :style="{ height: size, width: size }"
     :title="title"
   >
-    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
-    <slot>
-      <img
-        v-show="shouldShowImage"
-        :src="src"
-        draggable="false"
-        :class="thumbnailClass"
-        @load="onImgLoad"
-        @error="onImgError"
-      />
-      <Avatar
-        v-show="!shouldShowImage"
-        :username="userNameWithoutEmoji"
-        :class="thumbnailClass"
-        :size="avatarSize"
-      />
-      <!-- Show image on hover -->
-      <img
-        v-show="!shouldShowImage"
-        src="/upload.png"
-        draggable="false"
-        :class="thumbnailClass"
-        @load="onImgLoad"
-        @error="onImgError"
-      />
-    </slot>
     <img
-      v-if="badgeSrc"
-      class="source-badge"
-      :style="badgeStyle"
-      :src="uploadImage"
-      alt="Badge"
+      class="rounded-xl"
+      src="https://picsum.photos/200"
+      draggable="false"
+      :class="thumbnailClass"
+      @load="onImgLoad"
+      @error="onImgError"
     />
     <div
-      v-if="showStatusIndicator"
-      :class="`source-badge user-online-status user-online-status--${status}`"
-      :style="statusStyle"
-    />
+      class="absolute select-none w-6 h-6 z-10 p-1 -top-2 -right-2 border border-white dark:border-white rounded-full flex items-center justify-center bg-slate-200 dark:bg-slate-700"
+    >
+      <fluent-icon
+        icon="dismiss"
+        size="16"
+        class="text-slate-700 dark:text-slate-200"
+      />
+    </div>
+    <div
+      :style="{ height: size, width: size }"
+      class="absolute top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
+    >
+      <fluent-icon
+        icon="avatar-upload"
+        size="32"
+        class="text-white dark:text-white"
+      />
+    </div>
   </div>
 </template>
 <script>

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -272,5 +272,6 @@
   "chevrons-left-outline": ["m11 17-5-5 5-5", "m18 17-5-5 5-5"],
   "chevron-left-single-outline": "m15 18-6-6 6-6",
   "chevrons-right-outline": ["m6 17 5-5-5-5", "m13 17 5-5-5-5"],
-  "chevron-right-single-outline": "m9 18 6-6-6-6"
+  "chevron-right-single-outline": "m9 18 6-6-6-6",
+  "avatar-upload-outline": "M19.754 11a.75.75 0 0 1 .743.648l.007.102v7a3.25 3.25 0 0 1-3.065 3.246l-.185.005h-11a3.25 3.25 0 0 1-3.244-3.066l-.006-.184V11.75a.75.75 0 0 1 1.494-.102l.006.102v7a1.75 1.75 0 0 0 1.607 1.745l.143.006h11A1.75 1.75 0 0 0 19 18.894l.005-.143V11.75a.75.75 0 0 1 .75-.75ZM6.22 7.216l4.996-4.996a.75.75 0 0 1 .976-.073l.084.072l5.005 4.997a.75.75 0 0 1-.976 1.134l-.084-.073l-3.723-3.716l.001 11.694a.75.75 0 0 1-.648.743l-.102.007a.75.75 0 0 1-.743-.648L11 16.255V4.558L7.28 8.277a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.977l.073-.084l4.996-4.996L6.22 7.216Z"
 }

app/javascript/v3/views/auth/signup/components/Signup/Form.vue

@@ -83,7 +83,7 @@ import { required, minLength, email } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import alertMixin from 'shared/mixins/alertMixin';
-import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals ';
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
 import FormInput from '../../../../../components/Form/Input.vue';
 import SubmitButton from '../../../../../components/Button/SubmitButton.vue';