Dev dashboard

src/workbench/parts/workspace/workspace.ts

@@ -6,6 +6,8 @@ import { IInstantiationService } from "src/platform/instantiation/common/instant
 import { IEditorService } from "src/workbench/parts/workspace/editor/editorService";
 import { OPERATING_SYSTEM, Platform } from 'src/base/common/platform';
 import { Orientation } from 'src/base/browser/basic/dom';
+import { Priority } from 'src/base/common/event';
+import { DashboardView } from 'src/workbench/services/dashboard/dashboardView';
 
 export const IWorkspaceService = createService<IWorkspaceService>('workspace-service');
 
@@ -52,8 +54,20 @@ export class WorkspaceComponent extends Component implements IWorkspaceService {
             });
         }
 
+        // layout.push({
+        //     component: this.editorService,
+        //     initSize: null,
+        //     maximumSize: null,
+        //     minimumSize: null,
+        // });
+        const dashboardView = this.instantiationService.createInstance(DashboardView, {
+            id: 'workspace-dashboard',
+            priority: Priority.Low,
+            content: ["Pinned Notes", "Recent Items", "What's New"],
+        });
+
         layout.push({
-            component: this.editorService,
+            component: dashboardView,
             initSize: null,
             maximumSize: null,
             minimumSize: null,

src/workbench/services/dashboard/dashboardSlider.ts

@@ -0,0 +1,41 @@
+import { IInstantiationService } from "src/platform/instantiation/common/instantiation";
+import { Component } from "src/workbench/services/component/component";
+
+export class DashboardSlider extends Component {
+
+    private items: HTMLElement[];
+
+    constructor(
+        @IInstantiationService instantiationService: IInstantiationService,
+        items: HTMLElement[],
+    ) {
+        super('dashboard-slider', null, instantiationService);
+        this.items = items;
+    }
+
+    public createView(): HTMLElement {
+        const sliderContainer = document.createElement('div');
+        sliderContainer.classList.add('slider');
+
+        this.items.forEach(item => {
+            const itemContainer = document.createElement('div');
+            itemContainer.classList.add('slider-item');
+            itemContainer.appendChild(item);
+            sliderContainer.appendChild(itemContainer);
+        });
+
+        // Add smooth scrolling
+        sliderContainer.style.scrollBehavior = 'smooth';
+
+        return sliderContainer;
+    }
+
+    protected override _createContent(): void {
+        const viewElement = this.createView();
+        this.element.appendChild(viewElement);
+    }
+
+    protected override _registerListeners(): void {
+        // Additional listeners (if needed)
+    }
+}

src/workbench/services/dashboard/dashboardSubView.ts

@@ -0,0 +1,88 @@
+import { DashboardSlider } from "./dashboardSlider";
+import { Component } from "src/workbench/services/component/component";
+import { IInstantiationService } from "src/platform/instantiation/common/instantiation";
+import { IDashboardViewOpts } from "src/workbench/services/dashboard/dashboardView";
+
+export class DashboardSubView extends Component {
+    private slider: DashboardSlider;
+    private opts: IDashboardViewOpts;
+
+    constructor(
+        @IInstantiationService instantiationService: IInstantiationService,
+        opts: IDashboardViewOpts
+    ) {
+        super("navigation-view", null, instantiationService);
+        this.opts = opts;
+        this.slider = new DashboardSlider(
+            instantiationService,
+            this.createSliderItems(opts.content || [])
+        );
+    }
+
+    public render(): HTMLElement {
+        const subViewContainer = document.createElement("div");
+        subViewContainer.classList.add("dashboard-subview");
+        subViewContainer.setAttribute("data-id", this.opts.id);
+
+        // Create section header
+        const header = document.createElement("div");
+        header.classList.add("section-header");
+
+        // Append title and dropdown to the header
+        const title = this.__createSubViewTitle(this.opts.title || "Default Title");
+        const sortDropdown = this.__createSortDropdown();
+
+        header.appendChild(title);
+        header.appendChild(sortDropdown);
+
+        // Append header to container
+        subViewContainer.appendChild(header);
+
+        // Add slider content
+        const sliderElement = this.slider.createView();
+        subViewContainer.appendChild(sliderElement);
+
+        return subViewContainer;
+    }
+
+    protected override _createContent(): void {
+        this.render();
+    }
+
+    protected override _registerListeners(): void {
+        // Add event listeners here if necessary
+    }
+
+    private __createSortDropdown(): HTMLElement {
+        const sortDropdown = document.createElement("div");
+        sortDropdown.classList.add("sort-dropdown");
+
+        // Add triangle icon
+        const triangleIcon = document.createElement("div");
+        triangleIcon.classList.add("triangle-icon");
+        sortDropdown.appendChild(triangleIcon);
+
+        // Add text
+        const dropdownText = document.createElement("div");
+        dropdownText.classList.add("dropdown-text");
+        dropdownText.textContent = "Last modified";
+        sortDropdown.appendChild(dropdownText);
+
+        return sortDropdown;
+    }
+
+    private __createSubViewTitle(titleText: string): HTMLElement {
+        const title = document.createElement("h2");
+        title.textContent = titleText;
+        return title;
+    }
+
+    private createSliderItems(content: string[]): HTMLElement[] {
+        return content.map((itemText) => {
+            const itemElement = document.createElement("div");
+            itemElement.textContent = itemText;
+            itemElement.classList.add("slider-item");
+            return itemElement;
+        });
+    }
+}

src/workbench/services/dashboard/dashboardView.ts

@@ -0,0 +1,128 @@
+import "src/workbench/services/dashboard/media/dashboard.scss";
+import { Priority } from "src/base/common/event";
+import { IInstantiationService } from "src/platform/instantiation/common/instantiation";
+import { Component } from "src/workbench/services/component/component";
+import { DashboardSubView } from "src/workbench/services/dashboard/dashboardSubView";
+
+export interface IDashboardViewOpts {
+
+    /**
+     * The unique identifier of the dashboard view.
+     */
+    id: string;
+
+    /**
+     * When adding/removing view, the view with higher priority will show at top
+     * first.
+     * @default Priority.Low
+     */
+    priority?: Priority;
+
+    /**
+     * An array of content items (e.g., strings or identifiers) to be displayed within the view.
+     * Each item represents a sinågle content block to be rendered in the dashboard subview.
+     * @optional
+     */
+    content?: string[];
+
+    /**
+     * The title for a dashboard view (especially used in subviews)
+     */
+    title?: string;
+}
+
+export class DashboardView extends Component {
+
+    // [fields]
+
+    private subViews: DashboardSubView[] = [];
+
+    // [constructor]
+
+    constructor(
+        opts: IDashboardViewOpts,
+        @IInstantiationService instantiationService: IInstantiationService
+    ) {
+        super('dashboard-view', null, instantiationService);
+    }
+
+    // [public methods]
+
+    public createView(): HTMLElement {
+        const container = document.createElement("div");
+        container.classList.add("dashboard-view");
+
+        // Create SubViews for each section
+        const sections: IDashboardViewOpts[] = [
+            {
+                id: "welcome-section",
+                priority: Priority.High,
+                title: "Hello,"
+            },
+            {
+                id: "pinned-notes",
+                priority: Priority.High,
+                title: "Pinned",
+                content: this.generatePlaceholderItems("Pinned"),
+            },
+            {
+                id: "recent-items",
+                priority: Priority.Normal,
+                title: "Recent",
+                content: this.generatePlaceholderItems("Recent"),
+            },
+            {
+                id: "new-features",
+                priority: Priority.Low,
+                title: "New Features",
+                content: this.generatePlaceholderItems("New Features"),
+            },
+        ];
+
+        sections.forEach((sectionOpts) => {
+            if (sectionOpts.id === "welcome-section") {
+                // TODO: prepare some welcome sentences
+                const welcomeSection = this.createWelcomeSection(sectionOpts.title || "Hello, user!");
+                container.appendChild(welcomeSection);
+            } else {
+                // Create other subviews
+                const subView = new DashboardSubView(
+                    this.instantiationService,
+                    sectionOpts
+                );
+                container.appendChild(subView.render()); // Append the rendered subview to the container
+                this.subViews.push(subView); // Store for future use
+            }
+        });
+
+        return container;
+    }
+
+    protected override _createContent(): void {
+        const viewElement = this.createView();
+        this.element.appendChild(viewElement);
+    }
+
+    protected override _registerListeners(): void {
+
+    }
+
+    // [private methods]
+    private createWelcomeSection(title: string): HTMLElement {
+        const welcomeSection = document.createElement("div");
+        welcomeSection.classList.add("welcome-section");
+        welcomeSection.innerHTML = `
+            <h1>${title}</h1>
+            <button class="new-note-btn">+ New Note</button>
+        `;
+        return welcomeSection;
+    }
+
+    private generatePlaceholderItems(sectionId: string): string[] {
+        const items: string[] = [];
+        for (let i = 1; i <= 10; i++) {
+            items.push(`${sectionId} Item ${i}`);
+        }
+        return items;
+    }
+}