(frontend) fixes #91; append small random suffix to slug in creation

this should ensure that notebook and note slug names have a lower chance
of conflicting, with similar named ones e.g. `my-note` ->
`my-note-abc12`.

frontend/src/components/modals/new_book.tsx

@@ -2,7 +2,7 @@ import { Component, createSignal } from 'solid-js';
 import BaseModal from './base';
 import { Book, CreateBook, User } from '../../core/types';
 import { createStore } from 'solid-js/store';
-import { toSlug } from '../../core/helpers';
+import { toSlug, toSlugWithSuffix } from '../../core/helpers';
 import { useApi } from '../../contexts/ApiProvider';
 import { useNavigate } from '@solidjs/router';
 import { ApiError } from '../../core/api';
@@ -40,7 +40,7 @@ const NewBookModal: Component<NewBookModalProps> = (props) => {
           <input
             oninput={(ev) => setForm({
               name: ev.currentTarget.value,
-              slug: toSlug(ev.currentTarget.value)
+              slug: toSlugWithSuffix(ev.currentTarget.value)
             })}
             value={form.name}
             class="input input-bordered w-full"

frontend/src/components/modals/new_note.tsx

@@ -2,7 +2,7 @@ import { Component, createSignal } from 'solid-js';
 import BaseModal from './base';
 import { Book, CreateNote, Note, User } from '../../core/types';
 import { createStore } from 'solid-js/store';
-import { toSlug } from '../../core/helpers';
+import { toSlug, toSlugWithSuffix } from '../../core/helpers';
 import { useApi } from '../../contexts/ApiProvider';
 import { useNavigate } from '@solidjs/router';
 import { ApiError } from '../../core/api';
@@ -41,7 +41,7 @@ const NewNoteModal: Component<NewNoteModalProps> = (props) => {
           <input
             oninput={(ev) => setForm({
               name: ev.currentTarget.value,
-              slug: toSlug(ev.currentTarget.value)
+              slug: toSlugWithSuffix(ev.currentTarget.value)
             })}
             value={form.name}
             class="input input-bordered w-full"

frontend/src/core/helpers.ts

@@ -1,3 +1,14 @@
+const SLUG_SUFFIX_CHARS = "abcdefghijklmnopqrstuvwxyz0123456789"
+const SLUG_SUFFIX_LENGTH = 5;
+
 export function toSlug(v: string): string {
   return v.toLowerCase().replaceAll(" ", "-").replaceAll(/[^a-z0-9-]/g, "")
 }
+
+export function toSlugWithSuffix(v: string, suffixLength = SLUG_SUFFIX_LENGTH): string {
+  let suffix = "-";
+  for (let i = 0; i < suffixLength; i++) {
+    suffix += SLUG_SUFFIX_CHARS[Math.floor(Math.random() * SLUG_SUFFIX_CHARS.length)]
+  }
+  return toSlug(v) + suffix
+}