Merge pull request #11 from SillyLittleTech/copilot/add-system-theme-support

kiyarose · web-flow · commit 777cd26a875f · 2026-04-06T05:12:55.000-04:00
Add system theme support, pin emoji icon, and compact toolbar
diff --git a/PinStickApp.swift b/PinStickApp.swift
@@ -82,9 +82,11 @@ struct ContentView: View {
                 Button(action: togglePin) {
                     Image(systemName: isPinned ? "pin.slash" : "pin")
                         .help(isPinned ? "Unpin Window" : "Pin Window")
+                        .font(.system(size: 12))
                 }
                 .buttonStyle(PlainButtonStyle())
-                .padding(6)
+                .padding(.horizontal, 8)
+                .padding(.vertical, 4)
 
                 Spacer()
             }
@@ -95,7 +97,6 @@ struct ContentView: View {
             TextEditor(text: $text)
                 .padding(8)
                 .font(.system(size: 16, design: .monospaced))
-                .background(Color.white)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
         .onChange(of: text) { oldValue, newValue in
diff --git a/cross-platform/package.json b/cross-platform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pinstick-cross",
-  "version": "2.5.8",
+  "version": "2.6.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/cross-platform/src-tauri/Cargo.lock b/cross-platform/src-tauri/Cargo.lock
diff --git a/cross-platform/src-tauri/Cargo.toml b/cross-platform/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "pinstick"
-version = "2.5.8"
+version = "2.6.0"
 description = "PinStick cross-platform note pinning app"
 authors = ["SillyLittleTech"]
 edition = "2021"
diff --git a/cross-platform/src-tauri/tauri.conf.json b/cross-platform/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "PinStick",
-    "version": "2.5.8"
+    "version": "2.6.0"
   },
   "tauri": {
     "security": {
diff --git a/cross-platform/src/index.html b/cross-platform/src/index.html
@@ -9,7 +9,7 @@
   <body>
     <header>
       <div class="left">
-        <button id="pin-btn" type="button" title="Pin window">Pin</button>
+        <button id="pin-btn" type="button" title="Pin window" aria-label="Pin window">📌</button>
       </div>
       <div class="right">
         <span id="status">Ready</span>
diff --git a/cross-platform/src/main.js b/cross-platform/src/main.js
@@ -41,7 +41,9 @@ async function togglePin() {
       result && Object.prototype.hasOwnProperty.call(result, "pinned")
         ? result.pinned
         : false;
-    pinBtn.textContent = pinned ? "Unpin" : "Pin";
+    pinBtn.classList.toggle("pinned", pinned);
+    pinBtn.title = pinned ? "Unpin window" : "Pin window";
+    pinBtn.setAttribute("aria-label", pinned ? "Unpin window" : "Pin window");
     setStatus(pinned ? "Pinned on top" : "Not pinned");
   } catch (err) {
     console.error(err);
@@ -56,6 +58,13 @@ function init() {
   if (!invoke) {
     pinBtn.disabled = true;
     setStatus("Tauri API unavailable");
+  } else if (TAURI && TAURI.app) {
+    // Briefly show the app version so users can verify which build is running
+    TAURI.app.getVersion().then((version) => {
+      const previous = statusEl.textContent;
+      setStatus(`v${version}`);
+      setTimeout(() => setStatus(previous), 2000);
+    }).catch(() => { /* non-critical */ });
   }
 
   noteEl.addEventListener("input", (e) => {
diff --git a/cross-platform/src/styles.css b/cross-platform/src/styles.css
@@ -16,28 +16,39 @@ header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px;
+  padding: 3px 8px;
   background: #ffffff;
   border-bottom: 1px solid #e0e0e0;
 }
 
 header button {
-  padding: 6px 12px;
+  padding: 2px 6px;
   font-size: 14px;
-  border: 1px solid #ccc;
-  background: #fff;
-  border-radius: 6px;
+  border: 1px solid transparent;
+  background: transparent;
+  border-radius: 5px;
   cursor: pointer;
+  line-height: 1.4;
+  transition: background 0.15s;
+}
+
+header button:hover {
+  background: rgba(0, 0, 0, 0.07);
+}
+
+header button.pinned {
+  background: rgba(0, 0, 0, 0.1);
+  border-color: rgba(0, 0, 0, 0.15);
 }
 
 header button:disabled {
-  opacity: 0.6;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
 main {
   flex: 1;
-  padding: 10px;
+  padding: 8px;
 }
 
 textarea {
@@ -50,9 +61,41 @@ textarea {
   border: 1px solid #d0d0d0;
   border-radius: 8px;
   background: #ffffff;
+  color: #222;
 }
 
 #status {
-  font-size: 12px;
-  color: #555;
+  font-size: 11px;
+  color: #666;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #1e1e1e;
+    color: #e0e0e0;
+  }
+
+  header {
+    background: #2a2a2a;
+    border-bottom-color: #3a3a3a;
+  }
+
+  header button:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  header button.pinned {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  textarea {
+    background: #2a2a2a;
+    color: #e0e0e0;
+    border-color: #3a3a3a;
+  }
+
+  #status {
+    color: #888;
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -82,9 +82,11 @@ struct ContentView: View {`
`82`	`82`	`Button(action: togglePin) {`
`83`	`83`	`Image(systemName: isPinned ? "pin.slash" : "pin")`
`84`	`84`	`.help(isPinned ? "Unpin Window" : "Pin Window")`
	`85`	`+ .font(.system(size: 12))`
`85`	`86`	`}`
`86`	`87`	`.buttonStyle(PlainButtonStyle())`
`87`		`- .padding(6)`
	`88`	`+ .padding(.horizontal, 8)`
	`89`	`+ .padding(.vertical, 4)`
`88`	`90`
`89`	`91`	`Spacer()`
`90`	`92`	`}`
`@@ -95,7 +97,6 @@ struct ContentView: View {`
`95`	`97`	`TextEditor(text: $text)`
`96`	`98`	`.padding(8)`
`97`	`99`	`.font(.system(size: 16, design: .monospaced))`
`98`		`- .background(Color.white)`
`99`	`100`	`}`
`100`	`101`	`.frame(maxWidth: .infinity, maxHeight: .infinity)`
`101`	`102`	`.onChange(of: text) { oldValue, newValue in`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "pinstick-cross",`
`3`		`- "version": "2.5.8",`
	`3`	`+ "version": "2.6.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`