Skip to content
This repository was archived by the owner on Sep 4, 2025. It is now read-only.

feat: Open Pseudo-tabs for the currently opened page #12

Draft
dayvidpham wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

feat: Open Pseudo-tabs for the currently opened page #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2cf688c
feat: Nix flake to add node and npm in a devShell
dayvidpham May 10, 2024
87e4544
feat: Adds TabBar component
dayvidpham May 11, 2024
3e75cf9
chore: Prettier fixed trailling comma
dayvidpham May 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .envrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
use flake .
Copy link
Collaborator

@micahdbak micahdbak May 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yippee the nix stuff!!

4 changes: 4 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/node_modules
/dist
.DS_Store

# Nix/NixOS/direnv
.direnv/
result
61 changes: 61 additions & 0 deletions flake.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

25 changes: 25 additions & 0 deletions flake.nix
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
inputs = {
nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
flake-utils.url = "github:numtide/flake-utils";
};

outputs = inputs@{ self, nixpkgs, flake-utils, ... }:
flake-utils.lib.eachDefaultSystem (system:
let
pkgs = nixpkgs.legacyPackages.${system};
nodePkgs = pkgs.nodejs_18.pkgs;
nativeBuildInputs = [
pkgs.nodejs_18
];
in {
devShells.default = pkgs.mkShell {
inherit nativeBuildInputs;

shellHook = ''
echo "node `node --version`"
echo "npm `npm --version`"
'';
};
});
}
31 changes: 31 additions & 0 deletions lib/VSCode/navigation/TabBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react';

import pythonIcon from '../images/python.png';

export const TabBar = ({ view }) => {
Copy link
Collaborator

@micahdbak micahdbak May 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm happy with this implementation; thanks!

Copy link
Collaborator

@micahdbak micahdbak May 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Assuming I use HashRouter as I commented in the related issue, maybe "view" can be renamed to "filename". Then it can be up to the router to describe what is put in the TabBar.

// border-b-0, border-l-0 does not work when border-600 is set
const borderStyle = {
borderBottom: 'none',
borderLeft: 'none',
borderWidth: '1px'
};

// TODO: Maybe adjust layout via `display`,
// currently hardcoding margin values
// use flex and change flex direction to float around the Navbar component?
return (
<header className="flex mb-8">
<div className="flex fixed w-screen background-400 mb-4 lg:ml-80 lg:pt-0 pt-24">
<h1
className="flex items-center background-700 py-1 px-5 gap-2 text-md text-100 font-400 border-600"
style={borderStyle}
>
<img className="w-4 opacity-80 h-4" src={pythonIcon} />
{view}
</h1>
</div>
</header>
);
};

export default TabBar;
1 change: 1 addition & 0 deletions lib/VSCode/navigation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './Navbar.js';
export * from './TabBar.js';
export * from './ThreeLines.js';
export * from './X.js';
15 changes: 6 additions & 9 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,17 @@ import './App.css';
import { VSCodeGuide } from './pages/VSCodeGuide';

function App() {
const [view, setView] = useState('');

useEffect(() => {
const searchParams = new URLSearchParams(window.location.search);

if (searchParams.has('view')) {
setView(searchParams.get('view'));
}
}, []);
const searchParams = new URLSearchParams(window.location.search);
Copy link
Collaborator

@micahdbak micahdbak May 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll update this stuff in a new PR for using the HashRouter, but thanks for looking into why it sucks 😎

let view = 'home.py';
if (searchParams.has('view')) {
view = `${searchParams.get('view')}.py`;
}

return (
<div className="app">
<VSCode.Navbar />
{/* can route using the view string with more pages */}
<VSCode.TabBar view={view} />
<VSCodeGuide />
</div>
);
Expand Down