src/lib/querybuilder/panel/QueryBuilderNav.tsx

@@ -210,21 +210,40 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => {
                   </div>
                 )}
                 {ss.queryStates.openQueryArray.filter(query => query.id != null).length > 1 && (
-                  <Button
-                    variantType="secondary"
-                    variant="ghost"
-                    disabled={!ss?.authorization.database?.W}
-                    rounded
-                    size="3xs"
-                    iconComponent="icon-[ic--baseline-close]"
-                    onClick={e => {
-                      e.stopPropagation();
-                      if (query.id !== undefined) {
-                        wsDeleteQuery({ saveStateID: ss.id, queryID: query.id });
-                        dispatch(removeQueryByID(query.id));
-                      }
-                    }}
-                  />
+                  <Popover placement="bottom">
+                    <PopoverTrigger>
+                      <Button
+                        variantType="secondary"
+                        variant="ghost"
+                        disabled={!ss?.authorization.database?.W}
+                        className={
+                          query.id == ss.queryStates.activeQueryId
+                            ? ''
+                            : 'opacity-50 group-hover:opacity-100 group-focus-within:opacity-100'
+                        }
+                        rounded
+                        size="3xs"
+                        iconComponent="icon-[ic--baseline-close]"
+                      />
+                    </PopoverTrigger>
+                    <PopoverContent className="p-2 text-sm">
+                      <p className="pb-1">Are you sure?</p>
+                      <Button
+                        variantType="danger"
+                        variant="solid"
+                        size="xs"
+                        onClick={e => {
+                          e.stopPropagation();
+                          if (query.id !== undefined) {
+                            wsDeleteQuery({ saveStateID: ss.id, queryID: query.id });
+                            dispatch(removeQueryByID(query.id));
+                          }
+                        }}
+                      >
+                        Yes, remove
+                      </Button>
+                    </PopoverContent>
+                  </Popover>
                 )}
               </>
             </Tab>