From 435252a9b55af64c79ed4db1e770d1901c00c1f7 Mon Sep 17 00:00:00 2001
From: Marien Fressinaud <marien+dev@fressinaud.fr>
Date: Thu, 30 Oct 2025 12:21:18 +0100
Subject: [PATCH 1/2] feat: Allow to create collections

---
 src/api.js                             |   7 +
 src/components/CollectionsSelector.vue | 171 ++++++++++++++++++++-----
 src/i18n.js                            |   6 +
 src/models/collection.js               |  18 +++
 src/models/link.js                     |  10 +-
 src/screens/LinkScreen.vue             |  30 -----
 6 files changed, 179 insertions(+), 63 deletions(-)
 create mode 100644 src/models/collection.js

diff --git a/src/api.js b/src/api.js
index 3c21718..cae0890 100644
--- a/src/api.js
+++ b/src/api.js
@@ -42,6 +42,12 @@ function collections() {
     return http.get("/collections");
 }
 
+function createCollection(name) {
+    return http.post("/collections", {
+        name,
+    });
+}
+
 function follow(collection) {
     return http.post(`/collections/${collection.id}/follow`);
 }
@@ -72,6 +78,7 @@ export default {
     authenticate,
     logout,
     collections,
+    createCollection,
     follow,
     unfollow,
     addCollectionToLink,
diff --git a/src/components/CollectionsSelector.vue b/src/components/CollectionsSelector.vue
index f55414c..6b2c53d 100644
--- a/src/components/CollectionsSelector.vue
+++ b/src/components/CollectionsSelector.vue
@@ -21,7 +21,7 @@
                     <button
                         @click="() => removeCollection(collection)"
                         type="button"
-                        :disabled="props.disabled"
+                        :disabled="form.inProgress() ? 'true' : null"
                     >
                         {{ t('collection.remove') }}
                     </button>
@@ -32,14 +32,33 @@
                 v-if="notSelectedCollections.length > 0"
                 @submit.prevent="addCollection"
                 class="flow flow--small"
-                :disabled="props.disabled"
+                :disabled="form.inProgress() ? 'true' : null"
             >
-                <div class="flow flow--smaller">
-                    <label for="collection-select">
-                        {{ t('collection.add_to_collection') }}
-                    </label>
-
-                    <select v-model="newCollectionId" id="collection-select" :disabled="props.disabled">
+                <div v-if="fillMode === 'select'" class="flow flow--smaller">
+                    <div class="cols cols--always cols--center cols--gap-smaller">
+                        <label for="collection-select" class="col--extend">
+                            {{ t('collection.add_to_collection') }}
+                        </label>
+
+                        <div>
+                            <button
+                                type="button"
+                                class="button--smaller"
+                                @click="setFillModeToText"
+                                :disabled="form.inProgress() ? 'true' : null"
+                            >
+                                <Icon name="pencil" />
+                                {{ t('collection.new') }}
+                            </button>
+                        </div>
+                    </div>
+
+                    <select
+                        v-model="newCollectionId"
+                        id="collection-select"
+                        ref="collection-select"
+                        :disabled="form.inProgress() ? 'true' : null"
+                    >
                         <option v-for="collection in notSelectedCollectionsNoGroup" :value="collection.id">
                             {{ collection.name }}
 
@@ -60,8 +79,35 @@
                     </select>
                 </div>
 
+                <div v-else class="flow flow--smaller">
+                    <div class="cols cols--always cols--center cols--gap-smaller">
+                        <label for="collection-name" class="col--extend">
+                            {{ t('collection.name') }}
+                        </label>
+
+                        <div>
+                            <button
+                                type="button"
+                                class="button--smaller"
+                                @click="setFillModeToSelect"
+                                :disabled="form.inProgress() ? 'true' : null"
+                            >
+                                {{ t('collection.new_cancel') }}
+                            </button>
+                        </div>
+                    </div>
+
+                    <input
+                        type="text"
+                        v-model="newCollectionName"
+                        id="collection-name"
+                        ref="collection-name"
+                        :disabled="form.inProgress() ? 'true' : null"
+                    >
+                </div>
+
                 <div class="text--center">
-                    <button class="button--primary" :disabled="props.disabled">
+                    <button class="button--primary" :disabled="form.inProgress() ? 'true' : null">
                         {{ t('collection.add') }}
                     </button>
                 </div>
@@ -71,12 +117,14 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue";
+import { ref, useTemplateRef, reactive, computed, watch, onMounted, nextTick } from "vue";
 import { useI18n } from "vue-i18n";
 
 import api from "../api.js";
 import http from "../http.js";
 import { store } from "../store.js";
+import form from "../form.js";
+import Collection from "../models/collection.js";
 
 const { t, locale } = useI18n();
 locale.value = store.locale;
@@ -89,16 +137,16 @@ const props = defineProps({
     open: {
         type: Boolean,
     },
-    disabled: {
-        type: Boolean,
-    },
 });
 
-const emit = defineEmits(["add", "remove"]);
-
 const ready = ref(false);
 const collections = ref([]);
 const newCollectionId = ref("");
+const newCollectionName = ref("");
+const fillMode = ref("select");
+
+const collectionSelectRef = useTemplateRef("collection-select");
+const collectionNameRef = useTemplateRef("collection-name");
 
 const selectedCollections = computed(() => {
     return collections.value.filter((collection) => {
@@ -130,6 +178,23 @@ const notSelectedCollectionsByGroup = computed(() => {
     return Object.entries(groupedCollections);
 });
 
+async function setFillModeToText() {
+    fillMode.value = "text";
+
+    await nextTick();
+
+    collectionNameRef.value.focus();
+}
+
+async function setFillModeToSelect() {
+    fillMode.value = "select";
+    newCollectionName.value = "";
+
+    await nextTick();
+
+    collectionSelectRef.value.focus();
+}
+
 function setDefaultSelectedCollectionId() {
     if (notSelectedCollectionsNoGroup.value.length > 0) {
         newCollectionId.value = notSelectedCollectionsNoGroup.value[0].id;
@@ -139,19 +204,15 @@ function setDefaultSelectedCollectionId() {
 }
 
 function loadCollections() {
-    api.collections().then((userCollections) => {
-        userCollections.sort((collection1, collection2) => {
+    api.collections().then((fetchedCollections) => {
+        fetchedCollections.sort((collection1, collection2) => {
             return collection1.name.localeCompare(collection2.name);
         });
 
-        collections.value = userCollections.map((collection) => {
-            return {
-                id: collection.id,
-                name: collection.name,
-                description: collection.description,
-                group: collection.group,
-                isPublic: collection.is_public,
-            };
+        collections.value = fetchedCollections.map((fetchedCollection) => {
+            const collection = reactive(new Collection());
+            collection.init(fetchedCollection);
+            return collection;
         });
 
         setDefaultSelectedCollectionId();
@@ -160,20 +221,66 @@ function loadCollections() {
     });
 }
 
-function addCollection() {
-    const collection = collections.value.find((collection) => {
-        return collection.id === newCollectionId.value;
-    });
+async function addCollection() {
+    form.startRequest();
+
+    let collection = null;
+
+    if (newCollectionName.value) {
+        // First, check if the "new" name already exists.
+        collection = collections.value.find((collection) => {
+            return collection.name === newCollectionName.value;
+        });
+
+        if (!collection) {
+            try {
+                // No? Then create the collection.
+                const fetchedCollection = await api.createCollection(newCollectionName.value);
+
+                collection = new Collection();
+                collection.init(fetchedCollection);
+
+                collections.value = [...collections.value, collection];
+            } catch (error) {
+                store.notify("error", t("errors.unknown"));
+            }
+        }
+    } else {
+        collection = collections.value.find((collection) => {
+            return collection.id === newCollectionId.value;
+        });
+    }
 
     if (!collection) {
+        form.finishRequest();
         return;
     }
 
-    emit("add", collection);
+    try {
+        await api.addCollectionToLink(props.link, collection);
+
+        props.link.addCollection(collection);
+
+        setFillModeToSelect();
+    } catch (error) {
+        store.notify("error", t("errors.unknown"));
+    }
+
+    form.finishRequest();
 }
 
-function removeCollection(collection) {
-    emit("remove", collection);
+async function removeCollection(collection) {
+    form.startRequest();
+
+    try {
+        await api.removeCollectionFromLink(props.link, collection);
+
+        props.link.removeCollection(collection);
+    } catch (error) {
+        store.notify("error", t("errors.unknown"));
+    }
+
+    form.finishRequest();
 }
 
 watch(
diff --git a/src/i18n.js b/src/i18n.js
index 22fa8e3..57668bb 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -12,6 +12,9 @@ export const i18n = createI18n({
         en: {
             "collection.add": "Confirm",
             "collection.add_to_collection": "Add to a collection",
+            "collection.name": "Collection name",
+            "collection.new": "New",
+            "collection.new_cancel": "Cancel",
             "collection.public": "public",
             "collection.remove": "Remove",
             "errors.@base.invalid_credentials": "The credentials are invalid.",
@@ -85,6 +88,9 @@ export const i18n = createI18n({
         fr: {
             "collection.add": "Confirmer",
             "collection.add_to_collection": "Ajouter à une collection",
+            "collection.name": "Nom de la collection",
+            "collection.new": "Nouvelle",
+            "collection.new_cancel": "Annuler",
             "collection.public": "publique",
             "collection.remove": "Retirer",
             "errors.@base.invalid_credentials": "Les identifiants sont incorrects.",
diff --git a/src/models/collection.js b/src/models/collection.js
new file mode 100644
index 0000000..2e0b5b4
--- /dev/null
+++ b/src/models/collection.js
@@ -0,0 +1,18 @@
+// This file is part of Flus Browser
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export default class {
+    id = "";
+    name = "";
+    description = "";
+    group = "";
+    isPublic = false;
+
+    init(fetchedCollection) {
+        this.id = fetchedCollection.id;
+        this.name = fetchedCollection.name;
+        this.description = fetchedCollection.description;
+        this.group = fetchedCollection.group;
+        this.isPublic = fetchedCollection.is_public;
+    }
+}
diff --git a/src/models/link.js b/src/models/link.js
index 857a1fe..d972329 100644
--- a/src/models/link.js
+++ b/src/models/link.js
@@ -82,8 +82,16 @@ export default class {
         }
     }
 
+    hasCollection(collection) {
+        return this.collections.some((collectionId) => {
+            return collectionId === collection.id;
+        });
+    }
+
     addCollection(collection) {
-        this.collections = [...this.collections, collection.id];
+        if (!this.hasCollection(collection)) {
+            this.collections = [...this.collections, collection.id];
+        }
     }
 
     removeCollection(collection) {
diff --git a/src/screens/LinkScreen.vue b/src/screens/LinkScreen.vue
index 467ce74..a823f7a 100644
--- a/src/screens/LinkScreen.vue
+++ b/src/screens/LinkScreen.vue
@@ -59,9 +59,6 @@
                     id="collections-selector"
                     :link="link"
                     :open="displayCollections"
-                    :disabled="collectionsForm.inProgress()"
-                    @add="addCollection"
-                    @remove="removeCollection"
                 />
             </div>
 
@@ -105,7 +102,6 @@ import browser from "webextension-polyfill";
 import { store } from "../store.js";
 import api from "../api.js";
 import http from "../http.js";
-import collectionsForm from "../form.js";
 import Link from "../models/link.js";
 import CollectionsSelector from "../components/CollectionsSelector.vue";
 import Notes from "../components/Notes.vue";
@@ -200,31 +196,5 @@ async function markAsReadLater() {
         });
 }
 
-function addCollection(collection) {
-    collectionsForm.startRequest();
-    api.addCollectionToLink(link, collection)
-        .then(() => {
-            collectionsForm.finishRequest();
-            link.addCollection(collection);
-        })
-        .catch(() => {
-            collectionsForm.finishRequest();
-            store.notify("error", t("errors.unknown"));
-        });
-}
-
-function removeCollection(collection) {
-    collectionsForm.startRequest();
-    api.removeCollectionFromLink(link, collection)
-        .then(() => {
-            collectionsForm.finishRequest();
-            link.removeCollection(collection);
-        })
-        .catch(() => {
-            collectionsForm.finishRequest();
-            store.notify("error", t("errors.unknown"));
-        });
-}
-
 onMounted(refreshForCurrentTab);
 </script>

From 2f3e5a0ac74d1d05bf15009457f02905bfb53c6a Mon Sep 17 00:00:00 2001
From: Marien Fressinaud <marien+dev@fressinaud.fr>
Date: Thu, 30 Oct 2025 14:16:03 +0100
Subject: [PATCH 2/2] chore: Rename CollectionsSelector component into
 Collections

---
 .../{CollectionsSelector.vue => Collections.vue}          | 0
 src/screens/LinkScreen.vue                                | 8 ++++----
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/components/{CollectionsSelector.vue => Collections.vue} (100%)

diff --git a/src/components/CollectionsSelector.vue b/src/components/Collections.vue
similarity index 100%
rename from src/components/CollectionsSelector.vue
rename to src/components/Collections.vue
diff --git a/src/screens/LinkScreen.vue b/src/screens/LinkScreen.vue
index a823f7a..c792c26 100644
--- a/src/screens/LinkScreen.vue
+++ b/src/screens/LinkScreen.vue
@@ -48,15 +48,15 @@
                     <button
                         @click="toggleCollections"
                         :aria-expanded="displayCollections"
-                        aria-controls="collections-selector"
+                        aria-controls="collections"
                     >
                         <Icon name="collection" />
                         {{ t("link.count_collections", link.collections.length) }}
                     </button>
                 </div>
 
-                <CollectionsSelector
-                    id="collections-selector"
+                <Collections
+                    id="collections"
                     :link="link"
                     :open="displayCollections"
                 />
@@ -103,7 +103,7 @@ import { store } from "../store.js";
 import api from "../api.js";
 import http from "../http.js";
 import Link from "../models/link.js";
-import CollectionsSelector from "../components/CollectionsSelector.vue";
+import Collections from "../components/Collections.vue";
 import Notes from "../components/Notes.vue";
 
 const { t, locale } = useI18n();