Merge pull request #40 from andrewmcgivery/beta

First key pressed now triggers the search allowing you to just start …

React/Components/App/App.scss

@@ -3,7 +3,30 @@
 	container-type: size;
 
 	.view-header {
-		display: none;
+		background: transparent;
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 40px;
+		height: 40px;
+		justify-content: space-between;
+		align-items: center;
+
+		.view-header-nav-buttons {
+			display: none;
+		}
+
+		.view-header-title-container {
+			display: none;
+		}
+
+		.view-action {
+			--icon-color: currentColor;
+		}
+
+		div {
+			margin-left: auto;
+		}
 	}
 
 	.view-content {
@@ -94,31 +117,15 @@
 					line-height: 1;
 
 					@container (max-width: 520px) {
-						font-size: 850%;
-					}
-
-					@container (max-width: 320px) {
-						font-size: 700%;
-					}
-
-					@container (max-width: 250px) {
-						font-size: 500%;
+						font-size: 30cqw;
 					}
 				}
 
 				.beautitab-greeting {
 					font-size: 3rem;
 
 					@container (max-width: 520px) {
-						font-size: 2.5rem;
-					}
-
-					@container (max-width: 320px) {
-						font-size: 2rem;
-					}
-
-					@container (max-width: 250px) {
-						font-size: 1.5rem;
+						font-size: 8cqw;
 					}
 				}
 			}

React/Components/App/App.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState, useRef } from "react";
 import { useObsidian } from "../../Context/ObsidianAppContext";
-import { TFile, getIcon, requestUrl } from "obsidian";
+import { TFile, getIcon } from "obsidian";
 import getTime from "React/Utils/getTime";
 import Observable from "src/Utils/Observable";
 import BeautitabPlugin from "main";
@@ -45,6 +45,7 @@ const App = ({
 		settingsObservable.getValue()
 	);
 	const [time, setTime] = useState(getTime(settings.timeFormat));
+	const mainDivRef = useRef<HTMLDivElement>(null);
 
 	const obsidian = useObsidian();
 	const background = useMemo(
@@ -119,6 +120,13 @@ const App = ({
 		};
 	}, [setSettings]);
 
+	/**
+	 * Auto focus so key presses launch search
+	 */
+	useEffect(() => {
+		mainDivRef?.current?.focus();
+	}, []);
+
 	return (
 		<div
 			className={`beautitab-root ${
@@ -136,6 +144,13 @@ const App = ({
 			style={{
 				backgroundImage: `url("${background}")`,
 			}}
+			onKeyDown={() => {
+				plugin.openSwitcherCommand(
+					settings.inlineSearchProvider.command
+				);
+			}}
+			tabIndex={0} // Make the div focusable so we can capture key strokes
+			ref={mainDivRef}
 		>
 			<div className="beautitab-wrapper">
 				<div className="beautitab-top">

main.ts

@@ -133,13 +133,11 @@ export default class BeautitabPlugin extends Plugin {
 	openSwitcherCommand(command: string): void {
 		const pluginID = command.split(":")[0];
 		//@ts-ignore
-		const enabledPlugins = this.app.plugins.enabledPlugins as Set<string>;
+		const plugins = this.app.plugins.plugins;
 		//@ts-ignore
 		const internalPlugins = this.app.internalPlugins.plugins;
-		if (
-			enabledPlugins.has(pluginID) ||
-			internalPlugins[pluginID]?.enabled
-		) {
+
+		if (plugins[pluginID] || internalPlugins[pluginID]?.enabled) {
 			//@ts-ignore
 			this.app.commands.executeCommandById(command);
 		} else {

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "beautitab",
 	"name": "Beautitab",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"minAppVersion": "0.15.0",
 	"description": "Creates a customizable new tab view with beautiful backgrounds, quotes, search, and more.",
 	"author": "Andrew McGivery",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-beautitab",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"description": "A plugin for Obsidian.MD that creates a customizable new tab view with beautiful backgrounds, quotes, search, and more.",
 	"main": "dist/main.js",
 	"scripts": {

versions.json

@@ -15,5 +15,8 @@
 	"1.5.0-beta.3": "0.15.0",
 	"1.5.0-beta.4": "0.15.0",
 	"1.5.0-beta.5": "0.15.0",
-	"1.5.0": "0.15.0"
+	"1.5.0": "0.15.0",
+	"1.6.0-beta.1": "0.15.0",
+	"1.6.0-beta.2": "0.15.0",
+	"1.6.0": "0.15.0"
 }