refactor(ui): move all Ui components into the same directory level

front/src/components/audio/track/Table.vue

@@ -13,7 +13,7 @@ import TrackMobileRow from '~/components/audio/track/MobileRow.vue'
 import Pagination from '~/components/vui/Pagination.vue'
 import TrackRow from '~/components/audio/track/Row.vue'
 import Input from '~/components/ui/Input.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 

front/src/components/auth/LoginForm.vue

@@ -10,7 +10,7 @@ import { useStore } from '~/store'
 import Alert from '~/components/ui/Alert.vue'
 import Input from '~/components/ui/Input.vue'
 import Button from '~/components/ui/Button.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Layout from '~/components/ui/Layout.vue'
 
 interface Props {

front/src/components/auth/Logout.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import Button from '~/components/ui/Button.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Link from '~/components/ui/Link.vue'
 

front/src/components/auth/SignupForm.vue

@@ -13,7 +13,7 @@ import Alert from '~/components/ui/Alert.vue'
 import Input from '~/components/ui/Input.vue'
 import Textarea from '~/components/ui/Textarea.vue'
 import Button from '~/components/ui/Button.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Layout from '~/components/ui/Layout.vue'
 
 import useLogger from '~/composables/useLogger'

front/src/components/favorites/List.vue

@@ -15,8 +15,8 @@ import TrackTable from '~/components/audio/track/Table.vue'
 import RadioButton from '~/components/radios/Button.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Section from '~/components/ui/layout/Section.vue'
+import Section from '~/components/ui/Section.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
 import Link from '~/components/ui/Link.vue'
 import Alert from '~/components/ui/Alert.vue'

front/src/components/library/Albums.vue

@@ -22,7 +22,7 @@ import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Toggle from '~/components/ui/Toggle.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Pills from '~/components/ui/Pills.vue'
 import Loader from '~/components/ui/Loader.vue'
 

front/src/components/library/Artists.vue

@@ -23,7 +23,7 @@ import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Toggle from '~/components/ui/Toggle.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Pills from '~/components/ui/Pills.vue'
 import Loader from '~/components/ui/Loader.vue'
 

front/src/components/library/Podcasts.vue

@@ -23,7 +23,7 @@ import Layout from '~/components/ui/Layout.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Pills from '~/components/ui/Pills.vue'
 import Loader from '~/components/ui/Loader.vue'
 

front/src/components/library/Radios.vue

@@ -15,7 +15,7 @@ import axios from 'axios'
 import $ from 'jquery'
 
 import Layout from '~/components/ui/Layout.vue'
-import Section from '~/components/ui/layout/Section.vue'
+import Section from '~/components/ui/Section.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import RadioCard from '~/components/radios/Card.vue'
 import Button from '~/components/ui/Button.vue'

front/src/components/ui/Card.vue

@@ -8,7 +8,7 @@ import { type WidthProps, width } from '~/composables/width'
 import Pill from './Pill.vue'
 import Alert from './Alert.vue'
 import Layout from './Layout.vue';
-import Spacer from './layout/Spacer.vue';
+import Spacer from './Spacer.vue';
 
 const props = defineProps<{
   title: string

front/src/components/ui/Modal.vue

@@ -4,7 +4,7 @@ import { watchEffect } from 'vue';
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
 
 import Button from '~/components/ui/Button.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 const { title, overPopover = false, ...colorProps } = defineProps<{
   title:string,

front/src/components/ui/Section.vue

@@ -3,7 +3,7 @@ import type { RouterLinkProps } from 'vue-router'
 import { useAttrs } from 'vue'
 
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
 import Link from '~/components/ui/Link.vue'
 

front/src/components/ui/Spacer.vue

@@ -1,21 +1,32 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
 
-const { grow, shrink, title, size = 16, ...direction } = defineProps<{
+type Size = 'no-size' | `size-${ '4' | '8' | '12' | '16' | '32' | '46' | '64'}`
+
+const props = defineProps<{
   grow?:true;
   shrink?:true;
   title?:string;
-  size?:number;
+} & { [Direction in 'h' | 'v']? : true }
-} & { [Direction in 'h' | 'v']? : true }>()
+  & ({ [S in Size]? : true } | {size?:number})>()
 
 const minSize = 0;
 
 const measure = ref()
 
-watchEffect(() => measure.value = {
+watchEffect(() => {
+  const maybeSize = Object.entries(props).find(
+    ([key, value]) => value===true && key.startsWith('size'))
+  const size =
+    maybeSize ?
+      +(maybeSize[0].replace('size', ''))
+      : 'size' in props && props.size ? props.size
+      : 'noSize' in props && props.noSize ? 0
+      : 32
+  measure.value = {
     size: `${Math.max(size, minSize)}px`,
     margin: `${(size-Math.max(size, minSize))/2}px`
-})
+}})
 </script>
 
 <template>
@@ -26,8 +37,8 @@ watchEffect(() => measure.value = {
 
 <style module lang="scss">
 .spacer {
-  width: v-bind('direction.v ? 0 : measure.size');
+  width: v-bind('props.v ? 0 : measure.size');
-  height: v-bind('direction.h ? 0 : measure.size');
+  height: v-bind('props.h ? 0 : measure.size');
   margin: v-bind('measure.margin');
   flex-grow:v-bind('grow ? 1 : 0');
   flex-shrink:v-bind('shrink ? 1 : 0');

front/src/ui/components/Sidebar.vue

@@ -10,7 +10,7 @@ import Link from '~/components/ui/Link.vue'
 import UserMenu from './UserMenu.vue'
 import Button from '~/components/ui/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import { useRoute } from 'vue-router'
 
 const isCollapsed = ref(true)

front/src/ui/modals/Shortcuts.vue

@@ -7,7 +7,7 @@ import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
 import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 const { t } = useI18n()
 const store = useStore()

front/src/ui/modals/Upload.vue

@@ -8,7 +8,7 @@ import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Alert from '~/components/ui/Alert.vue';
 import Card from '~/components/ui/Card.vue';
 import Pagination from '~/components/ui/Pagination.vue';

front/src/views/auth/PasswordReset.vue

@@ -7,7 +7,7 @@ import { useRouter } from 'vue-router'
 
 import Input from '~/components/ui/Input.vue'
 import Button from '~/components/ui/Button.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Link from '~/components/ui/Link.vue'
 

front/src/views/auth/ProfileBase.vue

@@ -13,8 +13,8 @@ import useReport from '~/composables/moderation/useReport'
 import RenderedDescription from '~/components/common/RenderedDescription.vue'
 
 import Layout from '~/components/ui/Layout.vue'
-import Section from '~/components/ui/layout/Section.vue'
+import Section from '~/components/ui/Section.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Link from '~/components/ui/Link.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Tab from '~/components/ui/Tab.vue'

front/src/views/playlists/List.vue

@@ -19,7 +19,7 @@ import Layout from '~/components/ui/Layout.vue'
 import Button from '~/components/ui/Button.vue'
 import Input from '~/components/ui/Input.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'

front/ui-docs/components/ui/input.md

@@ -2,7 +2,7 @@
 import Input from "~/components/ui/Input.vue"
 import Button from "~/components/ui/Button.vue"
 import Layout from "~/components/ui/Layout.vue"
-import Spacer from "~/components/ui/layout/Spacer.vue"
+import Spacer from "~/components/ui/Spacer.vue"
 import Alert from "~/components/ui/Alert.vue"
 </script>
 

front/ui-docs/components/ui/layout.md

@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Tab from '~/components/ui/Tab.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Toggle from '~/components/ui/Toggle.vue'

front/ui-docs/components/ui/layout/columns.md

@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Tab from '~/components/ui/Tab.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Toggle from '~/components/ui/Toggle.vue'

front/ui-docs/components/ui/layout/flex.md

@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Tab from '~/components/ui/Tab.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Toggle from '~/components/ui/Toggle.vue'

front/ui-docs/components/ui/layout/grid.md

@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Tab from '~/components/ui/Tab.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Toggle from '~/components/ui/Toggle.vue'

front/ui-docs/components/ui/layout/section.md

@@ -6,16 +6,11 @@ import { type Track, type User } from '~/types'
 import Card from '~/components/ui/Card.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Toggle from '~/components/ui/Toggle.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
-import Button from '~/components/ui/Button.vue'
 import Activity from '~/components/ui/Activity.vue'
-import Section from '~/components/ui/layout/Section.vue'
+import Section from '~/components/ui/Section.vue'
 
-const alignLeft = ref(false)
+const alignLeft = ref(true)
-
-const attributes = computed(() => ({
-  style: alignLeft.value ? 'justify-content: start' : ''
-}))
 
 const track: Track = {
   id: 0,

front/ui-docs/components/ui/layout/spacer.md

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import Alert from '~/components/ui/Alert.vue'
+import Button from '~/components/ui/Button.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Input from '~/components/ui/Input.vue'
 import Card from '~/components/ui/Card.vue'
 

front/ui-docs/components/ui/layout/stack.md

@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Tab from '~/components/ui/Tab.vue'
 import Tabs from '~/components/ui/Tabs.vue'
 import Toggle from '~/components/ui/Toggle.vue'

front/ui-docs/designing-pages.md

@@ -6,16 +6,12 @@ import { type Track, type User } from '~/types'
 import Card from '~/components/ui/Card.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Toggle from '~/components/ui/Toggle.vue'
-import Spacer from '~/components/ui/layout/Spacer.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Button from '~/components/ui/Button.vue'
 import Activity from '~/components/ui/Activity.vue'
-import Section from '~/components/ui/layout/Section.vue'
+import Section from '~/components/ui/Section.vue'
 
 const alignLeft = ref(false)
-
-const attributes = computed(() => ({
-  style: alignLeft.value ? 'justify-content: start' : ''
-}))
 </script>
 
 # Designing Pages

front/ui-docs/index.md

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Layout from '../src/components/ui/Layout.vue'
 import Card from '../src/components/ui/Card.vue'
-import Spacer from '../src/components/ui/layout/Spacer.vue'
+import Spacer from '../src/components/ui/Spacer.vue'
 </script>
 
 # Funkwhale design component library
@@ -10,13 +10,13 @@ import Spacer from '../src/components/ui/layout/Spacer.vue'
 
 <Layout flex>
 
-<Card to="designing-pages"
+<Card default raised to="/designing-pages"
     title="Designing pages"
-    style="width:min-content"
+    min-content
   />
 
-<Card to="https://design.funkwhale.audio"
+<Card default raised to="https://design.funkwhale.audio"
-      title="Ui designs" style="width:max-content">
+      title="Ui designs" >
 Check out the design system on our Penpot.
 </Card>