Show each site's own icon; restore the native title bar
Both previous attempts asked a question about a domain, and a domain does not know which product it is serving. Google's favicon service returned a marketing site's icon for anything behind a login and nothing for a private host; Simple Icons returned one flat brand mark where the real one is multicoloured and, for Gmail, carries the unread count. The page already holds the answer - fetched, authenticated, current. The injected script now reads link[rel~="icon"] and reports the best one: largest declared sizes wins, an Apple touch icon counts as 180, and an .ico is penalised as usually the 16px tab icon. It rechecks on the same tick as the unread count, which is when a site like Gmail redraws its icon with a badge. The URL is stored, so the nav is right at launch rather than blank until every page has loaded. The custom frame is gone with it: ordinary macOS title bar, traffic lights where every other window puts them, and the bar following the app's Light/Dark choice through set_theme. A window that behaves like a window beats one that looks bespoke.
This commit is contained in:
+2
-41
@@ -1,6 +1,5 @@
|
||||
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
|
||||
import * as api from "./api";
|
||||
import Nav from "./components/Nav";
|
||||
@@ -16,8 +15,6 @@ export default function App() {
|
||||
const [focusHidden, setFocusHidden] = useState<string | null>(null);
|
||||
const [theme, setTheme] = useAppearance("system");
|
||||
const [unread, setUnread] = useState<Record<string, number>>({});
|
||||
const [fullscreen, setFullscreen] = useState(false);
|
||||
const fullscreenRef = useRef(false);
|
||||
const [backdrop, setBackdrop] = useState<string | null>(null);
|
||||
|
||||
const stageRef = useRef<HTMLDivElement>(null);
|
||||
@@ -29,23 +26,6 @@ export default function App() {
|
||||
|
||||
const collapsed = config?.settings.navCollapsed ?? false;
|
||||
|
||||
/* The window has no frame of its own, so in a normal window the shell keeps
|
||||
a margin around itself: somewhere to grab that is not a web page, and the
|
||||
only way to move or place the window by hand. Full screen has no use for
|
||||
it and gives the room back. */
|
||||
useEffect(() => {
|
||||
const w = getCurrentWindow();
|
||||
const check = () =>
|
||||
void w.isFullscreen().then((f) => {
|
||||
fullscreenRef.current = f;
|
||||
setFullscreen(f);
|
||||
});
|
||||
check();
|
||||
const un = w.onResized(check);
|
||||
return () => {
|
||||
void un.then((f) => f());
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
api.getConfig().then((c) => {
|
||||
@@ -67,9 +47,7 @@ export default function App() {
|
||||
const el = stageRef.current;
|
||||
if (!el) return;
|
||||
const r = el.getBoundingClientRect();
|
||||
// The radius goes with it: an app is a native view, so the container's
|
||||
// rounded corners cannot clip it and its own layer has to be told.
|
||||
void api.setStage(r.x, r.y, r.width, r.height, fullscreenRef.current ? 0 : 12);
|
||||
void api.setStage(r.x, r.y, r.width, r.height, 0);
|
||||
}, []);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
@@ -94,9 +72,6 @@ export default function App() {
|
||||
void api.bootstrap();
|
||||
}, [config, report]);
|
||||
|
||||
useEffect(() => {
|
||||
report();
|
||||
}, [fullscreen, report]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeId) void api.setActive(activeId);
|
||||
@@ -186,20 +161,8 @@ export default function App() {
|
||||
|
||||
if (!config) return null;
|
||||
|
||||
const frame = fullscreen ? 0 : 6;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="flex h-screen bg-slate-200 dark:bg-black"
|
||||
style={{ padding: frame }}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
"flex min-w-0 flex-1 overflow-hidden " +
|
||||
(fullscreen ? "" : "rounded-xl border border-slate-300 dark:border-slate-800")
|
||||
}
|
||||
>
|
||||
<div className="flex h-screen">
|
||||
<Nav
|
||||
config={config}
|
||||
activeId={activeId}
|
||||
@@ -241,8 +204,6 @@ export default function App() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{settingsOpen && (
|
||||
<Settings
|
||||
config={config}
|
||||
|
||||
Reference in New Issue
Block a user