Create app.py

app.py

@@ -0,0 +1,275 @@
+import os
+import json
+import streamlit as st
+import streamlit.components.v1 as components
+from streamlit_javascript import st_javascript  # pip install streamlit-javascript
+
+SETTINGS_FILE = "settings.json"
+
+# --- Helper functions for persistence ---
+
+def load_settings():
+    if os.path.exists(SETTINGS_FILE):
+        with open(SETTINGS_FILE, "r") as f:
+            return json.load(f)
+    else:
+        # Create a default settings structure
+        default = {
+            "decks": [
+                {
+                    "name": "Deck 1",
+                    "columns": [
+                        {
+                            "id": 1,
+                            "title": "Column 1",
+                            "size": "medium",
+                            "order": "latest",
+                            "advanced_search": False
+                        },
+                        {
+                            "id": 2,
+                            "title": "Column 2",
+                            "size": "medium",
+                            "order": "top",
+                            "advanced_search": False
+                        },
+                        {
+                            "id": 3,
+                            "title": "Column 3",
+                            "size": "medium",
+                            "order": "latest",
+                            "advanced_search": False
+                        }
+                    ]
+                }
+            ]
+        }
+        save_settings(default)
+        return default
+
+def save_settings(settings):
+    with open(SETTINGS_FILE, "w") as f:
+        json.dump(settings, f, indent=2)
+
+def get_new_column_id(deck):
+    # Return a new id that is 1 higher than the max id in the deck’s columns
+    if deck["columns"]:
+        return max(col["id"] for col in deck["columns"]) + 1
+    else:
+        return 1
+
+# --- Initialize session state ---
+if "settings" not in st.session_state:
+    st.session_state.settings = load_settings()
+if "current_deck_index" not in st.session_state:
+    st.session_state.current_deck_index = 0
+
+def update_order(new_order):
+    # new_order is expected to be a list of column IDs (as numbers)
+    deck = st.session_state.settings["decks"][st.session_state.current_deck_index]
+    # Build a dictionary mapping id -> column
+    col_dict = {col["id"]: col for col in deck["columns"]}
+    # Reorder based on new_order list
+    new_cols = []
+    for cid in new_order:
+        # Make sure the id exists
+        if cid in col_dict:
+            new_cols.append(col_dict[cid])
+    deck["columns"] = new_cols
+    save_settings(st.session_state.settings)
+    st.success("Column order saved.")
+
+def edit_column(deck_index, col_index, new_props):
+    st.session_state.settings["decks"][deck_index]["columns"][col_index].update(new_props)
+    save_settings(st.session_state.settings)
+
+def delete_column(deck_index, col_index):
+    del st.session_state.settings["decks"][deck_index]["columns"][col_index]
+    save_settings(st.session_state.settings)
+
+def add_column(deck_index, title):
+    deck = st.session_state.settings["decks"][deck_index]
+    new_id = get_new_column_id(deck)
+    new_col = {
+        "id": new_id,
+        "title": title,
+        "size": "medium",
+        "order": "latest",
+        "advanced_search": False
+    }
+    deck["columns"].append(new_col)
+    save_settings(st.session_state.settings)
+
+# --- Sidebar: Deck selection and management ---
+st.sidebar.title("Decks Sidebar")
+decks = [deck["name"] for deck in st.session_state.settings["decks"]]
+selected_deck_name = st.sidebar.selectbox("Select a Deck", decks, index=st.session_state.current_deck_index)
+# Update current deck index based on selection
+st.session_state.current_deck_index = decks.index(selected_deck_name)
+
+# Allow adding a new deck
+with st.sidebar.expander("Manage Decks"):
+    new_deck_name = st.text_input("New deck name", key="new_deck_name")
+    if st.button("Add Deck"):
+        new_deck = {"name": new_deck_name or f"Deck {len(decks)+1}", "columns": []}
+        st.session_state.settings["decks"].append(new_deck)
+        save_settings(st.session_state.settings)
+        st.experimental_rerun()
+    st.markdown("[Change Display Settings](#)")
+    st.markdown("[Discover Keyboard Shortcuts](#)")
+    st.markdown("[Take the Tour Again](#)")
+
+# --- Main area: Display columns with drag-and-drop ---
+current_deck = st.session_state.settings["decks"][st.session_state.current_deck_index]
+st.header(f"Columns in {current_deck['name']}")
+
+# Build HTML for the draggable column list.
+# Each li includes a data-id (the column id) and displays its title.
+# On drag end, we update a global JS variable window.currentOrder.
+html_code = f"""
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
+    <style>
+      body {{
+          font-family: Arial, sans-serif;
+          margin: 0;
+          padding: 10px;
+          background-color: #fff;
+      }}
+      .column-list {{
+          list-style: none;
+          padding: 0;
+      }}
+      .column-item {{
+          padding: 10px;
+          margin: 5px 0;
+          background-color: #f0f0f0;
+          border: 1px solid #ccc;
+          cursor: grab;
+          position: relative;
+      }}
+      .drag-handle {{
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          font-size: 16px;
+          cursor: grab;
+      }}
+      .context-menu {{
+          display: none;
+          position: absolute;
+          left: 10px;
+          top: 40px;
+          background: white;
+          border: 1px solid #ccc;
+          padding: 5px;
+          z-index: 100;
+      }}
+      .column-item:hover .context-menu {{
+          display: block;
+      }}
+      .context-menu button {{
+          display: block;
+          width: 100%;
+          margin: 2px 0;
+          padding: 4px 8px;
+          font-size: 12px;
+          cursor: pointer;
+      }}
+    </style>
+  </head>
+  <body>
+    <ul id="columnList" class="column-list">
+      {"".join([f'''
+      <li class="column-item" data-id="{col["id"]}">
+        {col["title"]}
+        <span class="drag-handle">&#9776;</span>
+        <div class="context-menu">
+            <button onclick="alert('Change Column Size for {col["title"]}')">Change Column Size</button>
+            <button onclick="alert('Delete Column {col["title"]}')">Delete</button>
+            <button onclick="alert('Order by Top for {col["title"]}')">Order: Top</button>
+            <button onclick="alert('Order by Latest for {col["title"]}')">Order: Latest</button>
+            <button onclick="alert('Advanced Search Tools for {col["title"]}')">Advanced Search</button>
+        </div>
+      </li>
+      ''' for col in current_deck["columns"]])}
+    </ul>
+    <script>
+      // Initialize a global variable to capture order
+      window.currentOrder = [];
+      var el = document.getElementById('columnList');
+      var sortable = Sortable.create(el, {{
+          animation: 150,
+          onEnd: function (evt) {{
+              var order = Array.from(el.children).map(function(li) {{
+                  return parseInt(li.getAttribute('data-id'));
+              }});
+              window.currentOrder = order;
+              console.log('New order:', order);
+          }}
+      }});
+      // Set initial order on load
+      window.currentOrder = Array.from(el.children).map(function(li) {{
+          return parseInt(li.getAttribute('data-id'));
+      }});
+    </script>
+  </body>
+</html>
+"""
+
+# Embed the HTML; adjust height if needed
+components.html(html_code, height=400, scrolling=True)
+
+# Button to save drag-and-drop order
+if st.button("Save Order"):
+    # Use streamlit_javascript to retrieve the JS variable "window.currentOrder"
+    new_order = st_javascript("return window.currentOrder;")
+    if new_order:
+        update_order(new_order)
+    else:
+        st.error("Could not retrieve order. Make sure you have dragged at least once.")
+
+st.markdown("---")
+
+# --- Column Editing Section ---
+st.subheader("Edit Columns")
+
+# For each column in the current deck, allow editing
+for idx, col in enumerate(current_deck["columns"]):
+    with st.expander(f"Edit Column {col['title']} (ID: {col['id']})", expanded=False):
+        new_title = st.text_input("Title", value=col["title"], key=f"title_{col['id']}")
+        new_size = st.selectbox("Size", options=["small", "medium", "large"], index=["small", "medium", "large"].index(col["size"]), key=f"size_{col['id']}")
+        new_order_type = st.selectbox("Order Posts", options=["top", "latest"], index=["top", "latest"].index(col["order"]), key=f"order_{col['id']}")
+        new_adv = st.checkbox("Enable Advanced Search", value=col["advanced_search"], key=f"adv_{col['id']}")
+        col_cols = st.columns([1,1])
+        if col_cols[0].button("Save Changes", key=f"save_{col['id']}"):
+            edit_column(st.session_state.current_deck_index, idx, {
+                "title": new_title,
+                "size": new_size,
+                "order": new_order_type,
+                "advanced_search": new_adv
+            })
+            st.success("Column updated.")
+            st.experimental_rerun()
+        if col_cols[1].button("Delete Column", key=f"delete_{col['id']}"):
+            delete_column(st.session_state.current_deck_index, idx)
+            st.warning("Column deleted.")
+            st.experimental_rerun()
+
+st.markdown("---")
+
+# --- Add New Column Section ---
+st.subheader("Add New Column")
+new_col_title = st.text_input("New Column Title", key="new_col_title")
+if st.button("Add Column"):
+    if new_col_title.strip():
+        add_column(st.session_state.current_deck_index, new_col_title.strip())
+        st.success(f"Added column '{new_col_title.strip()}'.")
+        st.experimental_rerun()
+    else:
+        st.error("Please enter a valid column title.")
+
+# Optionally, display current settings (for debugging)
+# st.json(st.session_state.settings)