update

index.html

@@ -47,6 +47,9 @@
                     <button class="new-dropdown-item" id="uploadFileBtn">
                         <i class="ph-fill ph-upload-simple"></i> Upload File
                     </button>
+                    <button class="new-dropdown-item" id="addLinkBtn">
+                        <i class="ph-fill ph-link-plus"></i> Add Link
+                    </button>
                 </div>
             </div>
 
@@ -60,6 +63,9 @@
                 <a href="#" class="nav-item" id="navStarred">
                     <i class="ph-fill ph-star"></i> Starred
                 </a>
+                <a href="#" class="nav-item" id="navLinks">
+                    <i class="ph-fill ph-link"></i> Links
+                </a>
             </nav>
 
             <div class="sidebar-bottom">
@@ -113,6 +119,14 @@
                     <h2>Files</h2>
                 </div>
                 <div class="grid-container" id="filesContainer"></div>
+
+                <!-- Links Section -->
+                <div id="linksSection" style="display:none;">
+                    <div class="section-header mt-8">
+                        <h2>Your Links</h2>
+                    </div>
+                    <div class="links-container" id="linksContainer"></div>
+                </div>
             </div>
         </main>
     </div>
@@ -165,6 +179,30 @@
         </div>
     </div>
 
+    <!-- Add Link Modal -->
+    <div class="modal-overlay" id="addLinkModal">
+        <div class="modal glass-panel" style="max-width:500px">
+            <button class="close-modal" id="closeAddLinkModal"><i class="ph-bold ph-x"></i></button>
+            <h3><i class="ph-fill ph-link-plus" style="color:var(--primary-color);margin-right:10px"></i>Add Link</h3>
+            <div class="input-group">
+                <label class="input-label">URL *</label>
+                <input type="url" id="linkUrlInput" placeholder="https://example.com" autocomplete="off">
+            </div>
+            <div class="input-group">
+                <label class="input-label">Title</label>
+                <input type="text" id="linkTitleInput" placeholder="Link title..." autocomplete="off">
+            </div>
+            <div class="input-group">
+                <label class="input-label">Description</label>
+                <textarea id="linkDescriptionInput" placeholder="Add notes about this link..." rows="3"></textarea>
+            </div>
+            <div class="modal-footer">
+                <button class="btn-secondary" id="cancelLinkBtn">Cancel</button>
+                <button class="btn-primary" id="confirmLinkBtn"><i class="ph-fill ph-check"></i> Add Link</button>
+            </div>
+        </div>
+    </div>
+
 
 
     <!-- Preview Modal -->

js/main.js

@@ -89,6 +89,15 @@ class App {
       this.state.setBrowseMode('starred');
       this.render();
     };
+    document.getElementById('navLinks').onclick = (e) => {
+      e.preventDefault();
+      this.state.setBrowseMode('links');
+      this.fetchAndRenderLinks();
+      this.updateActiveNavItem();
+      document.getElementById('contentArea').innerHTML = '';
+      document.getElementById('linksSection').style.display = 'block';
+      document.getElementById('breadcrumbs').innerHTML = '<span class="breadcrumb-item active">Links</span>';
+    };
 
     // View Toggles
     document.getElementById('viewGrid').onclick = () => this.state.setViewMode('grid');
@@ -123,6 +132,13 @@ class App {
       document.getElementById('folderNameInput').value = '';
       document.getElementById('folderNameInput').focus();
     };
+    document.getElementById('addLinkBtn').onclick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      document.getElementById('newDropdown').classList.remove('active');
+      document.getElementById('addLinkModal').classList.add('active');
+      document.getElementById('linkUrlInput').focus();
+    };
 
     // File Input
     document.getElementById('fileInput').onchange = (e) => {
@@ -161,6 +177,15 @@ class App {
       if (e.key === 'Enter') this.renameItem();
       if (e.key === 'Escape') document.getElementById('renameModal').classList.remove('active');
     });
+
+    // Add Link Modal
+    document.getElementById('confirmLinkBtn').onclick = () => this.addLink();
+    document.getElementById('cancelLinkBtn').onclick = () => document.getElementById('addLinkModal').classList.remove('active');
+
+    // Enter on link URL input
+    document.getElementById('linkUrlInput').addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') document.getElementById('linkTitleInput').focus();
+    });
     document.addEventListener('click', () => {
       document.getElementById('newDropdown').classList.remove('active');
       // Close all dropdown menus
@@ -338,10 +363,13 @@ class App {
     const items = {
       files: 'navMyFiles',
       recent: 'navRecent',
-      starred: 'navStarred'
+      starred: 'navStarred',
+      links: 'navLinks'
     };
     Object.values(items).forEach(id => document.getElementById(id).classList.remove('active'));
-    document.getElementById(items[this.state.currentBrowse]).classList.add('active');
+    if (items[this.state.currentBrowse]) {
+      document.getElementById(items[this.state.currentBrowse]).classList.add('active');
+    }
   }
 
   async uploadFiles(fileList) {
@@ -698,6 +726,153 @@ class App {
       this.ui.showToast(err.message || 'Failed to load history', 'error');
     }
   }
+
+  // =================== LINKS MANAGEMENT ===================
+
+  async fetchAndRenderLinks() {
+    try {
+      const response = await fetch(`${this.hf.apiBase}/links/list`, {
+        headers: { 'X-User-ID': 'default_user' }
+      });
+      const data = await response.json();
+      if (data.success) {
+        this.renderLinks(data.links || []);
+      } else {
+        this.ui.showToast('Failed to load links', 'error');
+      }
+    } catch (err) {
+      console.error('Fetch links error:', err);
+    }
+  }
+
+  renderLinks(links) {
+    const linksSection = document.getElementById('linksSection');
+    const linksContainer = document.getElementById('linksContainer');
+    
+    if (!linksContainer) return;
+
+    linksSection.style.display = links.length > 0 ? 'block' : 'none';
+
+    if (links.length === 0) {
+      linksContainer.innerHTML = `
+        <div class="links-empty">
+          <i class="ph-fill ph-link"></i>
+          <h3>No links yet</h3>
+          <p>Add your first link to get started</p>
+        </div>
+      `;
+      return;
+    }
+
+    linksContainer.innerHTML = links.map(link => `
+      <div class="link-card">
+        <div class="link-card-header">
+          <div class="link-icon">
+            <i class="ph-fill ph-link"></i>
+          </div>
+          <div style="flex: 1;">
+            <div class="link-title">${this.escapeHtml(link.title || link.url)}</div>
+            <a href="${this.escapeHtml(link.url)}" target="_blank" class="link-url" title="${this.escapeHtml(link.url)}">
+              ${this.escapeHtml(link.url)}
+            </a>
+          </div>
+        </div>
+        ${link.description ? `<div class="link-description">${this.escapeHtml(link.description)}</div>` : ''}
+        <div class="link-actions">
+          <a href="${this.escapeHtml(link.url)}" target="_blank" class="link-action-btn">
+            <i class="ph-fill ph-arrow-up-right"></i> Open
+          </a>
+          <button class="link-action-btn delete" data-link-id="${link.id}">
+            <i class="ph-fill ph-trash"></i> Delete
+          </button>
+        </div>
+      </div>
+    `).join('');
+
+    // Add delete event listeners
+    linksContainer.querySelectorAll('.link-action-btn.delete').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        const linkId = btn.dataset.linkId;
+        this.deleteLink(linkId);
+      });
+    });
+  }
+
+  async deleteLink(linkId) {
+    if (!confirm('Are you sure you want to delete this link?')) return;
+
+    try {
+      const response = await fetch(`${this.hf.apiBase}/links/delete`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-User-ID': 'default_user'
+        },
+        body: JSON.stringify({ link_id: linkId })
+      });
+      const data = await response.json();
+      if (data.success) {
+        this.ui.showToast('Link deleted', 'success');
+        this.fetchAndRenderLinks();
+      } else {
+        this.ui.showToast(data.error || 'Failed to delete link', 'error');
+      }
+    } catch (err) {
+      console.error('Delete link error:', err);
+      this.ui.showToast('Error deleting link', 'error');
+    }
+  }
+
+  async addLink() {
+    const url = document.getElementById('linkUrlInput').value.trim();
+    const title = document.getElementById('linkTitleInput').value.trim();
+    const description = document.getElementById('linkDescriptionInput').value.trim();
+
+    if (!url) {
+      this.ui.showToast('URL is required', 'error');
+      return;
+    }
+
+    try {
+      this.ui.showProgress('Adding link...');
+      const response = await fetch(`${this.hf.apiBase}/links/add`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-User-ID': 'default_user'
+        },
+        body: JSON.stringify({
+          url,
+          title,
+          description
+        })
+      });
+      const data = await response.json();
+      this.ui.hideProgress();
+
+      if (data.success) {
+        this.ui.showToast('Link added successfully', 'success');
+        document.getElementById('addLinkModal').classList.remove('active');
+        document.getElementById('linkUrlInput').value = '';
+        document.getElementById('linkTitleInput').value = '';
+        document.getElementById('linkDescriptionInput').value = '';
+        this.fetchAndRenderLinks();
+      } else {
+        this.ui.showToast(data.error || 'Failed to add link', 'error');
+      }
+    } catch (err) {
+      console.error('Add link error:', err);
+      this.ui.hideProgress();
+      this.ui.showToast('Error adding link', 'error');
+    }
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
 }
 
 new App();

server/routes/api.py

@@ -276,6 +276,80 @@ def restore_version():
         return jsonify({"success": False, "error": str(exc)}), 500
 
 
+@api_bp.route("/links/add", methods=["POST"])
+def add_link():
+    try:
+        user_id = get_user_id_from_request()
+        data = request.get_json(silent=True) or {}
+        url = (data.get("url") or "").strip()
+        title = (data.get("title") or "").strip()
+        description = (data.get("description") or "").strip()
+
+        if not url:
+            return jsonify({"success": False, "error": "url is required"}), 400
+
+        # Validate URL format
+        if not (url.startswith("http://") or url.startswith("https://")):
+            return jsonify({"success": False, "error": "Invalid URL format"}), 400
+
+        if not title:
+            title = url
+
+        result = _storage().add_link(user_id, url, title, description)
+        return jsonify(result), 201 if result.get("success") else 400
+    except Exception as exc:
+        logger.error("add_link failed: %s", exc, exc_info=True)
+        return jsonify({"success": False, "error": str(exc)}), 500
+
+
+@api_bp.route("/links/list", methods=["GET"])
+def list_links():
+    try:
+        user_id = get_user_id_from_request()
+        result = _storage().get_links(user_id)
+        return jsonify(result), 200 if result.get("success") else 400
+    except Exception as exc:
+        logger.error("list_links failed: %s", exc, exc_info=True)
+        return jsonify({"success": False, "error": str(exc)}), 500
+
+
+@api_bp.route("/links/delete", methods=["POST"])
+def delete_link():
+    try:
+        user_id = get_user_id_from_request()
+        data = request.get_json(silent=True) or {}
+        link_id = (data.get("link_id") or "").strip()
+
+        if not link_id:
+            return jsonify({"success": False, "error": "link_id is required"}), 400
+
+        result = _storage().delete_link(user_id, link_id)
+        return jsonify(result), 200 if result.get("success") else 400
+    except Exception as exc:
+        logger.error("delete_link failed: %s", exc, exc_info=True)
+        return jsonify({"success": False, "error": str(exc)}), 500
+
+
+@api_bp.route("/links/update", methods=["POST"])
+def update_link():
+    try:
+        user_id = get_user_id_from_request()
+        data = request.get_json(silent=True) or {}
+        link_id = (data.get("link_id") or "").strip()
+        url = (data.get("url") or "").strip()
+        title = (data.get("title") or "").strip()
+        description = (data.get("description") or "").strip()
+
+        if not link_id:
+            return jsonify({"success": False, "error": "link_id is required"}), 400
+
+        result = _storage().update_link(user_id, link_id, url, title, description)
+        return jsonify(result), 200 if result.get("success") else 400
+    except Exception as exc:
+        logger.error("update_link failed: %s", exc, exc_info=True)
+        return jsonify({"success": False, "error": str(exc)}), 500
+
+
 @api_bp.errorhandler(404)
 def not_found(error):
     return jsonify({"success": False, "error": "Endpoint not found"}), 404

server/storage/hf.py

@@ -499,3 +499,243 @@ class HuggingFaceStorageManager(StorageInterface):
                 "path": destination_relative_path,
             },
         }
+
+    def add_link(
+        self, user_id: str, url: str, title: str, description: str = ""
+    ) -> Dict[str, Any]:
+        import json
+        import uuid
+
+        self._ensure_token()
+
+        try:
+            # Get existing links
+            links_repo_path = self._user_repo_path(user_id, ".links/data.json")
+            repo_files = self._list_repo_files()
+            
+            links = []
+            if links_repo_path in repo_files:
+                try:
+                    content = self.api.hf_hub_download(
+                        repo_id=config.HF_REPO_ID,
+                        filename=links_repo_path,
+                        repo_type=config.HF_REPO_TYPE,
+                    )
+                    with open(content, 'r') as f:
+                        links = json.load(f)
+                except Exception as e:
+                    logger.warning(f"Failed to load existing links: {e}")
+                    links = []
+
+            # Add new link
+            link_id = str(uuid.uuid4())
+            new_link = {
+                "id": link_id,
+                "url": url,
+                "title": title,
+                "description": description,
+                "created_at": self._timestamp(),
+                "updated_at": self._timestamp(),
+            }
+            links.append(new_link)
+
+            # Save links
+            operations = [
+                CommitOperationAdd(
+                    path_in_repo=links_repo_path,
+                    path_or_fileobj=json.dumps(links, indent=2),
+                )
+            ]
+            self.api.create_commit(
+                repo_id=config.HF_REPO_ID,
+                repo_type=config.HF_REPO_TYPE,
+                operations=operations,
+                commit_message=f"Add link: {title}",
+            )
+
+            return {
+                "success": True,
+                "message": "Link added successfully",
+                "link": new_link,
+            }
+        except Exception as exc:
+            logger.error(f"add_link failed: {exc}", exc_info=True)
+            return {
+                "success": False,
+                "error": str(exc),
+            }
+
+    def get_links(self, user_id: str) -> Dict[str, Any]:
+        import json
+
+        try:
+            links_repo_path = self._user_repo_path(user_id, ".links/data.json")
+            repo_files = self._list_repo_files()
+            
+            if links_repo_path not in repo_files:
+                return {
+                    "success": True,
+                    "links": [],
+                }
+
+            try:
+                content = self.api.hf_hub_download(
+                    repo_id=config.HF_REPO_ID,
+                    filename=links_repo_path,
+                    repo_type=config.HF_REPO_TYPE,
+                )
+                with open(content, 'r') as f:
+                    links = json.load(f)
+                return {
+                    "success": True,
+                    "links": links,
+                }
+            except Exception as e:
+                logger.warning(f"Failed to load links: {e}")
+                return {
+                    "success": True,
+                    "links": [],
+                }
+        except Exception as exc:
+            logger.error(f"get_links failed: {exc}", exc_info=True)
+            return {
+                "success": False,
+                "error": str(exc),
+                "links": [],
+            }
+
+    def delete_link(self, user_id: str, link_id: str) -> Dict[str, Any]:
+        import json
+
+        self._ensure_token()
+
+        try:
+            links_repo_path = self._user_repo_path(user_id, ".links/data.json")
+            repo_files = self._list_repo_files()
+            
+            if links_repo_path not in repo_files:
+                return {
+                    "success": False,
+                    "error": "No links found",
+                }
+
+            try:
+                content = self.api.hf_hub_download(
+                    repo_id=config.HF_REPO_ID,
+                    filename=links_repo_path,
+                    repo_type=config.HF_REPO_TYPE,
+                )
+                with open(content, 'r') as f:
+                    links = json.load(f)
+            except Exception as e:
+                logger.warning(f"Failed to load links: {e}")
+                return {
+                    "success": False,
+                    "error": "Failed to load links",
+                }
+
+            # Remove link by ID
+            links = [link for link in links if link.get("id") != link_id]
+
+            # Save updated links
+            operations = [
+                CommitOperationAdd(
+                    path_in_repo=links_repo_path,
+                    path_or_fileobj=json.dumps(links, indent=2),
+                )
+            ]
+            self.api.create_commit(
+                repo_id=config.HF_REPO_ID,
+                repo_type=config.HF_REPO_TYPE,
+                operations=operations,
+                commit_message=f"Delete link: {link_id}",
+            )
+
+            return {
+                "success": True,
+                "message": "Link deleted successfully",
+            }
+        except Exception as exc:
+            logger.error(f"delete_link failed: {exc}", exc_info=True)
+            return {
+                "success": False,
+                "error": str(exc),
+            }
+
+    def update_link(
+        self, user_id: str, link_id: str, url: str = "", title: str = "", description: str = ""
+    ) -> Dict[str, Any]:
+        import json
+
+        self._ensure_token()
+
+        try:
+            links_repo_path = self._user_repo_path(user_id, ".links/data.json")
+            repo_files = self._list_repo_files()
+            
+            if links_repo_path not in repo_files:
+                return {
+                    "success": False,
+                    "error": "No links found",
+                }
+
+            try:
+                content = self.api.hf_hub_download(
+                    repo_id=config.HF_REPO_ID,
+                    filename=links_repo_path,
+                    repo_type=config.HF_REPO_TYPE,
+                )
+                with open(content, 'r') as f:
+                    links = json.load(f)
+            except Exception as e:
+                logger.warning(f"Failed to load links: {e}")
+                return {
+                    "success": False,
+                    "error": "Failed to load links",
+                }
+
+            # Update link by ID
+            updated = False
+            for link in links:
+                if link.get("id") == link_id:
+                    if url:
+                        link["url"] = url
+                    if title:
+                        link["title"] = title
+                    if description or description == "":
+                        link["description"] = description
+                    link["updated_at"] = self._timestamp()
+                    updated = True
+                    break
+
+            if not updated:
+                return {
+                    "success": False,
+                    "error": "Link not found",
+                }
+
+            # Save updated links
+            operations = [
+                CommitOperationAdd(
+                    path_in_repo=links_repo_path,
+                    path_or_fileobj=json.dumps(links, indent=2),
+                )
+            ]
+            self.api.create_commit(
+                repo_id=config.HF_REPO_ID,
+                repo_type=config.HF_REPO_TYPE,
+                operations=operations,
+                commit_message=f"Update link: {link_id}",
+            )
+
+            return {
+                "success": True,
+                "message": "Link updated successfully",
+                "link": next(link for link in links if link.get("id") == link_id),
+            }
+        except Exception as exc:
+            logger.error(f"update_link failed: {exc}", exc_info=True)
+            return {
+                "success": False,
+                "error": str(exc),
+            }

server/storage/interface.py

@@ -63,6 +63,26 @@ class StorageInterface(ABC):
     ) -> Dict[str, Any]:
         pass
 
+    @abstractmethod
+    def add_link(
+        self, user_id: str, url: str, title: str, description: str = ""
+    ) -> Dict[str, Any]:
+        pass
+
+    @abstractmethod
+    def get_links(self, user_id: str) -> Dict[str, Any]:
+        pass
+
+    @abstractmethod
+    def delete_link(self, user_id: str, link_id: str) -> Dict[str, Any]:
+        pass
+
+    @abstractmethod
+    def update_link(
+        self, user_id: str, link_id: str, url: str = "", title: str = "", description: str = ""
+    ) -> Dict[str, Any]:
+        pass
+
     def standardize_file(
         self,
         name: str,

server/storage/local.py

@@ -49,3 +49,15 @@ class LocalStorageManager(StorageInterface):
 
     def restore(self, user_id, path, revision, as_copy=False):
         raise RuntimeError("Local storage is disabled.")
+
+    def add_link(self, user_id, url, title, description=""):
+        raise RuntimeError("Local storage is disabled.")
+
+    def get_links(self, user_id):
+        raise RuntimeError("Local storage is disabled.")
+
+    def delete_link(self, user_id, link_id):
+        raise RuntimeError("Local storage is disabled.")
+
+    def update_link(self, user_id, link_id, url="", title="", description=""):
+        raise RuntimeError("Local storage is disabled.")

styles.css

@@ -174,6 +174,10 @@ body {
   color: var(--file-color);
 }
 
+.new-dropdown-item .ph-link-plus {
+  color: #3b82f6;
+}
+
 /* ── SIDEBAR NAV ── */
 .sidebar-nav {
   display: flex;
@@ -1661,3 +1665,172 @@ body {
   color: var(--text-muted);
   font-size: 13px;
 }
+
+/* ── LINKS SECTION ── */
+.links-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.link-card {
+  background: var(--card);
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  padding: 18px;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  animation: cardFadeIn 0.4s ease-out forwards;
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.link-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--primary-color);
+}
+
+.link-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.link-icon {
+  width: 40px;
+  height: 40px;
+  background: var(--primary-light);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--primary-color);
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.link-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-main);
+  word-break: break-word;
+  line-height: 1.3;
+}
+
+.link-url {
+  font-size: 12px;
+  color: var(--primary-color);
+  word-break: break-all;
+  text-decoration: none;
+  line-height: 1.4;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.link-description {
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.link-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-color);
+}
+
+.link-action-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: var(--hover-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-decoration: none;
+}
+
+.link-action-btn:hover {
+  background: var(--primary-light);
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.link-action-btn.delete:hover {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--danger-color);
+  border-color: var(--danger-color);
+}
+
+.links-empty {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--text-muted);
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.links-empty i {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.6;
+  animation: bounceIn 0.8s ease-out;
+}
+
+.links-empty h3 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text-main);
+}
+
+.links-empty p {
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.input-group textarea {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid var(--border-color);
+  border-radius: 12px;
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--text-main);
+  background: var(--bg-color);
+  outline: none;
+  resize: vertical;
+  transition: all 0.2s ease;
+}
+
+.input-group textarea:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
+}