Add toggle for dark and light mode — updates to #96

CONTRIBUTING.md

@@ -6,9 +6,6 @@ this is a FOSS effort and will never be commercialized (no tracking, will not be
 
 - **a PR to make the 3 panels customizable to different URLs and input targets!**
 - a "Windows maintainer" to handle Windows user needs and beta test every release to make sure we didn't break something for them
-- Design
-  - i need a new set of icons for the images
-  - better styling for the window? maybe normalize the bard window to the openai dimensions?
 
 ## Install and Run from Source
 
@@ -49,24 +46,56 @@ Apple is a piece of sht.
 
 copy `.env.example` to `.env` and follow https://www.electronforge.io/guides/code-signing/code-signing-macos (we tried option 1, but eventually ended up with option 2 as you see below)
 
-then you have to generate a bunch of shit
+then you have to generate a bunch of stuff
 https://medium.com/ascentic-technology/getting-an-electron-app-ready-for-macos-distribution-2941fce27450
 
-follow this
-
-he sucks at documenting but at least we got it notarized
-
-bitch
-
 ```bash
 $ spctl -a -vvv -t install smolmenubar.app
 smolmenubar.app: accepted
 source=Notarized Developer ID
 origin=Developer ID Application: Shawn Wang (7SVH735GV7)
 ```
 
+all of this has now been packaged into a script called `npm run buildAndSign`. Note that for now, this script ONLY runs on swyx's macbook air inside the terminal (and somehow NOT in vsocde, i dont know why). If you are experienced with electron signing and notarizing, please help us make this work for all contributors!
+
+```bash
+npm run buildAndSign
+
+> [email protected] buildAndSign
+> NODE_ENV=sign npm run make
+
+
+> [email protected] make
+> electron-forge make --arch arm64,x64
+
+✔ Checking your system
+✔ Loading configuration
+✔ Resolving make targets
+  › Making for the following targets: dmg
+✔ Loading configuration
+✔ Resolving make targets
+  › Making for the following targets: dmg
+✔ Running package command
+  ✔ Preparing to package application
+  ✔ Running packaging hooks
+    ✔ Running generateAssets hook
+    ✔ Running prePackage hook
+  ✔ Packaging application
+    ✔ Packaging for arm64 on darwin [2m15s]
+    ✔ Packaging for x64 on darwin [2m27s]
+  ✔ Running postPackage hook
+✔ Running preMake hook
+✔ Making distributables
+  ✔ Making a dmg distributable for darwin/arm64 [7s]
+  ✔ Making a dmg distributable for darwin/x64 [8s]
+✔ Running postMake hook
+  › Artifacts available at: /Users/swyx/Documents/Work/smol-menubar/out/make
+```
+
 ## publishing to app store
 
+> NOTE: we havent actually gotten this working yet, i just straight up gave up
+
 the below from https://developer.apple.com/help/app-store-connect/manage-builds/upload-builds is something like what we want
 
 ```bash

README.md

@@ -1,8 +1,8 @@
 # 👼 smol menubar
 
-This is a smol menubar app that helps you quickly access **the full webapps** of ChatGPT (defaults to "[GPT4.5](https://www.latent.space/p/code-interpreter#details)"!!), Perplexity.ai, Claude 2, and more (see below) with a single keyboard shortcut (Cmd+Shift+G).
+This is a smol menubar app that helps you quickly access **the full webapps** of ChatGPT (defaults to "[GPT4.5](https://www.latent.space/p/code-interpreter#details)"!!), Claude 2, Perplexity.ai, Phind and more (see below) with a single keyboard shortcut (Cmd+Shift+G).
 
-> we also support Bard, Bing, Claude 1, and local models like LLaMA and Vicuna (via [OobaBooga](https://github.com/oobabooga/text-generation-webui)) but hide by default bc they aren't as good!
+> we also support Bard, Bing, Phind, Together.ai, and local models like LLaMA and Vicuna (via [OobaBooga](https://github.com/oobabooga/text-generation-webui)) but hide by default bc they aren't as good!
 
 ![image](https://github.com/smol-ai/menubar/assets/6764957/0cc8f90a-b7eb-447c-808a-6883654dcad4)
 
@@ -14,7 +14,7 @@ Whatever is typed at the bottom is entered into all **web apps** simultaneously,
 
 Yes and no:
 
-1. SOTA functionality is often released without API (eg: ChatGPT Code Interpreter, Bing Image Creator, Bard Multimodal Input, Claude Multifile Upload). **We insist on using webapps** so that you have full access to all functionality on launch day.
+1. SOTA functionality is often released without API (eg: ChatGPT Code Interpreter, Bing Image Creator, Bard Multimodal Input, Claude Multifile Upload). **We insist on using webapps** so that you have full access to all functionality on launch day. We also made light/dark mode for each app, just for fun (`Cmd+Shift+L`)
 2. This is a menubar app that can be invoked with a keyboard shortcut (Cmd+Shift+G). Feels a LOT faster than having it live in a browser window somewhere and is easy to pull up/dismiss during long generations.
 3. Supports local models like LLaMa and Vicuna via [OobaBooga](https://github.com/oobabooga/text-generation-webui).
 4. No paywall, build from source.
@@ -24,16 +24,16 @@ Yes and no:
 | Provider (default in **bold**)                                                     | Status | Notes                                                                                                                                        |
 | ---------------------------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
 | **ChatGPT**                                                                        | ☑️     | Defaults to GPT 4 Code Interpreter                                                                                                           |
-| Bard                                                                               | ☑️     |                                                                                                                                              |
-| Bing                                                                               | ☑️     | [It's not the same as GPT-4!](https://twitter.com/jeremyphoward/status/1666593682676662272?s=20)                                             |
-| Claude                                                                             | ☑️     | Requires Beta Access                                                                                                                         |
 | **Claude 2**                                                                       | ☑️     | **Login Tip**: Use manual email login and remember to type (not paste) the login code! ([#56](https://github.com/smol-ai/menubar/issues/56)) |
-| Local Models (via [OobaBooga](https://github.com/oobabooga/text-generation-webui)) | ☑️     | Requires Local Setup                                                                                                                         |
 | **HuggingChat**                                                                    | ☑️     | Offers Llama2, OpenAssistant                                                                                                                 |
-| **Perplexity**                                                                     | ☑️     |                                                                                                                                              |
-| Phind                                                                              | ☑️     |                                                                                                                                              |
+| **Perplexity**                                                                     | ☑️     | Search + Chat                                                                                                                                |
+| **Bing**                                                                           | ☑️     | Microsoft's best. [It's not the same as GPT-4!](https://twitter.com/jeremyphoward/status/1666593682676662272?s=20)                           |
+| Bard                                                                               | ☑️     | Google's best. [Bard's updates are... flaky](https://twitter.com/swyx/status/1678495067663925248)                                            |
+| Local Models (via [OobaBooga](https://github.com/oobabooga/text-generation-webui)) | ☑️     | Requires Local Setup                                                                                                                         |
+| Phind                                                                              | ☑️     | Developer focused chat                                                                                                                       |
 | OpenAssistant                                                                      | ☐      | Coming Soon — [Submit a PR](https://github.com/smol-ai/menubar/issues/37)!                                                                   |
 | Quora Poe                                                                          | ☐      | Coming Soon — [Submit a PR](https://github.com/smol-ai/menubar/issues/38)!                                                                   |
+| Claude                                                                             | ☑️     | Requires Beta Access                                                                                                                         |
 | ... What's Else?                                                                   | ☐      | [Submit a New Issue](https://github.com/smol-ai/menubar/issues)!                                                                             |
 
 ## Features and Usage
@@ -45,14 +45,14 @@ Yes and no:
     - Quick Open
       - ![image](https://github.com/davej/smol-ai-menubar/assets/6764957/3a6d0a16-7f54-43e5-9060-ec7b2486d32d)
     - Submit can be toggled to use `Enter` (faster for quick chat replies) vs `Cmd+Enter` (easier to enter multiline prompts)
+  - `Cmd+Shift+L` to toggle light/dark mode (not customizable for now)
   - Remember you can customize further by building from source!
 
 - **Window Resizing**:
 
   - Resize the window by clicking and dragging.
   - Use `Cmd+1/2/3/A/+/-` or drag to resize the internal webviews.
     - `Cmd +` and `Cmd -` are especially useful if you have a lot of chats enabled!
-  - Use `Cmd+Shift+F` to set the width to 100% of your screen.
 
 - **Model Toggle**:
 

index.css

@@ -13,27 +13,7 @@ body {
 }
 
 :root {
-	/* account for the arrow */
-	--actual-height: calc(100vh - 12px - 80px);
-}
-
-.myarrow {
-	position: relative;
-	padding: 12px 0 0 0;
-}
-
-.myarrow:before {
-	content: '';
-	height: 0;
-	width: 0;
-	border-width: 0 8px 12px 8px;
-	border-style: solid;
-	border-color: transparent transparent white transparent;
-	position: absolute;
-
-	top: 0;
-	left: 50%;
-	transform: translateX(-50%);
+	--actual-height: calc(100vh - 80px);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -50,8 +30,8 @@ body {
 	/* disabled because its quite buggy */
 	/* resize: both;  */
 	width: 100%;
-	height: calc(100vh - 12px - var(--superprompt-height));
-	margin-top: 12px;
+	height: calc(100vh - var(--superprompt-height));
+	margin-top: 4px;
 	margin: 0 auto;
 	position: relative;
 }
@@ -83,7 +63,7 @@ body {
 	height: 100%;
 	resize: none;
 	overflow-y: auto; /* Adds a scrollbar when the content is too big */
-	padding: 4px 12px;
+	padding: 4px 4px;
 	font-size: 16px;
 	outline: none;
 	flex-grow: 1;
@@ -123,7 +103,7 @@ webview {
 	top: 0;
 	left: 0;
 	width: 100%;
-	height: calc(100vh - 12px - var(--superprompt-height));
+	height: calc(100vh - var(--superprompt-height));
 	display: inline-flex !important;
 }
 

index.html

@@ -7,7 +7,7 @@
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.0/split.min.js"></script>
 	</head>
 
-	<body class="myarrow">
+	<body class="">
 		<div id="webviewContainer" class="flex split">
 			<!-- Panes Go Here -->
 		</div>
@@ -18,8 +18,8 @@
 				name="prompt"
 				autofocus
 				placeholder="Enter a superprompt here.
-- Submit: Cmd/Ctrl+Enter
-- Resize windows: Cmd+1/2/3/A/-/+
+- Quick Open: Cmd+G or Submit: Cmd/Ctrl+Enter (customizable in menu)
+- Switch windows: Cmd+1/2/3/A or Resize windows: Cmd -/+
 - New chat: Cmd+R
 "
 			></textarea>

index.js

@@ -33,6 +33,7 @@ const providers = {
 	Bing: require('./providers/bing'),
 	Claude: require('./providers/claude'),
 	Claude2: require('./providers/claude2'),
+	Together: require('./providers/together'),
 	Perplexity: require('./providers/perplexity'),
 	Phind: require('./providers/phind'),
 	HuggingChat: require('./providers/huggingchat'),
@@ -55,9 +56,6 @@ if (process.env.NODE_ENV === 'development') {
 }
 log.info('store reset', store); // Logging the store
 
-// Initialize fullscreen toggle
-store.set('isFullscreen', false);
-
 // Context menu for electron apps
 const contextMenu = require('electron-context-menu');
 
@@ -88,7 +86,7 @@ app.on('ready', () => {
 				enableWebView: true, // from chatgpt
 				// nativeWindowOpen: true,
 			},
-			width: store.get('isFullscreen', false) ? width : 1200,
+			width: 1200,
 			height: 750,
 		},
 		tray,
@@ -98,6 +96,22 @@ app.on('ready', () => {
 		icon: image,
 	});
 
+	// Flag to detect if the window was hidden manually
+	let manualHide = false;
+
+	// Prevent window from hiding when in development mode if not hidden manually
+	// (for debugging)
+	if (process.env.NODE_ENV === 'development') {
+		const originalHideWindow = mb.hideWindow.bind(mb);
+
+		mb.hideWindow = () => {
+			if (manualHide) {
+				manualHide = false; // Reset the flag
+				originalHideWindow(); // Call the original hideWindow method
+			}
+		};
+	}
+
 	// On menubar ready, the following code will execute
 	mb.on('ready', () => {
 		const { window } = mb;
@@ -175,15 +189,6 @@ app.on('ready', () => {
 						});
 					},
 				},
-				{
-					label: 'Toggle Fullscreen',
-					accelerator: 'CommandorControl+Shift+F',
-					type: 'checkbox',
-					checked: store.get('isFullscreen', false),
-					click: () => {
-						store.set('isFullscreen', !store.get('isFullscreen', false));
-					},
-				},
 			];
 
 			const darkModeToggle = {
@@ -258,6 +263,16 @@ app.on('ready', () => {
 				},
 			];
 
+			// FYI to the user that they are in development mode
+			if (process.env.NODE_ENV === 'development') {
+				menuHeader.unshift(
+					{
+						label: '👨‍💻 IN DEV MODE 👨‍💻',
+					},
+					separator,
+				);
+			}
+
 			// Return the complete context menu template
 			return [
 				...menuHeader,
@@ -284,12 +299,20 @@ app.on('ready', () => {
 			if (e.ctrlKey || e.metaKey) {
 				const contextMenuTemplate = createContextMenuTemplate();
 				mb.tray.popUpContextMenu(Menu.buildFromTemplate(contextMenuTemplate));
+			} else {
+				quickOpen();
 			}
 		});
+
+		tray.on('double-click', () => {
+			quickOpen();
+		});
+
 		const menu = new Menu();
 
 		function quickOpen() {
 			if (window.isVisible()) {
+				manualHide = true; // Honor manual hide in development mode
 				mb.hideWindow();
 			} else {
 				mb.showWindow();
@@ -317,18 +340,6 @@ app.on('ready', () => {
 			}
 		});
 
-		store.onDidChange('isFullscreen', (isFullscreen) => {
-			const { window } = mb;
-			if (isFullscreen) {
-				window.setBounds({ x: 0, width: width, height: window.getSize()[1] });
-			} else {
-				window.setBounds({
-					x: width - 1200,
-					width: 1200,
-					height: window.getSize()[1],
-				});
-			}
-		});
 		Menu.setApplicationMenu(menu, { autoHideMenuBar: false });
 
 		// open devtools if in dev mode