Handle duplicate snippet name

Author: jahn96

src/CodeSnippetDisplay.tsx

@@ -327,9 +327,9 @@ export class CodeSnippetDisplay extends React.Component<
 
   // rename snippet on double click
   // TODO: duplicate name check!
-  private handleRenameSnippet(
+  private async handleRenameSnippet(
     event: React.MouseEvent<HTMLSpanElement, MouseEvent>
-  ): void {
+  ): Promise<void> {
     const contentsService = CodeSnippetContentsService.getInstance();
     console.log(event.currentTarget);
     console.log(event.target);
@@ -339,28 +339,38 @@ export class CodeSnippetDisplay extends React.Component<
     const new_element = document.createElement('input');
     new_element.setAttribute('type', 'text');
     new_element.id = 'jp-codeSnippet-rename';
-    // new_element.innerHTML = target.innerHTML;
+    new_element.innerHTML = target.innerHTML;
 
     target.replaceWith(new_element);
     new_element.value = target.innerHTML;
 
     new_element.focus();
     new_element.setSelectionRange(0, new_element.value.length);
 
-    new_element.onblur = (): void => {
-      new_element.replaceWith(target);
-
+    new_element.onblur = async (): Promise<void> => {
+      console.log(target.innerHTML);
+      console.log(new_element.value);
       if (target.innerHTML !== new_element.value) {
         const newPath = 'snippets/' + new_element.value + '.json';
-
-        contentsService.rename(oldPath, newPath);
+        try {
+          await contentsService.rename(oldPath, newPath);
+        } catch (error) {
+          new_element.replaceWith(target);
+
+          await showDialog({
+            title: 'Duplicate Name of Code Snippet',
+            body: <p> {`"${newPath}" already exists.`} </p>,
+            buttons: [Dialog.okButton({ label: 'Dismiss' })]
+          });
+          return;
+        }
         this.props._codeSnippetWidgetModel.renameSnippet(
           target.innerHTML,
           new_element.value
         );
-
         target.innerHTML = new_element.value;
       }
+      new_element.replaceWith(target);
     };
     new_element.onkeydown = (event: KeyboardEvent): void => {
       switch (event.code) {

style/index.css

@@ -42,6 +42,7 @@
   text-overflow: ellipsis;
   color: var(--jp-ui-font-color0);
   display: flex;
+  align-items: center;
 }
 
 .jp-codeSnippetsContainer-button {
@@ -72,8 +73,10 @@
 #jp-codeSnippet-rename {
   background-color: var(--jp-layout-color2);
   border: 1px solid var(--jp-layout-color1);
-  border-radius: 2px;
+  border-radius: 4px;
   font-size: var(--jp-ui-font-size1);
+  box-sizing: border-box;
+  margin: 0px;
 }
 
 .jp-codeSnippet-metadata {