Add GPX drag & drop, folder management, delete, and folder-first sort

Uploading is now drag & drop (or click to browse) instead of a form;
folders can be created any time, not just during upload; files can be
dragged onto a folder to move them, or dropped elsewhere in the tree
to move back to the top level; files and folders can be deleted. Both
drag sources (an OS file drag and dragging an existing tree entry)
land on the same drop targets, told apart by a custom drag payload
type versus the browser's own "Files" type.

Also sort folders before files in the tree (previously interleaved
alphabetically).

public/css/style.css

@@ -127,31 +127,49 @@ html, body {
   cursor: pointer;
 }
 
-.gpx-upload {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 10px 12px;
-  border-bottom: 1px solid #eee;
-}
-
-.gpx-upload input {
-  font: inherit;
-  font-size: 13px;
-}
-
-.gpx-upload button {
-  align-self: flex-start;
-  font: inherit;
-  font-size: 13px;
+.gpx-dropzone {
+  margin: 10px 12px;
+  padding: 14px 10px;
+  border: 2px dashed #ccc;
+  border-radius: 4px;
+  text-align: center;
+  color: #666;
   cursor: pointer;
 }
 
+.gpx-dropzone.gpx-drop-hover {
+  border-color: #4a90d9;
+  background: #eef5fd;
+  color: #333;
+}
+
 .gpx-upload__status {
-  margin: 0;
+  margin: 0 12px 10px;
   color: #666;
 }
 
+.gpx-new-folder {
+  display: flex;
+  gap: 6px;
+  margin: 0 12px 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.gpx-new-folder input {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  font-size: 13px;
+}
+
+.gpx-new-folder button {
+  font: inherit;
+  font-size: 13px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
 .gpx-tree {
   overflow-y: auto;
   padding: 8px 12px;
@@ -170,6 +188,20 @@ html, body {
 .gpx-tree summary {
   cursor: pointer;
   font-weight: 600;
+  border-radius: 3px;
+}
+
+.gpx-tree__folder-row {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  width: calc(100% - 18px);
+}
+
+.gpx-tree summary.gpx-drop-hover {
+  background: #eef5fd;
+  outline: 1px dashed #4a90d9;
 }
 
 .gpx-tree__file {
@@ -177,14 +209,49 @@ html, body {
   align-items: center;
   gap: 4px;
   padding: 2px 0;
+  cursor: grab;
+}
+
+.gpx-tree__file label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
   cursor: pointer;
 }
 
+.gpx-tree__file label span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gpx-tree__delete {
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  color: #999;
+  font-size: 14px;
+  line-height: 1;
+  padding: 0 4px;
+  cursor: pointer;
+}
+
+.gpx-tree__delete:hover {
+  color: #e63946;
+}
+
 .gpx-tree__empty {
   color: #888;
   font-style: italic;
 }
 
+.gpx-tree.gpx-drop-hover {
+  outline: 1px dashed #4a90d9;
+  outline-offset: -2px;
+}
+
 .maplibregl-popup-content p {
   margin: 4px 0 0;
 }