core: Revisit drag+drop into the editor. Works better but not as I intended. Use it just to update the screenshot in the welcome app.

apps/welcome.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "👋",
-	"previous": "&wAb7J6E35xEXpiXsQ6t1RaWTGIvlatUnyH8ipF6pVic=.sha256"
+	"previous": "&1o8MrBHfH42NnO+ruajwCmW/DUCb+IT1qtnAZI/agyo=.sha256"
 }

apps/welcome/index.html

@@ -45,6 +45,11 @@
 						<i class="fa fa-mobile-screen w3-xlarge"></i>
 						<i class="fa-brands fa-windows w3-xlarge"></i>
 					</p>
+					<a
+						class="w3-button w3-blue w3-padding-large"
+						href="https://www.tildefriends.net/~core/ssb/"
+						>🦀 Try It</a
+					>
 					<a
 						class="w3-button w3-black w3-padding-large"
 						href="https://dev.tildefriends.net/cory/tildefriends/releases"
@@ -52,12 +57,7 @@
 					>
 					<a
 						class="w3-button w3-black w3-padding-large"
-						href="https://www.tildefriends.net/~core/ssb/"
+						href="https://dev.tildefriends.net/cory/tildefriends"
-						><i class="fa fa-link"></i> Try It</a
-					>
-					<a
-						class="w3-button w3-black w3-padding-large"
-						href="https://dev.tildefriends.net/"
 						><i class="fa fa-mug-hot"></i> Development</a
 					>
 					<a
@@ -65,6 +65,11 @@
 						href="https://docs.tildefriends.net/"
 						><i class="fa fa-book"></i> Documentation</a
 					>
+					<a
+						class="w3-button w3-black w3-padding-large"
+						href="https://www.tildefriends.net/~cory/tildeblog/"
+						><i class="fa fa-solid fa-square-rss"></i> Blog</a
+					>
 					<p>
 						<a
 							class="w3-button w3-round-large w3-padding w3-blue-gray w3-margin-top"
@@ -86,6 +91,13 @@
 							<img src="googleplay.svg" style="height: 2em; margin: 0" />
 							Get it on Google Play (Open Testing)
 						</a>
+						<a
+							class="w3-button w3-round-large w3-padding w3-blue-gray w3-margin-top"
+							href="https://testflight.apple.com/join/tXxgtSpE"
+						>
+							<img src="ios.svg" style="height: 2em; margin: 0" />
+							Get it on iOS (TestFlight)
+						</a>
 					</p>
 				</div>
 				<div class="w3-col l4 m6">
@@ -222,9 +234,9 @@
 		<div class="w3-container w3-padding-64 w3-light-grey w3-center">
 			<h1 class="w3-jumbo"><b>Built the Old Fashioned Way</b></h1>
 			<p>
-				Tilde Friends strives to use only simple and widely adopted dependencies
+				Tilde Friends strives to use only simple and widely adopted
-				in order to keep it easy to build for all sorts of platforms and
+				dependencies in order to keep it easy to build for all sorts of
-				maintainable for a very long time.
+				platforms and maintainable for a very long time.
 			</p>
 			<p>
 				Though of course for building Tilde Friends apps, you are free to use

apps/welcome/ios.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="814" height="1000">
+  <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/>
+</svg>

apps/welcome/w3.css

@@ -1,4 +1,4 @@
-/* W3.CSS 5.01 March 14 2025 by Jan Egil and Borge Refsnes */
+/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
 html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
 /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
@@ -108,10 +108,6 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
 .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
 .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
-
-.w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex}
-.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic}
-
 .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
 .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
 .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
@@ -153,9 +149,9 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
 .w3-hover-none:hover{box-shadow:none!important}
 /* Colors */
-.w3-amber,.w3-hover-amber:hover,.w3-warning{color:#000!important;background-color:#ffc107!important}
+.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
 .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
-.w3-blue,.w3-hover-blue:hover,.w3-info,.w3-primary{color:#fff!important;background-color:#2196F3!important}
+.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
 .w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
 .w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
 .w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
@@ -170,24 +166,15 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
 .w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
 .w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
-.w3-red,.w3-hover-red:hover,.w3-danger{color:#fff!important;background-color:#f44336!important}
+.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
 .w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
 .w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
-.w3-yellow,.w3-hover-yellow:hover,.w3-note{color:#000!important;background-color:#ffeb3b!important}
+.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
 .w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
 .w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
-
+.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
-.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover,.w3-secondary{color:#000!important;background-color:#9e9e9e!important}
 .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
 .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
-
-.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
-.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
-.w3-emerald,.w3-hover-emerald:hover,.w3-success{color:#fff!important;background-color:#008a00!important}
-.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
-.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
-.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
-
 .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
 .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
 .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}

core/client.js

@@ -411,6 +411,7 @@ class TfFilesElement extends LitElement {
 			current: {type: String},
 			files: {type: Object},
 			dropping: {type: Number},
+			drop_target: {type: String},
 		};
 	}
 
@@ -449,6 +450,9 @@ class TfFilesElement extends LitElement {
 		if (!this.files[file].clean) {
 			classes.push('dirty');
 		}
+		if (this.drop_target == file) {
+			classes.push('drop');
+		}
 		return html`<div
 			class="${classes.join(' ')}"
 			@click=${(x) => this.file_click(file)}
@@ -465,11 +469,12 @@ class TfFilesElement extends LitElement {
 		event.preventDefault();
 		event.stopPropagation();
 		this.dropping = 0;
+		this.drop_target = undefined;
 		for (let file of event.dataTransfer.files) {
 			let buffer = await file.arrayBuffer();
 			let text = new TextDecoder('latin1').decode(buffer);
 			gFiles[file.name] = {
-				doc: new cm6.EditorState.create({
+				doc: cm6.EditorState.create({
 					doc: text,
 					extensions: cm6.extensions,
 				}),
@@ -488,6 +493,7 @@ class TfFilesElement extends LitElement {
 	 */
 	drag_enter(event) {
 		this.dropping++;
+		this.drop_target = event.srcElement.innerText.trim();
 		event.preventDefault();
 	}
 
@@ -497,6 +503,13 @@ class TfFilesElement extends LitElement {
 	 */
 	drag_leave(event) {
 		this.dropping--;
+		if (this.dropping == 0) {
+			this.drop_target = undefined;
+		}
+	}
+
+	drag_over(event) {
+		event.preventDefault();
 	}
 
 	/**
@@ -523,6 +536,10 @@ class TfFilesElement extends LitElement {
 					background-color: #2aa198;
 				}
 
+				div.file.drop {
+					border: 4px solid red;
+				}
+
 				div.file.dirty::after {
 					content: '*';
 				}
@@ -531,20 +548,12 @@ class TfFilesElement extends LitElement {
 				@drop=${this.drop}
 				@dragenter=${this.drag_enter}
 				@dragleave=${this.drag_leave}
+				@dragover=${this.drag_over}
 			>
 				${Object.keys(this.files)
 					.sort()
 					.map((x) => self.render_file(x))}
 			</div>
-			<div
-				?hidden=${this.dropping == 0}
-				@drop=${this.drop}
-				@dragenter=${this.drag_enter}
-				@dragleave=${this.drag_leave}
-				style="text-align: center; vertical-align: middle; outline: 16px solid red; margin: -8px; background-color: rgba(255, 0, 0, 0.5); position: absolute; left: 16px; top: 16px; width: calc(100% - 16px); height: calc(100% - 16px); z-index: 1000"
-			>
-				Drop File(s)
-			</div>
 		`;
 	}
 }