fix(pre-commit/prettier): configure formatter and apply

front/package.json

@@ -129,5 +129,16 @@
     "workbox-precaching": "6.5.4",
     "workbox-routing": "6.5.4",
     "workbox-strategies": "6.5.4"
+  },
+  "prettier": {
+    "bracketSameLine": false,
+    "bracketSpacing": true,
+    "embeddedLanguageFormatting": "off",
+    "htmlWhitespaceSensitivity": "strict",
+    "singleAttributePerLine": true,
+    "singleQuote": false,
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "useTabs": false
   }
 }

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

@@ -4,7 +4,7 @@ import Button from "~/components/ui/Button.vue"
 </script>
 
 ```ts
-import Alert from "~/components/ui/Alert.vue";
+import Alert from "~/components/ui/Alert.vue"
 ```
 
 # Alert

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

@@ -6,7 +6,7 @@ const click = ():Promise<void> => new Promise(resolve => setTimeout(resolve, 100
 </script>
 
 ```ts
-import Button from "~/components/ui/Button.vue";
+import Button from "~/components/ui/Button.vue"
 ```
 
 # Button

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

@@ -10,7 +10,7 @@
 </script>
 
 ```ts
-import Card from "~/components/ui/Card.vue";
+import Card from "~/components/ui/Card.vue"
 ```
 
 # Card
@@ -356,6 +356,8 @@ Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This
 </Card>
 ```
 
+<!-- prettier-ignore-start -->
+
 <Card full title="Linked card with interactive elements"
   to="./card.md"
   :tags="['rock', 'folk', 'punk']"
@@ -365,6 +367,8 @@ Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This
   <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
 </Card>
 
+<!-- prettier-ignore-end -->
+
 Instead, use the [action area](#add-an-action) to offer the primary link:
 
 ```vue-html
@@ -380,6 +384,8 @@ Instead, use the [action area](#add-an-action) to offer the primary link:
 </Card>
 ```
 
+<!-- prettier-ignore-start -->
+
 <Card full title="Card with interactive elements"
   :tags="['rock', 'folk', 'punk']"
   icon="bi-check-lg large"
@@ -391,6 +397,8 @@ Instead, use the [action area](#add-an-action) to offer the primary link:
   </template>
 </Card>
 
+<!-- prettier-ignore-end -->
+
 ## Add color
 
 - Choose a color: `default`, `primary`, `secondary`, `destructive`, or a Pastel (red, yellow, purple, green or blue)

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

@@ -3,7 +3,7 @@
 </script>
 
 ```ts
-import Heading from "~/components/ui/Heading.vue";
+import Heading from "~/components/ui/Heading.vue"
 ```
 
 # Heading

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

@@ -16,7 +16,7 @@ const reset = () => { console.log("Hello"); value.value = 'Original value' }
 </script>
 
 ```ts
-import Input from "~/components/ui/Input.vue";
+import Input from "~/components/ui/Input.vue"
 ```
 
 # Input

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

@@ -17,6 +17,7 @@ const noGap = ref(true)
 ```ts
 import Layout from "~/components/ui/Layout.vue"
 ```
+
 # Layout
 
 CSS provides [four methods to arrange items in a container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods): Flow, Columns, Flex and Grid. To make typical alignment tasks in the Funkwhale Ui easier, we have created a few useful presets.

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

@@ -31,7 +31,7 @@ const input = ref('Episcosaurus')
 </script>
 
 ```ts
-import Modal from "~/components/ui/Modal.vue";
+import Modal from "~/components/ui/Modal.vue"
 ```
 
 # Modal
@@ -118,8 +118,10 @@ Note that the Cancel button has `autofocus`. If you want another button to auto-
 
 Use the `icon` prop and/or the `#topleft` slot for indicators such as the user's photo or a search input. You can hide the title by setting it to `""`.
 
+<!-- prettier-ignore-start -->
+
 <Button primary @click="isOpen10 = true">
-    Open modal
+  Open modal
 </Button>
 <Modal v-model="isOpen10" title="" icon="bi-info-circle">
   <template #topleft>
@@ -128,6 +130,7 @@ Use the `icon` prop and/or the `#topleft` slot for indicators such as the user's
   No information pages found for <code>{{ input }}</code>
 </Modal>
 
+<!-- prettier-ignore-end -->
 
 ## Add a main alert
 
@@ -221,7 +224,7 @@ To visually distinguish the modal from standard modals
 ### Best Practices
 
 - Use the `destructive` prop sparingly
-- Clearly explain the consequences of the action unsing `<Alert red>`
+- Clearly explain the consequences of the action using `<Alert red>`
 - Provide a clear way to cancel the action. If you use the `cancel` prop, the Cancel button will have autofocus, preventing accidental confirmation.
 - Use descriptive action button labels
 
@@ -258,6 +261,8 @@ Delete my account
 </Modal>
 ```
 
+<!-- prettier-ignore-start -->
+
 <Button
   @click="isOpen4 = true"
   destructive
@@ -285,6 +290,8 @@ Delete my account
   </template>
 </Modal>
 
+<!-- prettier-ignore-end -->
+
 </Layout>
 
 ## Nested modals

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

@@ -9,7 +9,7 @@ const isDeleted = computed(() => customTag.value==='' ? 'Pill was deleted' : '')
 </script>
 
 ```ts
-import Pill from "~/components/ui/Pill.vue";
+import Pill from "~/components/ui/Pill.vue"
 ```
 
 # Pill
@@ -159,8 +159,8 @@ Image pills contain a small circular image on their left. These can be used for
 Add `v-model="..."` to link the pill content to a `ref`.
 
 ```ts
-import { ref } from "vue";
+import { ref } from "vue"
-const customTag = ref("Custom Tag");
+const customTag = ref("Custom Tag")
 ```
 
 ```vue-html
@@ -179,9 +179,13 @@ const customTag = ref("Custom Tag");
 
 Edit the text, then hit Enter or click outside. The button will show the updated text.
 
+<!-- prettier-ignore-start -->
+
 <Button primary low-height
   :disabled="customTag === ''"
   :onClick="() => customTag = ''"
 >
   Reset: {{ customTag }}
 </Button>
+
+<!-- prettier-ignore-end -->

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

@@ -29,7 +29,7 @@ const search = ref()
 </script>
 
 ```ts
-import Pills from "~/components/ui/Pills.vue";
+import Pills from "~/components/ui/Pills.vue"
 ```
 
 # Pills
@@ -53,7 +53,7 @@ If you place custom pills into `others`, the user will be able to select, edit a
 
 ```ts
 const nullModel = ref({
-  current: [],
+  current: []
 });
 ```
 
@@ -69,7 +69,7 @@ const nullModel = ref({
 
 ```ts
 const staticModel = ref({
-  current: ["#Noise", "#FieldRecording", "#Experiment"],
+  current: ["#Noise", "#FieldRecording", "#Experiment"]
 });
 ```
 
@@ -88,7 +88,7 @@ Select a set of pills from presets, and add and remove custom ones
 ```ts
 const interactiveModel = ref({
   current: ["#Noise", "#FieldRecording", "#Experiment"],
-  others: ["#Melody", "#Rhythm"],
+  others: ["#Melody", "#Rhythm"]
 });
 ```
 
@@ -108,7 +108,7 @@ Use [reactive](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#r
 const customModel = ref({
   current: ["custom", "#FieldRecording", "#Experiment"],
   others: ["#Melody", "#Rhythm"],
-  custom: ["custom"],
+  custom: ["custom"]
 });
 ```
 

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

@@ -14,7 +14,7 @@ const option = ref<keyof typeof options>('pod')
 </script>
 
 ```ts
-import Slider from "~/components/ui/Slider.vue";
+import Slider from "~/components/ui/Slider.vue"
 ```
 
 # Slider
@@ -28,7 +28,7 @@ Select a key from the `options` by setting `v-model`
 const options = {
   me: "Only I can find and edit this",
   pod: "Me and other users on the instance can find and edit this",
-  everyone: "Everyone can find and edit this",
+  everyone: "Everyone can find and edit this"
 } as const;
 
 const option = ref<keyof typeof options>("me");

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

@@ -9,7 +9,7 @@ const search = ref('')
 </script>
 
 ```ts
-import Tabs from "~/components/ui/Tabs.vue";
+import Tabs from "~/components/ui/Tabs.vue"
 ```
 
 # Tabs

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

@@ -14,7 +14,7 @@ const reset = () => { text.value = '' }
 </script>
 
 ```ts
-import Textarea from "~/components/ui/Textarea.vue";
+import Textarea from "~/components/ui/Textarea.vue"
 ```
 
 # Textarea

front/ui-docs/using-components.md

@@ -31,7 +31,7 @@ Don't pollute the global namespace. Funkwhale compiles a single stylesheet (used
 <script setup>
 import { ref } from "vue";
 const theme = ref({
-  color: "red",
+  color: "red"
 });
 </script>
 
@@ -159,7 +159,7 @@ export const colorFromProps = (props: Record<string, unknown>) =>
     Object.keys(props)
       .filter(isColorProp)
       .join(" ")
-      .replace("-", " ") as ColorSelector,
+      .replace("-", " ") as ColorSelector
   );
 ````