Add sorting by favorites and refactor Gradio Blocks for improved layout and interactivity

app.py

@@ -54,6 +54,8 @@ def get_shortcuts_dataframe(sort_by='Recently Added', search_query='', filter_ta
         datafra = datafra.sort_values('name')
     elif sort_by == 'Recently Added':
         datafra = datafra.sort_values('date_added', ascending=False)
+    elif sort_by == 'Favorites':
+        datafra = datafra.sort_values('favorited')
     # Reset index
     datafra = datafra.reset_index(drop=True)
     return datafra
@@ -113,59 +115,38 @@ def toggle_favorite(index):
 load_shortcuts()
 
 # Build the Gradio App
-with gr.Blocks(js="""
-    <script>
-    function togglePin(idx) {
-        fetch('/toggle_pin', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({'index': idx})
-        }).then(response => response.json()).then(data => {
-            const gridOutput = document.querySelector('#grid_output');
-            gridOutput.innerHTML = data['grid_html'];
-        });
-    }
-    function toggleFavorite(idx) {
-        fetch('/toggle_favorite', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({'index': idx})
-        }).then(response => response.json()).then(data => {
-            const gridOutput = document.querySelector('#grid_output');
-            gridOutput.innerHTML = data['grid_html'];
-        });
-    }
-    </script>
-    """) as demo:
-    gr.Markdown("## Add a New Website Shortcut")
-    with gr.Row():
-        name = gr.Textbox(label="Name")
-        link = gr.Textbox(label="Link")
-    with gr.Row():
-        tags = gr.Textbox(label="Tags (separate levels with '/')")
-        emojis = gr.Textbox(label="Emojis")
-    with gr.Row():
-        color_from = gr.ColorPicker(label="Gradient Color From")
-        color_to = gr.ColorPicker(label="Gradient Color To")
-    short_description = gr.Textbox(label="Short Description")
-    add_button = gr.Button("Add Shortcut")
-    # Output component for the updated grid
-    grid_output = gr.HTML(elem_id="grid_output")
+with gr.Blocks(theme='charbelgrower/Crystal') as demo:
     
     # Actions for filters
-    gr.Markdown("## Website Shortcuts")
+    gr.Label("Website Shortcuts")
     with gr.Row():
         search_bar = gr.Textbox(label="Search")
-        sort_options = gr.Dropdown(choices=['Recently Added', 'Alphabetical'], label="Sort By", value='Recently Added')
+        sort_options = gr.Dropdown(choices=['Recently Added', 'Alphabetical', 'Favorites'], label="Sort By", value='Recently Added')
     # Collect all unique tags
     def get_all_tags():
         return list(set(tag for shortcut in shortcuts_list for tag in shortcut['tags']))
     filter_tags = gr.CheckboxGroup(choices=get_all_tags(), label="Filter Tags")
     
+
+    grid_output = gr.HTML(elem_id="grid_output")
+
+    gr.Markdown("## Add a New Website Shortcut")
+    with gr.Row():
+        name = gr.Textbox(label="Name")
+        link = gr.Textbox(label="Link")
+    with gr.Row():
+        with gr.Column():
+            tags = gr.Textbox(label="Tags (separate levels with '/')")
+        with gr.Column():
+            emojis = gr.Textbox(label="Emojis")
+        with gr.Column():
+            color_from = gr.ColorPicker(label="Gradient Color From")
+        with gr.Column():
+            color_to = gr.ColorPicker(label="Gradient Color To")
+    short_description = gr.Textbox(label="Short Description")
+    add_button = gr.Button("Add Shortcut")
+    # Output component for the updated grid
+  
     # Update display when filters change
     def refresh_display(sort_by, search_query, filter_tags):
         return update_display(sort_by, search_query, filter_tags)
@@ -185,9 +166,36 @@ with gr.Blocks(js="""
     grid_output.value = update_display()
     
     # JavaScript functions for interactivity
-    
+    custom_js = """
+    <script>
+    function togglePin(idx) {
+        fetch('/toggle_pin', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({'index': idx})
+        }).then(response => response.json()).then(data => {
+            const gridOutput = document.querySelector('#grid_output');
+            gridOutput.innerHTML = data['grid_html'];
+        });
+    }
+    function toggleFavorite(idx) {
+        fetch('/toggle_favorite', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({'index': idx})
+        }).then(response => response.json()).then(data => {
+            const gridOutput = document.querySelector('#grid_output');
+            gridOutput.innerHTML = data['grid_html'];
+        });
+    }
+    </script>
+    """
     # Inject custom JavaScript
-    demo.load(fn=lambda: None, inputs=None, outputs=None)
+    demo.load(fn=lambda: None, inputs=None, outputs=None, _js=custom_js)
     
     # Expose endpoints for toggle functions
     api = FastAPI()