wip

app/core/models.py

@@ -92,6 +92,7 @@ class App(db.Model):
     name = db.Column(db.String(64), nullable=False)
     server_id = db.Column(db.Integer, db.ForeignKey("servers.id"), nullable=False)
     documentation = db.Column(db.Text)
+    url = db.Column(db.String(255), nullable=True)
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
     updated_at = db.Column(
         db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow

app/routes/dashboard.py

@@ -229,6 +229,7 @@ def app_new(server_id=None):
         name = request.form.get("name")
         server_id = request.form.get("server_id")
         documentation = request.form.get("documentation", "")
+        url = request.form.get("url", "")  # Get the URL
 
         if not name or not server_id:
             flash("Name and server are required", "danger")
@@ -240,8 +241,8 @@ def app_new(server_id=None):
                 selected_server_id=server_id,
             )
 
-        # Create the app
+        # Create the app with the URL
-        app = App(name=name, server_id=server_id, documentation=documentation)
+        app = App(name=name, server_id=server_id, documentation=documentation, url=url)
 
         try:
             db.session.add(app)
@@ -309,6 +310,7 @@ def app_edit(app_id):
         name = request.form.get("name", "").strip()
         server_id = request.form.get("server_id")
         documentation = request.form.get("documentation", "")
+        url = request.form.get("url", "")  # Get the URL
 
         # Process port data from form
         port_data = []
@@ -326,6 +328,12 @@ def app_edit(app_id):
         valid, error = validate_app_data(name, server_id, existing_app_id=app_id)
 
         if valid:
+            # Update application with URL
+            app.name = name
+            app.server_id = server_id
+            app.documentation = documentation
+            app.url = url
+
             # Update application
             from app.utils.app_utils import save_app
 

app/static/css/custom.css

@@ -53,3 +53,124 @@
   background-color: #d63939;
   color: white;
 }
+
+/* Markdown content styling */
+.markdown-content.theme-styled {
+  color: var(--tblr-body-color);
+  background-color: var(--tblr-card-bg);
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+[data-bs-theme="dark"] .markdown-content.theme-styled {
+  color: #e1e3e6;
+}
+
+.markdown-content.theme-styled h1,
+.markdown-content.theme-styled h2,
+.markdown-content.theme-styled h3,
+.markdown-content.theme-styled h4,
+.markdown-content.theme-styled h5,
+.markdown-content.theme-styled h6 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  color: var(--tblr-primary);
+  font-weight: 600;
+}
+
+.markdown-content.theme-styled h1:first-child,
+.markdown-content.theme-styled h2:first-child,
+.markdown-content.theme-styled h3:first-child {
+  margin-top: 0;
+}
+
+.markdown-content.theme-styled p {
+  margin-bottom: 1rem;
+  line-height: 1.6;
+}
+
+.markdown-content.theme-styled a {
+  color: var(--tblr-primary);
+  text-decoration: none;
+  border-bottom: 1px dotted var(--tblr-primary);
+}
+
+.markdown-content.theme-styled a:hover {
+  border-bottom: 1px solid var(--tblr-primary);
+}
+
+.markdown-content.theme-styled ul,
+.markdown-content.theme-styled ol {
+  margin-bottom: 1rem;
+  padding-left: 2rem;
+}
+
+.markdown-content.theme-styled code {
+  padding: 0.2em 0.4em;
+  background-color: rgba(var(--tblr-primary-rgb), 0.08);
+  border-radius: 3px;
+  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 0.9em;
+}
+
+.markdown-content.theme-styled pre {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background-color: var(--tblr-dark);
+  border-radius: 0.375rem;
+  overflow-x: auto;
+}
+
+[data-bs-theme="dark"] .markdown-content.theme-styled pre {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.markdown-content.theme-styled pre code {
+  padding: 0;
+  background-color: transparent;
+  color: #e1e3e6;
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+.markdown-content.theme-styled blockquote {
+  margin-left: 0;
+  padding: 0.5rem 1rem;
+  border-left: 4px solid var(--tblr-primary);
+  background-color: rgba(var(--tblr-primary-rgb), 0.05);
+  color: var(--tblr-secondary);
+}
+
+.markdown-content.theme-styled table {
+  width: 100%;
+  margin-bottom: 1rem;
+  border-collapse: collapse;
+}
+
+.markdown-content.theme-styled table th,
+.markdown-content.theme-styled table td {
+  padding: 0.5rem;
+  border: 1px solid var(--tblr-border-color);
+}
+
+.markdown-content.theme-styled table th {
+  background-color: rgba(var(--tblr-primary-rgb), 0.1);
+}
+
+.app-link {
+  display: inline-flex;
+  align-items: center;
+  transition: color 0.2s;
+}
+
+.app-link:hover {
+  color: var(--tblr-primary-active) !important;
+}
+
+.documentation-wrapper {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+[data-bs-theme="light"] .documentation-wrapper {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}

app/templates/dashboard/app_form.html

@@ -53,6 +53,20 @@
           <small class="form-hint">Choose a unique name for this application</small>
         </div>
 
+        <div class="mb-3">
+          <label class="form-label">Application URL (Optional)</label>
+          <div class="input-group">
+            <span class="input-group-text">
+              <span class="ti ti-link"></span>
+            </span>
+            <input type="url" class="form-control" name="url" id="url" value="{{ app.url if app else '' }}"
+              placeholder="https://example.com">
+          </div>
+          <small class="form-hint">
+            If provided, the application name will be clickable and link to this URL.
+          </small>
+        </div>
+
         <div class="mb-3">
           <label class="form-label required">Server</label>
           <select class="form-select" name="server_id" required>

app/templates/dashboard/server_view.html

@@ -131,55 +131,56 @@
           {% if server.apps %}
           <div class="accordion" id="applicationAccordion">
             {% for app in server.apps %}
-            <div class="accordion-item">
+            <div class="accordion-item bg-dark-subtle rounded-3 mb-3">
-              <h2 class="accordion-header" id="heading-{{ app.id }}">
+              <h2 class="accordion-header" id="app-heading-{{ app.id }}">
-                <button class="accordion-button {% if server.apps|length > 1 %}collapsed{% endif %}" type="button"
+                <button class="accordion-button collapsed bg-dark-subtle text-white" type="button"
-                  data-bs-toggle="collapse" data-bs-target="#collapse-{{ app.id }}"
+                  data-bs-toggle="collapse" data-bs-target="#app-collapse-{{ app.id }}" aria-expanded="false"
-                  aria-expanded="{% if server.apps|length == 1 %}true{% else %}false{% endif %}"
+                  aria-controls="app-collapse-{{ app.id }}">
-                  aria-controls="collapse-{{ app.id }}">
+                  <span class="me-2">{{ app.name }}</span>
-                  <div class="d-flex align-items-center justify-content-between w-100">
-                    <span>{{ app.name }}</span>
-                    <div class="app-ports-badges d-flex flex-wrap ms-2" onclick="event.stopPropagation();">
                   {% for port in app.ports %}
-                      <span class="badge bg-blue me-1">{{ port.port_number }}/{{ port.protocol }}</span>
+                  <span class="badge bg-primary mx-1">{{ port.number }}/{{ port.protocol }}</span>
                   {% endfor %}
-                    </div>
-                  </div>
                 </button>
               </h2>
-              <div id="collapse-{{ app.id }}"
+              <div id="app-collapse-{{ app.id }}" class="accordion-collapse collapse"
-                class="accordion-collapse collapse {% if server.apps|length == 1 %}show{% endif %}"
+                aria-labelledby="app-heading-{{ app.id }}">
-                aria-labelledby="heading-{{ app.id }}" data-bs-parent="#applicationAccordion">
+                <div class="accordion-body p-0">
-                <div class="accordion-body">
+                  <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
-                  <div class="d-flex justify-content-between mb-3">
+                    <div class="app-title">
-                    <h4>{{ app.name }}</h4>
+                      {% if app.url %}
-                    <div class="btn-list">
+                      <a href="{{ app.url }}" target="_blank" class="app-link text-primary fw-bold">
-                      <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}"
+                        {{ app.name }} <span class="ti ti-external-link text-muted fs-6 ms-1"></span>
-                        class="btn btn-sm btn-outline-primary">
+                      </a>
+                      {% else %}
+                      <span class="fw-bold">{{ app.name }}</span>
+                      {% endif %}
+                    </div>
+                    <div class="app-actions">
+                      <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-sm btn-primary">
                         <span class="ti ti-eye"></span> View
                       </a>
-                      <a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}"
+                      <a href="{{ url_for('dashboard.app_edit', app_id=app.id) }}" class="btn btn-sm btn-secondary">
-                        class="btn btn-sm btn-outline-secondary">
                         <span class="ti ti-edit"></span> Edit
                       </a>
-                      <button class="btn btn-sm btn-outline-danger" onclick="deleteApp({{ app.id }}, '{{ app.name }}')">
+                      <button type="button" class="btn btn-sm btn-danger"
+                        onclick="deleteApp({{ app.id }}, '{{ app.name }}')">
                         <span class="ti ti-trash"></span> Delete
                       </button>
                     </div>
                   </div>
 
-                  <!-- Documentation preview -->
+                  <!-- Documentation section with improved styling -->
+                  <div class="documentation-wrapper p-3">
+                    <div class="markdown-content theme-styled">
                       {% if app.documentation %}
-                  <div class="mt-3">
+                      {{ app.documentation|markdown|safe }}
-                    <h5>Documentation</h5>
+                      {% else %}
-                    <div class="markdown-content card p-3 bg-light">
+                      <div class="empty-documentation">
-                      {{ (app.documentation | truncate(200, true, "..."))|markdown|safe }}
+                        <p class="text-muted">No documentation available for this application.</p>
-                      {% if app.documentation | length > 200 %}
+                      </div>
-                      <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="mt-2 d-block">Read more...</a>
                       {% endif %}
                     </div>
                   </div>
-                  {% endif %}
                 </div>
               </div>
             </div>