Ignore MigrationBackup/ directory in .gitignore

Added MigrationBackup/ to .gitignore to prevent tracking of backup files and subdirectories within this folder. This helps keep the repository clean from backup-related artifacts.

.gitignore

@@ -361,3 +361,4 @@ MigrationBackup/
 
 # Fody - auto-generated XML schema
 FodyWeavers.xsd
+/Notemark/data/shares

Notemark/Components/Pages/Editor.razor

@@ -24,7 +24,38 @@
         </div>
         
         <div class="top-bar-right">
-            <button class="btn-share" @onclick="ShowShareModal">Share</button>
+            <div class="share-container">
+                <button class="btn-share" @onclick="ToggleShareDropdown">Share</button>
+                
+                @if (showShareDropdown)
+                {
+                    <div class="dropdown-backdrop" @onclick="CloseShareDropdown"></div>
+                    <div class="share-dropdown">
+                        @if (isGeneratingLinks)
+                        {
+                            <div class="loading-small">Generating...</div>
+                        }
+                        else if (!string.IsNullOrEmpty(readonlyLink))
+                        {
+                            <div class="share-item">
+                                <label>View Only</label>
+                                <div class="link-group">
+                                    <input type="text" readonly value="@readonlyLink" class="link-field" />
+                                    <button @onclick="() => CopyToClipboard(readonlyLink)" class="btn-copy-small">📋</button>
+                                </div>
+                            </div>
+                            
+                            <div class="share-item">
+                                <label>Can Edit</label>
+                                <div class="link-group">
+                                    <input type="text" readonly value="@editableLink" class="link-field" />
+                                    <button @onclick="() => CopyToClipboard(editableLink)" class="btn-copy-small">📋</button>
+                                </div>
+                            </div>
+                        }
+                    </div>
+                }
+            </div>
         </div>
     </div>
 
@@ -53,42 +84,7 @@
     </div>
 
     <!-- Share Modal -->
-    @if (showShareModal)
+    @* Removed modal - now using dropdown *@
-    {
-        <div class="modal-overlay" @onclick="HideShareModal">
-            <div class="modal-content" @onclick:stopPropagation="true">
-                <div class="modal-header">
-                    <h3>Share Document</h3>
-                    <button class="btn-close" @onclick="HideShareModal">&times;</button>
-                </div>
-                
-                <div class="modal-body">
-                    @if (isGeneratingLinks)
-                    {
-                        <div class="loading">Generating share links...</div>
-                    }
-                    else if (!string.IsNullOrEmpty(readonlyLink))
-                    {
-                        <div class="share-link-group">
-                            <label>Readonly Link (View Only)</label>
-                            <div class="link-input-group">
-                                <input type="text" readonly value="@readonlyLink" class="link-input" />
-                                <button @onclick="() => CopyToClipboard(readonlyLink)" class="btn-copy">Copy</button>
-                            </div>
-                        </div>
-                        
-                        <div class="share-link-group">
-                            <label>Editable Link (Can Edit)</label>
-                            <div class="link-input-group">
-                                <input type="text" readonly value="@editableLink" class="link-input" />
-                                <button @onclick="() => CopyToClipboard(editableLink)" class="btn-copy">Copy</button>
-                            </div>
-                        </div>
-                    }
-                </div>
-            </div>
-        </div>
-    }
 </div>
 
 @code {
@@ -98,8 +94,8 @@
     private bool showPreview = false;
     private string saveStatus = "Saved";
     
-    // Share modal state
+    // Share dropdown state
-    private bool showShareModal = false;
+    private bool showShareDropdown = false;
     private bool isGeneratingLinks = false;
     private string readonlyLink = "";
     private string editableLink = "";
@@ -192,9 +188,11 @@
         }
     }
 
-    private async Task ShowShareModal()
+    private async Task ToggleShareDropdown()
     {
-        showShareModal = true;
+        if (!showShareDropdown)
+        {
+            showShareDropdown = true;
             isGeneratingLinks = true;
             readonlyLink = "";
             editableLink = "";
@@ -227,15 +225,29 @@
                 await InvokeAsync(StateHasChanged);
             }
         }
-
+        else
-    private void HideShareModal()
         {
-        showShareModal = false;
+            CloseShareDropdown();
+        }
+    }
+
+    private void CloseShareDropdown()
+    {
+        showShareDropdown = false;
     }
 
     private async Task CopyToClipboard(string text)
+    {
+        try
         {
             await JSRuntime.InvokeVoidAsync("navigator.clipboard.writeText", text);
+            // Could add a toast notification here in the future
+        }
+        catch
+        {
+            // Fallback for browsers that don't support clipboard API
+            await JSRuntime.InvokeVoidAsync("prompt", "Copy this link:", text);
+        }
     }
 
     public void Dispose()

Notemark/Components/Pages/Editor.razor.css

@@ -238,83 +238,145 @@
   font-weight: 600;
 }
 
-/* Modal Styles */
+/* Share Dropdown Styles */
-.modal-overlay {
+.share-container {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background: transparent;
-  display: flex;
+  z-index: 999;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
 }
 
-.modal-content {
+.share-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 0.5rem;
   background-color: var(--surface);
+  border: 2px solid var(--accent);
   border-radius: 8px;
-  width: 90%;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-  max-width: 500px;
+  padding: 1rem;
-  max-height: 80vh;
+  width: 320px;
-  overflow: hidden;
+  z-index: 1000;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  animation: dropdownFadeIn 0.15s ease-out;
 }
 
-.modal-header {
+@keyframes dropdownFadeIn {
-  display: flex;
+  from {
-  align-items: center;
+    opacity: 0;
-  justify-content: space-between;
+    transform: translateY(-8px);
-  padding: 1rem 1.5rem;
+  }
-  border-bottom: 1px solid var(--border);
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.modal-header h3 {
+.share-dropdown::before {
-  margin: 0;
+  content: '';
-  font-size: 1.25rem;
+  position: absolute;
-  color: var(--primary-text);
+  top: -8px;
+  right: 1rem;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid var(--accent);
 }
 
-.modal-body {
+.share-item {
-  padding: 1.5rem;
+  margin-bottom: 1rem;
 }
 
-.share-link-group {
+.share-item:last-child {
-  margin-bottom: 1.5rem;
-}
-
-.share-link-group:last-child {
   margin-bottom: 0;
 }
 
-.share-link-group label {
+.share-item label {
   display: block;
   margin-bottom: 0.5rem;
-  font-weight: 500;
+  font-weight: 600;
-  color: var(--primary-text);
+  font-size: 0.875rem;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
-.link-input-group {
+.link-group {
   display: flex;
   gap: 0.5rem;
+  align-items: center;
 }
 
-.link-input {
+.link-field {
   flex: 1;
-  padding: 0.75rem;
+  padding: 0.5rem 0.75rem;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: 4px;
   background-color: var(--bg);
   color: var(--primary-text);
-  font-family: monospace;
+  font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
+  font-weight: 500;
 }
 
-.loading {
+.link-field:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
+}
+
+.btn-copy-small {
+  padding: 0.5rem;
+  background-color: var(--accent);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+}
+
+.btn-copy-small:hover {
+  background-color: var(--accent-hover);
+  transform: scale(1.05);
+}
+
+.loading-small {
   text-align: center;
-  color: var(--secondary-text);
+  color: var(--accent);
-  padding: 2rem;
+  padding: 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.loading-small::after {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border);
+  border-radius: 50%;
+  border-top-color: var(--accent);
+  animation: spin 1s ease-in-out infinite;
+  margin-left: 0.5rem;
+  vertical-align: middle;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
 /* Mobile Responsive */