Mara-Li / obsidian-explorer-hider

Hide folder & files from the explorer using a plugin and a bit of CSS :>
Other
3 stars 0 forks source link

Explorer Hider

For years, I have used a snippet named Folder Hider that does basically this:

.nav-file [data-path="path/to/file.md"],
.nav-folder-title[data-path^="path/to/folder"],
.nav-folder-title[data-path^="path/to/folder"] + .nav-folder-children {
    display: none;
}

This snippet hides files I don't want to see.

However, managing a snippet has some caveats:

So, I decided to create a plugin to manage this for me!

🧰 Usage

Hiding files/folders

To hide a file or folder, you can right-click on the file/folder in the explorer and select Hide << name >>.

If Always hide in bookmark is enabled, the file/folder will also be hidden in the bookmarks when the command is used from the explorer.

[!TIP] For folders, the rule will be ^= (starts with) and for files = (exact match).

See Experimental for more information about the bookmarks panel and shortcuts.

Display all or hide all

Using the "eye" ribbon button, you can enable or disable all the rules.

⚙️ Configuration

The settings are divided into two parts:

It also displays a list of all the rules, with the option to:

For string rules, you can also edit the attribute selector and the rule itself.

General configuration

You can choose to save the CSS in a snippet (in your .obsidian/snippets folder) or directly inject it into the page. Use this if, for example, you want to keep the folder hidden without using the plugin (for instance, when disabling or uninstalling it).

You can also choose to automatically hide excluded files (obsidian files & folder settings).

[!NOTE] If you add files in the filter, you need to reload the hidden files to apply the changes.

Bookmarks

[!warning] This option will be disabled if the bookmarks plugin is not enabled.

You can choose to hide files in the bookmarks panel too. This will hide the file in the bookmarks panel when the command is used from the explorer.

Experimental: File-menu and shortcuts

It is possible to add a button in the file-menu of the bookmarks panel that allows hiding files from bookmarks. However, this feature has some caveats and bugs.

  1. Currently, there is no way to use the API for creating the file-menu, so I had to use a workaround that can cause some visual bugs and weird behavior.
  2. The HTML data of the bookmarks only displays the path in the bookmarks, not the real path. This path is needed to hide the file, so in some conditions, the bookmarks will be registered as a string and not a file (this mostly appears if the file is registered under a group). Consequently, it won't be followed if the bookmark is renamed or moved.
  3. If two identical bookmarks exist (i.e., they lead to the same file, even with different names), only one will be detected and hidden. If the same file is in two different groups, the bug doesn't occur.

Creating new rules

Using attribute selectors, you can hide multiple files or folders at once. For example, to hide all the files in a folder, you can set [startswith] <path>. See CSS attribute selectors for more information.

Each attribute corresponds to:

Attribute CSS Description
Exact = Exact match with the string
Contains *= Contains the string
Ends with $= Ends with the string (suffix)
Starts with ^= Starts with the string (prefix)
List ~= String is a whitespace-separated list of words, one of which matches exactly
Text followed by hyphen \|= The match can be on exactly the value or can begin with the value immediately followed by a hyphen (-)

The result will be:

[!Note] If the tree for bookmarks and explorer is changed by the Obsidian team, the plugin/snippets will break. I will try to keep it updated, but I can't guarantee it.

📥 Installation

🎼 Languages

To add a translation:

  1. Fork the repository.
  2. Add the translation in the src/i18n/locales folder with the name of the language (e.g., fr.json).
    • You can get your locale language from Obsidian using obsidian translation or using commands (in templater, for example): <% tp.obsidian.moment.locale() %>
    • Copy the content of the en.json file into the new file.
    • Translate the content.
  3. Edit i18n/i18next.ts:
    • Add import * as <lang> from "./locales/<lang>.json";
    • Edit the resources part by adding: <lang>: {translation: <lang>}