Update app.py

app.py

@@ -207,6 +207,9 @@ def build_story_outputs():
     return outputs
 
 
+# =========================================================
+# PAGINATION CONFIG
+# =========================================================
 # =========================================================
 # PAGINATION CONFIG
 # =========================================================
@@ -348,33 +351,6 @@ body, .gradio-container {
   font-size: 24px !important;
 }
 
-.pagination-wrap {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  margin: 0 0 22px 0;
-  flex-wrap: wrap;
-  width: 100%;
-}
-
-.page-indicator {
-  background: white;
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  padding: 10px 16px;
-  box-shadow: var(--shadow);
-  color: var(--text);
-  font-weight: 600;
-}
-
-.page-btn button,
-.page-btn > button {
-  border-radius: 16px !important;
-  min-width: 120px !important;
-  height: 44px !important;
-}
-
 .stories-list {
   display: flex;
   flex-direction: column;
@@ -485,6 +461,33 @@ body, .gradio-container {
   border-radius: 16px !important;
 }
 
+.pagination-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  margin: 10px 0 40px 0;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.page-indicator {
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 10px 16px;
+  box-shadow: var(--shadow);
+  color: var(--text);
+  font-weight: 600;
+}
+
+.page-btn button,
+.page-btn > button {
+  border-radius: 16px !important;
+  min-width: 120px !important;
+  height: 44px !important;
+}
+
 .empty-state {
   background: rgba(255,255,255,0.025);
   border: 1px dashed var(--border);
@@ -566,10 +569,6 @@ def build_story_outputs(page=1):
             gr.update(value="Page 1 of 1"),
             gr.update(interactive=False),
             gr.update(interactive=False),
-
-            gr.update(value="Page 1 of 1"),
-            gr.update(interactive=False),
-            gr.update(interactive=False),
         ]
 
         for _ in range(STORIES_PER_PAGE):
@@ -604,12 +603,7 @@ def build_story_outputs(page=1):
     outputs = [
         gr.update(value=hero_html),
 
-        # Top pagination
-        gr.update(value=f"Page {page} of {total_pages}"),
-        gr.update(interactive=page > 1),
-        gr.update(interactive=page < total_pages),
-
-        # Bottom pagination
+        # Bottom pagination only
         gr.update(value=f"Page {page} of {total_pages}"),
         gr.update(interactive=page > 1),
         gr.update(interactive=page < total_pages),
@@ -697,8 +691,6 @@ with gr.Blocks(
             hero_html = gr.HTML()
             refresh_btn = gr.Button("↻", variant="secondary", elem_classes=["hero-refresh"], scale=0)
 
-        
-
         with gr.Column(elem_classes=["stories-list"]):
             card_components = []
 
@@ -739,7 +731,7 @@ with gr.Blocks(
                     gallery_comp,
                 ])
 
-        # BOTTOM pagination
+        # BOTTOM pagination only
         with gr.Row(elem_classes=["pagination-wrap"]):
             prev_btn_bottom = gr.Button("← Previous", variant="secondary", elem_classes=["page-btn"], scale=0)
             page_info_bottom = gr.Markdown("Page 1 of 1", elem_classes=["page-indicator"])
@@ -747,11 +739,6 @@ with gr.Blocks(
 
     all_outputs = [
         hero_html,
-
-        page_info,
-        prev_btn,
-        next_btn,
-
         page_info_bottom,
         prev_btn_bottom,
         next_btn_bottom,
@@ -769,18 +756,6 @@ with gr.Blocks(
         outputs=[page_state] + all_outputs,
     )
 
-    prev_btn.click(
-        fn=go_prev_page,
-        inputs=[page_state],
-        outputs=[page_state] + all_outputs,
-    )
-
-    next_btn.click(
-        fn=go_next_page,
-        inputs=[page_state],
-        outputs=[page_state] + all_outputs,
-    )
-
     prev_btn_bottom.click(
         fn=go_prev_page,
         inputs=[page_state],