avatar fix

sessions fix
password change
sign-in fix

src/components/EditableText.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  text?: string
+  /** Shown instead of empty text, so there is still something to click */
+  placeholder?: string
+  /** Empty (or whitespace-only) text is not saved, the field stays open with an error */
+  required?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), { placeholder: 'click to write text', required: false })
+
+const isEmpty = computed(() => !props.text?.trim())
+const emit = defineEmits<{ changed: [text: string] }>()
+
+const editing = ref(false)
+const draft = ref(props.text ?? '')
+const error = ref('')
+
+watch(draft, () => {
+  error.value = ''
+})
+
+const startEdit = () => {
+  draft.value = props.text ?? ''
+  error.value = ''
+  editing.value = true
+}
+
+const save = () => {
+  if (props.required && !draft.value.trim()) {
+    error.value = 'This field is required'
+    return
+  }
+  emit('changed', draft.value)
+  editing.value = false
+}
+
+const cancel = () => {
+  draft.value = props.text ?? ''
+  error.value = ''
+  editing.value = false
+}
+</script>
+
+<template>
+  <div class="editable-text">
+    <template v-if="!editing">
+      <v-hover #default="{ isHovering, props }">
+        <v-sheet
+          v-bind="props"
+          :class="isHovering ? 'px-0' : 'px-0'"
+          class="cursor-pointer d-flex align-center ga-1"
+          @click="startEdit"
+        >
+          <div class="text-uppercase text-title-large" :class="{ 'text-medium-emphasis': isEmpty }">
+            {{ isEmpty ? placeholder : text }}
+          </div>
+          <v-icon v-if="isHovering || isEmpty" icon="mdi-pencil" size="small" />
+        </v-sheet>
+      </v-hover>
+    </template>
+
+    <template v-else>
+      <div class="d-flex ga-1 align-center">
+        <v-text-field
+          autofocus
+          class="mb-1"
+          hide-details="auto"
+          :error-messages="error"
+          v-model="draft"
+          variant="outlined"
+          @keyup.enter="save"
+          @keyup.esc="cancel"
+        />
+
+        <v-btn density="compact" icon variant="text" @click="cancel">
+          <v-icon icon="mdi-cancel" />
+        </v-btn>
+        <v-btn density="compact" icon color="primary" variant="flat" @click="save">
+          <v-icon icon="mdi-check" />
+        </v-btn>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+//.title-sheet:hover {
+//  background-color: rgba(var(--v-theme-on-surface), 0.06);
+//}
+
+//.v-sheet {
+//  transition: padding 0.2s ease-in-out;
+//}
+</style>