From 2fcfeaf6e29a19f91897857ec207230472580d83 Mon Sep 17 00:00:00 2001
From: Michael Braun <michael.braun1994@gmail.com>
Date: Fri, 3 Oct 2025 16:28:37 +0200
Subject: [PATCH 1/6] Add configurable feature, to insert new items to the top.

---
 client/index.html        |   8 ++
 client/listling/index.js | 162 ++++++++++++++++++++-------------------
 listling/listling.py     |  10 ++-
 3 files changed, 99 insertions(+), 81 deletions(-)

diff --git a/client/index.html b/client/index.html
index f913dbd..56aa1d7 100644
--- a/client/index.html
+++ b/client/index.html
@@ -298,6 +298,14 @@ <h1>Settings</h1>
                         Items can be assigned
                     </label>
 
+                    <label class="micro-block">
+                        <input
+                            type="checkbox" name="features" value="addNewItemsToTop"
+                            data-checked="includes lst.features 'addNewItemsToTop'"
+                        />
+                        Items are added to the top
+                    </label>
+
                     <label class="micro-block" data-class-micro-disabled="not assignFeature">
                         <input
                             type="checkbox" name="assign-by-default"
diff --git a/client/listling/index.js b/client/listling/index.js
index 1242251..b0154b5 100644
--- a/client/listling/index.js
+++ b/client/listling/index.js
@@ -34,18 +34,18 @@ listling.UI = class extends micro.UI {
         }
 
         this.pages = this.pages.concat([
-            {url: "^/$", page: listling.components.start.StartPage.make},
-            {url: "^/intro$", page: "listling-intro-page"},
-            {url: "^/about$", page: makeAboutPage},
-            {url: "^/share$", page: "listling-share-page"},
-            {url: "^/lists/([^/]+)(?:/[^/]+)?$", page: listling.ListPage.make}
+            { url: "^/$", page: listling.components.start.StartPage.make },
+            { url: "^/intro$", page: "listling-intro-page" },
+            { url: "^/about$", page: makeAboutPage },
+            { url: "^/share$", page: "listling-share-page" },
+            { url: "^/lists/([^/]+)(?:/[^/]+)?$", page: listling.ListPage.make }
         ]);
 
         Object.assign(this.renderEvent, {
             "create-list"(event) {
                 let elem = document.importNode(
                     ui.querySelector(".listling-create-list-event-template").content, true);
-                micro.bind.bind(elem, {event, makeListURL: listling.util.makeListURL});
+                micro.bind.bind(elem, { event, makeListURL: listling.util.makeListURL });
                 return elem;
             }
         });
@@ -82,7 +82,7 @@ listling.IntroPage = class extends micro.core.Page {
 
             createExample: micro.core.action(async useCase => {
                 const list = await ui.call(
-                    "POST", "/api/lists/create-example", {use_case: useCase.id}
+                    "POST", "/api/lists/create-example", { use_case: useCase.id }
                 );
                 ui.navigate(`/lists/${list.id.split(":")[1]}`).catch(micro.util.catch);
             })
@@ -130,7 +130,7 @@ listling.ListPage = class extends micro.core.Page {
         this._data = new micro.bind.Watchable({
             lst: null,
             modes: ["collaborate", "view"],
-            modeToText: (ctx, mode) => ({collaborate: "Collaborate", view: "View"}[mode]),
+            modeToText: (ctx, mode) => ({ collaborate: "Collaborate", view: "View" }[mode]),
             owners: null,
             presentItems: null,
             trashedItems: null,
@@ -173,7 +173,7 @@ listling.ListPage = class extends micro.core.Page {
                 this._form.elements.title.focus();
             }),
 
-            edit: async() => {
+            edit: async () => {
                 try {
                     const list = await ui.call("POST", `/api/lists/${this._data.lst.id}`, {
                         title: this._form.elements.title.value,
@@ -188,7 +188,7 @@ listling.ListPage = class extends micro.core.Page {
                     });
                     this._data.editMode = false;
                     this._replayEvents();
-                    this.activity.events.dispatchEvent({type: "editable-edit", object: list});
+                    this.activity.events.dispatchEvent({ type: "editable-edit", object: list });
                 } catch (e) {
                     ui.handleCallError(e);
                 }
@@ -199,7 +199,7 @@ listling.ListPage = class extends micro.core.Page {
                 this._replayEvents();
             },
 
-            subscribeUnsubscribe: async() => {
+            subscribeUnsubscribe: async () => {
                 const op = this._data.lst.activity.user_subscribed ? "unsubscribe" : "subscribe";
                 if (op === "subscribe") {
                     const pushSubscription = await ui.service.pushManager.getSubscription();
@@ -213,7 +213,7 @@ listling.ListPage = class extends micro.core.Page {
 
                 try {
                     this._data.lst.activity = await ui.call(
-                        "PATCH", `/api/lists/${this._data.lst.id}/activity`, {op}
+                        "PATCH", `/api/lists/${this._data.lst.id}/activity`, { op }
                     );
                     this.list = this._data.lst;
                 } catch (e) {
@@ -236,7 +236,7 @@ listling.ListPage = class extends micro.core.Page {
 
             moveItemKey: event => {
                 let ol = event.target.parentElement;
-                let {item} = event.target;
+                let { item } = event.target;
                 let i = this._data.presentItems.findIndex(other => other.id === item.id);
 
                 let j = i + (event.detail.dir === "up" ? -2 : 1);
@@ -278,7 +278,7 @@ listling.ListPage = class extends micro.core.Page {
             this.classList.toggle("listling-list-has-trashed-items", this._data.trashedItemsCount);
             this.classList.toggle("listling-list-mode-view", !this._data.editMode);
             this.classList.toggle("listling-list-mode-edit", this._data.editMode);
-            for (let feature of ["check", "assign", "vote", "value", "time", "location", "play"]) {
+            for (let feature of ["check", "assign", "vote", "value", "time", "location", "play", "addNewItemsToTop"]) {
                 this.classList.toggle(
                     `listling-list-feature-${feature}`,
                     this._data.lst && this._data.lst.features.includes(feature)
@@ -306,8 +306,8 @@ listling.ListPage = class extends micro.core.Page {
         ui.shortcutContext.add("C", this._data.toggleSettings);
         ui.addEventListener("list-items-move", this);
 
-        this.ready.when(micro.core.request(async() => {
-            const setUpItems = async() => {
+        this.ready.when(micro.core.request(async () => {
+            const setUpItems = async () => {
                 const items = await ui.call("GET", `/api/lists/${this._data.lst.id}/items`);
                 this._items = new micro.bind.Watchable(items);
             };
@@ -318,7 +318,11 @@ listling.ListPage = class extends micro.core.Page {
 
             this.activity.events.addEventListener("list-create-item", event => {
                 if (!this._items.find(item => item.id === event.detail.event.detail.item.id)) {
-                    this._items.push(event.detail.event.detail.item);
+                    if (this.list.features.includes("addNewItemsToTop")) {
+                        this._items.unshift(event.detail.event.detail.item);
+                    } else {
+                        this._items.push(event.detail.event.detail.item);
+                    }
                 }
             });
 
@@ -332,32 +336,32 @@ listling.ListPage = class extends micro.core.Page {
                     let li;
                     let i;
                     switch (object.__type__) {
-                    case "List":
-                        if (this._data.editMode) {
-                            // Buffer modifications until editing is done
-                            this._bufferEvent(event);
-                            event.stopImmediatePropagation();
-                            return;
-                        }
-                        this.list = object;
-                        break;
-                    case "Item":
-                        li = Array.from(this._itemsOL.children).find(
-                            node => node.item.id === object.id
-                        );
-                        if (li && li.editMode) {
-                            // Buffer modifications until editing is done
-                            this._bufferEvent(event);
-                            event.stopImmediatePropagation();
-                            return;
-                        }
-                        i = this._items.findIndex(item => item.id === object.id);
-                        this._items[i] = object;
-                        this._data.trashedItemsCount = this._data.trashedItems.length;
-                        break;
-                    default:
-                        // Unreachable
-                        throw new Error();
+                        case "List":
+                            if (this._data.editMode) {
+                                // Buffer modifications until editing is done
+                                this._bufferEvent(event);
+                                event.stopImmediatePropagation();
+                                return;
+                            }
+                            this.list = object;
+                            break;
+                        case "Item":
+                            li = Array.from(this._itemsOL.children).find(
+                                node => node.item.id === object.id
+                            );
+                            if (li && li.editMode) {
+                                // Buffer modifications until editing is done
+                                this._bufferEvent(event);
+                                event.stopImmediatePropagation();
+                                return;
+                            }
+                            i = this._items.findIndex(item => item.id === object.id);
+                            this._items[i] = object;
+                            this._data.trashedItemsCount = this._data.trashedItems.length;
+                            break;
+                        default:
+                            // Unreachable
+                            throw new Error();
                     }
                 });
             }
@@ -413,10 +417,10 @@ listling.ListPage = class extends micro.core.Page {
 
         // Add list to lists of user
         if (ui.user) {
-            (async() => {
+            (async () => {
                 try {
                     await ui.call(
-                        "POST", `/api/users/${ui.user.id}/lists`, {list_id: this._data.lst.id}
+                        "POST", `/api/users/${ui.user.id}/lists`, { list_id: this._data.lst.id }
                     );
                 } catch (e) {
                     if (e instanceof micro.NetworkError) {
@@ -473,14 +477,14 @@ listling.ListPage = class extends micro.core.Page {
      * :meth:`ItemElement.startEdit`. *text* defaults to :attr:`list` *item_template*.
      */
     startCreateItem(
-        {title = null, text, resource = null, value = null, time = null, location = null} = {}
+        { title = null, text, resource = null, value = null, time = null, location = null } = {}
     ) {
         if (text === undefined) {
             text = this._data.lst.item_template;
         }
         this._data.creatingItem = true;
         const elem = this.querySelector(".listling-list-create-item [is=listling-item]");
-        elem.startEdit({title, text, resource, value, time, location});
+        elem.startEdit({ title, text, resource, value, time, location });
         elem.scrollIntoView(false);
     }
 
@@ -495,11 +499,11 @@ listling.ListPage = class extends micro.core.Page {
     }
 
     async _moveItem(item, to) {
-        return await micro.core.action(async() => {
-            ui.dispatchEvent(new CustomEvent("list-items-move", {detail: {item, to}}));
+        return await micro.core.action(async () => {
+            ui.dispatchEvent(new CustomEvent("list-items-move", { detail: { item, to } }));
             await ui.call(
                 "POST", `/api/lists/${this._data.lst.id}/items/move`,
-                {item_id: item.id, to_id: to?.id ?? null}
+                { item_id: item.id, to_id: to?.id ?? null }
             );
         })();
     }
@@ -519,8 +523,8 @@ listling.ListPage = class extends micro.core.Page {
 
 // eslint-disable-next-line no-underscore-dangle
 listling.ListPage._PERMISSIONS = {
-    collaborate: {user: new Set(["list-modify", "item-modify"])},
-    view: {user: new Set()}
+    collaborate: { user: new Set(["list-modify", "item-modify"]) },
+    view: { user: new Set() }
 };
 
 listling.ItemElement = class extends HTMLLIElement {
@@ -547,9 +551,9 @@ listling.ItemElement = class extends HTMLLIElement {
 
             startEdit: micro.core.action(() => this.startEdit()),
 
-            edit: async() => {
+            edit: async () => {
                 const input = this.querySelector("micro-content-input");
-                const {text, resource} = input.valueAsObject;
+                const { text, resource } = input.valueAsObject;
                 let value = this._form.elements.value.valueAsNumber;
                 if (isNaN(value)) {
                     value = null;
@@ -575,7 +579,7 @@ listling.ItemElement = class extends HTMLLIElement {
                         ].includes(e.error.__type__)
                     ) {
                         // Delete the resource if it is no longer retrievable
-                        input.valueAsObject = {text, resource: null};
+                        input.valueAsObject = { text, resource: null };
                     } else {
                         ui.handleCallError(e);
                     }
@@ -586,12 +590,12 @@ listling.ItemElement = class extends HTMLLIElement {
                     this._data.editMode = false;
                     // eslint-disable-next-line no-underscore-dangle
                     ui.page._replayEvents();
-                    this._activity.events.dispatchEvent({type: "editable-edit", object: item});
+                    this._activity.events.dispatchEvent({ type: "editable-edit", object: item });
                 } else {
                     // Reset form
                     this._data.item = null;
                     this._activity.events.dispatchEvent(
-                        {type: "list-create-item", object: this._data.lst, detail: {item}}
+                        { type: "list-create-item", object: this._data.lst, detail: { item } }
                     );
                 }
                 if (this.onedit) {
@@ -610,20 +614,20 @@ listling.ItemElement = class extends HTMLLIElement {
                 }
             },
 
-            trash: micro.core.action(async() => {
+            trash: micro.core.action(async () => {
                 const item = await ui.call("POST", `/api/items/${this._data.item.id}/trash`);
-                this._activity.events.dispatchEvent({type: "trashable-trash", object: item});
+                this._activity.events.dispatchEvent({ type: "trashable-trash", object: item });
             }),
 
-            restore: micro.core.action(async() => {
+            restore: micro.core.action(async () => {
                 const item = await ui.call("POST", `/api/items/${this._data.item.id}/restore`);
-                this._activity.events.dispatchEvent({type: "trashable-restore", object: item});
+                this._activity.events.dispatchEvent({ type: "trashable-restore", object: item });
             }),
 
-            checkUncheck: micro.core.action(async() => {
+            checkUncheck: micro.core.action(async () => {
                 const op = this._data.item.checked ? "uncheck" : "check";
                 const item = await ui.call("POST", `/api/items/${this._data.item.id}/${op}`);
-                this._activity.events.dispatchEvent({type: `item-${op}`, object: item});
+                this._activity.events.dispatchEvent({ type: `item-${op}`, object: item });
             }),
 
             assign: micro.core.action(() => {
@@ -632,21 +636,21 @@ listling.ItemElement = class extends HTMLLIElement {
                 ui.dialog = dialog;
             }),
 
-            voteUnvote: micro.core.action(async() => {
+            voteUnvote: micro.core.action(async () => {
                 if (this._data.votesMeta.user_voted) {
                     const item = Object.assign(
                         {}, this._data.item,
-                        {votes: {count: this._data.votesMeta.count - 1, user_voted: false}}
+                        { votes: { count: this._data.votesMeta.count - 1, user_voted: false } }
                     );
                     await ui.call("DELETE", `${this._data.votes.url}/user`);
-                    this._activity.events.dispatchEvent({type: "item-votes-unvote", object: item});
+                    this._activity.events.dispatchEvent({ type: "item-votes-unvote", object: item });
                 } else {
                     const item = Object.assign(
                         {}, this._data.item,
-                        {votes: {count: this._data.votesMeta.count + 1, user_voted: true}}
+                        { votes: { count: this._data.votesMeta.count + 1, user_voted: true } }
                     );
                     await ui.call("POST", this._data.votes.url);
-                    this._activity.events.dispatchEvent({type: "item-votes-vote", object: item});
+                    this._activity.events.dispatchEvent({ type: "item-votes-vote", object: item });
                 }
             }),
 
@@ -696,9 +700,9 @@ listling.ItemElement = class extends HTMLLIElement {
                 this._data.item && this._data.item.location && this._data.item.location.coords
             );
             this.classList.toggle("listling-item-trashed",
-                                  this._data.item && this._data.item.trashed);
+                this._data.item && this._data.item.trashed);
             this.classList.toggle("listling-item-checked",
-                                  this._data.item && this._data.item.checked);
+                this._data.item && this._data.item.checked);
             this.classList.toggle("listling-item-mode-view", !this._data.editMode);
             this.classList.toggle("listling-item-mode-edit", this._data.editMode);
             this.classList.toggle(
@@ -713,7 +717,7 @@ listling.ItemElement = class extends HTMLLIElement {
 
         this.tabIndex = 0;
         this.shortcutContext = new micro.keyboard.ShortcutContext(this);
-        let move = dir => micro.util.dispatchEvent(this, new CustomEvent("move", {detail: {dir}}));
+        let move = dir => micro.util.dispatchEvent(this, new CustomEvent("move", { detail: { dir } }));
         this.shortcutContext.add("Alt+ArrowUp", move.bind(null, "up"));
         this.shortcutContext.add("Alt+ArrowDown", move.bind(null, "down"));
 
@@ -879,7 +883,7 @@ listling.ItemElement = class extends HTMLLIElement {
      * *resource* may also be a URL or :class:`File` to attach. They default to the corresponding
      * :attr:`item` attributes or ``null``.
      */
-    startEdit({title, text, resource, value, time, location} = {}) {
+    startEdit({ title, text, resource, value, time, location } = {}) {
         if (title === undefined) {
             title = this._data.item && this._data.item.title;
         }
@@ -908,10 +912,10 @@ listling.ItemElement = class extends HTMLLIElement {
         this.querySelector("micro-location-input").valueAsObject = location;
         const contentInput = this.querySelector("micro-content-input");
         if (typeof resource === "string" || resource instanceof File) {
-            contentInput.valueAsObject = {text, resource: null};
+            contentInput.valueAsObject = { text, resource: null };
             contentInput.attach(resource).catch(micro.util.catch);
         } else {
-            contentInput.valueAsObject = {text, resource};
+            contentInput.valueAsObject = { text, resource };
         }
         this._form.elements.title.focus();
     }
@@ -924,11 +928,11 @@ micro.bind.transforms.SHORT_CLOCK_FORMAT = {
 };
 
 micro.bind.transforms.SHORT_DAY_FORMAT = Object.assign(
-    {}, micro.bind.transforms.SHORT_DATE_FORMAT, {weekday: "short"}
+    {}, micro.bind.transforms.SHORT_DATE_FORMAT, { weekday: "short" }
 );
 
 /** Test if *a* and *b* are (strictly) unequal. */
-micro.bind.transforms.neq = function(ctx, a, b) {
+micro.bind.transforms.neq = function (ctx, a, b) {
     return a !== b;
 };
 
@@ -938,7 +942,7 @@ micro.bind.transforms.neq = function(ctx, a, b) {
  * *dateFormat* and *clockFormat* are :meth:`Date.toLocaleString` *options* and applied depending on
  * the precision of *time*.
  */
-micro.bind.transforms.formatTime = function(ctx, time, dateFormat, clockFormat) {
+micro.bind.transforms.formatTime = function (ctx, time, dateFormat, clockFormat) {
     if (!time) {
         return "";
     }
@@ -947,8 +951,8 @@ micro.bind.transforms.formatTime = function(ctx, time, dateFormat, clockFormat)
     );
 };
 
-document.registerElement("listling-ui", {prototype: listling.UI.prototype, extends: "body"});
+document.registerElement("listling-ui", { prototype: listling.UI.prototype, extends: "body" });
 document.registerElement("listling-intro-page", listling.IntroPage);
 document.registerElement("listling-list-page", listling.ListPage);
 document.registerElement("listling-item",
-                         {prototype: listling.ItemElement.prototype, extends: "li"});
+    { prototype: listling.ItemElement.prototype, extends: "li" });
diff --git a/listling/listling.py b/listling/listling.py
index 628339b..882d3b5 100644
--- a/listling/listling.py
+++ b/listling/listling.py
@@ -402,7 +402,13 @@ async def create(self, title: str, *, text: str = None, resource: str = None,
 
                 redis.call("SET", item.id, item_data)
                 redis.call("SADD", "items", item.id)
-                redis.call("RPUSH", list.id .. ".items", item.id)
+
+                if features.addNewItemsToTop then
+                    redis.call("LPUSH", list.id .. ".items", item.id)
+                else
+                    redis.call("RPUSH", list.id .. ".items", item.id)
+                end
+
                 redis.call("ZADD", list.id .. ".items.by_title", 0, id_by_title)
                 redis.call("HSET", list.id .. ".items.by_title.lexical", item.id, id_by_title)
                 if features.assign and list.assign_by_default then
@@ -561,7 +567,7 @@ def do_edit(self, **attrs: Any) -> None:
             raise error.ValueError('title_empty')
         if 'order' in attrs and attrs['order'] not in {None, 'title'}:
             raise error.ValueError(f"Unknown order {attrs['order']}")
-        features = {'check', 'assign', 'vote', 'value', 'time', 'location', 'play'}
+        features = {'check', 'assign', 'vote', 'value', 'time', 'location', 'play', 'addNewItemsToTop'}
         if 'features' in attrs and not set(attrs['features']) <= features:
             raise error.ValueError('feature_unknown')
         if 'mode' in attrs and attrs['mode'] not in {'collaborate', 'view'}:

From dd5e0d258f02e05bd403a0c6e24b885752e83458 Mon Sep 17 00:00:00 2001
From: Michael Braun <michael.braun1994@gmail.com>
Date: Sat, 4 Oct 2025 16:45:27 +0200
Subject: [PATCH 2/6] Reformat js file.

---
 client/listling/index.js | 128 +++++++++++++++++++--------------------
 1 file changed, 64 insertions(+), 64 deletions(-)

diff --git a/client/listling/index.js b/client/listling/index.js
index b0154b5..f68fbb1 100644
--- a/client/listling/index.js
+++ b/client/listling/index.js
@@ -34,18 +34,18 @@ listling.UI = class extends micro.UI {
         }
 
         this.pages = this.pages.concat([
-            { url: "^/$", page: listling.components.start.StartPage.make },
-            { url: "^/intro$", page: "listling-intro-page" },
-            { url: "^/about$", page: makeAboutPage },
-            { url: "^/share$", page: "listling-share-page" },
-            { url: "^/lists/([^/]+)(?:/[^/]+)?$", page: listling.ListPage.make }
+            {url: "^/$", page: listling.components.start.StartPage.make},
+            {url: "^/intro$", page: "listling-intro-page"},
+            {url: "^/about$", page: makeAboutPage},
+            {url: "^/share$", page: "listling-share-page"},
+            {url: "^/lists/([^/]+)(?:/[^/]+)?$", page: listling.ListPage.make}
         ]);
 
         Object.assign(this.renderEvent, {
             "create-list"(event) {
                 let elem = document.importNode(
                     ui.querySelector(".listling-create-list-event-template").content, true);
-                micro.bind.bind(elem, { event, makeListURL: listling.util.makeListURL });
+                micro.bind.bind(elem, {event, makeListURL: listling.util.makeListURL});
                 return elem;
             }
         });
@@ -82,7 +82,7 @@ listling.IntroPage = class extends micro.core.Page {
 
             createExample: micro.core.action(async useCase => {
                 const list = await ui.call(
-                    "POST", "/api/lists/create-example", { use_case: useCase.id }
+                    "POST", "/api/lists/create-example", {use_case: useCase.id}
                 );
                 ui.navigate(`/lists/${list.id.split(":")[1]}`).catch(micro.util.catch);
             })
@@ -130,7 +130,7 @@ listling.ListPage = class extends micro.core.Page {
         this._data = new micro.bind.Watchable({
             lst: null,
             modes: ["collaborate", "view"],
-            modeToText: (ctx, mode) => ({ collaborate: "Collaborate", view: "View" }[mode]),
+            modeToText: (ctx, mode) => ({collaborate: "Collaborate", view: "View"}[mode]),
             owners: null,
             presentItems: null,
             trashedItems: null,
@@ -188,7 +188,7 @@ listling.ListPage = class extends micro.core.Page {
                     });
                     this._data.editMode = false;
                     this._replayEvents();
-                    this.activity.events.dispatchEvent({ type: "editable-edit", object: list });
+                    this.activity.events.dispatchEvent({type: "editable-edit", object: list});
                 } catch (e) {
                     ui.handleCallError(e);
                 }
@@ -213,7 +213,7 @@ listling.ListPage = class extends micro.core.Page {
 
                 try {
                     this._data.lst.activity = await ui.call(
-                        "PATCH", `/api/lists/${this._data.lst.id}/activity`, { op }
+                        "PATCH", `/api/lists/${this._data.lst.id}/activity`, {op}
                     );
                     this.list = this._data.lst;
                 } catch (e) {
@@ -236,7 +236,7 @@ listling.ListPage = class extends micro.core.Page {
 
             moveItemKey: event => {
                 let ol = event.target.parentElement;
-                let { item } = event.target;
+                let {item} = event.target;
                 let i = this._data.presentItems.findIndex(other => other.id === item.id);
 
                 let j = i + (event.detail.dir === "up" ? -2 : 1);
@@ -336,32 +336,32 @@ listling.ListPage = class extends micro.core.Page {
                     let li;
                     let i;
                     switch (object.__type__) {
-                        case "List":
-                            if (this._data.editMode) {
-                                // Buffer modifications until editing is done
-                                this._bufferEvent(event);
-                                event.stopImmediatePropagation();
-                                return;
-                            }
-                            this.list = object;
-                            break;
-                        case "Item":
-                            li = Array.from(this._itemsOL.children).find(
-                                node => node.item.id === object.id
-                            );
-                            if (li && li.editMode) {
-                                // Buffer modifications until editing is done
-                                this._bufferEvent(event);
-                                event.stopImmediatePropagation();
-                                return;
-                            }
-                            i = this._items.findIndex(item => item.id === object.id);
-                            this._items[i] = object;
-                            this._data.trashedItemsCount = this._data.trashedItems.length;
-                            break;
-                        default:
-                            // Unreachable
-                            throw new Error();
+                    case "List":
+                        if (this._data.editMode) {
+                            // Buffer modifications until editing is done
+                            this._bufferEvent(event);
+                            event.stopImmediatePropagation();
+                            return;
+                        }
+                        this.list = object;
+                        break;
+                    case "Item":
+                        li = Array.from(this._itemsOL.children).find(
+                            node => node.item.id === object.id
+                        );
+                        if (li && li.editMode) {
+                            // Buffer modifications until editing is done
+                            this._bufferEvent(event);
+                            event.stopImmediatePropagation();
+                            return;
+                        }
+                        i = this._items.findIndex(item => item.id === object.id);
+                        this._items[i] = object;
+                        this._data.trashedItemsCount = this._data.trashedItems.length;
+                        break;
+                    default:
+                        // Unreachable
+                        throw new Error();
                     }
                 });
             }
@@ -420,7 +420,7 @@ listling.ListPage = class extends micro.core.Page {
             (async () => {
                 try {
                     await ui.call(
-                        "POST", `/api/users/${ui.user.id}/lists`, { list_id: this._data.lst.id }
+                        "POST", `/api/users/${ui.user.id}/lists`, {list_id: this._data.lst.id}
                     );
                 } catch (e) {
                     if (e instanceof micro.NetworkError) {
@@ -477,14 +477,14 @@ listling.ListPage = class extends micro.core.Page {
      * :meth:`ItemElement.startEdit`. *text* defaults to :attr:`list` *item_template*.
      */
     startCreateItem(
-        { title = null, text, resource = null, value = null, time = null, location = null } = {}
+        {title = null, text, resource = null, value = null, time = null, location = null} = {}
     ) {
         if (text === undefined) {
             text = this._data.lst.item_template;
         }
         this._data.creatingItem = true;
         const elem = this.querySelector(".listling-list-create-item [is=listling-item]");
-        elem.startEdit({ title, text, resource, value, time, location });
+        elem.startEdit({title, text, resource, value, time, location});
         elem.scrollIntoView(false);
     }
 
@@ -500,10 +500,10 @@ listling.ListPage = class extends micro.core.Page {
 
     async _moveItem(item, to) {
         return await micro.core.action(async () => {
-            ui.dispatchEvent(new CustomEvent("list-items-move", { detail: { item, to } }));
+            ui.dispatchEvent(new CustomEvent("list-items-move", {detail: {item, to}}));
             await ui.call(
                 "POST", `/api/lists/${this._data.lst.id}/items/move`,
-                { item_id: item.id, to_id: to?.id ?? null }
+                {item_id: item.id, to_id: to?.id ?? null}
             );
         })();
     }
@@ -523,8 +523,8 @@ listling.ListPage = class extends micro.core.Page {
 
 // eslint-disable-next-line no-underscore-dangle
 listling.ListPage._PERMISSIONS = {
-    collaborate: { user: new Set(["list-modify", "item-modify"]) },
-    view: { user: new Set() }
+    collaborate: {user: new Set(["list-modify", "item-modify"])},
+    view: {user: new Set()}
 };
 
 listling.ItemElement = class extends HTMLLIElement {
@@ -553,7 +553,7 @@ listling.ItemElement = class extends HTMLLIElement {
 
             edit: async () => {
                 const input = this.querySelector("micro-content-input");
-                const { text, resource } = input.valueAsObject;
+                const {text, resource} = input.valueAsObject;
                 let value = this._form.elements.value.valueAsNumber;
                 if (isNaN(value)) {
                     value = null;
@@ -579,7 +579,7 @@ listling.ItemElement = class extends HTMLLIElement {
                         ].includes(e.error.__type__)
                     ) {
                         // Delete the resource if it is no longer retrievable
-                        input.valueAsObject = { text, resource: null };
+                        input.valueAsObject = {text, resource: null};
                     } else {
                         ui.handleCallError(e);
                     }
@@ -590,12 +590,12 @@ listling.ItemElement = class extends HTMLLIElement {
                     this._data.editMode = false;
                     // eslint-disable-next-line no-underscore-dangle
                     ui.page._replayEvents();
-                    this._activity.events.dispatchEvent({ type: "editable-edit", object: item });
+                    this._activity.events.dispatchEvent({type: "editable-edit", object: item});
                 } else {
                     // Reset form
                     this._data.item = null;
                     this._activity.events.dispatchEvent(
-                        { type: "list-create-item", object: this._data.lst, detail: { item } }
+                        {type: "list-create-item", object: this._data.lst, detail: {item}}
                     );
                 }
                 if (this.onedit) {
@@ -616,18 +616,18 @@ listling.ItemElement = class extends HTMLLIElement {
 
             trash: micro.core.action(async () => {
                 const item = await ui.call("POST", `/api/items/${this._data.item.id}/trash`);
-                this._activity.events.dispatchEvent({ type: "trashable-trash", object: item });
+                this._activity.events.dispatchEvent({type: "trashable-trash", object: item});
             }),
 
             restore: micro.core.action(async () => {
                 const item = await ui.call("POST", `/api/items/${this._data.item.id}/restore`);
-                this._activity.events.dispatchEvent({ type: "trashable-restore", object: item });
+                this._activity.events.dispatchEvent({type: "trashable-restore", object: item});
             }),
 
             checkUncheck: micro.core.action(async () => {
                 const op = this._data.item.checked ? "uncheck" : "check";
                 const item = await ui.call("POST", `/api/items/${this._data.item.id}/${op}`);
-                this._activity.events.dispatchEvent({ type: `item-${op}`, object: item });
+                this._activity.events.dispatchEvent({type: `item-${op}`, object: item});
             }),
 
             assign: micro.core.action(() => {
@@ -640,17 +640,17 @@ listling.ItemElement = class extends HTMLLIElement {
                 if (this._data.votesMeta.user_voted) {
                     const item = Object.assign(
                         {}, this._data.item,
-                        { votes: { count: this._data.votesMeta.count - 1, user_voted: false } }
+                        {votes: {count: this._data.votesMeta.count - 1, user_voted: false}}
                     );
                     await ui.call("DELETE", `${this._data.votes.url}/user`);
-                    this._activity.events.dispatchEvent({ type: "item-votes-unvote", object: item });
+                    this._activity.events.dispatchEvent({type: "item-votes-unvote", object: item});
                 } else {
                     const item = Object.assign(
                         {}, this._data.item,
-                        { votes: { count: this._data.votesMeta.count + 1, user_voted: true } }
+                        {votes: {count: this._data.votesMeta.count + 1, user_voted: true}}
                     );
                     await ui.call("POST", this._data.votes.url);
-                    this._activity.events.dispatchEvent({ type: "item-votes-vote", object: item });
+                    this._activity.events.dispatchEvent({type: "item-votes-vote", object: item});
                 }
             }),
 
@@ -700,9 +700,9 @@ listling.ItemElement = class extends HTMLLIElement {
                 this._data.item && this._data.item.location && this._data.item.location.coords
             );
             this.classList.toggle("listling-item-trashed",
-                this._data.item && this._data.item.trashed);
+                                  this._data.item && this._data.item.trashed);
             this.classList.toggle("listling-item-checked",
-                this._data.item && this._data.item.checked);
+                                  this._data.item && this._data.item.checked);
             this.classList.toggle("listling-item-mode-view", !this._data.editMode);
             this.classList.toggle("listling-item-mode-edit", this._data.editMode);
             this.classList.toggle(
@@ -717,7 +717,7 @@ listling.ItemElement = class extends HTMLLIElement {
 
         this.tabIndex = 0;
         this.shortcutContext = new micro.keyboard.ShortcutContext(this);
-        let move = dir => micro.util.dispatchEvent(this, new CustomEvent("move", { detail: { dir } }));
+        let move = dir => micro.util.dispatchEvent(this, new CustomEvent("move", {detail: {dir}}));
         this.shortcutContext.add("Alt+ArrowUp", move.bind(null, "up"));
         this.shortcutContext.add("Alt+ArrowDown", move.bind(null, "down"));
 
@@ -883,7 +883,7 @@ listling.ItemElement = class extends HTMLLIElement {
      * *resource* may also be a URL or :class:`File` to attach. They default to the corresponding
      * :attr:`item` attributes or ``null``.
      */
-    startEdit({ title, text, resource, value, time, location } = {}) {
+    startEdit({title, text, resource, value, time, location} = {}) {
         if (title === undefined) {
             title = this._data.item && this._data.item.title;
         }
@@ -912,10 +912,10 @@ listling.ItemElement = class extends HTMLLIElement {
         this.querySelector("micro-location-input").valueAsObject = location;
         const contentInput = this.querySelector("micro-content-input");
         if (typeof resource === "string" || resource instanceof File) {
-            contentInput.valueAsObject = { text, resource: null };
+            contentInput.valueAsObject = {text, resource: null};
             contentInput.attach(resource).catch(micro.util.catch);
         } else {
-            contentInput.valueAsObject = { text, resource };
+            contentInput.valueAsObject = {text, resource};
         }
         this._form.elements.title.focus();
     }
@@ -928,7 +928,7 @@ micro.bind.transforms.SHORT_CLOCK_FORMAT = {
 };
 
 micro.bind.transforms.SHORT_DAY_FORMAT = Object.assign(
-    {}, micro.bind.transforms.SHORT_DATE_FORMAT, { weekday: "short" }
+    {}, micro.bind.transforms.SHORT_DATE_FORMAT, {weekday: "short"}
 );
 
 /** Test if *a* and *b* are (strictly) unequal. */
@@ -951,8 +951,8 @@ micro.bind.transforms.formatTime = function (ctx, time, dateFormat, clockFormat)
     );
 };
 
-document.registerElement("listling-ui", { prototype: listling.UI.prototype, extends: "body" });
+document.registerElement("listling-ui", {prototype: listling.UI.prototype, extends: "body"});
 document.registerElement("listling-intro-page", listling.IntroPage);
 document.registerElement("listling-list-page", listling.ListPage);
 document.registerElement("listling-item",
-    { prototype: listling.ItemElement.prototype, extends: "li" });
+                         {prototype: listling.ItemElement.prototype, extends: "li"});

From 4eedb5719092db91e5a30b7cf5d2d693f7ea5f2a Mon Sep 17 00:00:00 2001
From: Michael Braun <michael.braun1994@gmail.com>
Date: Sat, 4 Oct 2025 17:07:45 +0200
Subject: [PATCH 3/6] Reformat js file.

---
 client/listling/index.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/listling/index.js b/client/listling/index.js
index f68fbb1..f3a6ccd 100644
--- a/client/listling/index.js
+++ b/client/listling/index.js
@@ -173,7 +173,7 @@ listling.ListPage = class extends micro.core.Page {
                 this._form.elements.title.focus();
             }),
 
-            edit: async () => {
+            edit: async() => {
                 try {
                     const list = await ui.call("POST", `/api/lists/${this._data.lst.id}`, {
                         title: this._form.elements.title.value,
@@ -199,7 +199,7 @@ listling.ListPage = class extends micro.core.Page {
                 this._replayEvents();
             },
 
-            subscribeUnsubscribe: async () => {
+            subscribeUnsubscribe: async() => {
                 const op = this._data.lst.activity.user_subscribed ? "unsubscribe" : "subscribe";
                 if (op === "subscribe") {
                     const pushSubscription = await ui.service.pushManager.getSubscription();
@@ -306,8 +306,8 @@ listling.ListPage = class extends micro.core.Page {
         ui.shortcutContext.add("C", this._data.toggleSettings);
         ui.addEventListener("list-items-move", this);
 
-        this.ready.when(micro.core.request(async () => {
-            const setUpItems = async () => {
+        this.ready.when(micro.core.request(async() => {
+            const setUpItems = async() => {
                 const items = await ui.call("GET", `/api/lists/${this._data.lst.id}/items`);
                 this._items = new micro.bind.Watchable(items);
             };
@@ -417,7 +417,7 @@ listling.ListPage = class extends micro.core.Page {
 
         // Add list to lists of user
         if (ui.user) {
-            (async () => {
+            (async() => {
                 try {
                     await ui.call(
                         "POST", `/api/users/${ui.user.id}/lists`, {list_id: this._data.lst.id}
@@ -499,7 +499,7 @@ listling.ListPage = class extends micro.core.Page {
     }
 
     async _moveItem(item, to) {
-        return await micro.core.action(async () => {
+        return await micro.core.action(async() => {
             ui.dispatchEvent(new CustomEvent("list-items-move", {detail: {item, to}}));
             await ui.call(
                 "POST", `/api/lists/${this._data.lst.id}/items/move`,
@@ -551,7 +551,7 @@ listling.ItemElement = class extends HTMLLIElement {
 
             startEdit: micro.core.action(() => this.startEdit()),
 
-            edit: async () => {
+            edit: async() => {
                 const input = this.querySelector("micro-content-input");
                 const {text, resource} = input.valueAsObject;
                 let value = this._form.elements.value.valueAsNumber;
@@ -614,17 +614,17 @@ listling.ItemElement = class extends HTMLLIElement {
                 }
             },
 
-            trash: micro.core.action(async () => {
+            trash: micro.core.action(async() => {
                 const item = await ui.call("POST", `/api/items/${this._data.item.id}/trash`);
                 this._activity.events.dispatchEvent({type: "trashable-trash", object: item});
             }),
 
-            restore: micro.core.action(async () => {
+            restore: micro.core.action(async() => {
                 const item = await ui.call("POST", `/api/items/${this._data.item.id}/restore`);
                 this._activity.events.dispatchEvent({type: "trashable-restore", object: item});
             }),
 
-            checkUncheck: micro.core.action(async () => {
+            checkUncheck: micro.core.action(async() => {
                 const op = this._data.item.checked ? "uncheck" : "check";
                 const item = await ui.call("POST", `/api/items/${this._data.item.id}/${op}`);
                 this._activity.events.dispatchEvent({type: `item-${op}`, object: item});
@@ -636,7 +636,7 @@ listling.ItemElement = class extends HTMLLIElement {
                 ui.dialog = dialog;
             }),
 
-            voteUnvote: micro.core.action(async () => {
+            voteUnvote: micro.core.action(async() => {
                 if (this._data.votesMeta.user_voted) {
                     const item = Object.assign(
                         {}, this._data.item,
@@ -746,7 +746,7 @@ listling.ItemElement = class extends HTMLLIElement {
     }
 
     attachedCallback() {
-        (async () => {
+        (async() => {
             await ui.page.ready;
             this._activity = ui.page.activity;
         })().catch(micro.util.catch);

From b7a3a93fadb64f8e3501b69195a594a75ed18bcf Mon Sep 17 00:00:00 2001
From: Michael Braun <michael.braun1994@gmail.com>
Date: Sat, 4 Oct 2025 17:09:45 +0200
Subject: [PATCH 4/6] Reformat js file.

---
 client/listling/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/listling/index.js b/client/listling/index.js
index f3a6ccd..3e9dae5 100644
--- a/client/listling/index.js
+++ b/client/listling/index.js
@@ -932,7 +932,7 @@ micro.bind.transforms.SHORT_DAY_FORMAT = Object.assign(
 );
 
 /** Test if *a* and *b* are (strictly) unequal. */
-micro.bind.transforms.neq = function (ctx, a, b) {
+micro.bind.transforms.neq = function(ctx, a, b) {
     return a !== b;
 };
 
@@ -942,7 +942,7 @@ micro.bind.transforms.neq = function (ctx, a, b) {
  * *dateFormat* and *clockFormat* are :meth:`Date.toLocaleString` *options* and applied depending on
  * the precision of *time*.
  */
-micro.bind.transforms.formatTime = function (ctx, time, dateFormat, clockFormat) {
+micro.bind.transforms.formatTime = function(ctx, time, dateFormat, clockFormat) {
     if (!time) {
         return "";
     }

From bc0cfaf3fe4dd2463b0147c9565f53409a779d5a Mon Sep 17 00:00:00 2001
From: Michael Braun <michael.braun1994@gmail.com>
Date: Sat, 4 Oct 2025 17:12:09 +0200
Subject: [PATCH 5/6] Reformat js file.

---
 client/listling/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/listling/index.js b/client/listling/index.js
index 3e9dae5..db2503f 100644
--- a/client/listling/index.js
+++ b/client/listling/index.js
@@ -746,7 +746,7 @@ listling.ItemElement = class extends HTMLLIElement {
     }
 
     attachedCallback() {
-        (async() => {
+        (async () => {
             await ui.page.ready;
             this._activity = ui.page.activity;
         })().catch(micro.util.catch);

From a6454aba4e3c9777712b4e3581e6d22e273344fd Mon Sep 17 00:00:00 2001
From: Michael Braun <michael.braun1994@gmail.com>
Date: Sat, 4 Oct 2025 21:08:36 +0200
Subject: [PATCH 6/6] Add click on last list item moves it to list head

---
 client/listling/index.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/client/listling/index.js b/client/listling/index.js
index db2503f..79df17a 100644
--- a/client/listling/index.js
+++ b/client/listling/index.js
@@ -224,14 +224,24 @@ listling.ListPage = class extends micro.core.Page {
             moveItemDrag: event => {
                 // NOTE: This may be better done by micro.OL itself if some reset attribute is set
                 this._itemsOL.insertBefore(event.detail.li, event.detail.from);
+                let from = event.detail.li.item;
                 let to = event.detail.to && event.detail.to.item;
+
                 if (to) {
                     let i = this._data.presentItems.findIndex(item => item.id === to.id);
                     to = this._data.presentItems[i - 1] || null;
                 } else {
-                    to = this._data.presentItems[this._data.presentItems.length - 1];
+                    let oldIdx = this._data.presentItems.findIndex(item => item.id === from.id);
+                    let lastItemIdx = this._data.presentItems.length - 1;
+
+                    if (oldIdx === lastItemIdx) {
+                        // Move last item to head
+                        to = null;
+                    } else {
+                        to = this._data.presentItems[lastItemIdx];
+                    }
                 }
-                this._moveItem(event.detail.li.item, to);
+                this._moveItem(from, to);
             },
 
             moveItemKey: event => {