Add some quality of life changes

docs/components/card/playlist.md

@@ -3,7 +3,7 @@ const playlist = {
   name: 'Incredible Playlist',
   user: {
     full_username: '@username:example.com',
-    username: '@username'
+    username: 'username'
   },
   tracks_count: 27,
   album_covers: [

src/components/button/Button.vue

@@ -44,7 +44,7 @@ const click = async (...args: any[]) => {
 
 <template>
 	<button
-    class="funkwhale input button"
+    class="funkwhale is-colored button"
     :class="[type, { 'is-active': isActive, 'is-outline': outline, 'is-loading': isLoading, 'icon-only': iconOnly, 'is-round': round, 'is-shadow': shadow }]"
     @click="click"
   >

src/components/button/play/style.scss

@@ -13,6 +13,7 @@
 
       &::before {
         transform: translateX(1px);
+        backface-visibility: hidden;
       }
     }
 

src/components/input/Input.vue

@@ -12,11 +12,18 @@ defineProps<Props>()
 	<div
     :class="{ 'has-icon': !!icon }"
     class="funkwhale input"
+    @click="$refs.input.focus()"
   >
     <div v-if="icon" class="prefix">
       <i :class="['bi', icon]" />
     </div>
-    <input v-bind="$attrs" v-model="modelValue" :placeholder="placeholder" />
+    <input
+      v-bind="$attrs"
+      v-model="modelValue"
+      ref="input"
+      :placeholder="placeholder"
+      @click.stop
+    />
     <div v-if="$slots.suffix" class="suffix">
       <slot name="suffix" />
     </div>

src/components/input/style.scss

@@ -8,6 +8,18 @@
     }
 
     position: relative;
+    display: flex;
+    align-items: center;
+    background-color: var(--fw-bg-color);
+    border-radius: var(--fw-border-radius);
+    box-shadow: inset 0 0 0 4px var(--fw-border-color);
+    overflow: hidden;
+    cursor: text;
+
+    &:focus-within {
+      --fw-border-color: var(--fw-primary);
+      --fw-bg-color: var(--fw-blue-010);
+    }
 
     &.has-icon {
       input {
@@ -19,10 +31,9 @@
       display: block;
       width: 100%;
       padding: 8px 12px;
+      font-size: 14px;
       font-family: $font-main;
-      background-color: var(--fw-bg-color);
-      border-radius: var(--fw-border-radius);
-      box-shadow: inset 0 0 0 4px var(--fw-border-color);
+      background-color: transparent;
 
       &::placeholder {
         color: var(--fw-grey-600);
@@ -31,32 +42,28 @@
       &:hover {
         --fw-border-color: var(--fw-grey-300);
       }
-
-      &:active,
-      &:focus {
-        --fw-border-color: var(--fw-primary);
-        --fw-bg-color: var(--fw-blue-010);
-      }
     }
 
     .prefix,
     .suffix {
-      position: absolute;
-      top: 0;
-      bottom: 0;
       display: flex;
       align-items: center;
       color: var(--fw-grey-600);
+      font-size: 14px;
+      pointer-events: none;
     }
 
     .prefix {
+      position: absolute;
+      top: 0;
       left: 4px;
+      bottom: 0;
       width: 32px;
       justify-content: center;
     }
 
     .suffix {
-      right: 12px;
+      padding-right: 12px;
     }
   }
 }

src/components/loader/style.scss

@@ -29,7 +29,7 @@
       content: '';
       position: absolute;
       display: block;
-      border: .11em solid var(--fw-text-color);
+      border: .11em solid currentColor;
       opacity: 0.2;
       margin-left: -0.11em;
       margin-top: -0.11em;
@@ -44,7 +44,7 @@
       border-top: .11em solid transparent;
       border-right: .11em solid transparent;
       border-bottom: .11em solid transparent;
-      border-left: .11em solid var(--fw-text-color);
+      border-left: .11em solid currentColor;
 
       will-change: transform;
       transform: rotate(0deg);

src/components/pagination/Pagination.vue

@@ -47,10 +47,11 @@ const { width } = useElementSize(pagination)
 const isSmall = computed(() => width.value <= MOBILE_WIDTH)
 
 const setPage = () => {
-  if (!isNaN(+goTo.value) && +goTo.value > 0 && +goTo.value <= props.pages) {
-    page.value = +goTo.value
-    goTo.value = ''
+  if (!isNaN(+goTo.value) && goTo.value !== '') {
+    page.value = Math.min(props.pages, Math.max(1, +goTo.value))
   }
+
+  goTo.value = ''
 }
 </script>
 

src/components/pill/Pill.vue

@@ -22,7 +22,7 @@ const color = usePastel(props, '')
 
 <template>
 	<button
-    class="funkwhale input pill"
+    class="funkwhale is-colored pill"
     :class="[type, color]"
   >
     <div v-if="!!$slots.image" class="pill-image">

src/components/popover/style.scss

@@ -72,6 +72,8 @@
           }
 
           .funkwhale.pill {
+            font-size: 13px;
+            
             > .pill-content > .bi {
               display: inline-block;
               transition: transform .2s ease;

src/components/textarea/Textarea.vue

@@ -17,8 +17,14 @@ const emit = defineEmits<Events>()
 const props = withDefaults(defineProps<Props>(), { max: Infinity, placeholder: '' })
 
 const value = useVModel(props, 'modelValue', emit)
-const { undo, redo, commit, last } = useManualRefHistory(value)
-const { textarea } = useTextareaAutosize({ input: value })
+const { undo, redo, commit: commitHistory, last } = useManualRefHistory(value)
+const { textarea, triggerResize } = useTextareaAutosize({ input: value })
+
+const commit = () => {
+  triggerResize()
+  commitHistory()
+}
+
 const preview = ref(false)
 
 watchDebounced(value, (value) => {

src/styles/colors.scss

@@ -75,7 +75,7 @@ html.dark {
     --fw-bg-color: var(--fw-blue-500);
     --fw-text-color: var(--fw-grey-100);
 
-    &.input {
+    &.is-colored {
       &[disabled] {
         --fw-bg-color: var(--fw-blue-100) !important;
         --fw-text-color: var(--fw-blue-900) !important;
@@ -101,7 +101,7 @@ html.dark {
       --fw-text-color: var(--fw-grey-300);
     }
 
-    &.input {
+    &.is-colored {
       &[disabled] {
         --fw-bg-color: var(--fw-grey-100) !important;
       }
@@ -125,7 +125,7 @@ html.dark {
     --fw-bg-color: var(--fw-destructive);
     --fw-text-color: var(--fw-grey-100);
 
-    &.input {
+    &.is-colored {
       &[disabled] {
         --fw-bg-color: var(--fw-red-100) !important;
         --fw-text-color: var(--fw-blue-900) !important;