Simplify UI by getting rid of panels

[ProLoser]

My files are probably ordered in a specific way for a reason. Instead of breaking this order by plucking out symbols and breaking them apart into groups, you've actually made it really annoying to navigate.

Instead, I propose dropping collapsable 'panels' entirely. I would suggest instead showing a nested tree view that roughly mirrors the actual file itself. So I would see imports, variables, class, methods (with functions nested in methods or strewn about the file as they exist in the physical file), exports, etc. IN THEIR RESPECTIVE ORDER!

The key to making this overload of information digestible would be adding the ability to filter or toggle what types of symbols are shown in the tree. I could toggle showing vars, imports, exports, and they would simply disappear from the tree. Perhaps make this set of toggles a bunch of icon-only buttons (with tooltips) that run along the bottom edge of the pane. Then use icons to help me understand what kind of symbol each row in the tree IS, along with indentation.

This will create a much easier to navigate experience.

[hex13]

I've added option in settings for disabling "panel": Should Show Types and I've added option for sorting (by type or by position in file).

[ProLoser]

This doesn't make stuff easier. I'm saying instead of sorting things within each accordion you should combine everything into one list and allow me to toggle hide some of the items in the list. For instance, I REALLY don't know need to see the lines of code or imports in lupa. LOC could easily be determined by scrolling to the bottom of the document and it's just uselessly taking up room. Imports could also easily be determined by simply scrolling to the top of the document, and most linters will notify you if you use a variable (or imported module) that doesn't exist.

This package should be used primarily for function, method and class declarations. I should be able to get rid of almost everything else.

[hex13]

Imports could also easily be determined by simply scrolling to the top of the document, and most linters will notify you if you use a variable (or imported module) that doesn't exist. this is not exactly the point. Files can be long (so scrolling can be cumbersome) and may have many chaotic dependencies. Having this in one place can be helpful.

Besides sidebar is navigable and you can click on import to jump to the file.

I wrote "you" but I meant rather "user" (maybe some users don't need this at all, but some others could profit from this feature, including myself).

This package should be used primarily for function, method and class declarations.

You can filter results by writing e.g. type:function, type:class (or just t:function, t:class)

You could also combine filter, although now it only works in logical and mode (you can't for now write something right this type:function OR type:class but it's open question).

Second open question is setting permanent filter. Now if you filter something, you can't be able to search in the same time (because there is one input area for filtering and searching) . So maybe I could add some permanent filter in settings, like this:

It would enable you to save you what should be displayed, what not.

[ProLoser]

But in this screenshot don't you see how sort of confusing this UI is? There's just too much clutter on the screen.

The file tree is structured based on location of files, and when you do a project wide search it orders alphabetically (as well as some other rules). But primarily things or structured in a nested manner with structure.

There isn't a big reason to break from this convention, the only reason I even use lupa is because the other packages that show a symbol tree don't work with ES6 classes.

Your current UI does not have a true tree structure that resembles the contents of a file. It's simply a filtered set of items grouped together, breaking structure. Lets say you have 2 classes residing within 1 file, how am I supposed to tell which methods fall under which class? How do I identify what are methods and what are private functions? Although yes, you could add more colors and symbles and labels and groups and I'd eventually learn them, you could just structure everything like a filetree and BAM, instant comprehension based on passed visual paradigms without additional UI clutter.

paginate()

BaseObject
  age: integer
  constructor()
    customPaginator()

UserObject extends BaseObject
  constructor()
  walk()
  climb()

DogObject extends BaseObject
  run()

You can still show things like imports and other such fields if they are in fact so important, but they will be much easier to find.