Skip to content

Valet 0.2.0

Choose a tag to compare

@IbrahimIrfan IbrahimIrfan released this 06 Nov 02:32
· 32 commits to master since this release

Added

  • Home Assistant cards have icons and colour. Each row gets a small icon from what the entity is (a lock, a garage door, a person, energy, money, temperature), and the ones that say how things stand are coloured: locked, closed and at home in green, unlocked or left open in amber. locked and not_home read as Locked and Away. An entity in cards can be { id, icon } to choose its icon.

  • A widget can span columns: cols (1 to 8) on a widget entry, beside rows, in a section with sizes or with columns per screen. It never reaches past the last column, so cols: 2 in a grid of three is two thirds of a computer's row and the whole row on a phone.

  • Wide pages have room for more: past 1760px the size grid has eight columns instead of six, and a section's columns takes a wide count ({ phone: 1, tablet: 2, desktop: 3, wide: 4 }, up to 8 each), which keeps the desktop count when left out.

  • A section without a heading carries on the grid above it, with the cards' gap between them rather than a section's, so rows of different shapes read as one page.

  • With hero.align: left, the greeting sits at the top left, level with the top bar, and each tab shows its own name in the same place.

  • A tile can draw its share as a pie (summary.pie, coloured by color). Pi-hole's ads blocked uses it, in red.

  • A line chart's series can have a color of its own (#hex or var(--token)), so two lines that mean different things, like power used and solar, read apart.

  • The calendar has a week. A calendar card that's narrower than the month and day side by side but tall enough, like a third of the overview's row or a phone, shows a few days side by side with the hours down the side: only the hours in use, squeezed to the card so it never scrolls up and down, events as blocks in their calendar's colour, all-day ones in a strip on top, today shaded with a line at the time now. Swipe or use the arrows for more days; Today brings it back. A meeting has a small Join button on its block, and tapping any event shows its time, place, calendar and Join, over the week so nothing moves. view: week or view: agenda on the widget holds it to one.

  • appearance.theme: system follows the device over a wallpaper too: light glass when the phone or computer is in light mode, dark glass in dark mode, and the page turns when the device does (at sunset, say), without a reload. The light/dark switch in the top bar shows over a wallpaper then, and overrides it in that browser only; switching back to what the device says follows the device again. The wall display follows the screen with system and stays dark otherwise. auto is unchanged: dark glass over a wallpaper, as before.

  • A wallpaper for each theme: appearance.wallpaper: { light: …, dark: … } (and the same in wallpapers, per tab). dim and blur take { light, dark } too. The plain forms work as they did.

  • Three more views for anything with pictures, chosen per widget with view. coverflow is Cover Flow again, rebuilt: the one in the middle faces you and the rest turn away in 3D, with reflections. masonry is a wall of pictures three rows high that you throw sideways; Immich's On this day uses it. cards is a stack of cards to deal through; Paperless's recent documents (each with its first page, title, sender and date) and Karakeep's saved links use it, and a saved link keeps its Archive button. All three follow the browser's own scrolling, with nothing redrawn as they move, have Previous and Next buttons and the arrow keys, and are a plain row when you ask for reduced motion.

  • A reading pile (Karakeep's From your reading) can take any gallery view, and archiving still works from it.

  • config check names a view a widget's card can't take, and the views it can.

  • The demo's Home tab has the week's meal plan from Mealie under the house and the PC: real food photos, today first. Mealie is down in the demo's story, so the row is the plan it last sent, marked stale.

  • The demo's Media tab has music: Navidrome's most played albums as a cover flow beside The year so far, in place of Requested. The ten albums are real ones whose covers are free to share (CC0, CC BY-SA or public domain), credited on the Credits page.

  • The demo sets reminders. Ask it to tell you when Oppenheimer finishes downloading: it asks first, and after your OK the download finishes within a few seconds and the notice arrives, as a real one would.

  • Long chats compact themselves instead of breaking. When the model's window is known, what's sent stays under about 70% of it: the oldest turns become a short summary (one tool-less call, cached for the next turns), the latest question always goes whole, and a quiet line in the chat says "Earlier messages summarised to make room". The page keeps the whole conversation. Within one answer, earlier lookups' results shrink when they pile up, and a request the model's server rejects as too long is sent once more cut right down, then answered in plain words instead of an error. assistant.compact: false turns it off.

Changed

  • Hacker News and RSS headlines are one column to scan: a small mark for where each story is from (its picture, the site's icon, else its first letter), the title on up to two lines, then the points, comments, site or source and how long ago. A card made two rows tall fills its height with as many stories as fit, so nothing is left empty at the foot.
  • The thermostat's colour says what it's doing: warm orange for heat, blue for cool, teal for auto, a quieter shade while it's idle, grey when off. It used to be the page's accent colour for heat.
  • view: masonry on a photos card, like an Immich album, keeps each photo's own shape and caption in the collage.
  • A narrow calendar's day is its title: "Thursday 5 November" sits on the header line at the size of every card's title, with the arrows at the right where other cards keep theirs, so the cards in a row line up. Wide, the month and the day are title-sized on that line too. In the plain agenda the arrows step a day at a time.
  • Mealie's meal plan (week) shows its photos landscape, the way food is photographed.
  • Navidrome's Most played keeps album covers square: as a list, each row's cover is square instead of cut to a poster, and as any gallery view (row, coverflow and the rest) the covers stay square. It brings up to 10 albums, so a gallery has some to flip through; the list still shows the top five. A ranked card can say aspect: square for this.
  • A widget that can't reach a service the page already shows as down is one problem, not two: with Mealie down and its meal plan stale, the line under the title says "Everything's running except Mealie" and asks "Why is Mealie down?" once, without "1 widget can't reach its service" or "What's wrong with Meal plan?" beside it.
  • Liquid glass is clearer and reads as thick glass. The blur behind cards is 4px instead of 10, so the wallpaper shows through sharp and in colour; words stay readable because the tint thickens where they need it, now in dark too (a dark card over a bright part of the wallpaper gets a deeper smoky tint, as a light card over a dark part already got a whiter one). The edge has a bevel, soft light just inside the top and left and a faint shade at the bottom, in place of the sheen. Material after kubai087's glasswork (MIT).
  • The page has one set of design foundations, and every card uses them. Chips and small buttons are one chip (32 high, one corner, 13px words; tonal, outline, chosen or quiet) and one button (28 or 36 high; quiet, tonal or solid), where there were a dozen styles: room and desktop part chips, All off, the vacuum, Pause, Updates, the suggestions on the overview and the AI tab, the camera tabs, a calendar's Join and the chat's Try again and New chat. Text sizes are eight steps instead of 26, card titles are bolder than the text under them again, corners follow one scale by role (cards and popovers, controls, chips, and artwork by its size), status dots are one size (legends a little larger), icons are 14, 16 or 18, and everything a keyboard reaches shows the same accent ring, the top bar's rings, the phone's dock and the chips included.
  • Every widget is the same card. Whatever it shows, it sits in one glass card with the same background, corners, edge, shadow and padding, and its title row is the first thing inside it: the icon, the title, the note and the card's buttons at the far right, at one height, so titles line up across a row. Nothing floats on the wallpaper any more: Now playing, Recently added, On this day, an album, books, games, documents and From your reading are cards with their artwork inside, and their Previous and Next (and See archived, and the reading pile's tools) are small quiet buttons in the title row instead of over the picture or the wallpaper. A row of artwork scrolls to the card's edges and fades there, its first poster lined up with everything else. Pictures that should feel big (the stream playing, a flashback photo, a saved page, Daylight's sky) are a panel inside the card; the weather keeps only a faint tint of the sky. Coming up and other tiles with artwork are glass tiles with the poster beside the words. Tiles and cards are the same distance apart. Downloading is a card like Hacker News, each download a row inside its padding whose progress fills it from the left, round at the ends. Titles are one size and weight everywhere, in chat and on tiles too; a calendar's date and the weather's sky are headlines, not titles. Weather and the calendar keep their title for screen readers only, and start at the same padding as the cards beside them (the calendar's date no longer touches the card's edge); the thermostat names its room.
  • Cards fill the height their row gives them instead of leaving an empty foot: Daylight's sky sits right under the next time and grows to fill the card, On this day's photos grow with a tall card, Downloading's rows share the height, a camera's picture grows a little into a taller card, and a stack of cards or a cover flow sits in the middle. A list (Updates, Most watched, Scheduled jobs and the like) keeps its own height instead of stretching to its row and growing an empty foot; the row lines up their tops. A row of photos fades at the card's edge rather than looking cut off. Cover flow opens with the one in the middle centred at every width (it used to sit off to the right). A stack of cards keeps its fan the right way round in a narrow card or on a phone, leans so the stack sits in the middle, and its Open and Archive buttons sit at the card's foot beside the words instead of over the page. Recent documents shows Paperless's icon.
  • The top bar's popovers have the same padding as a card: the calendar's date and Today no longer touch the edge. A calendar wide enough for the month beside the day (the popover, or a large card) puts the month on the left, so a meeting's Join sits at the right edge instead of in the middle. The forecast, a ring's graph and a live activity take the same padding.
  • An empty or unavailable card is the same card with a quiet middle: an icon and a line, centred, at about the height it has when full. Lists, cameras, the calendar, a thermostat that isn't reporting, the reading pile, Now playing, shelves and photos all say it this way.
  • Chat speaks the page's language: its cards have the page's title and corners with a little less padding, replies are the size of a list's words, the suggestions under an answer are the same chips as on the overview and the AI tab, and drives in chat read "58°C now" as they do on the page.
  • The numbers beside the chat are the overview's tiles, the same inset, size and graph. Big numbers (stats, charts, the thermostat, a schedule's next time) use the three number sizes.
  • header: false on a section drops its cards' title bars on its own tab too, not only on the overview, so the house and the desktop look the same in both places.
  • A meeting is the same blue everywhere: its ring, its countdown, the popover's Join and now the calendar's Join for the same meeting, a blue-tinted chip instead of a grey one. The blue is a little deeper in light mode so it reads on white glass, and the forecast's rain bars have their own named colour too.
  • Artwork corners follow its size: small thumbnails (downloads, Most watched, the year so far, camera stills) are 6px, posters, covers, photos and reading cards in a row 12px, and a picture that fills a card (spotlight, an album, the photo mosaic, a camera) 16px. A thumbnail is no longer rounder than the poster beside it.
  • In light mode, dark artwork panels (Now playing, a photo, reading cards) take the same lit edge and soft shadow as the white glass around them, so a row reads as one set rather than a checkerboard. From your reading turns light: the saved page fades to white under dark words.
  • The top bar's rings are evenly spaced: every ring has the same room whatever its label says (a long one is cut short inside it), and the line between what's live and the system's rings takes no room of its own.
  • A ring's graph popover looks as it did before: the bigger number, and the graph as wide as it was, with the card's padding and the newer times.
  • An album (view: album, Immich's albums) is a carousel of its photos: large, each at its own shape, with the next one peeking. The one you're on is lit and says where and when, the title row counts where you are ("3 / 9") beside Previous and Next, and it moves by dragging, throwing, a finger or the arrow keys, each photo drifting a little inside its frame as it passes. With reduced motion it's a plain row with every caption showing. It fills its card at any width and grows with a taller row.
  • A year heatmap (Viewing) in half a page or on a phone folds into two lines, half a year each with its months above, so the days stay big enough to read and the card fills.
  • The wall's tiles keep their graph between the name and the number, so it no longer runs through "20 of 64 GB" or "37°C" at any screen size.
  • Light mode keeps its chips and quiet buttons: Pi-hole's Most blocked and Pause, Updates, the container plates, the chat's Try again and New chat and the first-run choices had a white fill that vanished on white glass. Fills now follow the theme's ink, and a healthy status dot reads green in light mode.
  • Times, dates and lengths of time read one way everywhere, and follow format and your language on what the server writes too (calendar times, "next" runs, "paused till", weather hours), not only on the page. A range is "8:25–8:50 AM" in the calendar and the meeting's ring alike; a heading date is in words with no "5th" ("Thursday 5 November"); small print uses format.date. A length of time is short in rings, chips and lists ("2h 37m", "50m", "3d", "5m ago", "41m left", the same on a stream's card and its ring) and long in sentences ("Powered on 3 years"). With format.locale: auto, the server follows the first browser to open the page, as it does for the time zone.
  • A number and its unit are drawn one way: no space before ° and %, a thin one before a word, the unit muted and smaller in step with the number ("18%", "20.0°C", "58 GB"). Temperatures keep their letter (a PC part's chip says "42°C"); the weather's own degrees stay bare. The wall's forecast says "High 5° · Low -4°" like the page.
  • Every progress bar on the page is drawn the same way now, where there were a dozen styles: fully rounded on one faint track, in three thicknesses, and coloured by one rule (a status or the thing's own colour first, then the leader of a set in the accent and the rest grey). Most watched takes its posters' colours like the race beside it, Who's watching and the activity popovers have thicker bars, the race's timeline matches its bars, and downloads keep their row-wide fill with a clear edge. The year in review, drive temperatures, the forecast's ranges and a schedule's day line follow the same sizes and track, and the day line now shows in light mode too.
  • The context meter's hint past three quarters says Valet summarises the oldest messages by itself; a new chat is optional.
  • A meeting's popover is plainer and compact: the title with "In 4m" or "Now · 20m left" beside it, the time, small initials and names on one line, a progress bar only while it's on, and one button that names the service ("Join Google Meet"). No icon tile.
  • Rankings say how much, not how far along: the race and Most watched draw their bars with no track and squarer ends, the others in a quiet grey and only the leader in its poster's colour, and the race's names sit inside taller bars. Its month and what it measures moved to the title row.
  • The race card has more presence: thicker rounded bars on a faint track, each in its poster's colour (the leader's the strongest; posters without much colour keep grey bars and the accent leader), larger posters and bolder names. Its timeline is a proper scrubber that fills as the year plays, with a clear play and pause button, and the arrow keys step a month at a time (Home and End jump to the ends).
  • The chat's header is one line: the assistant's name, then the model and its context meter, whose place is kept so nothing moves when the numbers arrive.
  • The context meter knows a local model's window by itself when its server's model list says it (max_model_len, context_length, as vLLM and llama.cpp do), so assistant.contextWindow is only needed when it doesn't.
  • Shelves of covers use focus, a modern carousel, where they used Cover Flow or a spotlight: the artwork large in the middle, the ones either side peeking in smaller and dimmer, and the middle one's colours softly lit behind it. It snaps, a mouse can throw it, and a click on one at the side brings it to the middle. Recently added (Plex through Tautulli, Jellyfin, Emby), games, books, audiobooks and music use it.
  • Rows of artwork (shelves, the documents desk, the row beside a spotlight) are built on Blossom Carousel: the browser's own scrolling and snapping, a throw with momentum on a mouse, Previous and Next buttons that name the row, and the arrow keys. Asking for reduced motion makes them jump instead of glide, and turns focus into a plain row.
  • A live update that brings back the same things no longer redraws a row of artwork.
  • Every carousel is now the same Blossom Carousel row, including the cameras' strip of events, which gains Previous and Next buttons on a larger screen, arrow keys, a mouse throw and a fade at whichever edge has more. focus, coverflow and cards share one way of moving by one; nothing about how any of them look or which view names work has changed.
  • In light mode, the selected tab is a dark pill with a white icon, like dark mode's white one, instead of the accent colour.
  • Light mode over a wallpaper is light on every card. A card over a darker part of the wallpaper used to turn dark with light text in liquid glass; now it keeps its light glass and dark text and thickens its white tint (and, in liquid glass, its blur) until the words read. Frosted light glass does the same.

Fixed

  • Light mode's service icons no longer vanish: a white logo (Karakeep) is drawn in the page's ink, and a pale one with colours of its own (Uptime Kuma) sits on a small dark plate. The same goes the other way in dark mode for black logos (Miniflux, Tailscale, Vaultwarden). It works for your own icons too, in the service list, Services, Updates, Containers and ⌘K.
  • Scrolling past the house and the PC on a phone no longer stutters. The models look the same but ask far less of the browser: about 680 layers instead of 1,760 when both are on screen, none while they're off screen, and the house only draws the sides of furniture that face you. A live update that changes nothing the model shows no longer touches it.
  • The house is simpler underneath, so scrolling past it is smoother still, on a phone and on a computer. It has half the pieces it had (about 240 drawn instead of 480): the small things on furniture (cushions, a duvet and pillows, a keyboard, a basin, a counter top) are drawn on its surface, legs and screens are single panels, plants are a pot and a bush, a wall two rooms share is drawn once, and a lamp's beam is one sheet that faces you. It looks the same at a glance, and rooms, lights and the robot work as before.
  • The demo answers every question its page suggests, including "What's Spider-Man: Brand New Day about?", and a test keeps it that way.
  • No flash of light before dark glass over a wallpaper on load: the page remembers whether it had a wallpaper and decides its theme before the first paint.
  • On the day the clocks go forward or back, "Tomorrow" no longer shows as "Today" (or the day after as a weekday) on upcoming episodes, films and other dates.
  • Two saves of the rules at once could leave rules.json half-written for a moment, and a config reload right then would start with no rules. Saves of the rules and the timeline now go one at a time.