use tauri::{AppHandle, WebviewWindow, WebviewWindowBuilder};

pub fn main(app: AppHandle): Result<WebviewWindow> {
    let builder = WebviewWindowBuilder::new()
        .title("Tauri App")
        .min_inner_size(1280.0, 720.0)
        .inner_size(1280.0, 800.0);

    #[cfg(target_os = "macos")]
    let builder = {
        use tauri::{TitleBarStyle, LogicalPosition};
        builder
            .title_bar_style(TitleBarStyle::Overlay)
            .hidden_title(true)
            .traffic_light_position(LogicalPosition::new(18.0, 24.0))
    };

    #[cfg(target_os = "windows")]
    let builder = {
        builder.decorations(false).shadow(true)
    };

    Ok(builder.build(app)?);
}

use tauri_plugin_frameless_window::WebviewWindowBuilderExt;

let builder = WebviewWindowBuilder::frameless(app, label, url)
    .title("uPilot")
    .transparent(true)
    .min_inner_size(1280.0, 720.0)
    .inner_size(1280.0, 800.0);

#[cfg(target_os = "macos")]
let builder = {
    use tauri::LogicalPosition;
    builder.traffic_light_position(LogicalPosition::new(18.0, 24.0))
};

#[cfg(target_os = "windows")]
let builder = {
    use tauri_plugin_window_controls::WindowControlsBuilderExt;
    builder.title_bar_height(44)
};

builder.build()?;

let builder = WebviewWindowBuilder::new();

...

#[cfg(target_os = "macos")]
let builder = {
    use tauri::window::Effect::Sidebar;
    builder.effects(EffectsBuilder::new().effect(Sidebar).build())
};

#[cfg(target_os = "windows")]
let builder = {
    use tauri::window::Effect::Mica;
    builder.effects(EffectsBuilder::new().effect(Mica).build())
};

use tauri_plugin_frameless_window::WebviewWindowBuilderExt;
let builder = WebviewWindowBuilder::frameless();

...

#[cfg(target_os = "macos")]
let builder = {
    use tauri::window::Effect::Sidebar;
    builder.effect(Sidebar)
};

#[cfg(target_os = "windows")]
let builder = {
    use tauri::window::Effect::Mica;
    builder.effect(Mica)
};

let builder = WebviewWindowBuilder::new().visible(false);

import { getCurrentWindow } from '@tauri-apps/api/window';
import { useEffect } from 'react';
import type { Route } from '+/types/main';

// React Router v7에서는 페이지가 렌더링되기 전에 clientLoader()가 호출되어,
// useEffect를 사용하지 않고 비동기 데이터 로드가 가능합니다.
export async function clienLoader() {
  return getSomeAsyncData();
}

// React Router v7이 자동 생성하는 타입을 활용하여 loaderData를 상속받습니다.
export default function MainPage({ loaderData }: Route.ComponentProps) {
  useEffect(() => {
    getCurrentWindow().show();
  }, []);
}

tauri::Builder::default()
  .plugin(tauri_plugin_macos_refresh_rate::init())
  .run(tauri::generate_context!())?;

use tauri_plugin_persistent_window::PersistentExt;
let builder = WebviewWindowBuilder::new()
...

let window = builder.build()?;
window.set_persistent(true);
Ok(())

import { getCachedSymbol, getSymbol } from 'tauri-plugin-system-symbols';

const close = getCachedSymbol('\uE8BB', 10) ?? (await getSymbol('\uE8BB', 10));
const history = await getSymbol('􂰵', 16); // square.and.arrow.down.badge.clock

import { platform } from '@tauri-apps/plugin-os';
import { type ComponentProps, useLayoutEffect, useState } from 'react';
import { getCachedSymbol, getSymbol } from 'tauri-plugin-system-symbols';

/**
 * Renders a platform system symbol as an SVG.
 *
 * @param macos SF Symbols name used when `platform()` is `"macos"`.
 * @param windows Segoe glyph used when `platform()` is `"windows"`.
 * @param size Target icon size in CSS pixels. Defaults to `16`.
 * @param props
 */
export default function Symbol({ macos, windows, size, ...props }: Props) {
  const key = platform() === 'macos' ? macos : windows;
  const [current, setCurrent] = useState(() => ({ key, size, path: getCachedSymbol(key, size) }));

  useLayoutEffect(() => {
    if (current.key === key && current.size === size && current.path) return;
    let active = true;

    getSymbol(key, size).then((path) => {
      if (active) setCurrent({ key, size, path });
    });

    return () => {
      active = false;
    };
  }, [key, size]);

  return (
    <svg
      fill="currentColor"
      height={size}
      viewBox={`0 0 ${size} ${size}`}
      width={size}
      data-symbol={key}
      {...props}
    >
      {current.path?.map((props, index) => (
        <path key={index} {...props} />
      ))}
    </svg>
  );
}

interface Props extends ComponentProps<'svg'> {
  macos: string;
  windows: string;
  size: number;
}

import type { ComponentProps } from 'react';
import { NavLink } from 'react-router';
import { platform } from '@tauri-apps/plugin-os';
import { cn } from '@/lib/utils/shadcn';

export default function SidebarLink({ className, ...props }: ComponentProps<typeof NavLink>) {
  if (platform() === 'windows') {
    return (
      <NavLink
        {...props}
        className={({ isActive }) =>
          cn(
            'relative flex items-center text-sm leading-normal',
            'mx-1 h-8.5 rounded-sm px-3 gap-3 mb-1 hover:bg-foreground/4',
            'before:absolute before:left-0 before:h-4 before:w-0.75 before:rounded-full',
            'before:bg-transparent before:transition-colors',
            isActive && 'bg-foreground/6 before:bg-green-500',
            className,
          )
        }
      />
    );
  }

  return (
    <NavLink
      {...props}
      className={({ isActive }) =>
        cn(
          'flex items-center text-sm mb-px font-medium cursor-default',
          'mx-2.5 text-[13px] px-2.5 gap-2.25 rounded-sm h-8',
          '[&>svg]:text-green-500',
          isActive && 'bg-foreground/10 font-bold',
          className,
        )
      }
    />
  );
}

@custom-variant macos (&:where([data-platform="macos"], [data-platform="macos"] *));
@custom-variant windows (&:where([data-platform="windows"], [data-platform="windows"] *));
@custom-variant linux (&:where([data-platform="linux"], [data-platform="linux"] *));

<aside
  data-tauri-drag-region
  className={cn(
    'w-69 flex items-center justify-between macos:justify-end',
    'transition-[width] duration-250 ease-out',
    !open && 'windows:w-20 macos:w-32 fullscreen:w-10', // 플랫폼별 분기
  )}
>