page browser

An important aspect of a note taking app is browsing notes you have already written. For daily notes, I have a daily, weekly and monthly overview. I collect individual blocks into pages by tagging them. However, browsing the pages is actually fairly difficult! One reason I liked non-linear notebooks is you can kinda hide away the chaos of tags and just claim "you search it on demand". I can just summon a page when I need it.

This masks the fact that I completely lose track of my pages within a week. I will first share the current state of page browsing, follow up with issues I had with scaling this approach, and end with a solution I was happy with.

I don't like folders, and I tried a tree-like structure but you can see the pagination kick in making the page browser a fairly bad overview. The styling also doesn't match the new aesthetics, but that is secondary. I thought pinned blocks are important, journal pages are important and deserve their own tab. I also tried different modes including graph view. One of my first thoughts about lifelab was not god damn graph gimmick, but I chickened out and vibed it in anyway. Yeah. it is pretty bad.

I had claude mock up a ton of html demos to salvage this but I kept hitting the same issue. Claude assumes the concepts have some semantic value, but I don't. From my perspective, we can be taking notes about people, or anime, or mosquito DNA sequencing experiments, or Apple Intelligence feature localization. We can collect any kind of tags with any kind of nesting. The only opinionated thing I introduce is mandatory daily view and a sense of timeline. I don't want to force anyone to have person as a concept nor is there any reference in the code for it.

I rephrased the problem of "how can this thing serve anyone" to "how do I make anyone help themselves" and the answer was fairly obvious: just code it yourself! Right now /pages/ endpoint is a dedicated, 5k JS line long react component that queries the database and renders these horrendous views in the 3 screenshots above. Instead, it should.. just be a page. With code blocks that query the database! Users can modify it to their liking and I don't have to deal with it. One addition I made was a 2D grid view (where all the blocks are rendered on a grid instead of sequentially. Any page can turn this view on)

I added 2 default code blocks, which users can modify, and they are free to use the nb.graph API to make something nicer than the grotesque solution I came with. The drawback is each block does a separate database query, and if you are not careful it can be very wasteful, but I decided to pay this cost to have less custom UI.