Update app.py

app.py

@@ -6,7 +6,6 @@ import sqlite3
 
 app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
 
-# Initialize SQLite database
 DB_FILE = 'links.db'
 
 def get_db_connection():
@@ -20,21 +19,10 @@ def init_db():
     c.execute('''CREATE TABLE IF NOT EXISTS links
                  (id TEXT PRIMARY KEY, name TEXT, url TEXT)''')
     conn.commit()
-    
-    # Initialize with some example URLs if the table is empty
-    c.execute("SELECT COUNT(*) FROM links")
-    if c.fetchone()[0] == 0:
-        initial_urls = [
-            {"id": str(uuid.uuid4()), "name": "Google", "url": "https://www.google.com"},
-            {"id": str(uuid.uuid4()), "name": "Bing", "url": "https://www.bing.com"},
-        ]
-        c.executemany("INSERT INTO links VALUES (:id, :name, :url)", initial_urls)
-        conn.commit()
     conn.close()
 
 init_db()
 
-# Function to get all links from the database
 def get_links():
     conn = get_db_connection()
     c = conn.cursor()
@@ -44,23 +32,38 @@ def get_links():
     return links
 
 app.layout = dbc.Container([
+    dbc.Modal([
+        dbc.ModalHeader("Add New URL"),
+        dbc.ModalBody([
+            dbc.Input(id='new-url-name', placeholder="URL Name", className="mb-2"),
+            dbc.Input(id='new-url-link', placeholder="URL", className="mb-2"),
+        ]),
+        dbc.ModalFooter(
+            dbc.Button("Add", id="add-url-button", className="ml-auto")
+        ),
+    ], id="add-url-modal"),
     dbc.Row([
-        # Left navigation column
         dbc.Col([
             html.H2("My URL App", className="mt-3 mb-4"),
+            dbc.Button("Add URL", id="open-modal-button", color="primary", className="mb-3"),
             html.Div(id='url-list'),
-            dbc.Input(id='new-url-name', placeholder="New URL Name", className="mb-2"),
-            dbc.Input(id='new-url-link', placeholder="New URL", className="mb-2"),
-            dbc.Button("Add URL", id='add-url-button', color="primary", className="mb-3"),
         ], width=3, className="bg-light p-3"),
-        
-        # Main content column with iframe
         dbc.Col([
-            html.Iframe(id='content-iframe', style={'width': '100%', 'height': '800px'})
+            html.Iframe(id='content-iframe', style={'width': '100%', 'height': '800px'}, sandbox="allow-scripts allow-same-origin")
         ], width=9)
     ])
 ], fluid=True)
 
+@callback(
+    Output("add-url-modal", "is_open"),
+    [Input("open-modal-button", "n_clicks"), Input("add-url-button", "n_clicks")],
+    [State("add-url-modal", "is_open")],
+)
+def toggle_modal(n1, n2, is_open):
+    if n1 or n2:
+        return not is_open
+    return is_open
+
 @callback(
     Output('url-list', 'children'),
     Input('add-url-button', 'n_clicks'),
@@ -79,20 +82,21 @@ def update_url_list(n_clicks, new_name, new_link):
     
     links = get_links()
     return [
-        dbc.Button(
-            link['name'], 
-            id={'type': 'url-button', 'index': link['id']},
-            color="link",
-            className="d-block text-left mb-2"
-        ) for link in links
-    ] + [
-        dbc.Button(
-            "Delete",
-            id={'type': 'delete-button', 'index': link['id']},
-            color="danger",
-            size="sm",
-            className="mr-2 mb-2"
-        ) for link in links
+        dbc.ListGroupItem([
+            dbc.Button(
+                link['name'], 
+                id={'type': 'url-button', 'index': link['id']},
+                color="link",
+                className="text-left"
+            ),
+            html.Span(
+                "✕",
+                id={'type': 'delete-button', 'index': link['id']},
+                className="float-right text-danger",
+                style={"cursor": "pointer"}
+            )
+        ], className="d-flex justify-content-between align-items-center")
+        for link in links
     ]
 
 @callback(