Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: embed vault views into notes #369

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from

Conversation

JohnGemstone
Copy link

This feature allows users to access Vault-Explorer views directly within their notes, streamlining the process of navigating between views without needing to go to the side panel.
Users can define group views as usual and then reference them for embedding like so:

```vault-explorer
group: Reading
view: grid
```

#368

Appreciate any feedback, questions or changes.

Cheers!

@decaf-dev
Copy link
Owner

Overall, everything looks good. I made sure to test it out. There are a few small things like padding/scrolling that need to be fixed when the view is embedded, but this is a great MVP for this feature.

Thanks for upgrading the Typescript version to 5.6.x. That actually solves an error that I was getting on build because of the verbatimModuleSyntax flag.

I added a few comments on things that I think could be improvement. Thanks for your contribution and diving into Svelte!

Comment on lines +145 to +150
// Embedded settings
export let embedSettings: Record<string, any> = {};

let embedded = embedSettings?.embedded ?? false;
let embeddedGroup = embedSettings?.group ?? null;
let embeddedView = embedSettings?.view ?? null;
Copy link
Owner

Choose a reason for hiding this comment

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

Could you make an interface for the expected settings instead of using Record<string,any>

For example,

interface EmbedSettings {
  group?: string;
  view: string;
}

and then set the embedSettings to that use that interface undefined by default?

export let embedSettings: EmbedSettings | undefined = undefined;

// Note: Multiple groups can be the same name, in which case the first group found will be selected
function selectGroupByName(name: string) {
const { groups } = customFilter;
const group = groups.find((group) => group.name === name);
Copy link
Owner

Choose a reason for hiding this comment

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

I think it would be good to make the group case insensitive.

group.name.toLowercase() === name.toLowercase()

So someone could put

```vault-explorer
group: reading
```

Open to thoughts on this

Comment on lines +364 to +366
@container grid-container (min-width: 500px) {
.vault-explorer-grid-card {
max-width: min(50% - 1rem, 425px);
Copy link
Owner

Choose a reason for hiding this comment

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

Why is @container used in this case? Is it used to place this style inside of the grid-card.svelte file instead of in the parent component?

@decaf-dev
Copy link
Owner

@JohnGemstone I am sorry, I thought I had finished the review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants