wip

app/auth/routes.py

@@ -45,9 +45,9 @@ def signup():
         
         # Create root category for the user
         root_category = Category(
-            name='root',
+            name='Library',
-            icon='mdi-folder-root',
+            icon='mdi-bookshelf',
-            description='System root directory',
+            description='General storage for documents and categories',
             user_id=user.id,
             is_root=True
         )

app/routes.py

@@ -131,9 +131,9 @@ def save_document():
     if not root_category:
         # Create a root category if it doesn't exist
         root_category = Category(
-            name='root',
+            name='Library',
-            icon='mdi-folder-root',
+            icon='mdi-bookshelf',
-            description='System root directory',
+            description='General storage for documents and categories',
             user_id=current_user.id,
             is_root=True
         )

app/static/css/main.css

@@ -0,0 +1,175 @@
+/* Animation for expanding/collapsing */
+.animate-slide-down {
+    animation: slideDown 0.3s ease-out forwards;
+}
+
+.animate-slide-up {
+    animation: slideUp 0.3s ease-out forwards;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+        max-height: 0;
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+        max-height: 1000px;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+        max-height: 1000px;
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-10px);
+        max-height: 0;
+    }
+}
+
+/* Active view styling */
+.active-view {
+    background-color: rgba(76, 175, 80, 0.2); /* Primary color with opacity */
+    color: #4CAF50; /* Primary color */
+}
+
+/* Fix for sidebar tree view */
+.sidebar-hidden .sidebar {
+    transform: translateX(-100%);
+}
+
+.sidebar-hidden main {
+    margin-left: 0;
+}
+
+/* Category tree styling */
+#category-tree {
+    margin-left: 0;
+}
+
+.category-item > div {
+    padding: 4px 0;
+    border-radius: 4px;
+}
+
+.document-item {
+    position: relative;
+}
+
+.document-item a {
+    border-radius: 4px;
+    display: block;
+}
+
+.category-item .actions,
+.document-item .actions {
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: #282a36;
+    padding: 0 4px;
+    border-radius: 4px;
+    z-index: 10;
+}
+
+/* Drag and drop styles */
+.drop-target {
+    background-color: rgba(80, 250, 123, 0.15);
+    border-radius: 4px;
+    outline: 1px dashed #50fa7b;
+}
+
+.dragging {
+    opacity: 0.5;
+}
+
+/* GitHub-style admonitions/alerts */
+.markdown-body .admonition {
+    padding: 1rem;
+    border-left: 4px solid;
+    margin: 1em 0;
+    border-radius: 6px;
+    background-color: rgba(175, 184, 193, 0.2);
+}
+
+.markdown-body .admonition-title {
+    font-weight: 600;
+    margin-top: 0;
+}
+
+/* Regular blockquotes */
+.markdown-body blockquote {
+    padding: 0.5rem 1rem;
+    color: #8b949e;
+    border-left: 0.25em solid #30363d;
+    margin: 1em 0;
+    background-color: rgba(55, 65, 81, 0.1);
+}
+
+.markdown-body blockquote > :first-child {
+    margin-top: 0;
+}
+
+.markdown-body blockquote > :last-child {
+    margin-bottom: 0;
+}
+
+.markdown-body .admonition-note {
+    border-color: #2b6eff;
+    background-color: rgba(43, 110, 255, 0.1);
+}
+
+.markdown-body .admonition-note .admonition-title {
+    color: #2b6eff;
+}
+
+.markdown-body .admonition-tip {
+    border-color: #3fb950;
+    background-color: rgba(63, 185, 80, 0.1);
+}
+
+.markdown-body .admonition-tip .admonition-title {
+    color: #3fb950;
+}
+
+.markdown-body .admonition-important {
+    border-color: #a371f7;
+    background-color: rgba(163, 113, 247, 0.1);
+}
+
+.markdown-body .admonition-important .admonition-title {
+    color: #a371f7;
+}
+
+.markdown-body .admonition-warning {
+    border-color: #d29922;
+    background-color: rgba(210, 153, 34, 0.1);
+}
+
+.markdown-body .admonition-warning .admonition-title {
+    color: #d29922;
+}
+
+.markdown-body .admonition-caution {
+    border-color: #f85149;
+    background-color: rgba(248, 81, 73, 0.1);
+}
+
+.markdown-body .admonition-caution .admonition-title {
+    color: #f85149;
+}
+
+.markdown-body .admonition-danger {
+    border-color: #cf222e;
+    background-color: rgba(207, 34, 46, 0.1);
+}
+
+.markdown-body .admonition-danger .admonition-title {
+    color: #cf222e;
+} 

app/static/js/utils.js

@@ -0,0 +1,56 @@
+/**
+ * Utility functions for Vim Docs application
+ */
+
+// Debounce function to limit how often a function can run
+function debounce(func, wait) {
+    let timeout;
+    return function() {
+        const context = this;
+        const args = arguments;
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(context, args), wait);
+    };
+}
+
+// Helper function to show notifications
+function showNotification(message, type = 'success') {
+    const notification = document.createElement('div');
+    const icon = type === 'success' ? 'mdi-check-circle' : 'mdi-alert-circle';
+    const bgColor = type === 'success' ? 'bg-primary/90' : 'bg-red-500/90';
+    
+    notification.className = `fixed bottom-4 right-4 ${bgColor} text-white px-4 py-2 rounded-md shadow-lg transform translate-y-0 opacity-100 transition-all duration-300 flex items-center`;
+    notification.innerHTML = `<i class="mdi ${icon} mr-2"></i><span>${message}</span>`;
+    
+    document.body.appendChild(notification);
+    
+    setTimeout(() => {
+        notification.classList.add('translate-y-16', 'opacity-0');
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
+}
+
+// Helper function to get CSRF token from meta tag
+function getCsrfToken() {
+    return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+}
+
+// Toggle element visibility
+function toggleVisibility(element, show) {
+    if (show) {
+        element.classList.remove('hidden');
+    } else {
+        element.classList.add('hidden');
+    }
+}
+
+// Load preference from localStorage with default value
+function getPreference(key, defaultValue) {
+    const value = localStorage.getItem(key);
+    return value !== null ? value : defaultValue;
+}
+
+// Save preference to localStorage
+function savePreference(key, value) {
+    localStorage.setItem(key, value);
+}

app/templates/base.html

@@ -9,6 +9,9 @@
     <!-- Material Design Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
     
+    <!-- Main CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+    
     <!-- CascadyaCove Nerd Font -->
     <style>
         @font-face {
@@ -44,57 +47,7 @@
     </script>
     
     <!-- Custom Styles -->
-    <style>
+    <!-- All styles moved to main.css -->
-        /* Fix for sidebar tree view */
-        .sidebar-hidden .sidebar {
-            transform: translateX(-100%);
-        }
-        
-        .sidebar-hidden main {
-            margin-left: 0;
-        }
-        
-        /* Category tree styling */
-        #category-tree {
-            margin-left: 0;
-        }
-        
-        .category-item > div {
-            padding: 4px 0;
-            border-radius: 4px;
-        }
-        
-        .document-item {
-            position: relative;
-        }
-        
-        .document-item a {
-            border-radius: 4px;
-            display: block;
-        }
-        
-        .category-item .actions,
-        .document-item .actions {
-            right: 0;
-            top: 50%;
-            transform: translateY(-50%);
-            background-color: #282a36;
-            padding: 0 4px;
-            border-radius: 4px;
-            z-index: 10;
-        }
-        
-        /* Drag and drop styles */
-        .drop-target {
-            background-color: rgba(80, 250, 123, 0.15);
-            border-radius: 4px;
-            outline: 1px dashed #50fa7b;
-        }
-        
-        .dragging {
-            opacity: 0.5;
-        }
-    </style>
     
     {% block extra_css %}{% endblock %}
 </head>
@@ -317,7 +270,7 @@
             // Add document button - consistent across all views
             const newDocButton = document.createElement('button');
             newDocButton.className = 'p-1 text-gray-500 hover:text-primary rounded transition-colors';
-            newDocButton.title = 'Add Document';
+            newDocButton.title = 'Add document';
             newDocButton.innerHTML = '<i class="mdi mdi-file-plus-outline text-sm"></i>';
             newDocButton.addEventListener('click', function(e) {
                 e.preventDefault();
@@ -329,7 +282,7 @@
             // Add subcategory button - consistent across all views
             const newSubfolderButton = document.createElement('button');
             newSubfolderButton.className = 'p-1 text-gray-500 hover:text-primary rounded transition-colors';
-            newSubfolderButton.title = 'Add Sub-category';
+            newSubfolderButton.title = 'Add subcategory';
             newSubfolderButton.innerHTML = '<i class="mdi mdi-folder-plus-outline text-sm"></i>';
             newSubfolderButton.addEventListener('click', function(e) {
                 e.preventDefault();
@@ -341,7 +294,7 @@
             // Edit category button - consistent across all views
             const editButton = document.createElement('button');
             editButton.className = 'p-1 text-gray-500 hover:text-primary rounded transition-colors';
-            editButton.title = 'Edit Category';
+            editButton.title = 'Rename category';
             editButton.innerHTML = '<i class="mdi mdi-pencil-outline text-sm"></i>';
             editButton.addEventListener('click', function(e) {
                 e.preventDefault();
@@ -634,6 +587,7 @@
     </div>
     {% endif %}
     
+    <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
     {% block extra_js %}{% endblock %}
 </body>
 </html> 

app/templates/index.html

@@ -123,8 +123,21 @@
         <div id="grid-view" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
             {% if categories %}
                 {% for category in categories %}
-                <div class="bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-lg transition-all hover:-translate-y-1 duration-200">
+                <div class="bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-lg transition-all hover:-translate-y-1 duration-200 group">
-                    <a href="{{ url_for('main.view_category', category_id=category.id) }}" class="block p-5">
+                    <a href="{{ url_for('main.view_category', category_id=category.id) }}" class="block p-5 relative">
+                        <!-- Hover action buttons --> 
+                        <div class="absolute right-2 top-2 hidden group-hover:flex space-x-1 bg-gray-800/90 rounded-md px-1 py-1 shadow-md z-10">
+                            <a href="{{ url_for('main.new_document') }}?category={{ category.id }}" class="p-1.5 text-gray-400 hover:text-primary rounded-full hover:bg-gray-700 transition-all" title="Add document">
+                                <i class="mdi mdi-file-plus-outline text-sm"></i>
+                            </a>
+                            <a href="{{ url_for('main.new_category') }}?parent_id={{ category.id }}" class="p-1.5 text-gray-400 hover:text-primary rounded-full hover:bg-gray-700 transition-all" title="Add subcategory">
+                                <i class="mdi mdi-folder-plus-outline text-sm"></i>
+                            </a>
+                            <a href="{{ url_for('main.edit_category', category_id=category.id) }}" class="p-1.5 text-gray-400 hover:text-primary rounded-full hover:bg-gray-700 transition-all" title="Rename category">
+                                <i class="mdi mdi-pencil-outline text-sm"></i>
+                            </a>
+                        </div>
+                        
                         <div class="flex items-center mb-3">
                             <div class="w-10 h-10 rounded-md bg-primary/20 flex items-center justify-center text-primary mr-3">
                                 <i class="mdi {{ category.icon }} text-2xl"></i>
@@ -184,13 +197,13 @@
                                         <a href="{{ url_for('main.view_category', category_id=category.id) }}" class="text-white font-medium hover:text-primary transition-colors">{{ category.name }}</a>
                                     </div>
                                     <div class="flex items-center gap-2 hidden group-hover:flex">
-                                        <a href="{{ url_for('main.new_document') }}?category={{ category.id }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="New Document">
+                                        <a href="{{ url_for('main.new_document') }}?category={{ category.id }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Add document">
                                             <i class="mdi mdi-file-plus-outline"></i>
                                         </a>
-                                        <a href="{{ url_for('main.view_category', category_id=category.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="View Category">
+                                        <a href="{{ url_for('main.new_category') }}?parent_id={{ category.id }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Add subcategory">
-                                            <i class="mdi mdi-eye-outline"></i>
+                                            <i class="mdi mdi-folder-plus-outline"></i>
                                         </a>
-                                        <a href="{{ url_for('main.edit_category', category_id=category.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Edit Category">
+                                        <a href="{{ url_for('main.edit_category', category_id=category.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Rename category">
                                             <i class="mdi mdi-pencil-outline"></i>
                                         </a>
                                     </div>
@@ -236,11 +249,14 @@
                                                             <a href="{{ url_for('main.view_category', category_id=subcategory.id) }}" class="text-gray-300 hover:text-primary transition-colors">{{ subcategory.name }}</a>
                                                         </div>
                                                         <div class="flex items-center gap-2 hidden group-hover:flex">
-                                                            <a href="{{ url_for('main.new_document') }}?category={{ subcategory.id }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="New Document">
+                                                            <a href="{{ url_for('main.new_document') }}?category={{ subcategory.id }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Add document">
                                                                 <i class="mdi mdi-file-plus-outline"></i>
                                                             </a>
-                                                            <a href="{{ url_for('main.view_category', category_id=subcategory.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="View Category">
+                                                            <a href="{{ url_for('main.new_category') }}?parent_id={{ subcategory.id }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Add subcategory">
-                                                                <i class="mdi mdi-eye-outline"></i>
+                                                                <i class="mdi mdi-folder-plus-outline"></i>
+                                                            </a>
+                                                            <a href="{{ url_for('main.edit_category', category_id=subcategory.id) }}" class="p-1 text-gray-400 hover:text-primary rounded transition-all" title="Rename category">
+                                                                <i class="mdi mdi-pencil-outline"></i>
                                                             </a>
                                                         </div>
                                                     </div>
@@ -620,46 +636,5 @@
     });
 </script>
 
-<style>
+<!-- Styles moved to main.css -->
-    /* Animation for expanding/collapsing */
-    .animate-slide-down {
-        animation: slideDown 0.3s ease-out forwards;
-    }
-    
-    .animate-slide-up {
-        animation: slideUp 0.3s ease-out forwards;
-    }
-    
-    @keyframes slideDown {
-        from {
-            opacity: 0;
-            transform: translateY(-10px);
-            max-height: 0;
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-            max-height: 1000px;
-        }
-    }
-    
-    @keyframes slideUp {
-        from {
-            opacity: 1;
-            transform: translateY(0);
-            max-height: 1000px;
-        }
-        to {
-            opacity: 0;
-            transform: translateY(-10px);
-            max-height: 0;
-        }
-    }
-    
-    /* Active view styling */
-    .active-view {
-        background-color: rgba(76, 175, 80, 0.2); /* Primary color with opacity */
-        color: #4CAF50; /* Primary color */
-    }
-</style>
 {% endblock %}