Fix: filter not preferring full matches in back +

The fuzzy filter wasn't scoring full matches high enough, when they weren't at the beginning of the name. Given the filter 'ger', results have been: - (Ger)hard Burg - (Ge)of(r)ey - Armin (Ger)lach with this fix the are: - (Ger)hard Burg - Armin (Ger)lach - (Ge)of(r)ey
2025-12-13 07:46:06 +00:00 · 2020-03-30 23:13:57 +02:00 · 2020-03-30 23:13:57 +02:00 · b05cc303b4
commit b05cc303b4
parent a6484e3d0c
4 changed files with 593 additions and 8 deletions
--- a/webapp/components/features/FollowList/FollowList.story.js
+++ b/webapp/components/features/FollowList/FollowList.story.js
@ -5,6 +5,8 @@ import { action } from '@storybook/addon-actions'
 import helpers from '~/storybook/helpers'
 import FollowList from './FollowList.vue'

+import fuzzyFilterUser from './FollowList.story.json'
+
 helpers.init()

 const user = {
@ -30,6 +32,12 @@ const noConnectionsUser = {
  followingCount: 0,
 }

+const wrapTemplates = (templates) => `
+<div style="display: flex; flex-wrap: wrap;">
+${templates.map((template) => `<div style="margin: 8px;">${template}</div>`).join('')}
+</div>
+`
+
 storiesOf('FollowList', module)
  .addDecorator(withA11y)
  .addDecorator(helpers.layout)
@ -40,7 +48,10 @@ storiesOf('FollowList', module)
      data() {
        return { user: noConnectionsUser }
      },
-      template: `<div><follow-list :user="user" /><div style="margin: 1rem"></div><follow-list :user="user" type="followedBy" /></div>`,
+      template: wrapTemplates([
+        '<follow-list :user="user" />',
+        '<follow-list :user="user" type="followedBy" />',
+      ]),
    }
  })
  .add('with up to 7 connections', () => {
@ -56,7 +67,10 @@ storiesOf('FollowList', module)
          action('fetchAllConnections')(type, this.user)
        },
      },
-      template: `<div style="display: flex; flex-wrap: wrap;"><div style="margin: 8px;"><follow-list :user="user" @fetchAllConnections="fetchAllConnections"/></div><div style="margin: 8px;"><follow-list :user="user" type="followedBy" @fetchAllConnections="fetchAllConnections"/></div></div>`,
+      template: wrapTemplates([
+        '<follow-list :user="user" @fetchAllConnections="fetchAllConnections"/>',
+        '<follow-list :user="user" type="followedBy" @fetchAllConnections="fetchAllConnections"/>',
+      ]),
    }
  })

@ -67,6 +81,43 @@ storiesOf('FollowList', module)
      data() {
        return { user: allConnectionsUser }
      },
-      template: `<div style="display: flex; flex-wrap: wrap;"><div style="margin: 8px;"><follow-list :user="user" /></div><div style="margin: 8px;"><follow-list :user="user" type="followedBy"/></div></div>`,
+      template: wrapTemplates([
+        '<follow-list :user="user" />',
+        '<follow-list :user="user" type="followedBy"/>',
+      ]),
+    }
+  })
+  .add('with a lot of connections', () => {
+    return {
+      components: { FollowList },
+      store: helpers.store,
+      data() {
+        return {
+          user: {
+            ...user,
+            followedByCount: 1000,
+            followingCount: 1000,
+            followedBy: helpers.fakeUser(1000),
+            following: helpers.fakeUser(1000),
+          },
+        }
+      },
+      template: wrapTemplates([
+        '<follow-list :user="user" />',
+        '<follow-list :user="user" type="followedBy"/>',
+      ]),
+    }
+  })
+  .add('Fuzzy Filter', () => {
+    return {
+      components: { FollowList },
+      store: helpers.store,
+      data() {
+        return { user: fuzzyFilterUser }
+      },
+      template: wrapTemplates([
+        '<follow-list :user="user" />',
+        '<follow-list :user="user" type="followedBy">',
+      ]),
    }
  })
--- a/webapp/components/features/FollowList/FollowList.story.json
+++ b/webapp/components/features/FollowList/FollowList.story.json
@ -0,0 +1,519 @@
+{
+  "id": "u3",
+  "slug": "jenny-rostock",
+  "name": "Jenny Rostock",
+  "avatar": {
+    "url": "https://s3.amazonaws.com/uifaces/faces/twitter/nessoila/128.jpg?random=16aba55f-48c6-4ef5-966a-af0e31693e6a"
+  },
+  "followedByCount": 32,
+  "followingCount": 31,
+  "following": [
+    {
+      "id": "8c0b0191-454a-4806-b0c3-1ed1d9dc5416",
+      "slug": "wanda-stanton-sr",
+      "name": "Wanda Stanton Sr.",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/nicolasfolliot/128.jpg?random=be2e59fb-f038-44d5-9e21-28fb123e8c7c"
+      }
+    },
+    {
+      "id": "6f4fdb51-fe93-4373-bf44-c36ea17f6535",
+      "slug": "walter-ohara",
+      "name": "Walter O'Hara",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/mutlu82/128.jpg?random=0866e1b7-8285-4eaf-a4c8-8509bd99f172"
+      }
+    },
+    {
+      "id": "20f5080b-1fc2-4c70-94c7-badbe2aa2370",
+      "slug": "hannah-bradtke",
+      "name": "Hannah Bradtke",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/Skyhartman/128.jpg?random=c02415a6-1e7e-488a-acb6-47587399ff07"
+      }
+    },
+    {
+      "id": "c5d2c492-5b8c-41a5-a9a2-26f8c866a885",
+      "slug": "georgia-koss-dvm",
+      "name": "Georgia Koss DVM",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/lvovenok/128.jpg?random=8e1e75b9-5dad-4fc8-9c52-38b89a3e0484"
+      }
+    },
+    {
+      "id": "f4c10451-f367-4afb-97fe-e48f60236655",
+      "slug": "genevieve-aufderhar-v",
+      "name": "Genevieve Aufderhar V",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/dss49/128.jpg?random=fc59a664-d2b4-4677-81e9-26ed5d4bc37e"
+      }
+    },
+    {
+      "id": "df65a474-b661-4fd8-b49f-2d609bfc4089",
+      "slug": "wanda-gerlach",
+      "name": "Wanda Gerlach",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/lewisainslie/128.jpg?random=5f0976d5-7871-4606-a416-6b67b0e67c15"
+      }
+    },
+    {
+      "id": "5f2b3c14-07fc-4dfa-978e-9bf21d8586d0",
+      "slug": "roland-kohler",
+      "name": "Roland Kohler",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/bcrad/128.jpg?random=4f77c5b2-0214-4342-a18e-424787f04896"
+      }
+    },
+    {
+      "id": "a2c49c22-940a-4598-8285-b8ebb34bd045",
+      "slug": "krista-hammes-dvm",
+      "name": "Krista Hammes DVM",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/sterlingrules/128.jpg?random=28167137-eee4-42e6-98a3-ec9a7d4b9509"
+      }
+    },
+    {
+      "id": "da70bae8-daf2-4481-b2db-506d00b73210",
+      "slug": "miss-lester-kovacek",
+      "name": "Miss Lester Kovacek",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/stefvdham/128.jpg?random=7de26019-8114-4caa-9aea-2172ae3c537c"
+      }
+    },
+    {
+      "id": "868952d8-c5df-4415-a0bb-930acd26749c",
+      "slug": "teri-stamm-iii",
+      "name": "Teri Stamm III",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/salimianoff/128.jpg?random=d2305511-39b2-4207-bee6-90799557546e"
+      }
+    },
+    {
+      "id": "7a569786-fbb1-4e27-8f2c-38d2a0963b9d",
+      "slug": "gerardo-batz",
+      "name": "Gerardo Batz",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/colirpixoil/128.jpg?random=8536b980-103e-4e5e-8141-31142e3c6330"
+      }
+    },
+    {
+      "id": "dca673f2-89b8-46cc-a836-2515f319c02f",
+      "slug": "carlton-botsford",
+      "name": "Carlton Botsford",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/cocolero/128.jpg?random=3ef57800-7694-4ec4-a9eb-39abca8d59e4"
+      }
+    },
+    {
+      "id": "58ba4ab0-990e-4f44-a7a8-42d10962f8b7",
+      "slug": "edward-boehm",
+      "name": "Edward Boehm",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/d_nny_m_cher/128.jpg?random=cf3ba671-4564-4dc1-bf94-a5fc3ea4fafa"
+      }
+    },
+    {
+      "id": "u4",
+      "slug": "huey",
+      "name": "Huey",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/hellofeverrrr/128.jpg?random=46fef3a9-44a0-4784-9854-03be6b3f37e1"
+      }
+    },
+    {
+      "id": "40cf7e21-a4dc-4055-a49d-3137c53dd815",
+      "slug": "ms-laurie-bergnaum",
+      "name": "Ms. Laurie Bergnaum",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/kohette/128.jpg?random=45516cde-9073-4ceb-8b42-2bdf66a26c67"
+      }
+    },
+    {
+      "id": "4c377f54-72c3-4e13-9532-6d0f2278a794",
+      "slug": "jeffery-waelchi",
+      "name": "Jeffery Waelchi",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/andresenfredrik/128.jpg?random=b643d8ba-5e49-4854-b2a6-2ff609ffcba0"
+      }
+    },
+    {
+      "id": "d861e775-2344-40d5-b6e4-8479e7dbe97f",
+      "slug": "marvin-gutkowski-iii",
+      "name": "Marvin Gutkowski III",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/kiwiupover/128.jpg?random=d38c1508-0342-46e0-9ef9-e0fd14b33072"
+      }
+    },
+    {
+      "id": "3102346c-ea94-41d3-8474-5241e5e473a6",
+      "slug": "edmund-rolfson-jr",
+      "name": "Edmund Rolfson Jr.",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/nerrsoft/128.jpg?random=d6f0804c-f38f-4c8b-821d-27a02373c74e"
+      }
+    },
+    {
+      "id": "0290fd5e-7ce8-4d70-8c29-f5ed96bfaa1f",
+      "slug": "bert-oconner",
+      "name": "Bert O'Conner",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/mangosango/128.jpg?random=03807c6c-c2f6-4ed3-8433-7a1823079eb0"
+      }
+    },
+    {
+      "id": "9fe670ff-1968-4b15-ab80-7adee8173dd8",
+      "slug": "angela-schiller",
+      "name": "Angela Schiller",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/dudestein/128.jpg?random=0b511fa4-8603-419a-acf0-2a89bc41a71b"
+      }
+    },
+    {
+      "id": "63798c79-2476-4eb8-a09c-167420bd05d7",
+      "slug": "peggy-carter",
+      "name": "Peggy Carter",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/uxpiper/128.jpg?random=c4dc0de5-99d7-410d-8088-6a2be8358fe9"
+      }
+    },
+    {
+      "id": "4d3fbb67-7ddc-4aa9-96d0-57bb20f95f59",
+      "slug": "krystal-braun",
+      "name": "Krystal Braun",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/salvafc/128.jpg?random=1dbd4549-a525-4fa3-be41-15db84ceb41a"
+      }
+    },
+    {
+      "id": "bcd5f271-bca5-492e-a6b6-7fd490ac37aa",
+      "slug": "janet-bruen",
+      "name": "Janet Bruen",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/yigitpinarbasi/128.jpg?random=3c7ab2c0-8e53-4edb-8c74-fd8cdfae5f8e"
+      }
+    },
+    {
+      "id": "38ccbf58-305a-4400-a1e4-785661604d5f",
+      "slug": "ebony-corwin",
+      "name": "Ebony Corwin",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/thibaut_re/128.jpg?random=f2137643-6f58-45b8-8266-d1fb893d0528"
+      }
+    },
+    {
+      "id": "5137e045-aef0-4ce1-8327-b516a72fffd6",
+      "slug": "terrell-gorczany",
+      "name": "Terrell Gorczany",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/jimmuirhead/128.jpg?random=5e61976f-529e-47f2-b4f0-b5e4550942ea"
+      }
+    },
+    {
+      "id": "b224eb01-5a71-4126-b811-51b7b35afd51",
+      "slug": "dr-jamie-romaguera",
+      "name": "Dr. Jamie Romaguera",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/leonfedotov/128.jpg?random=9179538d-58be-4707-8ad6-485f703bea26"
+      }
+    },
+    {
+      "id": "fdbb3e7f-f211-4685-831e-9d7e394b95a1",
+      "slug": "shannon-schuster",
+      "name": "Shannon Schuster",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/markretzloff/128.jpg?random=f8a223ff-d49f-499f-a161-350e8078c353"
+      }
+    },
+    {
+      "id": "d7ee00ea-5d22-4a1c-8670-7e4d4bd4ebfa",
+      "slug": "guadalupe-kessler",
+      "name": "Guadalupe Kessler",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/linux29/128.jpg?random=a87d13e1-ff0e-4a39-a018-e89a04d72572"
+      }
+    },
+    {
+      "id": "49b868e3-dba5-48ed-8b6c-e686c70dfcfb",
+      "slug": "lonnie-rogahn",
+      "name": "Lonnie Rogahn",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/herbigt/128.jpg?random=fde8a699-624d-4052-96ef-0aaacf217184"
+      }
+    },
+    {
+      "id": "fa70eecb-fbae-4133-b447-6c80b335fc01",
+      "slug": "marcella-ledner",
+      "name": "Marcella Ledner",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/dawidwu/128.jpg?random=03869abc-1a6b-4f26-8d73-7ba508c148d0"
+      }
+    },
+    {
+      "id": "ef4cc540-c784-407f-b646-cff4d8fe666e",
+      "slug": "darrell-runolfsson",
+      "name": "Darrell Runolfsson",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/andrewofficer/128.jpg?random=e6c24db9-f1c9-45b5-8507-609fca960e92"
+      }
+    }
+  ],
+  "followedBy": [
+    {
+      "id": "8c0b0191-454a-4806-b0c3-1ed1d9dc5416",
+      "slug": "wanda-stanton-sr",
+      "name": "Wanda Stanton Sr.",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/nicolasfolliot/128.jpg?random=be2e59fb-f038-44d5-9e21-28fb123e8c7c"
+      }
+    },
+    {
+      "id": "c5d2c492-5b8c-41a5-a9a2-26f8c866a885",
+      "slug": "georgia-koss-dvm",
+      "name": "Georgia Koss DVM",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/lvovenok/128.jpg?random=8e1e75b9-5dad-4fc8-9c52-38b89a3e0484"
+      }
+    },
+    {
+      "id": "5f2b3c14-07fc-4dfa-978e-9bf21d8586d0",
+      "slug": "roland-kohler",
+      "name": "Roland Kohler",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/bcrad/128.jpg?random=4f77c5b2-0214-4342-a18e-424787f04896"
+      }
+    },
+    {
+      "id": "6f4fdb51-fe93-4373-bf44-c36ea17f6535",
+      "slug": "walter-ohara",
+      "name": "Walter O'Hara",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/mutlu82/128.jpg?random=0866e1b7-8285-4eaf-a4c8-8509bd99f172"
+      }
+    },
+    {
+      "id": "20f5080b-1fc2-4c70-94c7-badbe2aa2370",
+      "slug": "hannah-bradtke",
+      "name": "Hannah Bradtke",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/Skyhartman/128.jpg?random=c02415a6-1e7e-488a-acb6-47587399ff07"
+      }
+    },
+    {
+      "id": "df65a474-b661-4fd8-b49f-2d609bfc4089",
+      "slug": "wanda-gerlach",
+      "name": "Wanda Gerlach",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/lewisainslie/128.jpg?random=5f0976d5-7871-4606-a416-6b67b0e67c15"
+      }
+    },
+    {
+      "id": "f4c10451-f367-4afb-97fe-e48f60236655",
+      "slug": "genevieve-aufderhar-v",
+      "name": "Genevieve Aufderhar V",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/dss49/128.jpg?random=fc59a664-d2b4-4677-81e9-26ed5d4bc37e"
+      }
+    },
+    {
+      "id": "7a569786-fbb1-4e27-8f2c-38d2a0963b9d",
+      "slug": "gerardo-batz",
+      "name": "Gerardo Batz",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/colirpixoil/128.jpg?random=8536b980-103e-4e5e-8141-31142e3c6330"
+      }
+    },
+    {
+      "id": "da70bae8-daf2-4481-b2db-506d00b73210",
+      "slug": "miss-lester-kovacek",
+      "name": "Miss Lester Kovacek",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/stefvdham/128.jpg?random=7de26019-8114-4caa-9aea-2172ae3c537c"
+      }
+    },
+    {
+      "id": "a2c49c22-940a-4598-8285-b8ebb34bd045",
+      "slug": "krista-hammes-dvm",
+      "name": "Krista Hammes DVM",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/sterlingrules/128.jpg?random=28167137-eee4-42e6-98a3-ec9a7d4b9509"
+      }
+    },
+    {
+      "id": "bcd5f271-bca5-492e-a6b6-7fd490ac37aa",
+      "slug": "janet-bruen",
+      "name": "Janet Bruen",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/yigitpinarbasi/128.jpg?random=3c7ab2c0-8e53-4edb-8c74-fd8cdfae5f8e"
+      }
+    },
+    {
+      "id": "38ccbf58-305a-4400-a1e4-785661604d5f",
+      "slug": "ebony-corwin",
+      "name": "Ebony Corwin",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/thibaut_re/128.jpg?random=f2137643-6f58-45b8-8266-d1fb893d0528"
+      }
+    },
+    {
+      "id": "d7ee00ea-5d22-4a1c-8670-7e4d4bd4ebfa",
+      "slug": "guadalupe-kessler",
+      "name": "Guadalupe Kessler",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/linux29/128.jpg?random=a87d13e1-ff0e-4a39-a018-e89a04d72572"
+      }
+    },
+    {
+      "id": "dca673f2-89b8-46cc-a836-2515f319c02f",
+      "slug": "carlton-botsford",
+      "name": "Carlton Botsford",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/cocolero/128.jpg?random=3ef57800-7694-4ec4-a9eb-39abca8d59e4"
+      }
+    },
+    {
+      "id": "49b868e3-dba5-48ed-8b6c-e686c70dfcfb",
+      "slug": "lonnie-rogahn",
+      "name": "Lonnie Rogahn",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/herbigt/128.jpg?random=fde8a699-624d-4052-96ef-0aaacf217184"
+      }
+    },
+    {
+      "id": "4d3fbb67-7ddc-4aa9-96d0-57bb20f95f59",
+      "slug": "krystal-braun",
+      "name": "Krystal Braun",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/salvafc/128.jpg?random=1dbd4549-a525-4fa3-be41-15db84ceb41a"
+      }
+    },
+    {
+      "id": "58ba4ab0-990e-4f44-a7a8-42d10962f8b7",
+      "slug": "edward-boehm",
+      "name": "Edward Boehm",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/d_nny_m_cher/128.jpg?random=cf3ba671-4564-4dc1-bf94-a5fc3ea4fafa"
+      }
+    },
+    {
+      "id": "868952d8-c5df-4415-a0bb-930acd26749c",
+      "slug": "teri-stamm-iii",
+      "name": "Teri Stamm III",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/salimianoff/128.jpg?random=d2305511-39b2-4207-bee6-90799557546e"
+      }
+    },
+    {
+      "id": "fa70eecb-fbae-4133-b447-6c80b335fc01",
+      "slug": "marcella-ledner",
+      "name": "Marcella Ledner",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/dawidwu/128.jpg?random=03869abc-1a6b-4f26-8d73-7ba508c148d0"
+      }
+    },
+    {
+      "id": "63798c79-2476-4eb8-a09c-167420bd05d7",
+      "slug": "peggy-carter",
+      "name": "Peggy Carter",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/uxpiper/128.jpg?random=c4dc0de5-99d7-410d-8088-6a2be8358fe9"
+      }
+    },
+    {
+      "id": "9fe670ff-1968-4b15-ab80-7adee8173dd8",
+      "slug": "angela-schiller",
+      "name": "Angela Schiller",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/dudestein/128.jpg?random=0b511fa4-8603-419a-acf0-2a89bc41a71b"
+      }
+    },
+    {
+      "id": "fdbb3e7f-f211-4685-831e-9d7e394b95a1",
+      "slug": "shannon-schuster",
+      "name": "Shannon Schuster",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/markretzloff/128.jpg?random=f8a223ff-d49f-499f-a161-350e8078c353"
+      }
+    },
+    {
+      "id": "5137e045-aef0-4ce1-8327-b516a72fffd6",
+      "slug": "terrell-gorczany",
+      "name": "Terrell Gorczany",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/jimmuirhead/128.jpg?random=5e61976f-529e-47f2-b4f0-b5e4550942ea"
+      }
+    },
+    {
+      "id": "ef4cc540-c784-407f-b646-cff4d8fe666e",
+      "slug": "darrell-runolfsson",
+      "name": "Darrell Runolfsson",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/andrewofficer/128.jpg?random=e6c24db9-f1c9-45b5-8507-609fca960e92"
+      }
+    },
+    {
+      "id": "b224eb01-5a71-4126-b811-51b7b35afd51",
+      "slug": "dr-jamie-romaguera",
+      "name": "Dr. Jamie Romaguera",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/leonfedotov/128.jpg?random=9179538d-58be-4707-8ad6-485f703bea26"
+      }
+    },
+    {
+      "id": "u1",
+      "slug": "peter-lustig",
+      "name": "Peter Lustig",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/timgthomas/128.jpg?random=189d17f8-02d1-4b01-a000-af7121ae6897"
+      }
+    },
+    {
+      "id": "u6",
+      "slug": "louie",
+      "name": "Louie",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/yayteejay/128.jpg?random=eefe597c-d49a-494f-b311-d6f2645d2264"
+      }
+    },
+    {
+      "id": "3102346c-ea94-41d3-8474-5241e5e473a6",
+      "slug": "edmund-rolfson-jr",
+      "name": "Edmund Rolfson Jr.",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/nerrsoft/128.jpg?random=d6f0804c-f38f-4c8b-821d-27a02373c74e"
+      }
+    },
+    {
+      "id": "40cf7e21-a4dc-4055-a49d-3137c53dd815",
+      "slug": "ms-laurie-bergnaum",
+      "name": "Ms. Laurie Bergnaum",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/kohette/128.jpg?random=45516cde-9073-4ceb-8b42-2bdf66a26c67"
+      }
+    },
+    {
+      "id": "d861e775-2344-40d5-b6e4-8479e7dbe97f",
+      "slug": "marvin-gutkowski-iii",
+      "name": "Marvin Gutkowski III",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/kiwiupover/128.jpg?random=d38c1508-0342-46e0-9ef9-e0fd14b33072"
+      }
+    },
+    {
+      "id": "4c377f54-72c3-4e13-9532-6d0f2278a794",
+      "slug": "jeffery-waelchi",
+      "name": "Jeffery Waelchi",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/andresenfredrik/128.jpg?random=b643d8ba-5e49-4854-b2a6-2ff609ffcba0"
+      }
+    },
+    {
+      "id": "0290fd5e-7ce8-4d70-8c29-f5ed96bfaa1f",
+      "slug": "bert-oconner",
+      "name": "Bert O'Conner",
+      "avatar": {
+        "url": "https://s3.amazonaws.com/uifaces/faces/twitter/mangosango/128.jpg?random=03807c6c-c2f6-4ed3-8433-7a1823079eb0"
+      }
+    }
+  ]
+}
+
--- a/webapp/components/features/FollowList/FollowList.vue
+++ b/webapp/components/features/FollowList/FollowList.vue
@ -42,6 +42,7 @@
 </template>

 <script>
+import { escape } from 'xregexp/xregexp-all.js'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'

 export default {
@ -79,8 +80,11 @@ export default {
        return this.connections
      }

+      // @example
+      //  this.filter = 'foo';
+      //  fuzzyExpression = /([^f]*f)([^o]*o)([^o]*o)/i
      const fuzzyExpression = new RegExp(
-        `${this.filter.split('').reduce((part, c) => `${part}[^${c}]*${c}`)}`,
+        `${this.filter.split('').reduce((expr, c) => `${expr}([^${escape(c)}]*${escape(c)})`, '')}`,
        'i',
      )

@ -88,12 +92,21 @@ export default {
        .map((user) => {
          const match = user.name.match(fuzzyExpression)

+          if (!match) {
+            return false
+          }
+
+          let score = 1
+          for (let i = 1; i <= this.filter.length; i++) {
+            score *= match[i].length
+          }
+
          return {
            user,
-            score: match ? match[0].length * (match.index + 1) : -1,
+            score,
          }
        })
-        .filter((score) => score.score !== -1)
+        .filter(Boolean)
        .sort((a, b) => a.score - b.score)

      return fuzzyScores.map((score) => score.user)
--- a/webapp/storybook/layout.vue
+++ b/webapp/storybook/layout.vue
@ -1,7 +1,7 @@
 <template>
-  <ds-container class="container">
+  <div class="container">
    <slot />
-  </ds-container>
+  </div>
 </template>

 <style lang="scss">
@ -10,5 +10,7 @@

 .container {
  padding: 5rem;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 </style>