feat(ui): bottom nav

[bennypowers]

Closes #202

I had some difficulty testing locally

$ yarn run-mastodon
yarn run v1.22.19
$ node ./bin/run-mastodon.js
Installing Mastodon...
Setting up mastodon database...
ChildProcessError: Command failed: createdb -h 127.0.0.1 -U pinafore -w pinafore_development
createdb: error: connection to server at "127.0.0.1", port 5432 failed: FATAL:  Ident authentication failed for user "pinafore"
 `createdb -h 127.0.0.1 -U pinafore -w pinafore_development` (exited with error code 1)
    at callback (/home/bennyp/Developer/pinafore/node_modules/child-process-promise/lib/index.js:33:27)
    at ChildProcess.exithandler (node:child_process:406:5)
    at ChildProcess.emit (node:events:527:28)
    at maybeClose (node:internal/child_process:1092:16)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) {
  code: 1,
  childProcess: {
    _forkChild: [Function: _forkChild],
    ChildProcess: [Function: ChildProcess],
    exec: [Function: exec],
    execFile: [Function: execFile],
    execFileSync: [Function: execFileSync],
    execSync: [Function: execSync],
    fork: [Function: fork],
    spawn: [Function: spawn],
    spawnSync: [Function: spawnSync]
  },
  stdout: '',
  stderr: 'createdb: error: connection to server at "127.0.0.1", port 5432 failed: FATAL:  Ident authentication failed for user "pinafore"\n'
}
error Command failed with exit code 1.

that was after installing enabling and starting postgres, then CREATE USER mastodon CREATEDB; and CREATE USER pinafore CREATEDB;

🤷

[nolanlawson]

@bennypowers Please see the create user query here: https://github.com/nolanlawson/pinafore/blob/master/CONTRIBUTING.md#running-integration-tests

Last I checked, I also had to run this in an Ubuntu 18.04 container in Podman to get this to work. I should probably try to improve how these tests are run.

Thanks for the PR! I was out of town the past two weeks but I will take a look soon.

[nolanlawson]

It's not clear to me why we need to set this in three different places.

Historically, the way I've done this is to toggle the entire <style> tag itself. You can see some examples here:

pinafore/src/build/template.html

Lines 35 to 44 in b152359

	<style id="theGrayscaleStyle" media="only x">
	/* Firefox doesn't seem to like applying filter: grayscale() to
	* the entire body, so we apply individually.
	*/
	img, svg, video,
	input[type="checkbox"], input[type="radio"],
	.inline-emoji, .theme-preview {
	filter: grayscale(100%);
	}
	</style>

pinafore/src/routes/_store/observers/grayscaleObservers.js

Lines 5 to 16 in 16e6634

	export function grayscaleObservers (store) {
	if (!process.browser) {
	return
	}
	store.observe('enableGrayscale', enableGrayscale => {
	const { instanceThemes, currentInstance } = store.get()
	const theme = instanceThemes && instanceThemes[currentInstance]
	style.setAttribute('media', enableGrayscale ? 'all' : 'only x') // disable or enable the style
	switchToTheme(theme, enableGrayscale)
	})
	}

[bennypowers]

agreed. i'll have to pull up my sleeves and try to get my local env running so i can clean this up

[nolanlawson]

Is this orthogonal to the PR? Does this have an effect with different languages? (I can't think of any bottom-to-top languages, but I'm sure they exist?)

[bennypowers]

you could take it out 🤷

[nolanlawson]

Closing in favor of #2205, thanks for opening this PR! 🙇