Merge pull request #2 from sefatanam/1-after-install-ui-not-working-w…

…indows

feat: add default homepage loading configuration

css/style.css

@@ -49,15 +49,15 @@ body > * {
 }
 
 .heading input[type="text"]{
-  width: 32rem;
+  width: clamp(20%,32rem,100%) ;
   padding: .7rem;
-  border-radius: 0.5rem;
-  outline: none;
-  border: none;
+  border-radius: 6px;
+  outline: 1px solid var(--vscode-commandCenter-border);
+  border: 1px solid var(--vscode-commandCenter-border);
   font-size: var(--vscode-font-size);
   border: 1px solid var(--vscode-input-background);
-  background-color: var(--vscode-input-background);
-  color: var(--vscode-input-foreground);
+  background-color: var(--vscode-commandCenter-background);
+  color: var(--vscode-commandCenter-foreground);
   font-weight: bold;
 }
 
@@ -92,11 +92,14 @@ body > * {
   font-size: calc(var(--vscode-editor-font-size) / 2);
   user-select: text;
 }
+
+.title .icon,
 .card .icon {
   --size: 1.2rem;
   height: var(--size);
   width: var(--size);
   color: var(--vscode-input-foreground);
+  cursor: pointer;
 }
 .card:hover {
   background: var(--vscode-textLink-background);

package.json

@@ -2,7 +2,7 @@
   "name": "pretty-home",
   "displayName": "Pretty Home",
   "description": "Pretty Home is a VS Code extension designed to enhance the appearance of your recent projects view, making it more organized and visually appealing",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "license": "MIT",
   "icon": "icon.png",
   "publisher": "sefatanam",
@@ -17,15 +17,37 @@
   "categories": [
     "Other"
   ],
-  "activationEvents": [],
+  "activationEvents": ["onStartupFinished"],
   "main": "./dist/extension.js",
   "contributes": {
     "commands": [
       {
         "command": "extension.prettyHome",
-        "title": "Pretty Home ✨"
+        "title": "Recent Projects ✨",
+        "category": "Pretty Home"
+      },
+      {
+        "command": "extension.prettyHomeSettings",
+        "title": "Settings",
+        "category": "Pretty Home"
+      },
+      {
+        "command": "extension.prettyHomeGiveStar",
+        "title": "Give star 🌟 in Github to support",
+        "category": "Pretty Home"
+      }
+    ],
+    "configuration": {
+      "type": "object",
+      "title": "Pretty Home Settings",
+      "properties": {
+        "prettyHome.showOnStartup": {
+          "type": "boolean",
+          "default": true,
+          "description": "Show Pretty Home on startup when no folder or workspace is loaded."
+        }
       }
-    ]
+    }
   },
   "scripts": {
     "vscode:prepublish": "pnpm run package",

src/extension.ts

@@ -1,11 +1,30 @@
 import * as vscode from "vscode";
-import { showPrettyHomeCommand } from "./lib";
-
+import { getWebviewReference, openProjectInGithub, showPrettyHomeCommand, showPrettyHomeSettingsCommand } from "./lib";
+import { State } from "./lib/state";
+const state = State.getInstance();
 
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
 export async function activate(context: vscode.ExtensionContext) {
-	showPrettyHomeCommand(context);
+
+	await showPrettyHomeCommand(context, state);
+	await showPrettyHomeSettingsCommand(context);
+	await openProjectInGithub(context,state);
+
+	// Open the webview by default when VS Code starts and no folder/workspace is loaded
+	vscode.window.onDidChangeWindowState((e) => {
+		try {
+			if (getWebviewReference(state)) {return;}
+			const config = vscode.workspace.getConfiguration('prettyHome');
+			const showOnStartup = config.get('showOnStartup', false);
+			const shouldOpenPrettyHome = e.active && !vscode.workspace.workspaceFolders && showOnStartup;
+			if (shouldOpenPrettyHome) {
+				vscode.commands.executeCommand('extension.prettyHome');
+			}
+		} catch (err: any) {
+			vscode.window.showErrorMessage("Something went wront to load by default.");
+		}
+	});
 }
 
 // This method is called when your extension is deactivated

src/lib/command.ts

@@ -1,19 +1,26 @@
 import path from 'path';
 import * as vscode from 'vscode';
 import { APP, COMMAND } from "./constant";
-import { gerRecentProjects, openProject } from "./engine";
+import { gerRecentProjects, openProject, showSettingsDialog } from "./engine";
+import { State } from "./state";
+import { getWebviewReference, setWebviewReference } from "./store";
 import { RecentProject } from "./types";
 import { getWebviewContent, makeProjectCards } from "./views";
 
 
-export async function showPrettyHomeCommand(context: vscode.ExtensionContext) {
+export async function showPrettyHomeCommand(context: vscode.ExtensionContext, state: State) {
     const disposable = vscode.commands.registerCommand(
         "extension.prettyHome",
         async () => {
 
+            if (getWebviewReference(state)) {
+                vscode.window.showInformationMessage(`You're already in Pretty Home✨`);
+                return;
+            }
+
             const panelIconPath = {
-                light: vscode.Uri.file(path.join(context.extensionPath, 'src/assets', 'icon.png')),
-                dark: vscode.Uri.file(path.join(context.extensionPath, 'src/assets', 'icon.png'))
+                light: vscode.Uri.file(path.join(context.extensionPath, 'assets', 'icon.png')),
+                dark: vscode.Uri.file(path.join(context.extensionPath, 'assets', 'icon.png'))
             };
 
             const webviewPanel = vscode.window.createWebviewPanel(
@@ -22,6 +29,7 @@ export async function showPrettyHomeCommand(context: vscode.ExtensionContext) {
                 vscode.ViewColumn.One,
                 {
                     enableScripts: true,
+                    retainContextWhenHidden: true,
                 }
             );
             const projects = await gerRecentProjects();
@@ -48,15 +56,38 @@ export async function showPrettyHomeCommand(context: vscode.ExtensionContext) {
                 undefined,
                 context.subscriptions
             );
+            setWebviewReference(webviewPanel, state);
+
             webviewPanel.webview.html = getWebviewContent(projects, context, webviewPanel);
-            vscode.window.showInformationMessage('Pretty Home Initiate Successfully!');
+            vscode.window.showInformationMessage('Pretty Home Initialized ✨');
         }
     );
 
     context.subscriptions.push(disposable);
 }
 
 
+export async function showPrettyHomeSettingsCommand(context: vscode.ExtensionContext) {
+    const defaultSettingDisposable = vscode.commands.registerCommand(
+        "extension.prettyHomeSettings",
+        async () => {
+            await showSettingsDialog(context);
+        });
+
+    context.subscriptions.push(defaultSettingDisposable);
+}
+
+export async function openProjectInGithub(context: vscode.ExtensionContext, state: State) {
+    const disposable = vscode.commands.registerCommand(
+        "extension.prettyHomeGiveStar",
+        async () => {
+            const repoUrl = 'https://github.com/sefatanam/vscode-pretty-home';
+
+            vscode.env.openExternal(vscode.Uri.parse(repoUrl));
+        });
+    context.subscriptions.push(disposable);
+}
+
 function filterProjects(projects: RecentProject[], name: string) {
     if (!name) { return projects; }
 

src/lib/constant.ts

@@ -1,6 +1,7 @@
 export const APP = {
     WEB_VIEW_TYPE: 'pretty-home',
-    TITLE: 'Recent Projects | Pretty-Home'
+    TITLE: 'Recent Projects | Pretty-Home',
+    WEB_VIEW_REF:'webViewRef'
 };
 
 export const COMMAND = {

src/lib/engine.ts

@@ -33,3 +33,22 @@ export function openProject(path: string) {
   }
 }
 
+/**
+ * Show the settings dialog with a checkbox
+ * @param {vscode.ExtensionContext} context
+ */
+export async function showSettingsDialog(context: vscode.ExtensionContext) {
+  const config = vscode.workspace.getConfiguration('prettyHome');
+  const selectedOption = await vscode.window.showQuickPick(
+    ['Yes', 'No'],
+    {
+      placeHolder: 'Do you want to load Pretty Home by default on startup?',
+      ignoreFocusOut: true,
+    }
+  );
+
+  if (selectedOption === 'Yes' || selectedOption === 'No') {
+    const newValue = selectedOption === 'Yes';
+    await config.update('showOnStartup', newValue, vscode.ConfigurationTarget.Global);
+  }
+}

src/lib/index.ts

@@ -1,5 +1,7 @@
 export * from './command';
 export * from './constant';
 export * from './engine';
+export * from './state';
+export * from './store';
 export * from './types';
 export * from './views';

src/lib/state.ts

@@ -0,0 +1,19 @@
+import * as vscode from 'vscode';
+export class State {
+    #data: { [key: string]: any } = {};
+    constructor() {
+        if (State.instance) {
+            vscode.window.showErrorMessage(`Pretty Home instance already running.`);
+        }
+    }
+    get data() {
+        return this.#data;
+    }
+    static instance: State;
+    static {
+        this.instance = new State();
+    }
+    static getInstance() {
+        return this.instance;
+    }
+}

src/lib/store.ts

@@ -0,0 +1,16 @@
+import * as vscode from 'vscode';
+import { APP } from "./constant";
+import { State } from "./state";
+
+export function setWebviewReference(webviewPanel: vscode.WebviewPanel, state: State) {
+    state.data[APP.WEB_VIEW_REF] = webviewPanel;
+}
+
+export function getWebviewReference(state: State): boolean {
+    try {
+        const windowRef: vscode.WebviewPanel = state.data[APP.WEB_VIEW_REF];
+        return windowRef.visible;
+    } catch (_) {
+        return false;
+    }
+}

src/lib/views.ts

@@ -24,7 +24,7 @@ export const getWebviewContent = (projects: RecentProject[], context: ExtensionC
 export const makeProjectCards = (projects: RecentProject[]): string => {
 
 	if (projects.length <= 0) {
-		return `<p>No Project found</p>`;
+		return `<p>No Project found.</p>`;
 	}
 
 	const cardsHTML = projects.map(project => `