From 815c6a18e8b172c31d53f1ed5f1f98ed63642f30 Mon Sep 17 00:00:00 2001
From: Brahim Hadriche <brahim.hadriche@gmail.com>
Date: Fri, 5 Jan 2024 19:23:37 -0500
Subject: [PATCH 01/11] Customize home screen

---
 .../Screens/HomeScreen/HomeScreen.bs          |   9 +-
 .../Screens/HomeScreen/HomeScreen.xml         |   1 +
 .../Screens/HomeScreen/HomeScreenUtils.bs     |  28 ++++
 .../HomeScreenEditor/EditHomeScreenControl.bs |  58 +++++++
 .../EditHomeScreenControl.xml                 |  21 +++
 .../HomeScreenEditor/HomeScreenEditor.bs      | 148 ++++++++++++++++++
 .../HomeScreenEditor/HomeScreenEditor.xml     |  53 +++++++
 .../Services/Preferences/Preferences.bs       |  16 +-
 .../Middleware/HomeLayoutRouter.bs            |  25 +++
 .../Web/PlayletWebServer/PlayletWebServer.bs  |   2 +
 .../src/config/default_home_layout.yaml       |   8 +
 playlet-lib/src/config/preferences.json5      |  49 ++++++
 playlet-lib/src/source/utils/MathUtils.bs     |  19 +++
 playlet-web/src/App.svelte                    |   5 +
 playlet-web/src/lib/Api/PlayletApi.ts         |   6 +
 playlet-web/src/lib/Screens/HomeScreen.svelte |   4 +-
 .../EditHomeScreenControl.svelte              | 146 +++++++++++++++++
 .../lib/Screens/Settings/SettingsNode.svelte  |   2 +
 playlet-web/src/lib/Stores.ts                 |   2 +
 .../src/lib/VideoFeed/VideoListRow.svelte     |  18 ++-
 20 files changed, 606 insertions(+), 14 deletions(-)
 create mode 100644 playlet-lib/src/components/Screens/HomeScreen/HomeScreenUtils.bs
 create mode 100644 playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.bs
 create mode 100644 playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.xml
 create mode 100644 playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs
 create mode 100644 playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.xml
 create mode 100644 playlet-lib/src/components/Web/PlayletWebServer/Middleware/HomeLayoutRouter.bs
 create mode 100644 playlet-lib/src/source/utils/MathUtils.bs
 create mode 100644 playlet-web/src/lib/Screens/Settings/SettingControls/EditHomeScreenControl.svelte

diff --git a/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs b/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs
index 7016fc03..b7b80bb1 100644
--- a/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs
+++ b/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs
@@ -1,6 +1,7 @@
 import "pkg:/components/ContextMenu/ContextMenuUtils.bs"
 import "pkg:/components/Navigation/Navigation.bs"
 import "pkg:/source/utils/FocusManagement.bs"
+import "HomeScreenUtils.bs"
 
 function Init()
     m.top.focusable = true
@@ -14,7 +15,9 @@ function OnNodeReady()
     SetNavigation(invalid, "left", m.navBar)
 
     m.rowList@.BindNode()
-    m.rowList.feeds = ParseJson(ReadAsciiFile(m.top.feedFile))
+
+    m.preferences.observeFieldScoped("misc.home_screen_layout", FuncName(OnHomeLayoutChange))
+    OnHomeLayoutChange()
 end function
 
 function OnFocusChange() as void
@@ -35,3 +38,7 @@ function GetContextMenuOptionsForItem(rowItem as object) as object
     refresh = ContextMenuUtils.CreateOption("Refresh Home", m.rowList, "Refresh", [invalid])
     return [refresh]
 end function
+
+function OnHomeLayoutChange() as void
+    m.rowList.feeds = HomeScreenUtils.GetFeed(m.top.feedFile, m.preferences)
+end function
diff --git a/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.xml b/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.xml
index 1bc3da92..65778c7b 100644
--- a/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.xml
+++ b/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.xml
@@ -2,6 +2,7 @@
     <interface>
         <field id="navBar" type="node" bind="/NavBar" />
         <field id="invidious" type="node" bind="/Invidious" />
+        <field id="preferences" type="node" bind="/Preferences" />
         <field id="feedFile" type="string" value="libpkg:/config/default_home_layout.yaml" />
     </interface>
     <children>
diff --git a/playlet-lib/src/components/Screens/HomeScreen/HomeScreenUtils.bs b/playlet-lib/src/components/Screens/HomeScreen/HomeScreenUtils.bs
new file mode 100644
index 00000000..41edfc97
--- /dev/null
+++ b/playlet-lib/src/components/Screens/HomeScreen/HomeScreenUtils.bs
@@ -0,0 +1,28 @@
+import "pkg:/source/utils/Types.bs"
+
+namespace HomeScreenUtils
+
+    function GetFeed(feedFileName as string, preferences as object) as object
+        feed = ParseJson(ReadAsciiFile(feedFileName))
+
+        homeLayout = preferences["misc.home_screen_layout"]
+        if not IsArray(homeLayout) or homeLayout.Count() = 0
+            return feed
+        end if
+
+        feedItems = {}
+        for each item in feed
+            feedItems[item["id"]] = item
+        end for
+
+        filteredFeed = []
+        for each item in homeLayout
+            if item.enabled = true
+                filteredFeed.push(feedItems[item.id])
+            end if
+        end for
+
+        return filteredFeed
+    end function
+
+end namespace
diff --git a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.bs b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.bs
new file mode 100644
index 00000000..fc20d00f
--- /dev/null
+++ b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.bs
@@ -0,0 +1,58 @@
+import "pkg:/source/utils/Types.bs"
+import "pkg:/source/utils/FocusManagement.bs"
+import "pkg:/components/parts/AutoBind/OnNodeReadyNoOp.bs"
+
+function Init()
+    m.top.focusable = true
+    m.top.itemSpacings = [8]
+
+    m.button = m.top.findNode("button")
+    m.button.observeField("buttonSelected", FuncName(OpenHomeScreenEditor))
+end function
+
+function OnFocusChange() as void
+    if not m.top.focus
+        return
+    end if
+
+    NodeSetFocus(m.button, true)
+end function
+
+function BindPreference(preferences as object, key as string)
+    if m.preferences <> invalid and m.key <> invalid
+        m.preferences.unobserveFieldScoped(m.key)
+    end if
+
+    m.preferences = preferences
+    m.key = key
+
+    if preferences <> invalid and key <> invalid
+        preferences.observeFieldScoped(key, FuncName(OnPreferenceChange))
+        OnPreferenceChange()
+    end if
+end function
+
+function OpenHomeScreenEditor()
+    editor = CreateObject("roSGNode", "HomeScreenEditor")
+    m.appController@.PushScreen(editor)
+    editor@.BindNode()
+    editor.value = m.top.value
+    editor.observeField("save", FuncName(OnSaveHomeScreenEditor))
+end function
+
+function OnSaveHomeScreenEditor(event as object)
+    editor = event.GetRoSGNode()
+    m.top.value = editor.value
+end function
+
+function OnPreferenceChange()
+    m.top.value = m.preferences[m.key]
+end function
+
+function OnValueChange() as void
+    if m.preferences = invalid or m.key = invalid
+        return
+    end if
+
+    m.preferences[m.key] = m.top.value
+end function
diff --git a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.xml b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.xml
new file mode 100644
index 00000000..9d4db494
--- /dev/null
+++ b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.xml
@@ -0,0 +1,21 @@
+<component name="EditHomeScreenControl" extends="LayoutGroup" includes="AutoBind,Focus">
+    <interface>
+        <field id="displayText" type="string" alias="Button.text" />
+        <field id="description" type="string" alias="DescriptionLabel.text" />
+        <field id="value" type="array" onChange="OnValueChange" />
+        <field id="appController" type="node" bind="/AppController" />
+        <function name="BindPreference" />
+    </interface>
+    <children>
+        <Button
+            id="button"
+            minWidth="340"
+            showFocusFootprint="true" />
+        <Label id="DescriptionLabel"
+            width="450"
+            color="0xb4b4b4ff"
+            wrap="true">
+            <Font role="font" uri="font:SystemFontFile" size="18" />
+        </Label>
+    </children>
+</component>
\ No newline at end of file
diff --git a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs
new file mode 100644
index 00000000..b8973027
--- /dev/null
+++ b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs
@@ -0,0 +1,148 @@
+import "pkg:/components/Navigation/Navigation.bs"
+import "pkg:/components/parts/AutoBind/OnNodeReadyNoOp.bs"
+import "pkg:/source/utils/Types.bs"
+import "pkg:/source/utils/MathUtils.bs"
+
+function Init()
+    m.homeLayout = {}
+    homeLayout = ParseJson(ReadAsciiFile("libpkg:/config/default_home_layout.yaml"))
+    for each item in homeLayout
+        m.homeLayout[item.id] = item
+    end for
+
+    m.checkList = m.top.findNode("checkList")
+    m.moveUpButton = m.top.findNode("moveUpButton")
+    m.moveDownButton = m.top.findNode("moveDownButton")
+    m.closeButton = m.top.findNode("closeButton")
+    m.saveButton = m.top.findNode("saveButton")
+
+    SetNavigation(m.checkList, "down", m.saveButton)
+    SetNavigation(m.saveButton, "up", m.checkList)
+    SetNavigation(m.closeButton, "up", m.checkList)
+    SetNavigation(m.saveButton, "right", m.closeButton)
+    SetNavigation(m.closeButton, "left", m.saveButton)
+    SetNavigation(m.moveUpButton, "left", m.checkList)
+    SetNavigation(m.moveDownButton, "left", m.checkList)
+    SetNavigation(m.checkList, "right", m.moveUpButton)
+    SetNavigation(m.moveUpButton, "down", m.moveDownButton)
+    SetNavigation(m.moveDownButton, "up", m.moveUpButton)
+    SetNavigation(m.moveDownButton, "down", m.closeButton)
+
+    m.moveUpButton.observeField("buttonSelected", FuncName(OnMoveUpButtonSelected))
+    m.moveDownButton.observeField("buttonSelected", FuncName(OnMoveDownButtonSelected))
+    m.saveButton.observeField("buttonSelected", FuncName(OnSaveButtonSelected))
+    m.closeButton.observeField("buttonSelected", FuncName(Close))
+
+    m.checkList.observeField("checkedState", FuncName(OnCheckedStateChange))
+end function
+
+function OnFocusChange() as void
+    if not m.top.focus
+        return
+    end if
+
+    NodeSetFocus(m.checkList, true)
+end function
+
+function OnkeyEvent(key as string, press as boolean) as boolean
+    if NavigationKeyHandler(key, press).handled
+        return true
+    end if
+
+    if key = "options" and press
+        ' A pass-through to the app controller, so it can toggle picture-in-picture
+        return false
+    end if
+
+    if key = "back" and press
+        Close()
+        return true
+    end if
+
+    return true
+end function
+
+function OnValueChange()
+    content = m.checkList.content
+    value = m.top.value
+
+    nodes = []
+    checkedState = []
+    for each item in value
+        node = CreateObject("roSGNode", "ContentNode")
+        node.id = item.id
+        node.title = m.homeLayout[item.id].title
+        nodes.push(node)
+        checkedState.push(item.enabled)
+    end for
+
+    labelCount = content.getChildCount()
+    if labelCount > 0
+        content.removeChildrenIndex(labelCount, 0)
+    end if
+
+    content.appendChildren(nodes)
+    m.checkList.checkedState = checkedState
+end function
+
+function OnCheckedStateChange() as void
+    content = m.checkList.content
+    if content = invalid or content.getChildCount() = 0
+        return
+    end if
+    checkedState = m.checkList.checkedState
+    if checkedState = invalid or checkedState.Count() = 0
+        return
+    end if
+
+    value = []
+    checkboxes = content.getChildren(-1, 0)
+
+    for i = 0 to checkboxes.Count() - 1
+        checkbox = checkboxes[i]
+        value.push({
+            id: checkbox.id
+            enabled: checkedState[i]
+        })
+    end for
+
+    m.top.value = value
+end function
+
+' TODO:P0 check if moving items preserves the checked state
+function OnMoveUpButtonSelected() as void
+    MoveItem(-1)
+end function
+
+function OnMoveDownButtonSelected() as void
+    MoveItem(1)
+end function
+
+function MoveItem(offset as integer) as void
+    content = m.checkList.content
+    if content = invalid or content.getChildCount() = 0
+        return
+    end if
+
+    itemCount = content.getChildCount()
+    index = m.checkList.itemFocused
+    newIndex = MathUtils.Max(0, MathUtils.Min(index + offset, itemCount - 1))
+
+    if index = newIndex
+        return
+    end if
+
+    node = content.getChild(index)
+    content.insertChild(node, newIndex)
+
+    m.checkList.itemFocused = newIndex
+end function
+
+function OnSaveButtonSelected()
+    m.top.save = true
+    Close()
+end function
+
+function Close()
+    m.appController@.PopScreen()
+end function
diff --git a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.xml b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.xml
new file mode 100644
index 00000000..742fb23f
--- /dev/null
+++ b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.xml
@@ -0,0 +1,53 @@
+<component name="HomeScreenEditor" extends="Group" includes="AutoBind,Focus">
+    <interface>
+        <field id="value" type="array" onChange="OnValueChange" />
+        <field id="save" type="boolean" alwaysNotify="true" />
+        <field id="appController" type="node" bind="/AppController" />
+    </interface>
+    <children>
+        <Rectangle
+            width="1280"
+            height="720"
+            color="#000000"
+            opacity="0.5">
+        </Rectangle>
+        <Rectangle
+            width="960"
+            height="600"
+            translation="[160,60]"
+            color="#242424">
+            <CheckList
+                id="checkList"
+                vertFocusAnimationStyle="floatingFocus"
+                translation="[164,70]">
+
+                <ContentNode role="content" />
+            </CheckList>
+
+            <Button
+                id="moveUpButton"
+                text="Move up"
+                showFocusFootprint="true"
+                minWidth="200"
+                translation="[640,183]" />
+            <Button
+                id="moveDownButton"
+                text="Move down"
+                showFocusFootprint="true"
+                minWidth="200"
+                translation="[640,273]" />
+            <Button
+                id="closeButton"
+                text="Close"
+                showFocusFootprint="true"
+                minWidth="150"
+                translation="[500,500]" />
+            <Button
+                id="saveButton"
+                text="Save"
+                showFocusFootprint="true"
+                minWidth="150"
+                translation="[320,500]" />
+        </Rectangle>
+    </children>
+</component>
\ No newline at end of file
diff --git a/playlet-lib/src/components/Services/Preferences/Preferences.bs b/playlet-lib/src/components/Services/Preferences/Preferences.bs
index 148041c7..822492db 100644
--- a/playlet-lib/src/components/Services/Preferences/Preferences.bs
+++ b/playlet-lib/src/components/Services/Preferences/Preferences.bs
@@ -2,6 +2,13 @@ import "pkg:/source/utils/RegistryUtils.bs"
 import "pkg:/source/utils/Types.bs"
 
 function Init()
+    m.typeMapping = {
+        "boolean": "boolean"
+        "string": "string"
+        "radio": "string"
+        "array": "array"
+    }
+
     m.disableSavingToRegistry = false
     LoadPreferencesFile()
     AddNodeFields()
@@ -25,14 +32,7 @@ end function
 
 function AddNodeFieldsFromPreference(pref as object, fields as object)
     if pref.key <> invalid and pref.type <> invalid
-        fieldType = ""
-        if pref.type = "boolean"
-            fieldType = "boolean"
-        else if pref.type = "string"
-            fieldType = "string"
-        else if pref.type = "radio"
-            fieldType = "string"
-        end if
+        fieldType = m.typeMapping[pref.type]
         m.top.addField(pref.key, fieldType, false)
         fields[pref.key] = true
     end if
diff --git a/playlet-lib/src/components/Web/PlayletWebServer/Middleware/HomeLayoutRouter.bs b/playlet-lib/src/components/Web/PlayletWebServer/Middleware/HomeLayoutRouter.bs
new file mode 100644
index 00000000..ab1aaf98
--- /dev/null
+++ b/playlet-lib/src/components/Web/PlayletWebServer/Middleware/HomeLayoutRouter.bs
@@ -0,0 +1,25 @@
+import "pkg:/components/Screens/HomeScreen/HomeScreenUtils.bs"
+
+namespace Http
+
+    class HomeLayoutRouter extends HttpRouter
+
+        function new()
+            super()
+
+            m.Get("/api/home-layout", function(context as object) as boolean
+                response = context.response
+                task = context.server.task
+                preferences = task.preferences
+
+                feed = HomeScreenUtils.GetFeed("libpkg:/config/default_home_layout.yaml", preferences)
+                response.Json(feed)
+
+                return true
+            end function)
+
+        end function
+
+    end class
+
+end namespace
diff --git a/playlet-lib/src/components/Web/PlayletWebServer/PlayletWebServer.bs b/playlet-lib/src/components/Web/PlayletWebServer/PlayletWebServer.bs
index 7a6cddcd..9a6c013b 100644
--- a/playlet-lib/src/components/Web/PlayletWebServer/PlayletWebServer.bs
+++ b/playlet-lib/src/components/Web/PlayletWebServer/PlayletWebServer.bs
@@ -12,6 +12,7 @@ import "pkg:/components/Web/WebServer/Middleware/CorsMiddleware.bs"
 import "pkg:/components/Web/WebServer/Middleware/EtagMiddleware.bs"
 import "pkg:/components/Web/WebServer/Middleware/HttpStaticFilesRouter.bs"
 import "pkg:/components/Web/WebServer/WebSockets/WebSocketMiddleware.bs"
+import "pkg:/components/Web/PlayletWebServer/Middleware/HomeLayoutRouter.bs"
 
 function Init()
     m.top.packageName = "Playlet"
@@ -46,6 +47,7 @@ function SetupRoutes(server as object)
     server.UseRouter(new Http.InvidiousRouter())
     server.UseRouter(new Http.PlayQueueRouter())
     server.UseRouter(new Http.BookmarksRouter())
+    server.UseRouter(new Http.HomeLayoutRouter())
     server.UseRouter(new Http.ViewRouter())
     server.UseRouter(new Http.SearchHistoryRouter())
     server.UseRouter(new Http.PlayletLibUrlsRouter())
diff --git a/playlet-lib/src/config/default_home_layout.yaml b/playlet-lib/src/config/default_home_layout.yaml
index b0cf0317..c255d56e 100644
--- a/playlet-lib/src/config/default_home_layout.yaml
+++ b/playlet-lib/src/config/default_home_layout.yaml
@@ -1,4 +1,5 @@
 - title: Subscriptions
+  id: subscriptions
   feedSources:
     - id: inv_auth_feed
       title: Subscriptions
@@ -6,6 +7,7 @@
       endpoint: auth_feed
 
 - title: Trending
+  id: trending
   feedSources:
     - id: inv_trending
       title: Trending
@@ -13,6 +15,7 @@
       endpoint: trending
 
 - title: Trending - Music
+  id: trending_music
   feedSources:
     - id: inv_trending_music
       title: Trending - Music
@@ -22,6 +25,7 @@
         type: Music
 
 - title: Trending - Gaming
+  id: trending_gaming
   feedSources:
     - id: inv_trending_gaming
       title: Trending - Gaming
@@ -31,6 +35,7 @@
         type: Gaming
 
 - title: Trending - Movies
+  id: trending_movies
   feedSources:
     - id: inv_trending_movies
       title: Trending - Movies
@@ -40,6 +45,7 @@
         type: Movies
 
 - title: Popular
+  id: popular
   feedSources:
     - id: inv_popular
       title: Popular
@@ -47,6 +53,7 @@
       endpoint: popular
 
 - title: Playlists
+  id: playlists
   feedSources:
     - id: inv_auth_playlists
       title: Playlists
@@ -54,6 +61,7 @@
       endpoint: auth_playlists
 
 - title: Watch history
+  id: watch_history
   feedSources:
     - id: inv_auth_history
       title: Watch history
diff --git a/playlet-lib/src/config/preferences.json5 b/playlet-lib/src/config/preferences.json5
index 2192a530..41fed3e4 100644
--- a/playlet-lib/src/config/preferences.json5
+++ b/playlet-lib/src/config/preferences.json5
@@ -130,6 +130,55 @@
     key: "misc",
     description: "Misc. preferences",
     children: [
+      {
+        displayText: "Edit home screen",
+        key: "misc.home_screen_layout",
+        description: "Edit the home screen feed",
+        type: "array",
+        defaultValue: [
+          {
+            id: "subscriptions",
+            enabled: true,
+          },
+          {
+            id: "trending",
+            enabled: true,
+          },
+          {
+            id: "trending_music",
+            enabled: true,
+          },
+          {
+            id: "trending_gaming",
+            enabled: true,
+          },
+          {
+            id: "trending_movies",
+            enabled: true,
+          },
+          {
+            id: "popular",
+            enabled: true,
+          },
+          {
+            id: "playlists",
+            enabled: true,
+          },
+          {
+            id: "watch_history",
+            enabled: true,
+          },
+        ],
+        visibility: "tv",
+        rokuComponent: "EditHomeScreenControl",
+      },
+      {
+        displayText: "Edit home screen",
+        key: "misc.home_screen_layout",
+        description: "Edit the home screen feed",
+        visibility: "web",
+        svelteComponent: "EditHomeScreenControl",
+      },
       {
         displayText: "Queue notifications",
         key: "misc.queue_notifications",
diff --git a/playlet-lib/src/source/utils/MathUtils.bs b/playlet-lib/src/source/utils/MathUtils.bs
new file mode 100644
index 00000000..8f86f8b4
--- /dev/null
+++ b/playlet-lib/src/source/utils/MathUtils.bs
@@ -0,0 +1,19 @@
+namespace MathUtils
+
+    function Max(a as dynamic, b as dynamic) as dynamic
+        if a > b
+            return a
+        else
+            return b
+        end if
+    end function
+
+    function Min(a as dynamic, b as dynamic) as dynamic
+        if a < b
+            return a
+        else
+            return b
+        end if
+    end function
+
+end namespace
diff --git a/playlet-web/src/App.svelte b/playlet-web/src/App.svelte
index 88c379a4..8312149d 100644
--- a/playlet-web/src/App.svelte
+++ b/playlet-web/src/App.svelte
@@ -6,6 +6,7 @@
     appStateStore,
     bookmarksStore,
     homeLayoutFileStore,
+    homeLayoutStore,
     invidiousVideoApiStore,
     playletStateStore,
     preferencesModelStore,
@@ -27,6 +28,10 @@
       playletStateStore.set(value);
     });
 
+    PlayletApi.getHomeLayout().then((value) => {
+      homeLayoutStore.set(value);
+    });
+
     PlayletApi.getHomeLayoutFile().then((value) => {
       homeLayoutFileStore.set(value);
     });
diff --git a/playlet-web/src/lib/Api/PlayletApi.ts b/playlet-web/src/lib/Api/PlayletApi.ts
index eaa08757..c97cc0a6 100644
--- a/playlet-web/src/lib/Api/PlayletApi.ts
+++ b/playlet-web/src/lib/Api/PlayletApi.ts
@@ -13,6 +13,12 @@ export class PlayletApi {
         return await response.json();
     }
 
+    // Home layout is the home layout file, but with the user's preferences applied.
+    static async getHomeLayout() {
+        const response = await fetch(`${PlayletApi.host()}/api/home-layout`);
+        return await response.json();
+    }
+
     static async getHomeLayoutFile() {
         const response = await fetch(`${PlayletApi.host()}/config/default_home_layout.yaml`);
         return await response.json();
diff --git a/playlet-web/src/lib/Screens/HomeScreen.svelte b/playlet-web/src/lib/Screens/HomeScreen.svelte
index b3cfec31..c59f8aaf 100644
--- a/playlet-web/src/lib/Screens/HomeScreen.svelte
+++ b/playlet-web/src/lib/Screens/HomeScreen.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import VideoListRow from "lib/VideoFeed/VideoListRow.svelte";
-  import { homeLayoutFileStore } from "lib/Stores";
+  import { homeLayoutStore } from "lib/Stores";
 
   export let visibility: boolean;
 </script>
 
 <div class={visibility ? "" : "hidden"}>
   <!-- TODO:P0 Handle authenticated feed when not logged in -->
-  {#each $homeLayoutFileStore as feed}
+  {#each $homeLayoutStore as feed}
     <VideoListRow {feed} />
   {/each}
 </div>
diff --git a/playlet-web/src/lib/Screens/Settings/SettingControls/EditHomeScreenControl.svelte b/playlet-web/src/lib/Screens/Settings/SettingControls/EditHomeScreenControl.svelte
new file mode 100644
index 00000000..b84d3514
--- /dev/null
+++ b/playlet-web/src/lib/Screens/Settings/SettingControls/EditHomeScreenControl.svelte
@@ -0,0 +1,146 @@
+<script lang="ts">
+  import {
+    homeLayoutFileStore,
+    homeLayoutStore,
+    userPreferencesStore,
+  } from "lib/Stores";
+  import ArrowUpIcon from "assets/remote-control/arrow-up.svg.svelte";
+  import ArrowDownIcon from "assets/remote-control/arrow-down.svg.svelte";
+  import { PlayletApi } from "lib/Api/PlayletApi";
+
+  const textSizes = ["text-2xl", "text-lg", "text-base", "text-sm", "text-xs"];
+
+  export let displayText: string = "";
+  // svelte-ignore unused-export-let
+  export let key: string = "";
+  export let description: string = "";
+  export let level: number = 0;
+
+  let value;
+  let originalValue;
+  let homeLayout;
+  userPreferencesStore.subscribe((userPreferences) => {
+    originalValue = userPreferences[key];
+  });
+
+  homeLayoutFileStore.subscribe((value) => {
+    homeLayout = value.reduce((acc, cur) => {
+      acc[cur.id] = cur;
+      return acc;
+    }, {});
+  });
+
+  let modal;
+
+  async function openHomeScreenEditor() {
+    value = JSON.parse(JSON.stringify(originalValue));
+    modal.showModal();
+  }
+
+  async function save() {
+    if (key !== "" && value) {
+      await PlayletApi.saveUserPreference(key, value);
+
+      const refreshUserPrefrences = PlayletApi.getUserPreferences();
+      refreshUserPrefrences.then((value) => {
+        userPreferencesStore.set(value);
+        console.log("refreshed user preferences");
+      });
+
+      const refreshHomeLayout = PlayletApi.getHomeLayout();
+      refreshHomeLayout.then((value) => {
+        homeLayoutStore.set(value);
+        console.log("refreshed home layout");
+      });
+
+      await Promise.all([refreshUserPrefrences, refreshHomeLayout]);
+    }
+  }
+
+  function onClose() {
+    // Reset value to original value to avoid weird animation on show
+    value = JSON.parse(JSON.stringify(originalValue));
+  }
+
+  function moveUp(index) {
+    if (index > 0) {
+      const updatedValue = [...value];
+      [updatedValue[index - 1], updatedValue[index]] = [
+        updatedValue[index],
+        updatedValue[index - 1],
+      ];
+      value = updatedValue;
+    }
+  }
+
+  function moveDown(index) {
+    if (index < value.length - 1) {
+      const updatedValue = [...value];
+      [updatedValue[index], updatedValue[index + 1]] = [
+        updatedValue[index + 1],
+        updatedValue[index],
+      ];
+      value = updatedValue;
+    }
+  }
+</script>
+
+<div class="m-5">
+  <div class={textSizes[level]}>{displayText}</div>
+  <div class="text-xs text-gray-500">{@html description}</div>
+  <button class="btn m-1" on:click={openHomeScreenEditor}
+    >Edit home screen</button
+  >
+</div>
+
+<dialog bind:this={modal} on:close={onClose} class="modal">
+  <div class="modal-box bg-base-100">
+    {#if value && homeLayout}
+      <table class="w-full">
+        {#each value as item, i (i)}
+          <tr>
+            <td>
+              <div class="tooltip" data-tip="Move up">
+                <button
+                  class="btn btn-outline btn-sm"
+                  on:click={() => moveUp(i)}
+                  disabled={i === 0}
+                >
+                  <ArrowUpIcon />
+                </button>
+              </div>
+            </td>
+            <td>
+              <label class="label p-0 cursor-pointer">
+                <div class="label-text">{homeLayout[item.id].title}</div>
+                <input
+                  type="checkbox"
+                  name={item.id}
+                  bind:checked={item.enabled}
+                  class="toggle toggle-primary"
+                />
+              </label>
+            </td>
+            <td class="text-right">
+              <div class="tooltip" data-tip="Move down">
+                <button
+                  class="btn btn-outline btn-sm m-2"
+                  on:click={() => moveDown(i)}
+                  disabled={i === value.length - 1}
+                >
+                  <ArrowDownIcon />
+                </button>
+              </div>
+            </td>
+          </tr>
+        {/each}
+      </table>
+      <form method="dialog" class="flex justify-center">
+        <button class="btn btn-primary" on:click={save}>Save</button>
+      </form>
+    {/if}
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>Close</button>
+  </form>
+</dialog>
diff --git a/playlet-web/src/lib/Screens/Settings/SettingsNode.svelte b/playlet-web/src/lib/Screens/Settings/SettingsNode.svelte
index b2f6012c..e2a1eb6c 100644
--- a/playlet-web/src/lib/Screens/Settings/SettingsNode.svelte
+++ b/playlet-web/src/lib/Screens/Settings/SettingsNode.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import BooleanControl from "lib/Screens/Settings/SettingControls/BooleanControl.svelte";
   import ClearSearchHistoryControl from "lib/Screens/Settings/SettingControls/ClearSearchHistoryControl.svelte";
+  import EditHomeScreenControl from "lib/Screens/Settings/SettingControls/EditHomeScreenControl.svelte";
   import RadioControl from "lib/Screens/Settings/SettingControls/RadioControl.svelte";
   import StringControl from "lib/Screens/Settings/SettingControls/StringControl.svelte";
 
@@ -23,6 +24,7 @@
 
   const customComponents = {
     ClearSearchHistoryControl,
+    EditHomeScreenControl,
   };
 </script>
 
diff --git a/playlet-web/src/lib/Stores.ts b/playlet-web/src/lib/Stores.ts
index 035f51fa..cda0be34 100644
--- a/playlet-web/src/lib/Stores.ts
+++ b/playlet-web/src/lib/Stores.ts
@@ -15,6 +15,8 @@ export const userPreferencesStore = writable({} as any);
 
 export const invidiousVideoApiStore = writable({} as any);
 
+export const homeLayoutStore = writable([] as any);
+
 export const homeLayoutFileStore = writable([] as any);
 
 export const bookmarksStore = writable([] as any);
diff --git a/playlet-web/src/lib/VideoFeed/VideoListRow.svelte b/playlet-web/src/lib/VideoFeed/VideoListRow.svelte
index 389cbe7d..d6a02824 100644
--- a/playlet-web/src/lib/VideoFeed/VideoListRow.svelte
+++ b/playlet-web/src/lib/VideoFeed/VideoListRow.svelte
@@ -7,7 +7,7 @@
 
   // TODO:P1 figure out why some uncached feeds (e.g. channels/ucid/videos) get hit twice
   export let feed: any = undefined;
-  export let videos = [];
+  let videos = [];
 
   enum FeedLoadState {
     None,
@@ -28,6 +28,8 @@
   let scrollStart = 0;
   let scrollEnd = 0;
 
+  let loadDataTask = undefined;
+
   // w-80|w-60 p-2: 320px|240px + 16px padding on each side
   const videoItemWidth = 320 + 16 * 2;
   const channelItemWidth = 240 + 16 * 2;
@@ -42,6 +44,18 @@
     { threshold: [0] }
   );
 
+  $: {
+    if (feed) {
+      feedSourcesIndex = 0;
+      feedLoadState = FeedLoadState.None;
+      videos = [];
+      itemWidths = [];
+      scrollStart = 0;
+      scrollEnd = 0;
+      loadDataTask = undefined;
+    }
+  }
+
   $: {
     if (
       carouselElement &&
@@ -112,8 +126,6 @@
     loadDataTask = undefined;
   }
 
-  let loadDataTask;
-
   async function loadData() {
     feedLoadState = FeedLoadState.Loading;
     let totalFetchedItems = 0;

From 793b100d57a3ffa94a3793369c5a2716507ce44b Mon Sep 17 00:00:00 2001
From: Brahim Hadriche <brahim.hadriche@gmail.com>
Date: Fri, 5 Jan 2024 19:28:45 -0500
Subject: [PATCH 02/11] remove logs

---
 .../Settings/SettingControls/EditHomeScreenControl.svelte       | 2 --
 1 file changed, 2 deletions(-)

diff --git a/playlet-web/src/lib/Screens/Settings/SettingControls/EditHomeScreenControl.svelte b/playlet-web/src/lib/Screens/Settings/SettingControls/EditHomeScreenControl.svelte
index b84d3514..da568c7e 100644
--- a/playlet-web/src/lib/Screens/Settings/SettingControls/EditHomeScreenControl.svelte
+++ b/playlet-web/src/lib/Screens/Settings/SettingControls/EditHomeScreenControl.svelte
@@ -44,13 +44,11 @@
       const refreshUserPrefrences = PlayletApi.getUserPreferences();
       refreshUserPrefrences.then((value) => {
         userPreferencesStore.set(value);
-        console.log("refreshed user preferences");
       });
 
       const refreshHomeLayout = PlayletApi.getHomeLayout();
       refreshHomeLayout.then((value) => {
         homeLayoutStore.set(value);
-        console.log("refreshed home layout");
       });
 
       await Promise.all([refreshUserPrefrences, refreshHomeLayout]);

From eace91903b345af47271fc3945dd2a46eed2c7c5 Mon Sep 17 00:00:00 2001
From: github-action linter <githubaction@githubaction.com>
Date: Sat, 6 Jan 2024 00:29:48 +0000
Subject: [PATCH 03/11] Lint fix

---
 playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs   | 2 +-
 .../SettingsScreen/HomeScreenEditor/EditHomeScreenControl.bs  | 4 ++--
 .../SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs       | 2 +-
 .../src/components/Web/PlayletWebServer/PlayletWebServer.bs   | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs b/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs
index b7b80bb1..f3000e15 100644
--- a/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs
+++ b/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs
@@ -1,7 +1,7 @@
+import "HomeScreenUtils.bs"
 import "pkg:/components/ContextMenu/ContextMenuUtils.bs"
 import "pkg:/components/Navigation/Navigation.bs"
 import "pkg:/source/utils/FocusManagement.bs"
-import "HomeScreenUtils.bs"
 
 function Init()
     m.top.focusable = true
diff --git a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.bs b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.bs
index fc20d00f..b4c98019 100644
--- a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.bs
+++ b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.bs
@@ -1,6 +1,6 @@
-import "pkg:/source/utils/Types.bs"
-import "pkg:/source/utils/FocusManagement.bs"
 import "pkg:/components/parts/AutoBind/OnNodeReadyNoOp.bs"
+import "pkg:/source/utils/FocusManagement.bs"
+import "pkg:/source/utils/Types.bs"
 
 function Init()
     m.top.focusable = true
diff --git a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs
index b8973027..bcc3885d 100644
--- a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs
+++ b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs
@@ -1,7 +1,7 @@
 import "pkg:/components/Navigation/Navigation.bs"
 import "pkg:/components/parts/AutoBind/OnNodeReadyNoOp.bs"
-import "pkg:/source/utils/Types.bs"
 import "pkg:/source/utils/MathUtils.bs"
+import "pkg:/source/utils/Types.bs"
 
 function Init()
     m.homeLayout = {}
diff --git a/playlet-lib/src/components/Web/PlayletWebServer/PlayletWebServer.bs b/playlet-lib/src/components/Web/PlayletWebServer/PlayletWebServer.bs
index 9a6c013b..2b66b104 100644
--- a/playlet-lib/src/components/Web/PlayletWebServer/PlayletWebServer.bs
+++ b/playlet-lib/src/components/Web/PlayletWebServer/PlayletWebServer.bs
@@ -1,6 +1,7 @@
 import "pkg:/components/parts/AutoBind/OnNodeReadyNoOp.bs"
 import "pkg:/components/Web/PlayletWebServer/Middleware/BookmarksRouter.bs"
 import "pkg:/components/Web/PlayletWebServer/Middleware/DashRouter.bs"
+import "pkg:/components/Web/PlayletWebServer/Middleware/HomeLayoutRouter.bs"
 import "pkg:/components/Web/PlayletWebServer/Middleware/InvidiousRouter.bs"
 import "pkg:/components/Web/PlayletWebServer/Middleware/PlayletLibUrlsRouter.bs"
 import "pkg:/components/Web/PlayletWebServer/Middleware/PlayQueueRouter.bs"
@@ -12,7 +13,6 @@ import "pkg:/components/Web/WebServer/Middleware/CorsMiddleware.bs"
 import "pkg:/components/Web/WebServer/Middleware/EtagMiddleware.bs"
 import "pkg:/components/Web/WebServer/Middleware/HttpStaticFilesRouter.bs"
 import "pkg:/components/Web/WebServer/WebSockets/WebSocketMiddleware.bs"
-import "pkg:/components/Web/PlayletWebServer/Middleware/HomeLayoutRouter.bs"
 
 function Init()
     m.top.packageName = "Playlet"

From 26bff7296ada9ec69a5841772f20c48fab8eb299 Mon Sep 17 00:00:00 2001
From: Brahim Hadriche <brahim.hadriche@gmail.com>
Date: Fri, 5 Jan 2024 19:32:42 -0500
Subject: [PATCH 04/11] move func

---
 .../src/components/Screens/HomeScreen/HomeScreen.bs       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs b/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs
index f3000e15..0e1198f0 100644
--- a/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs
+++ b/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs
@@ -20,6 +20,10 @@ function OnNodeReady()
     OnHomeLayoutChange()
 end function
 
+function OnHomeLayoutChange() as void
+    m.rowList.feeds = HomeScreenUtils.GetFeed(m.top.feedFile, m.preferences)
+end function
+
 function OnFocusChange() as void
     if not m.top.focus
         return
@@ -38,7 +42,3 @@ function GetContextMenuOptionsForItem(rowItem as object) as object
     refresh = ContextMenuUtils.CreateOption("Refresh Home", m.rowList, "Refresh", [invalid])
     return [refresh]
 end function
-
-function OnHomeLayoutChange() as void
-    m.rowList.feeds = HomeScreenUtils.GetFeed(m.top.feedFile, m.preferences)
-end function

From 32e948733c7572f972c5f5230d76187888d4f32b Mon Sep 17 00:00:00 2001
From: Brahim Hadriche <brahim.hadriche@gmail.com>
Date: Sat, 6 Jan 2024 09:52:49 -0500
Subject: [PATCH 05/11] Fix for checklist

---
 .../SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs  | 9 ++++++++-
 .../SettingsScreen/HomeScreenEditor/HomeScreenEditor.xml | 4 ++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs
index bcc3885d..39cb1152 100644
--- a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs
+++ b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs
@@ -109,7 +109,6 @@ function OnCheckedStateChange() as void
     m.top.value = value
 end function
 
-' TODO:P0 check if moving items preserves the checked state
 function OnMoveUpButtonSelected() as void
     MoveItem(-1)
 end function
@@ -132,13 +131,21 @@ function MoveItem(offset as integer) as void
         return
     end if
 
+    checkedState = m.checkList.checkedState
     node = content.getChild(index)
     content.insertChild(node, newIndex)
 
+    tmp = checkedState[index]
+    checkedState[index] = checkedState[newIndex]
+    checkedState[newIndex] = tmp
+
     m.checkList.itemFocused = newIndex
+    m.checkList.jumpToItem = newIndex
+    m.checkList.checkedState = checkedState
 end function
 
 function OnSaveButtonSelected()
+    ' TODO:P0 save the new layout does not always work?
     m.top.save = true
     Close()
 end function
diff --git a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.xml b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.xml
index 742fb23f..f50e4961 100644
--- a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.xml
+++ b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.xml
@@ -28,13 +28,13 @@
                 id="moveUpButton"
                 text="Move up"
                 showFocusFootprint="true"
-                minWidth="200"
+                minWidth="220"
                 translation="[640,183]" />
             <Button
                 id="moveDownButton"
                 text="Move down"
                 showFocusFootprint="true"
-                minWidth="200"
+                minWidth="220"
                 translation="[640,273]" />
             <Button
                 id="closeButton"

From ae019a18b1becb2fed13e8dbe9b5892aaafc5dd8 Mon Sep 17 00:00:00 2001
From: Brahim Hadriche <brahim.hadriche@gmail.com>
Date: Sat, 6 Jan 2024 18:01:59 -0500
Subject: [PATCH 06/11] Fix save state

---
 .../SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs
index 39cb1152..7a331a94 100644
--- a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs
+++ b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/HomeScreenEditor.bs
@@ -145,7 +145,8 @@ function MoveItem(offset as integer) as void
 end function
 
 function OnSaveButtonSelected()
-    ' TODO:P0 save the new layout does not always work?
+    ' Save the new layout to m.top.value
+    OnCheckedStateChange()
     m.top.save = true
     Close()
 end function

From 8980e597c97fca62df64ac6855caea475d8326ae Mon Sep 17 00:00:00 2001
From: Brahim Hadriche <brahim.hadriche@gmail.com>
Date: Sat, 6 Jan 2024 18:06:09 -0500
Subject: [PATCH 07/11] open api

---
 docs/playlet-web-api.yml | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/docs/playlet-web-api.yml b/docs/playlet-web-api.yml
index ba081132..472e63c7 100644
--- a/docs/playlet-web-api.yml
+++ b/docs/playlet-web-api.yml
@@ -227,6 +227,41 @@ paths:
           description: No Content
         "400":
           description: Bad Request
+  /api/home-layout:
+    get:
+      summary: Get home layout
+      description: Get the current home layout. This is the layout of the home screen, based on user preferences.
+      operationId: getHomeLayout
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    id:
+                      type: string
+                    title:
+                      type: string
+                    feedSources:
+                      type: array
+                      items:
+                        type: object
+                        properties:
+                          apiType:
+                            type: string
+                          endpoint:
+                            type: string
+                          id:
+                            type: string
+                          queryParams:
+                            type: object
+                            additionalProperties: true
+                          title:
+                            type: string
   /api/playlet-lib-urls:
     get:
       summary: Get Playlet lib URLs

From 5b235ec710ede090e407f06efccc5292ce7f31e5 Mon Sep 17 00:00:00 2001
From: Brahim Hadriche <brahim.hadriche@gmail.com>
Date: Sat, 6 Jan 2024 18:07:42 -0500
Subject: [PATCH 08/11] Fix spec

---
 docs/playlet-web-api.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/playlet-web-api.yml b/docs/playlet-web-api.yml
index 472e63c7..87ccc08d 100644
--- a/docs/playlet-web-api.yml
+++ b/docs/playlet-web-api.yml
@@ -153,7 +153,7 @@ paths:
                 properties:
                   index:
                     type: integer
-                  playlistIndex
+                  playlistIndex:
                     type: integer
                   items:
                     type: array
@@ -178,7 +178,7 @@ paths:
                 properties:
                   index:
                     type: integer
-                  playlistIndex
+                  playlistIndex:
                     type: integer
                   items:
                     type: array

From ef69f2b1663098b0f83be23036d77a1b2317eed9 Mon Sep 17 00:00:00 2001
From: Brahim Hadriche <brahim.hadriche@gmail.com>
Date: Sat, 6 Jan 2024 18:08:43 -0500
Subject: [PATCH 09/11] Changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 833a1453..71be97e1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- A home screen editor allowing to enable/disable feeds, and change their order.
+
 ## [0.18.1] - 2024-01-02
 
 ### Fixed

From 963f220279fd17e7c11b5910da9403036226cab8 Mon Sep 17 00:00:00 2001
From: Brahim Hadriche <brahim.hadriche@gmail.com>
Date: Sat, 6 Jan 2024 18:10:26 -0500
Subject: [PATCH 10/11] Add TODO

---
 playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs b/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs
index 0e1198f0..1d7eb135 100644
--- a/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs
+++ b/playlet-lib/src/components/Screens/HomeScreen/HomeScreen.bs
@@ -16,6 +16,8 @@ function OnNodeReady()
 
     m.rowList@.BindNode()
 
+    ' TODO:P1 home screen should only be refreshed when the user navigates to it
+    ' (similar to bookmarks screen)
     m.preferences.observeFieldScoped("misc.home_screen_layout", FuncName(OnHomeLayoutChange))
     OnHomeLayoutChange()
 end function

From 124fe0a7bf2ff62ca06c18c74b0853d3ad0aff23 Mon Sep 17 00:00:00 2001
From: Brahim Hadriche <brahim.hadriche@gmail.com>
Date: Sat, 6 Jan 2024 18:15:06 -0500
Subject: [PATCH 11/11] Button size

---
 .../SettingsScreen/HomeScreenEditor/EditHomeScreenControl.xml   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.xml b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.xml
index 9d4db494..30f0b728 100644
--- a/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.xml
+++ b/playlet-lib/src/components/Screens/SettingsScreen/HomeScreenEditor/EditHomeScreenControl.xml
@@ -9,7 +9,7 @@
     <children>
         <Button
             id="button"
-            minWidth="340"
+            minWidth="300"
             showFocusFootprint="true" />
         <Label id="DescriptionLabel"
             width="450"