Add notes to bookmarks (#472)

* Add basic bookmark notes * Add bookmark list JS to shared bookmarks page * Allow testing through ngrok * Improve CSS * Set notes through API * Improve notes editing * Improve notes icon * Remove transitions for now * Update keyboard shortcut * Add bookmark list tests * Add setting for showing notes permanently * Add test for toggling notes * Update API docs * Allow searching for notes content * Skip test
2024-11-24 20:33:04 +00:00 · 2023-05-20 11:54:26 +02:00 · 2023-05-20 11:54:26 +02:00 · 43115fd8f2
commit 43115fd8f2
parent 67ee896a46
31 changed files with 609 additions and 144 deletions
--- a/bookmarks/api/serializers.py
+++ b/bookmarks/api/serializers.py
@ -27,6 +27,7 @@ class BookmarkSerializer(serializers.ModelSerializer):
            'url',
            'title',
            'description',
+            'notes',
            'website_title',
            'website_description',
            'is_archived',
@ -47,6 +48,7 @@ class BookmarkSerializer(serializers.ModelSerializer):
    # Override optional char fields to provide default value
    title = serializers.CharField(required=False, allow_blank=True, default='')
    description = serializers.CharField(required=False, allow_blank=True, default='')
+    notes = serializers.CharField(required=False, allow_blank=True, default='')
    is_archived = serializers.BooleanField(required=False, default=False)
    unread = serializers.BooleanField(required=False, default=False)
    shared = serializers.BooleanField(required=False, default=False)
@ -58,6 +60,7 @@ class BookmarkSerializer(serializers.ModelSerializer):
        bookmark.url = validated_data['url']
        bookmark.title = validated_data['title']
        bookmark.description = validated_data['description']
+        bookmark.notes = validated_data['notes']
        bookmark.is_archived = validated_data['is_archived']
        bookmark.unread = validated_data['unread']
        bookmark.shared = validated_data['shared']
@ -66,7 +69,7 @@ class BookmarkSerializer(serializers.ModelSerializer):

    def update(self, instance: Bookmark, validated_data):
        # Update fields if they were provided in the payload
-        for key in ['url', 'title', 'description', 'unread', 'shared']:
+        for key in ['url', 'title', 'description', 'notes', 'unread', 'shared']:
            if key in validated_data:
                setattr(instance, key, validated_data[key])

--- a/bookmarks/e2e/test_bookmark_form.py
+++ b/bookmarks/e2e/test_bookmark_form.py
@ -1,5 +1,5 @@
 from django.urls import reverse
-from playwright.sync_api import sync_playwright
+from playwright.sync_api import sync_playwright, expect

 from bookmarks.e2e.helpers import LinkdingE2ETestCase

@ -8,6 +8,7 @@ class BookmarkFormE2ETestCase(LinkdingE2ETestCase):
    def test_create_should_check_for_existing_bookmark(self):
        existing_bookmark = self.setup_bookmark(title='Existing title',
                                                description='Existing description',
+                                                notes='Existing notes',
                                                tags=[self.setup_tag(name='tag1'), self.setup_tag(name='tag2')],
                                                website_title='Existing website title',
                                                website_description='Existing website description',
@ -26,6 +27,7 @@ class BookmarkFormE2ETestCase(LinkdingE2ETestCase):
            # Form should be pre-filled with data from existing bookmark
            self.assertEqual(existing_bookmark.title, page.get_by_label('Title').input_value())
            self.assertEqual(existing_bookmark.description, page.get_by_label('Description').input_value())
+            self.assertEqual(existing_bookmark.notes, page.get_by_label('Notes').input_value())
            self.assertEqual(existing_bookmark.website_title, page.get_by_label('Title').get_attribute('placeholder'))
            self.assertEqual(existing_bookmark.website_description,
                             page.get_by_label('Description').get_attribute('placeholder'))
@ -49,3 +51,17 @@ class BookmarkFormE2ETestCase(LinkdingE2ETestCase):

            page.wait_for_timeout(timeout=1000)
            page.get_by_text('This URL is already bookmarked.').wait_for(state='hidden')
+
+    def test_enter_url_of_existing_bookmark_should_show_notes(self):
+        bookmark = self.setup_bookmark(notes='Existing notes', description='Existing description')
+
+        with sync_playwright() as p:
+            browser = self.setup_browser(p)
+            page = browser.new_page()
+            page.goto(self.live_server_url + reverse('bookmarks:new'))
+
+            details = page.locator('details.notes')
+            expect(details).not_to_have_attribute('open', value='')
+
+            page.get_by_label('URL').fill(bookmark.url)
+            expect(details).to_have_attribute('open', value='')
--- a/bookmarks/e2e/test_bookmark_list.py
+++ b/bookmarks/e2e/test_bookmark_list.py
@ -0,0 +1,27 @@
+from unittest import skip
+
+from django.urls import reverse
+from playwright.sync_api import sync_playwright, expect
+
+from bookmarks.e2e.helpers import LinkdingE2ETestCase
+
+
+@skip("Fails in CI, needs investigation")
+class BookmarkListE2ETestCase(LinkdingE2ETestCase):
+    def test_toggle_notes_should_show_hide_notes(self):
+        self.setup_bookmark(notes='Test notes')
+
+        with sync_playwright() as p:
+            browser = self.setup_browser(p)
+            page = browser.new_page()
+            page.goto(self.live_server_url + reverse('bookmarks:index'))
+
+            notes = page.locator('li .notes')
+            expect(notes).to_be_hidden()
+
+            toggle_notes = page.locator('li button.toggle-notes')
+            toggle_notes.click()
+            expect(notes).to_be_visible()
+
+            toggle_notes.click()
+            expect(notes).to_be_hidden()
--- a/bookmarks/migrations/0022_bookmark_notes.py
+++ b/bookmarks/migrations/0022_bookmark_notes.py
@ -0,0 +1,18 @@
+# Generated by Django 4.1.7 on 2023-05-19 10:52
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0021_userprofile_display_url'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='bookmark',
+            name='notes',
+            field=models.TextField(blank=True),
+        ),
+    ]
--- a/bookmarks/migrations/0023_userprofile_permanent_notes.py
+++ b/bookmarks/migrations/0023_userprofile_permanent_notes.py
@ -0,0 +1,18 @@
+# Generated by Django 4.1.9 on 2023-05-20 08:00
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0022_bookmark_notes'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userprofile',
+            name='permanent_notes',
+            field=models.BooleanField(default=False),
+        ),
+    ]
--- a/bookmarks/models.py
+++ b/bookmarks/models.py
@ -50,6 +50,7 @@ class Bookmark(models.Model):
    url = models.CharField(max_length=2048, validators=[BookmarkURLValidator()])
    title = models.CharField(max_length=512, blank=True)
    description = models.TextField(blank=True)
+    notes = models.TextField(blank=True)
    website_title = models.CharField(max_length=512, blank=True, null=True)
    website_description = models.TextField(blank=True, null=True)
    web_archive_snapshot_url = models.CharField(max_length=2048, blank=True)
@ -110,6 +111,7 @@ class BookmarkForm(forms.ModelForm):
            'tag_string',
            'title',
            'description',
+            'notes',
            'website_title',
            'website_description',
            'unread',
@ -117,6 +119,10 @@ class BookmarkForm(forms.ModelForm):
            'auto_close',
        ]

+    @property
+    def has_notes(self):
+        return self.instance and self.instance.notes
+

 class BookmarkFilters:
    def __init__(self, request: WSGIRequest):
@ -172,13 +178,14 @@ class UserProfile(models.Model):
    enable_sharing = models.BooleanField(default=False, null=False)
    enable_favicons = models.BooleanField(default=False, null=False)
    display_url = models.BooleanField(default=False, null=False)
+    permanent_notes = models.BooleanField(default=False, null=False)


 class UserProfileForm(forms.ModelForm):
    class Meta:
        model = UserProfile
        fields = ['theme', 'bookmark_date_display', 'bookmark_link_target', 'web_archive_integration', 'tag_search',
-                  'enable_sharing', 'enable_favicons', 'display_url']
+                  'enable_sharing', 'enable_favicons', 'display_url', 'permanent_notes']


@receiver(post_save, sender=get_user_model())
--- a/bookmarks/queries.py
+++ b/bookmarks/queries.py
@ -37,6 +37,7 @@ def _base_bookmarks_query(user: Optional[User], profile: UserProfile, query_stri
    for term in query['search_terms']:
        conditions = Q(title__icontains=term) \
                     | Q(description__icontains=term) \
+                     | Q(notes__icontains=term) \
                     | Q(website_title__icontains=term) \
                     | Q(website_description__icontains=term) \
                     | Q(url__icontains=term)
--- a/bookmarks/services/bookmarks.py
+++ b/bookmarks/services/bookmarks.py
@ -122,6 +122,7 @@ def untag_bookmarks(bookmark_ids: [Union[int, str]], tag_string: str, current_us
 def _merge_bookmark_data(from_bookmark: Bookmark, to_bookmark: Bookmark):
    to_bookmark.title = from_bookmark.title
    to_bookmark.description = from_bookmark.description
+    to_bookmark.notes = from_bookmark.notes
    to_bookmark.unread = from_bookmark.unread
    to_bookmark.shared = from_bookmark.shared

--- a/bookmarks/static/bookmark_list.js
+++ b/bookmarks/static/bookmark_list.js
@ -1,5 +1,13 @@
 (function () {
+  function allowBulkEdit() {
+    return !!document.getElementById('bulk-edit-mode');
+  }
+
  function setupBulkEdit() {
+    if (!allowBulkEdit()) {
+      return;
+    }
+
    const bulkEditToggle = document.getElementById('bulk-edit-mode')
    const bulkEditBar = document.querySelector('.bulk-edit-bar')
    const singleToggles = document.querySelectorAll('.bulk-edit-toggle input')
@ -64,6 +72,10 @@
  }

  function setupBulkEditTagAutoComplete() {
+    if (!allowBulkEdit()) {
+      return;
+    }
+
    const wrapper = document.createElement('div');
    const tagInput = document.getElementById('bulk-edit-tags-input');
    const apiBaseUrl = document.documentElement.dataset.apiBaseUrl || '';
@ -121,7 +133,39 @@
    });
  }

+  function setupNotes() {
+    // Shortcut for toggling all notes
+    document.addEventListener('keydown', function(event) {
+      // Filter for shortcut key
+      if (event.key !== 'e') return;
+      // Skip if event occurred within an input element
+      const targetNodeName = event.target.nodeName;
+      const isInputTarget = targetNodeName === 'INPUT'
+        || targetNodeName === 'SELECT'
+        || targetNodeName === 'TEXTAREA';
+
+      if (isInputTarget) return;
+
+      const list = document.querySelector('.bookmark-list');
+      list.classList.toggle('show-notes');
+    });
+
+    // Toggle notes for single bookmark
+    const bookmarks = document.querySelectorAll('.bookmark-list li');
+    bookmarks.forEach(bookmark => {
+      const toggleButton = bookmark.querySelector('.toggle-notes');
+      if (toggleButton) {
+        toggleButton.addEventListener('click', event => {
+          event.preventDefault();
+          event.stopPropagation();
+          bookmark.classList.toggle('show-notes');
+        });
+      }
+    });
+  }
+
  setupBulkEdit();
  setupBulkEditTagAutoComplete();
  setupListNavigation();
+  setupNotes();
 })()
--- a/bookmarks/styles/base.scss
+++ b/bookmarks/styles/base.scss
@ -72,6 +72,12 @@ a:visited:hover {
  color: $link-color-dark;
 }

+code {
+  color: $gray-color-dark;
+  background-color: $code-bg-color;
+  box-shadow: 1px 1px 0 $code-shadow-color;
+}
+
 // Increase spacing between columns
 .container > .columns > .column:not(:first-child) {
  padding-left: 2rem;
--- a/bookmarks/styles/bookmarks.scss
+++ b/bookmarks/styles/bookmarks.scss
@ -43,11 +43,19 @@
  }
 }

+/* Bookmark list */
 ul.bookmark-list {
-
  list-style: none;
  margin: 0;
  padding: 0;
+}
+
+/* Bookmarks */
+ul.bookmark-list li {
+
+  .bulk-edit-toggle {
+    display: none;
+  }

  .title a {
    display: inline-block;
@ -76,31 +84,44 @@ ul.bookmark-list {
    }
  }

-  .actions > *:not(:last-child) {
-    margin-right: 0.1rem;
+  .actions {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
  }

-  .actions .date-label a {
-    color: $gray-color;
-  }
-
-  .actions .btn-link {
-    color: $gray-color;
-    padding: 0;
-    height: auto;
-    vertical-align: unset;
-    border: none;
-
-    &:focus,
-    &:hover,
-    &:active,
-    &.active {
-      color: $gray-color-dark;
+  .actions {
+    > *:not(:last-child) {
+      margin-right: 0.4rem;
    }
-  }

-  .bulk-edit-toggle {
-    display: none;
+    a, button {
+      color: $gray-color;
+      padding: 0;
+      height: auto;
+      vertical-align: unset;
+      border: none;
+      transition: none;
+      text-decoration: none;
+
+      &:focus,
+      &:hover,
+      &:active,
+      &.active {
+        color: $gray-color-dark;
+      }
+    }
+
+    .separator {
+      align-self: flex-start;
+    }
+
+    .toggle-notes {
+      align-self: center;
+      display: flex;
+      align-items: center;
+      gap: 0.1rem;
+    }
  }
 }

@ -180,6 +201,68 @@ ul.bookmark-list {
      font-weight: bold;
    }
  }
+
+  details.notes textarea {
+    box-sizing: border-box;
+  }
+}
+
+/* Bookmark notes */
+ul.bookmark-list {
+  .notes {
+    display: none;
+    max-height: 300px;
+    margin: 4px 0;
+    overflow: auto;
+  }
+
+  &.show-notes .notes,
+  li.show-notes .notes {
+    display: block;
+  }
+}
+
+/* Bookmark notes markdown styles */
+ul.bookmark-list .notes-content {
+  & {
+    padding: 0.4rem 0.6rem;
+  }
+
+  p, ul, ol, pre, blockquote {
+    margin: 0 0 0.4rem 0;
+  }
+
+  > *:first-child {
+    margin-top: 0;
+  }
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  ul, ol {
+    margin-left: 0.8rem;
+  }
+
+  ul li, ol li {
+    margin-top: 0.2rem;
+  }
+
+  pre {
+    padding: 0.2rem 0.4rem;
+    background-color: $code-bg-color;
+    border-radius: 0.2rem;
+  }
+
+  pre code {
+    background: none;
+    box-shadow: none;
+  }
+
+  > pre:first-child:last-child {
+    padding: 0;
+    background: none;
+    border-radius: 0;
+  }
 }

 /* Bookmark actions / bulk edit */
--- a/bookmarks/styles/variables-dark.scss
+++ b/bookmarks/styles/variables-dark.scss
@ -26,5 +26,8 @@ $secondary-link-color: rgba(168, 177, 255, 0.73);
 $alternative-color: #59bdb9;
 $alternative-color-dark: #73f1eb;

+$code-bg-color: rgba(255, 255, 255, 0.1);
+$code-shadow-color: rgba(255, 255, 255, 0.2);
+
 /* Dark theme specific */
 $dt-primary-button-color: #5761cb !default;
--- a/bookmarks/styles/variables-light.scss
+++ b/bookmarks/styles/variables-light.scss
@ -3,4 +3,7 @@ $html-font-size: 18px !default;
 $alternative-color: #05a6a3;
 $alternative-color-dark: darken($alternative-color, 5%);

-$secondary-link-color: rgba(87, 85, 217, 0.64);
+$secondary-link-color: rgba(87, 85, 217, 0.64);
+
+$code-bg-color: rgba(0, 0, 0, 0.05);
+$code-shadow-color: rgba(0, 0, 0, 0.15);
--- a/bookmarks/templates/bookmarks/bookmark_list.html
+++ b/bookmarks/templates/bookmarks/bookmark_list.html
@ -1,110 +1,128 @@
 {% load static %}
 {% load shared %}
 {% load pagination %}
-{% htmlmin %}
-  <ul class="bookmark-list">
-    {% for bookmark in bookmarks %}
-      <li data-is-bookmark-item>
-        <label class="form-checkbox bulk-edit-toggle">
-          <input type="checkbox" name="bookmark_id" value="{{ bookmark.id }}">
-          <i class="form-icon"></i>
-        </label>
-        <div class="title">
-          <a href="{{ bookmark.url }}" target="{{ link_target }}" rel="noopener"
-             class="{% if bookmark.unread %}text-italic{% endif %}">
-            {% if bookmark.favicon_file and request.user.profile.enable_favicons %}
-              <img src="{% static bookmark.favicon_file %}" alt="">
-            {% endif %}
-            {{ bookmark.resolved_title }}
-          </a>
-        </div>
-        {% if request.user.profile.display_url %}
+<ul class="bookmark-list{% if  request.user.profile.permanent_notes %} show-notes{% endif %}">
+  {% for bookmark in bookmarks %}
+    <li data-is-bookmark-item>
+      <label class="form-checkbox bulk-edit-toggle">
+        <input type="checkbox" name="bookmark_id" value="{{ bookmark.id }}">
+        <i class="form-icon"></i>
+      </label>
+      <div class="title">
+        <a href="{{ bookmark.url }}" target="{{ link_target }}" rel="noopener"
+           class="{% if bookmark.unread %}text-italic{% endif %}">
+          {% if bookmark.favicon_file and request.user.profile.enable_favicons %}
+            <img src="{% static bookmark.favicon_file %}" alt="">
+          {% endif %}
+          {{ bookmark.resolved_title }}
+        </a>
+      </div>
+      {% if request.user.profile.display_url %}
        <div class="url-path truncate">
-          <a href="{{ bookmark.url }}" target="{{ link_target }}" rel="noopener" 
-          class="url-display text-sm">
+          <a href="{{ bookmark.url }}" target="{{ link_target }}" rel="noopener"
+             class="url-display text-sm">
            {{ bookmark.url }}
          </a>
        </div>
-        {% endif %}
-        <div class="description truncate">
-          {% if bookmark.tag_names %}
-            <span>
+      {% endif %}
+      <div class="description truncate">
+        {% if bookmark.tag_names %}
+          <span>
              {% for tag_name in bookmark.tag_names %}
                <a href="?{% add_tag_to_query tag_name %}">{{ tag_name|hash_tag }}</a>
              {% endfor %}
            </span>
-          {% endif %}
-          {% if bookmark.tag_names and bookmark.resolved_description %} | {% endif %}
-          {% if bookmark.resolved_description %}
-            <span>{{ bookmark.resolved_description }}</span>
-          {% endif %}
+        {% endif %}
+        {% if bookmark.tag_names and bookmark.resolved_description %} | {% endif %}
+        {% if bookmark.resolved_description %}
+          <span>{{ bookmark.resolved_description }}</span>
+        {% endif %}
+      </div>
+      {% if bookmark.notes %}
+        <div class="notes bg-gray text-gray-dark">
+          <div class="notes-content">
+            {% markdown bookmark.notes %}
+          </div>
        </div>
-        <div class="actions">
-          {% if request.user.profile.bookmark_date_display == 'relative' %}
-            <span class="date-label text-gray text-sm">
+      {% endif %}
+      <div class="actions text-gray text-sm">
+        {% if request.user.profile.bookmark_date_display == 'relative' %}
+          <span>
              {% if bookmark.web_archive_snapshot_url %}
                <a href="{{ bookmark.web_archive_snapshot_url }}"
                   title="Show snapshot on the Internet Archive Wayback Machine" target="{{ link_target }}"
                   rel="noopener">
              {% endif %}
-              <span>{{ bookmark.date_added|humanize_relative_date }}</span>
-              {% if bookmark.web_archive_snapshot_url %}
-                <span>∞</span>
-                </a>
-              {% endif %}
-            </span>
-            <span class="text-gray text-sm">|</span>
-          {% endif %}
-          {% if request.user.profile.bookmark_date_display == 'absolute' %}
-            <span class="date-label text-gray text-sm">
-              {% if bookmark.web_archive_snapshot_url %}
-                <a href="{{ bookmark.web_archive_snapshot_url }}"
-                   title="Show snapshot on the Internet Archive Wayback Machine" target="{{ link_target }}"
-                   rel="noopener">
-              {% endif %}
-              <span>{{ bookmark.date_added|humanize_absolute_date }}</span>
-              {% if bookmark.web_archive_snapshot_url %}
-                <span>∞</span>
-                </a>
-              {% endif %}
-            </span>
-            <span class="text-gray text-sm">|</span>
-          {% endif %}
-          {% if bookmark.owner == request.user %}
-            {# Bookmark owner actions #}
-            <a href="{% url 'bookmarks:edit' bookmark.id %}?return_url={{ return_url }}"
-               class="btn btn-link btn-sm">Edit</a>
-            {% if bookmark.is_archived %}
-              <button type="submit" name="unarchive" value="{{ bookmark.id }}"
-                      class="btn btn-link btn-sm">Unarchive
-              </button>
-            {% else %}
-              <button type="submit" name="archive" value="{{ bookmark.id }}"
-                      class="btn btn-link btn-sm">Archive
-              </button>
+            <span>{{ bookmark.date_added|humanize_relative_date }}</span>
+            {% if bookmark.web_archive_snapshot_url %}
+              ∞
+              </a>
            {% endif %}
-            <button type="submit" name="remove" value="{{ bookmark.id }}"
-                    class="btn btn-link btn-sm btn-confirmation">Remove
+            </span>
+          <span class="separator">|</span>
+        {% endif %}
+        {% if request.user.profile.bookmark_date_display == 'absolute' %}
+          <span>
+              {% if bookmark.web_archive_snapshot_url %}
+                <a href="{{ bookmark.web_archive_snapshot_url }}"
+                   title="Show snapshot on the Internet Archive Wayback Machine" target="{{ link_target }}"
+                   rel="noopener">
+              {% endif %}
+            <span>{{ bookmark.date_added|humanize_absolute_date }}</span>
+            {% if bookmark.web_archive_snapshot_url %}
+              ∞
+              </a>
+            {% endif %}
+            </span>
+          <span class="separator">|</span>
+        {% endif %}
+        {% if bookmark.owner == request.user %}
+          {# Bookmark owner actions #}
+          <a href="{% url 'bookmarks:edit' bookmark.id %}?return_url={{ return_url }}">Edit</a>
+          {% if bookmark.is_archived %}
+            <button type="submit" name="unarchive" value="{{ bookmark.id }}"
+                    class="btn btn-link btn-sm">Unarchive
            </button>
-            {% if bookmark.unread %}
-              <span class="text-gray text-sm">|</span>
-              <button type="submit" name="mark_as_read" value="{{ bookmark.id }}"
-                      class="btn btn-link btn-sm">Mark as read
-              </button>
-            {% endif %}
          {% else %}
-            {# Shared bookmark actions #}
-            <span class="text-gray text-sm">Shared by
-              <a class="text-gray"
-                 href="?{% replace_query_param user=bookmark.owner.username %}">{{ bookmark.owner.username }}</a>
-            </span>
+            <button type="submit" name="archive" value="{{ bookmark.id }}"
+                    class="btn btn-link btn-sm">Archive
+            </button>
          {% endif %}
-        </div>
-      </li>
-    {% endfor %}
-  </ul>
+          <button type="submit" name="remove" value="{{ bookmark.id }}"
+                  class="btn btn-link btn-sm btn-confirmation">Remove
+          </button>
+          {% if bookmark.unread %}
+            <span class="separator">|</span>
+            <button type="submit" name="mark_as_read" value="{{ bookmark.id }}"
+                    class="btn btn-link btn-sm">Mark as read
+            </button>
+          {% endif %}
+        {% else %}
+          {# Shared bookmark actions #}
+          <span>Shared by
+              <a href="?{% replace_query_param user=bookmark.owner.username %}">{{ bookmark.owner.username }}</a>
+            </span>
+        {% endif %}
+        {% if bookmark.notes and not request.user.profile.permanent_notes %}
+          <span class="separator">|</span>
+          <button class="btn btn-link btn-sm toggle-notes" title="Toggle notes">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-notes" width="16" height="16"
+                 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                 stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M5 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path>
+              <path d="M9 7l6 0"></path>
+              <path d="M9 11l6 0"></path>
+              <path d="M9 15l4 0"></path>
+            </svg>
+            <span>Notes</span>
+          </button>
+        {% endif %}
+      </div>
+    </li>
+  {% endfor %}
+</ul>

-  <div class="bookmark-pagination">
-    {% pagination bookmarks %}
-  </div>
-{% endhtmlmin %}
+<div class="bookmark-pagination">
+  {% pagination bookmarks %}
+</div>
--- a/bookmarks/templates/bookmarks/form.html
+++ b/bookmarks/templates/bookmarks/form.html
@ -67,6 +67,19 @@
    </div>
    {{ form.description.errors }}
  </div>
+  <div class="form-group">
+    <details class="notes"{% if form.has_notes %} open{% endif %}>
+      <summary>
+        <span class="form-label d-inline-block">Notes</span>
+      </summary>
+      <label for="{{ form.notes.id_for_label }}" class="text-assistive">Notes</label>
+      {{ form.notes|add_class:"form-input"|attr:"rows:8" }}
+      <div class="form-input-hint">
+        Additional notes, supports Markdown.
+      </div>
+      {{ form.notes.errors }}
+    </details>
+  </div>
  <div class="form-group">
    <label for="{{ form.unread.id_for_label }}" class="form-checkbox">
      {{ form.unread }}
@ -128,6 +141,8 @@
      const urlInput = document.getElementById('{{ form.url.id_for_label }}');
      const titleInput = document.getElementById('{{ form.title.id_for_label }}');
      const descriptionInput = document.getElementById('{{ form.description.id_for_label }}');
+      const notesDetails = document.querySelector('form details.notes');
+      const notesInput = document.getElementById('{{ form.notes.id_for_label }}');
      const tagsInput = document.getElementById('{{ form.tag_string.id_for_label }}');
      const unreadCheckbox = document.getElementById('{{ form.unread.id_for_label }}');
      const sharedCheckbox = document.getElementById('{{ form.shared.id_for_label }}');
@ -149,11 +164,17 @@
      }

      function updateInput(input, value) {
-          input.value = value;
+        if (!input) {
+          return;
+        }
+        input.value = value;
      }

      function updateCheckbox(input, value) {
-          input.checked = value;
+        if (!input) {
+          return;
+        }
+        input.checked = value;
      }

      function checkUrl() {
@ -179,8 +200,10 @@

            if (existingBookmark && !editedBookmarkId) {
              bookmarkExistsHint.style['display'] = 'block';
+              notesDetails.open = !!existingBookmark.notes;
              updateInput(titleInput, existingBookmark.title);
              updateInput(descriptionInput, existingBookmark.description);
+              updateInput(notesInput, existingBookmark.notes);
              updateInput(tagsInput, existingBookmark.tag_names.join(" "));
              updateCheckbox(unreadCheckbox, existingBookmark.unread);
              updateCheckbox(sharedCheckbox, existingBookmark.shared);
@ -201,6 +224,9 @@
        });
      }

+      setupEditAutoValueButton(titleInput);
+      setupEditAutoValueButton(descriptionInput);
+
      // Fetch initial website data if we have a URL, and we are not editing an existing bookmark
      // For existing bookmarks we get the website metadata through hidden inputs
      if (urlInput.value && !editedBookmarkId) {
@ -213,9 +239,6 @@
        updatePlaceholder(titleInput, websiteTitleInput.value);
        updatePlaceholder(descriptionInput, websiteDescriptionInput.value);
      }
-
-      setupEditAutoValueButton(titleInput);
-      setupEditAutoValueButton(descriptionInput);
    })();
  </script>
 </div>
--- a/bookmarks/templates/bookmarks/shared.html
+++ b/bookmarks/templates/bookmarks/shared.html
@ -45,4 +45,5 @@

  <script src="{% static "bundle.js" %}"></script>
  <script src="{% static "shared.js" %}"></script>
+  <script src="{% static "bookmark_list.js" %}"></script>
 {% endblock %}
--- a/bookmarks/templates/settings/general.html
+++ b/bookmarks/templates/settings/general.html
@ -38,6 +38,16 @@
            When enabled, this setting displays the bookmark URL below the title.
          </div>
        </div>
+        <div class="form-group">
+          <label for="{{ form.permanent_notes.id_for_label }}" class="form-checkbox">
+            {{ form.permanent_notes }}
+            <i class="form-icon"></i> Show notes permanently
+          </label>
+          <div class="form-input-hint">
+            Whether to show bookmark notes permanently, without having to toggle them individually.
+            Alternatively the keyboard shortcut <code>e</code> can be used to temporarily show all notes.
+          </div>
+        </div>
        <div class="form-group">
          <label for="{{ form.bookmark_link_target.id_for_label }}" class="form-label">Open bookmarks in</label>
          {{ form.bookmark_link_target|add_class:"form-select col-2 col-sm-12" }}
--- a/bookmarks/templatetags/shared.py
+++ b/bookmarks/templatetags/shared.py
@ -1,6 +1,10 @@
 import re

+import bleach
+import markdown
+from bleach_allowlist import markdown_tags, markdown_attrs
 from django import template
+from django.utils.safestring import mark_safe

 from bookmarks import utils
 from bookmarks.models import UserProfile
@ -113,3 +117,19 @@ class HtmlMinNode(template.Node):
        output = re.sub(r'\s+', ' ', output)

        return output
+
+
+@register.simple_tag(name="markdown", takes_context=True)
+def render_markdown(context, markdown_text):
+    # naive approach to reusing the renderer for a single request
+    # works for bookmark list for now
+    if not ('markdown_renderer' in context):
+        renderer = markdown.Markdown(extensions=['fenced_code', 'nl2br'])
+        context['markdown_renderer'] = renderer
+    else:
+        renderer = context['markdown_renderer']
+
+    as_html = renderer.convert(markdown_text)
+    sanitized_html = bleach.clean(as_html, markdown_tags, markdown_attrs)
+
+    return mark_safe(sanitized_html)
--- a/bookmarks/tests/helpers.py
+++ b/bookmarks/tests/helpers.py
@ -30,6 +30,7 @@ class BookmarkFactoryMixin:
                       url: str = '',
                       title: str = '',
                       description: str = '',
+                       notes: str = '',
                       website_title: str = '',
                       website_description: str = '',
                       web_archive_snapshot_url: str = '',
@ -48,6 +49,7 @@ class BookmarkFactoryMixin:
            url=url,
            title=title,
            description=description,
+            notes=notes,
            website_title=website_title,
            website_description=website_description,
            date_added=timezone.now(),
--- a/bookmarks/tests/test_bookmark_edit_view.py
+++ b/bookmarks/tests/test_bookmark_edit_view.py
@ -20,6 +20,7 @@ class BookmarkEditViewTestCase(TestCase, BookmarkFactoryMixin):
            'tag_string': 'editedtag1 editedtag2',
            'title': 'edited title',
            'description': 'edited description',
+            'notes': 'edited notes',
            'unread': False,
            'shared': False,
        }
@ -37,6 +38,7 @@ class BookmarkEditViewTestCase(TestCase, BookmarkFactoryMixin):
        self.assertEqual(bookmark.url, form_data['url'])
        self.assertEqual(bookmark.title, form_data['title'])
        self.assertEqual(bookmark.description, form_data['description'])
+        self.assertEqual(bookmark.notes, form_data['notes'])
        self.assertEqual(bookmark.unread, form_data['unread'])
        self.assertEqual(bookmark.shared, form_data['shared'])
        self.assertEqual(bookmark.tags.count(), 2)
@ -74,7 +76,8 @@ class BookmarkEditViewTestCase(TestCase, BookmarkFactoryMixin):
        tag1 = self.setup_tag()
        tag2 = self.setup_tag()
        bookmark = self.setup_bookmark(tags=[tag1, tag2], title='edited title', description='edited description',
-                                       website_title='website title', website_description='website description')
+                                       notes='edited notes', website_title='website title',
+                                       website_description='website description')

        response = self.client.get(reverse('bookmarks:edit', args=[bookmark.id]))
        html = response.content.decode()
@ -101,6 +104,12 @@ class BookmarkEditViewTestCase(TestCase, BookmarkFactoryMixin):
            </textarea>
        ''', html)

+        self.assertInHTML(f'''
+            <textarea name="notes" cols="40" rows="8" class="form-input" id="id_notes">
+                {bookmark.notes}
+            </textarea>
+        ''', html)
+
        self.assertInHTML(f'''
            <input type="hidden" name="website_title"  id="id_website_title"
                    value="{bookmark.website_title}">
@ -184,3 +193,15 @@ class BookmarkEditViewTestCase(TestCase, BookmarkFactoryMixin):
              <span>Share</span>
            </label>            
        ''', html, count=1)
+
+    def test_should_hide_notes_if_there_are_no_notes(self):
+        bookmark = self.setup_bookmark()
+        response = self.client.get(reverse('bookmarks:edit', args=[bookmark.id]))
+
+        self.assertContains(response, '<details class="notes">', count=1)
+
+    def test_should_show_notes_if_there_are_notes(self):
+        bookmark = self.setup_bookmark(notes='test notes')
+        response = self.client.get(reverse('bookmarks:edit', args=[bookmark.id]))
+
+        self.assertContains(response, '<details class="notes" open>', count=1)
--- a/bookmarks/tests/test_bookmark_index_view.py
+++ b/bookmarks/tests/test_bookmark_index_view.py
@ -227,8 +227,7 @@ class BookmarkIndexViewTestCase(TestCase, BookmarkFactoryMixin, HtmlTestMixin):
        return_url = urllib.parse.quote_plus(url)

        self.assertInHTML(f'''
-            <a href="{edit_url}?return_url={return_url}"
-               class="btn btn-link btn-sm">Edit</a>        
+            <a href="{edit_url}?return_url={return_url}">Edit</a>        
        ''', html)

        # with query params
@ -239,6 +238,5 @@ class BookmarkIndexViewTestCase(TestCase, BookmarkFactoryMixin, HtmlTestMixin):
        return_url = urllib.parse.quote_plus(url)

        self.assertInHTML(f'''
-            <a href="{edit_url}?return_url={return_url}"
-               class="btn btn-link btn-sm">Edit</a>        
+            <a href="{edit_url}?return_url={return_url}">Edit</a>        
        ''', html)
--- a/bookmarks/tests/test_bookmark_new_view.py
+++ b/bookmarks/tests/test_bookmark_new_view.py
@ -19,6 +19,7 @@ class BookmarkNewViewTestCase(TestCase, BookmarkFactoryMixin):
            'tag_string': 'tag1 tag2',
            'title': 'test title',
            'description': 'test description',
+            'notes': 'test notes',
            'unread': False,
            'shared': False,
            'auto_close': '',
@ -37,6 +38,7 @@ class BookmarkNewViewTestCase(TestCase, BookmarkFactoryMixin):
        self.assertEqual(bookmark.url, form_data['url'])
        self.assertEqual(bookmark.title, form_data['title'])
        self.assertEqual(bookmark.description, form_data['description'])
+        self.assertEqual(bookmark.notes, form_data['notes'])
        self.assertEqual(bookmark.unread, form_data['unread'])
        self.assertEqual(bookmark.shared, form_data['shared'])
        self.assertEqual(bookmark.tags.count(), 2)
@ -138,3 +140,9 @@ class BookmarkNewViewTestCase(TestCase, BookmarkFactoryMixin):
              <span>Share</span>
            </label>            
        ''', html, count=1)
+
+    def test_should_hide_notes_if_there_are_no_notes(self):
+        bookmark = self.setup_bookmark()
+        response = self.client.get(reverse('bookmarks:edit', args=[bookmark.id]))
+
+        self.assertContains(response, '<details class="notes">', count=1)
--- a/bookmarks/tests/test_bookmarks_api.py
+++ b/bookmarks/tests/test_bookmarks_api.py
@ -20,7 +20,7 @@ class BookmarksApiTestCase(LinkdingApiTestCase, BookmarkFactoryMixin):
        self.client.credentials(HTTP_AUTHORIZATION='Token ' + self.api_token.key)
        self.tag1 = self.setup_tag()
        self.tag2 = self.setup_tag()
-        self.bookmark1 = self.setup_bookmark(tags=[self.tag1, self.tag2])
+        self.bookmark1 = self.setup_bookmark(tags=[self.tag1, self.tag2], notes='Test notes')
        self.bookmark2 = self.setup_bookmark()
        self.bookmark3 = self.setup_bookmark(tags=[self.tag2])
        self.archived_bookmark1 = self.setup_bookmark(is_archived=True, tags=[self.tag1, self.tag2])
@ -36,6 +36,7 @@ class BookmarksApiTestCase(LinkdingApiTestCase, BookmarkFactoryMixin):
            expectation['url'] = bookmark.url
            expectation['title'] = bookmark.title
            expectation['description'] = bookmark.description
+            expectation['notes'] = bookmark.notes
            expectation['website_title'] = bookmark.website_title
            expectation['website_description'] = bookmark.website_description
            expectation['is_archived'] = bookmark.is_archived
@ -134,6 +135,7 @@ class BookmarksApiTestCase(LinkdingApiTestCase, BookmarkFactoryMixin):
            'url': 'https://example.com/',
            'title': 'Test title',
            'description': 'Test description',
+            'notes': 'Test notes',
            'is_archived': False,
            'unread': False,
            'shared': False,
@ -144,6 +146,7 @@ class BookmarksApiTestCase(LinkdingApiTestCase, BookmarkFactoryMixin):
        self.assertEqual(bookmark.url, data['url'])
        self.assertEqual(bookmark.title, data['title'])
        self.assertEqual(bookmark.description, data['description'])
+        self.assertEqual(bookmark.notes, data['notes'])
        self.assertFalse(bookmark.is_archived, data['is_archived'])
        self.assertFalse(bookmark.unread, data['unread'])
        self.assertFalse(bookmark.shared, data['shared'])
@ -157,6 +160,7 @@ class BookmarksApiTestCase(LinkdingApiTestCase, BookmarkFactoryMixin):
            'url': original_bookmark.url,
            'title': 'Updated title',
            'description': 'Updated description',
+            'notes': 'Updated notes',
            'unread': True,
            'shared': True,
            'is_archived': True,
@ -168,6 +172,7 @@ class BookmarksApiTestCase(LinkdingApiTestCase, BookmarkFactoryMixin):
        self.assertEqual(bookmark.url, data['url'])
        self.assertEqual(bookmark.title, data['title'])
        self.assertEqual(bookmark.description, data['description'])
+        self.assertEqual(bookmark.notes, data['notes'])
        # Saving a duplicate bookmark should not modify archive flag - right?
        self.assertFalse(bookmark.is_archived)
        self.assertEqual(bookmark.unread, data['unread'])
@ -265,6 +270,7 @@ class BookmarksApiTestCase(LinkdingApiTestCase, BookmarkFactoryMixin):
        self.assertEqual(updated_bookmark.url, data['url'])
        self.assertEqual(updated_bookmark.title, '')
        self.assertEqual(updated_bookmark.description, '')
+        self.assertEqual(updated_bookmark.notes, '')
        self.assertEqual(updated_bookmark.tag_names, [])

    def test_update_bookmark_unread_flag(self):
@ -300,6 +306,12 @@ class BookmarksApiTestCase(LinkdingApiTestCase, BookmarkFactoryMixin):
        self.bookmark1.refresh_from_db()
        self.assertEqual(self.bookmark1.description, data['description'])

+        data = {'notes': 'Updated notes'}
+        url = reverse('bookmarks:bookmark-detail', args=[self.bookmark1.id])
+        self.patch(url, data, expected_status_code=status.HTTP_200_OK)
+        self.bookmark1.refresh_from_db()
+        self.assertEqual(self.bookmark1.notes, data['notes'])
+
        data = {'unread': True}
        url = reverse('bookmarks:bookmark-detail', args=[self.bookmark1.id])
        self.patch(url, data, expected_status_code=status.HTTP_200_OK)
--- a/bookmarks/tests/test_bookmarks_list_tag.py
+++ b/bookmarks/tests/test_bookmarks_list_tag.py
@ -24,22 +24,22 @@ class BookmarkListTagTest(TestCase, BookmarkFactoryMixin):

    def assertDateLabel(self, html: str, label_content: str):
        self.assertInHTML(f'''
-        <span class="date-label text-gray text-sm">
+        <span>
            <span>{label_content}</span>
        </span>
-        <span class="text-gray text-sm">|</span>
+        <span class="separator">|</span>
        ''', html)

    def assertWebArchiveLink(self, html: str, label_content: str, url: str, link_target: str = '_blank'):
        self.assertInHTML(f'''
-        <span class="date-label text-gray text-sm">
+        <span>
            <a href="{url}"
               title="Show snapshot on the Internet Archive Wayback Machine" target="{link_target}" rel="noopener">
                <span>{label_content}</span>
-                <span>∞</span>
+                ∞
            </a>
        </span>
-        <span class="text-gray text-sm">|</span>
+        <span class="separator">|</span>
        ''', html)

    def assertBookmarkActions(self, html: str, bookmark: Bookmark):
@ -52,8 +52,7 @@ class BookmarkListTagTest(TestCase, BookmarkFactoryMixin):
        # Edit link
        edit_url = reverse('bookmarks:edit', args=[bookmark.id])
        self.assertInHTML(f'''
-            <a href="{edit_url}?return_url=/test"
-               class="btn btn-link btn-sm">Edit</a>
+            <a href="{edit_url}?return_url=/test">Edit</a>
        ''', html, count=count)
        # Archive link
        self.assertInHTML(f'''
@ -74,8 +73,8 @@ class BookmarkListTagTest(TestCase, BookmarkFactoryMixin):

    def assertShareInfoCount(self, html: str, bookmark: Bookmark, count=1):
        self.assertInHTML(f'''
-            <span class="text-gray text-sm">Shared by 
-                <a class="text-gray" href="?user={bookmark.owner.username}">{bookmark.owner.username}</a>
+            <span>Shared by 
+                <a href="?user={bookmark.owner.username}">{bookmark.owner.username}</a>
            </span>
        ''', html, count=count)

@ -93,21 +92,43 @@ class BookmarkListTagTest(TestCase, BookmarkFactoryMixin):
    def assertBookmarkURLCount(self, html: str, bookmark: Bookmark, link_target: str = '_blank', count=0):
        self.assertInHTML(f'''
        <div class="url-path truncate">
-          <a href="{ bookmark.url }" target="{ link_target }" rel="noopener" 
+          <a href="{bookmark.url}" target="{link_target}" rel="noopener" 
          class="url-display text-sm">
-            { bookmark.url }
+            {bookmark.url}
          </a>
        </div>
        ''', html, count)

    def assertBookmarkURLVisible(self, html: str, bookmark: Bookmark):
        self.assertBookmarkURLCount(html, bookmark, count=1)
-        

    def assertBookmarkURLHidden(self, html: str, bookmark: Bookmark, link_target: str = '_blank'):
        self.assertBookmarkURLCount(html, bookmark, count=0)
-        

+    def assertNotes(self, html: str, notes_html: str, count=1):
+        self.assertInHTML(f'''
+        <div class="notes bg-gray text-gray-dark">
+          <div class="notes-content">
+            {notes_html}
+          </div>
+        </div>
+        ''', html, count=count)
+
+    def assertNotesToggle(self, html: str, count=1):
+        self.assertInHTML(f'''
+          <button class="btn btn-link btn-sm toggle-notes" title="Toggle notes">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-notes" width="16" height="16"
+                 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                 stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M5 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path>
+              <path d="M9 7l6 0"></path>
+              <path d="M9 11l6 0"></path>
+              <path d="M9 15l4 0"></path>
+            </svg>
+            <span>Notes</span>
+          </button>        
+          ''', html, count=count)

    def render_template(self, bookmarks: [Bookmark], template: Template, url: str = '/test') -> str:
        rf = RequestFactory()
@ -237,8 +258,8 @@ class BookmarkListTagTest(TestCase, BookmarkFactoryMixin):
        html = self.render_default_template([bookmark], url='/test?q=foo')

        self.assertInHTML(f'''
-            <span class="text-gray text-sm">Shared by 
-                <a class="text-gray" href="?q=foo&user={bookmark.owner.username}">{bookmark.owner.username}</a>
+            <span>Shared by 
+                <a href="?q=foo&user={bookmark.owner.username}">{bookmark.owner.username}</a>
            </span>
        ''', html)

@ -279,8 +300,8 @@ class BookmarkListTagTest(TestCase, BookmarkFactoryMixin):
        bookmark = self.setup_bookmark()
        html = self.render_default_template([bookmark])

-        self.assertBookmarkURLHidden(html,bookmark)
-    
+        self.assertBookmarkURLHidden(html, bookmark)
+
    def test_show_bookmark_url_when_enabled(self):
        profile = self.get_or_create_test_user().profile
        profile.display_url = True
@ -289,7 +310,7 @@ class BookmarkListTagTest(TestCase, BookmarkFactoryMixin):
        bookmark = self.setup_bookmark()
        html = self.render_default_template([bookmark])

-        self.assertBookmarkURLVisible(html,bookmark)
+        self.assertBookmarkURLVisible(html, bookmark)

    def test_hide_bookmark_url_when_disabled(self):
        profile = self.get_or_create_test_user().profile
@ -299,6 +320,85 @@ class BookmarkListTagTest(TestCase, BookmarkFactoryMixin):
        bookmark = self.setup_bookmark()
        html = self.render_default_template([bookmark])

-        self.assertBookmarkURLHidden(html,bookmark)
+        self.assertBookmarkURLHidden(html, bookmark)

+    def test_without_notes(self):
+        bookmark = self.setup_bookmark()
+        html = self.render_default_template([bookmark])

+        self.assertNotes(html, '', 0)
+        self.assertNotesToggle(html, 0)
+
+    def test_with_notes(self):
+        bookmark = self.setup_bookmark(notes='Test note')
+        html = self.render_default_template([bookmark])
+
+        note_html = '<p>Test note</p>'
+        self.assertNotes(html, note_html, 1)
+
+    def test_note_renders_markdown(self):
+        bookmark = self.setup_bookmark(notes='**Example:** `print("Hello world!")`')
+        html = self.render_default_template([bookmark])
+
+        note_html = '<p><strong>Example:</strong> <code>print("Hello world!")</code></p>'
+        self.assertNotes(html, note_html, 1)
+
+    def test_note_cleans_html(self):
+        bookmark = self.setup_bookmark(notes='<script>alert("test")</script>')
+        html = self.render_default_template([bookmark])
+
+        note_html = '&lt;script&gt;alert("test")&lt;/script&gt;'
+        self.assertNotes(html, note_html, 1)
+
+    def test_notes_are_hidden_initially_by_default(self):
+        html = self.render_default_template([])
+
+        self.assertInHTML("""
+        <ul class="bookmark-list"></ul>
+        """, html)
+
+    def test_notes_are_hidden_initially_with_permanent_notes_disabled(self):
+        profile = self.get_or_create_test_user().profile
+        profile.permanent_notes = False
+        profile.save()
+        html = self.render_default_template([])
+
+        self.assertInHTML("""
+        <ul class="bookmark-list"></ul>
+        """, html)
+
+    def test_notes_are_visible_initially_with_permanent_notes_enabled(self):
+        profile = self.get_or_create_test_user().profile
+        profile.permanent_notes = True
+        profile.save()
+        html = self.render_default_template([])
+
+        self.assertInHTML("""
+        <ul class="bookmark-list show-notes"></ul>
+        """, html)
+
+    def test_toggle_notes_is_visible_by_default(self):
+        bookmark = self.setup_bookmark(notes='Test note')
+        html = self.render_default_template([bookmark])
+
+        self.assertNotesToggle(html, 1)
+
+    def test_toggle_notes_is_visible_with_permanent_notes_disabled(self):
+        profile = self.get_or_create_test_user().profile
+        profile.permanent_notes = False
+        profile.save()
+
+        bookmark = self.setup_bookmark(notes='Test note')
+        html = self.render_default_template([bookmark])
+
+        self.assertNotesToggle(html, 1)
+
+    def test_toggle_notes_is_hidden_with_permanent_notes_enabled(self):
+        profile = self.get_or_create_test_user().profile
+        profile.permanent_notes = True
+        profile.save()
+
+        bookmark = self.setup_bookmark(notes='Test note')
+        html = self.render_default_template([bookmark])
+
+        self.assertNotesToggle(html, 0)
--- a/bookmarks/tests/test_bookmarks_service.py
+++ b/bookmarks/tests/test_bookmarks_service.py
@ -46,6 +46,7 @@ class BookmarkServiceTestCase(TestCase, BookmarkFactoryMixin):
        bookmark_data = Bookmark(url='https://example.com',
                                 title='Updated Title',
                                 description='Updated description',
+                                 notes='Updated notes',
                                 unread=True,
                                 shared=True,
                                 is_archived=True)
@ -55,6 +56,7 @@ class BookmarkServiceTestCase(TestCase, BookmarkFactoryMixin):
        self.assertEqual(updated_bookmark.id, original_bookmark.id)
        self.assertEqual(updated_bookmark.title, bookmark_data.title)
        self.assertEqual(updated_bookmark.description, bookmark_data.description)
+        self.assertEqual(updated_bookmark.notes, bookmark_data.notes)
        self.assertEqual(updated_bookmark.unread, bookmark_data.unread)
        self.assertEqual(updated_bookmark.shared, bookmark_data.shared)
        # Saving a duplicate bookmark should not modify archive flag - right?
--- a/bookmarks/tests/test_queries.py
+++ b/bookmarks/tests/test_queries.py
@ -32,6 +32,8 @@ class QueriesTestCase(TestCase, BookmarkFactoryMixin):
            self.setup_bookmark(title=random_sentence(including_word='TERM1')),
            self.setup_bookmark(description=random_sentence(including_word='term1')),
            self.setup_bookmark(description=random_sentence(including_word='TERM1')),
+            self.setup_bookmark(notes=random_sentence(including_word='term1')),
+            self.setup_bookmark(notes=random_sentence(including_word='TERM1')),
            self.setup_bookmark(website_title=random_sentence(including_word='term1')),
            self.setup_bookmark(website_title=random_sentence(including_word='TERM1')),
            self.setup_bookmark(website_description=random_sentence(including_word='term1')),
@ -92,6 +94,8 @@ class QueriesTestCase(TestCase, BookmarkFactoryMixin):
            self.setup_bookmark(title=random_sentence(including_word='TERM1'), tags=[self.setup_tag()]),
            self.setup_bookmark(description=random_sentence(including_word='term1'), tags=[self.setup_tag()]),
            self.setup_bookmark(description=random_sentence(including_word='TERM1'), tags=[self.setup_tag()]),
+            self.setup_bookmark(notes=random_sentence(including_word='term1'), tags=[self.setup_tag()]),
+            self.setup_bookmark(notes=random_sentence(including_word='TERM1'), tags=[self.setup_tag()]),
            self.setup_bookmark(website_title=random_sentence(including_word='term1'), tags=[self.setup_tag()]),
            self.setup_bookmark(website_title=random_sentence(including_word='TERM1'), tags=[self.setup_tag()]),
            self.setup_bookmark(website_description=random_sentence(including_word='term1'), tags=[self.setup_tag()]),
--- a/bookmarks/tests/test_settings_general_view.py
+++ b/bookmarks/tests/test_settings_general_view.py
@ -30,6 +30,7 @@ class SettingsGeneralViewTestCase(TestCase, BookmarkFactoryMixin):
            'enable_favicons': False,
            'tag_search': UserProfile.TAG_SEARCH_STRICT,
            'display_url': False,
+            'permanent_notes': False,
        }

        return {**form_data, **overrides}
@ -56,6 +57,7 @@ class SettingsGeneralViewTestCase(TestCase, BookmarkFactoryMixin):
            'enable_favicons': True,
            'tag_search': UserProfile.TAG_SEARCH_LAX,
            'display_url': True,
+            'permanent_notes': True,
        }
        response = self.client.post(reverse('bookmarks:settings.general'), form_data)
        html = response.content.decode()
@ -71,6 +73,7 @@ class SettingsGeneralViewTestCase(TestCase, BookmarkFactoryMixin):
        self.assertEqual(self.user.profile.enable_favicons, form_data['enable_favicons'])
        self.assertEqual(self.user.profile.tag_search, form_data['tag_search'])
        self.assertEqual(self.user.profile.display_url, form_data['display_url'])
+        self.assertEqual(self.user.profile.permanent_notes, form_data['permanent_notes'])
        self.assertInHTML('''
                <p class="form-input-hint">Profile updated</p>
            ''', html)
--- a/docs/API.md
+++ b/docs/API.md
@ -45,6 +45,7 @@ Example response:
      "url": "https://example.com",
      "title": "Example title",
      "description": "Example description",
+      "notes": "Example notes",
      "website_title": "Website title",
      "website_description": "Website description",
      "is_archived": false,
@ -96,6 +97,7 @@ Example payload:
  "url": "https://example.com",
  "title": "Example title",
  "description": "Example description",
+  "notes": "Example notes",
  "is_archived": false,
  "unread": false,
  "shared": false,
--- a/requirements.prod.txt
+++ b/requirements.prod.txt
@ -1,5 +1,7 @@
 asgiref==3.5.2
 beautifulsoup4==4.11.1
+bleach==6.0.0
+bleach-allowlist==1.0.3
 certifi==2022.12.7
 charset-normalizer==2.1.1
 click==8.1.3
@ -12,6 +14,7 @@ django-widget-tweaks==1.4.12
 django4-background-tasks==1.2.7
 djangorestframework==3.13.1
 idna==3.3
+Markdown==3.4.3
 psycopg2==2.9.5
 python-dateutil==2.8.2
 pytz==2022.2.1
@ -23,3 +26,4 @@ typing-extensions==3.10.0.0
 urllib3==1.26.11
 uWSGI==2.0.20
 waybackpy==3.0.6
+webencodings==0.5.1
--- a/requirements.txt
+++ b/requirements.txt
@ -1,5 +1,7 @@
 asgiref==3.5.2
 beautifulsoup4==4.11.1
+bleach==6.0.0
+bleach-allowlist==1.0.3
 certifi==2022.12.7
 charset-normalizer==2.1.1
 click==8.1.3
@ -18,6 +20,7 @@ djangorestframework==3.13.1
 greenlet==2.0.1
 idna==3.3
 libsass==0.21.0
+Markdown==3.4.3
 playwright==1.29.1
 psycopg2-binary==2.9.5
 pyee==9.0.4
@ -32,3 +35,4 @@ sqlparse==0.4.4
 typing-extensions==3.10.0.0
 urllib3==1.26.11
 waybackpy==3.0.6
+webencodings==0.5.1
--- a/siteroot/settings/dev.py
+++ b/siteroot/settings/dev.py
@ -19,6 +19,9 @@ INTERNAL_IPS = [
    '127.0.0.1',
 ]

+# Allow access through ngrok
+CSRF_TRUSTED_ORIGINS = ['https://*.ngrok-free.app']
+
 # Enable debug logging
 LOGGING = {
    'version': 1,