feat: show disabled accounts

Signed-off-by: Sebastian <krupinski01@gmail.com>

src/components/composer/ComposerSender.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ComposerSenderIdentity } from '@/types/composer';
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 
 interface Props {
   modelValue: ComposerSenderIdentity | null
@@ -27,11 +27,6 @@ const items = computed<SenderListItem[]>(() => {
 
 const selectedValue = computed(() => props.modelValue?.address ?? null)
 
-const singleOptionLabel = computed(() => {
-  const onlyOption = props.options[0]
-  return onlyOption ? formatSenderLabel(onlyOption.label, onlyOption.address) : ''
-})
-
 const errorMessages = computed(() => {
   if (props.options.length === 0) {
     return ['No send-capable account is available.']
@@ -40,6 +35,18 @@ const errorMessages = computed(() => {
   return []
 })
 
+// Auto-select (and keep selected) the only send-capable account, since
+// there's no "from" UI shown for the user to pick it themselves.
+watch(
+  () => props.options,
+  options => {
+    if (options.length === 1 && props.modelValue?.address !== options[0].address) {
+      emit('update:modelValue', options[0])
+    }
+  },
+  { immediate: true },
+)
+
 function handleUpdate(value: string | null) {
   const match = value ? props.options.find(o => o.address === value) ?? null : null
   emit('update:modelValue', match)
@@ -51,19 +58,8 @@ function formatSenderLabel(label: string | null | undefined, address: string): s
 </script>
 
 <template>
-  <div class="composer-sender px-4 pt-4 pb-0">
+  <div v-if="options.length !== 1" class="composer-sender px-4 pt-4 pb-0">
-    <v-text-field
-      v-if="options.length === 1"
-      :model-value="singleOptionLabel"
-      label="From"
-      variant="outlined"
-      density="compact"
-      readonly
-      class="mb-2"
-    />
-
     <v-select
-      v-else
       :model-value="selectedValue"
       :items="items"
       item-title="title"

src/components/settings/AccountsSettings.vue

@@ -40,10 +40,11 @@ const handleAccountSaved = async () => {
       <v-list-item
         v-for="service in servicesStore.services"
         :key="`${service.provider}:${service.identifier}`"
+        :class="{ 'opacity-60': !service.enabled }"
       >
         <template #prepend>
-          <v-avatar color="primary">
+          <v-avatar :color="service.enabled ? 'primary' : 'grey'">
-            <v-icon>mdi-email</v-icon>
+            <v-icon>{{ service.enabled ? 'mdi-email' : 'mdi-email-off' }}</v-icon>
           </v-avatar>
         </template>