From e3743454b51af2c5b0907317994edc30f6adf446 Mon Sep 17 00:00:00 2001
From: Anton Gustafsson <anton@moimob.com>
Date: Wed, 6 Sep 2023 20:04:02 +0200
Subject: [PATCH] feat: create multiple lists of ingredients (#369)

---
 .gitignore                                    |   5 +-
 android/app/build.gradle                      |   4 +-
 cypress/e2e/ingredients.cy.ts                 |  50 ++++++++
 .../android/en-US/changelogs/13700.txt        |   1 +
 src/components/dialogs/welcome-dialog.html    |   2 +-
 src/components/icons/icon-arrow-forward.html  |  11 ++
 src/components/index.ts                       |   3 +-
 src/domain/entities/ingredient-list.ts        |   5 +
 src/locales/en/translation.json               |   6 +-
 src/main.ts                                   |  10 +-
 .../all-ingredients/all-ingredients.html      |   2 +
 src/modules/ingredients/ingredients.html      |   4 +-
 .../search-ingredients.html                   |   3 +
 .../search-ingredients/search-ingredients.ts  |   5 +-
 .../selected-ingredients-list-component.html  |   9 ++
 .../selected-ingredients-list-component.ts    |  20 +++
 .../ingredient-list-drawer.html               |  40 ++++++
 .../ingredient-list-drawer.ts                 |  70 +++++++++++
 .../ingredient-lists/ingredient-lists.html    |  25 ++++
 .../user/ingredient-lists/ingredient-lists.ts |  30 +++++
 .../user/ingredients/user-ingredients.html    |  10 +-
 src/modules/user/tags/user-tags.html          |  10 +-
 src/modules/user/user-page.html               |  20 ++-
 src/modules/user/user-page.ts                 |  23 +++-
 src/modules/user/user-router.ts               |   7 ++
 src/services/local-storage-service.ts         | 118 ++++++++++++++++--
 tests/services/ingredient-service.test.ts     |   5 +-
 tests/services/local-storage-service.test.ts  |  20 +++
 28 files changed, 466 insertions(+), 52 deletions(-)
 create mode 100644 fastlane/metadata/android/en-US/changelogs/13700.txt
 create mode 100644 src/components/icons/icon-arrow-forward.html
 create mode 100644 src/domain/entities/ingredient-list.ts
 create mode 100644 src/modules/ingredients/selected-ingredients-list-component.html
 create mode 100644 src/modules/ingredients/selected-ingredients-list-component.ts
 create mode 100644 src/modules/user/ingredient-lists/ingredient-list-drawer.html
 create mode 100644 src/modules/user/ingredient-lists/ingredient-list-drawer.ts
 create mode 100644 src/modules/user/ingredient-lists/ingredient-lists.html
 create mode 100644 src/modules/user/ingredient-lists/ingredient-lists.ts

diff --git a/.gitignore b/.gitignore
index 99deca21..90ff5783 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,7 +37,4 @@ node_modules
 .env
 /coverage
 
-/android/keystore.jks
-/android/release.jks.base64
-/fastlane/service-account-key.base64
-/fastlane/service-account-key.json
\ No newline at end of file
+/fastlane/report.xml
\ No newline at end of file
diff --git a/android/app/build.gradle b/android/app/build.gradle
index aad62156..e2f7fd4e 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -7,8 +7,8 @@ android {
         applicationId "com.moimob.drinkable"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 13602
-        versionName "1.36.2"
+        versionCode 13700
+        versionName "1.37.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
diff --git a/cypress/e2e/ingredients.cy.ts b/cypress/e2e/ingredients.cy.ts
index c7fb097a..ffcae8fa 100644
--- a/cypress/e2e/ingredients.cy.ts
+++ b/cypress/e2e/ingredients.cy.ts
@@ -3,6 +3,7 @@ describe('Ingredients', () => {
         window.localStorage.setItem('CapacitorStorage.messuarement-system', 'Metric');
         cy.visit('#/ingredients');
 
+        cy.dataCy('selected-bar-component').should('not.exist');
         cy.dataCy('ingredient-list').find('div').should('have.length', 0);
         cy.dataCy('add-ingredients-search').type('Vodka');
         cy.dataCy('tag-vodka').click();
@@ -49,6 +50,55 @@ describe('Ingredients', () => {
             .first()
             .should('contain', 'All ingredients selected');
     });
+
+    it('My inventory - Navigate to selected bar', () => {
+        window.localStorage.setItem('CapacitorStorage.messuarement-system', 'Metric');
+        window.localStorage.setItem(
+            'CapacitorStorage.ingredient-lists',
+            JSON.stringify([
+                { name: 'My Bar', ingredients: [] },
+                { name: 'Test', ingredients: [] }
+            ])
+        );
+
+        cy.visit('#/ingredients');
+
+        cy.dataCy('selected-bar-component').should('exist');
+        cy.dataCy('selected-bar-name').should('include.text', 'My Bar');
+
+        cy.get('header').should('contain.text', 'Ingredients');
+        cy.url().should('include', `ingredients`);
+
+        cy.dataCy('selected-bar-name').first().click();
+
+        cy.get('header').should('contain.text', 'Profile');
+        cy.url().should('include', `user`);
+    });
+
+    it('All ingredients - Navigate to selected bar', () => {
+        window.localStorage.setItem('CapacitorStorage.messuarement-system', 'Metric');
+        window.localStorage.setItem(
+            'CapacitorStorage.ingredient-lists',
+            JSON.stringify([
+                { name: 'My Bar', ingredients: [] },
+                { name: 'Test', ingredients: [] }
+            ])
+        );
+
+        cy.visit('#/ingredients');
+        navigateToAllIngredients();
+
+        cy.dataCy('selected-bar-component').should('exist');
+        cy.dataCy('selected-bar-name').should('include.text', 'My Bar');
+
+        cy.get('header').should('contain.text', 'Ingredients');
+        cy.url().should('include', `ingredients`);
+
+        cy.dataCy('selected-bar-name').last().click();
+
+        cy.get('header').should('contain.text', 'Profile');
+        cy.url().should('include', `user`);
+    });
 });
 
 function navigateToInventory() {
diff --git a/fastlane/metadata/android/en-US/changelogs/13700.txt b/fastlane/metadata/android/en-US/changelogs/13700.txt
new file mode 100644
index 00000000..8f6e91bb
--- /dev/null
+++ b/fastlane/metadata/android/en-US/changelogs/13700.txt
@@ -0,0 +1 @@
+• Added support for multiple lists of ingredients
\ No newline at end of file
diff --git a/src/components/dialogs/welcome-dialog.html b/src/components/dialogs/welcome-dialog.html
index 3125c18e..64140786 100644
--- a/src/components/dialogs/welcome-dialog.html
+++ b/src/components/dialogs/welcome-dialog.html
@@ -1,7 +1,7 @@
 <template>
     <ux-dialog class="small-dialog">
         <div>
-            <div class="bg-base-200 modal-box relative p-4">
+            <div class="bg-base-200 modal-box relative m-auto p-4">
                 <h4 class="text-lg p4" t="welcome"></h4>
                 <p t="select-messuarement-system"></p>
 
diff --git a/src/components/icons/icon-arrow-forward.html b/src/components/icons/icon-arrow-forward.html
new file mode 100644
index 00000000..8af6367e
--- /dev/null
+++ b/src/components/icons/icon-arrow-forward.html
@@ -0,0 +1,11 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor" viewBox="0 0 512 512">
+        <title>Arrow Forward</title>
+        <path
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="48"
+            d="M268 112l144 144-144 144M392 256H100" />
+    </svg>
+</template>
diff --git a/src/components/index.ts b/src/components/index.ts
index 9242abe3..b1abe962 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -29,6 +29,7 @@ export function configure(config: FrameworkConfiguration) {
         PLATFORM.moduleName('./icons/icon-refresh-outline.html'),
         PLATFORM.moduleName('./icons/icon-reader.html'),
         PLATFORM.moduleName('./tag-component.html'),
-        PLATFORM.moduleName('./add-ingredient-component/add-ingredient-component')
+        PLATFORM.moduleName('./add-ingredient-component/add-ingredient-component'),
+        PLATFORM.moduleName('./icons/icon-arrow-forward.html')
     ]);
 }
diff --git a/src/domain/entities/ingredient-list.ts b/src/domain/entities/ingredient-list.ts
new file mode 100644
index 00000000..1e0dc6ca
--- /dev/null
+++ b/src/domain/entities/ingredient-list.ts
@@ -0,0 +1,5 @@
+export type IngredientList = {
+    id: number;
+    name: string;
+    ingredients: string[];
+};
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 13243e6d..d944434f 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -122,7 +122,11 @@
         "tags-title": "My Tags",
         "tags-subtitle": "Manage your Cocktail Tags",
         "create-cocktail-tag": "Create Tag",
-        "edit-cocktail-tag": "Edit Tag"
+        "edit-cocktail-tag": "Edit Tag",
+        "selected-ingredient-list": "Selected Bar",
+        "ingredient-lists-title": "My Bars",
+        "create-ingredient-list": "Create Bar",
+        "edit-ingredient-list": "Edit Bar"
     },
     "alcohol-level": {
         "title": "Alcohol Level",
diff --git a/src/main.ts b/src/main.ts
index 45623a14..7049e0a6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,11 +11,6 @@ import { HotjarConfig } from 'aurelia-hotjar';
 import { getLanguages } from 'data/languages';
 
 export async function configure(aurelia: Aurelia): Promise<void> {
-    const localStorageService = aurelia.container.get(LocalStorageService);
-    await localStorageService.initialize();
-
-    const language = await getLanguage(localStorageService);
-
     aurelia.use
         .standardConfiguration()
         .developmentLogging(PRODUCTION ? 'none' : 'debug')
@@ -50,6 +45,11 @@ export async function configure(aurelia: Aurelia): Promise<void> {
             });
         });
 
+    const localStorageService = aurelia.container.get(LocalStorageService);
+    await localStorageService.initialize();
+
+    const language = await getLanguage(localStorageService);
+
     await aurelia.start();
     await aurelia.setRoot(PLATFORM.moduleName('app'));
 }
diff --git a/src/modules/ingredients/all-ingredients/all-ingredients.html b/src/modules/ingredients/all-ingredients/all-ingredients.html
index 2df6db48..909d0b2d 100644
--- a/src/modules/ingredients/all-ingredients/all-ingredients.html
+++ b/src/modules/ingredients/all-ingredients/all-ingredients.html
@@ -1,6 +1,8 @@
 <template>
+    <require from="./../selected-ingredients-list-component"></require>
     <div class="absolute h-full w-full overflow-y-scroll">
         <div class="selected-ingredients-wrapper">
+            <selected-ingredients-list-component></selected-ingredients-list-component>
             <div repeat.for="group of ingredients" style="position: relative">
                 <div class="ingredient-group-header bg-base-100">
                     <p>${group.letter.toUpperCase()}</p>
diff --git a/src/modules/ingredients/ingredients.html b/src/modules/ingredients/ingredients.html
index bf5d201b..c1e48690 100644
--- a/src/modules/ingredients/ingredients.html
+++ b/src/modules/ingredients/ingredients.html
@@ -2,7 +2,7 @@
     <require from="./all-ingredients/all-ingredients"></require>
     <require from="./search-ingredients/search-ingredients"></require>
 
-    <div class="bg-base-300">
+    <header class="bg-base-300">
         <h4 class="px-2 mb-1 pt-2" t="routes.ingredients"></h4>
         <div class="tabs overflow-x-scroll hide-scrollbar flex-nowrap">
             <a
@@ -13,7 +13,7 @@ <h4 class="px-2 mb-1 pt-2" t="routes.ingredients"></h4>
                 <span t.bind="navigation.translation"></span>
             </a>
         </div>
-    </div>
+    </header>
 
     <div class="${navbarHidden ? 'full-page-height-navbar-hidden' : 'full-page-height'}">
         <div ref="sliderElement" class="swipe">
diff --git a/src/modules/ingredients/search-ingredients/search-ingredients.html b/src/modules/ingredients/search-ingredients/search-ingredients.html
index a671ffa2..610810da 100644
--- a/src/modules/ingredients/search-ingredients/search-ingredients.html
+++ b/src/modules/ingredients/search-ingredients/search-ingredients.html
@@ -1,6 +1,9 @@
 <template>
+    <require from="./../selected-ingredients-list-component"></require>
     <div class="absolute h-full w-full overflow-y-scroll pb-20">
         <div class="selected-ingredients-wrapper" data-cy="ingredient-list">
+            <selected-ingredients-list-component></selected-ingredients-list-component>
+
             <div
                 repeat.for="ingredient of selectedIngredients"
                 class="au-animate animate-fade-in animate-fade-out ingredient-group-item">
diff --git a/src/modules/ingredients/search-ingredients/search-ingredients.ts b/src/modules/ingredients/search-ingredients/search-ingredients.ts
index 5fd89bf8..f65d5061 100644
--- a/src/modules/ingredients/search-ingredients/search-ingredients.ts
+++ b/src/modules/ingredients/search-ingredients/search-ingredients.ts
@@ -1,14 +1,13 @@
 import { EventAggregator } from 'aurelia-event-aggregator';
-import { inject } from 'aurelia-framework';
+import { autoinject } from 'aurelia-framework';
 import { Ingredient } from 'domain/entities/ingredient';
 import { IngredientService } from 'services/ingredient-service';
 import { LocalStorageService } from 'services/local-storage-service';
 
-@inject(EventAggregator, LocalStorageService, IngredientService)
+@autoinject
 export class SearchIngredients {
     public selectedIngredients: Ingredient[] = [];
     public ingredients: Ingredient[] = [];
-
     private _activeIngredientIds: string[] = [];
 
     constructor(
diff --git a/src/modules/ingredients/selected-ingredients-list-component.html b/src/modules/ingredients/selected-ingredients-list-component.html
new file mode 100644
index 00000000..7da82735
--- /dev/null
+++ b/src/modules/ingredients/selected-ingredients-list-component.html
@@ -0,0 +1,9 @@
+<template>
+    <div if.bind="showSelectedIngredientList" class="my-4 mx-2 flex" data-cy="selected-bar-component">
+        <p class="text-sm"><span t="user.selected-ingredient-list"></span><span>:</span></p>
+
+        <p click.delegate="navigateToUserPage()" class="ml-2 text-sm link link-info" data-cy="selected-bar-name">
+            ${ingredientListName}
+        </p>
+    </div>
+</template>
diff --git a/src/modules/ingredients/selected-ingredients-list-component.ts b/src/modules/ingredients/selected-ingredients-list-component.ts
new file mode 100644
index 00000000..f97cfda5
--- /dev/null
+++ b/src/modules/ingredients/selected-ingredients-list-component.ts
@@ -0,0 +1,20 @@
+import { autoinject } from 'aurelia-framework';
+import { Router } from 'aurelia-router';
+import { LocalStorageService } from 'services/local-storage-service';
+
+@autoinject
+export class SelectedIngredientsListComponent {
+    public ingredientListName: string;
+    public showSelectedIngredientList = false;
+
+    constructor(private _localStorageService: LocalStorageService, private _router: Router) {}
+
+    bind() {
+        this.ingredientListName = this._localStorageService.getIngredientList().name;
+        this.showSelectedIngredientList = this._localStorageService.getIngredientLists().length > 1;
+    }
+
+    navigateToUserPage() {
+        this._router.navigateToRoute('user');
+    }
+}
diff --git a/src/modules/user/ingredient-lists/ingredient-list-drawer.html b/src/modules/user/ingredient-lists/ingredient-list-drawer.html
new file mode 100644
index 00000000..94d6caaf
--- /dev/null
+++ b/src/modules/user/ingredient-lists/ingredient-list-drawer.html
@@ -0,0 +1,40 @@
+<template>
+    <ux-dialog class="au-animate cocktail-dialog" data-cy="user-ingredient-lists-drawer">
+        <div class="grid full-dynamic-height overflow-y-scroll">
+            <div class="min-h-8" click.trigger="cancel()"></div>
+            <div class="menu p-3 bg-base-100 text-base-content w-full relative overflow-y-scroll">
+                <label class="btn btn-sm btn-circle absolute right-2 top-2" click.trigger="cancel()">✕</label>
+                <h3
+                    class="text-lg font-bold"
+                    t="${isNew ? 'user.create-ingredient-list' : 'user.edit-ingredient-list'}"></h3>
+
+                <div class="form-control w-full" validation-errors.bind="nameErrors">
+                    <label class="label">
+                        <span class="label-text" t="name"></span>
+                    </label>
+                    <input
+                        type="text"
+                        value.bind="name & validate"
+                        class="input input-bordered w-full input-sm"
+                        class.bind="nameErrors.length ? 'input-error' : ''"
+                        data-cy="name-input" />
+                    <ul style="list-style-position: inside">
+                        <li repeat.for="errorInfo of nameErrors" class="text-xs">${errorInfo.error.message}</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="absolute bottom-4 flex w-full justify-between px-3 items-end">
+                <button
+                    if.bind="!isNew && canDelete"
+                    click.trigger="delete()"
+                    class="btn btn-square"
+                    data-cy="ingredient-list-delete">
+                    <icon-trash class="h-6 w-6"></icon-trash>
+                </button>
+                <div else></div>
+
+                <label class="btn btn-primary" click.trigger="ok()" t="save" data-cy="drawer-ok"></label>
+            </div>
+        </div>
+    </ux-dialog>
+</template>
diff --git a/src/modules/user/ingredient-lists/ingredient-list-drawer.ts b/src/modules/user/ingredient-lists/ingredient-list-drawer.ts
new file mode 100644
index 00000000..7ac5f502
--- /dev/null
+++ b/src/modules/user/ingredient-lists/ingredient-list-drawer.ts
@@ -0,0 +1,70 @@
+import { inject, NewInstance } from 'aurelia-framework';
+import { DialogController } from 'aurelia-dialog';
+import { ValidationController, ValidationRules } from 'aurelia-validation';
+import { LocalStorageService } from 'services/local-storage-service';
+import { IngredientList } from 'domain/entities/ingredient-list';
+
+@inject(DialogController, NewInstance.of(ValidationController), LocalStorageService)
+export class IngredientListDrawer {
+    public name: string;
+    public isNew: boolean = true;
+    public canDelete: boolean = false;
+
+    private ingredientList: IngredientList;
+
+    constructor(
+        private _dialogController: DialogController,
+        private _validationController: ValidationController,
+        private localStorageService: LocalStorageService
+    ) {
+        ValidationRules.ensure('name').required().withMessage('Name is required').on(this);
+    }
+
+    activate(ingredientList: IngredientList) {
+        if (ingredientList !== null) {
+            this.ingredientList = ingredientList;
+            this.name = ingredientList.name;
+            this.isNew = false;
+            if (this.ingredientList.id !== 0) {
+                this.canDelete = true;
+            }
+        }
+    }
+
+    cancel() {
+        this._dialogController.cancel();
+    }
+
+    async ok() {
+        const result = await this._validationController.validate();
+
+        if (!result.valid) {
+            return;
+        }
+
+        if (this.isNew === true) {
+            await this.localStorageService.createIngredientList(this.name);
+            this._dialogController.ok();
+            return;
+        }
+
+        const ingredientListToUpdate: IngredientList = {
+            id: this.ingredientList.id,
+            name: this.name,
+            ingredients: this.ingredientList.ingredients
+        };
+
+        await this.localStorageService.updateIngredientList(ingredientListToUpdate);
+
+        this._dialogController.ok();
+    }
+
+    async delete() {
+        if (this.isNew === true) {
+            return;
+        }
+
+        await this.localStorageService.deleteIngredientList(this.ingredientList.id);
+        this._dialogController.ok();
+    }
+}
diff --git a/src/modules/user/ingredient-lists/ingredient-lists.html b/src/modules/user/ingredient-lists/ingredient-lists.html
new file mode 100644
index 00000000..c458e347
--- /dev/null
+++ b/src/modules/user/ingredient-lists/ingredient-lists.html
@@ -0,0 +1,25 @@
+<template>
+    <div class="p-4 pt-0">
+        <div class="flex justify-end items-center mb-3">
+            <button
+                click.delegate="openDialog(null)"
+                class="btn btn-secondary"
+                t="add"
+                data-cy="add-ingredient-list"></button>
+        </div>
+        <div data-cy="created-ingredient-lists-container">
+            <div
+                repeat.for="item of ingredientLists"
+                click.delegate="openDialog(item)"
+                class="flex justify-between items-center p-4 border-b border-base-content border-opacity-20">
+                <div>
+                    <p>${item.name}</p>
+                    <p class="text-xs font-light">
+                        <span>${item.ingredients.length} </span> <span t="ingredients"></span>
+                    </p>
+                </div>
+                <icon-arrow-forward class="h-6 w-6"></icon-arrow-forward>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/modules/user/ingredient-lists/ingredient-lists.ts b/src/modules/user/ingredient-lists/ingredient-lists.ts
new file mode 100644
index 00000000..ecfe7564
--- /dev/null
+++ b/src/modules/user/ingredient-lists/ingredient-lists.ts
@@ -0,0 +1,30 @@
+import { DialogService } from 'aurelia-dialog';
+import { autoinject } from 'aurelia-framework';
+import { IngredientListDrawer } from './ingredient-list-drawer';
+import { LocalStorageService } from 'services/local-storage-service';
+import { IngredientList } from 'domain/entities/ingredient-list';
+
+@autoinject
+export class IngredientLists {
+    public ingredientLists: IngredientList[] = [];
+    public activeIngredientListId: number;
+
+    constructor(private _dialogService: DialogService, private localStorageService: LocalStorageService) {}
+
+    bind() {
+        this.ingredientLists = this.localStorageService.getIngredientLists();
+        this.activeIngredientListId = this.localStorageService.getActiveIngredientListId();
+    }
+
+    openDialog(ingredientList: IngredientList) {
+        this._dialogService
+            .open({ viewModel: IngredientListDrawer, model: ingredientList, lock: true })
+            .whenClosed(() => {
+                this.activeIngredientListId =
+                    this.localStorageService.getIngredientLists().find(x => x.id === this.activeIngredientListId)?.id ??
+                    0;
+                this.localStorageService.setActiveIngredientListId(this.activeIngredientListId);
+                this.bind();
+            });
+    }
+}
diff --git a/src/modules/user/ingredients/user-ingredients.html b/src/modules/user/ingredients/user-ingredients.html
index 0919baea..b127a07a 100644
--- a/src/modules/user/ingredients/user-ingredients.html
+++ b/src/modules/user/ingredients/user-ingredients.html
@@ -21,15 +21,7 @@
                         ${'used-in-cocktail' | t:item}
                     </p>
                 </div>
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" stroke="currentColor" viewBox="0 0 512 512">
-                    <title>Arrow Forward</title>
-                    <path
-                        fill="none"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="48"
-                        d="M268 112l144 144-144 144M392 256H100" />
-                </svg>
+                <icon-arrow-forward class="h-6 w-6"></icon-arrow-forward>
             </div>
         </div>
     </div>
diff --git a/src/modules/user/tags/user-tags.html b/src/modules/user/tags/user-tags.html
index 17cd1623..9a3114f4 100644
--- a/src/modules/user/tags/user-tags.html
+++ b/src/modules/user/tags/user-tags.html
@@ -17,15 +17,7 @@
                         ${'used-in-cocktail' | t:item}
                     </p>
                 </div>
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" stroke="currentColor" viewBox="0 0 512 512">
-                    <title>Arrow Forward</title>
-                    <path
-                        fill="none"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="48"
-                        d="M268 112l144 144-144 144M392 256H100" />
-                </svg>
+                <icon-arrow-forward class="h-6 w-6"></icon-arrow-forward>
             </div>
         </div>
     </div>
diff --git a/src/modules/user/user-page.html b/src/modules/user/user-page.html
index a9473601..fa6fff49 100644
--- a/src/modules/user/user-page.html
+++ b/src/modules/user/user-page.html
@@ -1,7 +1,24 @@
 <template>
     <div class="p-4 pb-20">
-        <p class="text-base font-bold py-4" t="user.created-data"></p>
+        <div class="flex py-4">
+            <p class="text-base font-bold" t="user.selected-ingredient-list"></p>
+            <div class="badge badge-md badge-secondary ml-2">
+                <p t="new"></p>
+            </div>
+        </div>
+
+        <div class="join w-full">
+            <select class="select select-bordered w-full join-item" value.bind="selectedIngredientListId">
+                <option repeat.for="list of ingredientLists" model.bind="list.id">${list.name}</option>
+            </select>
+            <button
+                click.delegate="navigateToRoute('ingredient-lists')"
+                class="btn btn-outline border border-base-content border-opacity-25 bg-base-200 join-item">
+                <span class="text-xs" t="manage"></span>
+            </button>
+        </div>
 
+        <p class="text-base font-bold py-4" t="user.created-data"></p>
         <ul class="menu bg-base-200 rounded-box mb-4">
             <li
                 repeat.for="item of listItems"
@@ -28,7 +45,6 @@
         </ul>
 
         <p class="text-base font-bold py-4" t="user.other"></p>
-
         <ul class="menu bg-base-200 rounded-box">
             <li
                 repeat.for="item of otherListItems"
diff --git a/src/modules/user/user-page.ts b/src/modules/user/user-page.ts
index 0af1f340..e59e2b2c 100644
--- a/src/modules/user/user-page.ts
+++ b/src/modules/user/user-page.ts
@@ -1,5 +1,7 @@
-import { autoinject } from 'aurelia-framework';
+import { autoinject, observable } from 'aurelia-framework';
 import { Router } from 'aurelia-router';
+import { IngredientList } from 'domain/entities/ingredient-list';
+import { LocalStorageService } from 'services/local-storage-service';
 
 @autoinject
 export class UserPage {
@@ -25,7 +27,6 @@ export class UserPage {
         {
             title: 'shopping-list.title',
             subtitle: 'shopping-list.subtitle',
-            newBadge: true,
             iconView: './../../components/icons/icon-reader.html',
             route: 'user-shopping-lists'
         }
@@ -46,7 +47,23 @@ export class UserPage {
         }
     ];
 
-    constructor(private _router: Router) {}
+    @observable public selectedIngredientListId: number;
+    public ingredientLists: IngredientList[];
+
+    constructor(private _router: Router, private _localStorageService: LocalStorageService) {}
+
+    activate() {
+        this.ingredientLists = this._localStorageService.getIngredientLists();
+        this.selectedIngredientListId = this._localStorageService.getActiveIngredientListId();
+    }
+
+    selectedIngredientListIdChanged(newValue: number, oldValue: number) {
+        if (oldValue === undefined) {
+            return;
+        }
+
+        this._localStorageService.setActiveIngredientListId(newValue);
+    }
 
     navigateToRoute(route: string) {
         this._router.navigateToRoute(route);
diff --git a/src/modules/user/user-router.ts b/src/modules/user/user-router.ts
index f88cec86..109063d3 100644
--- a/src/modules/user/user-router.ts
+++ b/src/modules/user/user-router.ts
@@ -54,6 +54,13 @@ export class UserRouter {
                 moduleId: PLATFORM.moduleName('modules/user/contact/contact'),
                 nav: false,
                 title: 'user.contact-title'
+            },
+            {
+                route: ['ingredient-lists'],
+                name: 'ingredient-lists',
+                moduleId: PLATFORM.moduleName('modules/user/ingredient-lists/ingredient-lists'),
+                nav: false,
+                title: 'user.ingredient-lists-title'
             }
         ]);
         this.router = router;
diff --git a/src/services/local-storage-service.ts b/src/services/local-storage-service.ts
index fd42d6a9..318f5426 100644
--- a/src/services/local-storage-service.ts
+++ b/src/services/local-storage-service.ts
@@ -7,9 +7,9 @@ import { SettingEntity } from 'domain/entities/setting-entity';
 import { CocktailInformation } from 'domain/entities/cocktail-information';
 import { TagModel } from 'domain/entities/cocktail-tag';
 import { ShoppingList } from 'modules/user/shopping-list/shopping-list-models';
+import { IngredientList } from 'domain/entities/ingredient-list';
 
 export class LocalStorageService {
-    private _savedIngredientIds: string[] = [];
     private _messuarementSystem: MessuarementSystem;
     private _widgetOrder: WidgetOrder[] = [];
     private _cocktails: Cocktail[] = [];
@@ -18,10 +18,20 @@ export class LocalStorageService {
     private _cocktailInformation: CocktailInformation[] = [];
     private _tags: TagModel[] = [];
     private _shoppingLists: ShoppingList[] = [];
+    private _ingredientLists: IngredientList[] = [];
+    private _activeIngredientListId: number = 0;
 
     public async initialize(): Promise<void> {
-        const savedIngredients = await this.getFromLocalStorage(StorageKey.SavedIngredients);
-        this._savedIngredientIds = savedIngredients !== null ? savedIngredients.map(String) : [];
+        await this.migrateSavedIngredients();
+
+        const ingredientLists = await this.getFromLocalStorage(StorageKey.IngredientLists);
+        this._ingredientLists = ingredientLists !== null ? ingredientLists : [];
+
+        if (this._ingredientLists.length === 0) {
+            await this.addDefaultIngredientList([]);
+        }
+
+        this._activeIngredientListId = this._ingredientLists[0].id;
 
         const messuarementSystem = await this.getFromLocalStorage(StorageKey.MessuarementSystem, false);
         this._messuarementSystem = messuarementSystem !== null ? messuarementSystem : MessuarementSystem.Imperial;
@@ -50,6 +60,31 @@ export class LocalStorageService {
         await this.migrateFavoriteCocktails();
     }
 
+    private async migrateSavedIngredients() {
+        const savedIngredientsStorageKey: StorageKey = StorageKey.SavedIngredients;
+
+        const keyExists = await this.keyExists(savedIngredientsStorageKey);
+
+        if (keyExists) {
+            const savedIngredientsResponse = await this.getFromLocalStorage(savedIngredientsStorageKey);
+            const savedIngredients: string[] =
+                savedIngredientsResponse !== null ? savedIngredientsResponse.map(String) : [];
+
+            await this.addDefaultIngredientList(savedIngredients);
+            await Preferences.remove({ key: savedIngredientsStorageKey });
+        }
+    }
+
+    private async addDefaultIngredientList(savedIngredients: string[]) {
+        const ingredientList: IngredientList = {
+            id: 0,
+            ingredients: savedIngredients,
+            name: 'My Bar'
+        };
+
+        await this.updateIngredientLists([ingredientList]);
+    }
+
     private async migrateFavoriteCocktails() {
         const keyExists = await this.keyExists(StorageKey.FavoriteCocktails);
 
@@ -90,9 +125,48 @@ export class LocalStorageService {
         this._ingredients = ingredients;
     }
 
-    public async updateSavedIngredients(ids: string[]) {
-        await this.updateKey(StorageKey.SavedIngredients, JSON.stringify(ids));
-        this._savedIngredientIds = ids;
+    public async updateIngredientList(ingredientList: IngredientList) {
+        const list = this._ingredientLists.find(x => x.id === ingredientList.id);
+        if (list !== undefined) {
+            list.ingredients = ingredientList.ingredients;
+            list.name = ingredientList.name;
+
+            await this.updateIngredientLists(this._ingredientLists);
+            return;
+        }
+        console.warn('Could not find ingredient list with id: ' + ingredientList.id);
+    }
+
+    public async deleteIngredientList(id: number) {
+        if (id === 0) {
+            return;
+        }
+
+        this._ingredientLists = this._ingredientLists.filter(x => x.id !== id);
+        await this.updateIngredientLists(this._ingredientLists);
+    }
+
+    public async createIngredientList(name: string) {
+        const list: IngredientList = {
+            ingredients: [],
+            name: name,
+            id: this._ingredientLists.map(x => x.id).sort((a, b) => a + b)[0] + 1
+        };
+
+        this._ingredientLists.push(list);
+
+        await this.updateIngredientLists(this._ingredientLists);
+    }
+
+    public async updateSavedIngredients(ingredients: string[]) {
+        const list = this._ingredientLists.find(x => x.id === this._activeIngredientListId);
+        if (list !== undefined) {
+            list.ingredients = ingredients;
+
+            await this.updateIngredientLists(this._ingredientLists);
+            return;
+        }
+        console.warn('Could not find ingredient list with id: ' + this._activeIngredientListId);
     }
 
     public async updateMessuarmentSystem(system: MessuarementSystem) {
@@ -133,8 +207,20 @@ export class LocalStorageService {
         return this._ingredients;
     }
 
+    public getIngredientLists() {
+        return this._ingredientLists;
+    }
+
+    public getActiveIngredientListId() {
+        return this._activeIngredientListId;
+    }
+
+    public getIngredientList() {
+        return this._ingredientLists.find(x => x.id === this._activeIngredientListId);
+    }
+
     public getIngredientIds() {
-        return this._savedIngredientIds;
+        return this._ingredientLists.find(x => x.id === this._activeIngredientListId)?.ingredients;
     }
 
     public getMessuarementSystem() {
@@ -161,6 +247,10 @@ export class LocalStorageService {
         return this._shoppingLists;
     }
 
+    public setActiveIngredientListId(id: number) {
+        this._activeIngredientListId = id;
+    }
+
     public async keyExists(key: string): Promise<boolean> {
         const { keys } = await Preferences.keys();
         if (keys.length > 0 && keys.includes(key)) {
@@ -170,6 +260,11 @@ export class LocalStorageService {
         return false;
     }
 
+    private async updateIngredientLists(lists: IngredientList[]) {
+        await this.updateKey(StorageKey.IngredientLists, JSON.stringify(lists));
+        this._ingredientLists = lists;
+    }
+
     private async updateKey(key: string, value: string) {
         await Preferences.remove({ key: key });
         await Preferences.set({
@@ -195,8 +290,14 @@ export class LocalStorageService {
 }
 
 export enum StorageKey {
+    /**
+     * @deprecated SavedIngredients have been replaced with IngredientLists
+     */
     SavedIngredients = 'saved-ingredients',
     MessuarementSystem = 'messuarement-system',
+    /**
+     * @deprecated FavoriteCocktails have been replaced with CocktailInformation
+     */
     FavoriteCocktails = 'favorite-cocktails',
     WidgetOrder = 'widget-order',
     Cocktails = 'cocktails',
@@ -204,5 +305,6 @@ export enum StorageKey {
     Settings = 'settings',
     CocktailInformation = 'cocktail-information',
     Tags = 'tags',
-    ShoppingLists = 'shopping-lists'
+    ShoppingLists = 'shopping-lists',
+    IngredientLists = 'ingredient-lists'
 }
diff --git a/tests/services/ingredient-service.test.ts b/tests/services/ingredient-service.test.ts
index cbdc3a02..99f15904 100644
--- a/tests/services/ingredient-service.test.ts
+++ b/tests/services/ingredient-service.test.ts
@@ -9,11 +9,12 @@ describe('IngredientService', () => {
     let sut: IngredientService;
 
     beforeEach(async () => {
+        const i18n = new I18N(null, null);
+        jest.spyOn(i18n, 'tr').mockReturnValue('name');
+
         localStorageService = new LocalStorageService();
         await localStorageService.initialize();
 
-        const i18n = new I18N(null, null);
-        jest.spyOn(i18n, 'tr').mockReturnValue('name');
         sut = new IngredientService(localStorageService, i18n);
     });
 
diff --git a/tests/services/local-storage-service.test.ts b/tests/services/local-storage-service.test.ts
index 6a58ea5d..38185166 100644
--- a/tests/services/local-storage-service.test.ts
+++ b/tests/services/local-storage-service.test.ts
@@ -1,6 +1,7 @@
 import { CocktailInformation } from 'domain/entities/cocktail-information';
 import { LocalStorageService, StorageKey } from 'services/local-storage-service';
 import { expect } from '@jest/globals';
+import { IngredientList } from 'domain/entities/ingredient-list';
 
 describe('LocalStorageService', () => {
     let sut: LocalStorageService;
@@ -103,4 +104,23 @@ describe('LocalStorageService', () => {
         expect(cocktailInformation[1].rating).toBeUndefined();
         expect(cocktailInformation[2].rating).toBeUndefined();
     });
+
+    test('Initialize - Migrate from Saved Ingredients', async () => {
+        const key = 'CapacitorStorage.saved-ingredients';
+
+        window.localStorage.setItem(key, JSON.stringify(['1', '2', '3']));
+
+        await sut.initialize();
+
+        const ingredientLists = JSON.parse(
+            window.localStorage.getItem('CapacitorStorage.ingredient-lists')
+        ) as IngredientList[];
+
+        expect(window.localStorage.getItem(key)).toBeNull();
+
+        expect(ingredientLists.length).toBe(1);
+        expect(ingredientLists[0].ingredients).toEqual(['1', '2', '3']);
+        expect(ingredientLists[0].id).toBe(0);
+        expect(ingredientLists[0].name).toBe('My Bar');
+    });
 });